/* Sasma Hausmeisterservice — Stylesheet
   Keine externen Ressourcen: die Schrift liegt selbst auf dem Server,
   keine CDN, keine Tracker. Dadurch ist kein Cookie-Banner erforderlich. */

/* ---------- Schrift (selbst gehostet, SIL OFL, siehe schrift/OFL.txt) ---------- */
@font-face{
  font-family:'Archivo';
  src:url('/assets/schrift/archivo-latin.woff2?v=e3a28ead') format('woff2');
  font-weight:400 800;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Archivo';
  src:url('/assets/schrift/archivo-latin-ext.woff2?v=5717f370') format('woff2');
  font-weight:400 800;
  font-stretch:62% 125%;
  font-style:normal;
  font-display:swap;
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --tinte:#222121;        /* dunkle Flaechen: Kopf, Aufmacher, Fuss, Seitenkoepfe */
  --tinte-text:#14181A;   /* Ueberschriften und Auszeichnungen auf hellem Grund */
  --kohle:#403D3D;
  --kohle-hell:#4A4747;
  --papier:#F2F3F0;
  --papier-tief:#E7E9E3;
  --weiss:#FFFFFF;
  --text:#232A2C;
  --text-leise:#5D666A;
  --text-invers:#C9D1D0;
  --linie:#D6DAD2;
  --linie-dunkel:#5A5656;
  --gruen:#4E9C2D;
  --gruen-tief:#356F1C;
  --gruen-leucht:#7BC94E;
  --gruen-wash:#E9F1E2;
  --frost:#7C9AAE;
  --frost-wash:#E7EDF1;

  --sans:'Archivo','Segoe UI',system-ui,-apple-system,Arial,sans-serif;
  --breite:1220px;
  --rand:24px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}

body{
  margin:0;
  background:var(--papier);
  color:var(--text);
  font-family:var(--sans);
  font-size:17.5px;
  line-height:1.6;
  font-stretch:100%;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}
a{color:var(--gruen-tief);text-underline-offset:3px}
:focus-visible{outline:3px solid var(--gruen);outline-offset:3px}

.wrap{max-width:var(--breite);margin:0 auto;padding:0 var(--rand)}
.schmal{max-width:66ch}

/* ---------- Typografie ---------- */
h1,h2,h3,h4{margin:0 0 .45em;color:var(--tinte-text);text-wrap:balance}
h1{
  font-size:clamp(38px,7.2vw,80px);
  font-weight:800;font-stretch:88%;
  line-height:.98;letter-spacing:-.03em;
}
h2{
  font-size:clamp(27px,4.4vw,46px);
  font-weight:800;font-stretch:90%;
  line-height:1.06;letter-spacing:-.025em;
}
h3{font-size:clamp(19px,2.2vw,23px);font-weight:700;line-height:1.22;letter-spacing:-.012em}
h4{font-size:17px;font-weight:700}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong{font-weight:700;color:var(--tinte-text)}

.marke-label{
  display:block;
  font-size:11.5px;font-weight:700;font-stretch:112%;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--gruen-tief);margin:0 0 16px;
}
.lead{font-size:clamp(18.5px,2.2vw,22px);line-height:1.45;color:var(--text-leise);font-weight:400}

/* ---------- dunkle Flächen ---------- */
.dunkel{background:var(--kohle);color:var(--text-invers)}
.dunkel h1,.dunkel h2,.dunkel h3,.dunkel h4{color:#fff}
.dunkel .marke-label{color:var(--gruen-leucht)}
.dunkel .lead{color:#C4CCCB}
.dunkel strong{color:#fff}
.dunkel a{color:var(--gruen-leucht)}

/* ---------- Kopfzeile ---------- */
.kopf{position:sticky;top:0;z-index:60;background:var(--tinte)}
.kopf-innen{
  max-width:var(--breite);margin:0 auto;padding:0 var(--rand);
  display:flex;align-items:center;gap:20px;min-height:70px;
}
.marke{display:flex;flex-direction:column;text-decoration:none;line-height:1;flex:none;margin-right:auto}
.marke img{display:block;height:48px;width:auto}
.hauptnav{display:flex;gap:28px}
.hauptnav a{
  color:#CFD5D4;text-decoration:none;font-size:14.5px;font-weight:600;
  padding:4px 0;border-bottom:2px solid transparent;
}
.hauptnav a:hover{color:#fff;border-bottom-color:var(--gruen)}
.kopf-tel{
  display:inline-flex;align-items:center;
  background:var(--gruen);color:var(--tinte-text);text-decoration:none;
  padding:11px 20px;font-weight:700;font-size:15.5px;white-space:nowrap;
  font-stretch:96%;
}
.kopf-tel:hover{background:var(--gruen-leucht);color:var(--tinte-text)}
@media (max-width:940px){
  .hauptnav{display:none}
  .kopf-innen{min-height:60px}
  .marke img{height:40px}
}

/* ---------- Aufmacher ---------- */
/* held und seitenkopf bringen ihre eigene Polsterung mit — die allgemeine
   Abschnitts-Polsterung wuerde sich sonst addieren */
.held{background:var(--tinte);color:#fff;position:relative;overflow:hidden;padding:0}
.held-innen{
  max-width:var(--breite);margin:0 auto;padding:0 var(--rand);
  display:grid;grid-template-columns:1.02fr .98fr;gap:0 56px;align-items:center;
}
.held-text{padding:76px 0 84px}
.held h1{color:#fff;margin-bottom:22px}
.held .lead{max-width:34ch;margin-bottom:32px;color:#C4CCCB}
.held-bild{position:relative;align-self:stretch;min-height:420px}
.held-bild img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Bild randlos nach rechts auslaufen lassen */
@media (min-width:941px){
  .held-bild{margin-right:calc((100vw - var(--breite))/-2 - var(--rand))}
}
@media (max-width:940px){
  .held-innen{grid-template-columns:1fr;gap:0}
  .held-text{padding:48px 0 36px}
  .held-bild{min-height:280px;margin:0 calc(var(--rand)*-1) 0;}
}

/* Faktenleiste unter dem Aufmacher */
.fakten-band{background:var(--kohle);border-top:1px solid var(--linie-dunkel)}
.fakten-band .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.fakt{padding:24px 26px 24px 0;border-right:1px solid var(--linie-dunkel)}
.fakt:last-child{border-right:0}
.fakt b{
  display:block;color:#fff;font-size:15.5px;font-weight:700;margin-bottom:4px;
}
.fakt span{display:block;color:#C6CDCC;font-size:14.5px;line-height:1.4}
@media (max-width:700px){
  .fakt{border-right:0;border-bottom:1px solid var(--linie-dunkel);padding:18px 0}
  .fakten-band .wrap>.fakt:last-child{border-bottom:0}
}

/* ---------- Knöpfe ---------- */
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px}
.knopf{
  display:inline-flex;align-items:center;justify-content:center;
  padding:15px 28px;font-weight:700;font-size:16.5px;font-stretch:96%;
  text-decoration:none;border:2px solid transparent;cursor:pointer;
  font-family:inherit;
}
.knopf-voll{background:var(--gruen);color:var(--tinte-text)}
.knopf-voll:hover{background:var(--gruen-leucht);color:var(--tinte-text)}
.knopf-rand{background:transparent;color:currentColor;border-color:rgba(255,255,255,.32)}
.knopf-rand:hover{border-color:#fff}
.hell .knopf-rand,.knopf-rand.dunkelrand{border-color:var(--linie);color:var(--tinte-text)}
.hell .knopf-rand:hover,.knopf-rand.dunkelrand:hover{border-color:var(--tinte-text)}

/* ---------- Abschnitte ---------- */
section{padding:78px 0}
section.eng{padding:56px 0}
.abschnitt-kopf{max-width:62ch;margin-bottom:44px}
.abschnitt-kopf .lead{margin-top:14px}

/* ---------- Zwei Einstiege (geteilte Flächen) ---------- */
.einstiege{display:grid;grid-template-columns:1fr 1fr}
.einstieg{padding:52px 46px;display:flex;flex-direction:column;gap:14px;text-decoration:none}
.einstieg--dunkel{background:var(--kohle);color:var(--text-invers)}
.einstieg--dunkel h3{color:#fff}
.einstieg--hell{background:var(--papier-tief);color:var(--text)}
.einstieg p{margin:0;flex:1}
.einstieg .pfeil{font-weight:700;font-size:15.5px;color:var(--gruen)}
.einstieg--hell .pfeil{color:var(--gruen-tief)}
/* auf der dunklen Haelfte braucht Label und Pfeil das helle Gruen,
   sonst stehen sie dunkelgruen auf dunkelgrau */
.einstieg--dunkel .marke-label,.einstieg--dunkel .pfeil{color:var(--gruen-leucht)}
.einstieg:hover .pfeil{text-decoration:underline}
@media (max-width:800px){.einstiege{grid-template-columns:1fr}.einstieg{padding:38px var(--rand)}}

/* ---------- Leistungsliste (nummeriert, keine Kärtchen) ---------- */
.liste-gruppe{margin-bottom:56px}
.liste-gruppe:last-child{margin-bottom:0}
.gruppe-titel{
  display:flex;align-items:baseline;gap:16px;
  padding-bottom:14px;border-bottom:2px solid var(--tinte-text);margin-bottom:0;
}
.gruppe-titel h3{margin:0;font-size:clamp(21px,2.6vw,27px);font-weight:800;font-stretch:92%;letter-spacing:-.02em}
.gruppe-titel .zahl{
  font-size:13px;font-weight:700;font-stretch:112%;letter-spacing:.16em;
  color:var(--text-leise);margin-left:auto;white-space:nowrap;
}
.eintrag{
  display:grid;grid-template-columns:64px 1fr auto;gap:0 22px;align-items:baseline;
  padding:22px 0;border-bottom:1px solid var(--linie);text-decoration:none;color:inherit;
}
.eintrag:hover{background:rgba(78,156,45,.055)}
.eintrag .nr{
  font-size:14px;font-weight:700;font-stretch:112%;letter-spacing:.1em;
  color:var(--gruen-tief);
}
.eintrag .txt b{display:block;font-size:19.5px;font-weight:700;letter-spacing:-.012em;color:var(--tinte-text);margin-bottom:4px}
.eintrag .txt span{display:block;color:var(--text-leise);font-size:16.5px;line-height:1.45;max-width:62ch}
.eintrag .mehr{font-size:14.5px;font-weight:700;color:var(--gruen-tief);white-space:nowrap;align-self:center}
@media (max-width:700px){
  .eintrag{grid-template-columns:44px 1fr;gap:0 14px}
  .eintrag .mehr{grid-column:2;margin-top:8px;align-self:start}
}

/* ---------- Saisonband ---------- */
.saison-rahmen{overflow-x:auto;padding-bottom:6px}
.saison{min-width:660px}
.saison-kopf,.saison-zeile{
  display:grid;grid-template-columns:190px repeat(12,1fr);align-items:center;
}
.saison-kopf{
  border-bottom:2px solid var(--tinte-text);padding-bottom:9px;margin-bottom:4px;
}
.saison-kopf span{
  text-align:center;font-size:12px;font-weight:700;font-stretch:112%;
  letter-spacing:.06em;color:var(--text-leise);
}
.saison-kopf span:first-child{text-align:left;letter-spacing:.16em;text-transform:uppercase}
.saison-zeile{border-bottom:1px solid var(--linie);min-height:46px}
.saison-zeile>b{
  grid-column:1;grid-row:1;
  font-size:15.5px;font-weight:700;color:var(--tinte-text);padding-right:16px;
}
.balken{
  height:12px;border-radius:2px;position:relative;
  grid-row:1;
}
.balken--gruen{background:var(--gruen)}
.balken--frost{background:var(--frost)}
.balken--dauer{background:var(--kohle-hell)}
.saison-legende{
  display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:22px;
  font-size:14.5px;color:var(--text-leise);
}
.saison-legende i{display:inline-block;width:22px;height:9px;border-radius:2px;margin-right:8px;vertical-align:middle;font-style:normal}

/* ---------- randloses Bildband ---------- */
.bildband{position:relative;height:min(46vh,380px);overflow:hidden;background:var(--kohle)}
.bildband img{width:100%;height:100%;object-fit:cover;object-position:center 62%}
@media (max-width:700px){.bildband{height:230px}}

/* ---------- großes Zitat / Aussage ---------- */
.aussage{
  font-size:clamp(23px,3.4vw,38px);font-weight:700;font-stretch:92%;
  line-height:1.16;letter-spacing:-.022em;color:#fff;max-width:20ch;margin:0 0 24px;
}
.aussage-hell{color:var(--tinte-text)}

/* ---------- Zweispalter mit Bild ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.duo--schmal{grid-template-columns:.8fr 1.2fr}
@media (max-width:860px){.duo,.duo--schmal{grid-template-columns:1fr;gap:32px}}

/* ---------- Listen ---------- */
ul.haken{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px}
ul.haken li{position:relative;padding-left:30px;line-height:1.5}
ul.haken li::before{
  content:"";position:absolute;left:0;top:.44em;width:15px;height:8px;
  border-left:2.5px solid var(--gruen);border-bottom:2.5px solid var(--gruen);
  transform:rotate(-45deg);
}
.dunkel ul.haken li::before{border-color:var(--gruen-leucht)}
.spalten2{display:grid;grid-template-columns:1fr 1fr;gap:26px 46px}
@media (max-width:760px){.spalten2{grid-template-columns:1fr}}

/* ---------- Hinweiskasten ---------- */
.kasten{background:var(--gruen-wash);border-left:4px solid var(--gruen);padding:26px 30px;margin:28px 0}
.kasten:last-child{margin-bottom:0}
.kasten h3{margin-top:0}
.kasten--frost{background:var(--frost-wash);border-left-color:var(--frost)}
.dunkel .kasten{background:rgba(255,255,255,.06);border-left-color:var(--gruen-leucht)}

/* ---------- Tabelle ---------- */
.tabellen-rahmen{overflow-x:auto;margin:24px 0}
table{border-collapse:collapse;width:100%;min-width:400px}
th,td{text-align:left;padding:13px 20px 13px 0;border-bottom:1px solid var(--linie);font-size:16.5px}
th{font-weight:700;color:var(--tinte-text)}
tbody tr:last-child td,tbody tr:last-child th{border-bottom:0}

/* ---------- Ablauf ---------- */
.schritte{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:0;counter-reset:s}
.schritt{counter-increment:s;padding:0 30px 0 0;border-right:1px solid var(--linie)}
.schritt:last-child{border-right:0}
.schritt::before{
  content:counter(s,decimal-leading-zero);
  display:block;font-size:44px;font-weight:800;font-stretch:88%;
  letter-spacing:-.04em;color:var(--gruen);line-height:1;margin-bottom:16px;
}
.schritt h3{margin-bottom:8px}
.schritt p{color:var(--text-leise);font-size:16.5px}
.dunkel .schritt{border-right-color:var(--linie-dunkel)}
.dunkel .schritt p{color:#C6CDCC}
@media (max-width:800px){
  .schritt{border-right:0;border-bottom:1px solid var(--linie);padding:0 0 26px;margin-bottom:26px}
  .schritt:last-child{border-bottom:0;margin-bottom:0;padding-bottom:0}
}

/* ---------- Kontakt ---------- */
.kontakt-raster{display:grid;grid-template-columns:.85fr 1.15fr;gap:56px}
@media (max-width:900px){.kontakt-raster{grid-template-columns:1fr;gap:36px}}
.formular-flaeche{background:var(--weiss);padding:38px 36px}
/* weisse Flaeche in einem dunklen Abschnitt: die Linkfarbe fuer dunklen
   Grund wuerde hier durchgreifen und hellgruen auf Weiss stehen */
.formular-flaeche a{color:var(--gruen-tief)}
.formular-flaeche .zustimmung{color:var(--text-leise)}
@media (max-width:600px){.formular-flaeche{padding:28px 22px}}
form{display:flex;flex-direction:column;gap:17px}
.feld{display:flex;flex-direction:column;gap:7px}
.feld label{font-weight:700;font-size:14.5px;color:var(--tinte-text)}
.feld input,.feld select,.feld textarea{
  font-family:inherit;font-size:16.5px;color:var(--text);
  padding:13px 15px;border:1px solid var(--linie);background:var(--weiss);width:100%;
}
.feld textarea{min-height:130px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{
  border-color:var(--gruen);outline:none;box-shadow:0 0 0 3px var(--gruen-wash);
}
.feld-paar{display:grid;grid-template-columns:1fr 1fr;gap:17px}
@media (max-width:600px){.feld-paar{grid-template-columns:1fr}}
.zustimmung{display:flex;gap:12px;align-items:flex-start;font-size:14.5px;color:var(--text-leise);line-height:1.5}
.zustimmung input{margin-top:3px;width:19px;height:19px;flex:none;accent-color:var(--gruen)}
.pflichthinweis{font-size:13.5px;color:var(--text-leise);margin:0}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.kontaktzeile{
  display:block;font-size:clamp(21px,2.6vw,27px);font-weight:800;font-stretch:92%;
  letter-spacing:-.02em;color:#fff;text-decoration:none;margin-bottom:6px;
}
.kontaktzeile:hover{color:var(--gruen-leucht)}

/* ---------- Abschluss-Aufruf ---------- */
.aufruf{background:var(--gruen-tief);color:#fff;padding:66px 0}
.aufruf h2{color:#fff;max-width:18ch}
.aufruf p{color:#D3E7C6;font-size:19px;max-width:54ch;margin:14px 0 28px}
.aufruf .knopf-voll{background:#fff;color:var(--gruen-tief)}
.aufruf .knopf-voll:hover{background:var(--tinte-text);color:#fff}

/* ---------- Fußzeile ---------- */
.fuss{background:var(--tinte);color:#C2C9C9;padding:60px 0 32px;font-size:15.5px}
.fuss a{color:#C2C9C9;text-decoration:none}
.fuss a:hover{color:#fff}
.fuss-raster{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;margin-bottom:40px}
@media (max-width:760px){.fuss-raster{grid-template-columns:1fr;gap:30px}}
.fuss h4{
  color:#fff;font-size:11.5px;font-weight:700;font-stretch:112%;
  letter-spacing:.2em;text-transform:uppercase;margin:0 0 16px;
}
.fuss ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.fuss-schluss{
  border-top:1px solid var(--linie-dunkel);padding-top:24px;
  display:flex;flex-wrap:wrap;gap:10px 28px;justify-content:space-between;font-size:14.5px;
}

/* ---------- Brotkrumen & Unterseiten-Aufmacher ---------- */
.krumen{font-size:14px;color:#BFC6C5;padding-top:20px}
.krumen a{color:#BFC6C5;text-decoration:none}
.krumen a:hover{color:#fff}
.seitenkopf{background:var(--tinte);color:#fff;padding:0}
.seitenkopf .inner{padding:14px 0 62px;max-width:34ch}
.seitenkopf h1{color:#fff;margin:22px 0 18px}
.seitenkopf .lead{max-width:44ch}
.seitenkopf .inner{max-width:none}
.seitenkopf .lead{color:#C4CCCB}

/* ---------- mobile Aktionsleiste ---------- */
.mobilleiste{display:none}
@media (max-width:940px){
  .mobilleiste{
    display:grid;grid-template-columns:1fr 1fr;
    position:fixed;left:0;right:0;bottom:0;z-index:70;
  }
  .mobilleiste a{
    padding:15px 8px;text-align:center;font-weight:700;font-size:15.5px;text-decoration:none;
  }
  .mobilleiste a.haupt{background:var(--gruen);color:var(--tinte-text)}
  .mobilleiste a.zweit{background:var(--tinte);color:#fff}
  body{padding-bottom:54px}
}

/* ---------- Rechtstexte ---------- */
.rechtstext{padding:52px 0 70px}
.rechtstext h2{margin-top:42px;font-size:clamp(21px,2.6vw,26px)}
.rechtstext h2:first-of-type{margin-top:0}
.rechtstext p,.rechtstext li{font-size:16.5px}
.rechtstext address{font-style:normal;margin-bottom:1em}
.rechtstext ul{padding-left:20px}
.rechtstext li{margin-bottom:6px}

@media (max-width:600px){
  :root{--rand:18px}
  body{font-size:16.5px}
  section{padding:52px 0}
}

/* =====================================================================
   Winterdienstseite
   Eigene Farbwelt in Eisblau. Gilt nur innerhalb von <main class="winter">,
   Kopf und Fuss bleiben unveraendert.
   ===================================================================== */
.winter{
  --eis-tief:#12303E;
  --eis:#2F6480;
  --eis-hell:#9FC4D6;
  --eis-blass:#E8F1F6;
}

/* Seitenkopf: Nachthimmel mit Schneeflocken */
.winter .seitenkopf{
  position:relative;
  overflow:hidden;
  background-color:#143643;
  background-image:linear-gradient(168deg,#1C4254 0%,#143643 58%,#0E2833 100%);
  --kante-h:22px;
  --boden-h:7px;
  --pinguin-b:170px;      /* bis 7. Oktober 2026: 141 */
}
.winter .seitenkopf>.wrap{position:relative;z-index:5}
.winter .seitenkopf .inner{padding-bottom:165px}
.winter .seitenkopf .lead{color:#BDD6E2}
.winter .krumen,.winter .krumen a{color:#9FBAC7}
.winter .krumen a:hover{color:#fff}

/* Auszeichnungen und Akzente */
.winter .marke-label{color:var(--eis)}
.winter .dunkel .marke-label{color:#8FBFD6}
.winter .aussage-hell{color:var(--eis-tief)}
.winter h2,.winter h3{color:var(--eis-tief)}
.winter .dunkel h2,.winter .dunkel h3{color:#fff}
.winter a{color:var(--eis)}
.winter .dunkel a{color:#8FBFD6}

/* Dunkler Block in Eisblau statt Anthrazit */
.winter .dunkel{
  position:relative;
  overflow:hidden;
  color:#CBDCE5;
  background-color:#173845;
}
.winter .dunkel>.wrap{position:relative;z-index:2}
.winter .dunkel .lead{color:#BDD6E2}
.winter .dunkel th{color:#fff}

/* Hinweiskaesten */
.winter .kasten{background:var(--eis-blass);border-left-color:var(--eis)}
.winter .dunkel .kasten{background:rgba(255,255,255,.07);border-left-color:#8FBFD6}

/* Schneeflocken statt Haken in den Listen */
.winter ul.haken li::before{
  content:"";position:absolute;left:0;top:.22em;
  width:15px;height:15px;border:0;transform:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232F6480' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 2.5v19M3.8 7.25l16.4 9.5M20.2 7.25L3.8 16.75'/%3E%3Cpath d='M12 6.4 10 4.4M12 6.4l2-2M12 17.6l-2 2M12 17.6l2 2'/%3E%3C/svg%3E") center/contain no-repeat;
}
.winter .dunkel ul.haken li::before{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8CBDB' stroke-width='1.9' stroke-linecap='round'%3E%3Cpath d='M12 2.5v19M3.8 7.25l16.4 9.5M20.2 7.25L3.8 16.75'/%3E%3Cpath d='M12 6.4 10 4.4M12 6.4l2-2M12 17.6l-2 2M12 17.6l2 2'/%3E%3C/svg%3E");
}
.winter ul.strich li::before{background:var(--eis)}

/* Ablauf-Ziffern und Trennlinien */
.winter .schritt::before{color:var(--eis)}
.winter .gruppe-titel{border-bottom-color:var(--eis-tief)}
.winter .eintrag .nr{color:var(--eis)}
.winter .eintrag .mehr{color:var(--eis)}
.winter .eintrag:hover{background:rgba(47,100,128,.06)}

/* Abschluss-Aufruf in Eisblau, mit fallendem Schnee.
   Vorher sassen hier sieben aufgemalte Flocken fest im Hintergrund.
   Der Block sah dadurch aus wie die beiden anderen blauen Flaechen,
   nur dass sich nichts bewegte. Jetzt faellt hier derselbe Schnee wie
   im Kopf und im dunklen Block, nur gedaempft: ueber dem Text darf er
   nicht aufdringlich werden. */
.winter .aufruf{
  position:relative;
  overflow:hidden;
  background-color:#143643;
  background-image:linear-gradient(160deg,#1E4A5D 0%,#143643 100%);
}
.winter .aufruf>.wrap{position:relative;z-index:2}
.winter .aufruf p{color:#C4DAE4}
.winter .aufruf .knopf-voll{background:#fff;color:var(--eis-tief)}
.winter .aufruf .knopf-voll:hover{background:var(--eis-tief);color:#fff}

/* Tabelle der Raeumzeiten */
.winter .tabellen-rahmen th{color:var(--eis-tief)}

/* Der Abschluss-Aufruf hat eine eigene dunkle Flaeche. Die beiden Regeln
   oben (.winter h2 und .winter a) wuerden dort dunkelblau auf dunkelblau
   setzen, deshalb hier gezielt zurueckgeholt. */
.winter .aufruf h2{color:#fff}
.winter .aufruf .knopf-rand{color:#fff}

/* Navigationspunkt Winterdienst: schneeweiss abgesetzt vom Rest der
   Navigation. Saisonal gedacht; zum Entfernen die Zeile in der nav-Liste
   in build.js loeschen. */
.hauptnav a.winter-punkt{
  display:inline-flex;align-items:center;gap:7px;
  background:#fff;color:#12262F;
  padding:7px 14px;border:0;border-bottom:0;
  box-shadow:0 1px 2px rgba(0,0,0,.25);
}
.hauptnav a.winter-punkt .flocke{width:16px;height:16px;flex:none;color:#3E7794}
.hauptnav a.winter-punkt:hover{background:#DCEAF2;color:#12262F;border-bottom-color:transparent}
.hauptnav a.winter-punkt:hover .flocke{color:#12262F}

/* Winterdienst neben der Telefonnummer, nur auf schmalen Bildschirmen.
   Dort ist die Hauptnavigation ausgeblendet, der Punkt waere sonst
   auf dem Handy gar nicht erreichbar. */
.winter-mobil{display:none}
@media (max-width:940px){
  .winter-mobil{
    display:inline-flex;align-items:center;justify-content:center;gap:7px;
    flex:none;min-width:42px;height:42px;padding:0 12px;
    background:#fff;color:#12262F;text-decoration:none;
    font-size:14.5px;font-weight:700;font-stretch:96%;white-space:nowrap;
    box-shadow:0 1px 2px rgba(0,0,0,.25);
  }
  .winter-mobil .flocke{width:20px;height:20px;flex:none;color:#3E7794}
  .winter-mobil:hover{background:#DCEAF2}
  .kopf-innen{gap:10px}
}
/* auf sehr schmalen Geraeten nur die Flocke, sonst passt die Zeile nicht */
@media (max-width:700px){
  .winter-mobil span{
    position:absolute;width:1px;height:1px;overflow:hidden;
    clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
  }
  .winter-mobil{padding:0}
}

/* Tabellen auf dunklen Flaechen. Die Grundfarbe der Linien ist fuer hellen
   Grund gedacht und waere hier unsichtbar. Heller Schleier statt fester
   Farbe, damit es auf jeder dunklen Flaeche funktioniert. */
.dunkel th,.dunkel td{border-bottom-color:rgba(255,255,255,.35)}
.dunkel th{color:#fff}

/* Die Regel .winter .tabellen-rahmen th faerbt Tabellenkoepfe dunkelblau,
   gedacht fuer helle Flaechen. Die einzige Tabelle steht aber im dunklen
   Block, dort muss sie weiss bleiben. Gleiche Spezifitaet, spaeter notiert,
   gewinnt also. */
.winter .dunkel th{color:#fff}


/* =====================================================================
   SCHNEEFALL, SCHNEEKANTE UND PINGUIN
   Nur auf der Winterdienstseite. Alles davon ist Schmuck und mit
   aria-hidden ausgezeichnet.

   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt durch
   die Regel ganz oben in dieser Datei alles als Standbild: die Flocken
   bleiben dort stehen, wo --p sie hinsetzt, der Pinguin steht links im
   Bild und schiebt nicht, der Schnee liegt still.
   ===================================================================== */

.flockenfall{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}

/* Jede Flocke ist ein Hochformat ueber die ganze Hoehe, die Zeichnung
   sitzt oben darin. Dadurch bedeutet eine Verschiebung von 100 Prozent
   genau eine Kopfhoehe, ohne dass das Stylesheet diese Hoehe kennen
   muss.

   --x Lage quer, --g Groesse, --d Falldauer, --v Vorlauf (negativ,
   damit nicht alle gleichzeitig oben starten), --r Drehdauer,
   --o Deckkraft, --p Ruhelage ohne Bewegung. Die Flocken fallen
   geradeaus nach unten; was sich bewegt, ist nur ihre Drehung. */
.flockenfall i{
  position:absolute;top:0;left:var(--x);
  width:var(--g);height:100%;
  opacity:var(--o);
  translate:0 var(--p,40%);
  /* Ohne diese Zeile dreht sich der KASTEN, nicht die Flocke. Der
     Kasten reicht ueber die volle Kopfhoehe, sein Mittelpunkt liegt
     also hunderte Bildpunkte unter der Zeichnung, und die Flocke
     fliegt auf einer grossen Kreisbahn statt sich zu drehen. Der
     Drehpunkt muss in die Mitte der Zeichnung, und die sitzt oben. */
  transform-origin:50% calc(var(--g) / 2);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-linecap='round'%3E%3Cpath d='M12 1.5v21M2.9 6.75l18.2 10.5M21.1 6.75L2.9 17.25M12 5.8 9.6 3.4M12 5.8l2.4-2.4M12 18.2l-2.4 2.4M12 18.2l2.4 2.4M6.8 9.2 3.5 8.3M6.8 9.2l-.9-3.3M17.2 14.8l3.3.9M17.2 14.8l.9 3.3M6.8 14.8l-3.3.9M6.8 14.8l-.9 3.3M17.2 9.2l3.3-.9M17.2 9.2l.9-3.3' stroke-opacity='.26' stroke-width='5.4'/%3E%3Cpath d='M12 1.5v21M2.9 6.75l18.2 10.5M21.1 6.75L2.9 17.25M12 5.8 9.6 3.4M12 5.8l2.4-2.4M12 18.2l-2.4 2.4M12 18.2l2.4 2.4M6.8 9.2 3.5 8.3M6.8 9.2l-.9-3.3M17.2 14.8l3.3.9M17.2 14.8l.9 3.3M6.8 14.8l-3.3.9M6.8 14.8l-.9 3.3M17.2 9.2l3.3-.9M17.2 9.2l.9-3.3' stroke-opacity='.92' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center top;
  background-size:var(--g) var(--g);
  animation:flocke-faellt var(--d) linear var(--v) infinite,
            flocke-dreht var(--r) linear var(--v) infinite;
}
/* Etwa die Haelfte dreht sich andersherum. Die Liste gilt der Reihe
   nach fuer die beiden Bewegungen: Fallen normal, Drehen rueckwaerts. */
.flockenfall i.gegen{animation-direction:normal,reverse}

/* translate und rotate sind eigene Eigenschaften, keine zwei Anteile
   von transform. Nur deshalb koennen Fallen und Drehen nebeneinander
   laufen, ohne dass eins das andere ueberschreibt. */
@keyframes flocke-faellt{
  from{translate:0 -12%}
  to{translate:0 102%}
}
@keyframes flocke-dreht{from{rotate:0deg}to{rotate:360deg}}

/* Gemessen: auf der blanken Flaeche steht die Ueberschrift bei 10.7:1
   und die Vorzeile bei 7.1:1. Zieht aber eine helle Flocke hinter dem
   Text durch, faellt der Wert an dieser Stelle stark ab. Ueber dem
   Textblock werden die Flocken deshalb heruntergenommen; rechts
   daneben, wo kein Text steht, leuchten sie voll. */
.winter .seitenkopf>.flockenfall{
  -webkit-mask-image:radial-gradient(112% 86% at 0% 44%,
    rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 53%, rgba(0,0,0,.40) 72%, #000 100%);
  mask-image:radial-gradient(112% 86% at 0% 44%,
    rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 53%, rgba(0,0,0,.40) 72%, #000 100%);
}

/* ---------- Der geraeumte Boden ----------
   In einer flachen Welt ist der naechste Block der Boden, der dunkle
   Kopf darueber der Himmel. Wo der Pinguin schon geraeumt hat, muss
   deshalb etwas uebrig bleiben, auf dem er steht: ein schmaler
   Streifen in der Farbe des Blocks darunter. Ohne ihn stuende er auf
   dem blanken Himmel, und zwischen seinen Fuessen und dem naechsten
   Block klaffte ein dunkler Spalt.

   Er liegt hinter dem Pinguin, der Schnee davor. So steht der Pinguin
   auf dem geraeumten Boden und schiebt den Schnee vor sich her. */
.schneeboden{
  position:absolute;left:0;right:0;bottom:0;height:var(--boden-h);z-index:2;
  background:var(--papier);
  pointer-events:none;
}

/* ---------- Schneekante am unteren Rand ----------
   Liegt hinter dem Pinguin (Wunsch vom 7. Oktober 2026: vorher lag sie
   davor und lief ueber seine Fuesse und die Schaufel). Seit dem
   8. Oktober auch hinter dem Pinguin vom Ende, der hereinschaut. Was er schon
   geraeumt hat, ist weggenommen; die Schnittkante laeuft mit seiner
   Schaufel mit. Nachdem er rechts heraus ist, waechst die Kante wieder
   hoch.

   Zwei Ebenen statt einer, und beide bewegen nur transform:

     .schneeband    ein Fenster mit overflow:hidden. Seine linke Kante
                    IST die Schnittkante und wandert nach rechts.
     .schneekante   der Schnee darin, um genau denselben Betrag
                    zurueckgeschoben, damit er im Raum stehen bleibt.

   Vorher schnitt ein wanderndes clip-path. Das sah bei der Figur
   zwar gleich aus, laeuft im Browser aber nicht auf derselben Stufe:
   eine reine transform-Bewegung schiebt der Browser auf die
   Grafikkarte, ein wanderndes clip-path muss er in jedem Einzelbild
   neu zeichnen. Auf einer Seite mit siebzig fallenden Flocken bleibt
   das sichtbar zurueck, der Schnee ging dann langsamer weg als der
   Pinguin lief. Jetzt bewegen beide dieselbe Eigenschaft und koennen
   gar nicht mehr auseinanderlaufen.

   Das Fenster ist rechts ueber die Seite hinaus breiter als der
   Schnee darin. Sonst fehlte am rechten Rand ein Stueck, solange die
   Schnittkante noch links ausserhalb des Bildes liegt. */
.schneeband{
  position:absolute;left:0;bottom:0;
  right:calc(var(--pinguin-b) * -1.5);
  height:var(--kante-h);z-index:2;
  overflow:hidden;pointer-events:none;
  animation:schnee-fenster 26s linear 1 both;
}
.schneekante{
  position:absolute;left:0;bottom:0;top:0;
  right:calc(var(--pinguin-b) * 1.5);
  display:block;
  pointer-events:none;
  /* Die Farbe kommt aus dem Token, die Form aus einer Maske. Waere die
     Zeichnung selbst weiss gefuellt, bliebe an ihrer Unterkante eine
     sichtbare Naht gegen die Flaeche darunter stehen: der Schnee saehe
     aus wie ein aufgeklebter Streifen statt wie die verschneite
     Oberkante des naechsten Blocks. So gibt es nur eine einzige Kante,
     die geschwungene nach oben gegen den dunklen Himmel.

     preserveAspectRatio='none' ist noetig, sonst passt der Browser die
     Zeichnung in den Kasten ein statt sie zu dehnen, sobald das
     Seitenverhaeltnis nicht stimmt. Genau daher kamen die dunklen
     Luecken zwischen den Kacheln bei schmalem Fenster. */
  background:var(--papier);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 26' preserveAspectRatio='none'%3E%3Cpath d='M0 8c16 2 30 4 46 3c14-1 26-7 42-6c12 1 26 5 38 5c12 0 24-3 34-2v18H0Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom left/170px 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 26' preserveAspectRatio='none'%3E%3Cpath d='M0 8c16 2 30 4 46 3c14-1 26-7 42-6c12 1 26 5 38 5c12 0 24-3 34-2v18H0Z' fill='%23000'/%3E%3C/svg%3E") repeat-x bottom left/170px 100%;
  animation:schnee-schnee 26s linear 1 both;
}

/* ---------- Pinguin ----------
   Ein Streifen mit vier Bildern, eine Ebene fuer die Figur und eine
   fuer die Bugwelle vor der Schaufel. Beide haengen an derselben
   Zeitachse von 26 Sekunden, laufen also zwangslaeufig im
   Gleichschritt.

   Ablauf: er laeuft von links nach rechts durch, bei Sekunde 22 ist er
   rechts heraus, bis Sekunde 26 waechst der Schnee nach. In Anteilen
   der Gesamtzeit sind das 84.6154 Prozent. Ein Durchgang, keine
   Wiederholung.

   AUSGEBAUT: das Winken in der Mitte. Es sass bei 38.4615 Prozent
   (Sekunde 10, in der Bildmitte) bis 46.1538 Prozent (Sekunde 12).
   Dazu gab es zwei weitere Ebenen, .pinguin-steht und .pinguin-flosse,
   die ueber zwei Schaltanimationen (pinguin-zeigt-schieben und
   pinguin-zeigt-winken, je 26s steps(1)) gegen .pinguin-schieben
   getauscht wurden, beide um -6 Grad um 46%/94% gedreht. Die
   Flossenbilder baut pinguin-winken.js, der zweite Streifen hiess
   pinguin-flosse.webp. In pinguin-bahn und in den beiden Schnee-
   bewegungen stand bei
   38.4615 und 46.1538 Prozent je ein Stillstand. Kommen richtige
   Winkbilder von Sefik, gehoeren diese Stellen wieder hinein.

   Die Standhoehe haengt an der Schneekante und ist nicht fest
   eingetragen: sonst lief er bei schmalem Fenster, wo die Kante
   niedriger ist, in der Luft.

   Massgeblich ist die Unterkante der FUESSE, nicht die des Bildes.
   Im Bildstreifen enden die Fuesse 10.10 Prozent der Bildhoehe ueber
   der Unterkante, der Schatten reicht noch 8.7 Prozent tiefer. Auf die
   Breite umgerechnet sind das 0.0802. Gesetzt wird so, dass die
   Fussunterkante bei 46 Prozent der Kantenhoehe liegt, das Wellental
   der Kante aber bei 57.7 Prozent: der Schnee deckt die Stelle, wo er
   den Boden beruehrt, an jedem Punkt der Welle ab. Sonst bleibt dort
   ein dunkler Spalt zwischen seinen Fuessen und dem Schnee. */
.pinguin{
  position:absolute;left:0;z-index:3;
  bottom:calc(var(--boden-h) - var(--pinguin-b) * .0802);
  width:var(--pinguin-b);height:calc(var(--pinguin-b)/1.2593);
  pointer-events:none;
  animation:pinguin-bahn 26s linear 1 both;
}
.pinguin i{
  position:absolute;inset:0;display:block;
  background-repeat:no-repeat;
}
.pinguin-schieben{
  background-image:url("/assets/bilder/pinguin-winterdienst.webp?v=5adfa236");
  background-size:800% 100%;
  z-index:2;
}

/* ---------- Bugwelle vor der Schaufel ----------
   Der Bildstreifen bringt keinen Schneehaufen mehr mit, der pulsierte
   ja mit jedem Einzelbild. Stattdessen schiebt er hier einen Huegel
   vor sich her, der zu seiner Figur gehoert und deshalb mit ihm
   wandert. Er hat die Farbe der Seitenflaeche, geht also nahtlos in
   die Schneeflaeche und in den geraeumten Boden ueber, und weil er
   sich nie aendert, kann er nicht springen.

   Er liegt hinter den Schaufelebenen, damit das Blatt davor sichtbar
   bleibt. Die Unterkante wird auf die Kopfunterkante zurueckgerechnet,
   weil der Pinguin selbst etwas tiefer sitzt. */
/* Der Selektor braucht ein i, sonst gewinnt die allgemeine Regel
   .pinguin i mit ihrem inset:0 ueber die Spezifitaet und die Bugwelle
   haengt oben im Kasten statt unten am Boden. */
.pinguin i.pinguin-bug{
  inset:auto;
  left:54%;
  width:58%;
  bottom:calc(var(--pinguin-b) * .0802 - var(--boden-h));
  height:calc(var(--kante-h) * 1.45);
  background:var(--papier);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40C9 39 21 31 34 10 47 17 64 24 82 27 89 29 95 30 100 31L100 40Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center bottom/100% 100%;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40C9 39 21 31 34 10 47 17 64 24 82 27 89 29 95 30 100 31L100 40Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center bottom/100% 100%;
  z-index:1;
}

/* ---------- Er schaut herein, wenn er fertig ist ----------
   Nachdem er rechts heraus ist, kommt er um die Ecke zurueck und sieht
   nach, was er geraeumt hat. Dafuer gibt es eine zweite Zeichnung, die
   Vordersicht; sie ist ein eigenes Bild und kein Einzelbild des
   Streifens.

   Lage, Groesse und Neigung sind aus Sefiks Entwurf gemessen, bei 1280
   Bildpunkten Fensterbreite: 97 breit, um 42 Grad gekippt, 58 ueber den
   rechten Rand und 42 unter die Unterkante des Kopfes hinaus. Beides
   haengt an --pinguin-b, damit es bei schmalem Fenster mitgeht; seit
   der schiebende Pinguin 170 statt 141 breit ist, ist er 117 breit.
   Gedreht wird um die Mitte, darauf sind die beiden Abstaende
   gerechnet.

   Er liegt vor der Schneekante, wie der schiebende Pinguin (Wunsch vom
   8. Oktober 2026: dahinter verdeckte der nachwachsende Schnee seinen
   unteren Rand). */
.pinguin-guckt{
  position:absolute;z-index:3;pointer-events:none;
  --guckt-b:calc(var(--pinguin-b) * .688);
  width:var(--guckt-b);
  height:calc(var(--guckt-b) / .6290);
  right:calc(var(--guckt-b) * -.278);
  bottom:calc(var(--guckt-b) * -.139);
  background:url("/assets/bilder/pinguin-vordersicht.webp?v=15ecb087") no-repeat center/100% 100%;
  transform:translate(130%,14%) rotate(-42deg);
  animation:pinguin-schaut 26s linear 1 both;
}
/* Erst bei Sekunde 22 kommt er, in gut einer Sekunde, und bleibt dann.
   Das Ausrollen steht am Keyframe davor: die Angabe gilt immer fuer den
   folgenden Abschnitt. */
@keyframes pinguin-schaut{
  0%{transform:translate(130%,14%) rotate(-42deg)}
  84.6154%{transform:translate(130%,14%) rotate(-42deg);animation-timing-function:cubic-bezier(.22,.9,.3,1)}
  89.2308%{transform:translate(0,0) rotate(-42deg)}
  100%{transform:translate(0,0) rotate(-42deg)}
}
/* Im Standbild steht schon die schiebende Figur links im Kopf. Zwei
   Pinguine nebeneinander waeren eine Aussage, die die Bewegung so gar
   nicht macht; hier bleibt er deshalb weg. */
@media (prefers-reduced-motion:reduce){
  .pinguin-guckt{display:none}
}

/* Der Gang, beide Beine nacheinander:

     rechts  Bild 9 - 7 - 11 - 8 - 11 - 7
     links   Bild 12 - neu 7 - neu 11 - neu 8 - neu 11 - neu 7
     und wieder 9

   Den rechten Schritt hat Sefik gezeichnet, Bild 12 ist sein Anfang
   des linken. Die Bilder "neu" baut pinguin-linkes-bein.js aus Bild 12
   und dem abgehobenen Fuss aus 7, 11 und 8; Koerper, Schaufel und
   der stehende Fuss bewegen sich dabei wie in Sefiks rechtem Schritt.

   Zwoelf Takte zu je einem Zehntel einer Sekunde. Der Streifen traegt
   nur die acht verschiedenen Bilder; welches wann zu sehen ist, steht
   hier. Deshalb laeuft das nicht als gleichmaessige Folge mit steps(),
   sondern als Taktfolge mit steps(1) je Abschnitt: jeder Abschnitt
   haelt sein Bild bis zum naechsten Takt. Die Werte gibt
   pinguin-streifen.js aus, dort steht auch die Auswahl.

   22 Durchgaenge zu 1.2s decken die 26 Sekunden der Bahn ab. */
.pinguin-schieben{animation:pinguin-schiebt 1.2s steps(1) 22 both}

@keyframes pinguin-schiebt{
  0%{background-position-x:0%}               /* Bild 9      */
  8.3333%{background-position-x:14.2857%}    /* Bild 7      */
  16.6667%{background-position-x:28.5714%}   /* Bild 11     */
  25%{background-position-x:42.8571%}        /* Bild 8      */
  33.3333%{background-position-x:28.5714%}   /* Bild 11     */
  41.6667%{background-position-x:14.2857%}   /* Bild 7      */
  50%{background-position-x:57.1429%}        /* Bild 12     */
  58.3333%{background-position-x:71.4286%}   /* Bild neu 7  */
  66.6667%{background-position-x:85.7143%}   /* Bild neu 11 */
  75%{background-position-x:100%}            /* Bild neu 8  */
  83.3333%{background-position-x:85.7143%}   /* Bild neu 11 */
  91.6667%{background-position-x:71.4286%}   /* Bild neu 7  */
  100%{background-position-x:0%}             /* Bild 9      */
}
@keyframes pinguin-bahn{
  0%{transform:translateX(-120%)}
  84.6154%{transform:translateX(calc(100vw + 20%))}
  100%{transform:translateX(calc(100vw + 20%))}
}
/* Die Schnittkante sitzt dort, wo seine Schaufel steht, also bei 66
   Prozent seiner Breite. Die beiden Bewegungen sind spiegelbildlich:
   was das Fenster nach rechts geht, geht der Schnee darin nach links.

   Die Anfangs- und Endwerte sind genau die Stellen, an denen seine
   Schaufel zu diesen Zeitpunkten steht, auch wenn sie ausserhalb des
   Bildes liegen. Beginnt man stattdessen bei null, laufen beide
   Geraden auseinander und die Schnittkante eilt der Schaufel bis zu
   18 Bildpunkte voraus. Unter ihm steht dann eine senkrechte Stufe
   im Schnee, die wie ein Viereck ueber seinen Beinen aussieht.

   Bei 84.6539 Prozent springen beide zurueck in die Ruhelage, der
   Schnee dabei um eine Bandhoehe nach unten aus dem Fenster heraus.
   Von dort waechst er in den letzten vier Sekunden wieder hoch. */
@keyframes schnee-fenster{
  0%{transform:translateX(calc(var(--pinguin-b) * -0.54))}
  84.6154%{transform:translateX(calc(100vw + var(--pinguin-b) * 0.86))}
  84.6539%{transform:translateX(0)}
  100%{transform:translateX(0)}
}
@keyframes schnee-schnee{
  0%{transform:translateX(calc(var(--pinguin-b) * 0.54)) translateY(0)}
  84.6154%{transform:translateX(calc(-100vw - var(--pinguin-b) * 0.86)) translateY(0)}
  84.6539%{transform:translateX(0) translateY(130%)}
  100%{transform:translateX(0) translateY(0)}
}

/* Schmales Fenster: die Vorzeile laeuft dann ueber die ganze Breite,
   eine Maske von links schuetzt sie also nicht mehr. Hier wird von oben
   gedaempft; frei bleibt das untere Drittel, wo kein Text steht und der
   Pinguin laeuft. Der Umschaltpunkt liegt dort, wo der Textblock
   anfaengt, breiter zu werden als der geschuetzte Bereich. */
@media (max-width:960px){
  .winter .seitenkopf>.flockenfall{
    -webkit-mask-image:linear-gradient(to bottom,
      rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 68%, rgba(0,0,0,.5) 82%, #000 94%);
    mask-image:linear-gradient(to bottom,
      rgba(0,0,0,.15) 0%, rgba(0,0,0,.15) 68%, rgba(0,0,0,.5) 82%, #000 94%);
  }
}

@media (max-width:700px){
  .winter .seitenkopf{--pinguin-b:118px;--kante-h:16px;--boden-h:5px}
  .winter .seitenkopf .inner{padding-bottom:122px}
  .schneekante{-webkit-mask-size:118px 100%;mask-size:118px 100%}
}