/* ==========================================================================
   Spillmann Unternehmensberatung
   Basis: Figma «Spillmann» / Seite Final (Raster 1728 px = 4 × 432 px, Padding 50 px).
   Alle fixen Figma-Werte sind hier fliessend: clamp(min, vw-Wert, Figma-Wert).
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("/assets/fonts/dm-sans-latin.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "DM Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 100 1000;
  src: url("/assets/fonts/dm-sans-latin-ext.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Tokens (Figma-Variablen) ---------- */
:root {
  /* Farben */
  --green: #656449;      /* Grün 1 */
  --gold: #c79a38;       /* GOLD */
  --gold-dark: #b4882b;  /* Hover */
  --beige: #f5f1e9;      /* baige */
  --white: #fff;

  /* Schriften – New Order via Adobe Fonts («new-order») */
  --ff-head: "new-order", "DM Sans", system-ui, sans-serif;
  --ff-body: "DM Sans", system-ui, sans-serif;

  /* Raster */
  --pad: clamp(20px, 2.894vw, 50px);         /* Padding Side / Between = 50 */
  --col: min(25vw, 432px);                   /* Seitenspalte = 432 */
  --space-l: clamp(56px, 5.787vw, 100px);    /* 100 */
  --space-xl: clamp(88px, 11.574vw, 200px);  /* 200 */
  --gap: 20px;
  --box: 1800px;                             /* maximale Seitenbreite */
  --circle: min(40.4vw, 970px);              /* grosser Kreis: wächst bis 2400 px mit, bleibt so links angeschnitten */
  --badge: clamp(225px, 18.4vw, 320px);     /* Moderation-Kreis */
  --badge-type: clamp(240px, 20.25vw, 350px); /* Bezugsgrösse für die Schrift im Kreis */
  --bar-right: 3.935%;                       /* grüner Balken: Abstand rechts (68), relativ zur Box */
  --bar-width: 17.824%;                      /* grüner Balken: Breite (308), wächst mit der Box mit */

  /* Typografie (Figma-Textstile) */
  --fs-h1: clamp(34px, 3.762vw, 65px);
  --fs-h2: clamp(28px, 2.894vw, 50px);
  --fs-h3: clamp(22px, 2.025vw, 35px);
  --fs-h4: clamp(19px, 1.273vw, 22px);
  --fs-eyebrow: clamp(14px, 1.042vw, 18px);
  --fs-nav: clamp(17px, 1.389vw, 24px);
  --fs-body-l: clamp(17px, 1.157vw, 20px);
  --fs-body: clamp(16px, 1.042vw, 18px);
  --fs-body-s: clamp(14px, 0.926vw, 16px);
  --fs-tag: clamp(13px, 0.926vw, 16px);
  --fs-mail: clamp(18px, 1.505vw, 26px);

  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-soft: cubic-bezier(.4, 0, .2, 1);   /* weiche Hover-Übergänge */
  --hover: .3s;
}

/* ---------- Reset / Basis ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { overflow-x: clip; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }
body {
  margin: 0;
  overflow-x: clip;
  background: var(--beige);
  color: var(--green);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: 1.556; /* 28/18 */
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; }
a { color: inherit; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link {
  position: absolute; left: var(--pad); top: -100px; z-index: 100;
  padding: 10px 16px; background: var(--green); color: var(--beige);
}
.skip-link:focus { top: var(--pad); }

/* ---------- Box (max. 1800 px) ---------- */
/* Header, alle Sektionen und Footer sind auf --box begrenzt und zentriert.
   Farbige Bänder (Kontakt, Footer) laufen per ::before trotzdem randlos durch. */
.site-header, main > *, .site-footer { width: 100%; max-width: var(--box); margin-inline: auto; }
.contact, .site-footer { position: relative; isolation: isolate; }
.contact::before, .site-footer::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: var(--green);
}
.site-footer::before { top: -2px; border-top: 2px solid var(--beige); }

/* ---------- Typo-Klassen ---------- */
.h1, .h2, .h3 {
  font-family: var(--ff-head);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  hyphens: manual;
  overflow-wrap: break-word;
}
.h1 { font-size: var(--fs-h1); line-height: 1.154; } /* 65/75 */
.h2 { font-size: var(--fs-h2); line-height: 1.2; }
.h3 { font-size: var(--fs-h3); line-height: 1.2; }
.h4 { font-family: var(--ff-body); font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; }
.eyebrow {
  font-family: var(--ff-head);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.2;
}
.body-l { font-size: var(--fs-body-l); line-height: 1.5; } /* 20/30 */
/* Eyebrow und Titel gehören zusammen: halber Abstand (10 statt 20 px) */
.eyebrow + .h1, .eyebrow + .h2 { margin-top: -10px; }

/* Button (Figma: Kontakt, 147 × 53, Radius 38.5) */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 53px; padding: 0 30px;
  border: 2px solid var(--green); border-radius: 38.5px;
  background: var(--green); color: var(--white);
  font-family: var(--ff-head); font-size: var(--fs-eyebrow); font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
  transition: background .25s var(--ease), color .25s var(--ease);
}
.button:hover { background: transparent; color: var(--green); }

/* Tags (Label/Tag) */
.tags { display: flex; flex-wrap: wrap; gap: 11px; list-style: none; }
.tag {
  padding: 8px 12px;
  background: var(--green); color: var(--beige);
  font-size: var(--fs-tag); font-weight: 700; line-height: 1.3;
  text-transform: uppercase;
}

/* Plus-Icon (23 × 23, Strich 2.556) */
.plus {
  position: absolute; right: calc(var(--pad) / 2); bottom: calc(var(--pad) / 2);
  width: 23px; height: 23px;
  transition: transform var(--hover) var(--ease-soft);
}
.plus::before, .plus::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 23px; height: 2.556px; background: var(--beige);
}
.plus::after { transform: rotate(90deg); }

/* ---------- Header ---------- */
.site-header {
  /* Klebt oben, versteckt sich beim Runterscrollen, erscheint beim Hochscrollen (JS) */
  position: sticky; top: 0; z-index: 20;
  display: flex; justify-content: space-between; align-items: stretch;
}
.site-header::before { /* Hintergrund randlos, auch über 1800 px */
  content: ""; position: absolute; z-index: -1; top: 0; bottom: 0;
  left: calc(50% - 50vw); right: calc(50% - 50vw);
  background: var(--beige);
}
.site-header.is-hidden { transform: translateY(-100%); }
/* Beim Scrollen wird der Header schmaler. Der Unterschied wird mit margin-bottom
   ausgeglichen, damit der Inhalt darunter nicht springt (sonst zittert die Seite
   an der Scroll-Schwelle, weil Chrome die Position nachkorrigiert). */
.site-header { --logo-py: var(--pad); --logo-py-s: clamp(14px, 1.4vw, 24px); transition: transform .35s var(--ease), margin .35s var(--ease); }
.site-header.is-scrolled { margin-bottom: calc((var(--logo-py) - var(--logo-py-s)) * 2); }
.site-header__logo { position: relative; z-index: 1; /* bleibt über dem Dropdown */ flex: 0 1 var(--col); padding: var(--logo-py) var(--pad); transition: padding .35s var(--ease); }
.site-header.is-scrolled .site-header__logo { padding-block: var(--logo-py-s); }
.site-header__logo img { width: clamp(170px, 16.4vw, 283px); }

.site-nav ul { display: flex; height: 100%; list-style: none; }
.site-nav__link {
  position: relative;
  display: flex; align-items: center; height: 100%;
  padding: 0 var(--pad);
  font-family: var(--ff-head); font-size: var(--fs-nav); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none;
}
/* Aktiver Link: goldene Kugel hinter dem Text (wie im Logo), Hover: Kugel blendet halb ein */
.site-nav__link::after {
  content: ""; position: absolute; top: 50%; right: calc(var(--pad) - .8em);
  width: .42em; aspect-ratio: 1; border-radius: 50%; background: var(--gold);
  transform: translateY(-50%) scale(0); transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.site-nav__link:hover::after { transform: translateY(-50%) scale(1); opacity: .5; }
.site-nav__link[aria-current]::after { transform: translateY(-50%) scale(1); opacity: 1; }

/* Dropdown «Angebot»: klappt nach unten auf (nur Bewegung, kein Einblenden) */
.site-nav__item { position: relative; }
.site-nav__toggle { border: 0; background: none; color: inherit; line-height: inherit; cursor: pointer; }
.site-nav__toggle::after { content: none; } /* kein Punkt neben dem Pfeil, aktiv ist der Unterpunkt markiert */
.site-nav__chevron {
  width: .38em; aspect-ratio: 1; margin-left: .55em;
  border-right: 2px solid; border-bottom: 2px solid;
  transform: translateY(-30%) rotate(45deg); transition: transform .3s var(--ease);
}
.is-open > .site-nav__toggle .site-nav__chevron { transform: translateY(20%) rotate(225deg); }
/* Desktop: Panel über die ganze Breite im Beige des Headers,
   die Einträge stehen unter «Angebot» (--sub-x setzt das JS) */
.site-nav__item--sub { position: static; }
.site-nav__sub {
  position: absolute; top: calc(50% + 1em); left: 0; right: 0; /* startet direkt unter «Angebot» */
  padding: .6em 0 calc(var(--pad) * 1.2);
  clip-path: inset(0 -100vw 100% -100vw); visibility: hidden;
  transition: clip-path .45s var(--ease), visibility 0s .45s;
}
.site-nav__sub::before { /* Hintergrund randlos, auch über 1800 px */
  content: ""; position: absolute; z-index: -1; inset: 0 calc(50% - 50vw);
  background: var(--beige);
}
.is-open > .site-nav__sub { clip-path: inset(0 -100vw); visibility: visible; transition: clip-path .45s var(--ease), visibility 0s; }
.site-nav__sub ul { display: block; height: auto; padding-left: calc(var(--sub-x, 0px) + var(--pad)); }
.site-nav__sublink {
  position: relative; display: inline-block; padding: 7px 0;
  font-family: var(--ff-head); font-size: calc(var(--fs-nav) * .85); font-weight: 600;
  letter-spacing: .05em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
}
.site-nav__sublink::after {
  content: ""; position: absolute; top: 50%; right: -.8em;
  width: .42em; aspect-ratio: 1; border-radius: 50%; background: var(--gold);
  transform: translateY(-50%) scale(0); transition: transform .3s var(--ease), opacity .3s var(--ease);
}
.site-nav__sublink:hover::after { transform: translateY(-50%) scale(1); opacity: .5; }
.site-nav__sublink[aria-current]::after { transform: translateY(-50%) scale(1); opacity: 1; }

.nav-toggle { display: none; }
.site-nav__meta { display: none; }

/* ---------- Deko ---------- */
.deco-circle {
  position: absolute; right: var(--pad); top: 50%;
  width: var(--circle); aspect-ratio: 1;
  border-radius: 50%; background: var(--gold);
  translate: 0 -50%;
}
.deco-dot { width: clamp(90px, 10.65vw, 184px); aspect-ratio: 1; border-radius: 50%; background: var(--gold); }
.deco-pillars { /* drei Säulen (305 × 339 bei 1728) */
  display: flex; gap: 5%;
  width: min(17.64vw, 305px); aspect-ratio: 305 / 339;
}
.deco-pillars > span { flex: 1; background: var(--green); }

/* Illustration «Über mich»: Säulen wachsen nacheinander hoch, die Kugel bleibt stehen */
.js .deco-pillars.anim > span { transform: scaleY(0); transform-origin: bottom; transition: transform .9s var(--ease); }
.js .deco-pillars.anim > span:nth-child(2) { transition-delay: .15s; }
.js .deco-pillars.anim > span:nth-child(3) { transition-delay: .3s; }
.js .deco-pillars.anim.is-visible > span { transform: none; }

/* Intro: der grosse Kreis wächst beim Laden sanft aus seiner Mitte auf */
.js .hero .deco-circle { animation: circle-grow 3.2s cubic-bezier(.22, 1, .36, 1) .1s both; }
@keyframes circle-grow { from { scale: .8; } }

/* Grüner Balken (308 × 1296 bei 1728) – liegt hinter den Karten */
.deco-bar {
  position: absolute; z-index: 0;
  right: var(--bar-right); width: var(--bar-width);
  background: var(--green);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  display: grid; grid-template-columns: var(--col) minmax(0, 1fr);
  min-height: clamp(520px, 49.19vw, 1100px); /* wächst mit dem Kreis */
}
.hero__side { position: relative; }
.hero__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  gap: var(--gap);
  /* rechts Platz für den grünen Balken lassen (Figma: 113 px Spacer) */
  padding: var(--pad) calc(21.76vw + var(--pad)) var(--pad) var(--pad);
}
.hero__body .body-l { max-width: 782px; }

/* ---------- 404 ---------- */
.hero .h1.hero__404 { font-size: clamp(100px, 11vw, 200px); line-height: .9; letter-spacing: .04em; }
/* ---------- Angebot (Home) ---------- */
.offer { position: relative; }
.offer .deco-bar { top: -9.84vw; bottom: -5.2vw; }          /* Home: ragt in Hero & Über mich */
.offer--detail .deco-bar { top: 12.85vw; bottom: -15.4vw; }  /* Unterseiten */

.intro {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end; gap: var(--gap);
  max-width: 846px; min-height: 300px;
  padding: var(--space-l) var(--pad);
}
.intro > p:not(.eyebrow) { max-width: 784px; }

.offer__cards {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pad);
}
.card {
  position: relative;
  display: flex; flex-direction: column; gap: 10px;
  padding: var(--pad);
  background: var(--gold); color: var(--beige);
}
.card--link {
  justify-content: space-between; gap: 40px;
  min-height: clamp(420px, 34.72vw, 600px);
  text-decoration: none;
  transition: background-color var(--hover) var(--ease-soft);
}
.card__head { display: flex; flex-direction: column; gap: 10px; }
.card--link .tags { padding-right: 20px; }
.card p { max-width: 70ch; }
.card--link:hover { background: var(--gold-dark); }
.card--link:hover .plus, .badge:hover .plus { transform: rotate(90deg); }

/* Moderation-Kreis (350 px) – sitzt über der 3. Spalte */
.badge {
  position: absolute; z-index: 2;
  top: clamp(8px, .84vw, 14.5px);
  left: calc((100% - 2 * var(--pad)) / 3 * 2 + 2 * var(--pad));
  width: var(--badge); aspect-ratio: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--gap);
  padding: 0 12px clamp(26px, 2.4vw, 42px);
  border-radius: 50%;
  background: var(--gold); color: var(--beige);
  text-align: center; text-decoration: none;
  transition: background-color var(--hover) var(--ease-soft), transform var(--hover) var(--ease-soft);
}
.badge:hover { background: var(--gold-dark); }
.badge { container-type: inline-size; }
.badge .h3 { font-size: min(var(--fs-h3), calc(var(--badge-type) * .1)); }
.badge__text { font-size: min(var(--fs-body), calc(var(--badge-type) * .052)); line-height: 1.5; }
.badge .plus { position: relative; right: auto; bottom: auto; }
.badge__text { max-width: 240px; text-wrap: balance; }

/* ---------- Angebot (Unterseiten) ---------- */
.offer--detail .intro { max-width: 839px; min-height: 0; }
.offer__grid {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pad);
}

.checklist { display: flex; flex-direction: column; gap: 6px; }
.checklist__title { font-size: var(--fs-body); font-weight: 600; line-height: 1.556; }
.checklist ul { display: flex; flex-direction: column; gap: 6px; padding-left: 27px; }

/* ---------- Split (Über mich / So gehe ich vor) ---------- */
.split {
  position: relative;
  display: grid; grid-template-columns: var(--col) minmax(0, 864px);
}
.split__side { position: relative; padding: 0 var(--pad); }
/* Unterseiten «So gehe ich vor»: Kreis bleibt in Figma-Grösse und wird immer links angeschnitten,
   auf breiten Bildschirmen bis an den Bildschirmrand geschoben (statt mitzuwachsen wie im Intro) */
.split__side--center .deco-circle {
  --c: min(40.4vw, 698px);
  width: var(--c); right: auto;
  left: calc(min(0px, (var(--box) - 100vw) / 2) - var(--c) * .45);
}
.split__side--bottom {
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  gap: clamp(40px, 4.63vw, 80px);
}
.split__body {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; gap: 40px;
  padding: var(--space-xl) var(--pad) var(--space-l);
}
.split__head { display: flex; flex-direction: column; gap: var(--gap); }
/* Portrait «Über mich»: Desktop in der linken Spalte nahe am Text, auf Höhe des Titels; mobil über der Eyebrow */
.split__head { position: relative; }
.portrait {
  --size: clamp(130px, 10vw, 160px); /* Breite, Hochformat 4:5, eckig wie die Karten */
  position: absolute; top: 0; left: calc(-1 * var(--pad) * 1.4 - var(--size));
  width: var(--size); height: auto; aspect-ratio: 4 / 5; object-fit: cover;
}
.split__lead { max-width: 604px; }

.entries { display: flex; flex-direction: column; gap: var(--gap); max-width: 764px; }
.entries__list { list-style: none; max-width: 764px; }
.entry {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 0;
  border-top: 1px solid var(--green);
}
.entry__title { font-weight: 700; }
.entry__title--label { font-size: var(--fs-tag); text-transform: uppercase; line-height: 1.3; padding-top: 1px; }

/* ---------- Kontakt ---------- */
.contact {
  display: grid; grid-template-columns: var(--col) minmax(0, 1fr);
  min-height: clamp(480px, 46.3vw, 800px);
  color: var(--beige);
}
.contact__body {
  display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--gap);
  padding: var(--space-l) var(--pad);
}
.contact__body .body-l { max-width: 782px; }
.contact__mail {
  display: inline-block; margin-top: 10px;
  font-size: var(--fs-mail); font-weight: 700; line-height: 1.3;
  text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em;
  text-decoration-color: transparent;
  overflow-wrap: anywhere;
  transition: text-decoration-color .25s var(--ease);
}
.contact__mail:hover { text-decoration-color: var(--gold); }

/* ---------- Footer ---------- */
.site-footer {
  display: grid; grid-template-columns: var(--col) minmax(0, 1fr) var(--col);
  margin-top: 2px;
  color: var(--beige);
}
.site-footer > * { padding: var(--pad); }
.site-footer__logo img { width: clamp(170px, 16.4vw, 283px); }
.site-footer__address { line-height: 1.556; }
.site-footer__gap { display: block; height: 30px; }
.site-footer__legal {
  align-self: end;
  display: flex; flex-direction: column;
  font-size: var(--fs-body-s); line-height: 1.75;
  padding-bottom: calc(var(--pad) + 28px); /* Figma: leere Zeile unter Datenschutz */
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- Textseiten (Impressum, Datenschutz) ---------- */
.text-page { display: grid; grid-template-columns: var(--col) minmax(0, 864px); }
.text-page__body { padding: var(--space-l) var(--pad) var(--space-xl); }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2em; font-size: var(--fs-h4); }
.prose a { text-underline-offset: .2em; }

/* ---------- Scroll-Animation ---------- */
/* Inhalte gleiten sanft hoch – nur Bewegung, kein Ausblenden */
.js .reveal { transform: translateY(32px); transition: transform .9s var(--ease); }
.js .reveal.is-visible { transform: none; }
/* Karten & Moderation-Kreis: Scroll-Bewegung + weicher Farbwechsel beim Hover kombinieren
   (sonst überschreibt .reveal die Hover-Transition) */
.js .card--link.reveal, .js .badge.reveal {
  transition: transform .9s var(--ease), background-color var(--hover) var(--ease-soft);
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { transform: none; transition: none; }
  .js .deco-pillars.anim > span { transform: none; transition: none; }
  .js .hero .deco-circle { animation: none; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Tablet  (< 1100 px)
   ========================================================================== */
@media (max-width: 1099px) {
  /* Unterseiten: gleicher Balken am rechten Rand, hinter allen Karten bis in «So gehe ich vor» */
  .offer--detail .deco-bar { display: none; }
  .offer--detail .intro { padding-bottom: 98px; }  /* 50 px Luft + 48 px Balken */
  .offer--detail .offer__grid::before {
    content: ""; position: absolute; z-index: -1;
    top: -48px; bottom: -72px; right: 0;
    width: clamp(130px, 30vw, 240px);
    background: var(--green);
  }
  .offer--detail + .split .split__body { padding-top: calc(72px + 50px + var(--pad)); }
  .hero__body { padding-right: var(--pad); }

  .offer__cards { grid-template-columns: minmax(0, 1fr); }
  .card--link { min-height: 0; gap: 32px; padding-bottom: calc(var(--pad) + 30px); }

  /* Moderation-Kreis unter den Karten. Der grüne Balken läuft am rechten Rand
     hinter allen Karten durch (sichtbar in den Lücken) und endet in der Kreismitte. */
  .page-home .offer {
    --badge: clamp(190px, 24vw, 240px);
    --badge-type: clamp(220px, 28vw, 280px);
    --badge-gap: var(--pad);
    --bar-w: clamp(130px, 30vw, 240px);
    display: flex; flex-direction: column;
  }
  .page-home .offer > .deco-bar { display: none; }
  .page-home .offer__cards::before {
    content: ""; position: absolute; z-index: -1;
    top: -48px;                                   /* 50 px Abstand zum Intro-Text */
    bottom: calc(-1 * (var(--badge-gap) + var(--badge) + var(--badge-gap)));  /* ragt unten aus der Kugel */
    right: 0;                                     /* ganz am rechten Rand */
    width: var(--bar-w);
    background: var(--green);
  }
  .badge {
    position: relative; top: auto; left: auto;
    align-self: flex-end; margin: var(--badge-gap) var(--pad) 0 0;
    justify-content: center; padding: 0 24px;
  }
  /* Titel + Text optisch mittig, das Plus sitzt separat darunter */
  .badge .plus { position: absolute; left: 50%; bottom: 13%; margin-left: -11.5px; }
  .badge .badge__text { margin-bottom: 4%; }
  .intro { min-height: 0; }
  .page-home .intro { padding-bottom: 98px; }  /* 50 px Luft + 48 px Balken */
}

/* ==========================================================================
   Navigation mobil (< 900 px)
   ========================================================================== */
@media (max-width: 899px) {
  .site-header { align-items: center; }
  .site-header { --logo-py-s: 14px; }
  .site-header__logo { flex: 0 0 auto; }
  .site-header__logo { position: relative; z-index: 31; } /* bleibt über dem offenen Menü sichtbar */

  .nav-toggle {
    position: relative; z-index: 31;
    display: grid; place-items: center;
    width: 48px; height: 48px; margin-right: calc(var(--pad) - 12px);
    border: 0; background: none; color: var(--green); cursor: pointer;
  }
  .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after {
    display: block; width: 28px; height: 2.5px; background: currentColor;
    transition: transform .3s var(--ease), opacity .2s;
  }
  .nav-toggle__bars { position: relative; }
  .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; }
  .nav-toggle__bars::before { top: -9px; }
  .nav-toggle__bars::after { top: 9px; }
  .nav-open .nav-toggle__bars { background: transparent; }
  .nav-open .nav-toggle__bars::before { transform: translateY(9px) rotate(45deg); }
  .nav-open .nav-toggle__bars::after { transform: translateY(-9px) rotate(-45deg); }

  .site-nav {
    /* beginnt unter dem Header (Höhe setzt das JS), so scrollt nichts unter das Logo */
    position: fixed; inset: var(--nav-top, 88px) 0 0; z-index: 30;
    display: flex; flex-direction: column; gap: clamp(24px, 6vh, 48px);
    padding: 16px var(--pad) calc(var(--pad) + env(safe-area-inset-bottom));
    overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; /* scrollt nur, wenn der Platz wirklich nicht reicht */
    background: var(--beige);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s;
  }
  .nav-open .site-nav { opacity: 1; visibility: visible; }
  /* Scroll-Sperre: Seite wird per JS fixiert, Position bleibt erhalten */
  .nav-locked, .nav-locked body { overflow: hidden; }
  .nav-locked body { position: fixed; left: 0; right: 0; width: 100%; }
  .nav-locked .site-header { position: fixed; top: 0; left: 0; right: 0; transform: none; }
  /* vertikal mittig, solange es Platz hat; sonst oben beginnen und scrollen (statt unter das Logo zu rutschen) */
  .site-nav > ul { margin-top: auto; }
  .site-nav__meta { margin-bottom: auto; }
  .site-nav ul { position: relative; flex-direction: column; height: auto; gap: 4px; }
  .site-nav__link { padding: 8px 0; font-size: clamp(24px, 7vw, 32px); }
  /* Einträge gestaffelt einblenden */
  .site-nav li, .site-nav__meta { opacity: 0; transform: translateY(12px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
  .nav-open .site-nav li, .nav-open .site-nav__meta { opacity: 1; transform: none; }
  .nav-open .site-nav li:nth-child(1) { transition-delay: .08s; }
  .nav-open .site-nav li:nth-child(2) { transition-delay: .14s; }
  .nav-open .site-nav li:nth-child(3) { transition-delay: .2s; }
  .nav-open .site-nav__meta { transition-delay: .28s; }
  .site-nav__meta {
    position: relative; display: block;
    padding-top: 24px; border-top: 1px solid var(--green);
    font-size: var(--fs-body); font-style: normal; line-height: 1.556;
  }
  .site-nav__meta a { text-decoration: none; }
  .site-nav__gap { display: block; height: 16px; }
  .site-nav__link { display: inline-flex; }
  .site-nav__link::after { right: -.8em; }
  /* Dropdown mobil: klappt im Menü als Akkordeon auf */
  .site-nav__toggle { align-items: center; height: auto; }
  .site-nav li { flex-shrink: 0; }
  .site-nav__sub {
    position: static; display: grid; grid-template-rows: 0fr;
    padding: 0; background: none; color: inherit; clip-path: none;
    transition: grid-template-rows .4s var(--ease), visibility 0s .4s;
  }
  .is-open > .site-nav__sub { grid-template-rows: 1fr; clip-path: none; transition: grid-template-rows .4s var(--ease), visibility 0s; }
  .site-nav__sub::before { content: none; }
  .site-nav__sub ul { min-height: 0; overflow: hidden; gap: 0; padding-left: 4px; }
  .site-nav__sub li:last-child { padding-bottom: 8px; }
  .site-nav__sublink { padding: 6px 0; font-size: clamp(17px, 5vw, 22px); }
}

/* ==========================================================================
   Mobile  (< 768 px)
   ========================================================================== */
@media (max-width: 767px) {
  :root { --gap: 16px; }

  /* Hero wie die Visitenkarte: Halbkreis links am Rand, Titel daneben (ein Wort pro Zeile),
     Eyebrow, Text und Button darunter. */
  .hero {
    --hc: min(58vw, 320px);          /* Kreisdurchmesser */
    grid-template-columns: calc(var(--hc) / 2 + 4px) minmax(0, 1fr);
    column-gap: 16px; row-gap: 16px;
    align-items: center;
    min-height: 0;
    padding-bottom: var(--space-l);
  }
  .hero__body { display: contents; }
  .hero__side { grid-column: 1; grid-row: 1 / span 2; height: var(--hc); margin: 40px 0 28px; overflow-x: clip; }
  .hero__side .deco-circle { width: var(--hc); left: calc(var(--hc) / -2); right: auto; top: 0; translate: none; }
  .hero .h1 {
    grid-column: 2; grid-row: 2; align-self: start; margin: 0 var(--pad) 12px 0;
    font-size: min(7.4vw, 40px); line-height: 1.2;
    word-spacing: 100vw;            /* jedes Wort auf eine eigene Zeile */
  }
  .hero__body > :not(.h1, .eyebrow) { grid-column: 1 / -1; margin-inline: var(--pad); }
  .hero .eyebrow { grid-column: 2; grid-row: 1; align-self: end; margin: 12px var(--pad) -8px 0; line-height: 1.4; }
  .hero .eyebrow + .h1 { margin-top: 0; } /* mobiler Hero hat eigenen Abstand */
  .hero .h1.hero__404 { font-size: min(18vw, 96px); line-height: .9; letter-spacing: .02em; word-spacing: normal; }
  .hero .button { justify-self: start; margin-top: 8px; }

  .page-home .offer { --badge: min(56vw, 210px); --badge-type: min(64vw, 240px); }
  .badge__text { font-size: max(13px, calc(var(--badge-type) * .056)); }
  .intro { padding-bottom: 32px; }
  .card--link { gap: 24px; }

  .offer__grid { grid-template-columns: minmax(0, 1fr); }

  .split, .text-page { grid-template-columns: minmax(0, 1fr); }
  .split__body { padding-top: var(--space-l); }
  .portrait { position: static; --size: 160px; margin-bottom: 8px; }
  /* Über mich: Kreis + Säulen klein unter dem Inhalt */
  .split__side--bottom {
    order: 2; flex-direction: column; align-items: center; justify-self: start;
    gap: 24px; padding: 0 var(--pad);
  }
  .split__side--bottom .deco-dot { width: 64px; }
  .split__side--bottom .deco-pillars { width: 108px; }
  /* So gehe ich vor: Halbkreis wie im Hero */
  .split__side--center { display: none; }  /* mobil: Balken statt Kugel */

  .contact { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .contact__side { display: none; }
  .contact__body { padding-block: var(--space-xl) var(--space-l); }

  .site-footer { grid-template-columns: minmax(0, 1fr); }
  .site-footer > * { padding-block: 0; }
  .site-footer__logo { padding-top: var(--space-l); }
  .site-footer__address { padding-top: 32px; }
  .site-footer__legal { flex-direction: row; gap: 24px; padding-top: 32px; padding-bottom: var(--space-l); }

  .text-page__side { display: none; }
}

/* Sehr breite Bildschirme (> 1728 px): Kreis/Balken wachsen nicht weiter */
@media (min-width: 1729px) {
  .offer .deco-bar { top: -170px; bottom: -90px; }
  .offer--detail .deco-bar { top: 222px; bottom: -266px; }
  .hero__body { padding-right: calc(376px + var(--pad)); }
}

/* Kleine Telefone (< 400 px) */
@media (max-width: 399px) {
  :root { --fs-h1: 30px; --fs-h2: 26px; --fs-h3: 21px; }
  .h1, .h2, .h3 { letter-spacing: .08em; }
  .tags { gap: 8px; }
  .hero .eyebrow { font-size: 13px; letter-spacing: .03em; }
  .hero .h1 { font-size: 6.9vw; overflow-wrap: normal; }
}