@font-face{font-family:'Fraunces';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/fraunces.woff2) format('woff2')}
@font-face{font-family:'Work Sans';font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/worksans.woff2) format('woff2')}

/* Konzept: ein lebendiges Skizzenbuch. Zeichenpapier als Grund, darauf Buntstift-Zeichnungen,
   die wachsen, sich einfärben und im Wind bewegen. Jede Seite steht auf der roten Linie aus dem Logo. */
:root {
  --korn: url("data:image/webp;base64,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");
  --papier: #F1F4E4;
  --salbei: #E3EBCF;
  --lind: #A9C77E;
  --blatt: #6E9B4F;
  --moos: #2F5D3A;
  --tanne: #1F3A28;
  --text2: #455A49;
  --mohn: #D4472A;
  --mohn-dunkel: #B8391F;
  --ziegel: #A63A33;
  --gold: #F1C94A;
  --weiss: #FBFCF5;
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
  --font-text: 'Work Sans', 'Segoe UI', system-ui, sans-serif;
  --step--1: .92rem;
  --step-0: 1.08rem;
  --step-1: 1.32rem;
  --step-2: clamp(1.6rem, 2.7vw, 2.1rem);
  --step-3: clamp(2.2rem, 5vw, 3.9rem);
  --step-4: clamp(3rem, 7.6vw, 6.6rem);
  --gutter-l: max(20px, env(safe-area-inset-left, 0px));
  --gutter-r: max(20px, env(safe-area-inset-right, 0px));
  --kopf: 76px;
  --rand: clamp(92px, 11vw, 158px);
}
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  background: var(--papier); color: var(--tanne);
  font-family: var(--font-text); font-size: var(--step-0); line-height: 1.6;
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--papier); }
img, svg, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--ziegel); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--mohn-dunkel); text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--mohn); outline-offset: 3px; border-radius: 3px; }
h1:focus, .gesendet:focus { outline: none; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, figure, blockquote, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2, h3, .gross {
  font-family: var(--font-display); font-weight: 500; text-wrap: balance;
  font-variation-settings: 'SOFT' 100; color: var(--moos); letter-spacing: -.015em;
}
h1 { font-size: var(--step-4); line-height: 1; }
h2 { font-size: var(--step-3); line-height: 1.06; }
h3 { font-size: var(--step-2); line-height: 1.16; }
p { text-wrap: pretty; }
strong { font-weight: 600; }
.wrap { max-width: 1280px; margin-inline: auto; padding-left: var(--gutter-l); padding-right: var(--gutter-r); }
.text { max-width: 60ch; display: grid; gap: 1em; align-content: start; min-width: 0; }
.lead { font-size: clamp(1.2rem, 1.9vw, 1.5rem); line-height: 1.42; color: var(--text2); }
.hand { font-size: var(--step--1); color: var(--mohn-dunkel); font-weight: 600; }
.notiz { font-size: var(--step--1); color: var(--text2); margin-top: 6px; text-align: right; }
.band { padding-block: clamp(64px, 9vw, 128px); position: relative; }
.band-salbei { background: var(--salbei); }
.band-moos { background: var(--moos); color: var(--weiss); }
.band-moos h2, .band-moos h3 { color: var(--weiss); }
.band-moos .lead { color: #DDE7CC; }
.stapel { display: grid; gap: clamp(28px, 4.5vw, 56px); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(32px, 6vw, 96px); align-items: center; }
.oben { align-items: start; }
@media (max-width: 860px) { .grid2 { grid-template-columns: minmax(0, 1fr); } }

/* Knopf */
.knopf {
  display: inline-block; background: var(--mohn-dunkel); color: #fff; text-decoration: none; font-weight: 600; font-size: 1.05rem;
  padding: .8em 1.5em; border-radius: 22px 6px 22px 6px; border: 0; cursor: pointer; line-height: 1.25;
  transition: background .15s, border-radius .28s ease;
}
.knopf:hover { background: var(--ziegel); color: #fff; border-radius: 6px 22px 6px 22px; }
.knopf-still { background: transparent; color: var(--moos); box-shadow: inset 0 0 0 2px var(--moos); }
.knopf-still:hover { background: var(--moos); color: var(--weiss); }
.band-moos .knopf-still { color: var(--weiss); box-shadow: inset 0 0 0 2px var(--weiss); }
.band-moos .knopf-still:hover { background: var(--weiss); color: var(--moos); }
.pfeil { font-weight: 600; font-size: 1.1rem; text-decoration: none; color: var(--ziegel); display: inline-flex; gap: .45em; align-items: center; }
.pfeil::after { content: "+"; display: inline-grid; place-items: center; width: 1.5em; height: 1.5em; border-radius: 50%; background: var(--mohn-dunkel); color: #fff; transition: transform .25s; }
.pfeil:hover::after { transform: rotate(90deg) scale(1.15); }

/* Kopf */
.kopf { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--papier); border-bottom: 4px solid var(--ziegel); }
.kopf-in { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; padding-top: 10px; }
.marke { display: flex; align-items: flex-end; gap: 12px; color: var(--moos); text-decoration: none; flex: none; }
.marke:hover { color: var(--moos); }
.marke svg { width: 46px; height: 58px; flex: none; }
.marke-text { padding-bottom: 7px; display: grid; line-height: 1.1; }
.marke b { font-weight: 700; font-size: 1.12rem; letter-spacing: .2em; }
.marke span { font-size: .8rem; font-weight: 600; letter-spacing: .08em; color: #3F6E22; }
.marke i { font-style: normal; color: var(--ziegel); }
.nav { display: flex; align-items: center; gap: clamp(12px, 1.7vw, 24px); padding-bottom: 10px; }
.nav a { color: var(--tanne); text-decoration: none; font-weight: 500; font-size: .97rem; padding-block: 4px; }
.nav a:not(.knopf):hover { color: var(--ziegel); }
.nav a:not(.knopf) { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 8' preserveAspectRatio='none'%3E%3Cpath d='M2 5c18-4 34 3 56 0s40-3 60 0' fill='none' stroke='%23A63A33' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") left bottom / 0 7px no-repeat; transition: background-size .45s ease, color .25s; padding-bottom: 7px; }
.nav a:not(.knopf):hover { background-size: 100% 7px; }
.nav a[aria-current="page"]:not(.knopf) { color: var(--ziegel); background-size: 100% 7px; }
.nav .knopf { color: #fff; padding: .46em 1.05em; font-size: .97rem; border-radius: 15px 4px 15px 4px; }
.nav .knopf:hover { border-radius: 4px 15px 4px 15px; }
.menu-knopf { display: none; }
@media (max-width: 1060px) {
  .menu-knopf { display: inline-block; margin-bottom: 10px; background: transparent; border: 2px solid var(--moos); color: var(--moos); font-weight: 600; border-radius: 999px; padding: .32em 1em; cursor: pointer; }
  .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--papier); flex-direction: column; align-items: flex-start; gap: 6px; border-bottom: 4px solid var(--ziegel); padding: 14px var(--gutter-r) 20px var(--gutter-l); margin-top: 4px; }
  .nav.auf { display: flex; }
  .nav a { font-size: 1.15rem; }
}

/* Fliegende Gäste */
.sprung { position: absolute; left: 12px; top: -60px; z-index: 70; background: var(--moos); color: #fff; padding: .6em 1em; border-radius: 12px 4px 12px 4px; }
.sprung:focus { top: 12px; color: #fff; }

/* Start: Text und Baum nebeneinander, die Blumen nur als schmaler Rand */
.held { position: relative; overflow: clip; border-bottom: 4px solid var(--ziegel); }
.held-in { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); gap: clamp(24px, 4vw, 64px); align-items: end; }
.held-text { display: grid; gap: 22px; justify-items: start; align-self: center; min-width: 0; padding-block: clamp(36px, 5vw, 64px) calc(var(--rand) + 28px); }
.held h1 { max-width: 5.8em; font-size: clamp(3rem, 6.2vw, 5.6rem); }
.buehne h1 { font-size: clamp(2.7rem, 5.2vw, 4.7rem); }
.klein { font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.rund { aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: #FDFDF7; }
.kringel { position: relative; white-space: nowrap; }
.kringel svg { position: absolute; left: -2%; right: -2%; bottom: -.17em; width: 104%; height: .24em; overflow: visible; }
.kringel path { fill: none; stroke: var(--mohn); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 1; animation: zeichnen 1s 2s ease-out both; }
.held .lead { max-width: 23em; }
.held-baum { position: relative; width: 100%; max-width: 500px; justify-self: end; padding-top: clamp(20px, 3vw, 40px); margin-bottom: -1px; }
.held-baum .ringart { width: 100%; height: auto; }
.wiesenrand { position: absolute; left: 0; right: 0; bottom: 0; height: var(--rand); z-index: 2; pointer-events: none; background: url(/assets/zeich/wiese-rand.webp) left bottom / auto 100% repeat-x; }
.ringart { overflow: visible; }
.baum-stapel { position: relative; }
.baum-stapel > svg { display: block; width: 100%; height: auto; }
.baum-stapel > svg.ring-eb, .baum-stapel > svg.bluet-eb { position: absolute; inset: 0; height: 100%; overflow: visible; }
.ring-eb { --a: 460deg; --s: 0deg; -webkit-mask-image: conic-gradient(from var(--von) at var(--cx) var(--cy), transparent 0deg, #000 var(--s), #000 var(--a), transparent calc(var(--a) + 70deg)); mask-image: conic-gradient(from var(--von) at var(--cx) var(--cy), transparent 0deg, #000 var(--s), #000 var(--a), transparent calc(var(--a) + 70deg)); }
.ring-eb path { fill: none; stroke-linejoin: round; }
[data-seite].los .ring-eb { animation: ringwachs 1.8s calc(var(--i) * .17s) cubic-bezier(.4,.1,.3,1) both; }
[data-seite].los .bluete { transform-box: fill-box; transform-origin: center; animation: bluehen .5s calc(2.2s + var(--i) * .1s) cubic-bezier(.3,1.8,.5,1) both; }
[data-seite].los .stamm { transform-box: fill-box; transform-origin: 50% 100%; animation: strecken .55s ease-out both; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 460deg; }
@property --s { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes ringwachs { from { --a: -70deg; --s: 60deg; } 80% { --s: 60deg; } to { --a: 460deg; --s: 0deg; } }
@keyframes zeichnen { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes bluehen { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes strecken { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@media (max-width: 860px) {
  .held-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .held-text { padding-bottom: 8px; }
  .held-baum { max-width: min(76vw, 380px); justify-self: center; }
}

/* Belege */
.belege { background: var(--moos); color: var(--weiss); }
.belege-in { display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 3vw, 40px); padding-block: 28px; }
.belege li { display: grid; gap: 2px; min-width: 0; }
.belege b { font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-weight: 500; font-size: 1.15rem; line-height: 1.25; }
.belege span { font-size: var(--step--1); color: #DDE7CC; line-height: 1.4; }
.zaehler { justify-items: center; text-align: center; padding-inline: clamp(8px, 2vw, 28px); }
.belege .zahl { font-size: clamp(3rem, 5.2vw, 4.6rem); line-height: 1; color: var(--gold); font-variant-numeric: tabular-nums; min-width: 1.25em; }
.zaehler span { color: var(--weiss); font-weight: 500; }
@media (max-width: 900px) { .belege-in { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zaehler { grid-column: 1 / -1; order: -1; } }

/* Ablauf */
.ablauf { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); counter-reset: a; }
.ablauf li { counter-increment: a; display: grid; gap: 8px; align-content: start; border-top: 3px solid var(--ziegel); padding-top: 14px; min-width: 0; }
.ablauf li::before { content: counter(a); font-family: var(--font-display); font-size: 2.2rem; line-height: 1; color: var(--mohn-dunkel); }
.ablauf h3 { font-size: var(--step-1); }
@media (max-width: 760px) { .ablauf { grid-template-columns: minmax(0, 1fr); } }

/* Drei Aufgaben */
.kopfzeile { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 4vw, 64px); align-items: end; }
.kopfzeile h2 { max-width: 16em; }
.aufgaben { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 28px); }
.karte { display: flex; flex-direction: column; gap: 12px; background: var(--weiss); padding: clamp(20px, 2.4vw, 30px); border-radius: 26px 8px 26px 8px; min-width: 0; }
.karte img { width: 170px; }
.karte h3 { font-size: var(--step-1); }
.abschluss { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(20px, 4vw, 56px); align-items: center; }
.abschluss .lead { max-width: 36em; }
@media (max-width: 860px) { .aufgaben { grid-template-columns: minmax(0, 1fr); } .abschluss { grid-template-columns: minmax(0, 1fr); justify-items: start; } .karte img { width: 140px; } }

@media (max-width: 700px) { .kopfzeile { grid-template-columns: minmax(0, 1fr); gap: 4px; } .kopfzeile .lande { justify-self: end; width: 72px; } }

/* Landende Gäste */
.lande { position: relative; width: clamp(84px, 9vw, 124px); flex: none; }
.lande img { width: 100%; display: block; }
.anflug { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: visible; }
.anflug svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.anflug path { fill: none; stroke-linecap: round; }
.anflug .spur { transition: opacity .7s; }
.gast { position: absolute; left: 0; top: 0; will-change: transform; }
.biene { width: 60px; aspect-ratio: 610 / 527; }
.biene img { position: absolute; inset: 0; width: 100%; height: 100%; }
.biene .fl { transform-origin: 52% 37%; animation: schlag .07s linear infinite alternate; }
.sitzt.biene .fl { animation: none; }
@keyframes schlag { from { transform: rotate(-16deg); } to { transform: rotate(13deg); } }
.falter { width: 66px; aspect-ratio: 280 / 197; perspective: 240px; display: flex; }
.falter img { width: 50%; height: 100%; }
.falter .l { transform-origin: 100% 50%; animation: flatterL .3s ease-in-out infinite alternate; }
.falter .r { transform-origin: 0 50%; animation: flatterR .3s ease-in-out infinite alternate; }
.sitzt.falter .l { animation-duration: 2.6s; } .sitzt.falter .r { animation-duration: 2.6s; }
@keyframes flatterL { from { transform: rotateY(4deg); } to { transform: rotateY(66deg); } }
@keyframes flatterR { from { transform: rotateY(-4deg); } to { transform: rotateY(-66deg); } }
.pollen { position: absolute; width: var(--g); height: var(--g); border-radius: 50%; background: #F1C94A; box-shadow: 0 0 0 1px #D9A91F; animation: pollen .7s var(--w) cubic-bezier(.2,1.3,.5,1) both; }
@keyframes pollen { from { transform: translate(0, 0) scale(0); opacity: 0; } to { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 1; } }

/* Galerie */
.galerie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: clamp(200px, 23vw, 330px); grid-auto-flow: dense; gap: clamp(10px, 1.4vw, 18px); }
.galerie figure { overflow: hidden; border-radius: 26px 8px 26px 8px; min-width: 0; }
.galerie figure:nth-child(even) { border-radius: 8px 26px 8px 26px; }
.galerie .breit { grid-column: span 2; }
.galerie .hoch { grid-row: span 2; }
.galerie img[src*="foto-eidechse"] { object-position: 62% 42%; }
.galerie img[src*="foto-holzbiene"] { object-position: 60% 50%; }
.galerie img[src*="foto-schnecke"] { object-position: 42% 50%; }
.galerie img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.galerie figure:hover img { transform: scale(1.04); }
@media (max-width: 620px) { .galerie { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 56vw; } .galerie .breit { grid-column: auto; } .galerie .hoch { grid-row: span 1; } }

/* Porträts */
.bildnis { position: relative; }
.bildnis::before { content: ""; position: absolute; left: -16px; bottom: -16px; width: 62%; height: 62%; background: var(--lind); border-radius: 110px 16px 110px 16px; }
.bildnis img, .bildnis-frei { position: relative; width: 100%; display: block; border-radius: 110px 18px 110px 18px; }
.bildnis::after { content: ""; position: absolute; right: 14px; top: 14px; width: 26px; height: 26px; border-radius: 50%; background: var(--mohn); box-shadow: 0 0 0 4px var(--weiss); }
.bildnis-frei { border-radius: 60px 14px 60px 14px; }
@media (max-width: 700px) { .bildnis img, .bildnis::before { border-radius: 64px 12px 64px 12px; } }

/* Satz mit Tieren */
.zuhause { font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-weight: 500; color: var(--moos); font-size: clamp(1.9rem, 4.6vw, 3.7rem); line-height: 1.24; letter-spacing: -.012em; max-width: 21em; }
.ein { display: inline-block; height: 1.12em; width: auto; vertical-align: -.26em; margin-inline: .06em; transition: transform .3s cubic-bezier(.3,1.8,.5,1); }
.ein:hover { transform: rotate(-6deg) scale(1.2); }
.kriechweg { position: relative; height: 54px; margin-top: 44px; border-bottom: 3px solid var(--ziegel); }
.kriecher { position: absolute; bottom: -3px; left: 0; width: clamp(62px, 8vw, 96px); will-change: transform; }

/* Zwei Türen */
.tueren { display: grid; gap: clamp(56px, 8vw, 120px); }
.tuer { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; text-decoration: none; color: inherit; }
.tuer:nth-child(even) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); }
.tuer:nth-child(even) .farbe { order: 2; }
.tuer:hover { color: inherit; }
.tuer .farbe { transition: transform .5s cubic-bezier(.3,1.3,.5,1); }
.tuer:hover .farbe { transform: translateY(-4px); }
@media (max-width: 760px) { .tuer, .tuer:nth-child(even) { grid-template-columns: minmax(0, 1fr); } .tuer:nth-child(even) .farbe { order: 0; } }

/* Bleistift zu Buntstift */
.farbe { position: relative; --p: 140; display: block; }
.farbe img { width: 100%; }
.farbe .blei { filter: grayscale(1) contrast(1.15) brightness(1.04); opacity: .85; }
.bunt { position: absolute; inset: 0; border-radius: inherit; -webkit-mask-image: linear-gradient(112deg, #000 calc(var(--p) * 1% - 22%), transparent calc(var(--p) * 1% + 2%)); mask-image: linear-gradient(112deg, #000 calc(var(--p) * 1% - 22%), transparent calc(var(--p) * 1% + 2%)); }
.bunt canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.farbe.fertig .blei { visibility: hidden; }
.farbe.fertig .bunt { -webkit-mask-image: none; mask-image: none; }

/* Pläne */
.plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 300px); gap: clamp(20px, 3vw, 44px); align-items: start; }
.plan-blatt, .tuer .farbe { min-width: 0; background: #FDFDF7; border-radius: 22px 6px 22px 6px; box-shadow: 0 1px 2px rgba(31,58,40,.1), 0 14px 32px -20px rgba(31,58,40,.4); }
.punkt { position: absolute; z-index: 2; width: 44px; height: 44px; margin: -22px 0 0 -22px; padding: 0; border: 0; background: none; cursor: pointer; }
.punkt::before { content: ""; position: absolute; inset: 8px; border-radius: 50%; background: var(--mohn); border: 3px solid var(--weiss); box-shadow: 0 1px 4px rgba(31,58,40,.35); transition: transform .15s; }
.punkt:hover::before { transform: scale(1.18); }
.punkt[aria-pressed="true"]::before { background: var(--gold); border-color: var(--mohn-dunkel); transform: scale(1.18); }
.plan-notiz { display: grid; gap: 8px; position: sticky; top: 120px; padding-top: 6px; min-height: 12em; align-content: start; }
.plan-notiz h3 { font-size: var(--step-1); }
.plan-notiz p:not(.hand) { color: var(--text2); }
.plan-hoch { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.plan-hoch .plan-blatt { max-width: 620px; }
@media (max-width: 860px) {
  .plan, .plan-hoch { grid-template-columns: minmax(0, 1fr); }
  .plan-notiz { position: static; min-height: 9.5em; }
}

/* Sylke: hüfthoch aus der gemalten Krone heraus */
.sylke { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.sylke-text { display: grid; gap: 20px; justify-items: start; min-width: 0; }
.portrait { width: 100%; max-width: 500px; justify-self: center; }
.portrait svg { width: 100%; height: auto; overflow: visible; }
@media (max-width: 860px) { .sylke { grid-template-columns: minmax(0, 1fr); } .portrait { max-width: 400px; } }

/* Seitenköpfe */
.buehne { border-bottom: 4px solid var(--ziegel); overflow: clip; position: relative; }
.buehne-in { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(24px, 4vw, 56px); align-items: center; padding-block: clamp(28px, 4vw, 56px); }
.buehne-in.nah { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.buehne-in.fuss-auf { align-items: end; padding-bottom: 0; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); }
.buehne-text { display: grid; gap: 20px; justify-items: start; min-width: 0; padding-block: clamp(16px, 3vw, 40px); }
.fuss-auf .buehne-text { align-self: center; padding-bottom: clamp(40px, 6vw, 80px); }
@media (max-width: 860px) { .buehne-in, .buehne-in.fuss-auf, .buehne-in.nah { grid-template-columns: minmax(0, 1fr); } }

/* Weg der Schritte */
.weg-rahmen { position: relative; }
.weg-bahn { position: relative; display: grid; gap: clamp(40px, 6vw, 80px); }
.weg-svg { position: absolute; left: 50%; top: 0; height: 100%; width: 120px; margin-left: -60px; overflow: visible; }
.schritt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 12vw, 180px); align-items: center; position: relative; }
.schritt .inhalt { display: grid; gap: 6px; min-width: 0; }
.schritt .nr { font-family: var(--font-display); font-size: 2.6rem; line-height: 1; color: var(--mohn-dunkel); font-weight: 700; }
.schritt img { width: min(100%, 300px); }
.schritt:nth-child(odd) img { justify-self: start; }
.schritt:nth-child(even) .inhalt { order: 2; }
.schritt:nth-child(even) img { justify-self: end; }
@media (max-width: 760px) {
  .weg-svg { left: 0; margin-left: -24px; }
  .schritt, .schritt:nth-child(even) { grid-template-columns: minmax(0, 1fr); padding-left: 32px; gap: 10px; }
  .schritt:nth-child(even) .inhalt { order: 0; }
  .schritt img, .schritt:nth-child(odd) img, .schritt:nth-child(even) img { width: min(60%, 200px); justify-self: start; order: -1; }
}

/* Kieselsteine */
.kiesel { display: flex; flex-wrap: wrap; gap: 12px; }
.kiesel li { background: var(--weiss); color: var(--moos); padding: .6em 1.15em; font-weight: 500; border-radius: 16px 5px 16px 5px; transition: transform .3s cubic-bezier(.3,1.8,.5,1), background .2s, color .2s; cursor: default; }
.kiesel li:nth-child(even) { border-radius: 5px 16px 5px 16px; }
.kiesel li:hover { background: var(--mohn-dunkel); color: #fff; transform: translateY(-5px) rotate(-3deg); }

/* Jahreslauf */
/* Lebensräume */
.raeume { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(10px, 2vw, 24px); }
.raum { grid-column: span 2; display: grid; gap: 6px; justify-items: center; text-align: center; min-width: 0; background: none; border: 0; padding: 0; }
.raum img { width: 100%; transition: transform .45s cubic-bezier(.3,1.5,.5,1); }
.raum:hover img { transform: scale(1.09) rotate(3deg); }
.raum:nth-child(even) img { transform: rotate(-2deg); }
.raum:nth-child(even):hover img { transform: scale(1.09) rotate(-5deg); }
.raum:nth-child(n+4) { margin-top: -6%; }
.raum figcaption { font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-size: 1.15rem; color: var(--moos); line-height: 1.2; }
@media (max-width: 620px) { .raum { grid-column: span 3; } .raum:nth-child(n+4) { margin-top: 0; }  }

.denken { display: grid; gap: clamp(56px, 8vw, 112px); }
.denken article { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.denken article:nth-child(even) .denk-bild { order: 2; }
.denk-bild { display: grid; place-items: center; aspect-ratio: 1 / .86; padding: 7%; background: var(--papier); border-radius: 58% 42% 54% 46% / 47% 56% 44% 53%; }
.denken article:nth-child(2) .denk-bild { border-radius: 44% 56% 46% 54% / 56% 45% 55% 44%; background: var(--weiss); }
.denken article:nth-child(3) .denk-bild { border-radius: 52% 48% 40% 60% / 44% 54% 46% 56%; }
.denk-bild img { width: 100%; height: 100%; object-fit: contain; }
.denk-text { display: grid; gap: 18px; }
.denk-text h3 { font-size: clamp(1.9rem, 3.5vw, 3rem); line-height: 1.1; }
.denk-text p { font-size: clamp(1.08rem, 1.3vw, 1.2rem); line-height: 1.68; }
@media (max-width: 860px) {
  .denken article { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .denken article:nth-child(even) .denk-bild { order: 0; }
}

.wild { position: relative; overflow: clip; text-align: center; padding-top: clamp(64px, 9vw, 120px); padding-bottom: 24px; }
.wild h2 { font-size: var(--step-4); max-width: 11em; margin-inline: auto; }
.wild .wrap { position: relative; z-index: 2; display: grid; gap: 26px; justify-items: center; }

/* Leistungen */
.phasen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 60px); align-items: start; }
.phase { display: grid; gap: 12px; align-content: start; min-width: 0; }
.wachsring { width: 100%; max-width: 230px; height: auto; overflow: visible; }
.wachsring .wr { stroke-dasharray: 1; stroke-dashoffset: 1; }
.gewachsen .wr, html:not(.js) .wr { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s calc(var(--i) * .16s) ease-out; }
.phase h3 { font-size: var(--step-3); }
.plus { display: grid; gap: 10px; }
.plus > li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 6px; }
.plus > li::before { content: "+"; color: var(--mohn); font-weight: 700; font-size: 1.25em; line-height: 1.25; }
.bedarf { font-weight: 600; color: var(--mohn-dunkel); margin-top: 10px; }
.zeichentisch { width: 100%; }
@media (max-width: 860px) { .phasen { grid-template-columns: minmax(0, 1fr); } .wachsring { max-width: 170px; } }

.fragen { display: grid; border-top: 2px solid var(--moos); }
.fragen details { border-bottom: 1px solid #9FB28F; }
.fragen summary { cursor: pointer; font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-size: var(--step-1); color: var(--moos); padding-block: 15px; }
.fragen details p { padding-bottom: 16px; max-width: 60ch; }

/* Stationen */
.stationen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.6vw, 36px); }
.station { display: grid; gap: 8px; align-content: start; min-width: 0; }
.station .wachsring { max-width: 150px; }
.station b { font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-weight: 500; color: var(--moos); font-size: var(--step-1); line-height: 1.2; }
@media (max-width: 860px) { .stationen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Kontakt */
.feld { display: grid; gap: 6px; }
.feld label, fieldset legend { font-weight: 600; }
.feld input, .feld textarea { width: 100%; padding: .65em .8em; background: var(--weiss); border: 1.5px solid #8FA381; border-radius: 12px; font-size: 1rem; }
.feld input:focus, .feld textarea:focus { outline: 3px solid var(--mohn); outline-offset: 1px; border-color: var(--moos); }
fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; min-width: 0; }
legend { padding: 0; }
.wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.wahl label { display: inline-flex; gap: 7px; align-items: center; padding: .36em .9em; border: 1.5px solid #8FA381; border-radius: 999px; background: var(--weiss); cursor: pointer; }
.wahl input { accent-color: var(--mohn-dunkel); margin: 0; }
.wahl label:has(input:checked) { border-color: var(--mohn-dunkel); box-shadow: inset 0 0 0 1px var(--mohn-dunkel); }
.formular { display: grid; gap: 18px; }
.zustimmung { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: var(--step--1); color: var(--text2); }
.zustimmung input { margin: 4px 0 0; accent-color: var(--mohn-dunkel); }
.gesendet { background: var(--salbei); border-radius: 12px; padding: 12px 16px; }
.wege-kontakt { display: grid; gap: 20px; }
.wege-kontakt dt { font-size: var(--step--1); font-weight: 600; color: var(--mohn-dunkel); }
.wege-kontakt dd { font-size: clamp(.98rem, 4.3vw, 1.35rem); }
.kopieren { margin-left: 8px; font-size: .85rem; background: none; border: 1px solid #8FA381; border-radius: 999px; padding: .1em .7em; cursor: pointer; color: var(--tanne); vertical-align: middle; }
.luecke { background: #FBE3B4; padding: 0 .3em; border-radius: 4px; }

/* Fuß mit schmalem Blumenrand */
.wiese-ende { position: relative; height: calc(var(--rand) + 16px); overflow: clip; }
.fuss { background: var(--moos); color: var(--weiss); border-top: 4px solid var(--ziegel); padding-block: 44px 60px; position: relative; }
.fuss-in { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.fuss h2 { font-size: var(--step-1); margin-bottom: 8px; color: var(--weiss); }
.fuss ul { display: grid; gap: 4px; }
.fuss a { color: var(--weiss); }
.fuss a:hover { color: var(--gold); }
.fuss .marke, .fuss .marke:hover { color: var(--weiss); }
.fuss .marke span { color: #CFE0A4; }
.fuss .marke i { color: #FF9F85; }
.dreiklang { font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-size: 1.2rem; color: #DDE7CC; margin-top: 12px; }
@media (max-width: 760px) { .fuss-in { grid-template-columns: minmax(0, 1fr); } }

/* Wachsen beim Hereinscrollen, nur Zeichnungen, nie Text */
.warten { opacity: 0; transform: translateY(26px) scale(.86) rotate(-3deg); }
.da { opacity: 1; transform: none; transition: opacity .6s ease-out, transform .75s cubic-bezier(.3,1.5,.5,1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ring-eb { -webkit-mask-image: none; mask-image: none; }
  .wr { stroke-dashoffset: 0 !important; }
}


/* Herausforderung und Lösung */
.pl { display: grid; background: var(--weiss); border-radius: 34px 10px 34px 10px; padding: clamp(18px, 3vw, 40px) clamp(18px, 3.4vw, 48px); }
.pl-kopf, .pl-reihe { display: grid; grid-template-columns: 112px minmax(0, 1fr) 76px minmax(0, .9fr); gap: clamp(14px, 2vw, 26px); align-items: center; }
.pl-kopf { padding-bottom: 12px; font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-size: 1.05rem; color: var(--text2); }
.pl-kopf span:first-child { grid-column: 2; }
.pl-kopf span:last-child { grid-column: 4; color: var(--mohn-dunkel); }
.pl-reihe { padding-block: clamp(16px, 2vw, 24px); border-top: 1px solid var(--salbei); }
.pl-reihe img { width: 100%; }
.pl-problem { display: grid; gap: 6px; }
.pl-problem h3 { font-size: var(--step-1); }
.pl-problem p { color: var(--text2); }
.pl-pfeil { width: 100%; overflow: visible; }
.pl-pfeil path { fill: none; stroke: var(--mohn); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 130; stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease; }
.pl-loesung { background: var(--salbei); color: var(--tanne); font-weight: 500; padding: 14px 18px; border-radius: 20px 6px 20px 6px; transition: opacity .7s ease .35s, transform .7s ease .35s; }
.pl-reihe.wart .pl-pfeil path { stroke-dashoffset: 130; }
.pl-reihe.wart .pl-loesung { opacity: 0; transform: translateX(-14px); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
@media (max-width: 860px) {
  .pl-kopf { display: none; }
  .pl-reihe { grid-template-columns: 76px minmax(0, 1fr); }
  .pl-reihe:first-of-type { border-top: 0; }
  .pl-pfeil { grid-column: 2; width: 54px; transform: rotate(90deg); margin-block: 8px; }
  .pl-loesung { grid-column: 1 / -1; }
  .pl-reihe.wart .pl-loesung { transform: translateY(-10px); }
}

/* Landen ohne eigene Blume */
.lande-frei { position: relative; }

/* Schnecke über der Galerie */
.kriecher { position: relative; width: 100%; justify-self: stretch; height: 48px; margin-bottom: -26px; z-index: 2; pointer-events: none; --x: 0; }
.kriecher img { position: absolute; bottom: 0; left: 0; width: clamp(66px, 7vw, 92px); will-change: transform; }
.schleim { position: absolute; left: 10px; bottom: 1px; height: 2px; width: 100%; transform-origin: 0 50%; transform: scaleX(0); background: repeating-linear-gradient(90deg, rgba(120,140,130,.5) 0 7px, transparent 7px 13px); border-radius: 2px; }

/* Schwebende Knöpfe */
.schweb { position: fixed; right: max(16px, env(safe-area-inset-right, 0px)); bottom: max(16px, env(safe-area-inset-bottom, 0px)); z-index: 45; display: grid; gap: 10px; justify-items: center; }
.schweb-k { width: 52px; height: 52px; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; transition: transform .35s cubic-bezier(.3,1.5,.5,1), background .25s, opacity .35s, visibility .35s; }
.schweb-k:hover { transform: translateY(-3px) rotate(-4deg); }
.wa { background: var(--moos); color: var(--weiss); border-radius: 58% 42% 52% 48% / 46% 56% 44% 54%; box-shadow: 0 0 0 2px rgba(251,252,245,.9), 0 6px 18px rgba(31,58,40,.24); }
.wa:hover { background: var(--blatt); }
.wa svg { width: 25px; height: 25px; }
.hoch { background: var(--papier); border-radius: 50%; box-shadow: 0 6px 18px rgba(31,58,40,.16); }
.hoch svg { width: 100%; height: 100%; overflow: visible; }
.hoch path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ring-spur { stroke: var(--lind); stroke-width: 1.5; }
.ring-fort { stroke: var(--moos); stroke-width: 2.5; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hoch .stiel { stroke: var(--moos); stroke-width: 2.4; }
.hoch .blatt { fill: var(--blatt); stroke: none; }
.hoch.weg { opacity: 0; visibility: hidden; transform: translateY(8px); }

/* Naturstil: weiche Kanten, Papier, feine Typografie */
html { scrollbar-color: var(--lind) var(--papier); }
::selection { background: var(--lind); color: var(--tanne); }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
body, .band-salbei, .band-moos, .belege, .fuss { background-image: var(--korn); }
.band-salbei, .band-moos { z-index: 1; --welle: var(--salbei); }
.band-moos { --welle: var(--moos); }
.band-salbei::before, .band-moos::before, .band-salbei::after, .band-moos::after { content: ""; position: absolute; left: 0; right: 0; height: clamp(16px, 2.8vw, 38px); background: var(--welle); pointer-events: none; }
.band-salbei::before, .band-moos::before { bottom: calc(100% - 1px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V27C150 9 290 7 470 19s300 19 480 6 300-22 490-7v22Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40V27C150 9 290 7 470 19s300 19 480 6 300-22 490-7v22Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
.band-salbei::after, .band-moos::after { top: calc(100% - 1px); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0v12c180 19 330 24 520 11s310-20 500-8 280 15 420 2V0Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 40' preserveAspectRatio='none'%3E%3Cpath d='M0 0v12c180 19 330 24 520 11s310-20 500-8 280 15 420 2V0Z'/%3E%3C/svg%3E") 0 0 / 100% 100%; }
section:nth-of-type(even).band-salbei::before { transform: scaleX(-1); }
.galerie figure { transition: opacity .8s ease, transform .8s ease; }
.galerie figure.wart { opacity: 0; transform: translateY(18px); }
.galerie figure:nth-child(3n+2) { transition-delay: .12s; }
.galerie figure:nth-child(3n) { transition-delay: .24s; }
.fuss { overflow: clip; }
.fuss-ring { position: absolute; right: -70px; bottom: -130px; width: 440px; height: 440px; opacity: .08; pointer-events: none; }
.fuss-in { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .pl-reihe.wart .pl-loesung, .galerie figure.wart { opacity: 1; transform: none; }
  .pl-reihe.wart .pl-pfeil path { stroke-dashoffset: 0; }
}


/* Ein Jahr im Garten: Farbflächen statt Scroll-Bühne */
.jahr { padding-block: clamp(56px, 7vw, 96px) clamp(64px, 8vw, 110px); }
.jahr-kopf { margin-bottom: clamp(22px, 3vw, 36px); }
.jr { --hoehe: clamp(520px, 76vh, 680px); display: flex; gap: clamp(8px, .9vw, 12px); height: var(--hoehe); max-width: 1680px; margin-inline: auto; padding-inline: max(var(--gutter-l), 2.4vw) max(var(--gutter-r), 2.4vw); }
.jp { contain: layout paint; --c: #D8EC8E; --t: #1F3A28; position: relative; flex: 1 1 0; min-width: 0; overflow: hidden; color: var(--t); background: var(--c); border-radius: 30px; transition: flex .75s cubic-bezier(.3,.9,.3,1), opacity .8s ease var(--d), transform .8s cubic-bezier(.2,.9,.3,1) var(--d); }
.jp[data-z="1"] { --c: #FFD24A; }
.jp[data-z="2"] { --c: #EE6C3A; --t: #16261B; }
.jp[data-z="3"] { --c: #CFE8EE; }
.jp.an { flex-grow: 6.2; }
.js .jr:not(.da) .jp { opacity: 0; transform: translateY(34px); }
.jp-h { position: static; font: inherit; color: var(--t); }
.jp-tab { position: absolute; inset: 0; z-index: 3; display: flex; align-items: flex-start; justify-content: flex-start; width: 100%; padding: clamp(22px, 2.4vw, 34px); background: none; border: 0; color: inherit; text-align: left; cursor: pointer; }
.jp-tab span { display: inline-block; font-family: var(--font-display); font-variation-settings: 'SOFT' 100; font-weight: 500; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1; writing-mode: vertical-rl; }
.jp-tab:focus-visible { outline: 3px solid var(--tanne); outline-offset: -6px; border-radius: 30px; }
.jp-plus { display: none; }
.jp.an .jp-tab { inset: 0 auto auto 0; width: auto; cursor: default; }
.jp.an .jp-tab span { writing-mode: horizontal-tb; font-size: clamp(3rem, 5.4vw, 5rem); letter-spacing: -.015em; animation: jpEin .6s ease both; }
.jp-flaeche, .jp-innen { position: absolute; inset: 0; }
.jp-text { position: absolute; z-index: 2; left: clamp(22px, 2.4vw, 34px); top: clamp(96px, 10vw, 136px); bottom: clamp(20px, 2.2vw, 30px); width: 37%; min-width: 250px; display: flex; flex-direction: column; gap: 16px; opacity: 0; visibility: hidden; transition: opacity .25s, visibility .25s; }
.jp.an .jp-text { opacity: 1; visibility: visible; transition: opacity .55s ease .3s; }
.jp-text p { font-size: clamp(1.06rem, 1.35vw, 1.28rem); line-height: 1.5; font-weight: 500; }
.jp-gaeste { margin-top: auto; display: flex; align-items: flex-end; gap: 12px; }
.jp-gaeste img { height: clamp(64px, 7.4vw, 96px); width: auto; max-width: 42%; object-fit: contain; }
.jp.an .jp-gaeste img { animation: jpGast .6s cubic-bezier(.3,1.5,.5,1) .45s both; }
.jp.an .jp-gaeste img:nth-child(2) { animation-delay: .57s; }
.jp.an .jp-gaeste img:nth-child(3) { animation-delay: .69s; }
.jp-baum { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; aspect-ratio: 1; transform: translateX(-50%) scale(.62); transform-origin: 50% 92%; transition: left .75s cubic-bezier(.3,.9,.3,1), transform .75s cubic-bezier(.3,.9,.3,1); }
.jp:not(.an):hover .jp-baum { transform: translateX(-50%) scale(.68); }
.jp.an .jp-baum { left: 69%; transform: translateX(-50%) scale(.9); }
.jp-regen { position: absolute; left: 0; top: 0; z-index: 2; pointer-events: none; }
@keyframes jpEin { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes jpGast { from { opacity: 0; transform: translateY(14px) scale(.8); } to { opacity: 1; transform: none; } }
@media (max-width: 1040px) {
  .jr { display: grid; height: auto; gap: 8px; padding-inline: var(--gutter-l) var(--gutter-r); }
  .jp { border-radius: 24px; }
  .jp-tab { position: relative; inset: auto; display: flex; justify-content: space-between; align-items: center; padding: 20px 22px; }
  .jp.an .jp-tab { position: relative; inset: auto; width: 100%; cursor: pointer; }
  .jp-tab span, .jp.an .jp-tab span { writing-mode: horizontal-tb; font-size: clamp(1.6rem, 6.4vw, 2.3rem); animation: none; }
  .jp-plus { display: block; width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; transition: transform .4s; }
  .jp.an .jp-plus { transform: rotate(45deg); }
  .jp-flaeche { position: static; display: grid; grid-template-rows: 0fr; transition: grid-template-rows .55s ease; }
  .jp.an .jp-flaeche { grid-template-rows: 1fr; }
  .jp-innen { position: relative; inset: auto; min-height: 0; overflow: hidden; }
  .jp-text, .jp.an .jp-text { position: relative; left: auto; top: auto; bottom: auto; width: auto; min-width: 0; padding: 0 22px; }
  .jp-gaeste { margin-top: 2px; }
  .jp-baum, .jp.an .jp-baum, .jp:not(.an):hover .jp-baum { position: relative; left: auto; display: block; height: auto; width: min(88%, 460px); margin: 0 auto -2px; transform: none; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  .jp, .jp-baum, .jp-text, .jp-flaeche { transition: none; }
  .jp.an .jp-tab span, .jp.an .jp-gaeste img { animation: none; }
  .js .jr:not(.da) .jp { opacity: 1; transform: none; }
}


/* Dezente Planzeichnung im Hintergrund */
.deko-feld { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.deko { position: absolute; width: clamp(280px, 34vw, 560px); opacity: .24; max-width: none; }
.band-salbei .deko { opacity: .3; }
.deko.re { right: -4vw; } .deko.li { left: -4vw; } .deko.mi { left: 50%; translate: -50% 0; }
.deko.ob { top: clamp(10px, 2vw, 34px); } .deko.un { bottom: clamp(8px, 1.6vw, 26px); }
.deko.klein { width: clamp(200px, 22vw, 330px); right: clamp(14px, 3vw, 54px); opacity: .5; }
.deko-masskette { width: clamp(320px, 60vw, 860px); opacity: .42; }
.band > .wrap, .jahr > .wrap, .jahr > .jr, .wild > .wrap { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .deko { width: 240px; opacity: .16; }
  .deko.klein { width: 170px; opacity: .36; }
  .deko-masskette { width: 300px; opacity: .3; }
}


/* Kleine Zeile über der Hauptüberschrift */
.ober { display: block; font-family: var(--font-text); font-weight: 600; font-size: clamp(.98rem, 1.3vw, 1.12rem); line-height: 1.3; letter-spacing: .01em; color: var(--text2); margin-bottom: .7em; }
.fuss-ort { max-width: 24em; margin-top: 8px; font-size: var(--step--1); color: #DDE7CC; }


/* Formular: Honigtopf und Rückmeldung, Rechtstexte */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.gesendet.fehler { background: #FBE3B4; color: var(--tanne); }
.text h2 { font-size: var(--step-1); margin-top: .9em; }
.text h2:first-of-type { margin-top: .4em; }
button[disabled] { opacity: .6; cursor: progress; }

.gebiet { margin-top: 14px; font-size: var(--step--1); color: #DDE7CC; max-width: 30em; }