:root{
/* Graphit (Hintergrund) */
--ink:#1A2128;
--ink-soft:#29333F;
--paper:#efece4;
--paper-dim:#e4e0d5;
/* Teal — Part "Projektgestaltung" (ersetzt vormals Brass/Gold) */
--brass:#1FC8B3;
--brass-light:#5DE6D5;
/* Amber — Part "Sichtbarmacher"/Werbemedien (ersetzt vormals Steel/Blau) */
--steel:#F4B400;
--steel-light:#FFD151;
--sage:#6b8f71;
--line: rgba(239,236,228,0.14);
--line-dark: rgba(26,33,40,0.12);
--max: 1180px;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
background:var(--ink);
color:var(--paper);
font-family:'Source Serif 4', serif;
font-size:17px;
line-height:1.6;
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.eyebrow,.mono,nav,.btn,.card-title,.stat-num{font-family:'Space Grotesk',sans-serif;}
.mono{font-family:'JetBrains Mono',monospace;}
a{color:inherit;}
img,svg{display:block; max-width:100%;}
.wrap{max-width:var(--max); margin:0 auto; padding:0 32px;}
section{position:relative;}

/* NAV */
header{
position:sticky; top:0; z-index:50;
background:rgba(20,24,31,0.86);
backdrop-filter:blur(10px);
border-bottom:1px solid var(--line);
}
nav{
display:flex; align-items:center; justify-content:space-between;
padding:18px 32px; max-width:var(--max); margin:0 auto;
}
.brand{
display:flex; flex-direction:column; line-height:1.1;
}
.brand strong{font-size:15px; letter-spacing:0.04em; font-weight:600;}
.brand span{font-size:11px; letter-spacing:0.08em; color:var(--brass-light); text-transform:uppercase; margin-top:3px;}
.navlinks{display:flex; gap:34px; font-size:14px; letter-spacing:0.02em;}
.navlinks a{opacity:0.8; text-decoration:none; transition:opacity .2s;}
.navlinks a:hover{opacity:1;}
.nav-cta{
font-size:13px; padding:9px 18px; border:1px solid var(--brass-light);
border-radius:2px; text-decoration:none; letter-spacing:0.03em;
transition: background .2s, color .2s;
}
.nav-cta:hover{background:var(--brass-light); color:var(--ink);}
.menu-toggle{display:none;}

/* HERO — mirrored split, signature element */
.hero{
padding:120px 32px 90px;
max-width:var(--max); margin:0 auto;
display:grid; grid-template-columns:1fr 1px 1fr; gap:0;
align-items:start;
}
.hero-div{background:linear-gradient(to bottom, transparent, var(--brass-light) 30%, var(--brass-light) 70%, transparent);}
.hero-col{padding:0 44px;}
.hero-col.left{padding-left:0; text-align:left;}
.hero-col.right, .hero-col.right *{ text-align:right !important; }
.hero-col.right{padding-right:0;}
.eyebrow{
font-size:12px; letter-spacing:0.14em; text-transform:uppercase;
color:var(--brass-light); margin-bottom:18px; display:block;
}
.hero-col.right .eyebrow{color:var(--steel-light);}
.hero h1{
font-size:clamp(2rem, 4vw, 2.7rem);
font-weight:600; line-height:1.08; letter-spacing:-0.01em;
margin-bottom:18px;
}
.hero p{
font-size:16px; opacity:0.78; max-width:34ch; line-height:1.6;
}
.hero-col.right p{margin-left:auto;}
.hero-foot{
max-width:var(--max); margin:56px auto 0; padding:28px 32px 64px;
border-top:1px solid var(--line);
display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:20px;
}
.hero-foot p{opacity:0.6; font-size:14.5px; max-width:52ch;}
.btn-primary{
display:inline-block; background:var(--brass-light); color:var(--ink);
padding:14px 26px; border-radius:2px; text-decoration:none;
font-size:14px; letter-spacing:0.03em; font-weight:600;
transition:transform .2s, background .2s;
}
.btn-primary:hover{transform:translateY(-2px); background:#e6c896;}

/* SECTION LABEL */
.sec-head{
display:flex; align-items:baseline; justify-content:space-between;
margin-bottom:52px; flex-wrap:wrap; gap:14px;
border-bottom:1px solid var(--line); padding-bottom:22px;
}
.sec-head h2{font-size:clamp(1.6rem,2.6vw,2.1rem); font-weight:600; letter-spacing:-0.01em;}
.sec-head .eyebrow{margin-bottom:0;}
.sec-note{font-size:14px; opacity:0.55; max-width:38ch; text-align:right;}

/* LEISTUNGEN — twin track */
.leistungen{padding:110px 0 100px; background:var(--paper); color:var(--ink);}
.leistungen .line{border-color:var(--line-dark);}
.leistungen .sec-head{border-color:var(--line-dark);}
.track-grid{display:grid; grid-template-columns:1fr 1fr; gap:36px;}
.track{
border:1px solid var(--line-dark); border-radius:3px; overflow:hidden;
background:var(--paper); position:relative;
}
.track-head{
padding:30px 30px 24px; border-bottom:1px solid var(--line-dark);
position:relative; overflow:hidden;
}
.track-head::after{
content:''; position:absolute; inset:0;
background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.5) 50%, transparent 60%);
transform:translateX(-120%);
transition:transform .7s ease;
}
.track:hover .track-head::after{transform:translateX(120%);}
.track-tag{font-size:11px; letter-spacing:0.12em; text-transform:uppercase; color:var(--brass); margin-bottom:10px; display:block;}
.track.werbe .track-tag{color:var(--steel);}
.track-head h3{font-size:1.5rem; font-weight:600; margin-bottom:10px; letter-spacing:-0.01em;}
.track-head p{font-size:14.5px; opacity:0.7; max-width:44ch;}
.track-body{padding:26px 30px 30px;}
.field{
display:flex; gap:14px; padding:14px 0; border-bottom:1px solid var(--line-dark);
}
.field:last-child{border-bottom:none; padding-bottom:0;}
.field .num{font-family:'JetBrains Mono',monospace; font-size:12px; color:var(--brass); padding-top:2px; flex-shrink:0; width:22px;}
.track.werbe .field .num{color:var(--steel);}
.field .txt strong{display:block; font-size:15px; font-weight:600; margin-bottom:3px; font-family:'Space Grotesk',sans-serif;}
.field .txt span{font-size:13.5px; opacity:0.65;}
.track-cta{
margin-top:26px; display:inline-block; font-size:13.5px; letter-spacing:0.02em;
text-decoration:none; border-bottom:1px solid var(--brass); padding-bottom:2px; font-weight:500;
}
.track.werbe .track-cta{border-color:var(--steel);}

/* ÜBER MICH */
.about{padding:110px 0; background:var(--ink);}
.about-grid{display:grid; grid-template-columns:0.85fr 1.15fr; gap:70px; align-items:start;}
.portrait{
aspect-ratio:4/5; border-radius:3px; border:1px solid var(--line);
background:
    radial-gradient(circle at 30% 20%, rgba(176,141,87,0.25), transparent 55%),
    linear-gradient(160deg, var(--ink-soft), var(--ink));
position:relative; overflow:hidden;
display:flex; align-items:flex-end; padding:26px;
}
.portrait .mono{font-size:12px; opacity:0.55; letter-spacing:0.04em;}
.about h2{font-size:clamp(1.7rem,3vw,2.3rem); font-weight:600; margin-bottom:22px; letter-spacing:-0.01em; line-height:1.2;}
.about p{opacity:0.82; margin-bottom:18px; max-width:60ch;}
.values{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px;}
.value{border-top:1px solid var(--line); padding-top:16px;}
.value strong{font-family:'Space Grotesk',sans-serif; font-size:14.5px; display:block; margin-bottom:8px; color:var(--brass-light);}
.value span{font-size:13.5px; opacity:0.65;}

/* REFERENZEN */
.refs{padding:110px 0; background:var(--paper); color:var(--ink);}
.refs .sec-head{border-color:var(--line-dark);}
.ref-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-dark); border:1px solid var(--line-dark);}
.ref-card{background:var(--paper); padding:32px 28px; min-height:260px; display:flex; flex-direction:column; justify-content:space-between;}
.ref-tag{font-size:11px; letter-spacing:0.1em; text-transform:uppercase; color:var(--steel); margin-bottom:auto; padding-bottom:24px;}
.ref-card h3{font-size:1.15rem; font-weight:600; margin-bottom:10px; font-family:'Space Grotesk',sans-serif;}
.ref-card p{font-size:14px; opacity:0.68;}
.ref-card.placeholder{justify-content:center; align-items:center; text-align:center;}
.ref-card.placeholder .mono{font-size:12.5px; opacity:0.45; line-height:1.7;}

/* ABLAUF */
.process{padding:110px 0; background:var(--ink);}
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:0; border-top:1px solid var(--line);}
.step{padding:34px 30px 0; border-right:1px solid var(--line);}
.step:last-child{border-right:none;}
.step .mono{font-size:12px; color:var(--brass-light); margin-bottom:16px; display:block;}
.step h3{font-size:1.2rem; font-weight:600; margin-bottom:12px; letter-spacing:-0.01em;}
.step p{font-size:14.5px; opacity:0.68; max-width:34ch;}

/* KONTAKT */
.kontakt{padding:120px 0 100px; background:var(--paper); color:var(--ink);}
.kontakt-grid{display:grid; grid-template-columns:1fr 1fr; gap:70px;}
.kontakt h2{font-size:clamp(1.8rem,3.4vw,2.5rem); font-weight:600; line-height:1.15; margin-bottom:20px; letter-spacing:-0.01em;}
.kontakt > div p.lead{opacity:0.72; max-width:42ch; margin-bottom:34px;}
.contact-row{display:flex; gap:16px; padding:16px 0; border-top:1px solid var(--line-dark);}
.contact-row:last-of-type{border-bottom:1px solid var(--line-dark);}
.contact-row .lbl{font-size:11.5px; text-transform:uppercase; letter-spacing:0.08em; opacity:0.5; width:110px; flex-shrink:0; padding-top:2px;}
.contact-row .val{font-size:15px;}
.form{display:flex; flex-direction:column; gap:16px;}
.form label{font-size:12px; text-transform:uppercase; letter-spacing:0.06em; opacity:0.55; margin-bottom:7px; display:block;}
.form input, .form select, .form textarea{
width:100%; background:transparent; border:none; border-bottom:1px solid var(--line-dark);
padding:10px 2px; font-family:'Source Serif 4',serif; font-size:15.5px; color:var(--ink);
outline:none; transition:border-color .2s;
}
.form input:focus, .form select:focus, .form textarea:focus{border-color:var(--brass);}
.form textarea{resize:vertical; min-height:80px;}
.form button,
.form input[type="submit"],
.form .wpcf7-submit{
margin-top:8px !important; align-self:flex-start; background:var(--ink) !important; color:var(--paper) !important;
border:none !important; padding:15px 30px !important; font-family:'Space Grotesk',sans-serif; font-size:14px;
letter-spacing:0.03em; font-weight:600; border-radius:2px !important; cursor:pointer; transition:background .2s;
width:auto !important; display:inline-block;
}
.form button:hover,
.form input[type="submit"]:hover,
.form .wpcf7-submit:hover{background:var(--brass) !important;}

/* CF7 rendert die Nachricht standardmäßig mit vielen Zeilen — feste, kompaktere Höhe statt riesigem Kasten */
.form textarea{
resize:vertical; height:120px !important; min-height:unset !important;
}

footer{
background:var(--ink); border-top:1px solid var(--line); padding:36px 32px;
}
.foot-wrap{max-width:var(--max); margin:0 auto; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:16px;}
.foot-wrap p{font-size:13px; opacity:0.45;}

@media (max-width: 880px){
.navlinks{display:none;}
.hero{grid-template-columns:1fr; gap:48px;}
.hero-div{display:none;}
.hero-col.left, .hero-col.right, .hero-col.right *{padding:0; text-align:left !important;}
.hero-col.right p{margin-left:0;}
.track-grid{grid-template-columns:1fr;}
.about-grid{grid-template-columns:1fr; gap:36px;}
.values{grid-template-columns:1fr 1fr;}
.ref-grid{grid-template-columns:1fr;}
.steps{grid-template-columns:1fr;}
.step{border-right:none; border-bottom:1px solid var(--line); padding-bottom:30px;}
.kontakt-grid{grid-template-columns:1fr; gap:44px;}
.sec-head{flex-direction:column; align-items:flex-start;}
.sec-note{text-align:left;}
}

.wp-block-button.btn-primary > .wp-block-button__link{
  display:inline-block; background:var(--brass-light); color:var(--ink);
  padding:14px 26px; border-radius:2px; text-decoration:none;
  font-size:14px; letter-spacing:0.03em; font-weight:600;
  transition:transform .2s, background .2s;
}
.wp-block-button.btn-primary > .wp-block-button__link:hover{transform:translateY(-2px); background:#e6c896;}

.wp-block-button.nav-cta > .wp-block-button__link{
  font-size:13px; padding:9px 18px; border:1px solid var(--brass-light);
  border-radius:2px; text-decoration:none; letter-spacing:0.03em; color:var(--paper);
  transition: background .2s, color .2s;
}
.wp-block-button.nav-cta > .wp-block-button__link:hover{background:var(--brass-light); color:var(--ink);}

.wp-block-button.track-cta > .wp-block-button__link{
  background:none; color:inherit; padding:0; margin-top:26px; display:inline-block;
  font-size:13.5px; letter-spacing:0.02em; text-decoration:none;
  border-bottom:1px solid var(--brass); border-radius:0; padding-bottom:2px; font-weight:500;
}
.track.werbe .wp-block-button.track-cta > .wp-block-button__link{border-color:var(--steel);}



/* Fix: globaler dunkler body-Hintergrund wird vom Parent-Theme überschrieben */
html, body{
  background:var(--ink) !important;
  color:var(--paper) !important;
  padding-left:0 !important;
  padding-right:0 !important;

}

/* Zusätzlich robust machen: Sections, die im Original nur vom body geerbt haben,
   bekommen ihren Hintergrund jetzt selbst – dann sind sie unabhängig vom Theme */
.hero{ background:var(--ink); color:var(--paper); }
.hero-foot{ background:var(--ink); color:var(--paper); }
.process{ background:var(--ink); color:var(--paper); }
footer{ background:var(--ink); color:var(--paper); }

/* Fix: Theme überschreibt die Überschriftenfarbe auch auf dunklem Hintergrund */
.hero h1,
.hero-foot p,
.about h2,
.about p,
.process h2,
.process h3,
.step h3,
.step p,
footer p{
  color:var(--paper) !important;
}

:root, .is-layout-flow, .is-layout-constrained, .is-layout-flex, .is-layout-grid {
  --wp--style--block-gap: 0 !important;
}

#ast-scroll-top{ background-color: transparent !important; border:none !important; box-shadow:none !important; }
#ast-scroll-top svg{ fill: var(--brass-light) !important; }

.field .txt p.has-small-font-size{ opacity:0.65; }
.value p.has-small-font-size{ opacity:0.65; }
.ref-card p.has-medium-font-size{
  font-size:1.15rem; font-weight:600; margin-bottom:10px;
  font-family:'Space Grotesk',sans-serif;
}

/* ============================================================
   HARTE DURCHSETZUNG
   WordPress/Gutenberg erzeugt pro Block automatisch generierte
   Klassen (z. B. "wp-container-...") und Inline-Styles mit eigenen
   Innen-/Außenabständen und Zentrierungen. Diese haben teils höhere
   Spezifität oder werden als Inline-Style direkt am Element gesetzt
   und schlagen dadurch unser eigenes Layout tot. Ab hier wird das
   konsequent mit !important überstimmt, damit ausschließlich unser
   eigenes Flex-/Grid-Layout (gap, padding) über Abstände entscheidet.
   ============================================================ */

/* 1) Automatisch generierte Gutenberg-Container-Klassen dürfen
      keine eigenen Abstände mehr mitbringen */
[class*="wp-container-"]{
  margin-top:0 !important;
  margin-bottom:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

/* 2) Kein automatisches Block-Gap / keine automatische Zentrierung
      innerhalb unserer eigenen Sektionen.
      WICHTIG: page-startseite.php rendert den Content OHNE ".entry-content"
      Wrapper — Selektoren dürfen sich also NICHT auf ".entry-content" stützen,
      sonst greifen sie nie. Nur margin-top/-left/-right zurücksetzen (nicht
      margin-bottom), damit unsere eigenen margin-bottom-Werte unangetastet bleiben. */
.is-layout-constrained > *,
.is-layout-flow > *,
.is-layout-flex > *,
.is-layout-grid > *{
  margin-top:0 !important;
  margin-left:0 !important;
  margin-right:0 !important;
}

/* 2b) Fehlender ".wrap"-Container: Im echten Seiteninhalt gibt es keine
      ".wrap"-Gruppe, die Breite/Zentrierung übernimmt (anders als im Konzept).
      ".wrap" hätte max-width:1180px MIT 32px Padding (= 1116px Inhaltsbreite)
      geliefert. Da Elemente wie ".ref-grid" einen sichtbaren Rahmen haben, darf
      dort KEIN eigenes Padding hinzukommen (sonst rückt der Rahmen nach innen) —
      wir geben stattdessen direkt die bereits reduzierte Inhaltsbreite vor. */
.leistungen .sec-head, .leistungen .track-grid,
.refs .sec-head, .refs .ref-grid,
.process .sec-head, .process .steps,
.about-grid,
.kontakt-grid{
  max-width:calc(var(--max) - 64px) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
/* Auf kleinen Bildschirmen (< 1180px + Gutter) trotzdem nie am Viewport-Rand kleben */
@media (max-width: 1244px){
  .leistungen .sec-head, .leistungen .track-grid,
  .refs .sec-head, .refs .ref-grid,
  .process .sec-head, .process .steps,
  .about-grid,
  .kontakt-grid{
    max-width:none !important;
    margin-left:32px !important;
    margin-right:32px !important;
  }
}

/* 2c) Durch die wp-container-Regel (Punkt 1) verlieren sec-head-Blöcke ihren
      Abstand nach unten — hier wieder herstellen. */
.sec-head{ margin-bottom:52px !important; padding-bottom:22px !important; }

/* 3) Erste Kind-Elemente in mehrspaltigen Layouts immer oben bündig
      (verhindert "nicht auf einer Höhe") */
.hero-col > *:first-child,
.step > *:first-child,
.value > *:first-child,
.track > *:first-child,
.track-head > *:first-child,
.track-body > *:first-child,
.ref-card > *:first-child,
.about-grid > * > *:first-child,
.kontakt-grid > * > *:first-child,
.field > *:first-child,
.txt > *:first-child{
  margin-top:0 !important;
  padding-top:0 !important;
}
.hero-col{ padding-top:0 !important; margin-top:0 !important; }
.hero-col *{ margin-top:0 !important; padding-top:0 !important; }
.hero{ align-items:start !important; }
.hero-col{ align-self:start !important; }

/* 4) Leistungen-Felder: Flex-Layout + Abstände erzwingen
      (behebt die falschen Einrückungen zwischen Nummer und Text) */
.field{
  display:flex !important; align-items:flex-start !important;
  gap:14px !important; padding:14px 0 !important; margin:0 !important;
}
.field .num{
  width:22px !important; flex:0 0 22px !important;
  margin:0 !important; padding-top:2px !important;
}
.txt{ margin:0 !important; padding:0 !important; flex:1 1 auto !important; }
.txt strong{ display:block !important; margin:0 0 3px !important; padding:0 !important; }
.txt span, .txt p{ margin:0 !important; padding:0 !important; }

/* 5) Leistungen-Kartenkopf/-Body: eigene Abstände statt Gutenberg-Defaults */
.track-head{ padding:48px 32px 32px !important; }
.track-head > *{ margin:0 0 16px !important; }
.track-head > *:last-child{ margin-bottom:0 !important; }
.track-body{ padding:26px 30px 30px !important; }

/* 6) Über-mich-Sektion: Spalten oben bündig, Values-Grid erzwingen */
.about-grid{ align-items:start !important; }
.values{
  display:grid !important; grid-template-columns:repeat(3,1fr) !important;
  gap:20px !important; margin-top:36px !important;
}
.value{ margin:0 !important; padding-top:16px !important; }
.value strong{ margin:0 0 8px !important; }
.value span, .value p{ margin:0 !important; }

/* 7) Ablauf-Sektion: Grid statt Block-Stapel, kein Extra-Abstand */
.steps{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; gap:0 !important; }
.step{ margin:0 !important; padding:34px 30px 0 !important; }
.step .mono{ margin:0 0 16px !important; }
.step h3{ margin:0 0 12px !important; }
.step p{ margin:0 !important; }

/* 8) Referenzen-Karten: gleiche Höhe erzwingen (keine grauen Lücken mehr),
      Tag-Element unabhängig von der im Editor gesetzten Klasse korrekt stylen */
.ref-grid{
  display:grid !important; grid-template-columns:repeat(3,1fr) !important;
  gap:1px !important; align-items:stretch !important;
}
.ref-card{
  display:flex !important; flex-direction:column !important;
  justify-content:space-between !important; height:100% !important;
  margin:0 !important; padding:32px 28px !important;
}
.ref-card > .eyebrow,
.ref-card > .ref-tag{
  display:block !important;
  color:var(--steel) !important;
  font-size:11px !important; letter-spacing:0.1em !important; text-transform:uppercase !important;
  margin:0 0 auto !important; padding-bottom:24px !important;
}
.ref-card > *:last-child{ margin-top:auto !important; }

/* 9) Kontakt-Sektion: Grid + Abstände erzwingen */
.kontakt-grid{ display:grid !important; grid-template-columns:1fr 1fr !important; gap:70px !important; }
.kontakt-grid > div{ margin:0 !important; padding:0 !important; }
.kontakt h2{ margin:0 0 20px !important; }
.kontakt p.lead{ margin:0 0 34px !important; }
.contact-row{ display:flex !important; gap:16px !important; padding:16px 0 !important; margin:0 !important; }
.contact-row .lbl, .contact-row .val{ margin:0 !important; padding:0 !important; }