@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/outfit.6c18d579.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif.5eb09b5a.woff2) format('woff2')}
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/instrument-serif-italic.5a51946d.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/dm-mono-400.e1896b13.woff2) format('woff2')}
@font-face{font-family:'DM Mono';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/dm-mono-500.9964608a.woff2) format('woff2')}
@font-face{font-family:'Exo 2';font-style:normal;font-weight:100 900;font-display:swap;src:url(/fonts/exo2.cb5ce0d8.woff2) format('woff2')}
@font-face{font-family:'Exo 2';font-style:italic;font-weight:100 900;font-display:swap;src:url(/fonts/exo2-italic.ba0061d6.woff2) format('woff2')}
:root{--sonne:#99592f;--it:#6c3c1f;--himmel-0:#d3d9dd;--himmel-nacht:#0f1012}
:root{
  --ink:#1f1b16; --muted:#4b453c; --line:#1f1b16; --himmel:#f4eee4; --gegen:#f6f1e9; --papier:#f6f2e8;
  --karte-grund:#fbf8f3; --karte-rand:var(--ink);   /* Papier der Karten; am Abend und in der Nacht dunkel (unten) */
  --blatt-fill:var(--sonne); --blatt-stroke:transparent; --zeiger:#1f1b16;
  --f-text:'Outfit',system-ui,sans-serif; --f-wort:'Instrument Serif',Georgia,serif; --f-mono:'DM Mono',ui-monospace,Menlo,monospace;
  --f-marke:'Exo 2',var(--f-text);   /* Schriftzug im Kopf und groß auf der Startseite: „leicht“ Exo 2 kursiv 300, „zeit“ Exo 2 800 (Variante 27) */
  --lineal:64px;
  color-scheme:light;
  font-synthesis-weight:none;
  /* Die letzte Kennzahl und „zeit“ in der Frage kräftig: Instrument Serif hat nur eine Stärke, darum Outfit (lädt ohnehin).
     „zeit“ im Schriftzug (Kopf und groß auf der Startseite) nimmt --schwer, aber Exo 2 (--f-marke) */
  --f-schwer:var(--f-text); --schwer:800;
}
/* Gescrollt wird body, nicht die ganze Seite: Safari stellt beim Neuladen nichts wieder her, die Leiste klappt nicht ein und aus,
   und oben federt nichts zurück (Safari rastete nach dem Federn auf das zweite Thema ein) */
html{height:100%;overflow:hidden}
body{height:100%;overflow-x:hidden;overflow-y:auto;scroll-snap-type:y mandatory;overscroll-behavior:none}
@media (max-height:560px){body{scroll-snap-type:y proximity}}
*{box-sizing:border-box}
/* Himmel: ein langer Verlauf über die ganze Seite (per JS auf body), html färbt nur das Überscrollen */
html{background:var(--himmel-0)}
html:has(body.nacht){background:var(--himmel-nacht)}
body{margin:0;background:#f4eee4 no-repeat;background-attachment:local;color:var(--ink);font:300 18px/1.6 var(--f-text);-webkit-font-smoothing:antialiased;transition:color .6s}
/* Themen in der Nacht haben helle Schrift (mit Skript je nach Uhrzeit, ohne Skript der Abend-Abschnitt); Karten bleiben hell wie Papier */
main>section[data-nacht],main>section.dunkel{--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--himmel:var(--himmel-nacht);--gegen:#1f1b16;color:var(--ink);color-scheme:dark}
/* Karten am Abend und in der Nacht: dunkles Papier mit heller Schrift (Wunsch 2026-10-21, vorher blieben sie hell); der Rechner ist ohnehin dunkel */
main>section.dunkel .karte:not(.tafel),main>section[data-nacht] .karte:not(.tafel),main>section.dunkel .blatt,main>section[data-nacht] .blatt{--ink:#f1ebe0;--muted:#b9b0a2;--line:#f1ebe0;--gegen:#1f1b16;--himmel:var(--himmel-nacht);--karte-grund:#25272a;--karte-rand:rgba(241,235,224,.5)}
main>section.dunkel .karte:not(.tafel){color:var(--ink)}
@media (min-width:761px){main>section.dunkel .karte.schritte{--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:var(--himmel-nacht)}}   /* am Desktop liegen die Schritte direkt auf dem Himmel */
/* Fixes (Kopf, Lineal, Uhrwerk, Punkte) richtet die Farbe nach dem Himmel an seiner Stelle */
.ton-hell{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9}
.ton-dunkel{--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16}
/* Körnung über der Seite, aber unter Kopf und Lineal; die tragen ihre eigene. Safari ab iOS 26 sucht die Farbe seiner Leisten per
   Treffer 4 px innerhalb der Ränder; ein Pseudo-Element darüber zählt dort als body, dann blieben die Leisten cremefarben */
body::after,.kopf::after,.lineal::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:14;opacity:.06;mix-blend-mode:multiply;
  background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.kopf::after,.lineal::after{position:absolute;z-index:auto}
body.nacht::after,body.nacht .kopf::after,body.nacht .lineal::after{mix-blend-mode:screen;filter:invert(1);opacity:.04}
/* Safari holt die Leistenfarbe nur neu, wenn ein festes Element dazukommt oder geht: das Skript blendet dieses hier kurz um */
.anstoss{position:fixed;left:50%;top:50%;width:1px;height:1px;opacity:0;pointer-events:none}
a{color:inherit}
p{margin:0}
.mono{font-family:var(--f-mono);font-weight:400}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.w{width:100%;max-width:1280px;margin:0 auto;padding-inline:clamp(20px,6vw,88px)}
.uhrhaken{width:1em;height:1em;flex:none}
.sprite{position:absolute}
.uh-blatt{fill:var(--blatt-fill);stroke:var(--blatt-stroke);stroke-width:1.5}
.uh-zeiger{fill:none;stroke:var(--zeiger);stroke-width:2.7;stroke-linecap:round;stroke-linejoin:round}
.uh-mitte{fill:var(--zeiger)}
/* Tastatur: sichtbarer Fokus, „Zum Inhalt“ als erster Halt */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
[tabindex="-1"]:focus{outline:none}
.sprung{position:fixed;left:12px;top:-80px;z-index:60;display:inline-flex;align-items:center;min-height:44px;padding:0 18px;background:var(--ink);color:var(--gegen);font:500 14px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.sprung:focus{top:calc(env(safe-area-inset-top,0px) + 12px)}

/* Das „it“ in leichtzeit: Lichtfarbe nach Tageszeit (aus src/farben, derzeit Silber), der i-Punkt ist der Mond in der echten Phase von heute (vorab.js); die Sonne ist das Logo im Kopf.
   Im Kopf ist der Schriftzug samt „it“ und Mond einfärbig (tagsüber fast Schwarz, nachts Creme), ebenso das Logo in Silber;
   im großen „zeit“ ist das „it“ ebenfalls einfärbig, dort bleibt der Mond in der Lichtfarbe */
.it{color:var(--it)}
.marke .it{color:inherit}.marke .sp{--mond:currentColor}
.riesig .it{color:inherit}
.ip{position:relative}
.sp{position:absolute;left:50%;bottom:var(--sp-unten,.905em);width:var(--sp,.15em);height:var(--sp,.15em);margin-left:calc(var(--sp,.15em) / -2 - var(--lw,0em) / 2);border-radius:50%}   /* über dem ı (Instrument Serif: Unterkante 0,31 em unter der Grundlinie); die Laufweite --lw kürzt den Kasten nur rechts, darum die halbe zurück */
.sp{--mond:color-mix(in srgb,#efe9dd calc(var(--nacht,0) * 100%),var(--sonne))}   /* tagsüber Lichtfarbe, nachts weiß (wie früher der Mond am Himmel) */
.sp svg{display:block;width:100%;height:100%;overflow:visible;transform:rotate(-20deg)}
.sp path{fill:var(--mond)}.sp circle{fill:var(--mond);opacity:.16}   /* der dunkle Teil als Hauch, damit der Punkt auch bei Neumond steht */

/* Fest: Kopf, Himmel, Lineal, Punkte */
.kopf{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);background:var(--himmel-0)}
.kopf .w{display:grid;grid-template-columns:1fr auto;align-items:center;gap:clamp(12px,2.4vw,32px);padding-block:12px}
.marke{display:inline-flex;align-items:baseline;text-decoration:none;font:30px/1 var(--f-wort);letter-spacing:-.01em;color:var(--ink);justify-self:start;transition:color .8s}
.marke .logo path{transition:fill .8s}   /* Logo und Schriftzug gleiten in neue Farben, statt umzuspringen */
.marke .l{font-family:var(--f-marke);font-style:italic;font-weight:300}
/* Logo (26q Gewölbt) vor dem Schriftzug: Tag in Silber, Abend in dunklem Silber, Nacht in Schriftfarbe, Fugen als Lücken; Mitte auf halber Versalhöhe.
   Auf dunklem Himmel (ton-dunkel) umgedreht: helles Silber, Nacht hell */
.marke .logo{flex:none;width:.8em;height:.8em;margin-right:.42em;position:relative;top:.05em}
/* Logo: drei Stufen hell, mittel, dunkel; ein-tag.js setzt sie nach dem Kontrast zum Himmel im Kopf (--logo-*), damit jede Stufe sichtbar bleibt
   (feste Silbertöne verschwanden im grauen Morgengrauen). Ohne Skript und auf den Unterseiten die Silbertöne, auf dunklem Himmel umgedreht */
.logo-tag{fill:var(--logo-tag,#8e949a)}.logo-abend{fill:var(--logo-abend,#5f656c)}.logo-nacht{fill:var(--logo-nacht,var(--ink))}
.ton-dunkel .logo-tag{fill:var(--logo-tag,#b8bdc2)}.ton-dunkel .logo-abend{fill:var(--logo-abend,#8a9097)}
.marke .z{font-family:var(--f-marke);font-weight:var(--schwer);letter-spacing:var(--lw);--lw:-.02em;--sp:.28em;--sp-unten:.754em}   /* Exo 2: Unterkante 0,2 em unter der Grundlinie; Mond so groß und hoch wie der i-Punkt von Exo 2 800 */
.knopf{justify-self:end;display:inline-flex;align-items:center;min-height:44px;font:500 14px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:14px 20px;background:var(--ink);color:var(--himmel,#f4eee4);text-decoration:none;white-space:nowrap;transition:background-color .3s,color .3s,box-shadow .3s}
.knopf:hover{background:color-mix(in srgb,var(--sonne),#1f1b16 15%);color:#f6f1e9}
.knopf.gross{padding:20px 28px;font-size:15px}
.leise{display:inline-flex;align-items:center;min-height:44px;font:400 14px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:8px}

.himmel{position:fixed;left:0;right:0;top:0;bottom:var(--lineal);overflow:hidden;z-index:0;pointer-events:none}
.sonne{position:absolute;left:0;top:0;width:clamp(58px,14vmin,150px);aspect-ratio:1;border-radius:50%;background:var(--sonne);will-change:transform;transition:box-shadow 1.2s}
body.nacht .sonne{box-shadow:0 0 140px 40px color-mix(in srgb,var(--sonne) 38%,transparent)}

.lineal{position:fixed;left:0;right:0;bottom:0;height:calc(var(--lineal) + env(safe-area-inset-bottom,0px));z-index:15;background:var(--himmel-0);border-top:1px solid var(--ink)}
/* Lineal symmetrisch: Ankerzeiten in gleichen Abständen, lange Striche darauf, je drei kurze dazwischen (mit Skript: 24 Stunden ab jetzt) */
.lineal .skala{position:absolute;left:10%;right:10%;top:0;height:20px}
.lineal .skala i{position:absolute;top:0;width:1px;height:10px;background:var(--ink)}
.lineal .skala i.lang{height:14px}
.lineal .skala i.fein{height:5px}
.lineal .skala b{position:absolute;top:0;width:2px;height:19px;margin-left:-1px;background:var(--sonne)}
.lineal span.std{position:absolute;top:24px;font:400 12px/1 var(--f-mono);letter-spacing:.06em;color:var(--muted);transform:translateX(-50%);transition:opacity .2s}
@media (max-width:760px){.lineal span.std{letter-spacing:0}}
/* Ohne Skript: feste Striche und Uhrzeiten des Lineals (mit Skript setzt aufbauen() sie selbst) */
html:not(.js) .lineal .skala i:nth-of-type(1){left:0%}html:not(.js) .lineal .skala i:nth-of-type(2){left:6.25%}html:not(.js) .lineal .skala i:nth-of-type(3){left:12.5%}html:not(.js) .lineal .skala i:nth-of-type(4){left:18.75%}html:not(.js) .lineal .skala i:nth-of-type(5){left:25%}html:not(.js) .lineal .skala i:nth-of-type(6){left:31.25%}html:not(.js) .lineal .skala i:nth-of-type(7){left:37.5%}html:not(.js) .lineal .skala i:nth-of-type(8){left:43.75%}html:not(.js) .lineal .skala i:nth-of-type(9){left:50%}html:not(.js) .lineal .skala i:nth-of-type(10){left:56.25%}html:not(.js) .lineal .skala i:nth-of-type(11){left:62.5%}html:not(.js) .lineal .skala i:nth-of-type(12){left:68.75%}html:not(.js) .lineal .skala i:nth-of-type(13){left:75%}html:not(.js) .lineal .skala i:nth-of-type(14){left:81.25%}html:not(.js) .lineal .skala i:nth-of-type(15){left:87.5%}html:not(.js) .lineal .skala i:nth-of-type(16){left:93.75%}html:not(.js) .lineal .skala i:nth-of-type(17){left:100%}
html:not(.js) .lineal .skala i:nth-of-type(18){left:3.125%}html:not(.js) .lineal .skala i:nth-of-type(19){left:9.375%}html:not(.js) .lineal .skala i:nth-of-type(20){left:15.625%}html:not(.js) .lineal .skala i:nth-of-type(21){left:21.875%}html:not(.js) .lineal .skala i:nth-of-type(22){left:28.125%}html:not(.js) .lineal .skala i:nth-of-type(23){left:34.375%}html:not(.js) .lineal .skala i:nth-of-type(24){left:40.625%}html:not(.js) .lineal .skala i:nth-of-type(25){left:46.875%}html:not(.js) .lineal .skala i:nth-of-type(26){left:53.125%}html:not(.js) .lineal .skala i:nth-of-type(27){left:59.375%}html:not(.js) .lineal .skala i:nth-of-type(28){left:65.625%}html:not(.js) .lineal .skala i:nth-of-type(29){left:71.875%}html:not(.js) .lineal .skala i:nth-of-type(30){left:78.125%}html:not(.js) .lineal .skala i:nth-of-type(31){left:84.375%}html:not(.js) .lineal .skala i:nth-of-type(32){left:90.625%}html:not(.js) .lineal .skala i:nth-of-type(33){left:96.875%}
html:not(.js) .lineal .skala b:nth-of-type(1){left:0%}html:not(.js) .lineal .skala b:nth-of-type(2){left:25%}html:not(.js) .lineal .skala b:nth-of-type(3){left:50%}html:not(.js) .lineal .skala b:nth-of-type(4){left:75%}html:not(.js) .lineal .skala b:nth-of-type(5){left:100%}
html:not(.js) .lineal span.std:nth-of-type(1){left:10%}html:not(.js) .lineal span.std:nth-of-type(2){left:30%}html:not(.js) .lineal span.std:nth-of-type(3){left:50%}html:not(.js) .lineal span.std:nth-of-type(4){left:70%}html:not(.js) .lineal span.std:nth-of-type(5){left:90%}
/* Quadratischer Punkt am Ende der Lichtlinie; die Uhrzeit steht frei darunter (kein Kasten), nur bei den fünf Abschnitten */
.lineal .marke-zeit{position:absolute;top:-4px;width:8px;height:8px;background:var(--ink);transform:translateX(-50%);transition:background-color .6s}
.lineal .vergangen{position:absolute;left:10%;top:-2px;width:0;height:4px;border-radius:0 2px 2px 0;background:var(--sonne)}
.lineal .zeit-jetzt{position:absolute;top:24px;z-index:1;transform:translateX(-50%);font:500 12.5px/1 var(--f-mono);letter-spacing:.06em;font-variant-numeric:tabular-nums;color:var(--ink)}
@media (max-width:760px){.lineal .zeit-jetzt{font-size:12px;letter-spacing:.02em}}
/* Auf der Startseite steht die echte Uhrzeit schon oben: dort keine Uhrzeit im Lineal; beim Themenwechsel blendet sie kurz aus und neu ein */
.lineal .zeit-jetzt{transition:opacity .18s}
.lineal.am-start .zeit-jetzt,.lineal .zeit-jetzt.blendet{opacity:0}

.punkte{position:fixed;right:clamp(4px,calc(2vw - 6px),22px);top:50%;transform:translateY(-50%);z-index:16;display:flex;flex-direction:column}
.punkte button{display:grid;place-items:center;width:24px;height:23px;padding:0;border:0;background:none;cursor:pointer}
.punkte button::before{content:"";width:11px;height:11px;box-sizing:border-box;border:1px solid var(--ink);transition:background-color .3s,transform .3s}
.punkte button[aria-current="step"]::before{background:var(--ink);transform:scale(1.25)}
.punkte button:hover::before{background:var(--sonne)}
@media (max-width:760px){.punkte{display:none}}

/* Abschnitte: ein Thema pro Bildschirm */
main{position:relative;z-index:1}
/* Mess-Anzeige (nur mit ?messen in der Adresse) */
.messwerte{position:fixed;left:8px;top:calc(env(safe-area-inset-top,0px) + 70px);z-index:60;margin:0;padding:8px 10px;background:rgba(0,0,0,.82);color:#9f9;font:500 11px/1.45 ui-monospace,Menlo,monospace;white-space:pre;pointer-events:none}
.messwerte[hidden]{display:none}
/* hidden gilt immer, auch bei Elementen mit eigenem display (Karten, Demo) */
[hidden]{display:none!important}
/* Themen weiter unten setzt der Browser erst, wenn man hinkommt (schnellerer Start bei 12 Themen); Platzhalter ein Bildschirm hoch,
   wie die Themen selbst. Ändert sich die Höhe beim Setzen, vermisst das Skript neu (ResizeObserver auf main) */
main>section:nth-child(n+3){content-visibility:auto;contain-intrinsic-size:auto 100svh}
main>section{min-height:100svh;scroll-snap-align:start;scroll-snap-stop:always;display:flex;align-items:center;padding:clamp(84px,14svh,110px) 0 calc(var(--lineal) + clamp(20px,6svh,56px))}
/* Startseite genau ein Bildschirm: ist ein Abschnitt höher als das Fenster, springt das Einrasten (vor allem Safari) zum nächsten Thema */
main>section.start{height:100svh;min-height:0;padding:calc(76px + env(safe-area-inset-top,0px)) 0 calc(var(--lineal) + 24px)}
/* Kontakt: am Desktop Frage links, Formular rechts (passt auf einen Bildschirm); am Handy länger, dort Zwischenhalte beim Formular und am Ende */
@media (min-width:901px){
  main>section.kontakt{padding-block:clamp(72px,12svh,110px) calc(var(--lineal) + clamp(16px,4svh,56px))}
  .kontakt .w{display:grid;grid-template-columns:1.05fr .95fr;column-gap:clamp(30px,5vw,80px);grid-template-areas:"ki ki" "fr fo" "dl fo" "fu fu";grid-template-rows:auto auto 1fr auto;align-items:end}
  .kontakt .direkt-links{grid-area:dl;align-self:start;margin-top:clamp(14px,3svh,34px)}
  .kontakt .kicker{grid-area:ki}
  .kontakt .frage{grid-area:fr;margin:0;align-self:start;font-size:clamp(44px,min(9.5vw,17svh),170px)}
  .kontakt .kontakt-zwei{grid-area:fo;display:block}
  .kontakt .anfrage{gap:clamp(10px,2svh,18px)}
  .kontakt .feld textarea{height:calc(1.4em * 2 + 16px)}
  .kontakt .danke{margin-top:clamp(12px,2.4svh,30px)}
  .kontakt .fuss{grid-area:fu;margin-top:clamp(18px,4svh,56px)}
}
@media (max-width:900px){
  main>section.kontakt{padding-top:calc(80px + env(safe-area-inset-top,0px));padding-bottom:calc(var(--lineal) + 8px)}
  .kontakt .kicker{margin-bottom:12px}
  .kontakt .frage{margin-bottom:14px}
  .kontakt .kontakt-zwei{gap:12px}
  .kontakt .anfrage{gap:10px}
  .kontakt .anfrage .text{font-size:16px;line-height:1.45}
  .kontakt .feld textarea{height:calc(1.4em + 14px);min-height:44px}
  .kontakt .feld textarea,.kontakt .feld input{font-size:17px;padding:4px 0 8px}
  .kontakt .anfrage .knopf{padding-block:14px;margin-top:4px}
  .kontakt .mini{line-height:1.45}
  .kontakt .direkt{margin-top:0}
  .kontakt .danke{margin-top:0;font-size:16px}
  .kontakt .fuss{margin-top:18px}
  .kontakt .fuss span{flex-basis:100%;margin-bottom:2px}
}
/* Kleine Handys (z. B. 375 × 667): Feierabend passt auf einen Bildschirm (Wunsch 2026-10-21), darum dichter */
@media (max-width:900px) and (max-height:760px){
  main>section.kontakt{padding-top:calc(72px + env(safe-area-inset-top,0px));padding-bottom:calc(var(--lineal) + 4px)}
  .kontakt .kicker{margin-bottom:6px}
  .kontakt .frage{font-size:clamp(34px,10.5vw,44px);margin-bottom:8px}
  .kontakt .direkt-links{margin-bottom:10px}
  .kontakt .direkt-links .mini{display:none}
  .kontakt .anfrage .mini{line-height:1.35}
  .direkt-wege{flex-direction:row;flex-wrap:wrap;gap:2px 18px;margin-top:4px}
  .direkt-wege a{font-size:19px}
  .kontakt .anfrage{gap:6px}
  .kontakt .anfrage .knopf{padding-block:12px;margin-top:2px}
  .kontakt .danke{display:none}
  .kontakt .fuss{margin-top:8px}
  .kontakt .fuss a{min-height:40px}
}
@media (max-width:900px) and (max-height:620px){
  .kontakt .anfrage{scroll-snap-align:start;scroll-margin-top:calc(80px + env(safe-area-inset-top,0px))}
  .kontakt .fuss{scroll-snap-align:end;scroll-margin-bottom:calc(var(--lineal) + 12px)}
}
.kicker{display:flex;align-items:center;gap:14px;font:400 13px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin:0 0 clamp(14px,3svh,26px)}
.kicker b{color:var(--ink);font-weight:500}
.kicker i{width:40px;height:1px;background:currentColor;opacity:.5}
.titel{font:800 clamp(40px,min(7.2vw,12.5svh),118px)/.95 var(--f-text);letter-spacing:-.045em;margin:0 0 clamp(16px,4svh,34px)}
.titel em{font-style:normal;font-weight:300}
.text{max-width:44ch;font-size:clamp(17px,1.4vw,20px);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:26px 0 0}
.chips li{font:400 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink);padding:8px 11px}

/* 1 · Start */
.start .w{display:grid;grid-template-columns:1fr auto;grid-template-areas:"ts ts" "wm wm" "sl cta" "un cta";column-gap:40px}
.zeitstempel{grid-area:ts;display:flex;align-items:center;gap:14px;font:400 13px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;margin:0 0 20px}
.zeitstempel b{font-weight:500;font-variant-numeric:tabular-nums}
.zeitstempel i{width:44px;height:1px;background:currentColor;opacity:.6}
.riesig{grid-area:wm;display:grid;margin:clamp(10px,4svh,64px) 0 0;font-family:var(--f-wort);font-weight:400;font-size:min(19vw,24svh);line-height:.8;letter-spacing:-.02em}
.riesig .l{justify-self:start;font-family:var(--f-marke);font-style:italic;font-weight:300;margin-left:-.04em;animation:einschweben 1.6s cubic-bezier(.2,.7,.2,1) both}
.riesig .z{justify-self:end;font-family:var(--f-marke);font-weight:var(--schwer);letter-spacing:var(--lw);--lw:-.04em;--sp:.28em;--sp-unten:.754em;animation:landen 1s .45s cubic-bezier(.2,.9,.25,1.15) both}   /* wie der Schriftzug im Kopf (Exo 2 kursiv 300 und 800) */
@keyframes einschweben{from{opacity:0;transform:translateY(-.12em);filter:blur(6px)}}
@keyframes landen{from{opacity:0;transform:translateY(.18em)}}
/* Der Mond über dem „it“ geht beim Öffnen auf */
.riesig .sp{transition:transform 1.6s cubic-bezier(.2,.8,.2,1),opacity .9s ease}
.riesig .sp svg{filter:drop-shadow(0 0 .2em color-mix(in srgb,var(--mond) 50%,transparent))}
.js .riesig:not(.aufgang) .sp{opacity:0;transform:translateY(.42em) scale(.5)}
.slogan{grid-area:sl;font:600 clamp(22px,2.4vw,36px)/1.15 var(--f-text);letter-spacing:-.02em;margin:26px 0 0;max-width:24ch}
.slogan em{font-style:normal;font-weight:400;background:linear-gradient(transparent 62%,var(--sonne) 62% 92%,transparent 92%);padding-inline:.04em}
.unter{grid-area:un;max-width:48ch;margin-top:14px}
.start .cta{grid-area:cta;align-self:end;display:flex;flex-direction:column;align-items:flex-end;gap:18px}
@media (max-width:760px){
  .start .w{grid-template-columns:1fr;grid-template-areas:"ts" "wm" "sl" "un" "cta"}
  .zeitstempel{margin-bottom:clamp(6px,2svh,20px)}
  .riesig{font-size:min(24vw,13svh);margin-top:clamp(6px,3svh,40px)}
  .slogan{font-size:clamp(20px,2.9svh,24px);margin-top:clamp(10px,2.6svh,26px)}
  .unter{font-size:16px;line-height:1.45;margin-top:clamp(6px,1.4svh,14px)}
  .start .cta{align-items:flex-start;margin-top:clamp(12px,3svh,30px);gap:clamp(10px,2svh,18px)}
  .start .knopf.gross{padding-block:clamp(13px,2.4svh,20px)}
}

/* Themen: Inhalt + Karte (Desktop zweispaltig, Handy: eine Karte pro Bildschirm) */
.thema{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:clamp(30px,6vw,96px);align-items:center}
/* Am Computer richtet sich der Titel auch nach seiner Spalte, damit das längste Wort („Papierkram“) hineinpasst und die Karte daneben nicht schrumpft */
@media (min-width:761px){.thema:not(.breit)>.inhalt{container-type:inline-size}.thema:not(.breit)>.inhalt .titel{font-size:min(clamp(40px,min(7.2vw,12.5svh),118px),20cqi)}}
@media (min-width:761px) and (max-width:1100px){.karte.stapel{aspect-ratio:1}}   /* schmale Computer: mehr Höhe für die Mitteilungen */
.thema .inhalt{order:1}
.thema .karte,.thema .reihe,.thema .fragen-karte{order:2}
.thema.breit{grid-template-columns:1fr;gap:26px}
.kurz{display:none}
.karte{position:relative;margin:0;border:1px solid var(--karte-rand);background:var(--karte-grund);aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden}
.karte .nr{position:absolute;left:14px;top:12px;font:400 12px/1 var(--f-mono);letter-spacing:.12em}
.karte svg.linie{width:78%;height:auto;fill:none;stroke:var(--ink);stroke-width:1.2;stroke-linecap:round;stroke-linejoin:round}
.karte .sonnig{fill:var(--sonne);stroke:var(--ink)}

/* Liebe zum Detail: winzige Notizen in der Mini-Website, lesbar nur unter der Lupe */
.karte svg .details text{font:500 2.8px var(--f-mono);letter-spacing:.02em;fill:var(--ink);stroke:none;opacity:.6}
.karte svg .duenn{stroke-width:.6;opacity:.55}
.lupe{position:absolute;left:0;top:0;width:clamp(120px,32%,170px);aspect-ratio:1;pointer-events:none;opacity:0;transition:opacity .4s;z-index:2}
.lupe.an{opacity:1}
.lupe-innen{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--karte-grund);border:2px solid var(--ink);box-shadow:0 10px 26px rgba(0,0,0,.18),inset 0 0 0 4px rgba(255,255,255,.6)}
.lupe-innen svg.linie{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0}
/* Im Glas: Ebene aus Zeichnung und unserer Seite (Röntgenblick), gemeinsam verschoben und vergrößert */
.lupe-ebene{position:absolute;left:0;top:0;transform-origin:0 0}
.lupe-ebene svg.linie{position:static;width:100%;height:100%;transform:none}
.lupe-seite{position:absolute;left:5%;top:19.29%;width:90%;height:73.57%;overflow:hidden;border-radius:0 0 1.5% 1.5%}
.lupe-seite picture{display:block;width:100%;height:100%}
.lupe-seite img{display:block;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top}
.lupe::after{content:"";position:absolute;left:14.6%;top:85.4%;width:32%;height:9%;margin-top:-4.5%;border-radius:4px;background:var(--sonne);transform:rotate(135deg);transform-origin:0 50%;box-shadow:0 0 0 1.5px var(--ink)}   /* Griff nach unten links, weg vom Hörer */
.lupe-hinweis{position:absolute;right:14px;bottom:11px;font:400 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.lupe-hinweis .finger{display:none}
@media (pointer:coarse){.lupe-hinweis .maus{display:none}.lupe-hinweis .finger{display:inline}}
.karte .hoerer{transform-box:fill-box;transform-origin:50% 50%}
.klingelt .hoerer{animation:klingeln 1.1s ease-in-out 2}
/* Hörer schwingt zweimal kurz hin und her (nur Bewegung, kein Ton) */
@keyframes klingeln{0%,60%,100%{transform:none}8%,24%,40%{transform:rotate(-14deg)}16%,32%,48%{transform:rotate(14deg)}}
::selection{background:var(--ink);color:var(--gegen)}   /* markierte Schrift: Anthrazit mit heller Schrift, nachts umgekehrt */
.tafel::selection,.tafel ::selection{background:#f6f1e9;color:#1c1e21}
.knopf::selection,.ansage::selection,.ansage ::selection{background:var(--himmel,#f4eee4);color:var(--ink)}

/* Schatten nach Sonnenstand: morgens lang nach rechts, mittags kurz, abends lang nach links, nachts kaum */
.karte{box-shadow:var(--schatten-x,4px) var(--schatten-y,5px) 2px rgb(var(--schatten-farbe,38 30 22) / var(--schatten-a,.12))}
@media (min-width:761px){.karte.schritte{box-shadow:none}}
/* Nacht: Sterne blenden nach Sonnenuntergang ein (der Mond ist der i-Punkt in „zeit“) */
.sterne{position:absolute;inset:0 0 28% 0;opacity:var(--nacht,0)}
/* Schein um die Sonne und die Berge rund um Spielberg über dem Lineal (ein-tag.js: bergeSvg, Farben nach Himmel und Tageszeit) */
.schein{position:absolute;left:0;top:0;width:min(90vmax,1200px);aspect-ratio:1;border-radius:50%;pointer-events:none;will-change:transform}
.horizont{position:absolute;left:0;right:0;bottom:0;height:clamp(90px,17vh,170px);pointer-events:none}
@media (max-width:760px){.horizont{height:clamp(70px,12vh,120px)}}
.horizont svg{display:block;width:100%;height:100%}
.horizont .fern{fill:var(--berg-fern,#c9c9c4)}.horizont .mitte{fill:var(--berg-mitte,#a9b0a4)}.horizont .tal{fill:var(--berg-tal,#8f887c)}
.horizont .lichter{fill:#ffbf5a;opacity:var(--lichter,0)}
.sterne i{position:absolute;width:2px;height:2px;border-radius:50%;background:#f6f1e9;animation:funkeln 3.2s ease-in-out infinite alternate}
@keyframes funkeln{from{opacity:.2}to{opacity:1}}
/* Betriebs-Apps: Termine haken sich mit der Zeit ab, Antippen hakt ab */
.termin{cursor:pointer;transition:background-color .4s,border-color .4s,opacity .4s}
.termin svg{opacity:0;transform:scale(.3);transition:opacity .25s,transform .35s cubic-bezier(.3,1.6,.5,1)}
.termin.erledigt svg{opacity:1;transform:none}
/* Weniger Papierkram: Mitteilungen kommen nacheinander, die Rechnung schreibt sich */
.stapel.kommt .note{animation:hereinkommen .5s cubic-bezier(.2,.8,.2,1) both}
.stapel.kommt .note:nth-child(2){animation-delay:.45s}
.stapel.kommt .note:nth-child(3){animation-delay:.9s}
@keyframes hereinkommen{from{opacity:0;transform:translateY(-14px) scale(.97)}}
.note .rest{visibility:hidden}
.note .getippt.tippt::after{content:"";display:inline-block;width:1px;height:1em;margin-left:2px;vertical-align:-2px;background:currentColor;animation:schreibmarke .8s steps(1) infinite}
@keyframes schreibmarke{50%{opacity:0}}
/* Vier Schritte leuchten nacheinander auf */
.schritte li,.schritte li::before{transition:background-color .35s}
.schritte h3::before{transition:color .35s}
.schritte li.leuchtet h3::before{color:var(--it)}
.schritte li.leuchtet::before{background:var(--sonne)}
@media (max-width:760px){.schritte li.leuchtet{background:color-mix(in srgb,var(--sonne) 14%,var(--karte-grund))}}
/* Eure Daten: Antippen von „0 Cookies“ zerbröselt einen Keks */
.zahlen-zeile li.keks-zeile{cursor:pointer}
.keks{position:absolute;width:30px;height:30px;border-radius:50%;background:#c79a5f;box-shadow:inset -3px -3px 0 rgba(0,0,0,.12);pointer-events:none;animation:keks-da .3s ease-out both}
.keks::before{content:"";position:absolute;left:8px;top:9px;width:5px;height:5px;border-radius:50%;background:#4a2f1d;box-shadow:9px 3px 0 #4a2f1d,3px 10px 0 #4a2f1d}
.krume{position:absolute;width:6px;height:6px;border-radius:2px;background:#c79a5f;pointer-events:none}
.keks-text{position:absolute;font:600 17px/1.2 var(--f-text);color:var(--ink);white-space:nowrap;pointer-events:none;animation:keks-text 1.9s ease both}
@keyframes keks-da{from{transform:scale(.2);opacity:0}}
@keyframes keks-text{0%{opacity:0;transform:translateY(6px)}15%,75%{opacity:1;transform:none}100%{opacity:0}}
/* Lineal als Zeitregler: Zeitmarke ziehen oder antippen spult durch den Tag */
.lineal{cursor:grab;touch-action:none}
.lineal.zieht{cursor:grabbing}

/* Ladezeit dieser Seite, im Browser gemessen */
.messung{display:flex;align-items:center;gap:20px;margin-top:32px}
.messung b{font:800 clamp(48px,4.8vw,76px)/1 var(--f-text);letter-spacing:-.03em;white-space:nowrap;font-variant-numeric:tabular-nums}
.messung b small{font:400 15px/1 var(--f-mono);letter-spacing:.1em;margin-left:4px}
.messung>span{max-width:30ch;font:400 12px/1.65 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-left:20px;border-left:1px solid var(--ink)}

/* Handy */
.karte.handy{aspect-ratio:9/16;width:min(320px,100%,calc((100svh - 236px) * 9 / 16));justify-self:center;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px;padding:34px 14px 14px;background:var(--karte-grund)}
.karte.handy::before{content:"";position:absolute;top:14px;left:50%;width:56px;height:2px;background:var(--ink);transform:translateX(-50%)}
.handy-kopf{display:flex;justify-content:space-between;align-items:center;padding:6px 6px 4px;font:500 12px/1 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.handy-kopf .uhrhaken{width:19px;height:19px}
.termin{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;padding:11px 10px;border-bottom:1px solid var(--line);font-size:14px;line-height:1.25;text-align:left;color:var(--ink)}
.termin .mono{font-size:12px;font-weight:500}
.termin small{display:block;color:var(--muted);font-size:12px}
.termin.aktuell,.termin.aktuell small{color:#f6f1e9}
.termin.erledigt{opacity:.5}
.termin.aktuell{background:color-mix(in srgb,var(--sonne),#1f1b16 15%);border-color:transparent}   /* Kupfer etwas tiefer, helle Schrift ≥ 4,5 : 1 */
.termin svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.handy-push{margin-top:auto;border:1px dashed var(--line);padding:10px;font-size:12px;line-height:1.35;text-align:left;color:var(--ink)}

/* Benachrichtigungen */
.karte.stapel{padding:24px}
.stapel-in{display:grid;gap:12px;width:min(420px,100%)}
.note{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;border:1px solid var(--line);background:var(--karte-grund);padding:14px 16px;text-align:left;color:var(--ink)}
.note:nth-child(2){margin-left:22px}
.note .posten{display:grid;grid-template-columns:1fr auto;gap:0 18px;margin-top:7px;padding-top:6px;border-top:1px solid color-mix(in srgb,currentColor 45%,transparent);font:400 12px/1.45 var(--f-mono);font-variant-numeric:tabular-nums}
.note:nth-child(3){margin-left:44px;background:color-mix(in srgb,var(--sonne),#1f1b16 15%)}
.note .mono{font-size:12px;font-weight:500;padding-top:3px}
.note b{display:block;font-weight:500;font-size:15.5px}
.note span.t{font-size:14px;color:var(--muted)}
.note:nth-child(3),.note:nth-child(3) span.t{color:#f6f1e9;border-color:#1f1b16}

/* Fallblatt-Tafel */
.karte.tafel{aspect-ratio:auto;display:block;place-items:stretch;justify-items:stretch;background:#1c1e21;color:#f6f1e9;border-color:#1c1e21;padding:clamp(18px,3vw,34px) clamp(18px,3vw,40px)}
.plus{white-space:nowrap;font:500 20px/1 var(--f-mono)}
.plus i{font-style:normal;display:inline-block;min-width:.74em;padding:.16em .05em;margin-left:3px;text-align:center;border-radius:3px;color:color-mix(in srgb,var(--sonne),#f6f1e9 45%);   /* Kupfer auf der dunklen Tafel aufgehellt (≥ 4,5 : 1) */
  background:linear-gradient(transparent calc(50% - .5px),#000 calc(50% - .5px) calc(50% + .5px),transparent calc(50% + .5px)),#2a2c30;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 1px 0 #000}
.plus i:first-child{margin-left:0}
.plus i.klapp{animation:klapp .34s cubic-bezier(.3,.7,.3,1)}
@keyframes klapp{from{transform:perspective(160px) rotateX(-85deg);filter:brightness(.5)}}

/* 4 · Zeit-Rechner */
.karte.rechner-tafel{display:flex;flex-direction:column;justify-content:center;gap:clamp(14px,2.4vh,24px)}
.regler label{display:flex;justify-content:space-between;align-items:center;gap:12px;font:400 12px/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#b3aa9c}
.regler .plus{font-size:18px}
.rechner-tafel input[type=range]{-webkit-appearance:none;appearance:none;display:block;width:100%;height:44px;margin:0;font-size:16px;background:transparent;cursor:pointer;--fill:50%}
.rechner-tafel input[type=range]::-webkit-slider-runnable-track{height:2px;background:linear-gradient(90deg,var(--sonne) var(--fill),rgba(246,241,233,.28) var(--fill))}
.rechner-tafel input[type=range]::-moz-range-track{height:2px;background:linear-gradient(90deg,var(--sonne) var(--fill),rgba(246,241,233,.28) var(--fill))}
.rechner-tafel input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-10px;border:0;border-radius:50%;background:var(--sonne);box-shadow:0 0 0 6px color-mix(in srgb,var(--sonne) 16%,transparent);transition:box-shadow .2s}
.rechner-tafel input[type=range]::-moz-range-thumb{width:22px;height:22px;border:0;border-radius:50%;background:var(--sonne);box-shadow:0 0 0 6px color-mix(in srgb,var(--sonne) 16%,transparent)}
.rechner-tafel input[type=range]:active::-webkit-slider-thumb{box-shadow:0 0 0 11px color-mix(in srgb,var(--sonne) 22%,transparent)}
.rechner-tafel input[type=range]:focus-visible{outline:2px dashed var(--sonne);outline-offset:2px}
.ergebnis{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;padding-top:clamp(12px,2.2vh,22px);border-top:1px dashed rgba(255,255,255,.35)}
.ergebnis .was{flex-basis:100%;font:400 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#b3aa9c}
.plus.gross{font-size:clamp(32px,3.6vw,50px)}
.ergebnis .einheit{font:400 13px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#b3aa9c}
.ergebnis .wochen{flex-basis:100%;font:600 clamp(20px,2vw,27px)/1.2 var(--f-text);letter-spacing:-.02em;color:#f6f1e9}
.rechner-fuss{display:flex;justify-content:space-between;align-items:center;gap:10px 16px;flex-wrap:wrap;font:400 12px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:#b3aa9c}
.rechner-fuss a{color:color-mix(in srgb,var(--sonne),#f6f1e9 45%);text-decoration:none;border-bottom:1px solid currentColor;padding-bottom:3px}

/* Schritte */
.karte.schritte{aspect-ratio:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:28px;border:0;background:none;list-style:none;padding:0;margin:6px 0 0;counter-reset:s;place-items:stretch;overflow:visible}
.karte.schritte::before{content:"";position:absolute;left:0;right:0;top:6px;height:1px;background:var(--ink)}
.schritte li{position:relative;padding-top:40px;counter-increment:s}
.schritte li::before{content:"";position:absolute;left:0;top:0;width:13px;height:13px;background:var(--ink)}
.schritte li:first-child::before{background:var(--sonne);box-shadow:inset 0 0 0 1px var(--ink)}
.schritte .wann{font:400 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.schritte h3{font:700 26px/1.1 var(--f-text);letter-spacing:-.02em;margin:12px 0 8px}
.schritte h3::before{content:counter(s,upper-roman);display:block;font:800 46px/1 var(--f-text);margin-bottom:6px}
.schritte p{font-size:16px}

/* Zahlen-Karten (Werkstatt, Ehrlich) */
/* Fragen: kleine Kennzahlen unter dem Titel (vorher eigenes Thema „Ehrlich gesagt“, 2026-10-21 hierher) */
.zahlen-zeile{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:22px 0 0;padding:0;list-style:none}
.zahlen-zeile li{display:flex;align-items:baseline;gap:8px;font:400 12px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.zahlen-zeile b{font:800 38px/1 var(--f-text);letter-spacing:-.03em;color:var(--ink)}
.zahlen-zeile li:last-child b{font-style:normal;font-family:var(--f-schwer);font-weight:var(--schwer)}
/* nur für Screenreader (z. B. Namen der Arbeiten, die schon im Bild stehen) */
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

@media (max-width:900px) and (min-width:761px){.thema{grid-template-columns:1fr}.karte.schritte{grid-template-columns:1fr 1fr}}
@media (max-width:1100px) and (min-width:761px){.paket-liste{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Handy: jedes Thema genau ein Bildschirm, Karte oben, Titel und Meta darunter */
@media (max-width:760px){
  main>section{height:100svh;min-height:0;padding:calc(66px + env(safe-area-inset-top,0px)) 0 calc(var(--lineal) + 16px)}
  main>section.kontakt{height:auto;min-height:100svh}
  main>section.start{height:100svh;padding:calc(66px + env(safe-area-inset-top,0px)) 0 calc(var(--lineal) + 12px)}
  main>section.kontakt{padding-top:calc(100px + env(safe-area-inset-top,0px))}
  .thema,.thema.breit{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;height:100%;text-align:center}
  .thema .karte{order:1;width:100%;height:min(47svh,410px);aspect-ratio:auto;flex:none;margin:0}
  @media (max-height:600px){.thema .karte{height:41svh}.thema .inhalt::before{margin:14px 0 10px}}
  .thema .karte.handy{width:min(100%,290px)}
  .thema .inhalt{order:2;display:flex;flex-direction:column;align-items:center}
  .thema .inhalt::before{content:"";width:48px;height:1px;background:var(--ink);margin:22px 0 14px;opacity:.7}
  .thema .titel{order:1;font-size:clamp(30px,9.4vw,42px);line-height:1.02;margin:0 0 10px}
  .thema .kicker{order:2;margin:0;font-size:12px;gap:8px}
  .thema .kicker i{width:auto;height:auto;background:none;opacity:1}
  .thema .kicker i::before{content:"·"}
  .thema .text,.thema .chips,.thema .messung{display:none}
  .kurz{display:block;order:3;max-width:34ch;font-size:16px;line-height:1.45;color:var(--muted);margin-top:12px}
  .kurz b{color:var(--ink);font-weight:500}
  .karte.stapel{padding:14px}
  .note{padding:11px 13px}.note:nth-child(2){margin-left:14px}.note:nth-child(3){margin-left:28px}
  .karte.tafel{display:flex;flex-direction:column;justify-content:center;align-items:stretch;padding:14px 18px}
  .karte.rechner-tafel{gap:12px;text-align:left}
  .regler .plus{font-size:16px}
  .rechner-tafel input[type=range]{margin-top:2px}
  .ergebnis .wochen{font-size:19px}
  .rechner-fuss span{display:none}
  .karte.schritte{grid-template-columns:1fr 1fr;gap:0;border:1px solid var(--karte-rand);background:var(--karte-grund);padding:0}
  .karte.schritte::before{display:none}
  .schritte li{padding:14px 10px;border-right:1px solid var(--ink);border-bottom:1px solid var(--ink);display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center}
  .schritte li:nth-child(2n){border-right:0}
  .schritte li:nth-child(n+3){border-bottom:0}
  .schritte li::before{display:none}
  .schritte .wann{font-size:12px}
  .schritte h3{font-size:21px;margin:6px 0 0}
  .schritte h3::before{font-size:36px;margin-bottom:2px}
  .schritte p{display:none}
  .zahlen-zeile{order:3;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:6px 18px;margin-top:12px}
  .zahlen-zeile b{font-size:30px}
}

/* Feierabend · Kontakt */
.frage{font:800 clamp(46px,min(9.5vw,16svh),156px)/.95 var(--f-text);letter-spacing:-.045em;margin:0 0 36px}
.frage .l{font-family:var(--f-marke);font-style:italic;font-weight:300;letter-spacing:-.02em}   /* „leicht“ wie im Schriftzug */
.frage .z{font-family:var(--f-schwer);font-weight:var(--schwer);letter-spacing:-.04em}
.kontakt-zwei{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(30px,6vw,96px);align-items:end}
.anfrage{display:grid;gap:18px;max-width:560px}
.anfrage .text{margin-bottom:4px}
.feld{display:grid;gap:6px}
.feld>span{font:400 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.feld textarea,.feld input{width:100%;min-height:44px;font:300 19px/1.4 var(--f-text);color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:6px 0 10px;resize:none;outline:none;transition:border-color .3s,box-shadow .3s}
.feld textarea:focus,.feld input:focus{border-bottom-color:var(--sonne);box-shadow:0 1px 0 var(--sonne)}
.feld ::placeholder{color:var(--muted);opacity:.75}
.anfrage .knopf{justify-self:start;border:0;cursor:pointer;margin-top:8px}
.anfrage .mini{margin:0}
.form-info{color:color-mix(in srgb,var(--sonne),var(--ink) 45%)}   /* Kupfer zur Schriftfarbe hin: am Tag dunkler, in der Nacht heller */
.feld [aria-invalid="true"]{border-bottom:2px solid var(--sonne)}
/* Honeypot gegen Spam: für Menschen unsichtbar */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-info:empty{display:none}
.direkt .mail{font-size:clamp(28px,3.4vw,52px);margin-top:12px}
.direkt .mini:first-child{margin-top:0}
.mail{display:inline-block;font:700 clamp(28px,4.6vw,70px)/1.05 var(--f-text);letter-spacing:-.02em;text-decoration:none;padding-bottom:8px;border-bottom:2px solid var(--sonne);margin-top:34px;overflow-wrap:anywhere;transition:color .4s}
.mail:hover{color:color-mix(in srgb,var(--sonne),var(--ink) 45%)}
.mini{font:400 12px/1.7 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:26px}
.danke{margin-top:30px;font:600 clamp(19px,1.7vw,24px)/1.35 var(--f-text);letter-spacing:-.02em;color:var(--muted)}
.danke .dauer{font-style:normal;font-family:var(--f-text);font-weight:500;color:var(--ink);font-variant-numeric:tabular-nums}
.fuss{display:flex;flex-wrap:wrap;align-items:center;gap:0 24px;margin-top:56px;font:400 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.fuss a{display:inline-flex;align-items:center;min-height:44px;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
@media (max-width:900px){.kontakt-zwei{grid-template-columns:1fr}.direkt{margin-top:10px}}

/* Blätter: Papier wie die Karten, Schatten nach Sonnenstand, nachts bleibt das Papier hell (Arbeiten, Pakete, Fragen) */
.blatt{position:relative;border:1px solid var(--karte-rand);background:var(--karte-grund);color:var(--ink);
  box-shadow:var(--schatten-x,4px) var(--schatten-y,5px) 2px rgb(var(--schatten-farbe,38 30 22) / var(--schatten-a,.12))}
.blatt h3{font:700 clamp(22px,1.9vw,29px)/1.05 var(--f-text);letter-spacing:-.02em;margin:0}
.reihe:focus-visible{outline:2px solid var(--ink);outline-offset:6px}
.reihe{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.2vw,30px);align-items:stretch}
/* Am Computer: links Titel, rechts die Blätter */
@media (min-width:901px){
  .arbeiten .thema.breit,.fragen .thema.breit{grid-template-columns:minmax(0,.62fr) minmax(0,2fr);gap:clamp(28px,4vw,64px);align-items:center}
  .arbeiten .titel,.fragen .titel{font-size:clamp(40px,4.6vw,72px)}   /* schmale Spalte neben den Blättern: das längste Wort muss hineinpassen */
  /* Pakete: vier Blätter, darum der Titel oben und die Blätter darunter in einer Reihe */
  .pakete .thema.breit{gap:clamp(14px,2.6svh,28px)}
  .pakete .inhalt{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:clamp(24px,4vw,64px);align-items:end}
  .pakete .inhalt .kicker{grid-column:1/-1}
  .pakete .titel{margin:0}
  .pakete .inhalt .text{max-width:54ch;margin-bottom:.35em}
  .paket-liste{grid-template-columns:repeat(4,minmax(0,1fr))}
  /* Arbeiten: alle Karten in einer Reihe, je höchstens 17rem breit, bei wenig Platz schmaler (drei passen auch neben den Titel) */
  .arbeiten-liste{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:minmax(0,17rem);justify-content:start}
  .pakete .paket-zusatz{order:3;margin-top:-4px}
}

/* Arbeiten: die Seite füllt die Karte ganz aus, mit dem feinen Rand und Papier wie die anderen Karten (Wünsche 2026-10-21); darin die
   ganze Seite als langes Bild zum Durchscrollen (keine eingebettete Live-Seite). Darunter nur Name und Art */
.arbeit{display:flex;flex-direction:column;align-items:stretch;gap:12px;text-align:left}
.arbeit-bild.handy-rahmen{display:block;height:min(max(64svh,min(64svh + 36px,100svh - 262px)),600px);margin:0;border:1px solid var(--karte-rand);border-radius:0;background:var(--karte-grund);
  overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--sonne) transparent;-webkit-overflow-scrolling:touch;
  box-shadow:var(--schatten-x,4px) var(--schatten-y,5px) 2px rgb(var(--schatten-farbe,38 30 22) / var(--schatten-a,.12))}
.arbeit-bild.handy-rahmen .bild,.arbeit-bild.handy-rahmen picture{display:block;margin:0;height:auto}
.arbeit-bild.handy-rahmen img{display:block;width:100%;height:auto}
.arbeit-bild.handy-rahmen:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
/* Hell-Dunkel wie auf der echten Seite: Knopf über dem Schalter im Bild, die dunkle Fassung ersetzt die helle */
.seite{position:relative}
.seite .bild-dunkel{display:none}
.seite.dunkel-an .bild-dunkel{display:block}
.seite.dunkel-an>.bild:not(.bild-dunkel){display:none}
.seite-schalter{position:absolute;z-index:1;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.seite-schalter:focus-visible{outline:2px solid var(--sonne);outline-offset:1px}
.arbeit-bild.handy-rahmen.leer{display:grid;place-items:center;background:#25272a}
/* App mit Leiste (Brandschutz-App): Leiste wie in der App, klebt beim Scrollen unten im Rahmen; je Knopf ein eigenes Bild */
.handy-rahmen.mit-leiste{background:#000}
.seite[data-ansicht]:not([data-ansicht="0"])>.bild{display:none}
.seite .ansicht{display:none}
.seite .ansicht.an{display:block}
.app-leiste{position:sticky;bottom:8px;z-index:1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:-58px 7px 8px;padding:3px;border:1px solid #3a3a3c;border-radius:999px;
  background:rgba(36,36,38,.88);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.app-leiste button{display:grid;justify-items:center;align-content:center;gap:1px;min-width:0;min-height:46px;padding:4px 0;border:0;border-radius:999px;background:none;color:#aeaeb2;font:500 12px/1.15 var(--f-text);letter-spacing:-.01em;cursor:pointer}
.app-leiste button[aria-pressed="true"]{background:rgba(236,91,74,.2);color:#f0705f}
.app-leiste button:focus-visible{outline:2px solid #f0705f;outline-offset:-2px}
.app-leiste .symbol{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.app-leiste span{max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:clip}
/* schmale Karte (Computer, drei nebeneinander): nur Symbole, die Wörter bleiben für Screenreader */
.handy-rahmen.mit-leiste{container-type:inline-size}
@container (max-width:270px){.app-leiste span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.app-leiste button{padding:0}.app-leiste .symbol{width:20px;height:20px}}
.arbeit-platz{font:400 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:#b9b0a2;border:1px dashed #b9b0a2;padding:10px 14px}
.arbeit-name{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 4px;text-align:center;font:700 clamp(22px,1.8vw,27px)/1.1 var(--f-text);letter-spacing:-.02em}
.arbeit-art{font:400 12px/1.35 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* Pakete: drei Blätter nebeneinander, Preis groß */
.paket{display:flex;flex-direction:column;gap:10px;padding:clamp(16px,1.6vw,22px);text-align:left}
.paket-preis{font:600 clamp(19px,1.6vw,23px)/1.25 var(--f-text);letter-spacing:-.02em}
.paket-text{font-size:16px;line-height:1.45}
.paket-punkte{list-style:none;margin:0;padding:10px 0 0;border-top:1px dashed var(--line);display:grid;gap:5px;font-size:16px;line-height:1.35}
.paket-punkte li{position:relative;padding-left:18px}
.paket-punkte li::before{content:"";position:absolute;left:0;top:.5em;width:8px;height:8px;background:var(--sonne);box-shadow:inset 0 0 0 1px var(--line)}
.paket:first-child .paket-punkte li::before{background:var(--karte-grund)}
.paket-zusatz{font:400 12px/1.6 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-top:4px}

/* Fragen: zum Aufklappen, am Computer zwei Spalten */
.fragen-karte{display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(20px,3vw,44px);padding:clamp(18px,2.4vw,32px);text-align:left}
.fragen-gruppe h3{font:400 12px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.fragen-karte details{border-bottom:1px solid var(--line)}
.fragen-karte summary{display:flex;justify-content:space-between;align-items:center;gap:14px;min-height:48px;padding:8px 0;cursor:pointer;list-style:none;font:700 17px/1.25 var(--f-text);letter-spacing:-.02em}
.fragen-karte summary::-webkit-details-marker{display:none}
.fragen-karte summary::after{content:"+";flex:none;font:400 20px/1 var(--f-mono);color:var(--muted);transition:transform .2s}
.fragen-karte details[open] summary::after{transform:rotate(45deg)}
.fragen-karte details p{padding:0 0 14px;font-size:16px;line-height:1.5}
.fragen-karte details a{text-decoration-color:var(--sonne);text-decoration-thickness:2px;text-underline-offset:4px}

/* Feierabend: direkt anrufen oder schreiben (am Computer links unter der Frage) */
.direkt-links .mini{margin-top:0}
@media (max-width:900px){.kontakt .direkt-links{margin-bottom:18px}}
.direkt-wege{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:8px 0 0}
.direkt-wege a{font:600 clamp(22px,2vw,30px)/1.2 var(--f-text);letter-spacing:-.02em;text-decoration:none;border-bottom:2px solid var(--sonne);padding-bottom:2px}

/* Markierungen (wie im Baukasten): fehlende Angaben und Textvorschläge. Auf „Ein Tag“ ohne Markierung (Wunsch 2026-10-21: echter Blick),
   gezählt und vor dem Go-live geprüft werden sie trotzdem (livegang-check); in der Hülle (Impressum, Datenschutz) bleiben sie sichtbar */
.offen{padding:0 .25em;border:1px dashed currentColor;border-radius:.25rem;background:#fff3c4;color:#3d3000;font-style:normal}
.vorschlag{background:#e8eefa;color:#12233d;box-shadow:inset 0 -2px 0 #3b62a3;-webkit-box-decoration-break:clone;box-decoration-break:clone}
body:not(.huelle) .vorschlag{background:none;box-shadow:none;color:inherit}
body:not(.huelle) .vorschlag::before{content:none}
.vorschlag::before{content:"Textvorschlag";display:inline-block;margin-right:.4em;padding:0 .35em;border-radius:.2rem;background:#2c4c80;color:#fff;font:600 .68em/1.6 var(--f-text);vertical-align:.12em;letter-spacing:0;text-transform:none}

/* Handy: Blätter zum Wischen, Fragen dürfen länger werden */
@media (max-width:760px){
  .thema .reihe,.thema .fragen-karte{order:1}
  .thema .paket-zusatz{order:3;margin-top:10px}
  /* Wischen: jede Karte rastet in der Mitte ein, auch die erste und die letzte (links und rechts je die halbe Restbreite frei) */
  .reihe{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain;width:calc(100% + 2 * clamp(20px,6vw,88px));margin-inline:calc(-1 * clamp(20px,6vw,88px));padding:4px calc(50vw - min(39vw,160px)) 16px;scroll-padding-inline:calc(50vw - min(39vw,160px));gap:14px;scrollbar-width:none}
  .reihe::-webkit-scrollbar{display:none}
  .reihe>li{flex:0 0 min(78vw,320px);scroll-snap-align:center}
  .arbeit-bild.handy-rahmen{height:min(max(52svh,100svh - 322px),600px)}   /* nach unten so lang, wie es bis zum Lineal Platz hat */
  /* Arbeiten: Name und Art fast bis zum Strich (Wunsch 2026-10-21), der gesparte Abstand geht an die Karten */
  .arbeiten .reihe{padding-bottom:10px}
  .arbeiten .inhalt::before{margin-top:4px}
  .arbeit-name{font-size:21px;margin:0 2px}
  .paket{padding:16px;gap:9px}
  .paket-punkte{gap:4px;padding-top:9px}
  .pakete .thema .text{display:none}
  main>section.fragen{height:auto;min-height:100svh}
  .fragen-karte{grid-template-columns:1fr;width:100%;padding:12px 16px}
  .fragen-gruppe+.fragen-gruppe{margin-top:16px}
  .fragen-karte summary{font-size:16px;min-height:46px}
}

/* Hülle: Impressum, Datenschutz, Danke und 404 im Stil von „Ein Tag“ (Papier, Schriftzug, ohne Himmel und Uhr) */
html:has(body.huelle){background:#f4eee4}
body.huelle{scroll-snap-type:none;background:#f4eee4!important;animation:none!important}
.huelle .kopf{animation:none!important;background:#f4eee4;border-bottom:1px solid #1f1b16}
.huelle .leiste,.huelle main{width:100%;max-width:860px;margin:0 auto;padding-inline:clamp(20px,6vw,88px)}
.huelle .leiste{padding-top:calc(96px + env(safe-area-inset-top,0px));font:400 12px/1.6 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.huelle main{padding-top:calc(112px + env(safe-area-inset-top,0px));padding-bottom:40px}
.huelle .leiste+main{padding-top:22px}
.huelle h1{font:800 clamp(36px,7.5vw,96px)/.95 var(--f-text);letter-spacing:-.045em;margin:0 0 30px;hyphens:auto;overflow-wrap:break-word}
.huelle main h2{font:700 clamp(24px,2.6vw,32px)/1.15 var(--f-text);letter-spacing:-.02em;margin:46px 0 12px}
.huelle main h3{font:500 17px/1.3 var(--f-text);margin:26px 0 6px}
.huelle main p,.huelle main li,.huelle main dd{font-size:17px;line-height:1.65;max-width:64ch}
.huelle main p+p{margin-top:12px}
.huelle main ul{margin:10px 0 0;padding-left:1.2em}
.huelle main a{text-decoration-color:var(--sonne);text-decoration-thickness:2px;text-underline-offset:4px;overflow-wrap:anywhere}
.huelle main dl{display:grid;grid-template-columns:minmax(0,13em) 1fr;gap:12px 26px;margin:0}
.huelle main dt{font:500 16px/1.5 var(--f-text);color:var(--ink)}
.huelle main dd{margin:0}
.huelle .hinweis{border-left:3px solid var(--sonne);background:#fbf8f3;padding:12px 16px;margin:0 0 26px}
.huelle .stand{margin-top:42px;color:var(--muted)}
.huelle main .knopf{font-size:16px}
.huelle .knopfreihe{display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px;margin-top:30px}
.huelle .fuss.w{max-width:860px;margin:0 auto;padding-bottom:calc(30px + env(safe-area-inset-bottom,0px));border-top:1px solid #1f1b16;padding-top:6px}
@media (max-width:640px){.huelle main dl{grid-template-columns:1fr;gap:2px}.huelle main dd{margin-bottom:12px}.huelle .fuss span{flex-basis:100%}}

/* Offenes Uhrwerk im Hintergrund */
.uhrwerk{position:fixed;top:50%;right:-8vw;width:min(112vh,96vw);aspect-ratio:1;transform:translateY(-52%);z-index:0;pointer-events:none;color:var(--ink);opacity:.65;transition:color .6s}
.uhrwerk svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.uhrwerk .werk{stroke-opacity:.17;stroke-width:1.3}
.uhrwerk .unruh{transition:stroke-opacity .3s}
.uhrwerk .ring{stroke-opacity:.2;stroke-width:1.1}
.uhrwerk .ring .lang{stroke-width:2.6}
.uhrwerk .stein{fill:var(--sonne);fill-opacity:.6;stroke-opacity:.35;stroke-width:1}
.uhrwerk .zeiger{stroke-opacity:.45}
.uhrwerk .zeiger .std{stroke-width:5}
.uhrwerk .zeiger .min{stroke-width:2.2}
.uhrwerk .zeiger .spitze{fill:var(--sonne);stroke-opacity:.5;stroke-width:1.2}
body.uhr-greifbar{cursor:pointer}
body.uhr-greifbar .uhrwerk .unruh{stroke-opacity:.55}
@media (max-width:760px){
  .uhrwerk{right:auto;left:50%;width:150vw;transform:translate(-50%,-56%)}
  .uhrwerk .werk{stroke-opacity:.1}.uhrwerk .ring{stroke-opacity:.12}.uhrwerk .zeiger{stroke-opacity:.18}.uhrwerk .zeiger .spitze{fill-opacity:.5}
}
.ansage{position:fixed;left:50%;bottom:calc(var(--lineal) + 22px + env(safe-area-inset-bottom,0px));z-index:30;width:max-content;max-width:min(92vw,600px);transform:translateX(-50%);background:var(--ink);color:var(--himmel,#f4eee4);padding:14px 20px 16px;font:300 16px/1.45 var(--f-text);box-shadow:0 12px 30px rgba(31,27,22,.18)}
.ansage b{display:block;font:600 21px/1.25 var(--f-text);color:color-mix(in srgb,var(--sonne),var(--himmel,#f4eee4) 45%)}

/* Hinweis, wenn die Ansicht Skripte nicht ausführt oder nicht selbst scrollt */
.ansicht-hinweis{position:fixed;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 70px);z-index:19;margin:0;padding:9px clamp(20px,6vw,88px);background:#1f1b16;color:#f6f1e9;font:400 12px/1.5 var(--f-mono);letter-spacing:.06em}
.ansicht-hinweis[hidden]{display:none}
/* Ohne Skripte (manche Vorschauen): Zeit, Sonne, Himmel und Licht laufen per CSS mit dem Scrollen – erzeugt von rueckfall.mjs (Kräftig: Ocker, Schiefer, Kupfer) */
@property --min{syntax:'<number>';inherits:true;initial-value:442}
@property --pos{syntax:'<number>';inherits:true;initial-value:10}
@property --h{syntax:'<integer>';inherits:false;initial-value:6}
@property --m{syntax:'<integer>';inherits:false;initial-value:58}
@property --sonne{syntax:'<color>';inherits:true;initial-value:#99592f}
@property --it{syntax:'<color>';inherits:true;initial-value:#6c3c1f}
@property --ball{syntax:'<color>';inherits:true;initial-value:#e3965a}
html:not(.js) body{background-image:linear-gradient(to bottom,#d3d9dd 0%,#dcdcd5 8%,#e7e1d3 11.67%,#ece6d9 18.33%,#efebe2 30%,#ede3cf 45%,#e9d4a9 60%,#e6c48b 70%,#e3ad78 80%,#dfb084 88.5%,#2f3134 90%,#1c1e21 92%,#0f1012 100%)}
@keyframes tageslauf{0%{--min:442;--pos:10;--sonne:#99592f;--it:#6c3c1f;--ball:#e3965a}11.11%{--min:523;--pos:15;--sonne:#9b592f;--it:#6d3c1f;--ball:#e49c55}22.22%{--min:685;--pos:25;--sonne:#9e5a2e;--it:#6e3d1e;--ball:#e7a74c}33.33%{--min:766;--pos:30;--sonne:#9f5a2e;--it:#6f3d1e;--ball:#e8ad47}44.44%{--min:809;--pos:35;--sonne:#9e592d;--it:#6e3c1e;--ball:#e6a544}55.56%{--min:896;--pos:45;--sonne:#9d572c;--it:#6d3b1d;--ball:#e1953f}66.67%{--min:939;--pos:50;--sonne:#9c562b;--it:#6c3a1c;--ball:#df8d3c}77.78%{--min:1015;--pos:60;--sonne:#98532b;--it:#6a391c;--ball:#d67635}88.89%{--min:1090;--pos:70;--sonne:#94502a;--it:#67371b;--ball:#cc5e2e}100%{--min:1186;--pos:90;--sonne:#a86440;--it:#c07e59;--ball:#b0643c}}
@keyframes kopfhimmel{0%{background-color:#d3d9dd;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}1.56%{background-color:#d5dadb;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}3.13%{background-color:#d7dada;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}4.69%{background-color:#d8dbd8;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}6.25%{background-color:#dadbd7;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}7.81%{background-color:#dbdcd6;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}9.38%{background-color:#deddd5;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}10.94%{background-color:#e1ded4;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}12.5%{background-color:#e7e1d3;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}14.06%{background-color:#e8e2d4;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}15.63%{background-color:#e9e3d6;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}17.19%{background-color:#eae4d7;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}18.75%{background-color:#ebe5d8;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}20.31%{background-color:#ece6d9;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}21.88%{background-color:#ede7db;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}23.44%{background-color:#ede8dc;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}25%{background-color:#ede8dd;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}26.56%{background-color:#eee9de;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}28.13%{background-color:#eee9df;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}29.69%{background-color:#eeeae0;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}31.25%{background-color:#efeae1;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}32.81%{background-color:#efebe2;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}34.38%{background-color:#efeae1;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}35.94%{background-color:#efeadf;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}37.5%{background-color:#efe9de;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}39.06%{background-color:#eee9dd;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}40.63%{background-color:#eee8db;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}42.19%{background-color:#eee8da;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}43.75%{background-color:#eee7d9;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}45.31%{background-color:#eee6d6;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}46.88%{background-color:#ede5d4;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}48.44%{background-color:#ede4d1;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}50%{background-color:#ede2cd;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}51.56%{background-color:#ece0c8;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}53.13%{background-color:#ecdec3;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}54.69%{background-color:#ebdcbd;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}56.25%{background-color:#ebdbba;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}57.81%{background-color:#ebdab7;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}59.38%{background-color:#ead9b5;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}60.94%{background-color:#ead8b2;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}62.5%{background-color:#ead7af;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}64.06%{background-color:#e9d5ad;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}65.63%{background-color:#e9d4aa;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}67.19%{background-color:#e9d3a6;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}68.75%{background-color:#e8d0a2;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}70.31%{background-color:#e8ce9e;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}71.88%{background-color:#e7cc9a;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}73.44%{background-color:#e7ca96;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}75%{background-color:#e7c791;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}76.56%{background-color:#e6c58d;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}78.13%{background-color:#e6c28a;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}79.69%{background-color:#e5bf87;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}81.25%{background-color:#e5bc84;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}82.81%{background-color:#e5b982;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}84.38%{background-color:#e4b57f;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}85.94%{background-color:#e4b27c;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}87.5%{background-color:#e3af7a;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}89.06%{background-color:#e3ad79;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}90.63%{background-color:#e2ae7b;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}92.19%{background-color:#e1ae7d;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}93.75%{background-color:#e1af7f;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}95.31%{background-color:#e0af81;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}96.88%{background-color:#dfb083;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}98.44%{background-color:#a5866a;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}100%{background-color:#2b2d30;--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}}
@keyframes linealhimmel{0%{background-color:#dfded4;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}1.56%{background-color:#e4e0d3;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}3.13%{background-color:#e8e2d4;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}4.69%{background-color:#e9e3d5;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}6.25%{background-color:#eae4d6;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}7.81%{background-color:#ebe5d7;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}9.38%{background-color:#ece6d9;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}10.94%{background-color:#ece7da;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}12.5%{background-color:#ede8dc;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}14.06%{background-color:#ede8dd;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}15.63%{background-color:#eee9de;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}17.19%{background-color:#eee9df;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}18.75%{background-color:#eeeae0;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}20.31%{background-color:#efeae1;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}21.88%{background-color:#efebe2;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}23.44%{background-color:#efebe1;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}25%{background-color:#efeae0;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}26.56%{background-color:#efeadf;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}28.13%{background-color:#efe9dd;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}29.69%{background-color:#eee8dc;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}31.25%{background-color:#eee8db;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}32.81%{background-color:#eee7d9;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}34.38%{background-color:#eee7d7;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}35.94%{background-color:#eee5d5;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}37.5%{background-color:#ede4d2;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}39.06%{background-color:#ede3cf;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}40.63%{background-color:#ede1cb;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}42.19%{background-color:#ecdfc5;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}43.75%{background-color:#ebddc0;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}45.31%{background-color:#ebdbbb;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}46.88%{background-color:#ebdab9;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}48.44%{background-color:#ead9b6;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}50%{background-color:#ead8b3;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}51.56%{background-color:#ead7b1;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}53.13%{background-color:#ead6ae;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}54.69%{background-color:#e9d5ab;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}56.25%{background-color:#e9d4a8;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}57.81%{background-color:#e9d1a4;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}59.38%{background-color:#e8cfa0;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}60.94%{background-color:#e8cd9c;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}62.5%{background-color:#e7cb97;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}64.06%{background-color:#e7c893;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}65.63%{background-color:#e6c68f;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}67.19%{background-color:#e6c48b;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}68.75%{background-color:#e6c188;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}70.31%{background-color:#e5bd86;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}71.88%{background-color:#e5ba83;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}73.44%{background-color:#e4b780;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}75%{background-color:#e4b47e;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}76.56%{background-color:#e3b07b;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}78.13%{background-color:#e3ad78;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}79.69%{background-color:#e2ad7a;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}81.25%{background-color:#e2ae7c;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}82.81%{background-color:#e1ae7e;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}84.38%{background-color:#e0af80;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}85.94%{background-color:#e0af82;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}87.5%{background-color:#dfb084;--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}89.06%{background-color:#4c4641;--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}90.63%{background-color:#242629;--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}92.19%{background-color:#1b1d20;--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}93.75%{background-color:#191b1d;--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}95.31%{background-color:#17181b;--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}96.88%{background-color:#141618;--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}98.44%{background-color:#121315;--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}100%{background-color:#101113;--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}}
@keyframes werkton{0%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}1.56%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}3.13%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}4.69%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}6.25%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}7.81%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}9.38%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}10.94%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}12.5%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}14.06%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}15.63%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}17.19%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}18.75%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}20.31%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}21.88%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}23.44%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}25%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}26.56%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}28.13%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}29.69%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}31.25%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}32.81%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}34.38%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}35.94%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}37.5%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}39.06%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}40.63%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}42.19%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}43.75%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}45.31%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}46.88%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}48.44%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}50%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}51.56%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}53.13%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}54.69%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}56.25%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}57.81%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}59.38%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}60.94%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}62.5%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}64.06%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}65.63%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}67.19%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}68.75%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}70.31%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}71.88%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}73.44%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}75%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}76.56%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}78.13%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}79.69%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}81.25%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}82.81%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}84.38%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}85.94%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}87.5%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}89.06%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}90.63%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}92.19%{--ink:#1f1b16;--muted:#4b453c;--line:#1f1b16;--gegen:#f6f1e9;--himmel:#f4eee4}93.75%{--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}95.31%{--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}96.88%{--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}98.44%{--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}100%{--ink:#f6f1e9;--muted:#b3aa9c;--line:#f6f1e9;--gegen:#1f1b16;--himmel:#0f1012}}
@supports (animation-timeline: scroll()){
  html:not(.js) body{animation:tageslauf linear both;animation-timeline:scroll(self)}
  html:not(.js) .kopf{animation:kopfhimmel linear both;animation-timeline:scroll(nearest)}
  html:not(.js) .lineal{animation:linealhimmel linear both;animation-timeline:scroll(nearest)}
  html:not(.js) .uhrwerk{animation:werkton linear both;animation-timeline:scroll(nearest)}
  html:not(.js) .lineal .marke-zeit{left:calc(var(--pos) * 1%)}
  html:not(.js) .lineal .vergangen{width:calc((var(--pos) - 10) * 1%)}
  html:not(.js) .lineal .zeit-jetzt{left:clamp(30px, calc(var(--pos) * 1%), calc(100% - 30px));font-size:0;--h:calc(var(--min) / 60 - .5);--m:calc(var(--min) - var(--h) * 60 - .5);counter-reset:h var(--h) m var(--m)}
  html:not(.js) .lineal .zeit-jetzt::after{content:counter(h, decimal-leading-zero) ":" counter(m, decimal-leading-zero);font-size:12px}
  html:not(.js) .sonne{left:calc(var(--pos) * 1%);top:calc(100% - sin(clamp(0, (var(--min) - 442) / 648, 1) * 180deg) * 12% + max(0%, ((var(--min) - 442) / 648 - 1) * 60%));transform:translate(-50%,-50%);background:var(--ball)}
  html:not(.js) .uhrwerk .zg-std{transform:rotate(calc(var(--min) * .5deg))}
  html:not(.js) .uhrwerk .zg-min{transform:rotate(calc(var(--min) * 6deg))}
}
/* Ohne Skripte: Räder drehen sich per CSS, Unruh und Anker schwingen */
html:not(.js) .uhrwerk .rad-e{animation:drehen 18s steps(30) infinite}
html:not(.js) .uhrwerk .rad-d{animation:drehen 23.7s linear infinite reverse}
html:not(.js) .uhrwerk .rad-c{animation:drehen 28.6s linear infinite}
html:not(.js) .uhrwerk .rad-b{animation:drehen 38.9s linear infinite reverse}
html:not(.js) .uhrwerk .rad-a{animation:drehen 69.5s linear infinite}
html:not(.js) .uhrwerk .unruh-rad{animation:schwingen .6s ease-in-out infinite alternate}
html:not(.js) .uhrwerk .anker{animation:kippen .6s ease-in-out infinite alternate}
@keyframes drehen{from{transform:rotate(0)}to{transform:rotate(360deg)}}
@keyframes schwingen{from{transform:rotate(-42deg)}to{transform:rotate(42deg)}}
@keyframes kippen{from{transform:rotate(-9deg)}to{transform:rotate(9deg)}}
/* Ohne Skripte: was nur mit Skript stimmt, ausblenden, und einen Hinweis zeigen */
html:not(.js) .nur-js,html:not(.js) .punkte{display:none}
html:not(.js) .ansicht-hinweis{display:block}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}