/* Kreativ im Krater – Startseite (Entwurf)
   Farben: Moos (Grund), Flechte (helle Fläche), Blatt (Markengrün, sparsam), Kalk (Text hell) */

@font-face {
  font-family: "Archivo";
  /* archivo-de.woff2 = Teilmenge von archivo-latin.woff2 (pyftsubset, ohne Hinting): Latin-1 + deutsche Typografie
     („“‚‘ – — … € → ·), 78 statt 90 KB. Alles andere fällt auf archivo-latin-ext bzw. die Systemschrift zurück. */
  src: url("../fonts/archivo-de.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0020-007E, U+00A0-00FF, U+0152-0153, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212;
}
@font-face {
  font-family: "Archivo";
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --moos: #14231a;
  --moos-tief: #0c1610;
  --flechte: #dde4d8;
  --blatt: #7ad45a;
  --kalk: #f3f5ef;
  --grau: #93a093;
  --rand: clamp(1rem, 3vw, 3rem);
  --luft: clamp(6.75rem, 12vw, 12rem); /* Minimum = --kopf-frei: erster Text liegt nach einem Sprung unter dem Kopf */
  --display: "Archivo", "Arial Narrow", sans-serif;
  /* Typo-Tokens (Apple-Design §15): Tracking und Zeilenabstand je Größe, nie ein Wert für alle.
     Archivo hat keine opsz-Achse – die optische Größe wird über Breite (wdth) + Tracking nachgebildet:
     groß = schmal und eng gesperrt, klein = normale Breite und leicht geöffnet. */
  --track-display: -0.022em;  /* ab ~6rem */
  --track-titel: -0.012em;    /* 2–5rem */
  --track-text: 0;            /* Fließtext */
  --track-klein: 0.012em;     /* ≤ .9rem */
  --track-label: 0.06em;      /* Versalien-Labels */
  /* Bewegung: kritisch gedämpft, kein Überschwingen (Apple: damping 1.0, response ~.4 s) */
  --ease-raus: cubic-bezier(.22, 1, .36, 1);
  --ease-rein: cubic-bezier(.64, 0, .78, 0);
  --dauer-hover: .4s;
  --kopf-farbe: var(--kalk);
  /* Freiraum unter der transparenten Navigation: so weit muss der erste Text einer Sektion nach einem
     Anker-Sprung vom oberen Rand entfernt sein (Kopfhöhe ~5rem + Luft) */
  --kopf-frei: 6.75rem;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--moos);
  color: var(--kalk);
  font-family: var(--display);
  font-size: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
  line-height: 1.55;
  letter-spacing: var(--track-text);
  font-optical-sizing: auto;
  font-stretch: 100%;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--blatt); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.skip {
  position: fixed; left: 1rem; top: -4rem; z-index: 100;
  background: var(--blatt); color: var(--moos); padding: .6rem 1rem; border-radius: 99px;
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 1rem; }

/* Anker-Ziele: Normalerweise reicht die Sektionsluft (--luft ≥ --kopf-frei, dann 0). Nur falls --luft einmal
   kleiner wird, hält der Sprung den Rest als Abstand. Lenis liest scroll-margin-top beim Anker-Scrollen mit. */
main > section[id] { scroll-margin-top: max(0px, calc(var(--kopf-frei) - var(--luft))); }
#top { scroll-margin-top: 0; }

/* ---------- Bausteine ---------- */
.riesig {
  margin: 0;
  font-size: clamp(3.4rem, 11vw, 12rem);
  font-weight: 850;
  font-stretch: 62%;
  line-height: .86;
  letter-spacing: var(--track-display);
}
.abschnitt-kopf {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem;
  padding: 0 var(--rand);
  margin-bottom: clamp(2rem, 5vw, 5rem);
}
.textlink {
  font-weight: 600; text-decoration: none; white-space: nowrap;
  border-bottom: 2px solid var(--blatt); padding-bottom: .15em;
}
.textlink:hover { color: var(--blatt); }
.knopf {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 3rem; padding: .7rem 1.4rem; border-radius: 99px;
  font-weight: 700; text-decoration: none; line-height: 1.1;
  letter-spacing: var(--track-klein);
  transition: scale .1s ease-out, background-color var(--dauer-hover) var(--ease-raus), color var(--dauer-hover) var(--ease-raus), border-color var(--dauer-hover) var(--ease-raus);
}
/* Feedback beim Drücken, nicht erst beim Loslassen (Apple §1); scale statt transform, damit der Magnet (x/y) weiterläuft */
.knopf:active { scale: .97; }
.knopf--blatt { background: var(--blatt); color: var(--moos); }
.knopf--blatt:hover { background: #8fe46f; }
.knopf--rand { border: 2px solid currentColor; }
/* Glas-Knopf über Bewegtbild: leichtes Material für das interaktive Element (Apple §12) */
.knopf--glas {
  color: var(--kalk); background: rgb(12 22 16 / .34);
  -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .28), inset 0 0 0 1px rgb(255 255 255 / .14);
}
.knopf--glas:hover { background: rgb(12 22 16 / .5); }

/* ---------- Kopf ----------
   Immer transparent: kein Hintergrund, kein Material. Die Schriftfarbe folgt dem Abschnitt darunter
   (data-ton="hell|dunkel", per Scroll ermittelt) und blendet weich um, statt hart zu springen. */
.kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; gap: 2rem;
  padding: 1rem var(--rand);
  color: var(--kopf-farbe);
  transition: color .45s var(--ease-raus), translate .5s var(--ease-raus);
  pointer-events: none;
}
/* CSS-Transition auf translate setzt beim Richtungswechsel am aktuellen Wert an – unterbrechbar */
.kopf.weicht-aus { translate: 0 -110%; }
.kopf > * { pointer-events: auto; }
.kopf.auf-hell { --kopf-farbe: var(--moos); }
/* Lesbarkeit über Bewegtbild: weicher Schatten nur auf dunklem Grund (Vibrancy-Ersatz) */
.kopf:not(.auf-hell) .kopf__logo, .kopf:not(.auf-hell) .kopf__nav > ul > li > a { text-shadow: 0 1px 14px rgb(12 22 16 / .45); }
.kopf__logo { display: flex; align-items: center; gap: .7rem; text-decoration: none; font-weight: 800; font-stretch: 75%; font-size: 1.25rem; line-height: 1; letter-spacing: var(--track-titel); }
.kopf__zeichen { width: 44px; height: 44px; flex: none; }
.kopf:not(.auf-hell) .kopf__zeichen { filter: drop-shadow(0 1px 10px rgb(12 22 16 / .4)); }
.kopf__nav { margin-left: auto; }
/* Pill-Leiste: nur eine Haarlinie in Schriftfarbe, keine Fläche */
.kopf__nav > ul {
  display: flex; gap: .15rem; margin: 0; padding: .25rem; list-style: none; border-radius: 99px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 34%, transparent);
  transition: box-shadow .45s var(--ease-raus);
}
.kopf__nav > ul > li > a {
  position: relative; display: block; padding: .5rem 1rem; border-radius: 99px; text-decoration: none;
  font-weight: 560; font-size: .95rem; letter-spacing: var(--track-klein);
  transition: background-color .25s var(--ease-raus);
}
.kopf__nav > ul > li > a:hover { background: color-mix(in srgb, currentColor 12%, transparent); }
.kopf__nav > ul > li > a:active { background: color-mix(in srgb, currentColor 20%, transparent); transition-duration: 0s; }
/* Wo bin ich? Punkt unter dem aktiven Abschnitt */
.kopf__nav > ul > li > a::after {
  content: ""; position: absolute; left: 50%; bottom: .22rem; width: 4px; height: 4px; margin-left: -2px;
  border-radius: 50%; background: currentColor; opacity: 0; scale: 0; transition: opacity .3s, scale .4s var(--ease-raus);
}
.kopf__nav > ul > li > a[aria-current="true"]::after { opacity: 1; scale: 1; }
/* ---------- Dropdowns (Desktop) ----------
   Panel aus dunklem Glas, klappt weich aus der Pill-Leiste auf (clip-path + opacity + leichter Versatz, kein
   Überschwingen), Einträge gestaffelt. Immer helle Schrift auf dunklem Glas: lesbar über hellen wie dunklen
   Abschnitten, unabhängig vom Farbwechsel des Kopfs. Logik: js/nav.js (Hover mit Verzögerung, Klick, Tastatur). */
.nav__punkt { position: relative; display: flex; align-items: center; }
.nav__auf {
  display: grid; place-items: center; width: 1.6rem; height: 1.6rem; margin-left: -.55rem; margin-right: .15rem; padding: 0;
  border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; opacity: .75;
  transition: opacity .25s var(--ease-raus), background-color .25s var(--ease-raus);
}
.nav__auf svg { transition: rotate .4s var(--ease-raus); }
.nav__auf:hover, .nav__auf[aria-expanded="true"] { opacity: 1; background: color-mix(in srgb, currentColor 12%, transparent); }
.nav__auf[aria-expanded="true"] svg { rotate: 180deg; }
.dd {
  --dd-dauer: .42s;
  position: absolute; top: calc(100% + .9rem); left: 50%; translate: -50% -.4rem; z-index: 5;
  min-width: 19rem; padding: .55rem; border-radius: 1.4rem; color: var(--kalk); text-align: left;
  background: rgb(12 22 16 / .8); -webkit-backdrop-filter: blur(24px) saturate(170%); backdrop-filter: blur(24px) saturate(170%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 0 0 1px rgb(255 255 255 / .08), 0 30px 60px -24px rgb(0 0 0 / .55);
  opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0 round 1.4rem);
  transition: opacity var(--dd-dauer) var(--ease-raus), translate var(--dd-dauer) var(--ease-raus), clip-path var(--dd-dauer) var(--ease-raus), visibility 0s linear var(--dd-dauer);
}
/* Brücke über die Lücke zur Leiste, damit der Hover beim Hinüberfahren nicht abreißt */
.dd::before { content: ""; position: absolute; left: 0; right: 0; top: -1rem; height: 1rem; }
/* Über hellen Abschnitten dichteres Glas (sonst wird es grau) */
.kopf.auf-hell .dd { background: rgb(12 22 16 / .92); }
.nav__punkt.ist-offen > .dd { opacity: 1; visibility: visible; translate: -50% 0; clip-path: inset(0 0 0 0 round 1.4rem); transition-delay: 0s; }
.dd__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: .15rem; }
.dd__liste > li { opacity: 0; translate: 0 -.35rem; transition: opacity .35s var(--ease-raus), translate .45s var(--ease-raus); }
.nav__punkt.ist-offen .dd__liste > li { opacity: 1; translate: 0 0; transition-delay: calc(.05s + var(--i) * .035s); }
.dd__eintrag {
  display: grid; gap: .15rem; padding: .7rem .9rem; border-radius: 1rem; text-decoration: none; color: inherit;
  transition: background-color .25s var(--ease-raus);
}
.dd__eintrag strong { font-size: .98rem; font-weight: 650; letter-spacing: var(--track-klein); }
.dd__eintrag span { font-size: .84rem; line-height: 1.35; color: rgb(243 245 239 / .66); }
.dd__eintrag:hover, .dd__eintrag:focus-visible { background: rgb(243 245 239 / .08); }
.dd__eintrag:hover strong { color: var(--blatt); }
.dd__eintrag:active { scale: .98; }
.dd a:focus-visible { outline: 2px solid var(--blatt); outline-offset: 0; }
/* Mega-Dropdown „Leistungen“: 4 × 2 Kacheln mit Mini-Illustration; rechtsbündig am Kopf, damit es nie überläuft */
.nav__punkt[data-dd-mega] { position: static; }
.dd--mega { left: auto; right: var(--rand); top: calc(100% - .3rem); translate: 0 -.4rem; width: min(60rem, calc(100vw - 2 * var(--rand))); padding: .8rem; }
.nav__punkt.ist-offen > .dd--mega { translate: 0 0; }
.dd--mega .dd__liste { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; }
.dd__kachel { display: flex; flex-direction: column; border-radius: 1.1rem; }
.dd__kachel .dd__eintrag { padding: .8rem .9rem .5rem; align-content: start; }
.dd__ill { display: block; width: 4.4rem; height: 4.4rem; margin: -.2rem 0 .35rem -.35rem; --ill-linie: var(--blatt); --ill-akzent: var(--flechte); --karte-grund: transparent; }
.dd__ill .ill { width: 100%; height: 100%; stroke: var(--ill-linie); stroke-width: 9; transition: translate .6s var(--ease-raus); }
.dd__kachel:hover .ill { translate: 0 -3px; }
.dd__unter { list-style: none; margin: 0; padding: 0 .9rem .7rem; display: grid; gap: .15rem; }
.dd__unter a { font-size: .82rem; color: rgb(243 245 239 / .8); text-decoration: none; padding-left: .8rem; position: relative; }
.dd__unter a::before { content: ""; position: absolute; left: 0; top: .6em; width: .4rem; height: 1px; background: currentColor; opacity: .6; }
.dd__unter a:hover { color: var(--blatt); }
.dd__kachel--alle .dd__eintrag { height: 100%; align-content: end; background: rgb(122 212 90 / .1); box-shadow: inset 0 0 0 1px rgb(122 212 90 / .25); }
.dd__kachel--alle strong { font-size: 1.3rem; font-weight: 800; font-stretch: 75%; color: var(--blatt); }
.dd__pfeil { font-size: 1.4rem !important; color: var(--blatt) !important; }
/* Kopf mit offenem Dropdown weicht nicht aus (main.js prüft :focus-within / .ist-offen) */

/* Menü-Knopf: zwei Striche + Wort; offen morpht er zu × und „Schließen“ (kritisch gedämpft, kein Überschwingen) */
.kopf__menue {
  display: none; margin-left: auto; align-items: center; gap: .6rem; position: relative; z-index: 2;
  font: inherit; font-weight: 700; letter-spacing: var(--track-klein); color: inherit; background: transparent;
  border: 0; border-radius: 99px; padding: .6rem 1.15rem .6rem 1rem; cursor: pointer; min-height: 2.75rem;
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, currentColor 55%, transparent);
  transition: background-color .35s var(--ease-raus), color .35s var(--ease-raus), box-shadow .35s var(--ease-raus);
}
.kopf__menue:active { scale: .97; }
.kopf__menue-zeichen { position: relative; width: 1rem; height: .7rem; }
.kopf__menue-zeichen i { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: currentColor; transition: translate .5s var(--ease-raus), rotate .5s var(--ease-raus); }
.kopf__menue-zeichen i:first-child { top: 0; }
.kopf__menue-zeichen i:last-child { bottom: 0; }
.kopf__menue[aria-expanded="true"] { background: var(--blatt); color: var(--moos); box-shadow: none; }
.kopf__menue[aria-expanded="true"] .kopf__menue-zeichen i:first-child { translate: 0 .3rem; rotate: 45deg; }
.kopf__menue[aria-expanded="true"] .kopf__menue-zeichen i:last-child { translate: 0 -.3rem; rotate: -45deg; }
/* Solange das Menü offen ist: Kopf hell und sichtbar, nur Logo + Knopf */
.kopf.menue-offen { --kopf-farbe: var(--kalk); translate: none; }
.kopf.menue-offen .kopf__logo, .kopf.menue-offen .kopf__menue { text-shadow: none; }

/* ---------- Menü (Vollbild, mobil/Tablet) ----------
   Unter dem Kopf (z 45 < Kopf 50), damit der Knopf über der Fläche bleibt und morphen kann. Die Fläche wächst per
   clip-path als Kreis aus dem Knopf (--mx/--my, js/menue.js); ohne JS/Bewegung steht sie einfach da. */
.menue { position: fixed; inset: 0; z-index: 45; color: var(--kalk); overflow: hidden; overscroll-behavior: contain; }
.menue[hidden] { display: none; }
.menue__flaeche {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse 90% 70% at 50% 35%, #1d3324 0%, var(--moos) 55%, var(--moos-tief) 100%);
}
.menue__ranken { position: absolute; inset: 0; pointer-events: none; }
.menue .ranke { --rw: clamp(5.5rem, 21vw, 12rem); --bleed: 1.5rem; }
.menue__ranken::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgb(12 22 16 / .7) 0%, rgb(12 22 16 / 0) 22%, rgb(12 22 16 / 0) 70%, rgb(12 22 16 / .55) 100%); }
.menue__inhalt {
  position: relative; height: 100%; overflow-y: auto; display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  padding: calc(var(--kopf-frei) + .5rem) clamp(2.2rem, 14vw, 9rem) calc(3.6rem + env(safe-area-inset-bottom)) clamp(2.2rem, 14vw, 9rem);   /* unten Platz für das Entwurf-Badge */
}
.menue__liste { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.menue__liste a { position: relative; display: flex; align-items: flex-start; gap: .7rem; text-decoration: none; padding: .1rem 0; }
.menue__nr { margin-top: .9em; font-size: .78rem; font-weight: 700; letter-spacing: var(--track-label); font-variant-numeric: tabular-nums; color: var(--blatt); }
.menue__maske { display: block; overflow: hidden; padding-bottom: .06em; }
.menue__wort {
  display: block; font-weight: 850; font-stretch: 62%; font-size: clamp(2.6rem, 12.5vw, 7.4rem); line-height: .9; letter-spacing: var(--track-display);   /* 12,5vw: „Leistungen“ passt bei 375–430 px neben den Akkordeon-Knopf (vorher 14,5vw, rechts abgeschnitten) */
  transition: color .3s var(--ease-raus), translate .45s var(--ease-raus);
}
.menue__liste a:hover .menue__wort, .menue__liste a:focus-visible .menue__wort { color: var(--blatt); translate: .12em 0; }
.menue__liste a:active .menue__wort { scale: .98; }
/* Wo bin ich? Aktiver Abschnitt grün mit Punkt */
.menue__liste a[aria-current="true"] .menue__wort { color: var(--blatt); }
.menue__liste a[aria-current="true"] .menue__nr::after { content: ""; display: block; width: 6px; height: 6px; margin-top: .4rem; border-radius: 50%; background: var(--blatt); }
/* Akkordeon im Menü: Pfeil neben dem großen Eintrag klappt die Unterpunkte auf (grid-rows 0fr → 1fr, unterbrechbar);
   der Eintrag selbst scrollt weiter zum Abschnitt. Nur eins offen (js/menue.js). */
.menue__liste > li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: .6rem; }
.menue__auf {
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  color: var(--kalk); background: rgb(243 245 239 / .08); box-shadow: inset 0 0 0 1px rgb(243 245 239 / .16);
  transition: background-color .3s var(--ease-raus), color .3s var(--ease-raus);
}
.menue__auf svg { width: 16px; height: 16px; transition: rotate .45s var(--ease-raus); }
.menue__auf:active { scale: .94; }
.menue__auf[aria-expanded="true"] { background: var(--blatt); color: var(--moos); box-shadow: none; }
.menue__auf[aria-expanded="true"] svg { rotate: 180deg; }
.menue__unter { grid-column: 1 / -1; display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s var(--ease-raus), visibility 0s linear .5s; }
.menue__unter > div { min-height: 0; overflow: hidden; }
.menue__unter.ist-offen { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .5s var(--ease-raus), visibility 0s; }
.menue__unter ul { list-style: none; margin: 0; padding: .5rem 0 1rem calc(.7rem + 1.4em); display: grid; gap: .1rem; }
.menue__unter li { opacity: 0; translate: 0 -.4rem; transition: opacity .3s var(--ease-raus), translate .4s var(--ease-raus); }
.menue__unter.ist-offen li { opacity: 1; translate: 0 0; }
.menue__unter.ist-offen li:nth-child(n) { transition-delay: .08s; }
.menue__unter a { display: inline-block; padding: .3rem 0; font-size: clamp(1.05rem, 4.4vw, 1.4rem); font-weight: 600; color: var(--flechte); text-decoration: none; }
.menue__unter .menue__unter-tief a { padding-left: 1rem; font-size: clamp(.95rem, 3.8vw, 1.15rem); font-weight: 500; color: rgb(221 228 216 / .75); }
.menue__unter a:hover { color: var(--blatt); }
.menue__fuss { display: grid; gap: 1.3rem; }
.menue__cta { justify-self: start; min-height: 3.5rem; padding-inline: 1.8rem; font-size: 1.1rem; }
.menue__spalten { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; }
.menue__kontakt { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--flechte); }
.menue__kontakt a { font-weight: 600; color: var(--kalk); text-decoration: none; }
.menue__social { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; list-style: none; margin: 0; padding: 0; align-content: flex-start; line-height: 1.6; }
.menue__social a { color: var(--flechte); text-decoration: none; font-weight: 600; }
.menue a:not(.knopf):hover { color: var(--blatt); }
.menue__claim { margin: 0; font-weight: 850; font-stretch: 62%; font-size: 1.35rem; letter-spacing: var(--track-titel); color: var(--blatt); }
@media (min-width: 700px) {
  .menue__inhalt { padding-top: calc(var(--kopf-frei) + 2rem); }
  .menue__nr { font-size: .9rem; }
  .menue__fuss { grid-template-columns: auto 1fr; align-items: end; gap: 1.6rem 3rem; }
  .menue__cta { grid-row: 1 / 3; align-self: start; }
  .menue__claim { grid-column: 2; font-size: 1.8rem; }
}
@media (max-height: 640px) { .menue__wort { font-size: clamp(2.4rem, 11vh, 5rem); } }

/* ---------- Hero / Dschungel ----------
   Ebenen von hinten nach vorn: Lichtung (Licht) → dunkle Pflanzen → Fundstücke (Arbeiten) → Dickicht-Vorhänge
   links/rechts → Verlauf → Typo. Grundzustand = ruhiger Endzustand (ohne JS / reduzierte Bewegung);
   html.dschungel-zu (js/vorab.js) zeigt bis zum Intro die zugewachsene Bühne. */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 34rem; background: var(--moos-tief); }
.hero__buehne { position: relative; height: 100%; overflow: hidden; background: radial-gradient(ellipse 60% 55% at 50% 38%, #1d3324 0%, #11201a 45%, var(--moos-tief) 100%); }
.dschungel { position: absolute; inset: 0; }

/* Pflanzen-Streifen (Ranken): nahtlos kachelbare Kacheln 900×1800 (media/pflanzen, aus assets/pflanzen-tiles/seed2),
   als Hintergrund mit repeat-y. Außenrand deckend, Innenseite läuft in Blattspitzen aus. Die Bahn ist eine Kachel
   höher als die Ranke; js/ranken.js verschiebt sie modulo Kachelhöhe – Parallax ohne Ende und ohne Schnittkante.
   --bleed: die gerade Außenkante liegt immer außerhalb (Maus-Parallax in x bleibt kleiner).
   Nur auf dunklem Grund einsetzen: auf Hellgrau sind die Innenkanten der Kacheln sichtbar. */
.ranken, .dickicht { position: absolute; inset: 0; pointer-events: none; }
.ranke { --bleed: 3vw; position: absolute; top: 0; height: 100%; width: var(--rw, 30vw); overflow: clip; }
.ranke--links { left: calc(var(--bleed) * -1); transform-origin: 0 50%; }
.ranke--rechts { right: calc(var(--bleed) * -1); transform-origin: 100% 50%; }
.ranke__bahn {
  position: absolute; left: 0; top: 0; width: 100%; height: calc(100% + var(--rw, 30vw) * 2);
  background-image: var(--bild-webp); background-image: var(--bild); background-repeat: repeat-y; background-size: 100% auto;
  will-change: transform;
}
.ranke--links.ranke--hinten, .ranke--links.ranke--fuell-h { --bild: image-set(url(../media/pflanzen/links-hinten.avif) type("image/avif"), url(../media/pflanzen/links-hinten.webp) type("image/webp")); --bild-webp: url(../media/pflanzen/links-hinten.webp); }
.ranke--rechts.ranke--hinten, .ranke--rechts.ranke--fuell-h { --bild: image-set(url(../media/pflanzen/rechts-hinten.avif) type("image/avif"), url(../media/pflanzen/rechts-hinten.webp) type("image/webp")); --bild-webp: url(../media/pflanzen/rechts-hinten.webp); }
.ranke--links.ranke--vorn, .ranke--links.ranke--fuell-v { --bild: image-set(url(../media/pflanzen/links-vorn.avif) type("image/avif"), url(../media/pflanzen/links-vorn.webp) type("image/webp")); --bild-webp: url(../media/pflanzen/links-vorn.webp); }
.ranke--rechts.ranke--vorn, .ranke--rechts.ranke--fuell-v { --bild: image-set(url(../media/pflanzen/rechts-vorn.avif) type("image/avif"), url(../media/pflanzen/rechts-vorn.webp) type("image/webp")); --bild-webp: url(../media/pflanzen/rechts-vorn.webp); }
.ranke--vorn .ranke__bahn { filter: drop-shadow(0 24px 30px rgb(0 0 0 / .4)); }
/* Hero (Christoph 2026-10-22 „Desktop flackert“): kein drop-shadow auf den großen, im Intro skalierten Pflanzenebenen –
   der Filter wurde jedes Frame neu gerastert (Trace: Compositor-Thread voll ausgelastet) und beim Skalierungsende scharf
   nachgezeichnet (Aufblitzen). Mobil war er schon aus. Tiefe kommt aus den Kacheln selbst. */
.hero .ranke--vorn .ranke__bahn, .hero .original { filter: none; }
/* Füllstreifen des Dickichts (nur im Intro sichtbar, bewegt und maskiert): kleine 0,5x-Kacheln wie mobil – halbiert
   Decodier- und Rasterlast der großen, skalierten Maskenebenen auf Desktop */
@media (min-width: 900px) {
  .hero .ranke--links.ranke--fuell-h, .hero .ranke--links.ranke--fuell-v { --bild: image-set(url("../media/pflanzen/links@0.5x.avif") type("image/avif"), url("../media/pflanzen/links@0.5x.webp") type("image/webp")); --bild-webp: url("../media/pflanzen/links@0.5x.webp"); }
  .hero .ranke--rechts.ranke--fuell-h, .hero .ranke--rechts.ranke--fuell-v { --bild: image-set(url("../media/pflanzen/rechts@0.5x.avif") type("image/avif"), url("../media/pflanzen/rechts@0.5x.webp") type("image/webp")); --bild-webp: url("../media/pflanzen/rechts@0.5x.webp"); }
}

/* Hero: hinten 36vw (unter den Fundstücken), vorne 30vw (über den Kartenrändern) */
.hero .ranke--hinten { --rw: 36vw; }
.hero .ranke--vorn { --rw: 28vw; }
/* Geschlossenes Dickicht (html.dschungel-zu, bis zum Hieb): Randstreifen hochskaliert, dazu vier Füllstreifen zur
   Mitte hin. Deren gerade Außenkante läuft per Maske weich aus, so entsteht nirgends eine Kante. */
.ranke--fuell-h { --rw: 58vw; --bleed: -13vw; }
.ranke--fuell-v { --rw: 46vw; --bleed: -24vw; }
.ranke--fuell.ranke--links { -webkit-mask-image: linear-gradient(90deg, transparent, #000 32%); mask-image: linear-gradient(90deg, transparent, #000 32%); }
.ranke--fuell.ranke--rechts { -webkit-mask-image: linear-gradient(270deg, transparent, #000 32%); mask-image: linear-gradient(270deg, transparent, #000 32%); }
.dickicht { visibility: hidden; }
html.dschungel-zu .dickicht { visibility: visible; }
/* schmal (Christoph 2026-10-21: Machetenschnitt auch mobil): Füllstreifen nutzen dieselben, vorgeladenen 0,5x-Kacheln wie die
   Randstreifen (kein zusätzlicher Download) und sind ab dem ersten Bild sichtbar – so verschieben sie das LCP nicht nach hinten. */
html.dschungel-zu .hero .ranken .ranke, html.dschungel-zu .hero .original { transform: scale(var(--zu, 1.55)); }

/* Originale (Christoph: „einmalig links und rechts drüberlegen, nicht wiederholen“): die beiden freigestellten
   Hallenpflanzen der LED-Bande als oberste Ebene, je Seite genau einmal, asymmetrisch (links oben, rechts unten).
   Enden oben/unten laufen im Bild weich aus (scripts/pflanzen_originale.py), die harte Außenkante liegt im Bleed.
   Parallax über CSS-translate (main.js / arbeiten.js), Intro und Scroll-Kino über transform (GSAP). */
.originale { position: absolute; inset: 0; pointer-events: none; }
.original { --bleed: 3vw; position: absolute; display: block; will-change: transform, translate; }
.original img { display: block; width: 100%; height: auto; }
.original--links { left: calc(var(--bleed) * -1); transform-origin: 0 0; }
.original--rechts { right: calc(var(--bleed) * -1); transform-origin: 100% 0; }
.original { filter: drop-shadow(0 24px 30px rgb(0 0 0 / .35)); }
/* Runde 2 („mehr von oben, größer, über den Content ragen“): hängen von der Oberkante ins Bild, oberste Ebene über
   Fundstücken und Typo (z-index 3; Klicks gehen durch). Oberkante je ~40 px über dem Bildrand (Maus-Parallax max. 25 px). */
.hero .originale { z-index: 3; }
/* Lesbarkeit: Headline, Knöpfe und „Video anhalten“ liegen über den Originalen (die ragen nur über Karten);
   oben dunkelt ein Verlauf die Blätter unter der Navigation ab – wie der Verlauf der Bühne darunter. */
.hero .hero__vorne, .hero .hero__steuer { z-index: 4; }
.hero .originale::after { content: ""; position: absolute; inset: 0 0 auto 0; height: 9rem; background: linear-gradient(180deg, rgb(12 22 16 / .6), rgb(12 22 16 / 0)); }
.hero .original { --zu: 1.35; }
.hero .original--links { top: -2.75rem; width: 44vw; }
.hero .original--rechts { top: -2.75rem; width: 35vw; }
/* Desktop (Christoph: „etwas zu groß“): ~22 % kleiner, ≈ 1,25× der Größe vor der Vergrößerung; Tablet bleibt */
@media (min-width: 1024px) {
  .hero .original--links { width: 34vw; }
  .hero .original--rechts { width: 27vw; }
}
/* Fundstücke: über dem Pflanzenrahmen, unter Kopf und Leiste; nur im Spielfeld (Karussell/Raster: zu voll) */
.feld .originale { z-index: 4; }
.arbeiten:not(.ist-feld) .originale { display: none; }
.feld .original { --bleed: 2.5rem; }
/* von oben in die Fläche; Kopf (Überschrift, „Alle 18 Referenzen“) und Leiste liegen mit z-index 5 darüber */
.feld .original--links { top: -2.5rem; width: clamp(16rem, 30vw, 30rem); }
.feld .original--rechts { top: -2.5rem; width: clamp(13rem, 24vw, 24rem); }
.hero .ranke--vorn { --zu: 1.5; }

.funde { position: absolute; inset: 0; }
/* <picture> um die Entwurfsbilder (AVIF/WebP-Stufen, index.astro) ändert das Layout nicht */
.bild-stufen { display: contents; }
.fund {
  --w: 16vw; --ratio: 4 / 3; --dreh: 0deg;
  position: absolute; width: var(--w); display: block; text-decoration: none; color: var(--kalk);
  rotate: var(--dreh); transform-origin: 50% 60%;
}
.fund__bild, .fund--reel {
  display: block; aspect-ratio: var(--ratio); overflow: hidden; border-radius: clamp(.6rem, 1vw, 1.1rem); background: var(--moos);
  box-shadow: 0 40px 70px -30px rgb(0 0 0 / .75), 0 0 0 1px rgb(255 255 255 / .1);
}
.fund--reel { margin: 0; }
.fund__medium { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease-raus); }
a.fund:hover .fund__medium, a.fund:focus-visible .fund__medium { scale: 1.05; }
a.fund:active { scale: .98; }
/* Etikett: kleines Glas (interaktiv), sitzt an der Unterkante des Fundstücks */
.fund__etikett {
  position: absolute; left: .6rem; bottom: .6rem; display: block;
  max-width: calc(100% - 1.2rem); overflow: hidden; text-overflow: ellipsis;
  padding: .4rem .75rem; border-radius: 99px; font-size: .78rem; line-height: 1.2; letter-spacing: var(--track-klein); white-space: nowrap;
  background: rgb(12 22 16 / .55); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .22), inset 0 0 0 1px rgb(255 255 255 / .1);
}
.fund__etikett strong { font-weight: 700; }
.fund--reel { --w: 34vw; --ratio: 16 / 9; left: 33vw; top: 11vh; }
.fund--a { --w: 17vw; --ratio: 4 / 3; --dreh: -3.5deg; left: 14.5vw; top: 25vh; }
.fund--b { --w: 11.5vw; --ratio: 3 / 4; --dreh: 3deg; right: 19vw; top: 9vh; }
.fund--c { --w: 15vw; --ratio: 3 / 2; --dreh: -2deg; right: 20vw; top: 41vh; }
.fund--d { --w: 11.5vw; --ratio: 4 / 5; --dreh: 2.5deg; left: 34vw; top: 46vh; }
.fund--b .fund__medium { object-position: 50% 60%; }
.fund--d .fund__medium { object-position: 42% 50%; }
/* Buzzwords: das Werbe-Chaos im Dickicht. Bewusst grell und durcheinander – es wird ja weggeschnitten. */
.buzzwoerter { position: absolute; inset: 0; pointer-events: none; visibility: hidden; }
html.dschungel-zu .buzzwoerter { visibility: visible; }
.buzz {
  position: absolute; left: calc(var(--x) * var(--buzz-x, 1)); top: var(--y); rotate: var(--r); white-space: nowrap; color: var(--f);
  font-size: clamp(1.1rem, 2.6vw, 2.6rem); line-height: 1; text-shadow: 0 2px 0 rgb(0 0 0 / .55), 0 0 22px rgb(0 0 0 / .5);
}
.buzz--a { font-weight: 900; font-stretch: 62%; font-style: italic; }
.buzz--b { font-family: Georgia, "Times New Roman", serif; font-weight: 700; font-style: italic; }
.buzz--c { font-family: "Courier New", monospace; font-weight: 700; font-size: clamp(.95rem, 2vw, 2rem); }
.buzz--d { font-weight: 800; font-stretch: 125%; }
/* Hieb: eine helle Klingen-Linie, schräg, einmal quer über die Bühne */
.hieb {
  position: absolute; left: 0; top: -20%; width: 3px; height: 140%; rotate: 24deg; transform-origin: 50% 50%;
  background: linear-gradient(180deg, transparent, rgb(243 245 239 / .95) 30%, var(--blatt) 55%, rgb(243 245 239 / .95) 75%, transparent);
  box-shadow: 0 0 18px 2px rgb(122 212 90 / .55); opacity: 0; pointer-events: none;
}

/* Verlauf: oben für die Navigation, unten für die Headline – die Lichtung bleibt in der Mitte frei */
.hero__buehne::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background:
    linear-gradient(180deg, rgb(12 22 16 / .5) 0%, rgb(12 22 16 / 0) 18%),
    linear-gradient(0deg, rgb(12 22 16 / .9) 0%, rgb(12 22 16 / .45) 30%, rgb(12 22 16 / 0) 48%);
}
.hero__vorne { z-index: 2; }
.hero__steuer { z-index: 2; }
html.dschungel-zu .funde, html.dschungel-zu .hero__vorne, html.dschungel-zu .hero__steuer { visibility: hidden; }
/* Startzustand des Intros vollständig in CSS (vor main.js, kein Sprung im ersten Frame – Christoph 2026-10-22 „flackert“):
   Kopf ausgeblendet (GSAP blendet ihn am Ende ein), Buzzwords unsichtbar (blenden ein), Pflanzen-Ebenen leicht herangezoomt
   wie GSAP sie übernimmt. Ohne JS nimmt vorab.js die Klasse nach 4 s weg → Endzustand. */
html.dschungel-zu .kopf, html.dschungel-zu .buzz { opacity: 0; }
/* Desktop: Pflanzenbühne erst zeigen, wenn alle Kacheln decodiert sind (main.js blendet in 0,3 s ein) – statt Ebene für Ebene
   aufploppen zu lassen. Mobil bleibt sie ab dem ersten Bild sichtbar (LCP). */
@media (min-width: 900px) { html.dschungel-zu .hero .dschungel { opacity: 0; } }
html.dschungel-zu .hero .ranken, html.dschungel-zu .hero .dickicht, html.dschungel-zu .hero .originale { transform: scale(1.05); }
.hero__vorne {
  position: absolute; inset: auto var(--rand) clamp(1rem, 3.2vh, 2.2rem);
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "titel titel" "zusatz zusatz";
  pointer-events: none;
}
.hero__titel { grid-area: titel; margin: 0; font-weight: 850; font-stretch: 62%; color: var(--kalk); }
.hero__zeile { display: block; overflow: hidden; }
.hero__zeile > span { display: block; }
.hero__zeile:first-child { font-size: clamp(2.6rem, 6.4vw, 7rem); line-height: .9; letter-spacing: var(--track-titel); padding-bottom: .04em; }
.hero__zeile--gross { font-size: 15.6vw; line-height: .8; letter-spacing: var(--track-display); padding-bottom: .16em; margin-bottom: -.12em; margin-left: -.035em; }
/* Zusatz steht rechts über dem großen Wort, auf Höhe der ersten Zeile */
.hero__zusatz {
  position: absolute; right: 0; bottom: calc(15.6vw * .86); width: min(26rem, 34vw);
  display: flex; flex-direction: column; gap: 1.2rem; pointer-events: auto;
}
.hero__ort { margin: 0; font-size: 1.05rem; line-height: 1.4; letter-spacing: var(--track-text); color: var(--kalk); font-weight: 450; text-shadow: 0 1px 16px rgb(12 22 16 / .5); }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: .6rem; }
.hero__steuer {
  position: absolute; right: var(--rand); top: 50%; translate: 0 -50%;
  display: flex; flex-direction: column; align-items: flex-end; gap: .6rem;
}
.hero__pause {
  display: inline-flex; align-items: center; gap: .55rem;
  font: inherit; font-size: .8rem; font-weight: 600; letter-spacing: var(--track-klein); color: var(--kalk);
  background: none; border: 0; padding: .4rem 0; cursor: pointer; text-shadow: 0 1px 10px rgb(12 22 16 / .5);
}
.hero__pause:active { scale: .97; }
.hero__pause-zeichen { width: .7rem; height: .8rem; border-inline: 3px solid currentColor; box-sizing: border-box; }
.hero__pause[aria-pressed="true"] .hero__pause-zeichen { border: 0; width: 0; height: 0; border-left: .7rem solid currentColor; border-block: .4rem solid transparent; }

/* Desktop ab 1024 (Christoph: Video-Karte 20–30 % größer, klares Zentrum): Film 42vw statt 34vw, die anderen
   Fundstücke rücken an die Ränder; Headline, Zusatz, Knöpfe und „Video anhalten“ bleiben frei. Mobil/Tablet unverändert. */
@media (min-width: 1024px) {
  /* dichte Collage um den Film (Christoph): links Donau-Ries (hoch) über DBBL, rechts Interliving, Angels unter dem
     Film rechtsbündig über dem Zusatz. Abstände ~1,1vw (≈ 16 px bei 1440). Film: left 29vw, 42vw breit, 23,6vw hoch. */
  .fund--reel { --w: 42vw; left: 29vw; top: 10vh; z-index: 1; }
  .fund--d { --w: 10vw; --ratio: 4 / 5; left: 17.8vw; top: 9vh; }
  .fund--a { --w: 16.5vw; left: 12.9vw; top: calc(9vh + 12.5vw + 1.1vw + .8vw); z-index: 0; }   /* ≈ 0,4vw unter der linken Filmkante, knapp unter Graule */
  .fund--b { --w: 12.5vw; --ratio: 4 / 3; right: 15.3vw; top: calc(11vh + 4.5vw); }   /* EIGNER Bau (quer), mittlere Filmhöhe, Diagonale mit Angels */
  .fund--c { --w: 14vw; left: 58vw; top: calc(10vh + 23.6vw - 4vw); z-index: 2; }   /* überlappt die untere rechte Filmecke */
  .hero__zusatz { width: min(22rem, 26vw); }
}

/* ---------- Laufband ---------- */
.laufband { overflow: hidden; background: var(--blatt); color: var(--moos); padding: .8rem 0; }
.laufband__spur { display: flex; width: max-content; animation: lauf 38s linear infinite; }
.laufband__spur span { font-size: clamp(1.4rem, 2.6vw, 2.4rem); font-weight: 800; font-stretch: 75%; padding: 0 1.4rem; white-space: nowrap; }
.laufband__spur span::after { content: ""; display: inline-block; width: .42em; height: .42em; margin-left: 2.8rem; border-radius: 50%; background: currentColor; vertical-align: .12em; }
@keyframes lauf { to { transform: translateX(-50%); } }

/* ---------- Arbeiten: Fundstücke im Dschungel ----------
   Grundzustand (ohne JS) = Raster. main.js setzt am Abschnitt den Modus:
   .ist-feld (Spielfeld zum Ziehen), .ist-karussell (wischbar, 3D), .ist-raster (reduzierte Bewegung). */
.arbeiten { padding: var(--luft) 0; --karte-l: clamp(17rem, 22vw, 24rem); --karte-m: clamp(13.5rem, 17vw, 19rem); --karte-s: clamp(10.5rem, 13vw, 14.5rem); }
.arbeiten__kopf {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
  padding: 0 var(--rand); margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.arbeiten__titel { margin: 0; max-width: 12ch; font-size: clamp(2.6rem, 6.4vw, 6.4rem); font-weight: 850; font-stretch: 62%; line-height: .88; letter-spacing: var(--track-titel); }
.arbeiten__alle { flex: none; }
.arbeiten__label { margin: 0 0 1rem; font-size: .82rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blatt); }
.arbeiten__leiste { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding: 0 var(--rand); margin: 0 0 clamp(1.5rem, 3vw, 2.5rem); }
.arbeiten__hinweis { margin: 0; display: none; align-items: center; gap: .6rem; font-size: .9rem; font-weight: 600; letter-spacing: var(--track-klein); color: var(--flechte); }
.arbeiten__hinweis::before { content: ""; width: 2.2rem; height: 1px; background: currentColor; opacity: .5; }
.ist-feld .arbeiten__hinweis, .ist-karussell .arbeiten__hinweis { display: flex; }

.filter { display: flex; flex-wrap: wrap; gap: .5rem; }
.filter button {
  display: inline-flex; align-items: baseline; min-height: 2.75rem; padding: .7rem 1.15rem; border: 0; border-radius: 99px; cursor: pointer;
  font: inherit; font-size: .95rem; font-weight: 600; line-height: 1.1; letter-spacing: var(--track-klein); color: var(--kalk); background: transparent;
  box-shadow: inset 0 0 0 1px rgb(243 245 239 / .28);
  transition: background-color var(--dauer-hover) var(--ease-raus), color var(--dauer-hover) var(--ease-raus), box-shadow var(--dauer-hover) var(--ease-raus), scale .1s ease-out;
}
.filter button:hover { background: rgb(243 245 239 / .08); }
.filter button:active { scale: .97; }
.filter button[aria-pressed="true"] { background: var(--blatt); color: var(--moos); box-shadow: none; }
.filter sup { margin-left: .3em; font-size: .7em; font-weight: 700; line-height: 0; font-variant-numeric: tabular-nums; opacity: .72; }

/* Karte (gilt für alle Modi) */
.funde-liste { list-style: none; margin: 0; padding: 0; }
.fund-karte { position: relative; }
.fund-karte[hidden] { display: none; }
.fund-karte__link { display: block; text-decoration: none; color: var(--kalk); border-radius: clamp(.7rem, 1vw, 1rem); }
.fund-karte__bild {
  position: relative; display: block; aspect-ratio: var(--ratio, 4/3); overflow: hidden; border-radius: inherit; background: var(--moos);
  box-shadow: 0 30px 60px -28px rgb(0 0 0 / .8), 0 0 0 1px rgb(255 255 255 / .08);
}
.fund-karte__bild img, .fund-karte__bild video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--fokus, 50% 50%); }
.fund-karte__bild video { opacity: 0; transition: opacity .4s var(--ease-raus); }
.fund-karte.spielt video { opacity: 1; }
.fund-karte__text { display: flex; align-items: baseline; flex-wrap: wrap; gap: .1rem .55rem; padding: .75rem .15rem 0; font-size: .92rem; line-height: 1.3; }
.fund-karte__nr { font-size: .75rem; font-weight: 700; letter-spacing: var(--track-label); color: var(--blatt); font-variant-numeric: tabular-nums; }
.fund-karte__text strong { font-weight: 750; letter-spacing: var(--track-klein); }
.fund-karte__kurz { color: var(--flechte); opacity: .8; }

/* Raster (ohne JS / reduzierte Bewegung) */
.feld { position: relative; }
.arbeiten:not(.ist-feld):not(.ist-karussell) .funde-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.6rem); padding: 0 var(--rand);
}
.arbeiten:not(.ist-feld):not(.ist-karussell) .fund-karte { --ratio: 4/3 !important; }
.arbeiten:not(.ist-feld) .feld__zaehler { display: none; }
.arbeiten:not(.ist-feld):not(.ist-karussell) .feld__ranken { display: none; }

/* Spielfeld: Fenster mit Pflanzenrahmen; darin eine größere Welt, die sich ziehen lässt */
.ist-feld .feld {
  height: 100vh; height: 100svh; min-height: 38rem; margin: 0; overflow: hidden; border-radius: 0;
  background: radial-gradient(ellipse 70% 70% at 50% 45%, #1d3324 0%, #11201a 55%, var(--moos-tief) 100%);
  cursor: grab; touch-action: pan-y; isolation: isolate;
}
.ist-feld .feld.zieht { cursor: grabbing; }
.ist-feld .feld__welt { position: absolute; left: 0; top: 0; width: 150%; height: 145%; z-index: 1; will-change: transform; }
.ist-feld .funde-liste { position: absolute; inset: 0; }
.ist-feld .fund-karte { position: absolute; left: var(--fx); top: var(--fy); width: var(--fw); }
.ist-feld .fund-karte__link { transform-style: preserve-3d; will-change: transform; }
.ist-feld .fund-karte.tritt-zurueck { pointer-events: none; }
/* Pflanzenrahmen: hinten unter den Karten, vorne darüber (stehen fest, nur dezente Maus-Parallax in js/arbeiten.js) */
.feld__ranken { position: absolute; inset: 0; pointer-events: none; }
.feld__ranken--hinten { z-index: 0; }
.feld__ranken--vorn { z-index: 3; }
.feld .ranke { --bleed: 2.5rem; }
.feld .ranke--hinten { --rw: clamp(12rem, 21vw, 22rem); }
.feld .ranke--vorn { --rw: clamp(10.5rem, 17vw, 18rem); }
/* Vollbild (2026-10-20, Runde 4): die Spielfläche füllt den Bildschirm (100vw × 100svh). Kopf und Filter liegen als
   Overlay darauf; der Kopf beginnt erst unter --kopf-frei, damit die eingeblendete Navigation nichts überdeckt. */
.arbeiten.ist-feld { padding: 0; }
.ist-feld .arbeiten__kopf {
  position: absolute; z-index: 5; left: 0; right: 0; top: 0; margin: 0; flex-wrap: nowrap;
  padding: calc(var(--kopf-frei) + .4rem) var(--rand) clamp(3rem, 7vh, 4.5rem); pointer-events: none;
  background: linear-gradient(180deg, rgb(12 22 16 / .9) 0%, rgb(12 22 16 / .6) 55%, rgb(12 22 16 / 0) 100%);
}
.ist-feld .arbeiten__kopf a { pointer-events: auto; }
.ist-feld .arbeiten__titel { font-size: clamp(2.6rem, 4.6vw, 5rem); max-width: none; text-shadow: 0 2px 24px rgb(12 22 16 / .6); }
/* Filter + Hinweis als Glas-Leiste unten im Feld (interaktiv = Glas), nicht über dem Feld unter der Navigation */
.ist-feld .arbeiten__leiste {
  position: absolute; z-index: 5; left: 50%; bottom: clamp(1rem, 2.2vh, 1.6rem); translate: -50% 0; width: max-content; max-width: calc(100% - 2rem);
  flex-wrap: nowrap; gap: 1.2rem; margin: 0; padding: .35rem 1.2rem .35rem .35rem; border-radius: 99px; cursor: auto;
  background: rgb(12 22 16 / .52); -webkit-backdrop-filter: blur(18px) saturate(160%); backdrop-filter: blur(18px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 0 0 1px rgb(255 255 255 / .09), 0 20px 40px -20px rgb(0 0 0 / .6);
}
.ist-feld .filter { flex-wrap: nowrap; gap: .25rem; }
.ist-feld .arbeiten__leiste, .ist-feld .arbeiten__kopf { -webkit-user-select: none; user-select: none; }
.ist-feld .filter button { min-height: 2.5rem; padding: .6rem 1rem; box-shadow: none; }
.ist-feld .arbeiten__hinweis { white-space: nowrap; font-size: .85rem; }
.feld__zaehler {
  position: absolute; z-index: 4; right: 1.4rem; bottom: 1.2rem; margin: 0; padding: .45rem .85rem; border-radius: 99px;
  font-size: .8rem; font-weight: 700; letter-spacing: var(--track-label); font-variant-numeric: tabular-nums; color: var(--kalk);
  background: rgb(12 22 16 / .5); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}

/* Karussell (schmal / Touch): native Wischstrecke mit Einrasten, 3D je nach Abstand zur Mitte (main.js) */
.ist-karussell .feld { overflow: hidden; padding: .5rem 0 1.5rem; }
.ist-karussell .feld__welt { perspective: 1100px; }
.ist-karussell .funde-liste {
  display: flex; gap: 0; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  padding: 1.5rem calc(50vw - min(31vw, 10rem)) 2rem; transform-style: preserve-3d;
}
.ist-karussell .funde-liste::-webkit-scrollbar { display: none; }
.ist-karussell .fund-karte { flex: 0 0 min(62vw, 20rem); scroll-snap-align: center; padding: 0 .35rem; transform-style: preserve-3d; --ratio: 4/5 !important; }
.ist-karussell .fund-karte__link { will-change: transform; }
/* Raster: Kopf, Leiste, Karussell, Zähler untereinander; die Ranken (absolut) nehmen nur die Zeile des Karussells ein */
.ist-karussell .feld { display: grid; grid-template-columns: 100%; }
.ist-karussell .arbeiten__kopf { grid-row: 1; }
.ist-karussell .arbeiten__leiste { grid-row: 2; }
.ist-karussell .feld__welt, .ist-karussell .feld__ranken { grid-row: 3; grid-column: 1; }
.ist-karussell .feld__zaehler { grid-row: 4; }
.ist-karussell .feld__ranken--vorn { z-index: 2; }
.ist-karussell .feld__ranken--hinten { display: none; }
.ist-karussell .ranke { --rw: clamp(6rem, 27vw, 13rem); --bleed: 1.25rem; }
/* Ohne Fenster: oben und unten weich auslaufen lassen, sonst wären die Streifenenden gerade Kanten */
.ist-karussell .feld__ranken--vorn {
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 18%, #000 80%, transparent);
}
.ist-feld .feld__zaehler { display: none; }
.arbeiten.ist-karussell .feld__zaehler { display: block; position: static; margin: 0 auto; width: max-content; background: none; padding: 0; color: var(--flechte); }
.ist-karussell .funde-liste.zieht { scroll-snap-type: none; cursor: grabbing; }
/* Pfeil-Knöpfe: nur mit feinem Zeiger (Touch wischt); liegen über den Pflanzen-Streifen, Glas wie die übrigen Bedienelemente */
.karussell__nav { display: none; }
@media (hover: hover) and (pointer: fine) {
  .ist-karussell .karussell__nav {
    display: flex; grid-row: 3; grid-column: 1; z-index: 3; align-items: center; justify-content: space-between;
    padding: 0 clamp(1rem, 3vw, 3rem); pointer-events: none;
  }
  .ist-karussell .funde-liste { cursor: grab; -webkit-user-select: none; user-select: none; }
}
.k-pfeil {
  display: grid; place-items: center; width: 3.6rem; height: 3.6rem; padding: 0; border: 0; border-radius: 50%; cursor: pointer; pointer-events: auto;
  color: var(--kalk); background: rgb(12 22 16 / .55); -webkit-backdrop-filter: blur(16px) saturate(160%); backdrop-filter: blur(16px) saturate(160%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / .16), inset 0 0 0 1px rgb(255 255 255 / .12), 0 16px 32px -16px rgb(0 0 0 / .6);
  transition: background-color var(--dauer-hover) var(--ease-raus), color var(--dauer-hover) var(--ease-raus), opacity .3s var(--ease-raus);
}
.k-pfeil:hover { background: var(--blatt); color: var(--moos); }
.k-pfeil:active { scale: .94; }
.k-pfeil:disabled { opacity: .3; cursor: default; background: rgb(12 22 16 / .55); color: var(--kalk); }
/* Desktop (Christoph: „eher wie mobile, auf Desktop angepasst“): großes Coverflow statt Spielfeld, Karten quer,
   Kunde und Leistung groß darunter; Nachbarn angeschnitten, gedreht und gedimmt (js/arbeiten.js) */
@media (min-width: 1024px) {
  /* Kopf, Filter und Karussell passen zusammen in einen Bildschirm (1440 × 900) */
  .arbeiten.ist-karussell { padding-top: calc(var(--kopf-frei) + 1rem); padding-bottom: calc(var(--luft) * .6); }
  .ist-karussell .arbeiten__kopf { margin-bottom: 1.4rem; }
  .ist-karussell .arbeiten__titel { max-width: none; font-size: clamp(2.6rem, 4.6vw, 5rem); }
  .ist-karussell .arbeiten__leiste { margin-bottom: .4rem; }
  .ist-karussell .fund-karte { flex: 0 0 clamp(28rem, 52vw, 62rem); padding: 0 1rem; --ratio: 16/10 !important; }   /* aktive Karte ≈ 52vw */
  .ist-karussell .funde-liste { padding: 1.4rem calc(50vw - clamp(28rem, 52vw, 62rem) / 2) 1.2rem; }
  .ist-karussell .feld__welt { perspective: 1600px; }
  .ist-karussell .fund-karte__text { justify-content: center; gap: .2rem .8rem; padding-top: 1.2rem; font-size: 1.1rem; }
  .ist-karussell .fund-karte__text strong { font-size: clamp(1.4rem, 1.9vw, 2rem); font-weight: 800; font-stretch: 75%; }
  .ist-karussell .fund-karte__nr { font-size: .85rem; }
  .ist-karussell .fund-karte:not(.ist-aktiv) .fund-karte__text { opacity: 0; transition: opacity .3s var(--ease-raus); }
  .ist-karussell .fund-karte.ist-aktiv .fund-karte__text { opacity: 1; transition: opacity .5s var(--ease-raus) .1s; }
  .ist-karussell .ranke { --rw: clamp(8rem, 15vw, 15rem); }
  .ist-karussell .kundenlogo { --logo-h: 2.3rem; --logo-max: 7rem; --logo-abstand: 1rem; }
  .arbeiten.ist-karussell .feld__zaehler { margin-top: .4rem; font-size: .9rem; }
}

/* Cursor über dem Spielfeld: „Ziehen“ / „Ansehen“ */
.cursor {
  position: fixed; left: 0; top: 0; z-index: 70; width: 5.6rem; height: 5.6rem; margin: -2.8rem 0 0 -2.8rem;
  display: grid; place-items: center; border-radius: 50%; color: var(--moos); pointer-events: none; scale: 0;
  background: var(--blatt); font-weight: 700; font-size: .9rem; letter-spacing: var(--track-klein);
}

/* Overlay „Fundstück“ */
.sheet { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.sheet[hidden] { display: none; }
.sheet__scrim { position: absolute; inset: 0; background: rgb(6 12 8 / .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.sheet__panel {
  position: relative; width: min(72rem, 100%); max-height: calc(100svh - 2rem); display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  border-radius: clamp(1.25rem, 2vw, 1.75rem); color: var(--kalk);
}
.sheet__medium, .sheet__griff { touch-action: none; }   /* hier wird gewischt; der Text darf mobil scrollen */
.sheet__flaeche { position: absolute; inset: 0; border-radius: inherit; background: var(--moos); box-shadow: 0 60px 120px -40px rgb(0 0 0 / .8), inset 0 0 0 1px rgb(255 255 255 / .1); }
.sheet__medium { position: relative; margin: 0; aspect-ratio: 4/3; overflow: hidden; border-radius: clamp(1.25rem, 2vw, 1.75rem) 0 0 clamp(1.25rem, 2vw, 1.75rem); background: var(--moos-tief); transform-origin: 0 0; }
.sheet__medium img, .sheet__medium video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sheet__medium video { opacity: 0; transition: opacity .5s var(--ease-raus); }
.sheet__medium.spielt video { opacity: 1; }
.sheet__text { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; padding: clamp(1.5rem, 3vw, 3rem); overflow: auto; }
.sheet__nr { margin: 0; font-size: .8rem; font-weight: 700; letter-spacing: var(--track-label); color: var(--blatt); font-variant-numeric: tabular-nums; }
.sheet__titel { margin: 0; font-size: clamp(2.2rem, 4vw, 4rem); font-weight: 850; font-stretch: 62%; line-height: .92; letter-spacing: var(--track-titel); }
.sheet__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.sheet__tags li { padding: .3rem .75rem; border-radius: 99px; font-size: .82rem; font-weight: 560; box-shadow: inset 0 0 0 1px rgb(243 245 239 / .3); }
.sheet__satz { margin: 0 0 .5rem; color: var(--flechte); font-size: 1.05rem; line-height: 1.5; max-width: 30rem; }
.sheet__text .knopf { margin-top: auto; }
.sheet__text .knopf::after { content: " →"; white-space: pre; }
.sheet__zu {
  position: absolute; top: .9rem; right: .9rem; width: 2.75rem; height: 2.75rem; border: 0; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; font: inherit; font-size: 1.6rem; line-height: 1; color: var(--kalk);
  background: rgb(12 22 16 / .55); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .16);
}
.sheet__zu:active { scale: .94; }
.sheet__griff { display: none; }

/* ---------- Instagram-Feed ----------
   Raster aus Hochkant-Kacheln (4:5 wie bei Instagram), mittlere Spalte versetzt; mobil eine Wischstrecke. */
/* Eigene Luft oben (nicht die der Arbeiten leihen): sonst landet das Label nach einem Sprung unter dem Kopf */
.feed { padding: var(--luft) 0; }
.feed__kopf {
  display: grid; grid-template-columns: 1fr auto; grid-template-areas: "label label" "titel titel" "satz knopf";
  align-items: end; gap: 1rem 2rem; padding: 0 var(--rand); margin-bottom: clamp(2rem, 5vw, 4.5rem);
}
.feed__label { grid-area: label; margin: 0; font-size: .82rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blatt); }
.feed .riesig { grid-area: titel; font-size: clamp(2.8rem, 9.4vw, 10rem); overflow-wrap: anywhere; }
.feed .riesig a { text-decoration: none; }
.feed__satz { grid-area: satz; margin: 0; max-width: 26rem; color: var(--flechte); font-size: 1.1rem; line-height: 1.45; }
.feed__kopf .knopf { grid-area: knopf; }
.feed__raster {
  list-style: none; margin: 0; padding: 0 var(--rand);
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 1.6vw, 1.6rem); align-items: start;
}
/* Gerade Spalten versetzt (Parallax in main.js) */
.feed__beitrag:nth-child(even) { margin-top: clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 700px) and (max-width: 1099px) {
  .feed__raster { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .feed__beitrag:nth-child(even) { margin-top: 0; }
  .feed__beitrag:nth-child(3n + 2) { margin-top: clamp(2.5rem, 6vw, 5rem); }
}
.feed__beitrag a { display: block; text-decoration: none; }
.feed__bild { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: clamp(.75rem, 1.2vw, 1.25rem); background: var(--moos-tief); }
.feed__bild img { width: 100%; height: 100%; object-fit: cover; transition: scale 1.1s var(--ease-raus); }
.feed__beitrag a:hover .feed__bild img, .feed__beitrag a:focus-visible .feed__bild img { scale: 1.04; }
.feed__beitrag a:active .feed__bild { scale: .99; }
/* Medientyp-Zeichen (Video / Galerie) wie bei Instagram oben rechts */
.feed__typ { position: absolute; top: .8rem; right: .8rem; width: 1.6rem; height: 1.6rem; filter: drop-shadow(0 1px 6px rgb(0 0 0 / .45)); }
.feed__typ--video { background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M8 5.5v13l11-6.5z'/%3E%3C/svg%3E"); }
.feed__typ--carousel_album { background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Crect x='7' y='7' width='13' height='13' rx='2'/%3E%3Cpath d='M4 16V6a2 2 0 0 1 2-2h10'/%3E%3C/svg%3E"); }
.feed__typ--image { display: none; }
.feed__text {
  margin: .9rem 0 0; font-size: .95rem; line-height: 1.45; color: var(--flechte);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.feed__text time { color: var(--kalk); font-weight: 700; font-variant-numeric: tabular-nums; margin-right: .4em; }

/* ---------- Leistungen: gestapelte Karten ----------
   Jede Karte klebt unterhalb der Navigation; die nächste schiebt sich darüber. Die verdeckte Karte
   tritt zurück (kleiner, gedimmt) – Apple §12 „dim to focus“, ohne die Seite zu blockieren. */
.leistungen { background: var(--flechte); color: var(--moos); padding: var(--luft) 0 calc(var(--luft) * .6); position: relative; }
.leistungen .riesig { color: var(--moos); }
.leistungen__satz { max-width: 24rem; margin: 0; font-size: 1.15rem; line-height: 1.42; }
.stapel { --oben: clamp(5rem, 9vh, 6.5rem); list-style: none; margin: 0; padding: 0 var(--rand); }
.karte {
  --karte-h: calc(100vh - var(--oben) - clamp(1rem, 3vh, 2rem));
  position: sticky; top: var(--oben);
  height: var(--karte-h); min-height: 30rem; max-height: 56rem;
  margin-bottom: clamp(2rem, 6vh, 4rem);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  border-radius: clamp(1.25rem, 2.2vw, 2rem); overflow: hidden;
  background: var(--karte-grund); color: var(--karte-text);
  box-shadow: 0 -1px 0 rgb(255 255 255 / .06), 0 30px 60px -30px rgb(12 22 16 / .45);
  transform-origin: 50% 0;
}
.karte:last-child { margin-bottom: 0; }
.karte--moos  { --karte-grund: var(--moos);  --karte-text: var(--kalk);  --karte-leise: rgb(243 245 239 / .72); --ill-linie: var(--blatt); --ill-akzent: var(--flechte); }
.karte--tief  { --karte-grund: var(--moos-tief); --karte-text: var(--kalk); --karte-leise: rgb(243 245 239 / .72); --ill-linie: var(--blatt); --ill-akzent: var(--flechte); }
.karte--kalk  { --karte-grund: var(--kalk);  --karte-text: var(--moos);  --karte-leise: rgb(20 35 26 / .72); --ill-linie: var(--moos); --ill-akzent: var(--blatt); }
.karte--blatt { --karte-grund: var(--blatt); --karte-text: var(--moos);  --karte-leise: rgb(20 35 26 / .78); --ill-linie: var(--moos); --ill-akzent: var(--kalk); }
/* Dimmer für die zurücktretende Karte, per GSAP gesteuert */
.karte::after { content: ""; position: absolute; inset: 0; background: var(--moos-tief); opacity: var(--dimm, 0); pointer-events: none; }
.karte__text {
  display: flex; flex-direction: column; padding: clamp(1.5rem, 3.2vw, 3.2rem);
}
.karte__nr { margin: 0 0 1.4rem; font-size: .9rem; font-weight: 600; letter-spacing: var(--track-label); color: var(--karte-leise); font-variant-numeric: tabular-nums; }
.karte__titel {
  margin: 0 0 1.2rem; font-size: clamp(2.6rem, 5.4vw, 6rem); font-weight: 850; font-stretch: 62%;
  line-height: .9; letter-spacing: var(--track-titel); text-wrap: balance;
}
.karte__titel a { text-decoration: none; }
.karte__titel a::after { content: " →"; display: inline-block; font-stretch: 100%; font-weight: 500; font-size: .45em; vertical-align: .5em; translate: -.3em 0; opacity: 0; transition: opacity var(--dauer-hover) var(--ease-raus), translate var(--dauer-hover) var(--ease-raus); }
.karte__titel a:hover::after, .karte__titel a:focus-visible::after { opacity: 1; translate: 0 0; }
.karte__tags + .karte__satz { margin-top: auto; }
.karte__satz { max-width: 26rem; margin: 1.4rem 0 0; font-size: 1.05rem; line-height: 1.5; color: var(--karte-leise); }
.karte__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0; padding: 0; list-style: none; }
.karte__tags li {
  padding: .3rem .75rem; border-radius: 99px; font-size: .82rem; font-weight: 560; letter-spacing: var(--track-klein);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--karte-text) 30%, transparent);
}
/* Illustration (Inline-SVG, scripts/leistungen_illus.py): rechte Hälfte, viel Luft; Linien zeichnen sich beim
   Hereinkommen (main.js), ein Element wippt. Hover: die Zeichnung hebt sich leicht. */
.karte__ill {
  position: relative; display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 4rem); min-height: 0;
  background: radial-gradient(circle at 55% 50%, color-mix(in srgb, var(--ill-akzent) 9%, transparent) 0%, transparent 62%);
}
/* Illustration.astro legt das SVG in span.ill-rahmen: als Block mit voller Höhe, sonst ist height:100% (mobil) = 0 und die Icons fehlen */
.karte__ill .ill-rahmen { display: grid; place-items: center; width: 100%; height: 100%; min-height: 0; min-width: 0; }
.ill { width: min(100%, 34rem); height: auto; max-height: 100%; stroke: var(--ill-linie); stroke-width: 3; overflow: visible; transition: translate 1s var(--ease-raus), scale 1s var(--ease-raus); }
.karte:hover .ill { translate: 0 -.6rem; scale: 1.02; }
/* Desktop (Christoph: „kleiner und von der Breite begrenzen, zu sehr gestreckt“): Stapel max. 74rem mittig, Karten
   ≈ 68svh hoch (max. 40rem) statt Bildschirmhöhe – kürzere Scroll-Strecke je Karte, Illustration kompakt neben dem Text */
@media (min-width: 1024px) {
  .leistungen .abschnitt-kopf, .stapel { max-width: calc(74rem + 2 * var(--rand)); margin-inline: auto; }
  .karte { --karte-h: min(62svh, 36rem); min-height: 24rem; max-height: none; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); margin-bottom: clamp(1.5rem, 4vh, 2.5rem); }
  .karte__text { padding: clamp(1.6rem, 2.6vw, 2.8rem); justify-content: center; }
  .karte__tags + .karte__satz { margin-top: 1.4rem; }
  .karte__titel { font-size: clamp(2.6rem, 4.2vw, 4.6rem); }
  .karte__ill { padding: 1.5rem 2rem; }
  .ill { width: min(100%, 22rem); }
}
/* Tablet: nicht überdehnen – Karte flacher, Illustration begrenzt statt bildfüllend */
@media (min-width: 700px) and (max-width: 1023px) {
  /* doppelte Klassen: der Mobil-Block (max-width 899) steht weiter unten und würde sonst gewinnen */
  .stapel .karte { max-height: 36rem; }
  .karte .karte__ill { padding: 1.6rem 2rem 0; }
  .karte__ill .ill { width: min(60%, 18rem); height: auto; max-height: 100%; }
}

/* ---------- Agentur ---------- */
.agentur { padding: var(--luft) var(--rand) calc(var(--luft) * .55); }   /* direkt danach kommt der Fuß (Kontakt-Sektion entfallen) */
.agentur__satz {
  max-width: 22ch; margin: 0 0 var(--luft);
  font-size: clamp(2rem, 5.2vw, 5.6rem); font-weight: 300; font-stretch: 100%; line-height: 1.08; letter-spacing: -.015em;
  text-wrap: balance;
}
.agentur__satz b { font-weight: 900; font-stretch: 62%; font-size: 1.28em; line-height: .8; letter-spacing: 0; }
.logos {
  /* Logo-Wand (Christoph 2026-10-21): gleiche Box je Logo, optisch gleiche Größe (--s aus dem Seitenverhältnis, index.astro),
     monochrom; mobil 3, Tablet 4, Desktop 6 Spalten; letzte Reihe mittig. Flex statt Grid: keine Mindestbreite aus width-Attributen. */
  --spalten: 6; --luecke: clamp(.6rem, 1.6vw, 1.4rem); --logo-h: clamp(1.7rem, 2.6vw, 2.6rem);
  list-style: none; margin: 0 0 var(--luft); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--luecke);
}
.logos li {
  flex: 0 0 calc((100% - (var(--spalten) - 1) * var(--luecke)) / var(--spalten)); min-width: 0; aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center; border-radius: .9rem;
  background: rgb(243 245 239 / .04); box-shadow: inset 0 0 0 1px rgb(243 245 239 / .1); transition: background-color .3s;
}
.logos img {
  height: calc(var(--logo-h) * var(--s, 1)); width: auto; max-width: 74%; max-height: 72%; object-fit: contain;
  filter: brightness(0) invert(1); opacity: .72; transition: opacity .3s;
}
.logos li:hover { background: rgb(243 245 239 / .08); }
.logos li:hover img { opacity: 1; }
/* Regional-Links (Hub + Orte aus Strapi) unter der Logo-Wand */
.region-links { margin: calc(var(--luft) * -.5) 0 var(--luft); font-size: .95rem; letter-spacing: var(--track-klein); color: var(--grau); }
.region-links a { color: var(--flechte); text-decoration: underline; text-decoration-color: rgb(122 212 90 / .5); text-underline-offset: .2em; }
.region-links a:hover { color: var(--blatt); }
.zitat { margin: 0 0 0 auto; max-width: 46rem; }
.zitat blockquote { margin: 0; font-size: clamp(1.6rem, 3.2vw, 3rem); font-weight: 500; font-stretch: 85%; line-height: 1.15; text-wrap: balance; }
.zitat figcaption { margin-top: 1.2rem; color: var(--grau); }

/* ---------- Kontakt ---------- */

/* ---------- Erstentwurf (Kampagne „Kostenloser Erstentwurf“) ----------
   Auf Moos nach den hellen Leistungen: Claim links, Stempel „0 €“ rechts, drei Karten mit Illustration, Ablauf, CTA. */
.erstentwurf {
  position: relative; padding: var(--luft) var(--rand); overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 85% 10%, rgb(122 212 90 / .12), transparent 60%), var(--moos);
}
.erstentwurf > * { max-width: 74rem; margin-inline: auto; }
.erstentwurf__kopf { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2rem 3rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.erstentwurf__label { margin: 0 0 1rem; font-size: .82rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blatt); }
.erstentwurf__titel { margin: 0 0 1.4rem; font-size: clamp(2.6rem, 6vw, 6.4rem); font-weight: 850; font-stretch: 62%; line-height: .9; letter-spacing: var(--track-display); text-wrap: balance; }
.erstentwurf__titel span { display: block; color: var(--blatt); }
.erstentwurf__satz { max-width: 34rem; margin: 0; font-size: 1.15rem; line-height: 1.5; color: var(--flechte); }
/* Stempel: kreisrund, leicht gedreht, gestrichelter Innenring */
.erstentwurf__stempel {
  position: relative; display: grid; place-content: center; justify-items: center; width: clamp(9.5rem, 15vw, 13rem); aspect-ratio: 1; margin: 0;
  border-radius: 50%; color: var(--moos); background: var(--blatt); rotate: -12deg; text-align: center;
  box-shadow: 0 24px 50px -20px rgb(0 0 0 / .6);
}
.erstentwurf__stempel::before { content: ""; position: absolute; inset: .55rem; border-radius: 50%; border: 2px dashed rgb(20 35 26 / .45); }
.erstentwurf__stempel strong { font-size: clamp(3rem, 5vw, 4.4rem); font-weight: 900; font-stretch: 62%; line-height: .9; }
.erstentwurf__stempel span { font-size: .78rem; font-weight: 800; letter-spacing: var(--track-label); text-transform: uppercase; }
.erstentwurf__karten { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.6rem); }
.ee-karte {
  display: flex; flex-direction: column; padding: clamp(1.4rem, 2.4vw, 2rem); border-radius: clamp(1.1rem, 1.8vw, 1.6rem);
  background: var(--moos-tief); box-shadow: inset 0 0 0 1px rgb(243 245 239 / .08);
  --ill-linie: var(--blatt); --ill-akzent: var(--flechte); --karte-grund: var(--moos-tief);
  transition: translate .6s var(--ease-raus), box-shadow .6s var(--ease-raus);
}
.ee-karte:hover { translate: 0 -.4rem; box-shadow: inset 0 0 0 1px rgb(122 212 90 / .35); }
.ee-karte__ill { height: clamp(8rem, 13vw, 11rem); margin-bottom: 1.2rem; }
.ee-karte__ill .ill { width: auto; height: 100%; stroke: var(--ill-linie); stroke-width: 3; overflow: visible; }
.ee-karte__titel { margin: 0 0 .6rem; font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 850; font-stretch: 62%; line-height: .95; letter-spacing: var(--track-titel); }
.ee-karte__text { margin: 0 0 1rem; color: var(--flechte); line-height: 1.5; }
.ee-karte__tags { margin: auto 0 0; font-size: .82rem; font-weight: 600; letter-spacing: var(--track-klein); color: var(--blatt); }
.erstentwurf__ablauf { margin-top: clamp(3rem, 6vw, 5rem); }
.erstentwurf__unter { margin: 0 0 1.4rem; font-size: .82rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blatt); }
.erstentwurf__schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem 2rem; counter-reset: none; }
.ee-schritt { position: relative; padding-top: 1.2rem; border-top: 1px solid rgb(243 245 239 / .16); }
.ee-schritt__nr { display: block; margin-bottom: .6rem; font-size: 2.6rem; font-weight: 850; font-stretch: 62%; line-height: 1; color: var(--blatt); }
.ee-schritt h3 { margin: 0 0 .4rem; font-size: 1.25rem; font-weight: 750; letter-spacing: var(--track-klein); }
.ee-schritt p { margin: 0; color: var(--flechte); line-height: 1.5; }
.erstentwurf__aktion { margin-top: clamp(2.5rem, 5vw, 4rem); display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1.2rem 3rem;
  padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: clamp(1.1rem, 1.8vw, 1.6rem); background: rgb(122 212 90 / .1); box-shadow: inset 0 0 0 1px rgb(122 212 90 / .25); }
.erstentwurf__haken { margin: 0; max-width: 36rem; line-height: 1.5; color: var(--flechte); }
.erstentwurf__haken strong { color: var(--kalk); }
.erstentwurf__knoepfe { display: flex; flex-direction: column; align-items: flex-start; gap: .9rem; }
.erstentwurf__cta { min-height: 3.6rem; padding-inline: 1.8rem; font-size: 1.1rem; }
.erstentwurf__klein { margin: 0; font-size: .88rem; color: var(--grau); }
/* Kompakt (Christoph: „noch etwas zu hoch“): Desktop ≈ eine Bildschirmhöhe – Claim | Satz | Stempel in einer Zeile,
   Karten flach (Illustration klein neben dem Titel), Ablauf in einer Zeile, Haken + CTA in einer Leiste */
@media (min-width: 900px) {
  .erstentwurf { padding-block: calc(var(--kopf-frei) + .25rem) clamp(2.5rem, 4vw, 4rem); }
  .erstentwurf__kopf { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) auto; align-items: end; gap: 1.5rem 2.5rem; margin-bottom: 1.5rem; }
  .erstentwurf__claim { display: contents; }
  .erstentwurf__label { grid-column: 1 / -1; margin-bottom: -.6rem; }
  .erstentwurf__titel { margin: 0; font-size: clamp(2.4rem, 3.9vw, 4rem); white-space: nowrap; text-wrap: nowrap; }
  .erstentwurf__satz { font-size: 1.02rem; }
  .erstentwurf__stempel { width: clamp(7.5rem, 9vw, 9rem); align-self: center; }
  .erstentwurf__stempel strong { font-size: clamp(2.4rem, 3.2vw, 3.2rem); }
  .erstentwurf__stempel span { font-size: .66rem; }
  .ee-karte { display: grid; grid-template-columns: 4.6rem minmax(0, 1fr); column-gap: 1rem; align-items: center; padding: 1.1rem 1.3rem; }
  .ee-karte__ill { grid-row: 1; height: 4rem; margin: 0; }
  .ee-karte__titel { grid-row: 1; margin: 0; font-size: clamp(1.6rem, 2.2vw, 2.1rem); }
  .ee-karte__text, .ee-karte__tags { grid-column: 1 / -1; }
  .ee-karte__text { margin: .7rem 0 .5rem; font-size: .93rem; line-height: 1.45; }
  .erstentwurf__ablauf { margin-top: 1.2rem; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 2rem; }
  .erstentwurf__unter { margin: .9rem 0 0; white-space: nowrap; }
  .ee-schritt { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; align-content: start; column-gap: .8rem; padding-top: .8rem; }
  .ee-schritt__nr { grid-row: 1; margin: 0; font-size: 2.2rem; }
  .ee-schritt h3 { grid-column: 2; grid-row: 1; }
  .ee-schritt p { grid-column: 2; grid-row: 2; }
  .ee-schritt h3 { font-size: 1.05rem; margin-bottom: .2rem; }
  .ee-schritt p { font-size: .92rem; line-height: 1.45; }
  .erstentwurf__aktion { margin-top: 1.3rem; padding: 1rem 1.5rem; gap: 1rem 2.5rem; }
  .erstentwurf__haken { font-size: .95rem; }
  .erstentwurf__knoepfe { align-items: flex-end; gap: .5rem; }
  .erstentwurf__cta { min-height: 3.2rem; }
}
/* Hinweis im Hero unter den Knöpfen */
.hero__aktion { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; font-size: .92rem; font-weight: 600; color: var(--kalk); text-decoration: none; text-shadow: 0 1px 12px rgb(12 22 16 / .5); }
.hero__aktion span:first-child { padding: .15rem .5rem; border-radius: 99px; background: var(--blatt); color: var(--moos); font-size: .72rem; font-weight: 800; letter-spacing: var(--track-label); text-transform: uppercase; text-shadow: none; }
.hero__aktion:hover { color: var(--blatt); }
/* Der Hinweis macht den Zusatz höher: „Video anhalten“ rückt auf dem Desktop etwas nach oben, damit Luft bleibt */
@media (min-width: 1024px) { .hero__steuer { top: 40%; } }
/* Mobil/Tablet ist der Hero schon voll: dort kein Hinweis, die Sektion folgt ohnehin */
@media (max-width: 1023px) { .hero__aktion { display: none; } }
@media (max-width: 899px) {
  .erstentwurf__kopf { grid-template-columns: 1fr; }
  .erstentwurf__stempel { position: absolute; top: calc(var(--luft) - 1.5rem); right: var(--rand); width: 7.2rem; }
  .erstentwurf__stempel strong { font-size: 2.6rem; }
  .erstentwurf__stempel span { font-size: .62rem; }
  .erstentwurf__claim { padding-right: 6.5rem; }
  .erstentwurf__satz { font-size: 1.02rem; }
  .erstentwurf__karten, .erstentwurf__schritte { grid-template-columns: 1fr; }
  .ee-karte { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 1.1rem; align-items: start; }
  .ee-karte__ill { grid-row: 1 / 4; height: 6.5rem; margin: 0; }
  .erstentwurf__aktion { grid-template-columns: 1fr; }
  .erstentwurf__cta { width: 100%; }
  .erstentwurf__knoepfe { align-items: stretch; }
}

/* ---------- Kundenlogos auf Projekt-Medien ----------
   Überall oben links (oben rechts liegen Medientyp-Zeichen und der Schließen-Knopf), gleicher Abstand zur Ecke,
   weiß auf dezentem Glas-Pill – lesbar auch auf hellen Bildern. Dekorativ: der Kundenname steht im Text daneben. */
.kundenlogo {
  --logo-abstand: .75rem;
  position: absolute; z-index: 2; left: var(--logo-abstand); top: var(--logo-abstand);
  display: flex; align-items: center; height: var(--logo-h, 2.3rem); padding: .42rem .75rem; border-radius: 99px; pointer-events: none;
  background: rgb(12 22 16 / .62); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / .14), 0 8px 20px -10px rgb(0 0 0 / .6);
}
.kundenlogo[hidden] { display: none; }
/* span.… schlägt .fund-karte__bild img / .sheet__medium img (die füllen sonst das ganze Pill) */
span.kundenlogo img { position: static; inset: auto; display: block; height: 100%; width: auto; transition: none; max-width: var(--logo-max, 6.5rem); object-fit: contain; opacity: .95; filter: drop-shadow(0 1px 2px rgb(0 0 0 / .35)); }
.fund .kundenlogo { --logo-h: 1.75rem; --logo-max: 5rem; padding: .35rem .6rem; }
.sheet__medium .kundenlogo { --logo-h: 2.6rem; --logo-max: 8.5rem; --logo-abstand: clamp(.8rem, 1.6vw, 1.4rem); padding: .5rem .9rem; }

/* Instagram: „Folgen“-Kachel füllt das 4er-Raster (6 Beiträge = 4 + 2 + Kachel über zwei Spalten) */
.feed__folgen { grid-column: span 2; align-self: stretch; }
.feed--voll .feed__folgen { display: none; }   /* ab 8 Beiträgen (Graph-API) trägt das Raster sich selbst */
.feed__folgen a {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: .9rem;
  height: 100%; min-height: 16rem; padding: clamp(1.4rem, 3vw, 2.6rem); overflow: hidden; text-decoration: none;
  border-radius: clamp(.75rem, 1.2vw, 1.25rem); background: var(--moos-tief); box-shadow: inset 0 0 0 1px rgb(243 245 239 / .1);
}
/* Pflanzen-Streifen am rechten Rand (dunkler Grund, nahtlos) */
.feed__folgen a::before {
  content: ""; position: absolute; top: 0; right: -2rem; bottom: 0; width: 46%; pointer-events: none;
  background-image: url(../media/pflanzen/rechts-hinten.webp);
  background-image: image-set(url(../media/pflanzen/rechts-hinten.avif) type("image/avif"), url(../media/pflanzen/rechts-hinten.webp) type("image/webp"));
  background-size: 100% auto; background-repeat: repeat-y; background-position: right 0 top 30%; transition: translate 1.2s var(--ease-raus);
}
.feed__folgen a:hover::before { translate: 0 -2rem; }
.feed__folgen a > * { position: relative; }
.feed__folgen-label { font-size: .82rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blatt); }
.feed__folgen-handle { font-size: clamp(2.2rem, 4.4vw, 4.6rem); font-weight: 850; font-stretch: 62%; line-height: .9; letter-spacing: var(--track-titel); color: var(--kalk); }
.feed__folgen-text { max-width: 22rem; color: var(--flechte); line-height: 1.45; }
.feed__folgen a:active { scale: .99; }
@media (min-width: 700px) and (max-width: 1099px) {
  .feed__folgen { grid-column: 1 / -1; }   /* 3 + 3 Beiträge, Kachel als flache Zeile darunter */
  .feed__folgen a { min-height: 13rem; }
}

/* ---------- Fuß ----------
   Groß und markant: Pflanzen-Streifen links/rechts (dunkler Grund), Claim, vier Spalten, riesige Wortmarke. */
.fuss { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--moos) 0, var(--moos-tief) clamp(10rem, 22vw, 18rem)); color: var(--flechte); font-size: .98rem; isolation: isolate; }
.fuss__kopf { position: relative; isolation: isolate; }
/* Pflanzen nur hinter Claim + Anfrage; nach unten weich ausgeblendet (keine Kante zur Trennlinie) */
.fuss__ranken {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  /* oben und unten weich: kein harter Rand am Übergang aus der Agentur-Sektion, keine Kante zur Trennlinie */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0%, #000 22%, #000 55%, transparent 100%);
}
.fuss .ranke { --rw: clamp(7rem, 17vw, 17rem); --bleed: 2rem; }
.fuss__ranken::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 52% 60% at 50% 45%, var(--moos-tief) 30%, rgb(12 22 16 / 0) 100%); }
.fuss__inhalt { padding: 0 clamp(var(--rand), 9vw, 10rem) clamp(1.4rem, 3vw, 2.4rem); }
.fuss__inhalt--oben { padding-top: max(calc(var(--kopf-frei) + 1rem), clamp(5rem, 11vw, 10rem)); padding-bottom: 0; }   /* #kontakt: Claim frei unter dem Kopf */
.fuss__oben { display: grid; grid-template-columns: minmax(0, 1fr) minmax(16rem, 24rem); align-items: end; gap: 2.5rem 4rem; padding-bottom: clamp(3rem, 6vw, 5rem); }
.fuss__claim { margin: 0; font-weight: 850; font-stretch: 62%; color: var(--kalk); font-size: clamp(2.8rem, 6.6vw, 7.4rem); line-height: .88; letter-spacing: var(--track-display); }
.fuss__claim span { display: block; color: var(--blatt); }
.fuss__aktion p { margin: 0 0 1.4rem; font-size: 1.1rem; line-height: 1.45; }
.fuss__raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2.5rem 2rem; padding: clamp(2.5rem, 5vw, 4rem) 0; }
.fuss__titel { margin: 0 0 1rem; font-size: .82rem; font-weight: 700; letter-spacing: var(--track-label); text-transform: uppercase; color: var(--blatt); }
.fuss address { font-style: normal; line-height: 1.6; margin: 0 0 1rem; }
.fuss address strong { color: var(--kalk); }
.fuss__spalte p { margin: 0; line-height: 1.6; }
.fuss__spalte p.fuss__region { margin-top: 1rem; font-size: .9rem; color: var(--grau); }
.fuss a:not(.knopf) { color: inherit; text-decoration: none; transition: color var(--dauer-hover) var(--ease-raus); }
.fuss a:not(.knopf):hover { color: var(--blatt); }
.fuss__links { list-style: none; margin: 0; padding: 0; line-height: 2; }
/* Wortmarke als Outline-SVG mit Linien-Pflanzen (scripts/fuss_wortmarke.py); Strich wie die Leistungs-Illustrationen.
   Immer EINE Zeile (ab 320 px): das SVG skaliert über die viewBox fluid mit der Breite – Buchstaben und Pflanzen gemeinsam;
   schmal nur kräftigere Striche, damit die Outline lesbar bleibt. Zeichnen/Wachsen/Wippen in main.js/seite.js. */
.fuss__marke { margin: 0 0 clamp(1rem, 2vw, 1.6rem); white-space: nowrap; overflow: clip; overflow-clip-margin: 2rem; }
.wm { display: block; width: 100%; height: auto; overflow: visible; }
.wm__l { stroke: var(--flechte); stroke-width: 11; fill: var(--moos-tief); }   /* Fläche = Fußgrund: Triebe laufen hinter den Buchstaben */
.wm__p { stroke: var(--blatt); stroke-width: 7; }
.wm__f { fill: var(--blatt); stroke: none; opacity: .16; }
.fuss__unten { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding-top: 1.4rem; border-top: 1px solid rgb(243 245 239 / .14); font-size: .88rem; color: var(--grau); }
.fuss__copy { margin: 0; }
.fuss__recht { display: flex; flex-wrap: wrap; gap: .4rem 1.6rem; list-style: none; margin: 0; padding: 0; }
/* Nach oben: Kreis mit Blatt, unterbricht die obere Fußlinie mittig (.fuss__linie); magnetisch (main.js/seite.js),
   weich über Lenis; reduzierte Bewegung springt. Hover: hebt sich, Pfeil stupst nach oben, Blatt wippt. */
.fuss__linie { display: flex; align-items: center; gap: clamp(.8rem, 2vw, 1.4rem); }
.fuss__linie::before, .fuss__linie::after { content: ""; flex: 1 1 0; height: 1px; background: rgb(243 245 239 / .14); }
.nach-oben {
  position: relative; display: grid; place-items: center; width: 3.6rem; height: 3.6rem; padding: 0; border: 0; border-radius: 50%;
  background: var(--blatt); color: var(--moos); cursor: pointer; font: inherit;
  box-shadow: 0 0 0 .45rem rgb(122 212 90 / .1); transition: background-color var(--dauer-hover) var(--ease-raus), translate .5s var(--ease-raus), box-shadow .5s var(--ease-raus);
}
.nach-oben__kreis { width: 1.45rem; height: 1.45rem; }
.nach-oben__blatt { position: absolute; top: -.55rem; right: -.95rem; width: 1.7rem; height: auto; transform-origin: 8% 85%; rotate: -8deg; pointer-events: none; }
.nach-oben__blatt path:first-child { fill: var(--blatt); }
.nach-oben__blatt path:last-child { stroke: var(--moos); stroke-width: 1.6; stroke-linecap: round; opacity: .55; }
.nach-oben__text {
  position: absolute; top: calc(100% + .7rem); left: 50%; translate: -50% -4px; white-space: nowrap; font-size: .78rem; font-weight: 700;
  letter-spacing: var(--track-klein); color: var(--flechte); opacity: 0; transition: opacity .3s var(--ease-raus), translate .4s var(--ease-raus); pointer-events: none;
}
.nach-oben:hover, .nach-oben:focus-visible { background: #8fe46f; translate: 0 -3px; box-shadow: 0 0 0 .7rem rgb(122 212 90 / .14); }
.nach-oben:hover .nach-oben__text, .nach-oben:focus-visible .nach-oben__text { opacity: 1; translate: -50% 0; }
.nach-oben:active { scale: .94; }
.nach-oben:focus-visible { outline: 3px solid var(--blatt); outline-offset: 5px; }
@media (prefers-reduced-motion: no-preference) {
  .nach-oben:hover .nach-oben__pfeil, .nach-oben:focus-visible .nach-oben__pfeil { animation: nach-oben-stups 1s var(--ease-raus) infinite; }
  .nach-oben:hover .nach-oben__blatt, .nach-oben:focus-visible .nach-oben__blatt { animation: nach-oben-blatt 1.2s ease-in-out infinite alternate; }
}
@keyframes nach-oben-stups { 0%, 100% { translate: 0 0; } 40% { translate: 0 -3px; } }
@keyframes nach-oben-blatt { from { rotate: -8deg; } to { rotate: 14deg; } }

/* ---------- Badge ---------- */
.entwurf-badge {
  position: fixed; right: .8rem; bottom: .8rem; z-index: 80; margin: 0;
  padding: .35rem .7rem; border-radius: 99px; background: rgb(12 22 16 / .82); color: var(--flechte);
  font-size: .72rem; border: 1px solid rgb(243 245 239 / .2);
}


/* ---------- Responsiv ---------- */
@media (max-width: 1100px) {
  .kopf__nav { display: none; }
  .kopf__menue { display: inline-flex; }
  .kopf__cta { display: none; }
  .logos { --spalten: 4; }
}
@media (max-width: 899px) {
  .hero__zeile:first-child { font-size: 10.6vw; }
  .hero__zeile--gross { font-size: 15.9vw; }
  .hero__vorne { bottom: 1.4rem; }
  .hero__zusatz { position: static; width: auto; margin-top: 1.3rem; gap: 1rem; grid-area: zusatz; }
  .hero__ort { font-size: .98rem; max-width: 20rem; }
  .hero__steuer { top: auto; bottom: auto; top: 5.4rem; translate: none; flex-direction: row-reverse; align-items: center; gap: .9rem; }
  /* Hero mobil: weniger Ebenen (nur-breit fällt weg), schmalere Kante, zwei Fundstücke + Showreel */
  /* Pflanzen mobil: nur eine Ebene (die kombinierte Kachel, 450 px), schmalere Streifen */
  .hero { --buzz-x: .7; }
  .ranke--hinten, .ranke--fuell-v { display: none; }
  .ranke--links.ranke--vorn, .ranke--links.ranke--fuell-h { --bild: image-set(url("../media/pflanzen/links@0.5x.avif") type("image/avif"), url("../media/pflanzen/links@0.5x.webp") type("image/webp")); --bild-webp: url("../media/pflanzen/links@0.5x.webp"); }
  .ranke--rechts.ranke--vorn, .ranke--rechts.ranke--fuell-h { --bild: image-set(url("../media/pflanzen/rechts@0.5x.avif") type("image/avif"), url("../media/pflanzen/rechts@0.5x.webp") type("image/webp")); --bild-webp: url("../media/pflanzen/rechts@0.5x.webp"); }
  .ranke--vorn .ranke__bahn { filter: none; }
  .hero .ranke--vorn { --rw: 23vw; --zu: 2.4; }
  /* Originale mobil: kleinere Fassung (330/234 px), schmal, links oben und rechts weiter unten */
  .hero .original { --bleed: 4vw; --zu: 1.6; filter: none; }
  .hero .original--links { top: -1.75rem; width: 58vw; }
  .hero .original--rechts { top: -1.75rem; width: 46vw; }
  .ranke--fuell-h { --rw: 78vw; --bleed: -14vw; }
  .nur-breit { display: none; }
  .fund--reel { --w: 78vw; left: 11vw; top: 16vh; }
  .fund--a { --w: 44vw; --dreh: -3deg; left: 7vw; top: 39vh; }
  .fund--c { --w: 44vw; --dreh: 2deg; right: 6vw; top: 46vh; }
  .hero__buehne::after { background: linear-gradient(180deg, rgb(12 22 16 / .55) 0%, rgb(12 22 16 / 0) 16%), linear-gradient(0deg, rgb(12 22 16 / .94) 0%, rgb(12 22 16 / .75) 32%, rgb(12 22 16 / 0) 52%); }
  .buzz { font-size: 1.05rem; }
  .fund__etikett { font-size: .72rem; padding: .3rem .6rem; left: .4rem; bottom: .4rem; }
  /* Film-Karte: Etikett aus dem linken Pflanzenstreifen heraus nach innen (kürzerer Text mobil) */
  .fund--reel .fund__etikett { left: 2.9rem; }
  .buzz:nth-child(n+9) { display: none; }
  .karte { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; min-height: 0; height: calc(100svh - var(--oben) - 1rem); max-height: 46rem; }
  .karte__ill { order: -1; padding: 1.2rem 1.6rem 0; }
  .ill { width: auto; height: 100%; max-width: 100%; }
  .karte__text { padding: 1.3rem 1.3rem 1.1rem; }
  .karte__nr { margin-bottom: .6rem; }
  .karte__tags + .karte__satz { margin-top: .9rem; }
  .karte__titel { font-size: clamp(2.3rem, 11vw, 3.4rem); margin-bottom: .6rem; }
  .karte__satz { font-size: .95rem; line-height: 1.45; margin: 0; }
  .karte__tags li { font-size: .76rem; padding: .25rem .6rem; }
  .stapel { --oben: 4.6rem; }
  /* Arbeiten mobil: Pflanzen kleiner, Filter enger; Overlay als Bottom-Sheet mit Griff (nach unten wischen schließt) */
  /* Unter dem Karussell keine doppelte Sektionsluft: Zähler, Link, dann gleich Instagram */
  .arbeiten { padding-bottom: 1.5rem; }
  /* Mobil ist der Kopf nur 76 px hoch: 5,75rem Luft genügen, damit das Label nach einem Sprung frei bleibt (ueberlapp.py) */
  .feed { padding-top: 5.75rem; }
  .arbeiten__titel { font-size: clamp(2.4rem, 12vw, 3.6rem); }
  .arbeiten__leiste { gap: .9rem; }
  .filter { gap: .4rem; }
  .filter button { padding: .65rem .95rem; font-size: .9rem; }
  .sheet { place-items: end stretch; padding: 0; }
  .sheet__panel { grid-template-columns: 1fr; max-height: 92svh; border-radius: 1.5rem 1.5rem 0 0; overflow: hidden auto; }
  .sheet__flaeche { border-radius: 1.5rem 1.5rem 0 0; }
  .sheet__medium { aspect-ratio: 16/11; border-radius: 1.5rem 1.5rem 0 0; }
  .sheet__text { padding: 1.4rem 1.3rem calc(1.6rem + env(safe-area-inset-bottom)); overflow: visible; }
  .sheet__titel { font-size: 2.6rem; }
  .sheet__griff { display: block; position: absolute; z-index: 2; top: .55rem; left: 50%; width: 2.6rem; height: .3rem; margin-left: -1.3rem; border-radius: 99px; background: rgb(243 245 239 / .7); }
  .abschnitt-kopf { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .feed__kopf { grid-template-columns: 1fr; grid-template-areas: "label" "titel" "satz" "knopf"; justify-items: start; }
  .feed__raster { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 1rem; padding-bottom: .5rem; scrollbar-width: none; }
  .feed__raster::-webkit-scrollbar { display: none; }
  .feed__beitrag { flex: 0 0 72vw; scroll-snap-align: start; scroll-margin-left: var(--rand); }
  .feed__beitrag:nth-child(3n + 2), .feed__beitrag:nth-child(even) { margin-top: 0; }
  .feed__folgen { flex: 0 0 72vw; scroll-snap-align: start; }
  .feed__folgen a { min-height: 0; aspect-ratio: 4 / 5; }
  /* mobil die schon geladene 450er-Kachel statt rechts-hinten (spart ~125 KB) */
  .feed__folgen a::before { background-image: url("../media/pflanzen/rechts@0.5x.webp"); background-image: image-set(url("../media/pflanzen/rechts@0.5x.avif") type("image/avif"), url("../media/pflanzen/rechts@0.5x.webp") type("image/webp")); }
  .feed__raster::after { content: ""; flex: 0 0 1px; }
  .logos { --spalten: 3; --logo-h: 1.45rem; }
  .fuss__oben { grid-template-columns: 1fr; }
  .fuss__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(1.2rem, 5vw, 2rem); }
  .fuss__links a { overflow-wrap: anywhere; }
  .fuss .ranke { --rw: 22vw; --bleed: 1rem; }
  .wm__l { stroke-width: 17; }
  .wm__p { stroke-width: 11; }
  .fuss__unten { padding-bottom: 3.2rem; }   /* Platz für das Entwurf-Badge */
  .kundenlogo { --logo-abstand: .6rem; }
  .fund .kundenlogo { --logo-h: 1.55rem; --logo-max: 4.2rem; }
  .sheet__medium .kundenlogo { --logo-h: 2.1rem; --logo-max: 6.5rem; }
}

/* Tablet hochkant (700–899): Instagram als 3er-Raster statt Wischstrecke */
@media (min-width: 700px) and (max-width: 899px) {
  .feed__raster { display: grid; overflow: visible; padding-bottom: 0; }
  .feed__raster::after { content: none; }
  .feed__beitrag { flex: none; }
  .feed__beitrag:nth-child(3n + 2) { margin-top: clamp(2.5rem, 6vw, 5rem); }
  .feed__folgen { flex: none; }
  .feed__folgen a { aspect-ratio: auto; min-height: 14rem; }
}

/* Ohne Bewegung: Hero als ruhiges Vollbild, kein Laufband, kein Scroll-Kino */
/* Lenis übernimmt das weiche Scrollen */
html.lenis { scroll-behavior: auto; }
.motion-mask { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.motion-wort { display: inline-block; will-change: transform; }

/* Reduzierte Bewegung: kein Intro, kein Scroll-Kino; nur kurze Überblendungen (Apple §14) */
@media (max-width: 520px) { .wm__l { stroke-width: 24; } .wm__p { stroke-width: 15; } }
@media (max-width: 400px) { .fuss__raster > :first-child { grid-column: 1 / -1; } }   /* Kontakt (E-Mail) braucht die volle Breite */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .dd, .dd__liste > li, .menue__unter, .menue__unter li, .nav__auf svg, .menue__auf svg { transition: none !important; }
  .dd { clip-path: none; }
  .laufband__spur { animation: none; }
  .knopf, .kopf, .karte__titel a::after, .ill, .filter button, .fund-karte__bild video, .sheet__medium video { transition-property: opacity, color, background-color, box-shadow; }
}
/* Weniger Transparenz: Glas wird fest, Schatten-Hilfen kräftiger */
@media (prefers-reduced-transparency: reduce) {
  .knopf--glas { background: var(--moos); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .fund__etikett { background: var(--moos-tief); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sheet__scrim { background: rgb(6 12 8 / .9); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .sheet__zu, .feld__zaehler { background: var(--moos-tief); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .entwurf-badge { background: var(--moos-tief); }
}
@media (prefers-contrast: more) {
  .hero__buehne::after { background: linear-gradient(0deg, rgb(12 22 16 / .92) 0%, rgb(12 22 16 / .6) 45%, rgb(12 22 16 / .4) 100%); }
  .kopf__nav > ul { box-shadow: inset 0 0 0 1.5px currentColor; }
  .sheet__scrim { background: rgb(6 12 8 / .9); }
  .filter button { box-shadow: inset 0 0 0 1.5px var(--kalk); }
}

/* Abschnitte, die nach einem Menü-Sprung den Fokus bekommen (tabindex=-1), ohne Fokusrahmen */
main > section[tabindex="-1"]:focus { outline: none; }
.fuss__kopf[tabindex="-1"]:focus { outline: none; }

/* ---------- Pillen (Filter, Chips, Schlagworte) einheitlich zentriert (Christoph 2026-10-22) ----------
   Flex mittig, symmetrisches Padding, line-height 1 und – wo unterstützt – text-box-trim auf Versal- bis Grundlinie,
   damit die Archivo-Metrik (großer Unterlängen-Raum) die Schrift nicht nach oben schiebt. Zähler (sup) als Flex-Kind. */
.filter button, .ref-filter__gruppe button, .chips a, .chips span, .filterleiste a, .karte__tags li {   /* .knopf ist schon flex – nicht hier, sonst überschreibt display versteckte Knöpfe (.kopf__cta mobil) */
  display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1;
}
.filter button, .ref-filter__gruppe button, .chips a, .chips span, .filterleiste a, .karte__tags li {
  padding-block: .6em; text-box: trim-both cap alphabetic;
}
.filter button sup, .ref-filter__gruppe button sup { line-height: 1; vertical-align: baseline; align-self: center; position: relative; top: -.15em; }

/* ---------- Erstentwurf kompakt (Startseite) ---------- */
.erstentwurf--kompakt { padding-block: clamp(3.5rem, 7vw, 6rem); }
.ee-kompakt { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); }
.ee-kompakt .erstentwurf__titel { font-size: clamp(2.4rem, 5vw, 4.8rem); margin-bottom: 1rem; }
.ee-kompakt .erstentwurf__satz { max-width: 38rem; margin: 0 0 1.8rem; }
.ee-kompakt__ill { justify-self: center; width: min(100%, 20rem); --ill-linie: var(--blatt); --ill-akzent: var(--flechte); }
.ee-kompakt__ill .ill-rahmen { display: block; }
.ee-kompakt__ill .ill { width: 100%; height: auto; stroke: var(--ill-linie); stroke-width: 3; overflow: visible; }
@media (max-width: 899px) {
  .ee-kompakt { grid-template-columns: 1fr; gap: 1.2rem; }
  .ee-kompakt__ill { order: -1; justify-self: start; width: 7.5rem; }
}

.fuss__cookies { padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; }
.fuss__cookies:hover { color: var(--blatt); }
.fuss__cookies:focus-visible { outline: 2px solid var(--blatt); outline-offset: 3px; }