/* Köchlin-Kindertagesstätte · vierte Idee „Wurzeln“
   Grammatik „Papierlandschaft“: Der Grund ist der sonnige Wald. Die Inhalte liegen auf Papierhügeln, deren
   Oberkante von Hand geschnitten ist und die wie Landschaftsschichten über den Wald steigen. Zwischen den Hügeln
   öffnet sich der Wald (Startbild, „Ihr Tag bei uns“, Einblicke), am Ende liegt Steinen im Abendlicht.
   Roter Faden: Fingerfarben-Hände aus dem Logo (Stempel an den Überschriften, Menü, Motto).
   Nie position auf .cw-stage setzen, die Engine braucht dort sticky. */

@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-latin.woff2") format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-italic-latin.woff2") format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }
@font-face { font-family: "Caveat"; src: url("fonts/caveat-latin.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }

:root {
  --cw-canvas: #F5EFE3;
  --cw-surface: #FBF8F1;
  --cw-ink: #1F2A24;
  --cw-ink-soft: #4C5850;
  --cw-accent: #2F5B35;
  --cw-accent-ink: #FBF8F1;
  --cw-font-display: "Fraunces", Georgia, serif;
  --cw-font-text: "Figtree", system-ui, sans-serif;
  --hand: "Caveat", "Segoe Print", cursive;

  --papier: #F5EFE3;
  --papier-b: #EEE6D4;
  --papier-hell: #FBF8F1;
  --marine: #22305F;
  --wald: #2F5B35;
  --wald-tief: #23462A;
  --nacht: #1F2C3F;
  --linie: rgba(40, 36, 26, 0.13);
  --linie-stark: rgba(40, 36, 26, 0.24);

  /* Originalfarben des Logos (Fingerfarbe) und ruhige Naturtöne (Menü-Hände, Bänder) */
  --l-rot: #EC1E22; --l-orange: #F58523; --l-gelb: #F8E923; --l-gruen: #73B84B; --l-blau: #2D3091;
  --rot: #C0533A; --orange: #D8893C; --gelb: #E2B548; --gruen: #789459; --blau: #3E4E8A;
  --gruen-t: #4A6332; --blau-t: #34437A;
  /* Tonpapier fürs Mobile (wie in „Lichtspiel“) */
  --ton-rot: #D9483A; --ton-orange: #EE8A3A; --ton-gelb: #F1CF3E; --ton-gruen: #7DB052; --ton-blau: #3F4FA0;

  --ar: 1.7917; /* Waldplatten 2752 × 1536 */
  --rand: max(var(--cw-gutter), calc((100vw - 1680px) / 2));
  --wh: clamp(56px, 7vw, 120px); /* Höhe der Hügelkante */
  --schatten-1: 0 1px 2px rgba(52, 44, 28, 0.06), 0 10px 24px -12px rgba(52, 44, 28, 0.2);
  --schatten-2: 0 2px 4px rgba(52, 44, 28, 0.06), 0 26px 52px -26px rgba(52, 44, 28, 0.38);
}

html { background: var(--papier); }
body { background: var(--papier); color: var(--cw-ink); overflow-x: clip; }
.ww-unsichtbar { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ww-sprung { position: fixed; left: 1rem; top: -4rem; z-index: 100; background: var(--wald); color: #fff; padding: 0.7rem 1rem; border-radius: 12px; }
.ww-sprung:focus { top: 1rem; }
.ww-symbole { position: absolute; width: 0; height: 0; overflow: hidden; }
.ww-i { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ww-rahmen { width: min(100% - 2 * var(--cw-gutter), 1320px); margin-inline: auto; }
:focus-visible { outline: 3px solid var(--wald); outline-offset: 3px; }
a { color: var(--wald); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

/* Überschriften mit Fingerfarben-Stempel */
.ww-h2 { margin: 0; font-family: var(--cw-font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: clamp(2.1rem, 1.3rem + 2.6vw, 3.9rem); line-height: 1.02; letter-spacing: -0.025em; color: var(--marine); text-wrap: balance; }
.ww-h3 { margin: 0; font-family: var(--cw-font-display); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.7rem); letter-spacing: -0.01em; color: var(--marine); }
.ww-lede { margin: 1rem 0 0; max-width: 56ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.22rem); line-height: 1.6; color: var(--cw-ink-soft); text-wrap: pretty; }
.ww-klein { font-size: 0.92rem; color: var(--cw-ink-soft); }
.ww-link { display: inline-flex; align-items: center; gap: 0.4rem; font-weight: 700; text-decoration: none; }
.ww-link:hover { text-decoration: underline; }
.stempel { display: inline-block; width: 0.92em; height: 0.92em; object-fit: contain; margin: 0 0.3em -0.04em -0.05em;  rotate: -14deg; 
  vertical-align: baseline; transform-origin: 50% 70%; }
.js .stempel { opacity: 0; transform: scale(1.5) translateY(-6px); transition: opacity 260ms ease-out, transform 520ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.js .ist-gedrueckt .stempel, .js .stempel.ist-gedrueckt { opacity: 1; transform: none; }
.punkt-hand { width: 1.5rem; height: 1.5rem; object-fit: contain; rotate: -10deg; flex: none; }

/* Knöpfe */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; min-height: 48px; padding: 0 1.35rem; border-radius: 999px;
  font-weight: 700; font-size: 0.98rem; text-decoration: none; white-space: nowrap; border: 0; cursor: pointer;
  transition: transform 140ms var(--cw-ease-out), background-color 160ms var(--cw-ease-out), box-shadow 160ms var(--cw-ease-out); }
.knopf:active { transform: scale(0.97); }
.knopf--wald { background: var(--wald); color: var(--papier-hell); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 10px 22px -12px rgba(35, 70, 42, 0.8); }
.knopf--wald:hover { background: var(--wald-tief); }
.knopf--hell { background: rgba(251, 248, 241, 0.88); color: var(--cw-ink); box-shadow: inset 0 0 0 1.5px rgba(47, 91, 53, 0.32), 0 10px 22px -16px rgba(30, 40, 30, 0.55); }
.knopf--hell:hover { background: #fff; }
.knopf--leise { background: var(--papier-hell); color: var(--cw-ink); box-shadow: inset 0 0 0 1px var(--linie-stark); min-height: 44px; font-size: 0.92rem; }
.knopf--leise:hover { background: #fff; }
.knopf .ww-i { width: 1.05em; height: 1.05em; }

/* ------------------------------------------------------------------ Kopf -- */
.kopf { position: fixed; inset: 0 0 auto; z-index: 60; display: flex; align-items: center; gap: 1rem; padding: clamp(12px, 1.6vw, 22px) var(--rand) 0; pointer-events: none; }
.kopf > * { pointer-events: auto; }
.marke { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; color: var(--cw-ink); margin-right: auto;
  padding: 0.45rem 0.9rem 0.45rem 0.55rem; border-radius: 22px; background: rgba(251, 248, 241, 0.78);
  backdrop-filter: blur(14px) saturate(1.15); -webkit-backdrop-filter: blur(14px) saturate(1.15);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55), 0 10px 30px -18px rgba(30, 40, 30, 0.45); }
.marke img { width: clamp(64px, 6vw, 88px); height: auto; display: block; }
.marke__wort { display: grid; line-height: 1.12; }
.marke__wort b { font-family: var(--cw-font-display); font-weight: 600; font-size: clamp(1rem, 0.9rem + 0.35vw, 1.2rem); letter-spacing: -0.01em; color: var(--marine); }
.marke__wort span { font-size: 0.8rem; font-weight: 600; color: var(--cw-ink-soft); }
.leiste { display: flex; align-items: center; gap: 0.25rem; padding: 0.4rem; border-radius: 999px; background: rgba(251, 248, 241, 0.66);
  backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 14px 34px -20px rgba(30, 40, 30, 0.5); }
.leiste__links { display: flex; list-style: none; margin: 0; padding: 0 0.4rem; gap: 0.1rem; }
.leiste__links a { display: block; padding: 0.6rem 0.85rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; color: var(--cw-ink); text-decoration: none; transition: background-color 160ms var(--cw-ease-out); }
.leiste__links a:hover { background: rgba(47, 91, 53, 0.09); }
.menueknopf { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0 1.05rem 0 0.8rem; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--papier-hell); color: var(--cw-ink); font: 700 0.95rem var(--cw-font-text); box-shadow: inset 0 0 0 1px var(--linie); }
.menueknopf:hover { background: #fff; }
.menueknopf .haende { display: inline-flex; gap: 1px; }
.menueknopf .hand { width: 0.95rem; height: 0.95rem; fill: currentColor; }
.menueknopf .hand:nth-child(1) { rotate: -14deg; } .menueknopf .hand:nth-child(2) { rotate: 8deg; translate: 0 -2px; } .menueknopf .hand:nth-child(3) { rotate: 18deg; }
@media (max-width: 1180px) { .leiste__links { display: none; } }
@media (max-width: 620px) {
  .marke__wort span { display: none; }
  .marke { padding: 0.35rem 0.7rem 0.35rem 0.45rem; max-width: calc(100vw - 2 * var(--rand) - 128px); }
  .marke img { width: 54px; } .marke__wort b { font-size: 0.86rem; }
  .leiste .knopf--wald { display: none; }
  .leiste { padding: 0.3rem; }
}
@media (max-width: 380px) { .marke__wort { display: none; } }

/* Menü (aus der Lichtung) */
.hand { width: 1.3em; height: 1.3em; flex: none; display: inline-block; fill: currentColor; }
.menue { position: fixed; inset: 0; z-index: 80; background: rgba(24, 32, 26, 0.42); display: flex; align-items: flex-start; justify-content: flex-end; padding: clamp(10px, 2vw, 24px); }
.menue[hidden] { display: none; }
.menue__blatt { width: min(560px, 100%); max-height: calc(100svh - 20px); overflow: auto; background: var(--papier-hell); border-radius: 30px; padding: clamp(20px, 3vw, 34px);
  box-shadow: 0 30px 80px -30px rgba(20, 30, 22, 0.6); animation: blatt-auf 420ms var(--cw-ease-drawer) both; }
@keyframes blatt-auf { from { opacity: 0; transform: translateY(-14px) scale(0.98); } }
.menue__kopf { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; }
.menue__titel { margin: 0; font-family: var(--cw-font-display); font-weight: 560; font-size: 1.2rem; letter-spacing: -0.01em; }
.menue__zu { width: 46px; height: 46px; border-radius: 999px; border: 0; background: var(--papier); display: grid; place-items: center; cursor: pointer; color: var(--cw-ink); box-shadow: inset 0 0 0 1px var(--linie); }
.menue ul { list-style: none; margin: 0; padding: 0; }
.menue__haupt a { display: flex; align-items: center; gap: 0.85rem; padding: 0.75rem 0.2rem; font-family: var(--cw-font-display); font-weight: 460; font-size: 1.45rem; letter-spacing: -0.015em; text-decoration: none; color: var(--cw-ink); border-bottom: 1px solid var(--linie); }
.menue__haupt li:nth-child(even) .hand { rotate: 12deg; } .menue__haupt li:nth-child(odd) .hand { rotate: -8deg; }
.menue__neben { display: grid; grid-template-columns: 1fr 1fr; gap: 0.1rem 1rem; margin-top: 1rem !important; }
.menue__neben a { display: block; padding: 0.45rem 0; font-weight: 600; text-decoration: none; color: var(--cw-ink-soft); }
.menue__neben a:hover, .menue__haupt a:hover { color: var(--wald); }
.menue__heute { margin-top: 1rem !important; }
.menue__kontakt { display: grid; gap: 0.5rem; margin-top: 0.8rem; }
.menue__kontakt a { display: flex; align-items: center; gap: 0.6rem; padding: 0.8rem 1rem; border-radius: 18px; background: var(--papier); font-weight: 700; text-decoration: none; color: var(--cw-ink); box-shadow: inset 0 0 0 1px var(--linie); }
.menue__klein { margin: 1rem 0 0; font-size: 0.9rem; color: var(--cw-ink-soft); }
.menue__klein a { color: var(--cw-ink-soft); }

/* Heute-Zeile */
.heute { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 0.8rem; margin: 1.1rem 0 0; padding: 0.6rem 1rem; border-radius: 18px;
  background: rgba(251, 248, 241, 0.74); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
  font-size: 0.92rem; font-weight: 600; color: var(--cw-ink); }
.heute__licht { width: 0.62rem; height: 0.62rem; border-radius: 50%; background: #3E9B4F; box-shadow: 0 0 0 4px rgba(62, 155, 79, 0.18); flex: none; }
.heute.ist-zu .heute__licht { background: #B5452F; box-shadow: 0 0 0 4px rgba(181, 69, 47, 0.16); }
.heute.ist-bald .heute__licht { background: #C98A1F; box-shadow: 0 0 0 4px rgba(201, 138, 31, 0.18); }
.heute__neben { color: var(--cw-ink-soft); font-weight: 500; }
.heute:empty { display: none; }
/* Zweizeilig, wo die Zeilen sonst umbrechen (Kontakt, Startbild am Handy): ein umbrechendes Flex-Feld nimmt die ganze
   Breite und bleibt rechts leer (Simon 09.10.2026: „Feldgröße anpassen, wie die Schrift verläuft“). Als Raster mit zwei
   Zeilen richtet sich die Breite nach der längeren Zeile, die zweite steht bündig unter dem Text der ersten. */
.heute--kontakt { display: inline-grid; grid-template-columns: auto auto; justify-content: start; gap: 0.3rem 0.75rem; }
.heute--kontakt .heute__neben { grid-column: 2; }
.heute__neben:empty { display: none; }
@media (max-width: 860px) {
  .held .heute { display: inline-grid; grid-template-columns: auto auto; justify-content: start; gap: 0.3rem 0.75rem; }
  .held .heute__neben { grid-column: 2; }
}

/* ------------------------------------------------------------- Startbild -- */
.held { background: #0f1a12; }
.held__buehne { overflow: clip; }
.szene { position: absolute; left: 50%; top: 50%; width: max(100vw, calc(100svh * var(--ar))); aspect-ratio: var(--ar);
  --sw: max(100vw, calc(100svh * var(--ar))); translate: calc(-50% + (0.5 - var(--fx, 0.62)) * (var(--sw) - 100vw)) -50%; }
.ebene { position: absolute; inset: 0; will-change: transform; transform-origin: var(--ox, 62%) var(--oy, 74%); }
.ebene img { position: absolute; display: block; height: auto; }
.ebene > img.voll { inset: 0; width: 100%; height: 100%; object-fit: cover; }
.held .ebene--fern { transform: translate3d(calc(var(--mx, 0) * -6px), calc(var(--my, 0) * -4px), 0) scale(calc(1.02 + var(--p, 0) * 0.07)); }
.held .ebene--mitte { transform: translate3d(calc(var(--mx, 0) * -14px), calc(var(--my, 0) * -8px + var(--p, 0) * 3%), 0) scale(calc(1 + var(--p, 0) * 0.15)); }
.licht { position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: screen; opacity: calc(0.55 + var(--p, 0) * 0.25); }
.licht i { position: absolute; top: -20%; left: 62%; width: 18%; height: 150%; transform-origin: 50% 0; rotate: 28deg;
  background: linear-gradient(180deg, rgba(255, 236, 190, 0.55), rgba(255, 228, 170, 0.12) 55%, transparent 80%); filter: blur(26px); animation: atmen 9s ease-in-out infinite alternate; }
.licht i:nth-child(2) { left: 74%; width: 9%; rotate: 33deg; animation-duration: 12s; animation-delay: -4s; opacity: 0.8; }
.licht i:nth-child(3) { left: 50%; width: 12%; rotate: 24deg; animation-duration: 15s; animation-delay: -7s; opacity: 0.55; }
@keyframes atmen { from { opacity: 0.55; translate: -1.5% 0; } to { opacity: 1; translate: 1.5% 0; } }
.staub { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.schleier { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 8% 52%, rgba(248, 243, 232, 0.86) 0%, rgba(248, 243, 232, 0.62) 32%, rgba(248, 243, 232, 0) 62%); opacity: calc(1 - var(--p, 0) * 0.8); }

/* Schaukel: hängt an einem Ast über dem Bild. Drehachse oben (rotateX = auf den Betrachter zu). */
.schaukel__buehne { position: absolute; inset: 0; perspective: 140vh; perspective-origin: 62% 40%; }
.schaukel { position: absolute; left: 63%; top: -16%; width: 15.5%; translate: -50% 0; transform-style: preserve-3d; }
.schaukel__arm { position: absolute; left: 0; top: 0; width: 100%; transform-origin: 50% 0; transform: rotateX(var(--wx, 0deg)) rotateZ(var(--wz, 0deg)) rotateY(var(--wy, 0deg)); will-change: transform; }
.schaukel__arm img { position: relative; display: block; width: 100%; height: auto; }
.schaukel__holz { filter: drop-shadow(-8px 14px 14px rgba(22, 30, 16, 0.28)); }
/* Neigung als Scherung um die Auflage: der Po bleibt auf dem Brett (eine Drehung hob eine Seite an, „der Teddy fliegt“) */
.schaukel__teddy { position: absolute !important; inset: 0; transform-origin: 50.9% 93.7%; transform: skewX(calc(3deg - var(--tw, 0deg))) scaleY(var(--tq, 1)); transition: opacity 900ms var(--cw-ease-out); }
.schaukel__schatten { position: absolute; left: 62%; top: 79%; width: 14%; height: 3.2%; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(24, 34, 16, 0.42), rgba(24, 34, 16, 0.18) 60%, transparent);
  filter: blur(6px); transform: translate3d(calc(var(--sx, 0) * 1%), calc(var(--sy, 0) * 1%), 0) scale(var(--ss, 1)); opacity: var(--so, 0.9); }
.js .held .schaukel, .js .held .schaukel__schatten { opacity: 0; transition: opacity 900ms var(--cw-ease-out) 250ms; }
.js.held-bereit .held .schaukel, .js.held-bereit .held .schaukel__schatten { opacity: 1; }

.nah { position: absolute; inset: 0; pointer-events: none; z-index: 30; }
.nah img { position: absolute; will-change: transform; }
.nah__oben { width: clamp(300px, 27vw, 560px); left: -13%; top: -27%; rotate: 14deg; opacity: 0.88; transform-origin: 0 0;
  transform: translate3d(calc(var(--mx, 0) * -30px - var(--p, 0) * 18vw), calc(var(--my, 0) * -18px - var(--p, 0) * 22vh), 0) scale(calc(1 + var(--p, 0) * 0.55)); }
.nah__unten { width: clamp(360px, 36vw, 700px); right: -10%; bottom: 4%; rotate: 196deg; opacity: 0.92; transform-origin: 100% 100%;
  transform: translate3d(calc(var(--mx, 0) * -36px + var(--p, 0) * 26vw), calc(var(--my, 0) * -22px + var(--p, 0) * 10vh), 0) scale(calc(1 + var(--p, 0) * 0.5)); }

/* Titel immer in zwei Zeilen („Hier beginnt das große“ / „Abenteuer Kindheit.“, Simon 09.10.2026): beide Zeilen brauchen
   gemessen rund 9 × die Schriftgröße, die Spalte ist deshalb an die Schriftgröße gekoppelt */
.held__text { --titel: clamp(2.6rem, 1rem + 3.9vw, 6rem); position: absolute; z-index: 20; left: var(--rand); top: 47%; width: min(calc(var(--titel) * 9.5), 54vw);
  transform: translate3d(0, calc(-46% - var(--p, 0) * 9vh), 0); opacity: calc(1 - max(0, var(--p, 0) - 0.18) * 2.6); }
.held__titel { margin: 0; font-family: var(--cw-font-display); font-weight: 600; font-variation-settings: "SOFT" 100, "opsz" 144;
  font-size: var(--titel); line-height: 0.98; letter-spacing: -0.03em; color: var(--marine); text-wrap: balance; }
/* zweite Zeile in Handschrift (Simon 09.10.2026: „verspieltere Schrift auf der Heropage“; Wahl C aus vier Proben,
   material/wurzeln/pruef/runde3/schrift-vergleich.jpg) */
.held__titel em { font-style: normal; color: var(--wald); display: block; font-family: var(--hand); font-weight: 700; font-size: 1.32em;
  line-height: 0.82; letter-spacing: 0; margin-top: 0.15em; rotate: -2deg; transform-origin: 0 50%; }
.held__lede { margin: clamp(1rem, 2vh, 1.6rem) 0 0; max-width: 34ch; font-size: clamp(1.05rem, 0.98rem + 0.3vw, 1.25rem); line-height: 1.5; color: var(--cw-ink); font-weight: 500; text-wrap: pretty; }
.held__wege { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: clamp(1.3rem, 3vh, 2.2rem); }
.held__text > * { animation: auftritt 900ms var(--cw-ease-out) both; }
.held__text > :nth-child(2) { animation-delay: 90ms; } .held__text > :nth-child(3) { animation-delay: 180ms; } .held__text > :nth-child(4) { animation-delay: 270ms; }
@keyframes auftritt { from { opacity: 0; translate: 0 18px; } }

/* Ort: Linienbild von Steinen auf der Papierwelle, die beim Scrollen als Hügel aufsteigt und das Motto trägt */
.ort { position: absolute; left: 0; right: 0; bottom: 0; z-index: 40; pointer-events: none; height: calc(var(--welle) + 34svh); --welle: clamp(110px, 15vh, 170px);
  transform: translate3d(0, calc((1 - var(--hebe, 0)) * 34svh), 0); }
.ort__welle { position: absolute; left: 0; top: 0; width: 100%; height: var(--welle); display: block; }
.ort__welle path { fill: var(--papier); }
.ort__flaeche { position: absolute; left: 0; right: 0; top: calc(var(--welle) - 1px); bottom: 0; background: var(--papier); }
/* Grundlinie der Zeichnung (y = 192 von 196) knapp unter dem tiefsten Wellenpunkt darunter (0,41 der Wellenhöhe), damit das
   Papier die Füße überall verdeckt und kein Haus über der Welle schwebt (Simon 09.10.2026) */
.ort__steinen { --sw: min(44vw, 760px); position: absolute; left: max(0px, calc(var(--rand) - 40px)); width: var(--sw); height: auto; overflow: visible;
  bottom: calc(34svh + var(--welle) * 0.57 - var(--sw) * 0.0059); }
:is(.ort__steinen, .kontakt__steinen) .papier { fill: var(--papier); }
:is(.ort__steinen, .kontakt__steinen) .papier, :is(.ort__steinen, .kontakt__steinen) .fein { stroke: #3A4A3E; stroke-linecap: round; stroke-linejoin: round; }
:is(.ort__steinen, .kontakt__steinen) .papier { stroke-width: 1.35; }
:is(.ort__steinen, .kontakt__steinen) .fein { fill: none; stroke-width: 1; opacity: 0.85; }
:is(.ort__steinen, .kontakt__steinen) .huegel { fill: none; stroke: #3A4A3E; stroke-width: 1.1; opacity: 0.45; }
.ort__spruch { position: absolute; right: calc(var(--rand) + 2vw); top: calc(var(--welle) * 0.27); margin: 0; font-family: var(--hand); font-weight: 600;
  font-size: clamp(1.45rem, 1rem + 1.3vw, 2.35rem); line-height: 1.02; color: #2B3E30; rotate: -3deg; }
.ort__spruch span { display: block; } .ort__spruch span + span { margin-left: 1.2em; }
.ort__herz { display: inline-block; width: 1.1em; height: 1.1em; vertical-align: -0.12em; margin-left: 0.2em; color: var(--l-rot); }
.ort__steinen :is(.papier, .fein, .huegel) { stroke-dasharray: 1; stroke-dashoffset: 1; }
.ort__steinen .papier { fill-opacity: 0; }
.held-bereit .ort__steinen :is(.fein, .huegel) { animation: ziehen 2.6s var(--cw-ease-out) forwards; animation-delay: calc(0.5s + var(--i, 0) * 0.07s); }
.held-bereit .ort__steinen .papier { animation: ziehen 2.6s var(--cw-ease-out) forwards, fuellen 1.2s ease forwards; animation-delay: calc(0.5s + var(--i, 0) * 0.07s), calc(1.4s + var(--i, 0) * 0.07s); }
@keyframes ziehen { to { stroke-dashoffset: 0; } }
@keyframes fuellen { to { fill-opacity: 1; } }
.ort__spruch { opacity: 0; translate: 0 10px; transition: opacity 900ms var(--cw-ease-out) 1.6s, translate 900ms var(--cw-ease-out) 1.6s; }
.held-bereit .ort__spruch { opacity: 1; translate: 0 0; }
/* Motto, Text und Unterschrift als ein Block wie in Simons Vorlage (09.10.2026): das Motto sitzt unten im aufsteigenden Papier,
   der Text folgt direkt darunter im nächsten Abschnitt, bündig mit dem Motto (gleiche Werte --mw, --mh, --mg) */
:root { --mw: min(980px, 88vw); --mh: clamp(84px, 11vw, 168px); --mg: clamp(1rem, 3vw, 2.6rem); }
.ort__motto { position: absolute; left: 50%; bottom: clamp(0.6rem, 2.5svh, 1.6rem); width: var(--mw); translate: -50% 0; display: flex; align-items: center; gap: var(--mg);
  opacity: clamp(0, (var(--hebe, 0) - 0.55) * 3, 1); }
/* Bild hat 6 % Rand für den unruhigen Farbrand: etwas größer, die Breite im Fluss bleibt --mh (Text bleibt bündig) */
.ort__hand { width: calc(var(--mh) * 1.12); margin-right: calc(var(--mh) * -0.12); aspect-ratio: 601 / 640; height: auto; flex: none; rotate: -12deg;
  transform: scale(calc(1.35 - clamp(0, (var(--hebe, 0) - 0.62) * 4, 1) * 0.35)); opacity: clamp(0, (var(--hebe, 0) - 0.62) * 5, 1); }
.ort__satz { margin: 0; font-family: var(--cw-font-display); font-style: italic; font-weight: 420; font-size: clamp(2rem, 1.2rem + 3vw, 4.2rem); line-height: 1.02; letter-spacing: -0.02em; color: var(--marine); text-wrap: balance;
  transform: translate3d(0, calc((1 - clamp(0, (var(--hebe, 0) - 0.55) * 2.2, 1)) * 24px), 0); }

/* ----------------------------------------------------- Papierhügel -- */
.huegel { position: relative; background: var(--grund, var(--papier)); padding-block: clamp(3rem, 7vw, 6rem) clamp(4.5rem, 9vw, 8rem); }
.huegel::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--wh) * -1 + 1px); height: var(--wh); background: var(--grund, var(--papier));
  -webkit-mask: url("assets/wald/welle-1.svg") center / 100% 100% no-repeat; mask: url("assets/wald/welle-1.svg") center / 100% 100% no-repeat; pointer-events: none; }
.huegel--a { --grund: var(--papier); }
.huegel--b { --grund: var(--papier-b); }
.huegel--b::before { -webkit-mask-image: url("assets/wald/welle-2.svg"); mask-image: url("assets/wald/welle-2.svg"); }
.huegel--a.gruppen::before, .anmeldung::before { -webkit-mask-image: url("assets/wald/welle-3.svg"); mask-image: url("assets/wald/welle-3.svg"); }
.huegel--motto { --grund: var(--papier); padding-top: clamp(0.6rem, 2vh, 1.6rem); }
.huegel--motto::before { display: none; }
/* Hügel vor einem Waldabschnitt laufen unten als Welle aus, der Wald steigt dahinter auf */
.huegel--unten::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(var(--wh) * -1 + 1px); height: var(--wh); background: var(--grund); z-index: 3;
  -webkit-mask: url("assets/wald/welle-2.svg") center / 100% 100% no-repeat; mask: url("assets/wald/welle-2.svg") center / 100% 100% no-repeat; transform: scaleY(-1); pointer-events: none; }
.korn { position: absolute; inset: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.35 0 0 0 0 0.3 0 0 0 0 0.22 0 0 0 0.06 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"); }

/* Motto (Rest des Zitats) */
.motto { box-sizing: border-box; width: var(--mw); max-width: none; margin-inline: auto; padding-left: calc(var(--mh) + var(--mg)); padding-right: 0; }
.motto blockquote { margin: 0; }
.motto__satz { margin: 0 0 0.8rem; font-family: var(--cw-font-display); font-style: italic; font-weight: 420; font-size: clamp(2.2rem, 1.4rem + 3vw, 4.2rem); line-height: 1.02; color: var(--marine); }
/* Runde 4 (Simon: „hochwertiger, aber passend zur Geltung bringen“): der Text als Stimme des Kindes in Buchschrift, er füllt sich
   beim Lesen Wort für Wort mit Tinte (--p aus seite.js, tinte()); fünf Schlüsselwörter bekommen einen Fingerstrich in den
   Logofarben, gezogen wenn der Leser dort ankommt (unter der Grundlinie, die Schrift bleibt frei); als Unterschrift fünf Fingertupfer. Ohne Skript und in der ruhigen
   Fassung steht alles sofort voll da. */
.motto__rest { margin: 0; max-width: 33em; font-family: var(--cw-font-display); font-weight: 380; font-variation-settings: "SOFT" 100, "opsz" 30;
  font-size: clamp(1.28rem, 1.02rem + 0.95vw, 1.9rem); line-height: 1.52; letter-spacing: -0.006em; color: var(--marine); text-wrap: pretty; }
.tinte-an .wort { opacity: calc(0.17 + 0.83 * clamp(0, (var(--p, 0) * (var(--n) + 3) - var(--i)) / 3, 1)); }
.strich { position: relative; display: inline-block; white-space: nowrap; isolation: isolate; }
.strich::before { content: ""; position: absolute; z-index: -1; left: -0.18em; right: -0.24em; bottom: -0.27em; height: 0.62em; background: no-repeat center / 100% 100%;
  clip-path: inset(-10% calc((1 - var(--s, 1)) * 100%) -10% 0); rotate: -0.6deg; }
.tinte-an .strich { --s: clamp(0, (var(--p, 0) * (var(--n) + 3) - var(--ie) - 1) / 3, 1); }
.strich--rot::before { background-image: url("assets/hand/strich-rot.webp"); }
.strich--orange::before { background-image: url("assets/hand/strich-orange.webp"); }
.strich--gelb::before { background-image: url("assets/hand/strich-gelb.webp"); }
.strich--gruen::before { background-image: url("assets/hand/strich-gruen.webp"); opacity: 0.9; }
.strich--rot::before { opacity: 0.8; }
.strich--blau::before { background-image: url("assets/hand/strich-blau.webp"); opacity: 0.75; }
.motto__wer { display: flex; align-items: center; gap: 0.9rem; margin-top: clamp(1.4rem, 3vw, 2.2rem); }
.motto__tupfer { display: flex; flex: none; }
.motto__tupfer img { width: 1.55rem; height: auto; margin-right: -0.32rem; rotate: calc(var(--r, 0) * 1deg); transition: opacity 300ms ease, transform 420ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.motto__tupfer img:nth-child(1) { --r: -14; } .motto__tupfer img:nth-child(2) { --r: 6; translate: 0 -0.12rem; } .motto__tupfer img:nth-child(3) { --r: -4; translate: 0 0.08rem; }
.motto__tupfer img:nth-child(4) { --r: 12; translate: 0 -0.08rem; } .motto__tupfer img:nth-child(5) { --r: -8; }
.motto__name { font-family: var(--hand); font-size: 1.8rem; line-height: 1; color: var(--wald); transition: opacity 600ms ease 650ms; }
.tinte-an .motto__tupfer img { opacity: 0; transform: scale(1.5); }
.tinte-an .motto__name { opacity: 0; }
.tinte-an.ist-fertig .motto__tupfer img { opacity: 1; transform: none; }
.tinte-an.ist-fertig .motto__tupfer img:nth-child(2) { transition-delay: 110ms; } .tinte-an.ist-fertig .motto__tupfer img:nth-child(3) { transition-delay: 220ms; }
.tinte-an.ist-fertig .motto__tupfer img:nth-child(4) { transition-delay: 330ms; } .tinte-an.ist-fertig .motto__tupfer img:nth-child(5) { transition-delay: 440ms; }
.tinte-an.ist-fertig .motto__name { opacity: 1; }
@media (max-width: 700px) { .motto { padding-left: 0; } .motto__tupfer img { width: 1.3rem; } }

/* ------------------------------------------------- Auf einen Blick -- */
.blick__raster { display: grid; gap: clamp(2rem, 4vw, 3.6rem); margin-top: calc(var(--kh-zettel, 4.4rem) * 0.85 + 1.4rem); }
@media (min-width: 1000px) { .blick__raster { grid-template-columns: 1.15fr 1fr; align-items: start; } }
.blick__zeiten { display: grid; gap: clamp(1.8rem, 3vw, 2.4rem); }
@media (min-width: 700px) { .blick__zeiten { grid-template-columns: 1fr 1fr; } }
.zettel { position: relative; background: var(--papier-hell); border-radius: 6px 6px 18px 6px; padding: clamp(1.6rem, 2.4vw, 2.2rem) clamp(1.2rem, 2vw, 1.7rem) clamp(1.3rem, 2vw, 1.6rem);
  box-shadow: var(--schatten-2); rotate: var(--r, -0.8deg); transform-origin: 50% 0; }
.zettel--kiga { --r: 0.9deg; }
.zettel__titel { margin: 0 0 0.9rem; font-family: var(--cw-font-display); font-weight: 600; font-size: 1.5rem; color: var(--marine); display: grid; }
.zettel__titel span { font: 500 0.92rem var(--cw-font-text); color: var(--cw-ink-soft); }
.zeiten { width: 100%; border-collapse: collapse; font-size: 0.97rem; }
.zeiten th { text-align: left; font-weight: 600; padding: 0.6rem 0.8rem 0.6rem 0; vertical-align: top; color: var(--cw-ink); border-top: 1px solid var(--linie); }
.zeiten td { padding: 0.6rem 0; vertical-align: top; border-top: 1px solid var(--linie); font-variant-numeric: tabular-nums lining-nums; white-space: nowrap; }
.zettel__hinweis { margin: 0.8rem 0 0; font-size: 0.86rem; color: var(--cw-ink-soft); }
mark.offen { background: #F7E3A3; color: #4A3B10; padding: 0 0.3em; border-radius: 4px; }
.blick__zu { position: relative; background: var(--papier-hell); border-radius: 6px 6px 18px 6px; padding: clamp(1.4rem, 2.4vw, 2rem); box-shadow: var(--schatten-2); min-width: 0; }
.blick__raster { position: relative; }
.zu-kopf { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; }
.zu-jahre { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--papier); box-shadow: inset 0 0 0 1px var(--linie); }
.zu-jahre__knopf { border: 0; background: none; padding: 0.4rem 1rem; border-radius: 999px; font: 700 0.92rem var(--cw-font-text); color: var(--cw-ink-soft); cursor: pointer; min-height: 38px; }
.zu-jahre__knopf[aria-selected="true"] { background: var(--wald); color: #fff; }
.jahr { margin: 1.2rem 0 0.4rem; }
.jahr__monate { display: grid; grid-template-columns: repeat(12, 1fr); font-size: 0.72rem; font-weight: 700; color: var(--cw-ink-soft); }
.jahr__band { position: relative; height: 14px; margin-top: 4px; border-radius: 7px; background: repeating-linear-gradient(90deg, rgba(47, 91, 53, 0.08) 0 calc(100% / 12 - 1px), rgba(255, 255, 255, 0.8) 0 calc(100% / 12)); box-shadow: inset 0 0 0 1px var(--linie); }
.jahr__zu { position: absolute; top: 2px; bottom: 2px; min-width: 3px; border-radius: 4px; background: var(--rot); }
.jahr__zu.ist-vorbei { opacity: 0.35; }
.jahr__zu.ist-naechste { box-shadow: 0 0 0 2px var(--papier-hell), 0 0 0 4px var(--rot); }
.jahr__heute { position: absolute; top: -5px; bottom: -5px; width: 2px; background: var(--marine); border-radius: 2px; }
.zu-liste { list-style: none; margin: 0.9rem 0 0; padding: 0; columns: 2 220px; column-gap: 1.6rem; }
.zu-liste li { display: flex; gap: 0.8rem; padding: 0.45rem 0; border-top: 1px solid var(--linie); break-inside: avoid; font-size: 0.95rem; }
.zu-liste__wann { min-width: 6.6em; font-weight: 700; font-variant-numeric: tabular-nums; }
.zu-liste__folgt { color: var(--cw-ink-soft); font-weight: 600; }
.zu-liste li.ist-vorbei { color: var(--cw-ink-soft); opacity: 0.6; }
.zu-liste li.ist-naechste { color: var(--rot); }
.blick__fuss { margin: 1rem 0 0.4rem; }
.termine { margin-top: clamp(2.6rem, 5vw, 4rem); }
.termin { position: relative; background: var(--papier-hell); border-radius: 22px; padding: clamp(2.4rem, 4vw, 3.4rem) clamp(1.4rem, 3vw, 2.6rem) clamp(1.6rem, 3vw, 2.4rem); box-shadow: var(--schatten-2); overflow: hidden; }
.termin__wimpel { position: absolute; left: 0; right: 0; top: 0; height: 3.2rem; }
.termin__wimpel svg { width: 100%; height: 100%; display: block; }
.termin__raster { display: grid; gap: 1.6rem; }
@media (min-width: 900px) { .termin__raster { grid-template-columns: auto 1.4fr 1fr; align-items: start; } }
.termin__blatt { margin: 0; display: grid; justify-items: center; width: 7.2rem; padding: 0.6rem 0 0.8rem; border-radius: 16px; background: #fff; box-shadow: var(--schatten-1); rotate: -3deg; }
.termin__monat { font-weight: 700; font-size: 0.85rem; color: #fff; background: var(--rot); width: 100%; text-align: center; padding: 0.2rem 0; border-radius: 12px 12px 0 0; margin-top: -0.6rem; }
.termin__tag { font-family: var(--cw-font-display); font-size: 3rem; line-height: 1.05; color: var(--marine); }
.termin__wt { font-size: 0.85rem; font-weight: 600; color: var(--cw-ink-soft); }
.termin__ueber { margin: 0; font-family: var(--hand); font-size: 1.5rem; color: var(--rot); }
.termin__name { margin: 0.1rem 0 0.6rem; font-family: var(--cw-font-display); font-weight: 600; font-size: clamp(1.8rem, 1.4rem + 1.2vw, 2.6rem); color: var(--marine); }
.termin__lede { margin: 0; color: var(--cw-ink-soft); max-width: 52ch; }
.termin__fakten { margin: 1.1rem 0 0; display: grid; gap: 0.5rem; }
.termin__fakten div { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.6rem; }
.termin__fakten dt { font-weight: 700; } .termin__fakten dd { margin: 0; color: var(--cw-ink-soft); }
.termin__wege { margin: 1.2rem 0 0; }
.termin__buffet { background: var(--papier); border-radius: 16px; padding: 1.1rem 1.2rem; font-size: 0.94rem; }
.termin__buffet ul { margin: 0.4rem 0 0; padding-left: 1.1rem; display: grid; gap: 0.35rem; color: var(--cw-ink-soft); }
.termin__klein { margin: 0; font-weight: 700; }
@media (max-width: 560px) { .termin__fakten div { grid-template-columns: 1fr; gap: 0.1rem; } }

/* --------------------------------------------------------- Gruppen -- */
.gruppen__kopf { max-width: 46rem; }
.mobile { --hand: clamp(5.4rem, 3.6rem + 4vw, 8.4rem); --figur: clamp(6.6rem, 4.4rem + 5vw, 10.4rem);
  display: grid; gap: clamp(2.6rem, 5vw, 4rem) clamp(2rem, 4vw, 4rem); margin-top: clamp(2.6rem, 5vw, 4rem); padding-bottom: 1.6rem; }
@media (min-width: 900px) { .mobile { grid-template-columns: 2fr 3fr; align-items: start; } }
.mobil__titel { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.7rem; color: var(--cw-ink-soft); margin: 0; }
.mobil__titel b { font-family: var(--cw-font-display); font-weight: 600; font-size: 1.45rem; color: var(--cw-ink); }
.mobil__gestell { position: relative; height: 3.4rem; margin-top: 0.6rem; }
.mobil__faden { position: absolute; left: 50%; top: 0; height: calc(100% - 4px); width: 1px; background: #8a7f72; }
.mobil__stab { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; border-radius: 5px;
  background: #C9A170 url("assets/wald/eiche-hoch.webp") center / auto 400%; box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), 4px 7px 8px -3px rgb(70 50 30 / 0.35); }
.mobil__reihe { display: flex; justify-content: space-around; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.platz { display: grid; justify-items: center; grid-template-rows: calc(var(--figur) * 1.12 + 4.6em) auto; }
.platz__fall { align-self: start; transition: transform 900ms cubic-bezier(0.3, 1.45, 0.45, 1), opacity 500ms var(--cw-ease-out); transition-delay: calc(var(--n) * 110ms); }
.js .mobile:not(.ist-da) .platz__fall { transform: translateY(-2.6rem); opacity: 0; }
.haenger { display: grid; justify-items: center; transform-origin: 50% 0; }
.haenger::before { content: ""; width: 1px; height: var(--faden); background: #8a7f72; }
.teil { position: relative; width: var(--b); perspective: 700px; }
.teil svg { display: block; width: 100%; height: auto; overflow: visible; }
.teil__schatten { position: absolute; inset: 0; filter: blur(5px); opacity: 0.3; transform: translate(0.9rem, 1.3rem) scaleX(0.95); }
.teil__schatten use { fill: #4a3a2c; }
.teil__dreh { position: relative; transform-origin: 50% 0; transform-style: preserve-3d; }
.teil__kante { position: absolute; inset: 0; transform: translate(1.2px, 1.7px); }
.teil__kante use { fill: color-mix(in oklab, var(--p) 68%, #3a2a1a); }
.teil__vorn { position: relative; filter: url(#papier); }
.teil__vorn use { fill: var(--p); }
.platz--rot { --p: var(--ton-rot); } .platz--orange { --p: var(--ton-orange); } .platz--gelb { --p: var(--ton-gelb); } .platz--gruen { --p: var(--ton-gruen); } .platz--blau { --p: var(--ton-blau); }
.platz__name { margin-top: 0.6rem; font-family: var(--cw-font-display); font-weight: 600; font-size: clamp(1.02rem, 0.9rem + 0.5vw, 1.32rem); line-height: 1.15; text-align: center; }
@media (prefers-reduced-motion: no-preference) {
  .haenger { animation: pendeln 7.5s ease-in-out infinite; animation-delay: var(--v); animation-play-state: paused; }
  .teil__dreh { animation: drehen 9s ease-in-out infinite; animation-delay: var(--v); animation-play-state: paused; }
  .teil__schatten { animation: schatten-drehen 9s ease-in-out infinite; animation-delay: var(--v); animation-play-state: paused; }
  .mobile.ist-sichtbar :is(.haenger, .teil__dreh, .teil__schatten) { animation-play-state: running; }
}
@keyframes pendeln { 0%, 100% { transform: rotate(-2.4deg); } 50% { transform: rotate(2.4deg); } }
@keyframes drehen { 0%, 100% { transform: rotateY(-20deg); } 50% { transform: rotateY(20deg); } }
@keyframes schatten-drehen { 0%, 100% { transform: translate(0.8rem, 1.3rem) scaleX(0.93); } 50% { transform: translate(1.15rem, 1.3rem) scaleX(0.93); } }
@media (max-width: 599px) { .mobile { --hand: 4.6rem; --figur: 5.6rem; } .platz__name { font-size: 0.95rem; } }
.gruppen__fuss { display: grid; gap: 1.4rem; margin-top: clamp(2.4rem, 5vw, 3.6rem); }
@media (min-width: 900px) { .gruppen__fuss { grid-template-columns: auto 1fr; align-items: center; gap: 3rem; } }
.gruppen__fakten { display: flex; flex-wrap: wrap; gap: 1.2rem 2.6rem; margin: 0; }
.gruppen__fakten dt { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cw-ink-soft); }
.gruppen__fakten dd { margin: 0; font-family: var(--cw-font-display); font-weight: 600; font-size: 1.6rem; line-height: 1.2; }
.gruppen__geschichte { color: var(--cw-ink-soft); max-width: 56ch; margin: 0; }

/* ----------------------------------------- Höhepunkt: Ihr Tag bei uns -- */
.tag { background: #0f1a12; }
.tag__buehne { overflow: clip; --morgen: 1; --gold: 0; --abend: 0; --sx: 70%; --sy: 30%; }
.tag__szene { --fx: 0.62; }
.tag .ebene--fern { transform: scale(1.03); }
.tag__luft { position: absolute; inset: 0; pointer-events: none; }
.tag__luft--morgen { background: linear-gradient(180deg, rgba(214, 226, 240, 0.62), rgba(236, 240, 244, 0.32) 60%, rgba(220, 230, 236, 0.2)); mix-blend-mode: screen; opacity: var(--morgen); }
.tag__luft--gold { background: radial-gradient(90% 80% at 72% 22%, rgba(255, 186, 96, 0.55), rgba(255, 150, 70, 0.18) 55%, transparent 80%); mix-blend-mode: soft-light; opacity: var(--gold); }
.tag__luft--abend { background: linear-gradient(180deg, rgba(74, 66, 118, 0.6), rgba(196, 112, 84, 0.42) 70%, rgba(120, 70, 60, 0.4)); mix-blend-mode: multiply; opacity: var(--abend); }
/* Sonne wandert per translate einer bildgroßen Ebene (Prozent = Bühnengröße), nicht per left/top: das verschob beim Scrollen
   das Layout (Messung 09.10.2026, Layout-Verschiebung 0,4 in „Ihr Tag“) */
.tag__sonne { position: absolute; inset: 0; translate: var(--sx) var(--sy); pointer-events: none; mix-blend-mode: screen;
  opacity: calc(0.5 + var(--gold) * 0.3 - var(--abend) * 0.3); }
.tag__sonne::before { content: ""; position: absolute; left: 0; top: 0; width: 34%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 246, 220, 0.85), rgba(255, 224, 160, 0.35) 40%, transparent 72%); }
.tag .licht { opacity: calc(0.45 + var(--gold) * 0.35 - var(--abend) * 0.3); }
.tag__schaukel { transform-origin: 62% 74%; }
@media (prefers-reduced-motion: no-preference) {
  .schaukel__arm--leise { animation: leise-schaukeln 3.4s ease-in-out infinite; }
}
@keyframes leise-schaukeln { 0%, 100% { transform: rotateX(-5deg) rotateZ(0.4deg); } 50% { transform: rotateX(5deg) rotateZ(-0.4deg); } }
.tag__buehne.ist-daheim .schaukel__teddy, .tag__buehne.ist-vorher .schaukel__teddy { opacity: 0; }
/* Sonnenhut zur Mittagszeit (11:30–14:30, Simon 09.10.2026): fällt sanft auf den Kopf und wird danach wieder abgenommen */
.schaukel__hut { opacity: 0; translate: 0 -5%; transition: opacity 260ms ease, translate 260ms ease-in; }
.tag__buehne.ist-mittag:not(.ist-daheim):not(.ist-vorher) .schaukel__hut { opacity: 1; translate: 0 0;
  transition: opacity 220ms ease, translate 620ms cubic-bezier(0.3, 1.45, 0.5, 1); }
.tag__staub { z-index: 2; }

.tag__kopf { position: absolute; z-index: 10; left: var(--rand); right: var(--rand); top: clamp(88px, 12vh, 120px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; }
.tag__ueber { padding: 0.9rem 1.2rem 1rem; margin: -0.9rem -1.2rem -1rem; border-radius: 22px; background: radial-gradient(120% 120% at 20% 40%, rgba(248, 243, 232, 0.78), rgba(248, 243, 232, 0) 70%); }
.tag__h2 { font-size: clamp(2rem, 1.3rem + 2.2vw, 3.4rem); }
.tag__anleitung { margin: 0.4rem 0 0; font-weight: 600; color: var(--cw-ink); max-width: 40ch; }
.tag__wahlen { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.wahl { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: rgba(251, 248, 241, 0.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 12px 26px -18px rgba(20, 30, 20, 0.6); }
.wahl::before { content: ""; position: absolute; top: 4px; bottom: 4px; left: 0; width: var(--tw, 0); transform: translateX(var(--tx, 0)); border-radius: 999px; background: var(--schieber, var(--wald));
  transition: transform 320ms var(--cw-ease-out), width 320ms var(--cw-ease-out), background-color 200ms; }
.wahl button { position: relative; z-index: 1; border: 0; background: none; padding: 0.5rem 0.95rem; border-radius: 999px; font: 700 0.9rem var(--cw-font-text); color: var(--cw-ink); cursor: pointer; min-height: 40px; transition: color 200ms; }
.wahl button[aria-pressed="true"] { color: #fff; }
.wahl--tage button { padding-inline: 0.7rem; }

.tag__karte { --kp: clamp(1.2rem, 2vw, 1.8rem); position: absolute; z-index: 10; left: var(--rand); top: 50%; translate: 0 -40%; display: flex; align-items: center; gap: clamp(1.2rem, 2.4vw, 2.2rem);
  width: min(640px, 48vw); padding: var(--kp); border-radius: 26px; background: rgba(251, 248, 241, 0.9); box-shadow: var(--schatten-2); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
/* Das Polaroid ragt knapp über die Oberkante der Karte; die Klammer hält beides zusammen */
.tag__foto { position: relative; flex: none; align-self: flex-start; margin: calc(-1 * var(--kp) - 5px) 0 0; width: clamp(120px, 12vw, 190px); padding: 0.5rem 0.5rem 1.8rem; background: #fff;
  box-shadow: 0 14px 26px -14px rgba(20, 20, 10, 0.55); rotate: -2deg; transform-origin: 50% 0; }
.tag__foto .klemme { --kh: 3.8rem; }
.tag__bilder { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #eee; }
.tag__bilder img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 500ms var(--cw-ease-out); }
.tag__bilder img.ist-aktiv { opacity: 1; }
.tag__symbol { position: absolute; left: 0; right: 0; bottom: 0.35rem; text-align: center; font-family: var(--hand); font-size: 0.95rem; color: #5a564e; }
/* Lage von seite.js (kartenHoehe): fest während des Scrollens, Abstand zu Wahl und Zeitleiste */
.tag__karte.ist-gesetzt { top: var(--karte-top); translate: none; }
.tag__uhr { margin: 0; font-family: var(--cw-font-display); font-weight: 500; font-size: clamp(3.2rem, 2rem + 4vw, 6.4rem); line-height: 0.9; letter-spacing: -0.04em; color: var(--marine); font-variant-numeric: lining-nums tabular-nums; }
.tag__zeit { margin: 0.7rem 0 0; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--rot); min-height: 1em; }
.tag__titel { margin: 0.2rem 0 0; font-family: var(--cw-font-display); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1vw, 2.1rem); color: var(--cw-ink); }
.tag__text { margin: 0.4rem 0 0; color: var(--cw-ink-soft); line-height: 1.5; max-width: 40ch; }
.tag__daheim { display: inline-block; margin: 0.8rem 0 0; padding: 0.35rem 0.8rem; border-radius: 999px; background: var(--marine); color: #fff; font-size: 0.85rem; font-weight: 700; }
.tag__daheim:empty { display: none; }
.tag__buehne.ist-daheim .tag__titel, .tag__buehne.ist-daheim .tag__text { opacity: 0.55; }

.tag__leiste { position: absolute; z-index: 10; left: var(--rand); right: var(--rand); bottom: clamp(16px, 4vh, 40px); padding: 1.6rem 1.4rem 0.6rem; border-radius: 22px;
  background: rgba(251, 248, 241, 0.82); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--schatten-1); }
.leine-tag { position: relative; height: 44px; cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; border-radius: 10px; }
/* Regler (Simon 09.10.2026: „die Hand auch mit der Maus bewegen“): Hand ziehen, auf die Leiste tippen, Pfeiltasten */
.leine-tag:focus { outline: none; }
.leine-tag:focus-visible { outline: 2px solid var(--marine); outline-offset: 8px; }
.leine-tag__kopf { cursor: grab; touch-action: none; }
.leine-tag__kopf::before { content: ""; position: absolute; inset: -12px -10px; }
.leine-tag.ist-gezogen, .leine-tag.ist-gezogen .leine-tag__kopf { cursor: grabbing; }
.leine-tag__kopf img { transition: scale 220ms cubic-bezier(0.3, 1.5, 0.5, 1); }
.leine-tag:hover .leine-tag__kopf img, .leine-tag:focus-visible .leine-tag__kopf img { scale: 1.15; }
.leine-tag.ist-gezogen .leine-tag__kopf img { scale: 1.28; filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.28)); }
/* einmal winken, wenn die Leiste zum ersten Mal da ist: man darf sie anfassen */
.leine-tag__kopf.winkt img { animation: winken 1.4s ease-in-out 1; }
@keyframes winken { 0%, 100% { rotate: -8deg; } 20% { rotate: 10deg; } 40% { rotate: -14deg; } 60% { rotate: 8deg; } 80% { rotate: -10deg; } }
.leine-tag__band { position: absolute; top: 12px; height: 8px; border-radius: 4px; background: var(--band, var(--blau)); opacity: 0.9; }
.leine-tag__band.ist-offen { background: repeating-linear-gradient(135deg, var(--band) 0 6px, transparent 6px 10px); }
.leine-tag__punkte i { position: absolute; top: 4px; width: 7px; height: 18px; translate: -50% 0; border-radius: 2px; background: var(--gruen); box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2); transition: background-color 200ms, transform 200ms; }
.leine-tag__punkte i:nth-child(5n+1) { background: var(--ton-gruen); } .leine-tag__punkte i:nth-child(5n+2) { background: var(--ton-orange); } .leine-tag__punkte i:nth-child(5n+3) { background: var(--ton-blau); }
.leine-tag__punkte i:nth-child(5n+4) { background: var(--ton-rot); } .leine-tag__punkte i:nth-child(5n) { background: var(--ton-gelb); }
.leine-tag__punkte i.ist-ohne { opacity: 0.3; }
.leine-tag__punkte i.ist-vorbei { transform: scaleY(0.8); }
.leine-tag__abholen { position: absolute; top: -1.3rem; bottom: 4px; width: 2px; background: var(--marine); translate: -1px 0; }
.leine-tag__abholen span { position: absolute; bottom: 100%; left: 50%; translate: -50% -2px; white-space: nowrap; padding: 0.15rem 0.55rem; border-radius: 999px; background: var(--marine); color: #fff; font-size: 0.75rem; font-weight: 700; }
.leine-tag__kopf { position: absolute; top: -6px; width: 30px; height: 32px; translate: -50% 0; }
.leine-tag__kopf img { display: block; width: 115%; height: 115%; margin: -7.5%; object-fit: contain; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25)); rotate: -8deg; }
.leine-tag__achse { position: absolute; left: 0; right: 0; bottom: 0; height: 14px; }
.leine-tag__achse span { position: absolute; translate: -50% 0; font-size: 0.72rem; font-weight: 700; color: var(--cw-ink-soft); font-variant-numeric: tabular-nums; }

.tag__summe { position: absolute; z-index: 12; left: 50%; bottom: clamp(16px, 4vh, 40px); translate: -50% 0; width: min(920px, calc(100% - 2 * var(--rand)));
  display: grid; grid-template-columns: 1fr 1.2fr auto; gap: 1.6rem; align-items: center; padding: 1.4rem 1.6rem; border-radius: 24px; background: var(--papier-hell); box-shadow: var(--schatten-2);
  opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity 420ms var(--cw-ease-out), transform 420ms var(--cw-ease-out); }
.tag__summe.ist-sichtbar { opacity: 1; transform: none; pointer-events: auto; }
.summe__ueber { margin: 0; font-family: var(--hand); font-size: 1.35rem; color: var(--wald); }
.summe__wahl { margin: 0; font-weight: 700; }
.summe__beitrag { margin: 0.3rem 0 0; } .summe__beitrag b { font-family: var(--cw-font-display); font-size: 1.9rem; color: var(--marine); }
.summe__stunden { margin: 0.2rem 0 0; font-size: 0.85rem; color: var(--cw-ink-soft); }
.woche__zeile { display: grid; grid-template-columns: 2rem 1fr 6.6rem; gap: 0.6rem; align-items: center; font-size: 0.82rem; font-weight: 600; }
.woche__balken { position: relative; height: 8px; border-radius: 4px; background: var(--linie); }
.woche__balken i { position: absolute; top: 0; bottom: 0; border-radius: 4px; background: var(--band, var(--blau)); }
.woche__balken i.ist-offen { background: repeating-linear-gradient(135deg, var(--band) 0 5px, transparent 5px 9px); }
.woche__zeit { font-variant-numeric: tabular-nums; color: var(--cw-ink-soft); }
.tag__summe.ist-sichtbar ~ .tag__leiste, .tag__buehne:has(.tag__summe.ist-sichtbar) .tag__leiste { opacity: 0; pointer-events: none; transition: opacity 300ms; }
.js .tag__ohne-js { display: none; }
.tag__ohne-js { background: var(--papier); padding-block: 3rem; }
.tag__listen { display: grid; gap: 2rem; }
@media (min-width: 900px) { .tag__listen { grid-template-columns: 1fr 1fr; } }
@media (max-width: 1000px) { .tag__summe { grid-template-columns: 1fr; gap: 0.9rem; } }
@media (max-width: 860px) {
  .tag__kopf { top: 80px; gap: 0.7rem; }
  .tag__anleitung { display: none; }
  /* alle drei Wahlen sichtbar, ohne seitliches Wischen: die Gruppen brechen in Zeilen um, nie der Text in der Pille */
  .tag__wahlen { gap: 0.45rem; }
  .wahl { flex: none; }
  .wahl button { padding: 0.45rem 0.7rem; font-size: 0.84rem; white-space: nowrap; min-height: 38px; }
  .tag__karte { --kp: 1rem; left: var(--cw-gutter); right: var(--cw-gutter); width: auto; top: auto; bottom: calc(clamp(16px, 4vh, 40px) + 110px); translate: none; gap: 1rem; }
  .tag__foto .klemme { --kh: 3.2rem; }
  .tag__foto { width: 104px; }
  .tag__uhr { font-size: 3rem; }
  .tag__text { font-size: 0.92rem; }
  .tag__leiste { left: var(--cw-gutter); right: var(--cw-gutter); padding: 1.4rem 0.9rem 0.5rem; }
  .tag__schaukel { translate: 6% -8%; }
}
@media (max-width: 560px) { .leine-tag__achse span:nth-child(even) { display: none; } .tag__summe { padding: 1rem; } }
@media (max-width: 370px) { .wahl button { padding-inline: 0.55rem; font-size: 0.8rem; } .wahl--tage button { padding-inline: 0.5rem; } }

/* --------------------------------------------------------- Beiträge -- */
.beitraege-teil__raster { display: grid; gap: 2rem; }
@media (min-width: 1000px) { .beitraege-teil__raster { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.beitraege-teil__tafel { min-width: 0; overflow-x: auto; background: var(--papier-hell); border-radius: 22px; padding: 0.6rem 1.2rem; box-shadow: var(--schatten-1); }
.beitraege { width: 100%; border-collapse: collapse; font-size: 0.98rem; }
.beitraege th, .beitraege td { padding: 0.75rem 0.6rem; text-align: left; border-bottom: 1px solid var(--linie); }
.beitraege thead th { font-size: 0.8rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cw-ink-soft); }
.beitraege tbody th { font-weight: 600; } .beitraege small { display: block; color: var(--cw-ink-soft); font-weight: 500; }
.beitraege td { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 700; }
.beitraege tr.ist-gewaehlt { background: rgba(226, 181, 72, 0.22); }
.beitraege tr.ist-gewaehlt th::after { content: " · Ihre Wahl"; font-family: var(--hand); font-size: 1.15rem; color: var(--wald); }

/* -------------------------------------------- Einblicke: die Leine -- */
.einblicke { position: relative; padding-block: calc(var(--wh) + clamp(2rem, 5vw, 4rem)) clamp(4rem, 8vw, 7rem); color: var(--papier-hell); overflow: clip; isolation: isolate; }
.einblicke__wald { position: absolute; inset: 0; z-index: -1; }
.einblicke__wald img { width: 100%; height: 100%; object-fit: cover; display: block; }
.einblicke__wald::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 34, 20, 0.42), rgba(18, 34, 20, 0.12) 45%, rgba(18, 34, 20, 0.4)); }
.einblicke__h2 { color: var(--papier-hell); }
.einblicke .ww-lede { color: rgba(251, 248, 241, 0.88); }
.leine { position: relative; margin-top: clamp(1.6rem, 3vw, 2.4rem); height: var(--leine-h, 640px); }
.leine__flaeche { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.leine__bilder { list-style: none; margin: 0; padding: 0; }
/* Mit WebGL: unsichtbare Knöpfe über den Polaroids (Fokus, Klick, Vorleser) */
.mit-leine .leine__foto { position: absolute; left: 0; top: 0; width: var(--w, 10px); height: var(--h, 10px); transform: translate(var(--x, -999px), var(--y, -999px)) rotate(var(--r, 0deg));
  transform-origin: 50% 0; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 4px; }
.mit-leine .leine__foto > * { opacity: 0; }
.mit-leine .leine__foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mit-leine .leine__foto:focus-visible { outline: 3px solid #fff; outline-offset: 6px; }
/* Ohne WebGL: dieselben Fotos als ruhige Polaroids an einer gezeichneten Leine */
.leine:not(.mit-leine) { height: auto; }
.leine:not(.mit-leine) .leine__flaeche { display: none; }
.leine:not(.mit-leine) { overflow-x: clip; }
.leine:not(.mit-leine) .leine__bilder { display: flex; flex-wrap: wrap; justify-content: center; gap: 3.2rem 1.6rem; padding: 2.2rem var(--cw-gutter) 0; }
/* jede Reihe ihre Leine: alle Stücke einer Reihe liegen auf derselben Höhe und ergeben eine durchgehende Linie */
.leine:not(.mit-leine) li { position: relative; padding-top: 7px; }
.leine:not(.mit-leine) li::before { content: ""; position: absolute; top: 0; left: -100vw; right: -100vw; height: 2px; background: rgba(233, 223, 203, 0.85); box-shadow: 0 2px 2px rgba(0, 0, 0, 0.18); }
.leine:not(.mit-leine) .leine__foto { display: block; width: clamp(150px, 20vw, 240px); padding: 0.6rem 0.6rem 0.55rem; border: 0; background: #FBF9F3; cursor: pointer; rotate: var(--r, -2deg); transform-origin: 50% 0; box-shadow: 0 16px 30px -16px rgba(0, 0, 0, 0.6); position: relative; }
/* Klammer wie .klemme: Leine bei 74,5 %, Papierkante bei 85 % der Klammerhöhe (64 px), dazu Kontaktschatten */
.leine:not(.mit-leine) .leine__foto::before { content: ""; position: absolute; z-index: 2; left: 50%; top: -54px; width: 11.5px; height: 64px; translate: -50% 0; background: var(--klammer) center / 100% 100% no-repeat;
  filter: drop-shadow(-0.5px 1px 0.5px rgba(30, 22, 12, 0.45)) drop-shadow(-2px 4px 4px rgba(30, 22, 12, 0.2)); }
.leine:not(.mit-leine) .leine__foto::after { content: ""; position: absolute; z-index: 1; left: calc(50% - 12px); top: 2px; width: 22px; height: 12px; background: radial-gradient(60% 55% at 42% 20%, rgba(40, 28, 14, 0.3), rgba(40, 28, 14, 0)); }
.leine:not(.mit-leine) [data-klammer="rot"] { --klammer: url(assets/wald/klammer-vorn-rot.webp); }
.leine:not(.mit-leine) [data-klammer="orange"] { --klammer: url(assets/wald/klammer-vorn-orange.webp); }
.leine:not(.mit-leine) [data-klammer="gelb"] { --klammer: url(assets/wald/klammer-vorn-gelb.webp); }
.leine:not(.mit-leine) [data-klammer="gruen"] { --klammer: url(assets/wald/klammer-vorn-gruen.webp); }
.leine:not(.mit-leine) [data-klammer="blau"] { --klammer: url(assets/wald/klammer-vorn-blau.webp); }
.leine:not(.mit-leine) li:nth-child(even) .leine__foto { --r: 2deg; }
.leine:not(.mit-leine) .leine__foto img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; height: auto; }
.leine:not(.mit-leine) .leine__text { display: flex; align-items: center; justify-content: center; min-height: 2.3em; margin-top: 0.35rem; font-family: var(--hand); font-size: clamp(1rem, 3.4vw, 1.15rem); line-height: 1.05; color: #3B3A33; text-align: center; }
.leine:not(.mit-leine) .leine__text span { display: none; }
.einblicke__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem 2rem; margin-top: clamp(1.4rem, 3vw, 2.4rem); }
.einblicke__zitat { margin: 0; max-width: 52ch; font-family: var(--cw-font-display); font-style: italic; font-size: 1.12rem; color: rgba(251, 248, 241, 0.9); }
.einblicke__zitat span { display: block; margin-top: 0.3rem; font-family: var(--hand); font-style: normal; font-size: 1.3rem; color: #E9DFB8; }

/* Großansicht (aus der Lichtung) */
.gross { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; background: rgba(16, 24, 19, 0.9); padding: clamp(12px, 4vw, 56px); }
.gross[hidden] { display: none; }
.gross__bild { margin: 0; display: grid; gap: 0.8rem; justify-items: center; max-width: min(1400px, 100%); }
.gross__bild img { max-width: 100%; max-height: calc(100svh - 9rem); width: auto; height: auto; border-radius: 18px; box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.7); background: #222; }
.gross__bild figcaption { color: #F3EEE3; text-align: center; }
.gross__bild figcaption b { display: block; font-family: var(--cw-font-display); font-weight: 560; font-size: 1.3rem; }
.gross__bild figcaption span { font-size: 0.92rem; opacity: 0.8; }
.gross__zahl { position: absolute; top: 1.2rem; left: 1.4rem; margin: 0; color: #F3EEE3; font-weight: 700; font-variant-numeric: tabular-nums; }
.gross button { position: absolute; width: 52px; height: 52px; border-radius: 999px; border: 0; background: rgba(243, 238, 227, 0.14); color: #F6F1E6; display: grid; place-items: center; cursor: pointer; }
.gross button .ww-i { width: 22px; height: 22px; }
.gross__zu { top: 1rem; right: 1rem; }
.gross__zurueck { left: 1rem; top: 50%; translate: 0 -50%; } .gross__zurueck .ww-i { rotate: 180deg; }
.gross__weiter { right: 1rem; top: 50%; translate: 0 -50%; }
.gross button:focus-visible { outline: 3px solid #F6F1E6; outline-offset: 3px; }
@media (max-width: 699px) { .gross__zurueck, .gross__weiter { top: auto; bottom: 1rem; translate: none; } .gross__bild img { max-height: calc(100svh - 13rem); } }

/* -------------------------------------------- Konzept und Team -- */
.konzept__raster { display: grid; gap: clamp(2.4rem, 5vw, 4.4rem); }
@media (min-width: 1000px) { .konzept__raster { grid-template-columns: 1fr 1.1fr; align-items: center; } }
.konzept__bild { position: relative; margin: 2.2rem 0 0; padding: 0.8rem 0.8rem 3rem; background: #fff; box-shadow: var(--schatten-2); }
.konzept__bild .klemme { --kh: 4.8rem; }
.konzept__rahmen img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.konzept__bild figcaption { position: absolute; left: 0; right: 0; bottom: 0.7rem; text-align: center; font-family: var(--hand); font-size: 1.35rem; color: #3B3A33; }
.konzept__punkte { list-style: none; margin: 1.6rem 0; padding: 0; display: grid; gap: 1rem; }
.konzept__punkte li { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; color: var(--cw-ink-soft); }
.konzept__punkte li .punkt-hand { grid-row: span 2; margin-top: 0.1rem; }
.konzept__punkte b { color: var(--cw-ink); display: block; }
/* Team vor der großen Halle: der Papierhügel öffnet sich ein drittes Mal, diesmal ins Haus (unscharfes Originalfoto) */
.team-licht { position: relative; padding-block: calc(var(--wh) + clamp(2.4rem, 5vw, 4.4rem)) clamp(4rem, 8vw, 6.5rem); overflow: clip; isolation: isolate; }
.team-licht__foto { position: absolute; inset: 0; z-index: -1; }
.team-licht__foto img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 38%; }
/* Papierschleier dort, wo Text direkt auf dem Foto steht (links Überschrift, Leitung, Fußzeile); rechts scheint die Halle durch.
   Gemessen: ohne Schleier lag die Beschriftung „Leitung“ vor dem Sichtbeton bei 1,7:1 */
.team-licht__foto::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(247, 242, 232, 0.8), rgba(247, 242, 232, 0.6) 42%, rgba(247, 242, 232, 0.18) 78%),
    linear-gradient(180deg, rgba(247, 242, 232, 0.3), rgba(247, 242, 232, 0) 40%, rgba(247, 242, 232, 0.1) 75%, rgba(247, 242, 232, 0.65)); }
@media (max-width: 899px) { .team-licht__foto::after { background: linear-gradient(180deg, rgba(247, 242, 232, 0.78), rgba(247, 242, 232, 0.62) 30%, rgba(247, 242, 232, 0.4) 60%, rgba(247, 242, 232, 0.8)); } }
.team-licht .team { margin-block: 0; }
/* „Unser Gruppenbild aus Fingerabdrücken“ (Runde 4, Simon: „Personen noch besser darstellen“): keine Fotos, dafür je
   Person ein eigener Fingerabdruck in der Farbe ihres Bereichs (werkzeuge/wurzeln-team-abdruecke.py), Namen darunter wie
   auf einem Klassenfoto. Die drei Bereiche hängen als Tonpapier an einer Leine durch die Halle. Dieselbe Person hat
   überall denselben Abdruck; zeigt man auf sie, leuchten alle ihre Abdrücke auf. */
.team__idee { margin: 0.6rem 0 0; font-family: var(--hand); font-weight: 600; font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.65rem); line-height: 1.25; color: var(--wald); max-width: 34em; }
.team__leitung { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 1.2rem 3.2rem; margin: 1.8rem 0 0; }
.person { display: grid; justify-items: center; align-content: start; gap: 0.3rem; text-align: center; }
.person__abdruck { display: block; width: 3.3rem; height: auto; rotate: var(--r, 0deg); transition: scale 300ms cubic-bezier(0.3, 1.5, 0.5, 1), filter 300ms ease;
  filter: drop-shadow(0 1px 0.5px rgba(40, 28, 14, 0.12)); }
.person__name { font-family: var(--cw-font-display); font-weight: 500; font-size: 1rem; line-height: 1.2; color: var(--marine); text-wrap: balance; margin-top: 0.2rem; }
.person__rolle i { display: block; font-style: normal; }
.person__rolle { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3; color: var(--rolle, var(--cw-ink)); text-wrap: balance; }
.person.ist-gleich .person__abdruck { scale: 1.14; filter: drop-shadow(0 3px 6px rgba(40, 28, 14, 0.22)); }
.person--gross { grid-template-columns: auto auto; justify-items: start; align-items: center; gap: 1rem; text-align: left; }
.person--gross .person__abdruck { width: 4.3rem; }
.person--gross .person__text { display: grid; gap: 0.1rem; }
.person--gross .person__rolle { font-size: 0.78rem; color: var(--cw-ink); }
.person--gross .person__name { font-weight: 600; font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.75rem); margin: 0; }
.team__raster { position: relative; display: grid; gap: calc(var(--kh, 4.4rem) * 0.85 + 2rem) 1.6rem; align-items: start; margin-top: calc(4.4rem * 0.85 + 2.2rem); }
@media (min-width: 900px) { .team__raster { grid-template-columns: repeat(3, 1fr); } }
.teamblatt { position: relative; border-radius: 4px 4px 14px 4px; padding: clamp(1.5rem, 2.2vw, 2rem) clamp(1rem, 1.8vw, 1.5rem) clamp(1.5rem, 2.2vw, 1.9rem);
  background: var(--blatt) linear-gradient(170deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0) 45%); box-shadow: var(--schatten-2); rotate: var(--dreh, -0.6deg); transform-origin: 50% 0; }
.teamblatt::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0.55; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='f'><feTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.45 0 0 0 0 0.35 0 0 0 0.09 0'/></filter><rect width='100%25' height='100%25' filter='url(%23f)'/></svg>"); }
.teamblatt--krippe { --blatt: #E7EED8; --rolle: #3D6628; --dreh: -0.7deg; }
.teamblatt--kiga { --blatt: #E1E6F1; --rolle: #2F3C86; --dreh: 0.5deg; }
.teamblatt--haus { --blatt: #F5E5D2; --rolle: #8F4710; --dreh: -0.4deg; }
.teamblatt__titel { margin: 0 0 1.3rem; font-family: var(--cw-font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.2; color: var(--marine); text-wrap: balance; }
.teamblatt__leute { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: 1.4rem 0.5rem; }
@media (max-width: 359px) { .teamblatt__leute { grid-template-columns: 1fr 1fr; } }
/* Tupfen beim Erscheinen: einer nach dem anderen (seite.js setzt .team-an und je Blatt .ist-getupft) */
.team-an .person__abdruck { opacity: 0; scale: 1.4; }
.team-an .ist-getupft .person__abdruck { opacity: 1; scale: 1; transition: opacity 240ms ease calc(var(--k, 0) * 75ms), scale 460ms cubic-bezier(0.3, 1.5, 0.5, 1) calc(var(--k, 0) * 75ms), filter 300ms ease; }
.team-an .ist-getupft .person.ist-gleich .person__abdruck { scale: 1.14; transition-delay: 0ms; }
.team__fuss { margin-top: 1.4rem; }

/* --------------------------------------------------------- Anmeldung -- */
.anmeldung__raster { display: grid; gap: clamp(2rem, 4vw, 3.6rem); }
@media (min-width: 1000px) { .anmeldung__raster { grid-template-columns: 1fr 1.2fr; align-items: start; } }
.anmeldung__mehr { list-style: none; margin: 1.4rem 0 0; padding: 0; display: grid; gap: 0.4rem; }
.anmeldung__mehr a { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; text-decoration: none; }
.schritte { background: var(--papier-hell); border-radius: 26px; padding: clamp(1.4rem, 2.6vw, 2.2rem); box-shadow: var(--schatten-2); }
.schritte__titel { margin: 0 0 1rem; font-family: var(--hand); font-size: 1.6rem; color: var(--wald); }
.schritte__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.3rem; }
.schritt { display: grid; grid-template-columns: 2.6rem 1fr; gap: 1rem; }
.schritt__nr { width: 2.6rem; height: 2.6rem; border-radius: 50%; display: grid; place-items: center; font-family: var(--cw-font-display); font-weight: 600; font-size: 1.2rem; color: #fff; background: var(--wald); }
.schritt:nth-child(2) .schritt__nr { background: var(--blau); } .schritt:nth-child(3) .schritt__nr { background: var(--rot); }
.schritt__name { margin: 0.25rem 0 0.4rem; font-family: var(--cw-font-display); font-weight: 600; font-size: 1.25rem; }
.schritt__text { margin: 0 0 0.7rem; color: var(--cw-ink-soft); }
.wahlzettel { background: var(--papier); border-radius: 14px; padding: 0.8rem 1rem; }
.wahlzettel__ueber { margin: 0; font-size: 0.8rem; font-weight: 700; color: var(--cw-ink-soft); }
.wahlzettel__inhalt { margin: 0.2rem 0 0; }
.anmeldung__band { margin-top: clamp(2.4rem, 5vw, 3.6rem); }
.foerder { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "hand titel pfeil" "hand text pfeil"; gap: 0.2rem 1.2rem; align-items: center; padding: 1.4rem 1.6rem;
  border-radius: 22px; background: var(--papier-hell); color: var(--cw-ink); text-decoration: none; box-shadow: var(--schatten-1); transition: transform 160ms var(--cw-ease-out); }
.foerder:hover { transform: translateY(-2px); }
.foerder__hand { grid-area: hand; width: 2.9rem; height: 2.9rem; object-fit: contain; rotate: -12deg; }
.foerder__titel { grid-area: titel; font-family: var(--cw-font-display); font-weight: 600; font-size: 1.3rem; }
.foerder__text { grid-area: text; color: var(--cw-ink-soft); }
.foerder > .ww-i { grid-area: pfeil; width: 1.4rem; height: 1.4rem; color: var(--wald); }

/* ------------------------------------------- Schluss: Steinen am Abend -- */
.kontakt { position: relative; background: var(--papier); }
.kontakt__himmel { position: relative; height: clamp(300px, 46vw, 560px); overflow: hidden;
  background: linear-gradient(180deg, #1E2B48 0%, #34406A 32%, #8C6A86 64%, #E4A57A 88%, #F2C48E 100%); }
.kontakt__stern { position: absolute; left: var(--x); top: var(--y); width: 3px; height: 3px; border-radius: 50%; background: #FFF6DE; box-shadow: 0 0 6px 1px rgba(255, 246, 222, 0.6); opacity: 0.8; }
.kontakt__steinen { position: absolute; left: 50%; bottom: -2px; translate: -50% 0; width: min(1240px, 120vw); height: auto; overflow: visible; }
.kontakt__steinen .papier { fill: #E6D6BC; stroke: #3A3550; }
.kontakt__steinen .fein, .kontakt__steinen .huegel { stroke: #3A3550; }
.kontakt__steinen .fenster { fill: #3B3753; stroke: #3A3550; stroke-width: 0.8; transition: fill 600ms ease, filter 600ms ease; }
.kontakt.ist-abend .kontakt__steinen .fenster { fill: #FFD27A; filter: drop-shadow(0 0 3px rgba(255, 196, 96, 0.9)); transition-delay: calc(var(--n) * 120ms + 300ms); }
.kontakt.ist-abend .kontakt__steinen .fenster[data-kita] { fill: #FFE6A8; filter: drop-shadow(0 0 6px rgba(255, 210, 120, 1)); transition-delay: 0ms; }
.kontakt__papier { position: relative; background: var(--papier); }
.kontakt__papier::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--wh) * -1 + 1px); height: var(--wh); background: var(--papier);
  -webkit-mask: url("assets/wald/welle-1.svg") center / 100% 100% no-repeat; mask: url("assets/wald/welle-1.svg") center / 100% 100% no-repeat; }
.kontakt__raster { display: grid; gap: 2.4rem; padding-block: clamp(1rem, 3vw, 2rem) clamp(3rem, 6vw, 5rem); }
@media (min-width: 1000px) { .kontakt__raster { grid-template-columns: 1.2fr 1fr; align-items: center; } }
.kontakt__nummer { display: inline-flex; align-items: center; gap: 0.7rem; margin-top: 1.4rem; font-family: var(--cw-font-display); font-weight: 600; font-size: clamp(2.4rem, 1.6rem + 3vw, 4.4rem); color: var(--marine); text-decoration: none; letter-spacing: -0.02em; font-variant-numeric: lining-nums; }
.kontakt__nummer .ww-i { width: 0.7em; height: 0.7em; color: var(--wald); }
.kontakt__wege { list-style: none; margin: 1.2rem 0 0; padding: 0; display: grid; gap: 0.6rem; }
.kontakt__wege li { display: flex; align-items: flex-start; gap: 0.6rem; overflow-wrap: anywhere; }
.kontakt__wege .ww-i { margin-top: 0.25rem; color: var(--wald); }
.kontakt__leitung { margin: 1rem 0 0; color: var(--cw-ink-soft); }
.kontakt__karte { margin: 0; background: #fff; padding: 0.7rem 0.7rem 0.6rem; box-shadow: var(--schatten-2); rotate: 1.2deg; }
.kontakt__karte img { display: block; width: 100%; height: auto; }
.kontakt__karte figcaption { margin-top: 0.5rem; font-size: 0.74rem; color: var(--cw-ink-soft); }
.fuss { border-top: 1px solid var(--linie); padding-block: 1.6rem 2.2rem; }
.fuss__raster { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; font-size: 0.92rem; color: var(--cw-ink-soft); }
.fuss__traeger { margin: 0; }
.fuss__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; }
.fuss a { color: var(--cw-ink-soft); }

/* -------------------------------------------------------------- Handy -- */
@media (max-width: 860px) {
  .held .szene { --fx: 0.62; }
  .held .ebene--mitte { translate: 0 3%; }
  .schaukel { width: 16%; top: -18%; }   /* tiefer als am Desktop: Teddy sitzt frei unter Text und Heute-Zeile (Simon: „Teddy auf dem Handy sichtbarer“) */
  .held__text { left: var(--cw-gutter); right: var(--cw-gutter); width: auto; top: clamp(96px, 15svh, 140px); transform: translate3d(0, calc(var(--p, 0) * -8vh), 0); }
  .held__text { --titel: min(3.2rem, calc((100vw - 2 * var(--cw-gutter)) / 9.3)); }
  .held__lede { font-size: 1.02rem; max-width: 30ch; }
  .schleier { background: linear-gradient(180deg, rgba(248, 243, 232, 0.9) 0%, rgba(248, 243, 232, 0.72) 38%, rgba(248, 243, 232, 0) 62%); }
  .ort__steinen { --sw: min(118vw, 600px); left: -6vw; }
  .ort__spruch { right: var(--cw-gutter); font-size: 1.4rem; top: calc(var(--welle) * 0.42); }
  .nah__oben { display: none; }
  .nah__unten { width: 58vw; right: -30vw; bottom: 26%; opacity: 0.85; }
  .heute { font-size: 0.86rem; }
}
@media (max-width: 620px) {
  .held__wege { flex-wrap: nowrap; gap: 0.6rem; }
  .held__wege .knopf--wald { flex: 1 1 auto; }
  .knopf--ruf { width: 48px; padding: 0; flex: none; gap: 0; }
  .knopf--ruf span { display: none; }
  .knopf--ruf .ww-i { width: 20px; height: 20px; }
}

/* Ruhige Fassung: --p bleibt 0, nichts angeheftet, alles in seiner Anfangslage; der Aufbau bleibt als Überblendung */
@media (prefers-reduced-motion: reduce) {
  .licht i { animation: none; }
  .held-bereit .ort__steinen :is(.fein, .huegel) { animation: none; stroke-dashoffset: 0; }
  .held-bereit .ort__steinen .papier { animation: none; fill-opacity: 1; stroke-dashoffset: 0; }
  .ort__motto { display: none; }
  .held { min-height: 100svh; }
  .held .held__buehne { height: 100svh; }
  .js .stempel { transform: none; transition: opacity 300ms; }
}

/* -------------------------------------------------------- Unterseiten -- */
.ukopf { position: relative; background: var(--papier); }
.ukopf__wald { position: relative; height: clamp(260px, 42vh, 460px); overflow: hidden; }
.ukopf__wald img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
.ukopf__wald::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248, 243, 232, 0.5), rgba(248, 243, 232, 0) 40%); }
.ukopf__ort { position: absolute; left: 0; right: 0; top: clamp(260px, 42vh, 460px); translate: 0 -100%; height: clamp(90px, 12vh, 140px); pointer-events: none; --welle: clamp(90px, 12vh, 140px); }
.ukopf__ort .ort__welle { position: absolute; inset: 0; width: 100%; height: 100%; }
.ukopf__steinen { bottom: 40%; width: min(34vw, 520px); }
.ukopf__steinen :is(.papier, .fein, .huegel) { stroke-dashoffset: 0; }
.ukopf__steinen .papier { fill-opacity: 1; }
.ukopf__papier { position: relative; padding-block: 0.4rem clamp(1.6rem, 4vw, 3rem); }
.ukopf__ueber { margin: 0 0 0.4rem; font-family: var(--hand); font-size: 1.6rem; color: var(--wald); }
.ukopf__titel { font-size: clamp(2.3rem, 1.4rem + 3vw, 4.4rem); }
.useite { padding-top: clamp(1rem, 3vw, 2rem); }
.useite::before { display: none; }
.textblatt { max-width: 46rem; }
.textblatt p, .textblatt li { font-size: 1.1rem; line-height: 1.72; }
.textblatt h2 { font-family: var(--cw-font-display); font-weight: 560; font-size: clamp(1.7rem, 1.25rem + 1.4vw, 2.5rem); letter-spacing: -0.015em; line-height: 1.1; margin: 2.4em 0 0.6em; color: var(--marine); }
.textblatt h2:first-child { margin-top: 0; }
.textblatt h3 { font-size: 1.2rem; margin: 1.8em 0 0.4em; }
.textblatt a { font-weight: 700; }
.offen-hinweis { background: #F7E3A3; color: #4A3B10; border-radius: 6px; padding: 0.1em 0.35em; }
.textblatt figure { margin: 2.6rem 0; padding: 0.7rem 0.7rem 2.6rem; background: #fff; box-shadow: var(--schatten-2); rotate: -1deg; position: relative; }
.textblatt figure:nth-of-type(even) { rotate: 1deg; }
.textblatt figure img { width: 100%; height: auto; display: block; }
.textblatt figcaption { position: absolute; left: 0; right: 0; bottom: 0.6rem; text-align: center; font-family: var(--hand); font-size: 1.25rem; color: #3B3A33; }
.textblatt .zeiten { margin: 0.6rem 0 1.4rem; }
.galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: clamp(1.2rem, 2.4vw, 2rem); }
.galerie a { display: block; padding: 0.55rem 0.55rem 1.6rem; background: #fff; box-shadow: var(--schatten-1); rotate: var(--r, -1.2deg); transition: transform 300ms var(--cw-ease-out), rotate 300ms var(--cw-ease-out); }
.galerie a:nth-child(3n+2) { --r: 1.4deg; } .galerie a:nth-child(3n) { --r: -0.4deg; }
.galerie a:hover { rotate: 0deg; transform: translateY(-4px); }
.galerie img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.galerie__titel { margin: 3rem 0 1.2rem; }
.ufuss { background: var(--papier-b); padding-top: clamp(2.4rem, 5vw, 4rem); position: relative; }
.ufuss::before { content: ""; position: absolute; left: 0; right: 0; top: calc(var(--wh) * -1 + 1px); height: var(--wh); background: var(--papier-b);
  -webkit-mask: url("assets/wald/welle-2.svg") center / 100% 100% no-repeat; mask: url("assets/wald/welle-2.svg") center / 100% 100% no-repeat; }
.ufuss__raster { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.6rem; padding-bottom: 2rem; }
.ufuss__satz { margin: 0; font-family: var(--cw-font-display); font-weight: 600; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); color: var(--marine); margin-right: auto; }
.ww-i--zurueck { rotate: 180deg; }
@media (max-width: 860px) { .ukopf__steinen { width: min(70vw, 420px); } }

/* ganz schmale Telefone (320 px): Knöpfe und Zeitentabellen dürfen umbrechen */
.textblatt p, .textblatt li, .textblatt td { overflow-wrap: anywhere; }
@media (max-width: 420px) {
  .knopf--leise { white-space: normal; text-align: left; line-height: 1.25; padding-block: 0.55rem; }
  .zeiten td { white-space: normal; }
  .zeiten th { padding-right: 0.5rem; }
}
.ww-h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (max-width: 380px) { .ukopf__titel { font-size: 2.05rem; } }

/* Sprungmarken: Überschrift landet nicht unter der Leiste (am Handy ist die Hügelkante niedriger als die Leiste) */
.huegel[id] { scroll-margin-top: 1rem; }
@media (max-width: 899px) { .huegel[id] { scroll-margin-top: 2.8rem; } }

/* Ihr Tag auf niedrigen Bildschirmen ab Tablet-Breite (Laptops 1280×720, Tablet quer 1024×768): Kopf, Karte und Zeitleiste
   müssen übereinander passen, sonst verschwand die Karte unter der Zeitleiste oder ragte in die Wahl (Prüfung 09.10.2026) */
@media (min-width: 861px) and (max-height: 820px) {
  .tag__kopf { top: clamp(84px, 11.5vh, 104px); }
  .tag__h2 { font-size: clamp(1.9rem, 1.2rem + 1.6vw, 2.7rem); }
  .tag__anleitung { max-width: 62ch; }
  .tag__karte { --kp: 1.1rem; width: min(680px, 50vw); gap: 1.2rem; }
  .tag__foto { width: clamp(100px, 9vw, 132px); padding-bottom: 1.4rem; }
  .tag__uhr { font-size: clamp(2.6rem, 1rem + 3vw, 3.9rem); }
  .tag__zeit { margin-top: 0.45rem; }
  .tag__titel { font-size: clamp(1.25rem, 1rem + 0.7vw, 1.65rem); }
  .tag__text { font-size: 0.95rem; line-height: 1.45; }
}

/* Niedrige Handys (bis 700 px Höhe): die zweite Zeile der Heute-Anzeige („Nächste Schließzeit …“, steht auch unter
   „Auf einen Blick“) entfällt im Startbild, damit der Teddy unter der Anzeige frei bleibt */
@media (max-width: 860px) and (max-height: 700px) { .held .heute__neben { display: none; } .held .schaukel { top: -14%; } }

/* Ihr Tag auf niedrigen Handys: Kopf mit drei Wahlzeilen und Karte müssen übereinander passen */
@media (max-width: 860px) and (max-height: 760px) {
  .tag__kopf { top: 72px; gap: 0.5rem; }
  .tag__h2 { font-size: 1.75rem; }
  .tag__karte { --kp: 0.8rem; bottom: calc(clamp(16px, 4vh, 40px) + 100px); padding: 0.8rem 0.9rem; gap: 0.8rem; }
  .tag__foto .klemme { --kh: 2.6rem; }
  .tag__foto { width: 78px; padding: 0.35rem 0.35rem 1.2rem; }
  .tag__symbol { font-size: 0.8rem; bottom: 0.15rem; }
  .tag__uhr { font-size: 2.5rem; }
  .tag__zeit { margin-top: 0.4rem; }
  .tag__titel { font-size: 1.3rem; }
  .tag__text { font-size: 0.86rem; line-height: 1.4; }
}
@media (max-width: 380px) and (max-height: 760px) { .tag__foto { display: none; } }

/* ------------------------------------------ Wäscheklammer, Vorderansicht -- */
/* Man sieht den vorderen Arm; Papier und Leine stecken dahinter. Die Papierkante liegt bei 85 % der Klammerhöhe zwischen
   den Backen, die Leine bei 74,5 % im Loch (Werte aus werkzeuge/wurzeln-klammer-vorn.py, gleiche Werte in seite.js und
   leine.js). Das Bauteil sitzt mit top: 0 an der Oberkante des Papiers, --kx legt die Lage quer fest. */
.klemme { --kh: 4.4rem; position: absolute; z-index: 4; top: 0; left: var(--kx, 50%); width: calc(var(--kh) * 0.18); height: var(--kh);
  translate: -50% calc(var(--kh) * -0.85); pointer-events: none; }
.klemme img { display: block; width: 100%; height: 100%; filter: drop-shadow(-0.5px 1px 0.5px rgba(30, 22, 12, 0.45)) drop-shadow(-2px 4px 4px rgba(30, 22, 12, 0.2)); }
/* Kontaktschatten auf dem Papier direkt unter den Backen, leicht nach links unten (Licht von rechts oben) */
.klemme::after { content: ""; position: absolute; z-index: -1; left: -90%; right: -60%; top: 85.5%; height: calc(var(--kh) * 0.22);
  background: radial-gradient(closest-side at 46% 30%, rgba(40, 28, 14, 0.34), rgba(40, 28, 14, 0.12) 55%, rgba(40, 28, 14, 0)); }
/* Leine liegt hinter den Klammern: die Zettel (mit ihren Klammern) stehen eine Ebene darüber */
.schnur { position: absolute; left: 0; top: 0; width: 1px; height: 1px; overflow: visible; pointer-events: none; z-index: 0; }
.blick__raster .zettel, .blick__zu { z-index: 1; }
.schnur__faden { fill: none; stroke: #A0907A; stroke-width: 1.6; stroke-linecap: round; }
.schnur__schatten { fill: none; stroke: rgba(40, 28, 14, 0.2); stroke-width: 2; stroke-linecap: round; filter: url(#schnurschatten); }
.schnur__nagel { fill: url(#nagelkopf); }
.schnur__nagelschatten { fill: rgba(40, 28, 14, 0.28); }
@media (max-width: 860px) { .klemme { --kh: 3.8rem; } .konzept__bild .klemme { --kh: 4rem; } }
/* kleine Schrift direkt auf dem Hallenfoto in voller Tintenfarbe (gemessen ≥ 4,5:1 bis 320 px) */
.team-licht .team__fuss { color: var(--cw-ink); }
.nb { white-space: nowrap; }
/* gestapelte Zettel: zwischen zwei Reihen muss die Klammer samt Leine Platz haben (85 % der Klammerhöhe ragen über das Papier) */
.blick__raster { row-gap: calc(var(--kh-zettel, 4.4rem) * 0.85 + 1.4rem); }
.blick__zeiten { row-gap: calc(var(--kh-zettel, 4.4rem) * 0.85 + 1.2rem); }
@media (max-width: 860px) { .blick__raster, .blick__zeiten { --kh-zettel: 3.8rem; } }

/* Nur in der Demo: Hinweis, dass es ein Entwurf ist */
.demo-hinweis { position: fixed; left: clamp(8px, 1.8vw, 28px); bottom: max(10px, env(safe-area-inset-bottom)); z-index: 60;
  max-width: min(24rem, calc(100vw - 96px)); margin: 0; padding: 0.45rem 0.8rem; border-radius: 12px;
  background: rgba(34, 48, 95, 0.93); color: #F5EFE3; font-size: 0.8rem; line-height: 1.35; box-shadow: 0 6px 18px -8px rgba(20, 24, 40, 0.5);
  transition: opacity 250ms ease, visibility 250ms; }
.demo-hinweis a { color: #F1CF3E; font-weight: 700; }
.demo-hinweis.ist-weg, html:has(#menue:not([hidden])) .demo-hinweis, html:has(.gross:not([hidden])) .demo-hinweis { opacity: 0; visibility: hidden; }
@media (max-width: 860px) { .demo-hinweis { font-size: 0.74rem; padding: 0.35rem 0.65rem; } .demo-hinweis__lang { display: none; } }
@media (max-width: 380px) { .demo-hinweis { left: 6px; font-size: 0.66rem; padding: 0.3rem 0.5rem; border-radius: 9px; } }