/* ================================================================
   oma · Startseite FINAL · Kombination aus Version C (Hero, Marker,
   Navigation, Filmklammer) und Version A (Sektions-Grammatik).
   EIN konsistentes CSS-System, keine Klassen-Kollisionen der Quellen.
   Farb-Logik: Warmweiß + Dunkel tragen, Terracotta führt (Marker,
   CTA, Satz-Fläche), Sand ist die Tint-Stufe. Lind: null im Layout,
   nur die Lind-Perle der Bildmarke.
   Motion: vanilla CSS + inline IntersectionObserver, alles hinter
   prefers-reduced-motion + JS-Gate (html.motion), ?static-Schalter.
   ================================================================ */

:root{
  --weiss:#F7F5F2;
  --schwarz:#171412;
  --grau:#5B6572;
  --terra:#8FA88A;
  --terra-tief:#748E6F;
  --dunkel:#102A43;
  --dunkel-warm:#22405E;
  --hell:#F7F5F2;
  --sand:#EAE5DD;
  --text-auf-dunkel:#DDE4EC;
  --bm-perle:#8FA88A;
  --rand:clamp(12px, 1.6vw, 24px);
  --radius-panel:32px;
  --radius-karte:24px;
  --schatten-karte:0 18px 40px -22px rgba(16,42,67,.20), 0 2px 10px rgba(16,42,67,.06);
  --schatten-karte-hover:0 26px 52px -24px rgba(16,42,67,.28), 0 4px 14px rgba(16,42,67,.09);
  --feder:cubic-bezier(.16,1,.3,1);
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  background:var(--weiss);
  color:var(--schwarz);
  font-family:'Switzer', system-ui, sans-serif;
  font-size:17px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img, svg{ display:block; }
a{ color:inherit; }
[id]{ scroll-margin-top:90px; }

:focus-visible{ outline:3px solid var(--terra-tief); outline-offset:3px; border-radius:4px; }
.auf-farbe :focus-visible, .auf-farbe:focus-visible{ outline-color:var(--hell); }

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--dunkel); color:var(--hell);
  padding:12px 22px; border-radius:0 0 14px 0; font-weight:600; text-decoration:none;
}
.skip:focus{ left:0; }

.wrap{ max-width:1240px; margin:0 auto; padding:0 clamp(20px, 4vw, 56px); }

/* ---------- Typografie ---------- */
.tanker{
  font-family:'Tanker', 'Cabinet Grotesk', sans-serif;
  font-weight:400; text-transform:uppercase;
  line-height:1.06; letter-spacing:.005em;
}
h1{
  font-size:clamp(40px, 5.9vw, 86px);
  color:var(--hell);
  max-width:17ch;
  line-height:1.12;
}
h2.kapitel{
  font-family:'Tanker', 'Cabinet Grotesk', sans-serif;
  font-weight:400; text-transform:uppercase;
  letter-spacing:.004em;
  font-size:clamp(30px, 4vw, 56px);
  line-height:1.07;
  max-width:18ch;
}
/* Tanker hat nur eine Strichstärke: der frühere Fett-Akzent (b) entfällt,
   die Überschrift ist durchgängig monumental. .fett bleibt für Cabinet-Kontexte. */
h2.kapitel b{ font-weight:400; }
.fett{ font-weight:900; }
/* Ausgewogene Zeilenumbrüche: verhindert einzelne Waisen-Wörter in der
   letzten Zeile (z.B. "…21 / ARBEITSTAGE"). */
h1, h2.kapitel, .satz-block .satz, .abschluss h2{ text-wrap:balance; }
.einleitung{
  color:var(--grau); font-size:clamp(17px, 1.35vw, 19px);
  max-width:56ch; margin-top:18px;
}
.klaeren{ color:var(--terra-tief); font-weight:700; }
.klaeren-hell{ color:var(--hell); font-weight:700; }

/* ---------- Marker-Chips: die Anstreich-Geste (Signature) ----------
   Genau EIN Kernwort pro Satz. Chip liegt als background direkt auf
   dem Span (kein Pseudo-Element: Safari positioniert absolut
   positionierte Kinder von Inline-Elementen falsch).
   Grundzustand überall: fertig angestrichen. Die Animation
   (background-size von links) liegt komplett hinter html.motion. */
.mark{
  color:var(--hell);
  padding:.03em .14em;
  margin-right:-.08em;
  white-space:nowrap;
  border-radius:.14em;
  background-image:linear-gradient(var(--terra), var(--terra));
  background-repeat:no-repeat;
  background-position:left center;
  background-size:100% 100%;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}
.mark-dunkel{
  color:var(--hell);
  padding:.03em .14em;
  margin-right:-.08em;
  white-space:nowrap;
  border-radius:.14em;
  background-image:linear-gradient(var(--dunkel), var(--dunkel));
  background-repeat:no-repeat;
  background-position:left center;
  background-size:100% 100%;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
}

/* ---------- Pills & Links ---------- */
.pill-terra, .pill-hell, .pill-outline{
  display:inline-flex; align-items:center; gap:10px;
  border-radius:999px; padding:16px 32px;
  font-weight:700; font-size:17.5px; line-height:1.2;
  text-decoration:none; border:0; cursor:pointer;
  transition:background-color .2s ease, transform .2s ease, color .2s ease, box-shadow .2s ease;
}
.pill-terra{ background:var(--terra); color:#FFFFFF; }
.pill-terra:hover{ background:var(--terra-tief); transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(16,42,67,.5); }
.pill-hell{ background:var(--hell); color:var(--schwarz); }
.pill-hell:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 12px 24px -12px rgba(29,23,18,.3); }
.pill-outline{
  background:transparent; color:var(--dunkel);
  border:2px solid var(--dunkel); padding:14px 28px;
}
.pill-outline:hover{ background:var(--dunkel); color:var(--hell); transform:translateY(-2px); }
.mini-pill{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--dunkel); color:var(--hell) !important;
  border-radius:999px; padding:11px 22px; line-height:1;
  font-weight:700; font-size:15px; text-decoration:none;
  border-bottom:none !important;
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.mini-pill:hover{ background:var(--dunkel-warm); transform:translateY(-2px); }

.mehr{
  display:inline-flex; align-items:center; gap:8px;
  font-weight:700; font-size:16px; text-decoration:none;
  color:var(--terra-tief);
  transition:color .2s ease;
}
.mehr::after{ content:"\2197"; font-size:.9em; }
.mehr:hover{ color:var(--terra); }
.mehr-hell{ color:var(--hell); }
.mehr-hell:hover{ color:#fff; }

/* ---------- Navigation (Version C: sticky, warmweiß, Blur) ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:var(--weiss);
  border-bottom:1px solid rgba(16,42,67,.09);
}
.nav-innen{
  max-width:1392px; margin:0 auto;
  padding:14px clamp(20px, 3vw, 40px);
  display:flex; align-items:center; justify-content:space-between; gap:24px;
}
.logo{
  display:flex; align-items:center; gap:10px;
  font-family:'Cabinet Grotesk', sans-serif; font-weight:900; font-size:27px;
  text-decoration:none; letter-spacing:-.01em;
}
.logo svg{ width:36px; height:34px; }
.logo img.logo-img{ height:40px; width:auto; display:block; }
@media (max-width:640px){ .logo img.logo-img{ height:34px; } }
nav.haupt{ display:flex; align-items:center; gap:clamp(14px, 1.8vw, 30px); }
nav.haupt a{
  text-decoration:none; font-weight:600; font-size:15.5px; color:var(--schwarz);
  border-bottom:2px solid transparent; padding-bottom:2px;
  transition:border-color .2s ease;
}
nav.haupt a:hover{ border-bottom-color:var(--schwarz); }
.burger{
  display:none; background:none; border:2px solid var(--schwarz);
  border-radius:999px; padding:8px 18px;
  font:600 15px 'Switzer', sans-serif;
  color:var(--schwarz); cursor:pointer;
}

/* ---------- 1 · Kino-Hero-Panel (Version C) ---------- */
.hero{ padding:var(--rand); }
.hero-panel{
  position:relative;
  border-radius:var(--radius-panel);
  overflow:hidden;
  min-height:min(88dvh, 860px);
  display:flex; align-items:flex-end;
  background:var(--dunkel);
}
/* Stimmungsfläche als eigene Ebene: bekommt später das Foto und
   trägt den langsamen Ken-Burns-Zoom (Kino-Ruhe). */
.stimmung{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 82% 6%, rgba(143,168,138,.24), transparent 52%),
    radial-gradient(90% 70% at 8% 100%, rgba(8,20,34,.55), transparent 60%),
    linear-gradient(150deg, #102A43 8%, #183754 78%, #22405E 100%);
}
/* Stimmungsfläche MIT Foto (nur wo ein echtes Bild geplant ist, z.B.
   Startseiten-Hero). Das Foto liegt UNTER einem kräftigen Dunkel-Overlay,
   damit die helle Typo auf AA-Kontrast lesbar bleibt. Fehlt das Foto,
   trägt der Dunkel-Verlauf weiterhin allein (graceful). Ken-Burns läuft
   weiter, weil die Fläche die Klasse .stimmung behält. */
.stimmung--foto{
  background:
    linear-gradient(105deg, rgba(12,27,45,.90) 0%, rgba(14,32,52,.70) 32%, rgba(15,36,58,.46) 58%, rgba(18,44,68,.34) 100%),
    var(--hero-foto, url('max-podcast.jpg')) center/cover no-repeat,
    linear-gradient(150deg,#102A43,#22405E);
}
.hero-klaeren{
  position:absolute; top:clamp(16px, 2.4vw, 30px); right:clamp(18px, 2.6vw, 34px);
  max-width:340px; text-align:right;
  font-size:13px; line-height:1.5; color:rgba(255,246,239,.78);
  z-index:2;
}
.hero-klaeren b{ color:var(--hell); font-weight:700; }
.hero-inhalt{
  position:relative; z-index:2;
  padding:clamp(30px, 4.5vw, 64px);
  padding-top:clamp(90px, 11vw, 140px);
  max-width:1100px;
}
.hero-kicker{
  font-size:clamp(14px, 1.2vw, 16.5px); font-weight:600;
  color:rgba(255,246,239,.85);
  margin-bottom:clamp(20px, 2.4vw, 30px);
}
.hero-sub{
  margin-top:clamp(26px, 3vw, 40px);
  font-size:clamp(16.5px, 1.35vw, 19.5px);
  color:var(--text-auf-dunkel);
  max-width:52ch;
}
.hero-cta{ margin-top:clamp(32px, 3.8vw, 52px); }

/* ---------- Sektions-Grundmaße ---------- */
.sektion{ padding:clamp(84px, 10vw, 148px) 0; }
.sektion-folge{ padding-top:0; }
.kopf-split{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(28px, 4vw, 64px); align-items:end;
  margin-bottom:clamp(40px, 5vw, 72px);
}
.kopf-split .einleitung{ margin-top:0; }

/* ---------- 2 · Situationen (Version A: 2×2 Sand-Kacheln) ---------- */
.karten-grid{
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(16px, 2vw, 28px);
}
.karte{
  border-radius:var(--radius-karte);
  padding:clamp(28px, 3vw, 40px);
  background:var(--sand);
}
.karte h3{
  font-family:'Cabinet Grotesk', sans-serif; font-weight:800;
  font-size:clamp(20px, 1.8vw, 24px); line-height:1.2;
  margin-bottom:12px;
}
.karte p{ color:var(--grau); font-size:16.5px; }
.karte-dunkel{ background:var(--dunkel); color:var(--hell); }
.karte-dunkel p{ color:#E4DBD0; }
.knummer{
  width:46px; height:46px; border-radius:50%;
  background:var(--terra); color:var(--hell);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cabinet Grotesk', sans-serif; font-weight:900; font-size:20px;
  margin-bottom:22px;
}

/* ---------- 3 · Beratungsmodell: Terracotta-Monumental-Block (Version A) ---------- */
.satz-block{
  background:var(--terra); color:var(--hell);
  padding:clamp(100px, 12vw, 180px) 0;
}
.satz-block .satz{
  font-size:clamp(40px, 5.8vw, 84px);
  max-width:14ch;
  line-height:1.08;
}
.satz-sub{
  margin-top:26px; max-width:56ch;
  font-size:clamp(17px, 1.35vw, 19px); color:#fff;
}
.schritte{
  list-style:none; margin-top:clamp(40px, 5vw, 64px);
  display:grid; grid-template-columns:repeat(auto-fit, minmax(178px, 1fr));
  gap:clamp(28px, 3.5vw, 44px) clamp(22px, 2.4vw, 34px);
}
.schritt-kopf{ display:flex; align-items:baseline; gap:12px; }
.schritte .snr{
  font-family:'Cabinet Grotesk', sans-serif; font-weight:900;
  font-size:15px; color:#FFFFFF;
}
.schritte h3{
  font-family:'Cabinet Grotesk', sans-serif; font-weight:800;
  font-size:clamp(18px, 1.6vw, 22px);
}
.schritte li > p{
  margin-top:10px; font-size:15.5px; line-height:1.55; color:#fff;
}
.satz-cta{ margin-top:clamp(40px, 5vw, 60px); }

/* ---------- 4 · Kompetenzfelder (Version A: weiche weiße Karten) ---------- */
.karte-link{
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
  text-decoration:none;
  background:#fff; box-shadow:var(--schatten-karte);
  transition:transform .2s ease, box-shadow .2s ease;
}
.karte-link:hover{ transform:translateY(-4px); box-shadow:var(--schatten-karte-hover); }
.karte-link .mehr{ margin-top:auto; padding-top:22px; }
.karte-link p{ margin-bottom:4px; }
.karte-link.karte-dunkel{ background:var(--dunkel); box-shadow:0 18px 40px -22px rgba(29,23,18,.45); }
.karte-hoch{ display:flex; flex-direction:column; align-items:flex-start; }
.grid-abstand{ margin-top:clamp(40px, 5vw, 72px); }

/* ---------- Referenzen-Leiste (Kunden-Auszug) ---------- */
.ref-grid{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:clamp(12px, 1.6vw, 20px);
}
.ref-tile{
  display:flex; align-items:center; justify-content:center;
  min-height:clamp(100px, 10vw, 132px);
  padding:clamp(16px, 2vw, 28px);
  background:#fff; border-radius:var(--radius-karte);
  box-shadow:var(--schatten-karte);
  transition:transform .2s ease, box-shadow .2s ease;
}
.ref-tile img{
  max-width:82%; max-height:66px; width:auto; height:auto;
  object-fit:contain;
}
.ref-tile:hover{ transform:translateY(-4px); box-shadow:var(--schatten-karte-hover); }
.ref-mehr{ margin-top:clamp(28px, 3.5vw, 44px); }
.ref-mehr a{
  font-family:'Cabinet Grotesk', sans-serif; font-weight:800;
  color:var(--dunkel); text-decoration:none;
  border-bottom:2px solid var(--terra); padding-bottom:2px;
}
.ref-mehr a:hover{ color:var(--terra-tief); }
@media(max-width:900px){ .ref-grid{ grid-template-columns:repeat(3, 1fr); } }
@media(max-width:560px){ .ref-grid{ grid-template-columns:repeat(2, 1fr); } }

/* ---------- Cookie-Consent-Banner ---------- */
.consent-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:2000;
  padding:clamp(12px,2vw,20px); display:flex; justify-content:center;
  pointer-events:none;
}
.consent-inner{
  pointer-events:auto; max-width:780px; width:100%;
  background:var(--weiss); color:var(--schwarz);
  border:1px solid rgba(16,42,67,.12); border-radius:var(--radius-karte);
  box-shadow:0 24px 60px -24px rgba(16,42,67,.45);
  padding:clamp(16px,2vw,24px);
  display:flex; align-items:center; gap:clamp(14px,2.2vw,28px); flex-wrap:wrap;
}
.consent-text{ flex:1 1 300px; margin:0; font-size:14.5px; line-height:1.55; color:var(--grau); }
.consent-text a{ color:var(--dunkel); font-weight:600; text-decoration:underline; text-underline-offset:2px; }
.consent-btns{ display:flex; gap:10px; flex-shrink:0; }
.consent-btns button{
  font-family:'Switzer',sans-serif; font-weight:600; font-size:14.5px; cursor:pointer;
  border-radius:999px; padding:11px 22px; border:1px solid transparent;
  transition:transform .15s var(--feder), background .15s ease, color .15s ease;
}
.consent-accept{ background:var(--terra); color:#20281E; }
.consent-accept:hover{ transform:translateY(-1px); background:var(--terra-tief); color:#fff; }
.consent-deny{ background:transparent; color:var(--grau); border-color:rgba(16,42,67,.22); }
.consent-deny:hover{ background:rgba(16,42,67,.05); color:var(--dunkel); }
#oma-cookie-settings{ cursor:pointer; }
@media(max-width:560px){ .consent-btns{ width:100%; } .consent-btns button{ flex:1; } }

/* ---------- 5 · Angebote (Version C: Sand-Panel + Bento, kein Terracotta) ---------- */
.panel-sektion{ padding:0 var(--rand); }
/* Sand-Panel soll nicht direkt an farbige Vollflächen-Bänder (Sage/Navy) stoßen:
   Außenabstand nur dort, wo ein solches Band direkt angrenzt. */
.satz-block + .panel-sektion,
.stimmen-block + .panel-sektion,
.abschluss + .panel-sektion{ padding-top: clamp(56px, 7vw, 104px); }
.panel-sektion:has(+ .satz-block),
.panel-sektion:has(+ .stimmen-block),
.panel-sektion:has(+ .abschluss){ padding-bottom: clamp(56px, 7vw, 104px); }
.sand-panel{
  max-width:1392px; margin:0 auto;
  background:var(--sand);
  border-radius:var(--radius-panel);
  padding:clamp(48px, 6vw, 88px) clamp(24px, 4vw, 72px);
}
.bento{
  display:grid; grid-template-columns:repeat(12, 1fr);
  gap:clamp(16px, 2vw, 26px);
  margin-top:clamp(36px, 4.6vw, 56px);
}
.k5{ grid-column:span 5; }
.k7{ grid-column:span 7; }
.k12{ grid-column:span 12; }
.sand-panel .karte{ background:#fff; box-shadow:0 14px 34px rgba(29,23,18,.07); }
.sand-panel .karte.karte-dunkel{ background:var(--dunkel); }
.preis-kopf{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:16px; flex-wrap:wrap; margin-bottom:12px;
}
.preis-kopf h3{ margin-bottom:0; }
.preis{
  font-family:'Cabinet Grotesk', sans-serif; font-weight:900;
  font-size:clamp(20px, 1.9vw, 26px); white-space:nowrap;
}
.karte-dunkel .preis{ color:var(--hell); }
.karte-quer{
  display:flex; align-items:center; justify-content:space-between;
  gap:clamp(20px, 3vw, 48px); flex-wrap:wrap;
}
.karte-quer h3{ margin-bottom:8px; }
.karte-quer p{ margin-bottom:0; }
.preis-dunkel{
  background:var(--dunkel); color:var(--hell);
  border-radius:999px; padding:12px 26px;
  font-family:'Cabinet Grotesk', sans-serif; font-weight:900;
  font-size:clamp(18px, 1.7vw, 23px); white-space:nowrap;
}

/* ---------- 6 · Bewertungs-Moment (NEU): EIN ruhiges Monumental-Zitat ----------
   Oma-Satz-Logik ohne Tanker (Tanker bleibt den festen Oma-Sätzen
   vorbehalten): Cabinet Grotesk 800 als große Zitat-Stimme,
   dezente Google-Herkunftszeile darunter. Kein Karussell, keine Sterne. */
.zitat-kicker{
  font-weight:600; font-size:14px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--grau);
}
.zitat-text{
  font-family:'Cabinet Grotesk', sans-serif; font-weight:800;
  font-size:clamp(28px, 3.6vw, 52px); line-height:1.12;
  letter-spacing:-.015em; max-width:24ch;
  margin-top:clamp(20px, 2.4vw, 32px);
}
.zitat-quelle{
  margin-top:clamp(22px, 2.6vw, 34px);
  font-size:15.5px; font-weight:600; color:var(--grau);
}
.zitat-zweit{
  margin-top:clamp(40px, 4.4vw, 60px);
  padding-top:clamp(28px, 3vw, 40px);
  border-top:1px solid rgba(29,23,18,.12);
  max-width:40ch; font-size:clamp(18px, 1.5vw, 22px);
  line-height:1.4; font-weight:500; color:var(--dunkel);
}
.zitat-zweit-quelle{
  display:block; margin-top:12px;
  font-size:15px; font-weight:600; color:var(--grau);
}
.zitat-hinweis{ margin-top:clamp(26px, 3vw, 38px); font-size:13.5px; }

/* ---------- 7 · Projekte (NEU): große Showcase-Bühne ----------
   Zwei gerundete Bildflächen im Panel-Vokabular des Heros,
   vorbereitet für echte Website-Screenshots. Bis dahin:
   Sand-Verlaufs-Platzhalter, keine Fake-Screenshots. */
.projekt-grid{
  display:grid; grid-template-columns:7fr 5fr;
  gap:clamp(16px, 2vw, 28px);
}
.projekt-panel{
  position:relative;
  border-radius:var(--radius-panel);
  overflow:hidden;
  min-height:clamp(360px, 36vw, 520px);
  display:flex; align-items:flex-end;
  padding:clamp(24px, 3vw, 40px);
  background:linear-gradient(150deg, #EAE2D8, #D9CEC1);
}
.projekt-panel + .projekt-panel,
.projekt-grid > .projekt-panel:nth-child(2){
  background:linear-gradient(160deg, #F0E9DF, #E0D5C6);
}
.projekt-vermerk{
  position:absolute; top:clamp(18px, 2.2vw, 28px); left:clamp(24px, 3vw, 40px);
  right:clamp(24px, 3vw, 40px);
  font-size:13.5px; line-height:1.5; color:var(--grau);
  max-width:44ch;
}
.projekt-name h3{
  font-family:'Cabinet Grotesk', sans-serif; font-weight:900;
  font-size:clamp(23px, 2.3vw, 33px); line-height:1.1;
  letter-spacing:-.01em;
}
.projekt-name p{ margin-top:8px; color:var(--grau); font-size:16px; max-width:44ch; }
.projekt-mehr{ margin-top:clamp(28px, 3.4vw, 44px); }

/* ---------- 8 · Persönlich statt Ticketsystem (Version A) ---------- */
.ueber-grid{
  display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(32px, 5vw, 72px); align-items:start;
  margin-top:clamp(40px, 5vw, 64px);
}
.foto-slot{
  position:relative; border-radius:var(--radius-karte);
  overflow:hidden;
  /* Bild-Wiring (graceful): liegt das Foto in assets/, erscheint es;
     fehlt es, bleibt der Sand-Verlauf sichtbar (nichts Kaputtes). */
  background:
    url('max-portrait.jpg') center/cover no-repeat,
    linear-gradient(150deg, #EAE2D8, #D9CEC1);
  aspect-ratio:4/5;
}
.badge{
  position:absolute; top:18px; left:18px;
  background:var(--dunkel); color:var(--hell);
  border-radius:999px; padding:8px 16px;
  font-weight:700; font-size:14.5px;
}
.foto-cap{
  margin-top:12px; font-size:13.5px; color:var(--grau); line-height:1.5;
}
.ueber-texte h3{
  font-family:'Cabinet Grotesk', sans-serif; font-weight:800;
  font-size:clamp(20px, 1.8vw, 24px); margin-bottom:10px;
}
.ueber-texte > div + div{ margin-top:clamp(32px, 4vw, 48px); }
.ueber-texte p{ color:var(--grau); }
.ueber-texte p b{ color:var(--schwarz); }
.ueber-texte .mehr{ margin-top:14px; }

/* ---------- 9 · Blog-Teaser (Version A) ---------- */
.blog-grid{
  display:grid; grid-template-columns:7fr 5fr;
  gap:clamp(16px, 2vw, 28px);
}
.klabel{
  display:inline-block; background:var(--sand); color:var(--schwarz);
  border-radius:999px; padding:7px 15px;
  font-weight:600; font-size:14px; margin-bottom:20px;
}
.status{ font-size:14.5px; color:var(--grau); font-weight:600; }
.blog-alle{ display:flex; justify-content:center; margin-top:clamp(36px, 4vw, 52px); }

/* ---------- 10 · Abschluss-CTA (Version A: Dunkel, 2-spaltig, Filmklammer zum Hero) ---------- */
.abschluss{
  background:var(--dunkel);
  padding:clamp(90px, 11vw, 170px) 0;
}
.abschluss-grid{
  display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(32px, 5vw, 80px); align-items:center;
}
.abschluss h2{
  font-family:'Tanker', 'Cabinet Grotesk', sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.004em; color:var(--hell);
  font-size:clamp(46px, 6.6vw, 92px); line-height:1.08;
  max-width:13ch;
}
/* Tanker ist Single-Weight: die Hierarchie (leiser Vorlauf → laute Pointe)
   entsteht hier über Größe + Ton, nicht über Strichstärke. Der Abstand
   hält den Marker-Chip der Pointe frei von der Vorlauf-Zeile. */
.abschluss .satz-vorlauf{
  display:block;
  font-size:clamp(22px, 2.9vw, 40px);
  color:rgba(250,246,240,.78);
  letter-spacing:.02em; line-height:1.05;
  margin-bottom:clamp(8px, 1vw, 14px);
}
.abschluss p{ color:#EFE7DE; font-size:clamp(17px, 1.35vw, 19px); }
.abschluss .pill-hell{ margin-top:28px; }
/* Variante für eine längere Pointe ("im Erstgespräch."): etwas kleiner,
   damit Vorwort + Pointe je auf einer Zeile bleiben statt "im" zu verwaisen. */
.abschluss h2.anstreich--eng{ font-size:clamp(28px, 5.2vw, 68px); max-width:16ch; }

/* ---------- Footer: dunkles Panel, weich abgesetzt (Version A) ---------- */
footer{ padding:clamp(20px, 2.6vw, 48px) 0; background:var(--weiss); }
.fuss-panel{
  margin:0 var(--rand);
  background:var(--dunkel); color:#EFE7DE;
  border-radius:var(--radius-panel);
  padding:clamp(44px, 5.5vw, 80px) clamp(24px, 4vw, 72px);
}
.fuss-oben{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.fuss-oben .logo{ color:var(--hell); }
.fuss-nav{ display:flex; flex-wrap:wrap; gap:14px 28px; max-width:560px; }
.fuss-nav a{
  color:#EFE7DE; text-decoration:none; font-weight:600; font-size:15.5px;
  transition:color .2s ease;
}
.fuss-nav a:hover{ color:var(--hell); }
.fuss-unten{
  margin-top:clamp(36px, 4vw, 56px); padding-top:24px;
  border-top:1px solid rgba(239,231,222,.25);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
  font-size:14.5px; color:#C9BFB4;
}

/* ================================================================
   MOTION-EBENE · greift nur unter html.motion
   (JS-Guard im Head: nur ohne prefers-reduced-motion, mit IO,
   ohne ?static). Nur transform/opacity, plus background-size
   für das Anstreichen.
   ================================================================ */

/* 1 · Kino-Ruhe: sehr langsamer Ken-Burns-Zoom der Stimmungsfläche */
@keyframes kenburns{ from{ transform:scale(1); } to{ transform:scale(1.07); } }
html.motion .stimmung{
  animation:kenburns 25s ease-in-out infinite alternate;
  transform-origin:72% 18%;
  will-change:transform;
}

/* 2 · Hero: gestaffelte Load-Sequenz */
@keyframes aufblenden{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:translateY(0); } }
html.motion .hero-inhalt > *{ animation:aufblenden .9s var(--feder) both; }
html.motion .hero-inhalt > *:nth-child(2){ animation-delay:.1s; }
html.motion .hero-inhalt > *:nth-child(3){ animation-delay:.2s; }
html.motion .hero-inhalt > *:nth-child(4){ animation-delay:.3s; }

/* 3 · Signature: das Anstreichen der Hero-H1 nach der Load-Sequenz */
@keyframes anstreichen{ from{ background-size:0% 100%; } to{ background-size:100% 100%; } }
html.motion .hero-panel .mark{
  animation:anstreichen .65s cubic-bezier(.22,1,.36,1) .75s both;
}

/* 4 · Signature beim Scrollen: Marker in den Sätzen streicht sich an */
html.motion .anstreich .mark,
html.motion .anstreich .mark-dunkel{
  background-size:0% 100%;
  transition:background-size .65s cubic-bezier(.22,1,.36,1) .15s;
}
html.motion .anstreich.sichtbar .mark,
html.motion .anstreich.sichtbar .mark-dunkel{
  background-size:100% 100%;
}

/* 5 · Scroll-Reveals (rise + fade, einmalig) */
html.motion .reveal:not(.fertig){
  opacity:0; transform:translateY(24px);
  transition:opacity .8s var(--feder), transform .8s var(--feder);
  transition-delay:var(--d, 0s);
}
html.motion .reveal.sichtbar{ opacity:1; transform:translateY(0); }
html.motion .reveal-gruppe:not(.fertig) > *{
  opacity:0; transform:translateY(24px);
  transition:opacity .7s var(--feder), transform .7s var(--feder);
}
html.motion .reveal-gruppe.sichtbar > *{ opacity:1; transform:translateY(0); }
html.motion .reveal-gruppe.sichtbar > .karte-link:hover{ transform:translateY(-4px); }

/* ---------- Responsive ---------- */
@media (max-width:1023px){
  nav.haupt{
    display:none;
    position:absolute; top:100%; left:0; right:0;
    background:var(--weiss);
    flex-direction:column; align-items:flex-start;
    padding:20px clamp(20px, 4vw, 40px) 28px; gap:16px;
    border-bottom:2px solid var(--schwarz);
  }
  body.nav-offen nav.haupt{ display:flex; }
  .burger{ display:block; }
}
@media (max-width:980px){
  .kopf-split, .abschluss-grid{ grid-template-columns:1fr; align-items:start; }
  .k5, .k7{ grid-column:span 12; }
  .blog-grid{ grid-template-columns:1fr; }
  .ueber-grid{ grid-template-columns:1fr; }
  .foto-slot{ max-width:420px; }
  .projekt-grid{ grid-template-columns:1fr; }
  .projekt-panel{ min-height:clamp(300px, 56vw, 440px); }
}
@media (max-width:820px){
  .karten-grid{ grid-template-columns:1fr; }
  .hero-klaeren{
    position:static; max-width:none; text-align:left;
    padding:20px clamp(20px, 5vw, 30px) 0;
  }
  .hero-panel{ flex-direction:column; align-items:stretch; justify-content:space-between; }
  .hero-inhalt{ padding-top:clamp(56px, 10vw, 90px); }
  h1{ font-size:clamp(40px, 11vw, 54px); }
}

/* ================================================================
   ERWEITERUNGEN · Unterseiten (Leistungs- und Content-Seiten)
   Bauen auf demselben Token-, Panel- und Motion-System auf. Keine
   neuen Farben, keine neue Motion. Ein zweiter Agent nutzt dieselben
   Klassen für projekte / blog / ueber-oma / erstgespraech.
   ================================================================ */

/* Kompakter Kino-Hero: gleiche Panel-Sprache wie die Startseite,
   geringere Höhe für Unterseiten (Startseite behält den vollen Hero). */
.hero-panel.kompakt{ min-height:min(56dvh, 500px); }

/* [KLÄREN]-Vermerk unter einem Monumental-Satz auf Terracotta-Fläche */
.satz-vermerk{
  margin-top:clamp(22px, 2.6vw, 34px);
  font-size:13.5px; line-height:1.5; color:rgba(255,246,239,.72);
}

/* Detaillierte, nummerierte Schritte auf weißer Fläche
   (Beratung: „Die fünf Schritte im Detail") */
.tiefe-liste{ margin-top:clamp(32px, 4vw, 52px); }
.tiefe-schritt{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(20px, 3vw, 44px); align-items:start;
  padding:clamp(26px, 3.2vw, 40px) 0;
  border-top:1px solid rgba(29,23,18,.1);
}
.tiefe-schritt:first-child{ border-top:0; padding-top:0; }
.tiefe-schritt .snr{
  font-family:'Cabinet Grotesk', sans-serif; font-weight:900;
  font-size:clamp(30px, 4vw, 52px); line-height:.9; color:var(--terra);
}
.tiefe-schritt h3{
  font-family:'Cabinet Grotesk', sans-serif; font-weight:800;
  font-size:clamp(20px, 1.9vw, 26px); line-height:1.15; margin-bottom:10px;
}
.tiefe-schritt p{ color:var(--grau); max-width:66ch; }
.tiefe-schritt p b{ color:var(--schwarz); }

/* Dunkles Aussage-Panel im Panel-Vokabular (wie Hero/Footer):
   für starke Positionierungs-Aussagen auf Unterseiten. */
.dunkel-panel{
  max-width:1392px; margin:0 auto;
  background:var(--dunkel); color:var(--text-auf-dunkel);
  border-radius:var(--radius-panel);
  padding:clamp(48px, 6vw, 88px) clamp(24px, 4vw, 72px);
}
.dunkel-panel .kapitel{ color:var(--hell); max-width:20ch; }
.dunkel-panel .einleitung{ color:#E4DBD0; }
.dunkel-panel .einleitung b{ color:var(--hell); }

/* Randlose Dunkelfläche: fließt nahtlos in eine folgende .abschluss-Sektion,
   ohne Rundung/Creme-Spalt (für gestapelte Dunkel-Blöcke, z.B. projekte). */
.dunkel-voll{
  background:var(--dunkel); color:var(--text-auf-dunkel);
  padding:clamp(72px, 9vw, 128px) 0 0;
}
.dunkel-voll .kapitel{ color:var(--hell); max-width:20ch; }
.dunkel-voll .einleitung{ color:#E4DBD0; }
.dunkel-voll .einleitung b{ color:var(--hell); }

/* Dreier-Reihe (z.B. die drei Wochen des Website-Sprints) */
.trio{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(16px, 2vw, 28px);
  margin-top:clamp(36px, 4.6vw, 56px);
}
.wlabel{
  display:inline-block; background:var(--dunkel); color:var(--hell);
  border-radius:999px; padding:6px 15px;
  font-weight:700; font-size:13.5px; margin-bottom:16px;
}

/* Hervorgehobener Hinweis-Kasten (z.B. das Woche-1-Gate) */
/* Reassurance-Highlight im CI-Stil: dunkle Karte (wie die Marken-Panels),
   kein generischer Callout-Balken. */
.gate-box{
  margin-top:clamp(36px, 4.4vw, 56px);
  background:var(--dunkel); color:var(--text-auf-dunkel);
  border-radius:var(--radius-karte);
  padding:clamp(30px, 3.4vw, 48px); max-width:76ch;
}
.gate-box h3{
  font-family:'Cabinet Grotesk', sans-serif; font-weight:900;
  font-size:clamp(19px, 1.7vw, 23px); margin-bottom:12px; color:var(--hell);
}
.gate-box p{ color:#E4DBD0; }
.gate-box p b{ color:var(--hell); }
.gate-box .klaeren{ color:#E79070; }

/* Frage-Liste (Beratung: „Typische Fragen, mit denen du herkommst") */
.fragen{
  list-style:none; margin-top:clamp(32px, 4vw, 48px);
  display:grid; grid-template-columns:1fr 1fr;
  gap:clamp(14px, 1.6vw, 22px);
}
.fragen li{
  display:flex; gap:16px; align-items:flex-start;
  background:var(--sand); border-radius:var(--radius-karte);
  padding:clamp(20px, 2.2vw, 28px);
  font-size:clamp(16.5px, 1.3vw, 18.5px); line-height:1.45; font-weight:500;
}
.fragen li::before{
  content:"?"; flex:none;
  width:36px; height:36px; border-radius:50%;
  background:var(--terra); color:var(--hell);
  display:flex; align-items:center; justify-content:center;
  font-family:'Cabinet Grotesk', sans-serif; font-weight:900; font-size:17px;
}

/* Schlichter Text-Block auf weißer Fläche (Betreuungs-/Verweis-Absätze) */
.text-block{ max-width:72ch; }
.text-block .mehr{ margin-top:20px; }

@media (max-width:820px){
  .trio{ grid-template-columns:1fr; }
  .fragen{ grid-template-columns:1fr; }
  .tiefe-schritt{ gap:14px clamp(16px,4vw,24px); }
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ transition:none !important; animation:none !important; }
}

/* ================================================================
   ERWEITERUNGEN · Content-Runde (projekte / blog / blog-artikel /
   ueber-oma / erstgespraech). Gleiches Token-, Panel- und Motion-
   System, KEINE neuen Farben, KEINE neue Motion. Nur zwei wirklich
   neue Muster: Foto-Scrim für Projekt-Panels und ein Lese-Layout
   für Blog-Artikel. Zusätzlich ein schlichter Prosa-Block.
   ================================================================ */

/* --- Projekt-Showcase mit echtem Screenshot ---
   Der Screenshot liegt als inline-background auf dem Panel selbst
   (assets/projekt-<name>.jpg mit Sand-Verlauf als Fallback). Dieser
   dunkle Scrim am unteren Rand hält den hellen Overlay-Namen lesbar,
   auf dem Foto UND auf dem Sand-Fallback (nichts Kaputtes). */
.projekt-panel.foto::before{
  content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(to top,
    rgba(23,20,18,.94) 0%, rgba(23,20,18,.72) 22%, rgba(23,20,18,.32) 46%, transparent 74%);
}
.projekt-panel.foto > *{ position:relative; z-index:1; }
.projekt-panel.foto .projekt-name h3{ color:var(--hell); }
.projekt-panel.foto .projekt-name p{ color:rgba(255,246,239,.9); }

/* --- Schlichte Prosa-Spalte (ueber-oma: Namens-Geschichte) --- */
.prosa{ max-width:64ch; }
.prosa p{ color:var(--grau); font-size:clamp(17px,1.35vw,19px); line-height:1.72; }
.prosa p + p{ margin-top:18px; }
.prosa p b{ color:var(--schwarz); }

/* --- Blog-Artikel · Lese-Layout ---
   Artikel-Kopf bleibt dunkles Kino-Panel (Filmklammer erhalten),
   darunter eine schmale, ruhige Lese-Spalte. */
.artikel-hero .hero-inhalt{ max-width:900px; }
.artikel-hero h1{ font-size:clamp(30px,4.3vw,58px); max-width:22ch; }
.artikel-zurueck{
  display:inline-flex; align-items:center; gap:7px;
  color:rgba(255,246,239,.82); text-decoration:none;
  font-weight:600; font-size:15.5px; margin-bottom:clamp(14px,1.8vw,20px);
}
.artikel-zurueck::before{ content:"\2190"; }
.artikel-zurueck:hover{ color:var(--hell); }
.artikel-klabel{
  display:inline-block; background:rgba(255,246,239,.14); color:var(--hell);
  border-radius:999px; padding:7px 16px; font-weight:600; font-size:14px;
  margin-bottom:clamp(16px,2vw,22px);
}
.artikel-meta{ margin-top:clamp(18px,2.2vw,26px); color:var(--text-auf-dunkel); font-size:15.5px; font-weight:600; }
.artikel-meta .klaeren-hell{ font-weight:700; }

.lese{ max-width:70ch; margin:0 auto; padding:clamp(56px,7vw,96px) 0; }
.lese > p{ font-size:19px; line-height:1.75; margin-bottom:22px; }
.lese h2{
  font-family:'Tanker','Cabinet Grotesk',sans-serif; font-weight:400;
  text-transform:uppercase; letter-spacing:.004em; line-height:1.05;
  font-size:clamp(26px,3vw,38px); margin:clamp(44px,5vw,64px) 0 18px;
}
.lese h3{
  font-family:'Cabinet Grotesk',sans-serif; font-weight:800;
  font-size:clamp(19px,1.7vw,23px); line-height:1.25; margin:32px 0 12px;
}
.lese ul{ margin:0 0 22px 0; padding-left:0; list-style:none; }
.lese ul li{ position:relative; padding-left:28px; margin-bottom:12px; font-size:18px; line-height:1.6; }
.lese ul li::before{
  content:""; position:absolute; left:4px; top:.62em;
  width:8px; height:8px; border-radius:50%; background:var(--terra);
}
.lese blockquote{
  margin:clamp(36px,4.4vw,56px) 0; padding-left:26px;
  border-left:5px solid var(--terra);
  font-family:'Cabinet Grotesk',sans-serif; font-weight:800;
  font-size:clamp(23px,2.6vw,34px); line-height:1.18; letter-spacing:-.01em;
}
.lese figure{ margin:clamp(32px,4vw,52px) 0; }
.bild-ph{
  border-radius:var(--radius-karte); aspect-ratio:16/9;
  background:linear-gradient(150deg,#EAE2D8,#D9CEC1);
  display:flex; align-items:center; justify-content:center; text-align:center;
  padding:24px;
}
.bild-ph span{ font-size:14px; color:var(--grau); max-width:46ch; line-height:1.5; }
.lese figcaption{ margin-top:12px; font-size:13.5px; color:var(--grau); }
/* Arbeitstext-Absätze klar markiert (finaler Text: brand-texter),
   ruhig gesetzt, damit das fertige Lese-Layout trotzdem schön wirkt. */
.lese p.platzhalter, .lese li.platzhalter{
  color:var(--grau); border-left:3px solid rgba(143,168,138,.5);
  padding-left:16px;
}

/* Autoren-Box am Artikelende (Max, graceful Portrait) */
.autor-box{
  display:flex; gap:20px; align-items:center;
  max-width:70ch; margin:clamp(48px,6vw,72px) auto 0;
  padding-top:clamp(32px,4vw,44px);
  border-top:1px solid rgba(29,23,18,.12);
}
.autor-foto{
  flex:none; width:72px; height:72px; border-radius:50%;
  background:url('max-portrait.jpg') center/cover no-repeat, linear-gradient(150deg,#EAE2D8,#D9CEC1);
}
.autor-box p{ color:var(--grau); font-size:16px; }
.autor-box p b{ color:var(--schwarz); }
.autor-box a{ color:var(--terra-tief); font-weight:700; text-decoration:none; }
.autor-box a:hover{ color:var(--terra); }

/* Kontaktzeile im dunklen Abschluss (erstgespraech) */
.abschluss-kontakt{ margin-top:18px; font-size:15.5px; color:#C9BFB4; }
.abschluss-kontakt a{ color:var(--hell); font-weight:600; text-decoration:underline; text-underline-offset:3px; }


/* ---------- Rechtsseiten (Impressum / Datenschutz) ---------- */
.prosa h2.kapitel{ margin-bottom:18px; }
.prosa h3{ font-family:'Cabinet Grotesk',sans-serif; font-weight:800; font-size:clamp(18px,1.5vw,21px); margin:34px 0 8px; color:var(--dunkel); }
.prosa a{ color:var(--terra); text-underline-offset:2px; }
.rechtshinweis{ margin-top:30px; padding:18px 22px; background:var(--sand); font-size:14.5px; line-height:1.6; border-radius:14px; color:var(--dunkel); }
.prosa .rechtshinweis:first-child{ margin-top:0; margin-bottom:30px; }
.fuss-recht a{ color:inherit; text-underline-offset:2px; }

/* ---------- Case-Study-Kacheln: echte Website im Browser-Mockup ----------
   Der reale Screenshot sitzt in einem CSS-Browserrahmen (Adresszeile =
   Live-Beweis) und schwebt mit Schatten auf der Markenfläche. Kein
   vorgerendertes Bild, voll responsiv. */
.case-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,3.6vw,56px); }
.case{ display:flex; flex-direction:column; }
.mockup{
  border-radius:14px; overflow:hidden; background:#fff;
  box-shadow:0 36px 64px -26px rgba(29,23,18,.5), 0 10px 26px -14px rgba(29,23,18,.22);
  border:1px solid rgba(29,23,18,.06);
  transition:transform .35s var(--feder), box-shadow .35s var(--feder);
}
.case:hover .mockup{ transform:translateY(-7px); box-shadow:0 48px 80px -26px rgba(29,23,18,.55), 0 16px 32px -14px rgba(29,23,18,.26); }
.mockup-bar{
  height:clamp(32px,3vw,40px); background:#ECE8E1;
  display:flex; align-items:center; gap:7px; padding:0 clamp(13px,1.3vw,17px);
  border-bottom:1px solid rgba(29,23,18,.06);
}
.mockup-bar .dot{ width:10px; height:10px; border-radius:50%; background:#C9C2B8; flex:none; }
.mockup-bar .url{
  margin-left:12px; font-size:12.5px; color:#8A837A; background:#F6F3ED;
  border-radius:999px; padding:4px 13px; font-weight:500; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.mockup-shot{ aspect-ratio:16/10; background-size:cover; background-position:top center; background-repeat:no-repeat; }
.case-meta{ margin-top:clamp(18px,2vw,26px); }
.case-meta h3{ font-family:'Cabinet Grotesk',sans-serif; font-weight:900; font-size:clamp(21px,2.1vw,28px); letter-spacing:-.01em; line-height:1.12; }
.case-meta p{ margin-top:7px; color:var(--grau); font-size:16px; max-width:42ch; }
@media (max-width:820px){ .case-grid{ grid-template-columns:1fr; gap:clamp(34px,8vw,46px); } }

/* ---------- Kundenstimmen: dunkler Highlight-Block mit echten Review-Karten ---------- */
.stimmen-block{ background:var(--dunkel); color:var(--text-auf-dunkel); padding:clamp(84px,10vw,148px) 0; }
.stimmen-block .kapitel{ color:var(--hell); }
.stimmen-block .einleitung{ color:#E4DBD0; }
.stimmen-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,2.6vw,36px); margin-top:clamp(44px,5vw,68px); }
.stimme{ background:#fff; color:var(--schwarz); border-radius:var(--radius-karte); padding:clamp(30px,3.2vw,44px); display:flex; flex-direction:column; }
.sterne{ color:var(--terra); font-size:19px; letter-spacing:4px; margin-bottom:20px; }
.stimme blockquote{ font-family:'Cabinet Grotesk',sans-serif; font-weight:500; font-size:clamp(19px,1.7vw,23px); line-height:1.42; }
.stimme figcaption{ margin-top:auto; padding-top:26px; font-weight:800; }
.stimme figcaption span{ display:block; font-weight:500; color:var(--grau); font-size:14.5px; margin-top:3px; }
.stimmen-hinweis{ margin-top:clamp(28px,3vw,40px); font-size:13.5px; }
@media(max-width:820px){ .stimmen-grid{ grid-template-columns:1fr; } }

/* ---------- Namens-Geschichte (ueber-oma): Text + Bild, füllt die Fläche ---------- */
.name-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:clamp(40px,5vw,80px); align-items:start; margin-top:clamp(26px,3vw,40px); }
.name-grid .prosa{ max-width:none; }
.name-bild{
  border-radius:var(--radius-karte); overflow:hidden;
  min-height:clamp(360px,34vw,520px);
  background:url('max-beratung.jpg') center/cover no-repeat, linear-gradient(150deg,#22405E,#102A43);
  position:sticky; top:100px;
}
@media(max-width:900px){
  .name-grid{ grid-template-columns:1fr; gap:clamp(30px,6vw,40px); }
  .name-bild{ position:static; min-height:clamp(240px,58vw,360px); }
}

/* ---------- Portfolio-Kacheln: echte Projekt-Mockups (nach Gewerk getaggt) ---------- */
.folio-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(26px,2.8vw,44px); margin-top:clamp(44px,5vw,68px); }
.folio-grid.zwei{ grid-template-columns:repeat(2,1fr); }
.folio{ display:flex; flex-direction:column; }
.folio-bild{
  position:relative; border-radius:var(--radius-karte); overflow:hidden;
  aspect-ratio:4/5; background:#EDEAE4 center/cover no-repeat;
  box-shadow:0 22px 44px -26px rgba(29,23,18,.32);
  transition:transform .35s var(--feder), box-shadow .35s var(--feder);
}
.folio:hover .folio-bild{ transform:translateY(-6px); box-shadow:0 34px 62px -26px rgba(29,23,18,.42); }
.folio-tag{
  position:absolute; top:14px; left:14px; z-index:2;
  background:rgba(29,23,18,.85); color:var(--hell);
  font-size:11.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
  padding:6px 13px; border-radius:999px;
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
}
.folio-meta{ margin-top:clamp(16px,1.8vw,22px); }
.folio-meta h3{ font-family:'Cabinet Grotesk',sans-serif; font-weight:900; font-size:clamp(20px,2vw,26px); letter-spacing:-.01em; line-height:1.1; }
.folio-meta p{ margin-top:5px; color:var(--grau); font-size:15.5px; max-width:40ch; }
@media(max-width:900px){ .folio-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .folio-grid, .folio-grid.zwei{ grid-template-columns:1fr; } }


/* ===== GEWÄHLTE PALETTE: Navy + Sage — heller Sage-Akzent braucht dunklen Text ===== */
.mark, .pill-terra, .satz-block, .knummer{ color:#20281E; }
.satz-block .satz-sub, .satz-block .satz-vermerk{ color:#33402F; }
.sterne{ color:#748E6F; }

/* Sehr schmale Handys: große Tanker-Headlines verkleinern, damit lange
   Marker-Wörter (z.B. „ERSTGESPRÄCH", „FACHCHINESISCH") mit white-space:nowrap
   nicht über den Rand laufen. */
@media (max-width:480px){
  h1{ font-size:clamp(33px, 9.8vw, 50px); }
  h2.kapitel{ font-size:clamp(26px, 7.6vw, 40px); }
  .satz-block .satz{ font-size:clamp(28px, 8vw, 40px); }
  .abschluss h2{ font-size:clamp(30px, 8.4vw, 40px); }
  .abschluss .satz-vorlauf{ font-size:clamp(18px, 5vw, 26px); }
}