/*
Theme Name: André Feller – Beratung
Theme URI: https://andrefeller-beratung.de
Author: André Feller
Author URI: https://andrefeller-beratung.de
Description: Ruhiges, geerdetes Block-Theme für systemische Beratung & Coaching. Reflexion · Transformation · Begleitung. Schriften lokal eingebettet (datenschutzfreundlich).
Requires at least: 6.4
Tested up to: 7.0
Requires PHP: 7.4
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: andre-feller
Tags: business, blog, one-column, block-patterns, full-site-editing, custom-colors, custom-menu, editor-style
*/

/* ============================================================
   Schriften – lokal eingebettet (kein externer Aufruf)
   ============================================================ */
@font-face{
  font-family:'Spectral';
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/Spectral-Regular.woff2') format('woff2');
}
@font-face{
  font-family:'Spectral';
  font-style:normal;
  font-weight:500;
  font-display:swap;
  src:url('assets/fonts/Spectral-Medium.woff2') format('woff2');
}
@font-face{
  font-family:'Spectral';
  font-style:italic;
  font-weight:400;
  font-display:swap;
  src:url('assets/fonts/Spectral-Italic.woff2') format('woff2');
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url('assets/fonts/HankenGrotesk-VF.woff2') format('woff2-variations');
}

/* ============================================================
   Design-Variablen
   ============================================================ */
:root{
  --paper:#E9EBE6;
  --paper-2:#F3F4F0;
  --ink:#19211E;
  --ink-2:#4A544C;
  --line:#D3D7CE;
  --accent:#2D5C54;
  --accent-2:#5E7C73;
  --accent-wash:#D9E2DD;

  --serif:'Spectral', Georgia, serif;
  --sans:'Hanken Grotesk', system-ui, -apple-system, sans-serif;

  --pad:clamp(4rem, 10vw, 7.5rem);
  --gutter:clamp(1.3rem, 5vw, 2rem);
  --content:760px;
}

/* ============================================================
   Basis
   ============================================================ */
body.wp-site-blocks,
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:clamp(1.02rem, 0.97rem + 0.25vw, 1.14rem);
  line-height:1.65;
  font-weight:400;
  margin:0;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:500;
  line-height:1.1;
  letter-spacing:-0.01em;
}
a{color:var(--accent);}
img{max-width:100%;height:auto;}

:where(a):focus-visible,
:where(button):focus-visible{
  outline:2.5px solid var(--accent);
  outline-offset:3px;
}

/* Konstrukt-Breite */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
  max-width:var(--content);
  margin-inline:auto;
}
.alignwide{max-width:1140px;margin-inline:auto;}

/* Sektionen */
.section{
  padding-block:var(--pad);
  padding-inline:var(--gutter);
}

/* Augenbraue */
.eyebrow{
  font-family:var(--sans);
  font-size:0.79rem;
  letter-spacing:0.2em;
  text-transform:uppercase;
  font-weight:600;
  color:var(--accent);
  display:flex;
  align-items:center;
  gap:0.7rem;
  margin:0 0 1.3rem;
}
.eyebrow::before{
  content:"";
  width:18px;height:18px;border-radius:50%;
  border:1.6px solid var(--accent);
  box-shadow:inset 0 0 0 4px var(--paper), inset 0 0 0 6px var(--accent);
  flex:none;
}
.eyebrow.is-centered{justify-content:center;}

/* Buttons */
.wp-block-button__link{
  font-family:var(--sans);
  font-weight:600;
  font-size:1rem;
  padding:0.85rem 1.5rem;
  border-radius:999px;
  background:var(--accent);
  color:#fff;
  border:1px solid var(--accent);
  transition:transform .2s ease, background .2s ease;
}
.wp-block-button__link:hover{background:#23493f;transform:translateY(-2px);}
.wp-block-button.is-ghost .wp-block-button__link{
  background:transparent;color:var(--accent);border-color:var(--accent);
}
.wp-block-button.is-ghost .wp-block-button__link:hover{background:var(--accent-wash);color:var(--accent);}

/* ============================================================
   Header
   ============================================================ */
.site-header{
  position:sticky;top:0;z-index:50;
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
  padding-inline:var(--gutter);
}
.head-inner{
  max-width:1140px;margin-inline:auto;
  display:flex;align-items:center;justify-content:space-between;
  gap:1rem;min-height:68px;
}
.brand a,.brand{
  font-family:var(--serif);
  font-size:1.18rem;font-weight:600;letter-spacing:-0.01em;
  color:var(--ink);text-decoration:none;
}
.brand .sub{color:var(--accent);font-weight:400;}

.wp-block-navigation{font-family:var(--sans);}
.wp-block-navigation a,
.wp-block-navigation .wp-block-navigation-item__content{
  color:var(--ink-2);font-size:0.97rem;font-weight:500;text-decoration:none;
}
.wp-block-navigation a:hover{color:var(--ink);}
.wp-block-navigation__responsive-container.is-menu-open{background:var(--paper);}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
  color:var(--ink);font-size:1.1rem;
}

/* ============================================================
   Hero
   ============================================================ */
.hero{
  position:relative;overflow:hidden;
  padding-block:clamp(4.5rem, 12vw, 9rem) var(--pad);
  padding-inline:var(--gutter);
}
.hero-inner{position:relative;z-index:2;max-width:var(--content);margin-inline:auto;}
.hero-title.wp-block-heading{
  font-size:clamp(2.7rem, 1.9rem + 6vw, 5.4rem);
  line-height:0.99;font-weight:500;margin:0 0 1.7rem;letter-spacing:-0.015em;
}
.hero-title em{font-style:italic;font-weight:400;color:var(--accent);}
.hero-lead{
  font-size:clamp(1.16rem, 1.05rem + 0.5vw, 1.4rem);
  color:var(--ink-2);line-height:1.6;max-width:34rem;margin:0;
}
.hero .wp-block-buttons{margin-top:2.2rem;gap:0.9rem;}

.resonance{
  position:absolute;top:-12%;right:-16%;
  width:min(82vw,620px);aspect-ratio:1;z-index:1;pointer-events:none;
}
.resonance::before{
  content:"";position:absolute;inset:18%;border-radius:50%;
  background:radial-gradient(circle at 50% 50%, var(--accent-wash), transparent 68%);
  filter:blur(10px);
}
.resonance svg{position:relative;width:100%;height:100%;display:block;}
.resonance circle{fill:none;stroke:var(--accent);}

/* ============================================================
   Sektion-Hintergründe
   ============================================================ */
.section--band{
  background:var(--paper-2);
  border-block:1px solid var(--line);
}

/* Über-mich-Teaser */
.intro-cols{display:grid;gap:1.6rem;max-width:1140px;margin-inline:auto;}
.intro-cols h2{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);margin:0 0 .4rem;}
.intro-cols p{color:var(--ink-2);margin:0;}
.link-more a,.link-more{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.2rem;
  color:var(--accent);font-weight:600;text-decoration:none;
}

/* Leitfrage */
.credo{max-width:54rem;margin-inline:auto;}
.credo-q{
  font-family:var(--serif);font-style:italic;font-weight:400;
  font-size:clamp(1.9rem,1.3rem + 3vw,3.2rem);line-height:1.18;
  letter-spacing:-0.01em;margin:0;color:var(--ink);
}
.credo-note{margin-top:1.4rem;color:var(--ink-2);font-size:1.1rem;}

/* Arbeitsfelder */
.fields-head{max-width:1140px;margin:0 auto 2.6rem;}
.fields-head h2{font-size:clamp(1.7rem,1.3rem + 1.6vw,2.5rem);margin:0;}
.cards.wp-block-columns{max-width:1140px;margin-inline:auto;gap:1.6rem;}
.card.wp-block-column{
  background:var(--paper);border:1px solid var(--line);border-radius:14px;
  padding:clamp(1.6rem,1rem + 2vw,2.4rem);
  transition:border-color .25s ease, transform .25s ease;
}
.card.wp-block-column:hover{border-color:var(--accent-2);transform:translateY(-3px);}
.card-num{
  font-family:var(--serif);font-size:.95rem;color:var(--accent);
  display:flex;align-items:center;gap:.7rem;margin:0 0 1rem;letter-spacing:.03em;
}
.card-num::before{content:"";width:30px;height:1.6px;background:var(--accent);}
.card h3{font-size:1.5rem;margin:0 0 .7rem;}
.card p{color:var(--ink-2);margin:0;}

/* Kontakt */
.contact{max-width:50rem;margin-inline:auto;text-align:center;}
.contact h2{font-size:clamp(1.8rem,1.3rem + 2vw,2.8rem);margin:0 0 1rem;}
.contact p{color:var(--ink-2);max-width:34rem;margin-inline:auto;}
.contact .wp-block-buttons{justify-content:center;margin-top:2rem;}
.contact .mail{display:block;margin-top:1.3rem;}
.contact .mail a{color:var(--accent);font-weight:600;border-bottom:1.5px solid var(--accent-2);text-decoration:none;}

/* ============================================================
   Footer (bewusst anders als Header: dunkel)
   ============================================================ */
.site-footer{
  background:var(--ink);color:#C7CEC9;
  padding-inline:var(--gutter);
}
.foot-inner{
  max-width:1140px;margin-inline:auto;
  padding-block:clamp(3rem,7vw,4.5rem);
  display:grid;gap:2.4rem;
}
.foot-brand{font-family:var(--serif);font-size:1.3rem;color:#F2F4F0;font-weight:500;margin:0;}
.foot-tag{margin:.7rem 0 0;color:#97A39C;max-width:24rem;font-size:.98rem;}
.foot-cols{display:grid;grid-template-columns:1fr 1fr;gap:2rem;}
.foot-cols h4{
  font-family:var(--sans);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
  color:#7E8B83;margin:0 0 .9rem;font-weight:600;
}
.foot-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem;}
.foot-cols a{color:#C7CEC9;text-decoration:none;font-size:.98rem;}
.foot-cols a:hover{color:#fff;}
.foot-cols .wp-block-page-list a{color:#C7CEC9;}
.foot-bottom{
  max-width:1140px;margin-inline:auto;
  border-top:1px solid #2C3531;padding:1.5rem 0;
  display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;justify-content:space-between;
  color:#7E8B83;font-size:.85rem;
}

/* ============================================================
   Responsive – Tablet & Desktop
   ============================================================ */
@media (min-width:760px){
  .intro-cols{grid-template-columns:1.1fr 1fr;gap:3.2rem;align-items:start;}
  .cards.wp-block-columns{gap:1.8rem;}
  .foot-inner{grid-template-columns:1.3fr 1fr;gap:3rem;align-items:start;}
}

/* ============================================================
   Bewegung – ruhig, respektiert Nutzereinstellung
   ============================================================ */
@keyframes rise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.85;}50%{transform:scale(1.04);opacity:1;}}
.hero-inner > *{animation:rise .8s cubic-bezier(.2,.7,.3,1) backwards;}
.hero-inner > *:nth-child(1){animation-delay:.05s;}
.hero-inner > *:nth-child(2){animation-delay:.16s;}
.hero-inner > *:nth-child(3){animation-delay:.28s;}
.hero-inner > *:nth-child(4){animation-delay:.40s;}
.resonance{animation:breathe 9s ease-in-out infinite;transform-origin:center;}

@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;}
}