/* ==========================================================================
   MOOSWERK – Lebende Fassaden & vertikale Stadtgärten (fiktives Studio)
   Designstudie von mabu:design
   ========================================================================== */

/* ---------- Schriften (lokal, nur latin + latin-ext) ---------- */
@font-face {
  font-family: 'Bricolage';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url('../fonts/bricolage-grotesque-latin-ext-standard-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Bricolage';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  font-stretch: 75% 100%;
  src: url('../fonts/bricolage-grotesque-latin-standard-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/newsreader-latin-ext-standard-normal.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/newsreader-latin-standard-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/newsreader-latin-ext-standard-italic.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-display: swap;
  font-weight: 200 800;
  src: url('../fonts/newsreader-latin-standard-italic.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- Registrierte Eigenschaften (für Zähl- und Zeichenanimationen) ---------- */
@property --n {
  syntax: '<integer>';
  inherits: false;
  initial-value: 0;
}

/* ==========================================================================
   Tokens – Grundwerte = Sommer. Jede Jahreszeit überschreibt nur Farben.
   Die Pflanzenfarben (--p-*) liest auch das Hero-Canvas per JS.
   ========================================================================== */
:root {
  color-scheme: light;
  --f-kopf: 'Bricolage', 'Avenir Next Condensed', 'Arial Narrow', system-ui, sans-serif;
  --f-text: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --rand: clamp(16px, 5vw, 80px);
  --breite: 1440px;
  --kopf-h: 76px;
  --rund: clamp(20px, 2.4vw, 32px);
  --kurve: cubic-bezier(.22, .9, .24, 1);
  --feder: cubic-bezier(.34, 1.45, .5, 1);

  /* Sommer */
  --grund: #F5F3E9;
  --grund-2: #E7EADB;
  --tinte: #13271B;
  --tinte-2: #415547;
  --moos: #36622A;
  --moos-hell: #86B060;
  --salbei: #A9BCA0;
  --wald: #10231A;
  --wald-2: #1A3526;
  --hell: #F5F3E9;
  --hell-2: #B5C4B0;
  --sonne: #F4BE2A;
  --linie: rgb(19 39 27 / .14);

  --p-stiel-0: #B3C4A6; --p-stiel-1: #56804A; --p-stiel-2: #22451E;
  --p-blatt-0a: #BFD0B0; --p-blatt-0b: #CAD8BD; --p-blatt-0c: #B2C6A3;
  --p-blatt-1a: #5E9447; --p-blatt-1b: #73A857; --p-blatt-1c: #4E8440;
  --p-blatt-2a: #2C5A24; --p-blatt-2b: #3A6E2C; --p-blatt-2c: #234A1D;
  --p-bluete-1: #F4BE2A; --p-bluete-2: #FFFDF4; --p-bluete-mitte: #7A4E1C;
  --p-boden-1: #4F7E36; --p-boden-2: #3F6B2C; --p-boden-3: #86B060;
  --p-teilchen-1: #F4BE2A; --p-teilchen-2: #FFF1BF;

  --i-himmel: #E9EDDA; --i-ferne: #D3DCC6; --i-boden: #CFC5AF; --i-wasser: #9FB9B3;
  --i-haus-1: #EFE5D2; --i-haus-2: #DCCBAE; --i-haus-3: #C3AE8E; --i-haus-4: #8E6B4E;
  --i-fenster: #3D5560; --i-rahmen: #F8F4EA; --i-fuge: rgb(60 50 30 / .18); --i-zug: #EDE8DA; --i-trog: #A06A42;
  --i-gruen-1: var(--p-blatt-2c); --i-gruen-2: var(--p-blatt-2a); --i-gruen-3: var(--p-blatt-2b); --i-gruen-4: var(--p-blatt-1b);
  --i-bluete: var(--p-bluete-1);
}

:root[data-jahreszeit="fruehling"] {
  --grund: #F3F6EB; --grund-2: #E3ECD6; --tinte: #132A1C; --tinte-2: #3F5646;
  --moos: #3C6E22; --moos-hell: #8FC45E; --salbei: #B6CBA8; --wald: #12281A; --wald-2: #1C3A27;
  --hell: #F3F6EB; --hell-2: #B7CBAE; --sonne: #F6C937; --linie: rgb(19 42 28 / .14);
  --p-stiel-0: #BCD3A9; --p-stiel-1: #6E9A4E; --p-stiel-2: #2F5A22;
  --p-blatt-0a: #C9DEB5; --p-blatt-0b: #D5E6C4; --p-blatt-0c: #BCD6A4;
  --p-blatt-1a: #7DB54F; --p-blatt-1b: #94C565; --p-blatt-1c: #69A443;
  --p-blatt-2a: #3E7A28; --p-blatt-2b: #4F8E30; --p-blatt-2c: #2F6420;
  --p-bluete-1: #F2A3B8; --p-bluete-2: #FBE3EA; --p-bluete-mitte: #F6C937;
  --p-boden-1: #6F9E47; --p-boden-2: #5B8A38; --p-boden-3: #9CCB6B;
  --p-teilchen-1: #F2A3B8; --p-teilchen-2: #F9CFDA;
  --i-himmel: #E5EFDF; --i-ferne: #CFDDC6; --i-boden: #D2CBB4; --i-wasser: #A6C4BC;
}

:root[data-jahreszeit="herbst"] {
  --grund: #F6EFE2; --grund-2: #ECE2CE; --tinte: #1F2716; --tinte-2: #4F4D38;
  --moos: #55621F; --moos-hell: #B79A3C; --salbei: #C2B894; --wald: #1D2415; --wald-2: #2A3320;
  --hell: #F6EFE2; --hell-2: #C9BFA2; --sonne: #EEAB22; --linie: rgb(31 39 22 / .15);
  --p-stiel-0: #D5C6A6; --p-stiel-1: #7C6A3A; --p-stiel-2: #4A3B1E;
  --p-blatt-0a: #E5CFA6; --p-blatt-0b: #DDC9A0; --p-blatt-0c: #EAD9B7;
  --p-blatt-1a: #C27A34; --p-blatt-1b: #D9A143; --p-blatt-1c: #8E8A3A;
  --p-blatt-2a: #9A3F1C; --p-blatt-2b: #B85A22; --p-blatt-2c: #5D6A24;
  --p-bluete-1: #C8662B; --p-bluete-2: #A87244; --p-bluete-mitte: #5A3A1E;
  --p-boden-1: #7B7A34; --p-boden-2: #66652A; --p-boden-3: #B59A45;
  --p-teilchen-1: #C4622A; --p-teilchen-2: #E1A23A;
  --i-himmel: #F1E3CB; --i-ferne: #DCCFB2; --i-boden: #CDBE9F; --i-wasser: #A7B6AA;
}

:root[data-jahreszeit="winter"] {
  --grund: #EDF1F0; --grund-2: #DCE5E4; --tinte: #11232A; --tinte-2: #3E535B;
  --moos: #335A4E; --moos-hell: #7FA79B; --salbei: #AFC2BF; --wald: #0E1E23; --wald-2: #182E35;
  --hell: #EDF1F0; --hell-2: #AFC2C2; --sonne: #F2CB55; --linie: rgb(17 35 42 / .14);
  --p-stiel-0: #C3D0CE; --p-stiel-1: #6C8580; --p-stiel-2: #2F4944;
  --p-blatt-0a: #CBD8D5; --p-blatt-0b: #D6E0DE; --p-blatt-0c: #C0D0CC;
  --p-blatt-1a: #5F8A7D; --p-blatt-1b: #739C90; --p-blatt-1c: #4E786C;
  --p-blatt-2a: #244A40; --p-blatt-2b: #2F5C4F; --p-blatt-2c: #1C3D35;
  --p-bluete-1: #D9D2BE; --p-bluete-2: #CFC7AE; --p-bluete-mitte: #8C8266;
  --p-boden-1: #4E7066; --p-boden-2: #3E5F55; --p-boden-3: #8FB0A6;
  --p-teilchen-1: #FFFFFF; --p-teilchen-2: #FFFFFF;
  --i-himmel: #E2E9EC; --i-ferne: #CCD6D9; --i-boden: #D5D9D6; --i-wasser: #A9BCC2;
}

/* ==========================================================================
   Grundlagen
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--kopf-h) + 16px);
  scrollbar-gutter: stable;
  background: var(--grund);
}
html:has(.projekt-detail[open]), html.menue-offen { overflow: hidden; }
body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--f-text);
  font-size: clamp(1.06rem, 1rem + 0.28vw, 1.25rem);
  line-height: 1.55;
  font-optical-sizing: auto;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3 {
  font-family: var(--f-kopf);
  font-weight: 700;
  font-stretch: 88%;
  line-height: 1;
  letter-spacing: -0.028em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(2.3rem, 1rem + 4.4vw, 5.4rem); }
h3 { font-size: clamp(1.3rem, 1rem + 0.9vw, 1.75rem); letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--sonne); outline-offset: 3px; border-radius: 6px; }
.dunkel :focus-visible { outline-color: var(--sonne); }

.symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-nur {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprungmarke {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: .7em 1.1em; border-radius: 999px;
  background: var(--sonne); color: var(--wald); font-family: var(--f-kopf); font-weight: 650;
  transform: translateY(-160%); transition: transform .25s var(--kurve);
}
.sprungmarke:focus { transform: none; }

/* Linien-Icons aus dem Symbol-Sprite */
.jahreszeiten svg, .knopf svg, .konf-chip svg, .saat-knopf svg, .leistung-icon, .menue-knopf svg {
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}

.dachzeile {
  font-family: var(--f-kopf);
  font-size: clamp(.78rem, .74rem + .15vw, .88rem);
  font-weight: 650;
  font-stretch: 100%;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--moos);
  display: inline-flex; align-items: center; gap: .7em;
  margin-bottom: 1.1rem;
}
.dachzeile::before {
  content: ''; width: 1.6em; height: 1.6em; flex: none;
  background: currentColor;
  -webkit-mask: radial-gradient(circle at 50% 50%, #000 35%, transparent 37%);
  mask: radial-gradient(circle at 50% 50%, #000 35%, transparent 37%);
  border-radius: 45% 55% 50% 50% / 55% 45% 55% 45%;
}
.dunkel .dachzeile { color: var(--sonne); }

.marke-fiktiv {
  display: inline-block;
  font-family: var(--f-kopf); font-size: .72em; font-weight: 700; font-stretch: 100%;
  letter-spacing: .08em; text-transform: uppercase;
  padding: .28em .7em .3em; border-radius: 999px;
  background: var(--sonne); color: var(--wald);
  vertical-align: .12em;
}

/* ---------- Knöpfe ---------- */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 54px; padding: 0 1.55em;
  border-radius: 999px; border: 1.5px solid transparent;
  font-family: var(--f-kopf); font-size: 1.02rem; font-weight: 650; font-stretch: 94%; letter-spacing: -0.005em;
  text-decoration: none; white-space: nowrap;
  transition: transform .35s var(--kurve), background-color .3s, color .3s, border-color .3s;
}
.knopf svg { width: 20px; height: 20px; stroke-width: 2; transition: transform .35s var(--kurve); }
.knopf:hover { transform: translateY(-2px); }
.knopf:hover svg { transform: translateX(3px); }
.knopf-sonne { background: var(--sonne); color: var(--wald); }
.knopf-sonne:hover { background: color-mix(in oklab, var(--sonne) 82%, #fff); }
.knopf-linie {
  border-color: currentColor; color: var(--tinte);
  background: color-mix(in oklab, var(--grund) 70%, transparent);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.knopf-linie:hover { background: var(--tinte); color: var(--grund); border-color: var(--tinte); }

/* ---------- Scroll-Fortschritt (nur mit Unterstützung sichtbar) ---------- */
.fortschritt { display: none; }

/* ==========================================================================
   Kopfzeile
   ========================================================================== */
.kopf {
  position: fixed; inset: 12px var(--rand) auto; z-index: 50;
  pointer-events: none;
}
.kopf-innen {
  position: relative;
  pointer-events: auto;
  max-width: var(--breite); margin-inline: auto;
  display: flex; align-items: center; gap: clamp(8px, 1.6vw, 24px);
  min-height: 60px; padding: 8px 8px 8px 16px;
  border-radius: 999px;
}
/* Hintergrund als Pseudo-Element: backdrop-filter am Element selbst würde das
   mobile Vollbild-Menü (position: fixed) in die Pille einsperren. */
.kopf-innen::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: color-mix(in oklab, var(--grund) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3);
  border: 1px solid var(--linie);
  transition: box-shadow .4s, background-color .4s;
}
.kopf.gescrollt .kopf-innen::before { box-shadow: 0 12px 40px -18px rgb(10 30 20 / .35); background: color-mix(in oklab, var(--grund) 90%, transparent); }
.marke { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.marke-zeichen { width: 36px; height: 36px; flex: none; }
.marke-blob { fill: var(--moos); transition: fill .4s; }
.marke-spross { fill: none; stroke: var(--grund); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
.marke-wort {
  font-family: var(--f-kopf); font-size: 1.28rem; font-weight: 760; font-stretch: 78%;
  letter-spacing: -0.02em; text-transform: lowercase;
}
.navi ul { list-style: none; display: flex; gap: clamp(4px, 1vw, 12px); margin: 0; padding: 0; }
.navi a {
  display: block; padding: .55em .8em; border-radius: 999px;
  font-family: var(--f-kopf); font-size: .98rem; font-weight: 560; font-stretch: 92%;
  text-decoration: none;
  transition: background-color .25s, font-stretch .35s var(--kurve);
}
.navi a:hover { background: color-mix(in oklab, var(--moos) 12%, transparent); font-stretch: 100%; }
.jahreszeiten {
  display: flex; gap: 2px; padding: 3px; border-radius: 999px;
  background: color-mix(in oklab, var(--tinte) 7%, transparent);
}
.jahreszeiten button {
  display: grid; place-items: center;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--tinte-2);
  transition: background-color .3s, color .3s, transform .3s var(--feder);
}
.jahreszeiten button svg { width: 21px; height: 21px; }
.jahreszeiten button:hover { color: var(--tinte); transform: rotate(-8deg) scale(1.08); }
.jahreszeiten button[aria-pressed="true"] { background: var(--moos); color: var(--grund); }
.menue-knopf {
  display: none; width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: var(--tinte); color: var(--grund); place-items: center;
}
.menue-striche, .menue-striche::before, .menue-striche::after {
  display: block; width: 18px; height: 2px; border-radius: 2px; background: currentColor;
  transition: transform .35s var(--kurve), background-color .2s;
}
.menue-striche { position: relative; }
.menue-striche::before, .menue-striche::after { content: ''; position: absolute; left: 0; }
.menue-striche::before { top: -6px; }
.menue-striche::after { top: 6px; }
.menue-knopf[aria-expanded="true"] .menue-striche { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-striche::before { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-striche::after { transform: translateY(-6px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: max(660px, 100svh);
  display: grid; grid-template-rows: 1fr auto;
  padding: calc(var(--kopf-h) + clamp(28px, 7vh, 96px)) var(--rand) clamp(14px, 2.4vh, 26px);
  overflow: hidden;
  isolation: isolate;
}
.hero-blobs { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; }
.hero-blob-sonne { fill: var(--sonne); opacity: .55; }
.hero-blob-salbei { fill: color-mix(in oklab, var(--salbei) 26%, var(--grund)); }
.hero-blob-hell { fill: color-mix(in oklab, var(--grund-2) 80%, var(--grund)); }
.garten { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.hero-inhalt {
  width: 100%; max-width: var(--breite); margin-inline: auto;
  align-self: start;
}
.hero-titel {
  font-size: clamp(3.1rem, 0.6rem + 7.6vw, 11rem);
  line-height: .9;
  font-weight: 720;
  font-stretch: 84%;
  letter-spacing: -0.04em;
  margin: .1em 0 .32em;
  max-width: 12ch;
}
.hero-titel .zeile { display: block; }
.hero-titel .kursiv {
  font-family: var(--f-text); font-style: italic; font-weight: 340;
  letter-spacing: -0.03em; color: var(--moos);
  padding-left: .04em;
}
.wachsen {
  display: inline-block;
  font-stretch: 100%; font-weight: 800;
  animation: wachsen 2.6s var(--kurve) .25s both;
}
@keyframes wachsen {
  from { font-stretch: 75%; font-weight: 220; }
  to { font-stretch: 100%; font-weight: 800; }
}
.hero-lead { max-width: 36ch; font-size: clamp(1.08rem, 1rem + .45vw, 1.4rem); line-height: 1.5; color: var(--tinte-2); }
.knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(22px, 3.5vh, 36px); }
.hero-inhalt > * { animation: aufsteigen 1.1s var(--kurve) both; }
.hero-inhalt > :nth-child(2) { animation-delay: .08s; }
.hero-inhalt > :nth-child(3) { animation-delay: .2s; }
.hero-inhalt > :nth-child(4) { animation-delay: .3s; }
@keyframes aufsteigen { from { opacity: 0; transform: translateY(28px); } }

.hero-fuss {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--breite); margin-inline: auto;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 10px;
  font-family: var(--f-kopf); font-size: .86rem; font-stretch: 94%;
}
.saat, .wind-hinweis {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3em .9em;
  padding: .45em .5em .45em 1.1em; border-radius: 999px;
  background: color-mix(in oklab, var(--grund) 84%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border: 1px solid var(--linie);
}
.wind-hinweis { padding: .7em 1.1em; color: var(--tinte-2); }
.saat-nummer { font-weight: 700; font-variant-numeric: tabular-nums; }
.saat-text { color: var(--tinte-2); }
.saat-knopf {
  display: inline-flex; align-items: center; gap: .4em;
  min-height: 34px; padding: 0 .9em; border: 0; border-radius: 999px;
  background: var(--tinte); color: var(--grund); font-weight: 600;
  transition: background-color .25s;
}
.saat-knopf svg { width: 16px; height: 16px; stroke-width: 2.2; transition: transform .6s var(--kurve); }
.saat-knopf:hover svg { transform: rotate(200deg); }
.saat-knopf:hover { background: var(--moos); }
.wind-finger { display: none; }
.grob .wind-maus { display: none; }
.grob .wind-finger { display: inline; }

/* ==========================================================================
   Allgemeine Abschnitte
   ========================================================================== */
.abschnitt { position: relative; padding: clamp(88px, 11vw, 170px) var(--rand); }
.abschnitt > * { max-width: var(--breite); margin-inline: auto; }
.abschnitt-kopf { margin-bottom: clamp(40px, 6vw, 80px); }
.abschnitt-kopf h2 { max-width: 16ch; }
.abschnitt-intro { max-width: 48ch; margin-top: 1.4rem; color: var(--tinte-2); font-size: clamp(1.1rem, 1rem + .35vw, 1.3rem); }
@media (min-width: 1041px) {
  /* Überschrift links, Einleitung rechts unten – ruhiges, redaktionelles Raster */
  .abschnitt-kopf { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr); column-gap: clamp(32px, 5vw, 96px); align-items: end; }
  .abschnitt-kopf .dachzeile { grid-column: 1 / -1; justify-self: start; }
  .abschnitt-kopf .abschnitt-intro { margin-top: 0; padding-bottom: .4rem; }
}
.dunkel { background: var(--wald); color: var(--hell); }
.dunkel .abschnitt-intro { color: var(--hell-2); }

/* Abschnitte liegen wie Blätter übereinander: runde Oberkante, leicht überlappend */
:root { --blatt-rund: clamp(28px, 4vw, 56px); }
.konfigurator, .projekte, .team, .kontakt {
  position: relative;
  border-radius: var(--blatt-rund) var(--blatt-rund) 0 0;
  margin-top: calc(-1 * var(--blatt-rund));
}
.projekte { background: var(--grund); }

/* ---------- Manifest ---------- */
.manifest {
  position: relative;
  padding: clamp(96px, 14vw, 220px) var(--rand);
  overflow: clip;
}
.manifest-text {
  position: relative; z-index: 1;
  max-width: 1180px; margin-inline: auto;
  font-size: clamp(1.75rem, .9rem + 3vw, 4.1rem);
  line-height: 1.12; letter-spacing: -0.018em; font-weight: 360;
}
.manifest-text em { font-style: italic; color: var(--moos); }
.drift { position: absolute; pointer-events: none; fill: none; stroke: var(--moos); stroke-width: 2.4; stroke-linecap: round; opacity: .45; }
.drift-1 { width: 58px; top: 12%; left: 5%; }
.drift-2 { width: 44px; bottom: 14%; right: 9%; transform: rotate(120deg); }
.drift-3 { width: clamp(180px, 26vw, 380px); top: 8%; right: -6%; opacity: 1; stroke: none; }
.drift-3 path { fill: color-mix(in oklab, var(--salbei) 30%, var(--grund)); }
.drift-4 { width: 50px; top: 10%; right: 7%; }

/* ---------- Leistungen ---------- */
.leistungen { background: var(--grund-2); border-radius: var(--blatt-rund) var(--blatt-rund) 0 0; padding-bottom: calc(clamp(88px, 11vw, 170px) + var(--blatt-rund)); }
.leistungen-liste {
  list-style: none; padding: 0; margin-top: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: clamp(14px, 1.6vw, 24px);
}
.leistung {
  position: relative;
  padding: clamp(24px, 2.4vw, 36px);
  border-radius: var(--rund);
  background: var(--grund);
  border: 1px solid var(--linie);
  transition: transform .5s var(--kurve), border-color .4s, box-shadow .5s;
}
.leistung:hover { transform: translateY(-6px); border-color: color-mix(in oklab, var(--moos) 40%, transparent); box-shadow: 0 24px 50px -30px rgb(20 50 30 / .45); }
.leistung-zeichen { position: relative; width: 96px; height: 96px; margin-bottom: 26px; }
.leistung-zeichen > svg:first-child { position: absolute; inset: 0; width: 100%; height: 100%; }
.leistung-blob { fill: color-mix(in oklab, var(--moos-hell) 45%, var(--grund)); transition: fill .4s; }
.leistung:hover .leistung-blob { fill: var(--sonne); }
.leistung-icon { position: absolute; inset: 22px; width: 52px; height: 52px; color: var(--tinte); stroke-width: 2; }
.leistung h3 { margin-bottom: .6rem; }
.leistungen-liste { counter-reset: leistung; }
.leistung { counter-increment: leistung; }
.leistung::after {
  content: '0' counter(leistung);
  position: absolute; top: clamp(24px, 2.4vw, 36px); right: clamp(24px, 2.4vw, 36px);
  font-family: var(--f-kopf); font-size: .9rem; font-weight: 650; color: var(--tinte-2); font-variant-numeric: tabular-nums;
}
.leistung p { color: var(--tinte-2); font-size: 1.04rem; }

/* ==========================================================================
   Konfigurator
   ========================================================================== */
.konfigurator { position: relative; padding: clamp(88px, 11vw, 170px) var(--rand); }
.konfigurator > * { max-width: var(--breite); margin-inline: auto; }
.konf-raster { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4vw, 64px); align-items: start; }
.konf-buehne {
  position: sticky; top: calc(var(--kopf-h) + 24px);
  border-radius: var(--rund); overflow: hidden;
  aspect-ratio: 6 / 7;
  background: var(--grund-2);
  box-shadow: 0 40px 80px -40px rgb(0 0 0 / .6);
}
.konf-steuerung { display: grid; gap: clamp(22px, 2.5vw, 34px); }
.konf-gruppe { border: 0; margin: 0; padding: 0; min-width: 0; }
.konf-gruppe legend, .konf-regler-kopf label {
  font-family: var(--f-kopf); font-weight: 650; font-size: .82rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--hell-2); padding: 0; margin-bottom: 12px;
}
.konf-optionen { display: grid; gap: 10px; }
.konf-arten { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.konf-option {
  position: relative; display: grid; gap: 6px; align-content: start;
  padding: 16px 16px 18px; border-radius: 18px; cursor: pointer;
  border: 1.5px solid color-mix(in oklab, var(--hell) 18%, transparent);
  background: color-mix(in oklab, var(--hell) 5%, transparent);
  transition: background-color .3s, border-color .3s, color .3s, transform .3s var(--kurve);
}
.konf-option:hover { border-color: color-mix(in oklab, var(--hell) 45%, transparent); transform: translateY(-2px); }
.konf-option input, .konf-chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.konf-option-titel { font-family: var(--f-kopf); font-weight: 650; font-stretch: 90%; font-size: 1.08rem; line-height: 1.15; }
.konf-option-text { font-size: .9rem; line-height: 1.35; color: var(--hell-2); }
.konf-option:has(input:checked) { background: var(--hell); color: var(--wald); border-color: var(--hell); }
.konf-option:has(input:checked) .konf-option-text { color: var(--tinte-2); }
.konf-option:has(input:focus-visible), .konf-chip:has(input:focus-visible) { outline: 3px solid var(--sonne); outline-offset: 3px; }
.konf-regler-kopf { display: flex; justify-content: space-between; align-items: baseline; }
.konf-deckung-wert { font-family: var(--f-kopf); font-size: 2rem; font-weight: 700; font-stretch: 86%; font-variant-numeric: tabular-nums; }
.konf-regler { --wert: 60%; -webkit-appearance: none; appearance: none; width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer; }
.konf-regler::-webkit-slider-runnable-track {
  height: 12px; border-radius: 99px;
  background: linear-gradient(to right, var(--sonne) var(--wert), color-mix(in oklab, var(--hell) 16%, transparent) var(--wert));
}
.konf-regler::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; margin-top: -9px; border-radius: 50%;
  background: var(--hell); border: 4px solid var(--sonne); box-shadow: 0 4px 14px rgb(0 0 0 / .35);
  transition: transform .25s var(--feder);
}
.konf-regler:active::-webkit-slider-thumb { transform: scale(1.15); }
.konf-regler::-moz-range-track { height: 12px; border-radius: 99px; background: color-mix(in oklab, var(--hell) 16%, transparent); }
.konf-regler::-moz-range-progress { height: 12px; border-radius: 99px; background: var(--sonne); }
.konf-regler::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--hell); border: 4px solid var(--sonne); }
.konf-regler:focus-visible { outline: 3px solid var(--sonne); outline-offset: 4px; border-radius: 14px; }
.konf-jahreszeiten { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.konf-chip {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px; border-radius: 16px; cursor: pointer;
  border: 1.5px solid color-mix(in oklab, var(--hell) 18%, transparent);
  font-family: var(--f-kopf); font-size: .88rem; font-weight: 600;
  transition: background-color .3s, color .3s, border-color .3s;
}
.konf-chip svg { width: 24px; height: 24px; }
.konf-chip:hover { border-color: color-mix(in oklab, var(--hell) 45%, transparent); }
.konf-chip:has(input:checked) { background: var(--sonne); color: var(--wald); border-color: var(--sonne); }
.konf-ergebnis {
  padding: clamp(20px, 2.2vw, 30px); border-radius: var(--rund);
  background: var(--wald-2);
  border: 1px solid color-mix(in oklab, var(--hell) 10%, transparent);
}
.konf-ergebnis h3 { font-size: 1rem; font-weight: 600; font-stretch: 100%; letter-spacing: 0; color: var(--hell-2); display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }
.konf-ergebnis h3 .marke-fiktiv { font-size: .78rem; }
.konf-werte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 20px; margin: 20px 0; }
.konf-werte div { border-top: 1px solid color-mix(in oklab, var(--hell) 14%, transparent); padding-top: 10px; }
.konf-werte dt { font-size: .86rem; color: var(--hell-2); }
.konf-werte dd { margin: 2px 0 0; font-family: var(--f-kopf); font-size: clamp(1.25rem, 1rem + .8vw, 1.7rem); font-weight: 650; font-stretch: 88%; line-height: 1.15; font-variant-numeric: tabular-nums; }
.konf-jahreszeit-text { font-style: italic; font-size: 1.08rem; min-height: 3.2em; }
.konf-hinweis { margin-top: 14px; font-size: .84rem; line-height: 1.45; color: var(--hell-2); }

/* --- Konfigurator: SVG --- */
.konf-svg {
  display: block; width: 100%; height: 100%;
  --k-fassade: #EADFC9; --k-fassade-2: #E1D3B9; --k-fuge: rgb(90 70 40 / .16);
  --k-sockel: #A99A80; --k-gesims: #F4ECDC; --k-gesims-dunkel: #CDBB9A;
  --k-dach: #5E6B64; --k-dach-dunkel: #4B5751; --k-rahmen: #F8F4EA; --k-glas: #3E5560; --k-tuer: #6A4A2E;
  --k-nachbar-1: #CDD5C9; --k-nachbar-2: #D9D3C3; --k-nachbar-fenster: #A3B2AB;
  --k-gehweg: #D1CABA; --k-bordstein: #B8B09E; --k-erde: #6B4E33;
  --k-trog: #A56E45; --k-trog-kante: #7E5334;
  /* Sommer als Grundwert */
  --k-himmel: #EEF0DC; --k-ferne: #DDE3CD;
  --k-trieb: #5B4A33;
  --k-blatt-1: #2F6A2A; --k-blatt-2: #3F7F33; --k-blatt-3: #57963F;
  --k-bluete-1: #F4BE2A; --k-bluete-2: #FFFFFF;
  --k-moos-1: #3E7231; --k-moos-2: #4D8439; --k-moos-3: #33612A; --k-moos-hell: #8DBA62;
}
.konf-svg[data-jahreszeit="fruehling"] {
  --k-himmel: #E6F0DF; --k-ferne: #D6E4CF; --k-trieb: #6B5A3E;
  --k-blatt-1: #5E9E3A; --k-blatt-2: #79B64A; --k-blatt-3: #9ACB62;
  --k-bluete-1: #F3A9BC; --k-bluete-2: #FFFFFF;
  --k-moos-1: #6FA046; --k-moos-2: #86B458; --k-moos-3: #5A8C38; --k-moos-hell: #B9DB8C;
}
.konf-svg[data-jahreszeit="herbst"] {
  --k-himmel: #F3E6CF; --k-ferne: #E4D6BA; --k-trieb: #5B4630;
  --k-blatt-1: #A63A1E; --k-blatt-2: #C8612A; --k-blatt-3: #E0A23C;
  --k-bluete-1: #C8662B; --k-bluete-2: #E9C27A;
  --k-moos-1: #6E7430; --k-moos-2: #7F8636; --k-moos-3: #5C6428; --k-moos-hell: #B9AE62;
}
.konf-svg[data-jahreszeit="winter"] {
  --k-himmel: #E4EBEE; --k-ferne: #D3DDE0; --k-trieb: #6E6258;
  --k-blatt-1: #3D5F52; --k-blatt-2: #4D6F61; --k-blatt-3: #5F8072;
  --k-bluete-1: #FFFFFF; --k-bluete-2: #FFFFFF;
  --k-moos-1: #4E7064; --k-moos-2: #5D7F72; --k-moos-3: #42635A; --k-moos-hell: #E3ECEA;
}
.k-himmel, .k-ferne { transition: fill .9s; }
.k-sonne { transition: opacity .9s; }
.konf-svg[data-jahreszeit="winter"] .k-sonne { opacity: .55; }
.k-schnee { opacity: 0; transition: opacity .9s; }
.konf-svg[data-jahreszeit="winter"] .k-schnee { opacity: 1; }

.k-wachs {
  transform: scale(0); opacity: 0;
  transition: transform .6s var(--feder) var(--verz, 0s), opacity .25s linear var(--verz, 0s), fill .9s ease var(--fall, 0s);
}
.k-wachs.an { transform: scale(1); opacity: 1; }
.k-paneel, .k-bluete-gruppe { transform-box: fill-box; transform-origin: 50% 50%; }
.k-trog { transform-box: fill-box; transform-origin: 50% 15%; }
.k-trog-blueten { transform-box: fill-box; transform-origin: 50% 100%; }
rect.k-wachs { transform-box: fill-box; transform-origin: 50% 100%; }
.k-trieb {
  fill: none; stroke: var(--k-trieb); stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1 1; stroke-dashoffset: 1; opacity: 0;
  transition: stroke-dashoffset .9s cubic-bezier(.35, .6, .3, 1) var(--verz, 0s), opacity .2s linear var(--verz, 0s), stroke .9s;
}
.k-trieb.an { opacity: 1; }
.k-haenger { stroke: var(--k-blatt-1); }
.k-blatt { fill: var(--k-blatt-1); }
.k-blatt.f2, .k-busch.f2 { fill: var(--k-blatt-2); }
.k-blatt.f3, .k-busch.f3 { fill: var(--k-blatt-3); }
.k-busch { fill: var(--k-blatt-1); transition: fill .9s; }
.k-moos { fill: var(--k-moos-1); transition: fill .9s var(--fall, 0s); }
.k-moos.f2 { fill: var(--k-moos-2); }
.k-moos.f3 { fill: var(--k-moos-3); }
.k-bluete { fill: var(--k-bluete-1); transition: fill .9s; }
.k-bluete.b2 { fill: var(--k-bluete-2); }
.k-bluete-mitte { fill: var(--sonne); }
.k-trog-kasten { fill: var(--k-trog); }
.k-trog-kante { fill: var(--k-trog-kante); }
/* Frühling: Blüten an den Kletterpflanzen */
.konf-svg:not([data-jahreszeit="fruehling"]) .k-nur-fruehling.an { transform: scale(0); opacity: 0; }
/* Winter: Laub fällt (gestaffelt), Tröge ohne Blüten */
.konf-svg[data-jahreszeit="winter"] .k-blatt.faellt.an {
  opacity: 0; transform: translate(.2px, 1.4px) rotate(60deg) scale(.4);
  transition: transform 1.2s ease-in var(--fall, 0s), opacity 1s ease-in var(--fall, 0s);
}
.konf-svg[data-jahreszeit="winter"] .k-trog-blueten.an { opacity: 0; transform: scale(.2); }
.konf-svg[data-jahreszeit="herbst"] .k-trog-blueten.an { opacity: .85; }

/* ==========================================================================
   Projekte
   ========================================================================== */
.projekt-liste {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: clamp(28px, 3vw, 48px) clamp(18px, 2vw, 32px);
}
.projekt-karte { position: relative; }
.projekt-karte:nth-child(3n + 2) { margin-top: clamp(0px, 4vw, 64px); }
.projekt-bild {
  margin: 0; aspect-ratio: 4 / 3; border-radius: var(--rund); overflow: hidden;
  background: var(--grund-2);
}
.projekt-bild svg { width: 100%; height: 100%; transition: transform .8s var(--kurve); }
.projekt-liste .projekt-bild { position: relative; }
/* Runder Pfeil-Knopf erscheint beim Überfahren */
.projekt-liste .projekt-bild::after {
  content: ''; position: absolute; right: 16px; bottom: 16px; width: 54px; height: 54px; border-radius: 50%;
  background: var(--sonne) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310231A' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / 22px no-repeat;
  transform: scale(.5) rotate(-45deg); opacity: 0;
  transition: transform .5s var(--feder), opacity .3s;
}
.projekt-karte:hover .projekt-bild::after, .projekt-karte:has(:focus-visible) .projekt-bild::after { transform: none; opacity: 1; }
.projekt-karte:hover .projekt-bild svg { transform: scale(1.045); }
.projekt-info { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 16px; padding: 18px 4px 0; }
.projekt-meta { grid-column: 1 / -1; font-family: var(--f-kopf); font-size: .82rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--moos); }
.projekt-titel { font-size: clamp(1.45rem, 1.1rem + 1vw, 2.1rem); width: fit-content; }
.projekt-oeffnen {
  all: unset; cursor: pointer;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 2px no-repeat;
  transition: background-size .5s var(--kurve);
}
.projekt-oeffnen::after { content: ''; position: absolute; inset: 0; border-radius: var(--rund); }
.projekt-karte:hover .projekt-oeffnen { background-size: 100% 2px; }
.projekt-karte:has(.projekt-oeffnen:focus-visible) .projekt-bild { outline: 3px solid var(--sonne); outline-offset: 4px; }
.projekt-jahr { font-family: var(--f-kopf); font-weight: 600; color: var(--tinte-2); font-variant-numeric: tabular-nums; }

/* --- Detail (Dialog) --- */
.projekt-detail {
  width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0;
  background: var(--grund); color: var(--tinte);
  overflow-y: auto; overscroll-behavior: contain;
}
.projekt-detail::backdrop { background: var(--grund); }
.detail-leiste {
  position: sticky; top: 0; z-index: 2;
  padding: 16px var(--rand);
  background: linear-gradient(var(--grund) 65%, color-mix(in oklab, var(--grund) 0%, transparent));
}
.detail-zurueck { min-height: 48px; }
.pfeil-links { transform: scaleX(-1); }
.detail-zurueck:hover .pfeil-links { transform: scaleX(-1) translateX(3px); }
.detail-raster {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(24px, 4vw, 72px);
  max-width: var(--breite); margin-inline: auto; padding: 8px var(--rand) clamp(48px, 8vw, 110px);
  align-items: start;
}
.detail-bild {
  margin: 0; aspect-ratio: 4 / 3; border-radius: var(--rund); overflow: hidden; background: var(--grund-2);
  view-transition-name: projekt-bild;
  position: sticky; top: 84px;
}
.detail-bild svg { width: 100%; height: 100%; }
.detail-text { view-transition-name: detail-text; }
.detail-meta { font-family: var(--f-kopf); font-size: .85rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--moos); margin-bottom: 14px; }
.detail-titel:focus { outline: none; }
.detail-titel { view-transition-name: projekt-titel; font-size: clamp(2.4rem, 1rem + 4vw, 4.6rem); width: fit-content; margin-bottom: 26px; }
.detail-beschreibung { font-size: clamp(1.12rem, 1rem + .4vw, 1.35rem); }
.detail-fakten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin: 32px 0; }
.detail-fakten div { border-top: 1px solid var(--linie); padding-top: 10px; }
.detail-fakten dt { font-size: .85rem; color: var(--tinte-2); }
.detail-fakten dd { margin: 0; font-family: var(--f-kopf); font-weight: 650; font-stretch: 90%; font-size: 1.2rem; }
.detail-zitat { margin: 0 0 26px; padding: 22px 24px; border-radius: 22px; background: var(--grund-2); }
.detail-zitat p { font-style: italic; font-size: 1.3rem; line-height: 1.35; }
.detail-zitat footer { margin-top: 10px; font-size: .92rem; color: var(--tinte-2); }
.detail-zitat cite { font-style: normal; }
.detail-ende { margin-top: 28px; }
.detail-ende:hover .pfeil-links { transform: scaleX(-1) translateX(3px); }
.detail-hinweis { font-size: .9rem; color: var(--tinte-2); display: flex; flex-wrap: wrap; align-items: center; gap: .6em; }

/* ==========================================================================
   Kennzahlen
   ========================================================================== */
.zahlen { background: var(--moos); color: var(--hell); padding: clamp(72px, 9vw, 140px) var(--rand); border-radius: clamp(28px, 4vw, 56px); margin: 0 clamp(16px, 1.4vw, 20px); }
.zahlen-innen { max-width: var(--breite); margin-inline: auto; }
.zahlen .dachzeile { color: var(--hell); gap: .8em; }
.zahlen-liste { list-style: none; padding: 0; margin: 20px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.zahlen-liste li { display: grid; align-content: start; gap: 8px; border-top: 1.5px solid color-mix(in oklab, var(--hell) 35%, transparent); padding-top: 18px; }
.zahl {
  font-family: var(--f-kopf); font-weight: 760; font-stretch: 80%;
  font-size: clamp(3.4rem, 1.5rem + 6vw, 8.6rem); line-height: .9; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}
.zahl::before { content: attr(data-wert); }
.zahl-text { font-size: 1.05rem; max-width: 18ch; }
.zahlen-hinweis { margin-top: clamp(28px, 4vw, 48px); font-size: .9rem; }

/* ==========================================================================
   Prozess – ohne Unterstützung: normales Raster
   ========================================================================== */
.prozess { position: relative; padding: clamp(88px, 11vw, 170px) var(--rand); }
.prozess-buehne { max-width: var(--breite); margin-inline: auto; }
.prozess-kopf { margin-bottom: clamp(36px, 5vw, 64px); }
.prozess-kopf h2 { max-width: 18ch; }
.prozess-ranke { display: none; }
.prozess-schritte { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: clamp(28px, 3vw, 44px); }
.schritt-nummer { position: relative; width: 96px; height: 96px; display: grid; place-items: center; margin-bottom: 20px; }
.schritt-nummer svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.schritt-nummer path { fill: var(--moos-hell); }
.schritt:nth-child(2) .schritt-nummer path { fill: var(--salbei); }
.schritt:nth-child(3) .schritt-nummer path { fill: var(--sonne); }
.schritt:nth-child(4) .schritt-nummer path { fill: var(--moos); }
.schritt-nummer span { position: relative; font-family: var(--f-kopf); font-weight: 750; font-stretch: 80%; font-size: 1.8rem; color: var(--wald); }
.schritt:nth-child(4) .schritt-nummer span { color: var(--hell); }
.schritt h3 { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.6rem); margin-bottom: .7rem; }
.schritt p { color: var(--tinte-2); max-width: 36ch; }

/* ==========================================================================
   Team
   ========================================================================== */
.team { background: var(--grund-2); overflow: clip; }
.team-liste { list-style: none; padding: 0; margin-top: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 4vw, 64px) clamp(18px, 2vw, 32px); }
.person-bild { width: min(100%, 280px); aspect-ratio: 1; margin-bottom: 18px; transition: transform .6s var(--kurve); }
.person:hover .person-bild { transform: rotate(-3deg) scale(1.03); }
.portraet { width: 100%; height: 100%; }
.person h3 { font-size: 1.5rem; }
.person-rolle { margin-top: 6px; font-family: var(--f-kopf); font-size: .95rem; font-weight: 560; color: var(--moos); }
.person-pflanze { margin-top: 4px; font-style: italic; color: var(--tinte-2); }

/* ==========================================================================
   Kontakt
   ========================================================================== */
.kontakt { padding: clamp(88px, 11vw, 170px) var(--rand) clamp(64px, 8vw, 120px); }
.kontakt-raster { max-width: var(--breite); margin-inline: auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.kontakt-text h2 { max-width: 12ch; margin-bottom: 1.4rem; }
.kontakt-text > p:not(.dachzeile) { color: var(--hell-2); max-width: 40ch; }
.kontakt-text address { margin-top: 2rem; font-style: normal; font-family: var(--f-kopf); font-stretch: 92%; line-height: 1.6; }
.kontakt-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.feld { display: grid; gap: 8px; }
.feld-breit { grid-column: 1 / -1; }
.feld label { font-family: var(--f-kopf); font-weight: 600; font-size: .85rem; letter-spacing: .1em; text-transform: uppercase; color: var(--hell-2); }
.feld input, .feld select, .feld textarea {
  width: 100%; min-height: 54px; padding: 14px 16px;
  border-radius: 16px; border: 1.5px solid color-mix(in oklab, var(--hell) 22%, transparent);
  background: color-mix(in oklab, var(--hell) 6%, transparent); color: var(--hell);
  font-family: var(--f-text); font-size: 1.08rem;
  transition: border-color .25s, background-color .25s;
}
.feld select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(-45deg, transparent 50%, currentColor 50%); background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.feld select option { color: #13271B; background: #F5F3E9; }
.feld textarea { resize: vertical; min-height: 130px; }
.feld input:hover, .feld select:hover, .feld textarea:hover { border-color: color-mix(in oklab, var(--hell) 45%, transparent); }
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible { outline: 3px solid var(--sonne); outline-offset: 2px; border-color: var(--sonne); }
.kontakt-senden { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 6px; }
.kontakt-status { font-family: var(--f-kopf); font-weight: 600; color: var(--sonne); }
.kontakt-hinweis { font-size: .88rem; color: var(--hell-2); }

/* ==========================================================================
   Fuß
   ========================================================================== */
.fuss { padding: 0 var(--rand) 28px; overflow: clip; }
.fuss-wort {
  max-width: var(--breite); margin: 0 auto;
  font-family: var(--f-kopf); font-weight: 800; font-stretch: 100%;
  font-size: clamp(4rem, 17.4vw, 18rem); line-height: .8; letter-spacing: -0.05em;
  text-transform: lowercase; text-align: center;
  color: var(--moos-hell);
  padding-top: .12em;
  border-top: 1px solid color-mix(in oklab, var(--hell) 14%, transparent);
}
.fuss-raster {
  max-width: var(--breite); margin: clamp(32px, 5vw, 64px) auto 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 28px;
}
.fuss-claim { font-family: var(--f-kopf); font-stretch: 92%; font-size: 1.1rem; line-height: 1.4; }
.fuss nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; padding: 0; font-family: var(--f-kopf); }
.fuss nav a { text-decoration: none; }
.fuss nav a:hover { text-decoration: underline; }
.jahreszeiten-fuss { background: color-mix(in oklab, var(--hell) 8%, transparent); }
.jahreszeiten-fuss button { width: auto; height: 40px; padding: 0 14px 0 10px; border-radius: 999px; display: flex; gap: 6px; color: var(--hell-2); font-family: var(--f-kopf); font-size: .9rem; font-weight: 600; }
.jahreszeiten-fuss button:hover { color: var(--hell); transform: none; }
.jahreszeiten-fuss button[aria-pressed="true"] { background: var(--sonne); color: var(--wald); }
.fuss-zeile {
  max-width: var(--breite); margin: clamp(36px, 5vw, 64px) auto 0; padding-top: 22px;
  border-top: 1px solid color-mix(in oklab, var(--hell) 14%, transparent);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 28px;
  font-size: .92rem; color: var(--hell-2);
}
.fuss-zeile a { color: var(--hell); font-weight: 600; }

/* ==========================================================================
   View Transitions
   ========================================================================== */
/* Jahreszeit: alter Zustand bleibt stehen, neuer wächst per clip-path (JS) als Kreis */
html.vt-jahreszeit::view-transition-old(root),
html.vt-jahreszeit::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.vt-jahreszeit *, html.vt-jahreszeit *::before, html.vt-jahreszeit *::after { transition: none !important; }

/* Projekt-Morph */
html.vt-projekt::view-transition-group(projekt-bild),
html.vt-projekt::view-transition-group(projekt-titel) { animation-duration: .7s; animation-timing-function: cubic-bezier(.2, .85, .2, 1); }
html.vt-projekt::view-transition-old(root),
html.vt-projekt::view-transition-new(root) { animation-duration: .45s; }
html.vt-projekt::view-transition-new(detail-text) { animation: .6s cubic-bezier(.2, .85, .2, 1) .3s both detail-rein; }
html.vt-projekt::view-transition-old(detail-text) { animation: .25s ease-out both detail-raus; }
@keyframes detail-rein { from { opacity: 0; transform: translateY(40px); } }
@keyframes detail-raus { to { opacity: 0; transform: translateY(20px); } }

/* ==========================================================================
   Scroll-driven Animationen – nur mit Unterstützung und ohne Bewegungsreduktion.
   Ohne Unterstützung bleibt alles sichtbar und statisch.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Fortschrittsbalken oben */
    .fortschritt {
      display: block; position: fixed; inset: 0 0 auto; height: 3px; z-index: 60;
      background: var(--sonne); transform-origin: 0 50%;
      animation: fortschritt linear both; animation-timeline: scroll(root);
    }
    @keyframes fortschritt { from { transform: scaleX(0); } to { transform: scaleX(1); } }

    /* Manifest: Wörter färben sich beim Lesen ein */
    .wort {
      color: color-mix(in oklab, var(--tinte) 16%, var(--grund));
      animation: wort-an linear both; animation-timeline: view(); animation-range: entry 30% cover 42%;
    }
    em.wort { color: color-mix(in oklab, var(--moos) 22%, var(--grund)); animation-name: wort-an-moos; }
    @keyframes wort-an { to { color: var(--tinte); } }
    @keyframes wort-an-moos { to { color: var(--moos); } }

    /* Treibende Blätter und Blobs */
    .drift { animation: treiben linear both; animation-timeline: view(); animation-range: cover; }
    .drift-2 { --von-d: 140deg; --bis-d: 60deg; }
    .drift-3 { --von-y: 160px; --bis-y: -200px; --von-d: 0deg; --bis-d: 40deg; }
    @keyframes treiben {
      from { transform: translateY(var(--von-y, 120px)) rotate(var(--von-d, -20deg)); }
      to { transform: translateY(var(--bis-y, -140px)) rotate(var(--bis-d, 40deg)); }
    }

    /* Karten tauchen auf */
    .leistung, .projekt-karte, .person {
      animation: auftauchen linear both; animation-timeline: view(); animation-range: entry 0% entry 75%;
    }
    @keyframes auftauchen { from { opacity: 0; transform: translateY(60px) scale(.97); } }
    .leistung:hover { animation: none; }

    /* Kennzahlen zählen hoch (registrierte Integer-Eigenschaft + CSS-Zähler) */
    .zahl {
      counter-reset: n var(--n);
      animation: zaehlen linear both; animation-timeline: view(); animation-range: entry 10% cover 30%;
    }
    .zahl::before { content: counter(n); }
    @keyframes zaehlen { from { --n: 0; font-stretch: 75%; } to { --n: var(--ziel); font-stretch: 80%; } }

    /* Fußzeilen-Wortmarke dehnt sich (variable Achse wdth) */
    .fuss-wort { animation: dehnen linear both; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes dehnen { from { font-stretch: 75%; font-weight: 300; letter-spacing: -0.02em; } to { font-stretch: 100%; font-weight: 800; letter-spacing: -0.05em; } }

    /* Prozess: gepinnte horizontale Spur (nur auf großen Bildschirmen) */
    @media (min-width: 960px) and (min-height: 600px) {
      .prozess { height: 360vh; padding: 0; view-timeline-name: --prozess; }
      .prozess-buehne {
        position: sticky; top: 0; height: 100vh; max-width: none;
        display: flex; flex-direction: column; justify-content: center;
        overflow: hidden; container-type: inline-size;
      }
      .prozess-kopf { width: 100%; max-width: var(--breite); margin: 0 auto clamp(12px, 3vh, 36px); padding-inline: var(--rand); }
      .prozess-kopf h2 { font-size: clamp(2.2rem, 1rem + 2.6vw, 4rem); max-width: 22ch; }
      .prozess-spur {
        position: relative; width: max-content; padding: 70px var(--rand) 0;
        animation: spur linear both; animation-timeline: --prozess; animation-range: contain 8% contain 92%;
      }
      .prozess-schritte { display: flex; gap: clamp(40px, 5vw, 96px); }
      .schritt { width: clamp(340px, 36vw, 560px); }
      .schritt h3 { font-size: clamp(2.2rem, 1rem + 2.2vw, 3.6rem); }
      .schritt p { font-size: clamp(1.1rem, 1rem + .3vw, 1.3rem); }
      .schritt-nummer { width: 120px; height: 120px; }
      .schritt-nummer span { font-size: 2.3rem; }
      .schritt:nth-child(even) { margin-top: 60px; }
      .prozess-ranke {
        /* SVG ist ein ersetztes Element: Breite explizit setzen, left/right allein reichen nicht */
        display: block; position: absolute; left: var(--rand); top: 0; height: 60px; width: calc(100% - 2 * var(--rand));
        overflow: visible;
      }
      .prozess-ranke path {
        fill: none; stroke: var(--moos); stroke-width: 4; stroke-linecap: round;
        stroke-dasharray: 1; stroke-dashoffset: 1;
        animation: ranke linear both; animation-timeline: --prozess; animation-range: contain 5% contain 85%;
      }
      .schritt-nummer { animation: bluehen linear both; animation-timeline: --prozess; }
      .schritt:nth-child(1) .schritt-nummer { animation-range: contain 0% contain 8%; }
      .schritt:nth-child(2) .schritt-nummer { animation-range: contain 12% contain 26%; }
      .schritt:nth-child(3) .schritt-nummer { animation-range: contain 34% contain 52%; }
      .schritt:nth-child(4) .schritt-nummer { animation-range: contain 56% contain 76%; }
      @keyframes spur { to { transform: translateX(calc(-100% + 100cqw)); } }
      @keyframes ranke { to { stroke-dashoffset: 0; } }
      @keyframes bluehen { from { transform: scale(.35) rotate(-40deg); } to { transform: scale(1) rotate(0); } }
    }
  }
}

/* ==========================================================================
   Weniger Bewegung
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .wachsen, .hero-inhalt > * { animation: none; }
}

/* ==========================================================================
   Responsiv
   ========================================================================== */
@media (max-width: 1180px) {
  .navi a { padding: .55em .55em; font-size: .92rem; }
}
@media (max-width: 1040px) {
  .navi {
    position: fixed; inset: 0; z-index: -1;
    display: grid; place-items: center;
    background: var(--grund);
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility 0s .35s;
  }
  .menue-offen .navi { opacity: 1; visibility: visible; transition: opacity .35s; }
  .navi ul { flex-direction: column; align-items: center; gap: 6px; }
  .navi a { font-size: clamp(2rem, 8vw, 3rem); font-weight: 700; font-stretch: 84%; padding: .15em .5em; }
  .menue-knopf { display: grid; }
  .konf-raster { grid-template-columns: 1fr; }
  .konf-buehne { position: relative; top: 0; max-width: 620px; width: 100%; margin-inline: auto; }
  .detail-raster { grid-template-columns: 1fr; }
  .detail-bild { position: relative; top: 0; }
  .kontakt-raster { grid-template-columns: 1fr; }
  .zahlen-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .projekt-karte:nth-child(3n + 2) { margin-top: 0; }
  .team-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  :root { --kopf-h: 66px; }
  .kopf { inset: 8px var(--rand) auto; }
  .kopf-innen { min-height: 54px; padding: 6px 6px 6px 12px; gap: 6px; }
  .marke-zeichen { width: 30px; height: 30px; }
  .marke-wort { font-size: 1.1rem; }
  .kopf .jahreszeiten button { width: 34px; height: 34px; }
  .kopf .jahreszeiten button svg { width: 19px; height: 19px; }
  .menue-knopf { width: 40px; height: 40px; }
  .hero-titel { font-size: clamp(3.3rem, 16vw, 4.8rem); max-width: none; line-height: .88; }
  .hero-titel .kursiv { margin-top: .04em; }
  .hero-lead { font-size: 1.06rem; }
  .hero .dachzeile { color: var(--tinte); } /* liegt mobil über dem Sonnen-Blob → mehr Kontrast */
  .knopf { min-height: 50px; padding: 0 1.2em; }
  .saat-text { display: none; }
  .hero-fuss { font-size: .8rem; }
  .wind-hinweis { display: none; }
  .konf-arten { grid-template-columns: 1fr; }
  .konf-option { grid-template-columns: 1fr; padding: 14px 16px; }
  .konf-jahreszeiten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .konf-chip { flex-direction: row; justify-content: center; padding: 12px 8px; }
  .konf-werte { grid-template-columns: 1fr 1fr; gap: 14px; }
  .kontakt-form { grid-template-columns: 1fr; }
  .detail-fakten { grid-template-columns: 1fr 1fr; }
  .team-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 14px; }
  .person h3 { font-size: 1.2rem; }
  .person-rolle { font-size: .85rem; }
  .person-pflanze { font-size: .95rem; }
  .fuss-raster { flex-direction: column; }
  .jahreszeiten-fuss { flex-wrap: wrap; border-radius: 24px; }
}
@media (max-width: 380px) {
  .marke-wort { font-size: 1rem; }
  .kopf .jahreszeiten button { width: 32px; height: 32px; }
  .kopf .jahreszeiten { gap: 0; padding: 2px; }
}