/* ==========================================================================
   Kälteservice Gladrow — gladrow.css
   Entwurf 22.08.2026, Fassung 3: Eis und Glas.

   Hausfarbe #336699 stammt aus der layout.css der alten Seite (zweimal,
   für Überschriften) und ist per Bildpunktzählung im Seitenfoto bestätigt.
   Grundfläche Weiß — passend zu den weißen Fahrzeugen mit blauer Schrift.

   Tiefe entsteht hier nicht durch einen Schatten, sondern durch drei Dinge
   zusammen: halbdurchsichtige Flächen mit Unschärfe dahinter (Glas), ein
   heller Innenrand oben (Lichtkante wie an einer Eiswürfelkante) und
   mehrlagige Schatten (--tiefe-1 bis --tiefe-3).

   Jede Bewegung hängt am Block prefers-reduced-motion ganz unten.
   ========================================================================== */

/* --------------------------------------------------------------- Schriften
   Lokal eingebunden, kein Google-Fonts-Abruf (DSGVO). Dieselben Regeln
   stehen in css/fonts.css, die der ADMINBEREICH laedt; die oeffentlichen
   Seiten laden nur diese Datei, deshalb muessen sie auch hier stehen.
   Wird eine Schriftdatei getauscht, beide Stellen nachziehen.
   Benutzt werden: Inter 400/500/600 (Fliesstext), Space Grotesk 500/600/700
   (Ueberschriften und Marke). */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../assets/fonts/Inter-400.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/Inter-500.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/Inter-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('../assets/fonts/SpaceGrotesk-500.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('../assets/fonts/SpaceGrotesk-600.woff2') format('woff2')}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:700;font-display:swap;src:url('../assets/fonts/SpaceGrotesk-700.woff2') format('woff2')}

:root{
  /* Schriftskala, eingefuehrt 23.08.2026. Vorher 24 einzelne rem-Werte,
     teils 0,01 rem auseinander - fuer das Auge nicht unterscheidbar.
     mini, 3xl und 4xl sind eigene Stufen: 0,56 / 1,9 / 2,6 rem passten in
     keine der sieben und wurden deshalb NICHT verschoben. */
  --fs-mini: 0.56rem;
  --fs-xs: 0.78rem;
  --fs-sm: 0.86rem;
  --fs-md: 0.94rem;
  --fs-base: 1rem;
  --fs-lg: 1.12rem;
  --fs-xl: 1.25rem;
  --fs-2xl: 1.42rem;
  --fs-3xl: 1.9rem;
  --fs-4xl: 2.6rem;

  --blau:#336699; --blau-tief:#1e4468; --blau-nacht:#0f2740;
  --blau-hell:#6d9cc8; --blau-kante:#cfe0f0;
  --signal:#0b5fae; --signal-dunkel:#08477f;
  --weiss:#ffffff; --text:#12293d; --text-grau:#55708a; --text-hell:#eaf2f9;
  --radius-eis:22px; --breite:1180px;
  --takt:.3s cubic-bezier(.2,.7,.3,1);
  --takt-lang:.55s cubic-bezier(.2,.7,.3,1);

  --glas-rand:rgba(255,255,255,.85);
  --tiefe-1:0 1px 2px rgba(15,39,64,.06),0 3px 8px rgba(15,39,64,.06);
  --tiefe-2:0 2px 4px rgba(15,39,64,.07),0 10px 24px rgba(15,39,64,.10),0 1px 0 rgba(255,255,255,.9) inset;
  --tiefe-3:0 4px 10px rgba(15,39,64,.10),0 22px 48px rgba(15,39,64,.18),0 1px 0 rgba(255,255,255,.95) inset;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--text);
  font:400 17px/1.65 "Inter",system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 600px at 12% -10%,#f2f8fd 0%,rgba(242,248,253,0) 60%),
    radial-gradient(900px 500px at 100% 8%,#e6f0fa 0%,rgba(230,240,250,0) 55%),
    var(--weiss);
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blau);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3{font-family:"Space Grotesk","Inter",system-ui,sans-serif;line-height:1.12;margin:0 0 .5em;color:var(--blau-tief)}
h1{font-size:clamp(2.1rem,4.6vw,3.6rem);font-weight:700;letter-spacing:-.025em}
h2{font-size:clamp(1.55rem,2.7vw,2.25rem);font-weight:600;letter-spacing:-.015em}
h3{font-size:var(--fs-lg);font-weight:600}
p{margin:0 0 1em}
.bahn{width:min(100% - 2.5rem,var(--breite));margin-inline:auto}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- Eisscheibe: die Grundform des Entwurfs ----------------------------- */
.eis{
  position:relative;border-radius:var(--radius-eis);
  background:linear-gradient(150deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.66) 42%,rgba(226,240,251,.60) 100%);
  border:1px solid var(--glas-rand);
  box-shadow:var(--tiefe-2);
  backdrop-filter:blur(14px) saturate(1.25);
  -webkit-backdrop-filter:blur(14px) saturate(1.25);
  overflow:hidden;
}
.eis::before{
  content:"";position:absolute;left:8%;right:8%;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
}
.eis::after{
  content:"";position:absolute;top:-60%;left:-40%;width:36%;height:220%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(18deg) translateX(-160%);
  transition:transform var(--takt-lang);pointer-events:none;
}

/* --- Kopfleiste --------------------------------------------------------- */
/* Deckkraft von 0,72 auf 0,93 erhoeht: auf den Unterseiten liegt direkt
 unter der Leiste die grosse weisse Ueberschrift des Seitenkopfs, und die
 schien deutlich sichtbar durch. Die Unschaerfe bleibt, das Glasbild also
 auch - nur traegt die Flaeche jetzt. */
/* Die Hauptnavigation steckt in <nav id="hauptmenu">, damit das Seiten-Modul
   im Adminbereich sie findet (gleiche Auszeichnung wie bei ASSMA) und damit
   Vorleseprogramme einen Navigationsbereich melden. display:contents laesst
   die <ul> selbst das Flex-Kind von .kopf-innen bleiben — ohne diese Zeile
   rutscht das Menue 61 px nach links (gemessen, nicht geschaetzt). */
.kopf-innen > nav{display:contents}

.kopf{position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.93);backdrop-filter:blur(16px) saturate(1.3);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid rgba(255,255,255,.7);
  box-shadow:0 1px 0 rgba(51,102,153,.10),0 6px 20px rgba(15,39,64,.05);
  transition:background var(--takt),box-shadow var(--takt)}
.kopf.gescrollt{background:rgba(255,255,255,.97);box-shadow:0 1px 0 rgba(51,102,153,.14),0 10px 28px rgba(15,39,64,.12)}
.kopf-innen{display:flex;align-items:center;gap:1.25rem;min-height:80px}
.marke{display:flex;align-items:center;gap:.7rem;line-height:1.1;color:var(--blau-tief);
  text-decoration:none;font-family:"Space Grotesk",sans-serif;font-weight:700;font-size:var(--fs-xl)}
.marke-logo{height:64px;width:auto;flex:none;display:block}
.kopf .marke{flex:none}
.marke-text{display:flex;flex-direction:column;line-height:1.1}
.marke strong,.marke span{white-space:nowrap}
.marke span{font-size:var(--fs-xs);font-weight:500;color:var(--blau);letter-spacing:.08em;text-transform:uppercase}
.menue{display:flex;gap:.2rem;margin-left:auto;list-style:none;padding:0;margin-block:0}
.menue a{display:block;padding:.58rem .82rem;border-radius:11px;color:var(--blau-tief);
  text-decoration:none;font-size:var(--fs-md);font-weight:500;white-space:nowrap;position:relative;
  transition:color var(--takt),background var(--takt),box-shadow var(--takt)}
.menue a::after{content:"";position:absolute;left:.82rem;right:.82rem;bottom:.36rem;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--blau-hell),var(--blau));
  transform:scaleX(0);transform-origin:left;transition:transform var(--takt)}
.menue a:hover,.menue a:focus-visible{background:rgba(255,255,255,.85);color:var(--blau);
  box-shadow:var(--tiefe-1),0 1px 0 rgba(255,255,255,.9) inset}
.menue a:hover::after,.menue a:focus-visible::after{transform:scaleX(1)}

/* Untermenue, genau eine Ebene. Ergaenzt 24.08.2026: der Adminbereich konnte
   Unterpunkte schon anlegen (Knoepfe ← → in admin/seiten.php) und der
   Schreiber gladrow_menue_html() gab sie als verschachteltes <ul> aus - es gab
   nur keine einzige CSS-Regel dafuer. Ein angelegter Unterpunkt waere als
   ungestylte Liste mitten im Kopf erschienen.
   Aufgebaut mit GLADROWs eigenen Variablen, nicht aus ASSMA uebernommen.
   Auf dem Rechner klappt es beim Ueberfahren und bei Tastaturfokus auf. */
.menue li{position:relative}
.menue ul{display:none;position:absolute;left:0;top:100%;z-index:70;min-width:210px;
  flex-direction:column;gap:0;margin:.3rem 0 0;padding:.35rem 0;list-style:none;
  background:rgba(255,255,255,.97);backdrop-filter:blur(18px);
  border:1px solid var(--blau-kante);border-radius:11px;
  box-shadow:0 16px 32px rgba(15,39,64,.16)}
.menue li:hover>ul,.menue li:focus-within>ul{display:flex}
.menue ul a{padding:.55rem 1rem;border-radius:0;white-space:nowrap}
.menue ul a::after{display:none}
.menue ul a:hover,.menue ul a:focus-visible{background:rgba(51,102,153,.10);box-shadow:none}
/* Kleines Dreieck am Elternpunkt, damit erkennbar ist, dass es weitergeht.
   Fehlt :has() im Browser, entfaellt nur das Zeichen - das Menue bleibt
   bedienbar. */
.menue li:has(>ul)>a::before{content:"";display:inline-block;vertical-align:middle;
  margin:-2px 6px 0 0;border:4px solid transparent;border-top-color:currentColor}

.not-knopf{display:inline-flex;align-items:center;gap:.45rem;padding:.4rem .85rem;border-radius:999px;font-size:var(--fs-sm);line-height:1.2;
  background:linear-gradient(180deg,#1272c9 0%,var(--signal) 55%,var(--signal-dunkel) 100%);
  color:var(--weiss);text-decoration:none;font-weight:600;white-space:nowrap;
  border:1px solid rgba(255,255,255,.35);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 4px 10px rgba(11,95,174,.32),0 12px 26px rgba(11,95,174,.24);
  transition:transform var(--takt),box-shadow var(--takt),filter var(--takt)}
.not-knopf:hover,.not-knopf:focus-visible{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 8px 16px rgba(11,95,174,.36),0 18px 38px rgba(11,95,174,.30)}
.not-punkt{width:9px;height:9px;border-radius:50%;background:var(--weiss);
  box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:puls 2.4s infinite}
@keyframes puls{0%{box-shadow:0 0 0 0 rgba(255,255,255,.7)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}

.burger{display:none;margin-left:auto;width:48px;height:48px;border:1px solid var(--glas-rand);
  border-radius:14px;background:rgba(255,255,255,.75);box-shadow:var(--tiefe-1);cursor:pointer;
  backdrop-filter:blur(10px)}
.burger span{display:block;width:22px;height:2px;margin:4px auto;border-radius:2px;background:var(--blau-tief);
  transition:transform var(--takt),opacity var(--takt)}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* --- Kopfbereich mit Video und Eisscheibe ------------------------------- */
.held{position:relative;min-height:min(88vh,760px);display:grid;align-items:center;
  overflow:hidden;background:#dbe9f6;isolation:isolate}
.held-bild,.held-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.held-video{opacity:0;transition:opacity 1s ease}
.held-video.laeuft{opacity:1}
.held::before{content:"";position:absolute;inset:0;z-index:1;
  background:
   radial-gradient(900px 520px at 22% 45%,rgba(255,255,255,.94) 0%,rgba(255,255,255,.55) 45%,rgba(255,255,255,0) 72%),
   linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.12) 40%,rgba(30,68,104,.20) 100%)}
.held-innen{position:relative;z-index:2;padding:4.6rem 0}
.held-scheibe{max-width:46rem;padding:2.6rem 2.4rem 2.4rem;border-radius:26px;
  background:linear-gradient(150deg,rgba(255,255,255,.86) 0%,rgba(255,255,255,.62) 46%,rgba(222,238,252,.56) 100%);
  border:1px solid rgba(255,255,255,.9);
  box-shadow:var(--tiefe-3);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3)}
.held h1{color:var(--blau-tief);text-shadow:0 1px 0 rgba(255,255,255,.7)}
.held-vor{display:inline-flex;align-items:center;gap:.45rem;margin-bottom:1rem;padding:.36rem .95rem;
  border-radius:999px;background:rgba(255,255,255,.9);border:1px solid var(--glas-rand);
  box-shadow:var(--tiefe-1);color:var(--blau);font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.08em;text-transform:uppercase}
/* #304e68 statt #3a5a76: ueber dem Eiswuerfel-Standbild lag der Kontrast im
   hellsten Punkt des Textfeldes bei 4,32:1 und damit unter der Grenze 4,5:1 (WCAG AA).
   Mit diesem Wert sind es 5,20:1. Gemessen am gerenderten Hintergrund, nicht geschaetzt. */
.held-text{font-size:var(--fs-lg);color:#304e68;max-width:36rem}
.held-tasten{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.8rem}
.taste{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .95rem;border-radius:999px;font-size:var(--fs-md);line-height:1.2;
  font-weight:600;text-decoration:none;border:1px solid transparent;
  transition:transform var(--takt),box-shadow var(--takt),filter var(--takt),background var(--takt),color var(--takt)}
.taste-signal{color:var(--weiss);border-color:rgba(255,255,255,.35);
  background:linear-gradient(180deg,#1272c9 0%,var(--signal) 55%,var(--signal-dunkel) 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 6px 14px rgba(11,95,174,.30),0 16px 34px rgba(11,95,174,.24)}
.taste-signal:hover,.taste-signal:focus-visible{transform:translateY(-2px);filter:brightness(1.06);
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 10px 20px rgba(11,95,174,.34),0 22px 44px rgba(11,95,174,.28)}
.taste-glas{background:rgba(255,255,255,.72);color:var(--blau-tief);border-color:rgba(255,255,255,.9);
  box-shadow:var(--tiefe-2);backdrop-filter:blur(10px)}
.taste-glas:hover,.taste-glas:focus-visible{background:rgba(255,255,255,.92);transform:translateY(-2px);
  box-shadow:var(--tiefe-3)}

/* --- Abschnitte --------------------------------------------------------- */
.abschnitt{padding:clamp(3.6rem,7vw,6.2rem) 0;position:relative}
.abschnitt-hell{background:linear-gradient(180deg,rgba(233,242,250,.75),rgba(255,255,255,0))}
.abschnitt-kopf{max-width:46rem;margin-bottom:2.8rem}
.abschnitt-kopf p{color:var(--text-grau)}
.raster{display:grid;gap:1.5rem;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}

/* --- Karten: Eiswürfel mit leichter Kippung ----------------------------- */
.karten{perspective:1200px}
.karte{padding:2rem 1.8rem;transform-style:preserve-3d;
  transition:transform var(--takt),box-shadow var(--takt)}
.karte:hover{transform:translateY(-6px) rotateX(2.2deg) rotateY(-2.2deg);box-shadow:var(--tiefe-3)}
.karte:hover::after{transform:rotate(18deg) translateX(420%)}
.karte h3{margin-bottom:.4rem}
.karte p{margin-bottom:0;color:var(--text-grau)}
.karte-zahl{font-family:"Space Grotesk",sans-serif;font-size:var(--fs-4xl);font-weight:700;line-height:1;
  margin-bottom:.5rem;background:linear-gradient(180deg,#4d84bb,var(--blau-tief));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* --- Leistungen: dunkles Band, Kacheln als Eisblöcke -------------------- */
.leistungen{position:relative;color:var(--text-hell);
  background:linear-gradient(165deg,#22507a 0%,var(--blau-tief) 55%,var(--blau-nacht) 100%)}
.leistungen::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(700px 320px at 80% 0%,rgba(109,156,200,.30),transparent 70%)}
.leistungen .bahn{position:relative;z-index:1}
.leistungen h2,.leistungen h3{color:var(--weiss)}
.leistungen .abschnitt-kopf p{color:#bcd5ea}
.leistungen .raster{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
/* Kacheln, Fassung 2 — drei belegte Maengel der ersten Fassung behoben:

   1. Der Beschreibungstext war eingeklappt (max-height:0) und erschien erst
      beim Ueberfahren mit der Maus. Auf Tablet und Telefon also nie. Damit
      trug jede Kachel nur zwei bis drei Woerter Information. Er steht jetzt
      immer.
   2. Die Ueberschriftfarbe kam von der Regel ".leistungen h3{color:#fff}".
      Seit die Uebersichtsseiten hell sind, greift statt dessen die globale
      Regel "h3{color:var(--blau-tief)}" - blaue Schrift auf dunklem Bild,
      praktisch unlesbar. Die Kachel setzt ihre Farben jetzt selbst.
   3. Text ueber dem Bild wirkte auf jeder Kachel anders, weil die Bilder
      unterschiedlich hell sind. Bild und Text sind jetzt getrennt: oben das
      Bild mit festem Seitenverhaeltnis 16:10, darunter ein eigener dunkler
      Textbereich. Dadurch sind alle Kacheln gleich aufgebaut und der
      Kontrast haengt nicht mehr vom Motiv ab. */
.kachel{position:relative;display:flex;flex-direction:column;border-radius:var(--radius-eis);
  overflow:hidden;text-decoration:none;color:var(--weiss);
  /* Glas statt Vollton: dieselbe Sprache wie .eis, nur dunkel. Deckkraft
     0,70 ist gemessen - auf weissem Grund, dem unguenstigsten Fall, traegt
     sie weissen Text mit 5,74:1 und den Fliesstext #e3eef8 mit 4,88:1.
     Deshalb ist der Fliesstext von #cfe2f2 auf #e3eef8 aufgehellt: mit dem
     alten Wert waeren es nur 4,32:1 und damit zu knapp an der Grenze. */
  background:linear-gradient(180deg,rgba(30,68,104,.70),rgba(15,39,64,.76));
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border:1px solid rgba(180,214,240,.38);
  box-shadow:0 2px 6px rgba(15,39,64,.16),0 12px 28px rgba(15,39,64,.20),
             0 34px 64px -18px rgba(15,39,64,.34),0 1px 0 rgba(255,255,255,.22) inset;
  transition:transform var(--takt),box-shadow var(--takt),border-color var(--takt)}

.kachel-bild{position:relative;display:block;overflow:hidden;aspect-ratio:16/10;flex:none}
.kachel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform var(--takt-lang),filter var(--takt);filter:grayscale(.75) brightness(1.06) contrast(1.02)}
/* Blauton wie das Heldbild: Farbebene ueber dem entsaettigten Foto. */
.kachel-bild::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:#4a7fb0;mix-blend-mode:color}
/* Auslauf ins Dunkle nur im untersten Viertel und deutlich schwaecher.
   Die erste Fassung deckte mit bis zu 85 %% Deckkraft die halbe Bildhoehe
   ab - dadurch sah jedes Bild aus, als waere es unten abgeschnitten.
   Der Text steht ohnehin darunter, nicht darauf; ein starker Verlauf
   hat hier keine Aufgabe mehr. */
.kachel-bild::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to bottom,transparent 0%,transparent 76%,rgba(15,39,64,.32) 100%)}

.kachel-text{position:relative;z-index:2;padding:1.3rem 1.4rem 1.5rem;
  display:flex;flex-direction:column;flex:1}
/* Weiss auf #1e4468 = 10,09:1, #cfe2f2 auf #1e4468 = 7,60:1. Grenze 4,5:1. */
.kachel-text h3{color:var(--weiss);margin-bottom:.35rem}
/* 28.08.2026: fs-md -> fs-sm (0,94 -> 0,86rem). Grund: gemessen 20-26 Zeichen
   je Zeile in den schmalen Kacheln, Richtwert fuer Fliesstext ist 45-75.
   Kontrast bleibt zulaessig: #e3eef8 auf der Kachelflaeche = 4,88:1, und
   0,86rem = 13,8px zaehlt weiter als Normaltext (Grenze 4,5). */
.kachel-text p{margin:0;font-size:var(--fs-sm);line-height:1.5;color:#e3eef8}

.kachel:hover,.kachel:focus-visible{transform:translateY(-8px);border-color:rgba(180,214,240,.65);
  box-shadow:0 6px 14px rgba(0,0,0,.30),0 34px 64px rgba(0,0,0,.44),0 1px 0 rgba(255,255,255,.22) inset}
.kachel:hover img,.kachel:focus-visible img{transform:scale(1.06);filter:grayscale(.75) brightness(1.1) contrast(1.04)}
.kachel-pfeil{display:inline-block;margin-left:.35rem;transition:transform var(--takt)}
.kachel:hover .kachel-pfeil{transform:translateX(6px)}

/* --- Branchenband ------------------------------------------------------- */
.band{display:flex;flex-wrap:wrap;gap:.65rem}
.pille{display:inline-block;padding:.55rem 1.1rem;border-radius:999px;
  background:rgba(255,255,255,.78);border:1px solid var(--glas-rand);
  box-shadow:var(--tiefe-1);backdrop-filter:blur(8px);
  font-size:var(--fs-md);color:var(--blau-tief);text-decoration:none;
  transition:background var(--takt),color var(--takt),transform var(--takt),box-shadow var(--takt)}
.pille:hover,.pille:focus-visible{color:var(--weiss);transform:translateY(-3px);
  background:linear-gradient(180deg,#3d76ab,var(--blau));box-shadow:var(--tiefe-2)}

/* --- Streifen ----------------------------------------------------------- */
.streifen{position:relative;padding:clamp(3.2rem,6vw,5.4rem) 0;color:var(--weiss);overflow:hidden;
  background:linear-gradient(120deg,var(--blau-tief),var(--blau))}
.streifen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34}
.streifen::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(15,39,64,.92),rgba(51,102,153,.55))}
.streifen .bahn{position:relative;z-index:2;max-width:44rem}
.streifen h2{color:var(--weiss)}
.streifen p{color:#dbe9f5}
.streifen .taste-signal{background:linear-gradient(180deg,var(--weiss),#e8f2fb);color:var(--blau-tief);
  border-color:rgba(255,255,255,.9);box-shadow:0 6px 16px rgba(0,0,0,.22),0 1px 0 rgba(255,255,255,.9) inset}

/* --- Fußbereich --------------------------------------------------------- */
.fuss{background:linear-gradient(180deg,var(--blau-tief),var(--blau-nacht));
  color:#c2d7e8;padding:3.6rem 0 2rem;font-size:var(--fs-md)}
.fuss a{color:#e2eef8}
.fuss-raster{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.fuss h3{color:var(--weiss);font-size:var(--fs-base);margin-bottom:.7rem}
.fuss ul{list-style:none;padding:0;margin:0}
.fuss li{margin-bottom:.35rem}
/* Symbole vor den Kontaktzeilen im Fuss. Brief, Telefon und Cookie sind
   woertlich aus ASSMA uebernommen; Farbe hier --blau-hell statt Orange.
   Das Fax-Symbol ist am 28.08.2026 neu gezeichnet (im ASSMA-Satz gab es
   keins, nur ein PNG fuer Mailprogramme) - gleicher Bauplan: viewBox 24,
   fill none, stroke currentColor 1.6. Beschreibung in WEBSEITEN/DESIGN.md. */
.fuss-kontakt li{display:flex;align-items:center;gap:9px}
.fuss-ico{width:15px;height:15px;flex:0 0 15px;color:var(--blau-hell)}
.fuss-cookie{display:inline-flex;align-items:center;gap:7px}
.fuss-schluss{margin-top:2.4rem;padding-top:1.2rem;border-top:1px solid rgba(109,156,200,.26);
  display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between;font-size:var(--fs-sm);color:#93b3cd}

/* --- Klebeleiste Handy -------------------------------------------------- */
.ruf-leiste{position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  padding:.7rem 1rem calc(.7rem + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,var(--signal),var(--signal-dunkel));
  box-shadow:0 -6px 22px rgba(15,39,64,.34),0 1px 0 rgba(255,255,255,.25) inset}
.ruf-leiste a{display:flex;align-items:center;justify-content:center;gap:.5rem;color:var(--weiss);
  text-decoration:none;font-weight:700;font-size:var(--fs-base);min-height:44px}

/* --- Einblenden --------------------------------------------------------- */
.zeig{opacity:0;transform:translateY(26px) scale(.985);
  transition:opacity .45s ease,transform .45s cubic-bezier(.2,.7,.3,1)}
.zeig.da{opacity:1;transform:none}

@media (max-width:1500px){
  .kopf-innen{gap:.7rem}
  .menue{gap:.1rem}
  .menue a{padding:.55rem .5rem;font-size:var(--fs-md)}
  .marke span{display:none}
  .marke{font-size:var(--fs-lg)}
  .kopf .not-knopf{padding:.5rem .9rem;font-size:var(--fs-sm)}
}
/* --- Mobil: Umbruch bei 1240px — darunter passen Menü + Notrufnummer
   nachweislich nicht mehr nebeneinander (Inhalt 1180px + Rand). --- */
@media (max-width:1240px){
  .burger{display:block}
  .kopf .not-knopf{display:none}
  .menue{position:fixed;inset:80px 0 auto 0;flex-direction:column;gap:0;padding:1rem 1.25rem 1.6rem;
    background:rgba(255,255,255,.96);backdrop-filter:blur(18px);
    border-bottom:1px solid var(--glas-rand);box-shadow:0 16px 32px rgba(15,39,64,.16);
    transform:translateY(-12px);opacity:0;pointer-events:none;
    transition:opacity var(--takt),transform var(--takt)}
  .menue.offen{transform:none;opacity:1;pointer-events:auto}
  .menue a{padding:.9rem .4rem;min-height:44px;border-bottom:1px solid var(--blau-kante)}
  .menue a::after{display:none}
  /* Untermenue am Handy: nicht aufklappen, sondern eingerueckt zeigen -
     ein Aufklappmenue waere dort mit dem Daumen kaum zu treffen. */
  .menue ul{display:flex;position:static;min-width:0;margin:0;padding:0;
    background:none;backdrop-filter:none;border:0;box-shadow:none}
  .menue ul a{padding-left:1.6rem;font-size:var(--fs-sm)}
  .menue li:has(>ul)>a::before{display:none}
  .held{min-height:auto}
  .held::before{background:linear-gradient(180deg,rgba(255,255,255,.72) 0%,rgba(255,255,255,.30) 45%,rgba(30,68,104,.30) 100%)}
  .held-innen{padding:2.6rem 0}
  .held-scheibe{padding:1.8rem 1.4rem}
  .ruf-leiste{display:block}
  body{padding-bottom:72px}
}
@media (pointer:coarse){.fuss li a,.menue a{min-height:44px;display:flex;align-items:center}
  /* Knoepfe auf Touchgeraeten auf 44px Trefferflaeche (gemessen: 34px aus
     padding .45rem + line-height 1.2). Nur pointer:coarse, am Rechner
     bleibt die Hoehe unveraendert. .taste ist inline-flex und bleibt es. */
  .taste{min-height:44px}}

/* --- Bewegung aus -------------------------------------------------------
   Alles steht still, Glas und Tiefe bleiben. Die Seite ist dann vollständig,
   nicht defekt: Kacheltexte sichtbar, kein Lichtstreifen, keine Kippung,
   kein Video. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .zeig{opacity:1;transform:none}
  .kachel-text p{max-height:7rem;opacity:1}
  .karte:hover{transform:none}
  .eis::after{display:none}
  .held-video{display:none}
}

/* ==========================================================================
   Glanz — Fassung 4
   Fünf Bausteine, die zusammen Sonne auf Eis ergeben:
   1. Reflex, der dem Zeiger folgt (.glanz, gespeist aus --mx/--my)
   2. Prismenkante am Rand jeder Eisscheibe
   3. Glanzbahn oben (.sheen)
   4. Sonnenblendung mit Streulicht und Lichtstreifen im Kopfbereich
   5. Kantenblitz auf der Glasscheibe und Funkeln
   ========================================================================== */

/* --- 1. Reflex, der dem Zeiger folgt ------------------------------------ */
.eis,.held-scheibe{--mx:50%;--my:0%}
.glanz{
  position:absolute;inset:0;pointer-events:none;z-index:1;border-radius:inherit;
  background:
    radial-gradient(240px circle at var(--mx) var(--my),
      rgba(255,255,255,.95) 0%,rgba(255,255,255,.45) 26%,rgba(198,232,255,.22) 46%,transparent 70%);
  mix-blend-mode:screen;opacity:0;transition:opacity var(--takt);
}
.eis:hover .glanz,.held-scheibe:hover .glanz{opacity:1}
.karte>*:not(.glanz){position:relative;z-index:2}

/* --- 2. Prismenkante ----------------------------------------------------
   Ein 1,5 px breiter Ring aus Eisfarben. Der Verlauf wird über eine Maske
   nur am Rand sichtbar gemacht. */
.eis::before,.held-scheibe::before{
  content:"";position:absolute;inset:0;border-radius:inherit;padding:1.5px;
  background:conic-gradient(from 200deg,
    rgba(255,255,255,.95),rgba(191,239,255,.9),rgba(255,255,255,1),
    rgba(207,224,255,.85),rgba(234,252,255,.95),rgba(255,255,255,.9));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:.75;transition:opacity var(--takt);
  left:0;right:0;top:0;height:auto;
  pointer-events:none;
  /* 28.08.2026: Diese Ebene liegt mit inset:0 ueber dem gesamten Karten-
     inhalt. Ohne pointer-events:none fing sie die Klicks ab - im Kontakt-
     formular liessen sich die Auswahlfelder deshalb nicht oeffnen. .glanz
     und .sheen hatten die Regel bereits, nur diese Kante nicht. */
}
.eis:hover::before,.held-scheibe:hover::before{opacity:1}

/* --- 3. Glanzbahn oben -------------------------------------------------- */
.eis>.sheen,.held-scheibe>.sheen{
  position:absolute;left:0;right:0;top:0;height:46%;pointer-events:none;border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.55) 0%,rgba(255,255,255,.16) 45%,transparent 100%);
}

/* --- 4. Sonnenblendung im Kopfbereich ----------------------------------- */
.blendung{
  position:absolute;z-index:1;top:-4%;right:7%;width:min(44vw,600px);aspect-ratio:1;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%,rgba(255,255,255,1) 0%,rgba(255,255,255,.98) 7%,
      rgba(255,255,255,.72) 14%,rgba(255,255,255,.34) 24%,rgba(216,240,255,.14) 40%,transparent 62%);
  filter:blur(3px);
  animation:atem 9s ease-in-out infinite;
}
/* 23.08.2026: rechts nur -20% statt -30% — der Glow ragte 46px ueber die
   Sectionkante (gemessen 1966px bei 1920px Fenster). Sichtbar aendert sich
   nichts: die Section schnitt den Ueberstand ohnehin ab (overflow:hidden). */
.blendung::after{content:"";position:absolute;inset:-30% -20% -30% -30%;border-radius:50%;mix-blend-mode:screen;
  background:radial-gradient(circle,rgba(190,228,255,.55) 0%,rgba(190,228,255,.18) 38%,transparent 66%);
  filter:blur(18px)}
@keyframes atem{0%,100%{transform:scale(1);opacity:.92}50%{transform:scale(1.07);opacity:1}}

.strahl{position:absolute;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.85),transparent);
  filter:blur(1.5px)}
.strahl-1{top:-10%;right:2%;width:min(78vw,1040px);height:4px;transform:rotate(-24deg);opacity:.85}
.strahl-2{top:6%;right:0;width:min(46vw,600px);height:3px;transform:rotate(26deg);opacity:.7}

/* --- 5. Kantenblitz und Funkeln ----------------------------------------- */
.blitz{position:absolute;z-index:3;pointer-events:none;top:-10px;right:34px;width:170px;height:170px;
  background:radial-gradient(circle at 50% 50%,rgba(255,255,255,1) 0%,rgba(255,255,255,.85) 8%,
    rgba(226,246,255,.45) 20%,rgba(226,246,255,.12) 38%,transparent 62%);
  filter:blur(1px);mix-blend-mode:screen}
.blitz::before,.blitz::after{content:"";position:absolute;top:50%;left:50%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.95),transparent);
  transform:translate(-50%,-50%)}
.blitz::before{width:230px;height:2px}
.blitz::after{width:2px;height:150px}

.funke{position:absolute;z-index:2;pointer-events:none;width:var(--gr,16px);height:var(--gr,16px);
  opacity:0;animation:funkeln var(--dauer,4.5s) ease-in-out var(--start,0s) infinite}
.funke::before,.funke::after{content:"";position:absolute;inset:0;
  background:radial-gradient(closest-side,rgba(255,255,255,1),rgba(255,255,255,0) 70%)}
.funke::before{clip-path:polygon(50% 0,58% 42%,100% 50%,58% 58%,50% 100%,42% 58%,0 50%,42% 42%)}
.funke::after{transform:rotate(45deg) scale(.6);opacity:.8}
@keyframes funkeln{
  0%,72%,100%{opacity:0;transform:scale(.4) rotate(0deg)}
  80%{opacity:1;transform:scale(1) rotate(25deg)}
  88%{opacity:.35;transform:scale(.8) rotate(40deg)}
}
.funke-1{top:16%;right:26%;--gr:22px;--start:.4s}
.funke-2{top:52%;right:12%;--gr:14px;--start:2.1s;--dauer:5.2s}
.funke-3{top:74%;right:34%;--gr:18px;--start:3.4s;--dauer:6s}
.funke-4{top:30%;right:44%;--gr:11px;--start:1.3s;--dauer:5.8s}

/* --- Knöpfe: Glanzbahn beim Überfahren ---------------------------------- */
.taste{position:relative;overflow:hidden}
.taste::after{content:"";position:absolute;top:-50%;left:-30%;width:28%;height:200%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);
  transform:rotate(20deg) translateX(-220%);transition:transform .7s cubic-bezier(.2,.7,.3,1);
  pointer-events:none}
.taste:hover::after,.taste:focus-visible::after{transform:rotate(20deg) translateX(520%)}

/* --- Bewegung aus ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .blendung{animation:none}
  .funke{display:none}
  .glanz{display:none}
  .taste::after{display:none}
  .blitz{opacity:.7}
}

/* ==========================================================================
   Fassung 5 — Brechung und Spiegelung

   Brechung (der Hintergrund wird verzerrt, nicht nur verwischt) sitzt
   BEWUSST nur auf Kopfleiste und Notdienstknopf. Auf der Heldscheibe wurde
   sie gemessen und wieder entfernt: dort ist der Hintergrund bereits fast
   weiß, es gibt nichts zu verzerren (mittlere Bildpunktabweichung 2,95 von
   255) — der Effekt kostet dort nur Rechenzeit.

   Kann der Browser den SVG-Filter im backdrop-filter nicht, bleibt schlicht
   die bisherige Unschärfe stehen. Nichts bricht.
   ========================================================================== */
.glasfilter{position:absolute;width:0;height:0;overflow:hidden}

@supports (backdrop-filter: url(#glasbrechung)){
  .brechung{
    backdrop-filter:blur(10px) saturate(1.3) url(#glasbrechung);
    -webkit-backdrop-filter:blur(10px) saturate(1.3);
  }
  .brechung-fein{
    backdrop-filter:blur(4px) url(#glasbrechung-fein);
    -webkit-backdrop-filter:blur(4px);
  }
}

/* Spiegelung: dasselbe Kopfbild, senkrecht gekippt, fest verankert. Es
   bewegt sich nicht mit der Scheibe und wirkt dadurch wie ein Spiegelbild
   statt wie eine zweite Bildkopie. Kostet fast nichts.
   Deckkraft 18 % und Ausblendung nach unten: gemessen bleibt der Kontrast
   unter dem Fließtext bei 4,81:1 im schlechtesten Punkt (WCAG AA verlangt
   4,5:1), unter der Überschrift bei 6,36:1. */
.spiegel{
  position:absolute;inset:0;pointer-events:none;z-index:0;border-radius:inherit;overflow:hidden;
  opacity:.18;transform:scaleY(-1);
  background-image:url("../assets/media/held.jpg?v=f4b10064");
  background-attachment:fixed;background-size:cover;background-position:center;
  -webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.12) 62%,transparent 84%);
  mask-image:linear-gradient(180deg,rgba(0,0,0,.9) 0%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.12) 62%,transparent 84%);
}
.held-scheibe>*:not(.spiegel){position:relative;z-index:1}
@media (prefers-reduced-motion:reduce){.spiegel{opacity:.12}}

/* ==========================================================================
   Fassung 6 — Bausteine fuer die Unterseiten

   Die Startseite hat einen Kopfbereich mit Video. Fuer 23 Unterseiten waere
   das falsch: zu schwer, zu langsam, und der Text muss dort schnell lesbar
   sein. Statt dessen ein kompakter Seitenkopf im selben Eis-/Glasbild —
   dieselben Variablen, dieselben Schatten, nur flacher.

   Alle Farbwerte stammen aus dem Variablenblock ganz oben. Neu erfunden
   wurde keine Farbe.
   ========================================================================== */

/* --- aktiver Menuepunkt -------------------------------------------------- */
.menue a.aktiv{color:var(--blau);background:rgba(255,255,255,.7)}
.menue a.aktiv::after{transform:scaleX(1)}

/* --- Seitenkopf ---------------------------------------------------------- */
/* Feste Hoehe, damit der Kopf auf jeder Seite gleich hoch ist.
   Vorher wuchs er mit dem Inhalt: aufaddiert aus den CSS-Werten lag die
   Spanne zwischen 280,7px (Ueberschrift und Vorspann je einzeilig, z. B.
   Kontakt) und 373,2px (beides zweizeilig, z. B. Wartung). Genau dieser
   Unterschied war im Vergleich zweier Seiten zu sehen.
   380px decken den ungünstigsten der 23 Faelle mit rund 7px Luft ab.
   Geprueft: keine der 23 Ueberschriften wird dreizeilig (laengste hat 44
   Zeichen bei max-width 22ch). Wird im Admin-Center ein deutlich
   laengerer Titel eingetragen, waechst dieser Kopf wieder mit.
   Unter 900px Fensterbreite gilt die feste Hoehe nicht - dort ist der
   Umbruch ohnehin anders und gleiche Hoehen haetten keinen Nutzen. */
.seitenkopf{position:relative;isolation:isolate;overflow:hidden;
  padding:clamp(2.8rem,5vw,4.4rem) 0 clamp(2.2rem,4vw,3.2rem);
  background:#4a7fb0;   /* Blaugrund fuer die Leuchtdichte-Mischung des Kopfbilds */
  color:var(--text)}
/* Lichtfleck ueber dem Bild - dieselbe Machart wie .held::before auf der
   Startseite: hell dort, wo die Scheibe steht, nach aussen auslaufend.

   Die Werte sind durchgemessen. Alle sieben eingesetzten Motive wurden in
   Chromium bei 1920px gerendert; gemessen wurde einmal der Textkontrast am
   hellsten Punkt der Scheibe und einmal, wie stark sich die Scheibe vom
   Umfeld daneben abhebt (Grenze 3:1, WCAG fuer Flaechen). Eine weitere
   Fassung mit grossem, sehr hellem Fleck lag bei vier von sieben Motiven
   unter 3:1 - die Scheibe verschwand dann im hellen Umfeld. Mit diesen
   Werten sind es sechs von sieben; das siebte Motiv wird zusaetzlich am
   Bild abgedunkelt (siehe hero-reif weiter unten). */
.seitenkopf::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
   radial-gradient(620px 400px at 28% 50%,rgba(255,255,255,.86) 0%,rgba(255,255,255,.32) 48%,rgba(255,255,255,0) 68%),
   linear-gradient(180deg,rgba(15,39,64,.10) 0%,rgba(15,39,64,.18) 42%,rgba(15,39,64,.34) 100%)}
/* Dunkler als auf der Startseite (dort --blau-tief und #304e68). Grund: die
 Scheibe im Seitenkopf ist durchsichtiger und liegt ueber wechselnden Fotos,
 die Startseitenscheibe ueber einem einzigen, sehr hellen Standbild. */
.seitenkopf h1{color:var(--blau-nacht);text-shadow:0 1px 0 rgba(255,255,255,.7);max-width:22ch}
/* #0f2740 statt #304e68: mit der durchsichtigeren Scheibe lag der Vorspann
 bei 3,72:1 und damit unter der Grenze 4,5:1. Mit diesem Wert sind es 4,65:1. */
.seitenkopf p{color:var(--blau-nacht);max-width:40rem;margin-bottom:0;font-size:var(--fs-base)}
.seitenkopf .taste{margin-top:1.6rem}

/* --- Fliesstext ---------------------------------------------------------- */
.text{max-width:46rem}
.text.weit{max-width:none}
.text h2{margin-top:2.6rem}
.text h2:first-child{margin-top:0}
.text h3{margin-top:1.9rem;color:var(--blau)}
.text ul,.text ol{margin:0 0 1.2em;padding-left:1.3em}
.text li{margin-bottom:.42em}
.text li::marker{color:var(--blau-hell)}
.text strong{color:var(--blau-tief)}
.text a{color:var(--signal)}

/* --- Hakenliste ---------------------------------------------------------- */
.haken{list-style:none;padding-left:0}
.haken li{position:relative;padding-left:1.9rem;margin-bottom:.6em}
.haken li::before{content:"";position:absolute;left:0;top:.42em;width:1.05rem;height:.58rem;
  border-left:2px solid var(--blau);border-bottom:2px solid var(--blau);
  transform:rotate(-45deg);border-radius:1px}

/* --- Tabellen: laufen quer, statt die Seite zu sprengen ------------------ */
.tabelle{overflow-x:auto;margin:0 0 1.6em;border-radius:var(--radius-eis);
  border:1px solid var(--glas-rand);box-shadow:var(--tiefe-1);background:rgba(255,255,255,.7);
  backdrop-filter:blur(10px);-webkit-overflow-scrolling:touch}
.tabelle table{border-collapse:collapse;width:100%;min-width:32rem;font-size:var(--fs-md)}
.tabelle th,.tabelle td{padding:.72rem .95rem;text-align:left;vertical-align:top;
  border-bottom:1px solid rgba(51,102,153,.14)}
.tabelle th{background:rgba(233,242,250,.8);color:var(--blau-tief);font-weight:600;white-space:nowrap}
.tabelle tr:last-child td{border-bottom:0}
.tabelle tbody tr:hover td{background:rgba(233,242,250,.45)}

/* --- Hinweiskasten ------------------------------------------------------- */
.hinweis{position:relative;padding:1.3rem 1.5rem 1.3rem 1.7rem;margin:0 0 1.6em;
  border-radius:var(--radius-eis);background:rgba(233,242,250,.72);
  border:1px solid var(--glas-rand);box-shadow:var(--tiefe-1);
  backdrop-filter:blur(10px)}
.hinweis::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:4px;
  border-radius:0 4px 4px 0;background:linear-gradient(180deg,var(--blau-hell),var(--blau))}
.hinweis p:last-child{margin-bottom:0}
.hinweis-warn{background:rgba(255,247,235,.85)}
.hinweis-warn::before{background:linear-gradient(180deg,#e8a33d,#c47b16)}

/* --- Zwei Spalten -------------------------------------------------------- */
.zwei{display:grid;gap:2.4rem;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);align-items:start}
.zwei>*{min-width:0}

/* --- Randspalte / Anschlusskasten ---------------------------------------- */
.rand{padding:1.7rem 1.6rem;position:sticky;top:104px}
/* Bildblock: freistehendes Foto im Fliesstext. Anders als .seitenkopf-bild -
   das ist Hintergrund und deshalb entsaettigt - soll dieses Bild angesehen
   werden: volle Farbe, aber Rahmen, Radius und Schatten wie .eis. */
.bildblock{margin:1.8rem 0;border-radius:var(--radius-eis);overflow:hidden;
  border:1px solid var(--glas-rand);box-shadow:var(--tiefe-2);background:var(--weiss)}
.bildblock img{display:block;width:100%;height:auto;
  /* Kachelformat wie .kachel-bild: gleicher Bildausschnitt wie die Kacheln. */
  aspect-ratio:16/10;object-fit:cover;object-position:center}
.bildblock figcaption{padding:.7rem 1.1rem;font-size:.86rem;line-height:1.45;
  text-align:center;color:var(--text-grau);background:rgba(255,255,255,.72)}

.rand h3{margin-top:0}
.rand p:last-child,.rand ul:last-child{margin-bottom:0}
.rand ul{list-style:none;padding-left:0;margin:0}
/* Haengender Einzug: bricht eine Zeile um, beginnt die zweite eingerueckt
   statt unter der fetten Beschriftung. Feste Einrueckung, KEINE Ausrichtung
   am Wert - die ginge nur mit fester Beschriftungsspalte, und die waere hier
   184,8px breit und wuerde mehr Umbrueche erzeugen (gemessen 28.08.2026). */
/* 28.08.2026: eine Stufe kleiner als der Fliesstext (body 17px -> fs-md
   15,04px, -11,5%). Der Randkasten ist mit 388,6px Textbreite die schmalste
   Textspalte der Seite. */
/* Zweispaltige Wirkung OHNE zusaetzliches Element: die Beschriftung wird auf
   feste Breite gesetzt, der haengende Einzug zieht Folgezeilen auf dieselbe
   Kante. Bewusst kein <span> um den Wert - der CMS-Editor entfernt Kind-
   Elemente beim Speichern (core.js readText/writeText), die Spalte waere nach
   der ersten Bearbeitung zerstoert. Faellt <strong> weg, bleibt Text stehen.
   10,8rem = 172,8px: breiteste Beschriftung "Ausbildungsbetrieb" misst bei
   fs-md rund 163px, dazu Abstand. */
.rand li{margin-bottom:.5rem;padding-left:10.8rem;text-indent:-10.8rem;font-size:var(--fs-md)}

/* Nachweisliste (ueber-uns): eine Stufe kleiner, damit die laengste Zeile in
   EINE Zeile passt. Gemessen 28.08.2026: 661,7px Spaltenbreite, laengster
   Eintrag brauchte bei 17px rund 730px; bei fs-md sind es rund 646px.
   Kein nowrap - auf schmalen Fenstern soll weiterhin umbrochen werden.
   .dateiart haelt "(PDF, 293 KB)" zusammen, damit nie "KB)" allein umbricht. */
.nachweise li{font-size:var(--fs-md)}

/* Kontaktseite: Telefon/Telefax/E-Mail mit denselben Symbolen wie im Fuss.
   Zweispaltig gedacht - Symbolspalte fest, Werte fluchten an einer Kante.
   Farbe --signal (dunkler Grund fehlt hier, deshalb nicht --blau-hell). */
.kon-liste{list-style:none;padding:0;margin:0 0 1.2rem}
.kon-liste li{display:grid;grid-template-columns:1.7rem 1fr;align-items:center;
  gap:.1rem;margin-bottom:.45rem}
.kon-ico{width:16px;height:16px;flex:0 0 16px;color:var(--signal)}
.kon-adr{display:grid;grid-template-columns:1.7rem 1fr;gap:.1rem;align-items:start}
.kon-adr .kon-ico{margin-top:.25rem}
.kon-karte{display:inline-block;margin-top:.2rem;font-size:var(--fs-md)}
.dateiart{white-space:nowrap}
.rand li strong{display:inline-block;width:10.8rem;text-indent:0;padding-right:.6rem;
  box-sizing:border-box;vertical-align:top}
.rand li a{color:var(--blau-tief);text-decoration:none;font-weight:500}
.rand li a:hover{color:var(--signal);text-decoration:underline}

/* --- Formular ------------------------------------------------------------ */
.form{display:grid;gap:1.1rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));
  padding:2rem 1.9rem}
.form .weit-feld{grid-column:1/-1}
.feld{display:flex;flex-direction:column;gap:.34rem}
.feld>span{font-size:var(--fs-sm);font-weight:600;color:var(--blau-tief)}
.feld input,.feld select,.feld textarea{
  font:inherit;font-size:var(--fs-base);color:var(--text);padding:.72rem .9rem;
  border:1px solid rgba(51,102,153,.28);border-radius:13px;
  background:rgba(255,255,255,.86);box-shadow:0 1px 0 rgba(255,255,255,.9) inset;
  transition:border-color var(--takt),box-shadow var(--takt)}
.feld textarea{min-height:9rem;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:none;
  border-color:var(--signal);box-shadow:0 0 0 3px rgba(11,95,174,.18)}
.feld-zustimmung{grid-column:1/-1;display:flex;gap:.7rem;align-items:flex-start;
  font-size:var(--fs-md);color:var(--text-grau)}
.feld-zustimmung input{margin-top:.25rem;width:1.05rem;height:1.05rem;flex:none}
.pflicht{color:var(--signal)}

/* --- Kennzahlenreihe ----------------------------------------------------- */
.kennzahlen{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  margin:0 0 2rem}
.kennzahl{padding:1.4rem 1.3rem;text-align:left}
.kennzahl b{display:block;font-family:"Space Grotesk",sans-serif;font-size:var(--fs-3xl);line-height:1;
  color:var(--blau-tief);margin-bottom:.3rem}
.kennzahl span{font-size:var(--fs-sm);color:var(--text-grau)}

/* --- Notrufblock --------------------------------------------------------- */
.notruf{text-align:center;padding:2.4rem 1.6rem}
.notruf a{display:inline-block;font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(1.9rem,5vw,3rem);letter-spacing:-.02em;color:var(--blau-tief);
  text-decoration:none;transition:color var(--takt),transform var(--takt)}
.notruf a:hover{color:var(--signal);transform:translateY(-2px)}
.notruf p{margin:.6rem 0 0;color:var(--text-grau)}

@media (max-width:900px){
  .zwei{grid-template-columns:1fr}
  .rand{position:static}
}
@media (prefers-reduced-motion:reduce){
  .notruf a:hover{transform:none}
}

/* --- Karte als Verweis (Uebersichtsseiten) ------------------------------- */
.karte-link{display:block;text-decoration:none;color:inherit}
.karte-link h3{color:var(--blau-tief)}
.karte-link:hover h3{color:var(--signal)}
.karte-link:hover .kachel-pfeil{transform:translateX(6px)}

/* --- Formularschutz und Rueckmeldung ------------------------------------
   Der Honigtopf muss fuer Menschen unsichtbar, fuer Maschinen aber ein
   normales Feld sein. display:none wuerde von manchen Ausfuellhelfern
   erkannt; deshalb wird er aus dem sichtbaren Bereich geschoben. */
.honigtopf{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.feld-pruef[hidden]{display:none}

.melde{padding:1.15rem 1.4rem;margin:0 0 1.4rem;border-radius:var(--radius-eis);
  border:1px solid var(--glas-rand);box-shadow:var(--tiefe-1);backdrop-filter:blur(10px)}
.melde p{margin:0}
/* #14532d auf #e7f6ec ergibt 8,15:1, #7f1d1d auf #fdeaea 8,65:1 — beides
   deutlich ueber der Grenze 4,5:1 (WCAG AA). Nachgerechnet, nicht geschaetzt. */
.melde-gut{background:#e7f6ec;color:#14532d;border-color:#bfe3cb}
.melde-schlecht{background:#fdeaea;color:#7f1d1d;border-color:#f3c9c9}

/* ==========================================================================
   Fassung 7 — Kopfscheibe mit Struktur, Abschluss vor dem Fussbereich

   Zwei Befunde aus der Ansicht vom 22.08.2026:
   1. Die Kopfscheibe trug nur Vorzeile, Ueberschrift, einen langen Absatz
      und zwei Knoepfe. Fuer die groesste Flaeche der Seite ist das zu wenig
      Gliederung - das Auge findet keinen zweiten Halt.
   2. Der Abschnitt vor dem Fussbereich bestand aus Ueberschrift, Absatz und
      einem Knopf auf weisser Flaeche. Auf einem breiten Bildschirm ist das
      ein leeres Feld von mehreren hundert Bildpunkten Hoehe.
   ========================================================================== */

/* --- Plakette oben rechts in der Kopfscheibe ---------------------------- */
.held-scheibe{position:relative}
.held-marke{
  position:absolute;top:1.5rem;right:1.6rem;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:5.2rem;height:5.2rem;border-radius:50%;
  background:linear-gradient(180deg,#1272c9 0%,var(--signal) 55%,var(--signal-dunkel) 100%);
  border:1px solid rgba(255,255,255,.4);
  box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 6px 14px rgba(11,95,174,.30),
             0 16px 34px rgba(11,95,174,.22);
  color:var(--weiss);text-align:center;line-height:1.05;
}
/* Weiss auf #0b5fae ergibt 6,44:1, auf dem hellsten Punkt des Verlaufs
   (#1272c9) 4,91:1 - beides ueber der Grenze 4,5:1. Nachgerechnet. */
.held-marke b{font-family:"Space Grotesk",sans-serif;font-size:var(--fs-2xl);font-weight:700;letter-spacing:-.02em}
.held-marke span{font-size:var(--fs-mini);font-weight:600;letter-spacing:.10em;text-transform:uppercase;opacity:.92}

/* --- Merkmalsreihe in der Kopfscheibe ----------------------------------- */
.held-punkte{
  display:flex;flex-wrap:wrap;gap:.55rem 1.5rem;margin:1.5rem 0 0;padding:1.3rem 0 0;
  list-style:none;border-top:1px solid rgba(51,102,153,.22);
}
.held-punkte li{
  position:relative;padding-left:1.6rem;font-size:var(--fs-md);font-weight:500;color:#2c4f6d;
}
.held-punkte li::before{
  content:"";position:absolute;left:0;top:.38em;width:.95rem;height:.52rem;
  border-left:2px solid var(--signal);border-bottom:2px solid var(--signal);
  transform:rotate(-45deg);border-radius:1px;
}

/* --- Abschluss vor dem Fussbereich -------------------------------------- */
.abschluss{
  position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(3.4rem,6vw,5rem) 0;
  background:linear-gradient(165deg,#2b5c8b 0%,var(--blau-tief) 58%,var(--blau-nacht) 100%);
  color:var(--text-hell);
}
.abschluss::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(720px 320px at 84% -20%,rgba(109,156,200,.34),transparent 70%);
}
.abschluss-innen{display:grid;gap:2.4rem;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center}
.abschluss h2{color:var(--weiss);margin-bottom:.6rem}
/* #d9e8f5 auf #1e4468 = 8,07:1, auf dem hellsten Punkt #2b5c8b = 5,59:1. */
.abschluss p{color:#d9e8f5;margin-bottom:0;max-width:38rem}
.abschluss-tasten{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:1.7rem}
.abschluss .taste-glas{background:rgba(255,255,255,.14);color:var(--weiss);border-color:rgba(255,255,255,.55)}
.abschluss .taste-glas:hover,.abschluss .taste-glas:focus-visible{background:rgba(255,255,255,.24)}

/* Rufkarte rechts: die Nummer als groesstes Element der Seite unten. */
.rufkarte{
  padding:1.9rem 1.8rem;border-radius:var(--radius-eis);text-align:center;
  background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 22px 48px rgba(0,0,0,.28);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.rufkarte span{display:block;font-size:var(--fs-xs);font-weight:600;letter-spacing:.10em;
  text-transform:uppercase;color:#bcd5ea;margin-bottom:.5rem}
.rufkarte a{display:inline-block;font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(1.5rem,2.4vw,2.1rem);letter-spacing:-.02em;color:var(--weiss);text-decoration:none;
  transition:transform var(--takt),color var(--takt)}
.rufkarte a:hover{transform:translateY(-2px);color:#d9e8f5}
.rufkarte small{display:block;margin-top:.6rem;font-size:var(--fs-sm);color:#bcd5ea}

@media (max-width:900px){
  .held-marke{position:static;margin:0 0 1.2rem;width:4.4rem;height:4.4rem}
  .abschluss-innen{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .rufkarte a:hover{transform:none}
}

.nach-raster{margin-top:2rem}

/* ==========================================================================
   Fassung 8 — Kopfscheibe ueber die volle Bahnbreite, zweispaltig

   Befund aus der Ansicht vom 22.08.2026: Die Scheibe war auf 46rem begrenzt
   und stand links. Auf 1920 Bildpunkten blieben rechts daneben und darunter
   grosse Flaechen ohne Aussage. Statt die Scheibe nur breiter zu ziehen -
   dann waere die Textzeile zu lang zum Lesen - wird sie geteilt: links der
   Text mit begrenzter Zeilenlaenge, rechts ein abgesetztes Notdienstfeld.

   Die Zeilenlaenge im linken Teil bleibt bei rund 60 bis 70 Zeichen. Das ist
   der Grund fuer die Spaltenaufteilung 1,45 zu 1 und nicht 1 zu 1.
   ========================================================================== */

.held-scheibe{max-width:none;padding:2.4rem 2.4rem 2.2rem}
.held-spalten{display:grid;gap:2.6rem;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);align-items:center}
.held-spalten>*{min-width:0}
.held-haupt{max-width:40rem}
.held-text{max-width:none}

/* --- Notdienstfeld rechts ----------------------------------------------- */
.held-panel{
  position:relative;padding:2.1rem 1.8rem 1.8rem;border-radius:20px;text-align:center;
  background:linear-gradient(165deg,#2b5c8b 0%,var(--blau-tief) 58%,var(--blau-nacht) 100%);
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.22) inset,0 8px 20px rgba(15,39,64,.22),
             0 26px 54px rgba(15,39,64,.26);
  color:var(--text-hell);
}
/* Die Plakette sitzt jetzt auf der Kante des Feldes, nicht mehr frei in der
   Scheibe - dort ueberlappte sie die Vorzeile. */
.held-panel .held-marke{position:absolute;top:-1.9rem;left:50%;transform:translateX(-50%);
  width:4.6rem;height:4.6rem;border-color:rgba(255,255,255,.55)}

/* #bcd5ea auf #1e4468 = 6,65:1, auf dem hellsten Punkt #2b5c8b = 4,60:1.
   Weiss auf #2b5c8b = 6,99:1. Beides ueber der Grenze 4,5:1. Nachgerechnet. */
.held-panel-vor{display:block;margin:1.5rem 0 .3rem;font-size:var(--fs-xs);font-weight:600;
  letter-spacing:.10em;text-transform:uppercase;color:#bcd5ea}
.held-panel-nr{display:inline-block;font-family:"Space Grotesk",sans-serif;font-weight:700;
  font-size:clamp(1.45rem,2.1vw,1.95rem);letter-spacing:-.02em;color:var(--weiss);text-decoration:none;
  transition:transform var(--takt),color var(--takt)}
.held-panel-nr:hover,.held-panel-nr:focus-visible{transform:translateY(-2px);color:#d9e8f5}
.held-panel-text{margin:.55rem 0 0;font-size:var(--fs-md);color:#d9e8f5}

.held-zeiten{margin:1.4rem 0 0;padding:1.1rem 0 0;border-top:1px solid rgba(188,213,234,.30);
  display:grid;gap:.5rem;text-align:left}
.held-zeiten>div{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs-sm)}
.held-zeiten dt{color:#bcd5ea}
.held-zeiten dd{margin:0;color:var(--weiss);font-weight:500;text-align:right}

/* Vier Merkmale statt drei: zwei Spalten, damit die Reihe nicht umbricht. */
.held-punkte{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem 1.4rem}
/* Knoepfe in dieselbe Flucht wie die zwei Spalten der Punkteliste: gleiches
   Raster, gleiche Spaltenluecke. justify-items:start laesst jedem Knopf seine
   eigene Breite - er wird nur an die Spaltenkante gesetzt, nicht gedehnt. */
.held-tasten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.85rem 1.4rem;justify-items:start}
/* Rechte Spalte: Notdienstfeld + Stellenhinweis untereinander. Fuellt die
   Luecke, die durch align-items:center unter dem Feld entstand. */
.held-neben{display:grid;gap:1.5rem;align-content:center}
/* Stellenhinweis als eigener Block unter dem Notdienstfeld: kleine Vorzeile,
   darunter ein Knopf ueber die volle Spaltenbreite.
   Textfarbe wie .held-text (#304e68, gemessener Kontrast 5,20:1). */
.held-job{display:grid;gap:.6rem;justify-items:center;text-align:center}
.held-job-vor{font-size:var(--fs-md);font-weight:600;color:#304e68}
.held-job-taste{width:100%;justify-content:center}

@media (max-width:1100px){
  .held-spalten{grid-template-columns:1fr;gap:3.2rem}
  .held-haupt{max-width:none}
  .held-panel .held-marke{top:-1.7rem}
}
@media (max-width:900px){
  .held-scheibe{padding:1.8rem 1.4rem}
  .held-punkte{grid-template-columns:1fr}
  .held-tasten{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .held-panel-nr:hover,.held-panel-nr:focus-visible{transform:none}
}


/* --- Belegleiste zwischen Kopfbereich und erstem Abschnitt --------------
   Vorgeschichte: Zwischen beiden lag ein heller Streifen ohne Inhalt. Der
   erste Versuch war eine Ueberlappung - die zog aber den Abschnittskopf mit
   ins Kopfbild und schnitt die Ueberschrift optisch an. Zurueckgenommen.

   Diese Loesung fuellt den Uebergang statt ihn zu verkuerzen: die Zeile mit
   Innung, Ausbildung und Zertifizierung stand vorher IM Kopfbereich als
   Klasse held-fuss und ist jetzt ein eigener schmaler Streifen darunter. Damit
   traegt der Uebergang Inhalt, es entsteht keine Kante im Bild, und die
   vier Angaben stehen dort, wo man sie zuerst sucht.
   Die Klasse held-fuss ist ersatzlos entfallen; ihre Regeln sind mit
   entfernt, damit nichts verwaist stehen bleibt. */
.belege{
  position:relative;z-index:3;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(240,246,252,.96));
  border-bottom:1px solid rgba(51,102,153,.14);
  box-shadow:0 -1px 0 rgba(255,255,255,.9) inset,0 10px 30px -18px rgba(15,39,64,.30);
}
.belege ul{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:0;margin:0;padding:0;list-style:none;
}
/* Auf dem dunkelsten Punkt des Verlaufs (#f0f6fc): #55708a = 4,74:1,
   #1e4468 = 9,27:1. Grenze ist 4,5:1. Nachgerechnet, nicht geschaetzt. */
.belege li{
  padding:1.15rem 1.4rem;font-size:var(--fs-md);line-height:1.4;color:var(--text-grau);
  border-left:1px solid rgba(51,102,153,.14);
}
.belege li:first-child{border-left:0;padding-left:0}
.belege li b{display:block;color:var(--blau-tief);font-family:"Space Grotesk",sans-serif;
  font-size:var(--fs-base);font-weight:600;letter-spacing:-.01em;margin-bottom:.12rem}

@media (max-width:1100px){
  .belege ul{grid-template-columns:repeat(2,minmax(0,1fr))}
  .belege li:nth-child(3){border-left:0;padding-left:0}
  .belege li:nth-child(-n+2){border-bottom:1px solid rgba(51,102,153,.14)}
}
@media (max-width:640px){
  .belege ul{grid-template-columns:1fr}
  .belege li{border-left:0;padding-left:0}
  .belege li:not(:last-child){border-bottom:1px solid rgba(51,102,153,.14)}
}
/* --- Kachelraster ------------------------------------------------------
   Vier Kacheln muessen in eine Reihe passen. Bahn 1180px, Abstand 24px:
   mit 280px Mindestbreite waeren es 1192px und damit ein Umbruch auf 3+1,
   mit 250px sind es 1072px. Aufaddiert aus den CSS-Werten. Die Regel stand
   vorher in .leistungen; seit die Uebersichtsseiten hell sind, braucht sie
   eine eigene Klasse. */
.raster-kacheln{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
/* Festes 2x2 statt auto-fit: bei vier Kacheln ergab auto-fit auf breiten
   Schirmen 3+1, was unruhig aussieht (produkte.html, 28.08.2026).
   Unter 700px wieder einspaltig. */
.raster-2{grid-template-columns:repeat(2,minmax(0,1fr))}
/* 3x2 fuer sechs Kacheln (produkte.html). Unter 1000px zwei Spalten,
   unter 700px eine — so bleiben nie einzelne Kacheln in einer Reihe. */
.raster-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1000px){.raster-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.raster-2,.raster-3{grid-template-columns:1fr}}

@media (min-width:901px){
  .seitenkopf{min-height:380px;display:grid;align-items:center;
    padding-top:2.4rem;padding-bottom:2.4rem}
}

/* --- Seitenkopf: Bild als Hintergrund ----------------------------------
   Zwischenstand vom 22.08.2026: Das Bild stand kurzzeitig als eigene Karte
   rechts neben dem Text, weil vom Hintergrund je nach Motiv nur 25 bis 44
   Prozent sichtbar sind (Kopfbereich 1920x380 = 5,05, Motive 1,25 bis 2,24).
   Auf Ansage des Betreibers zurueckgenommen: der Hintergrund war so gewollt.
   Die Rechnung bleibt hier stehen, damit die Zahl nicht noch einmal gesucht
   werden muss, falls das Thema wiederkommt. */
/* brightness(.72) gilt fuer JEDES Kopfbild, auch fuer kuenftige. Grund:
   Die helle Scheibe muss sich vom Bild dahinter abheben (Grenze 3:1 nach
   WCAG fuer Flaechen). Ohne Abdunklung lag das hellste der sieben Motive
   bei 1,83:1. Gemessene Reihe ueber alle sieben, jeweils der schlechteste
   Wert: 1,00 -> 1,83 · 0,90 -> 2,19 · 0,84 -> 2,44 · 0,78 -> 2,71 ·
   0,72 -> 3,04 · 0,66 -> 3,40. Gewaehlt 0,72 - der erste Wert, bei dem
   alle Motive bestehen, ohne dass die dunklen duester werden.
   So braucht ein neues Bild keine eigene Regel mehr. */
.seitenkopf-bild{position:absolute;inset:0;z-index:0;width:100%;height:100%;
  object-fit:cover;opacity:1;mix-blend-mode:luminosity;filter:contrast(1.02) brightness(.78)}
/* Inhalt ueber die Abdunklungsebene heben. */
.seitenkopf>.bahn{position:relative;z-index:2}
/* --- Bildausschnitt im Seitenkopf --------------------------------------
   Sechs Motive waren unten grau, weil die JPEG-Daten unvollstaendig sind
   (siehe _werkzeug/bild-kuerzen.php). Nach dem Kuerzen sind sie deutlich
   flacher - 1,88 bis 2,91 statt 1,25 bis 2,24 - und im Kopfbereich sind
   jetzt 37 bis 57 Prozent der Bildhoehe sichtbar statt 25 bis 44.

   Welcher Streifen gezeigt wird, bestimmt object-position. Die Werte sind
   gemessen: fuer jede Position wurde die mittlere Standardabweichung der
   Bildzeilen im sichtbaren Ausschnitt berechnet und die Position mit der
   hoechsten Struktur gewaehlt. Neu gemessen nach dem Kuerzen.

   In den Kacheln (16:10) sind alle sechs jetzt vollstaendig zu sehen: sie
   sind flacher als 1,60, also wird nur seitlich beschnitten. */
.seitenkopf-bild[src*="vereist-luftkuehler"]{object-position:center 100%}
.seitenkopf-bild[src*="vereist-lamellen"]{object-position:center 15%}
.seitenkopf-bild[src*="kuehlzelle"]{object-position:center 0%}
.seitenkopf-bild[src*="gefrierraum"]{object-position:center 15%}
.seitenkopf-bild[src*="hero-reif"]{object-position:center 0%}
.seitenkopf-bild[src*="trennflaeche"]{object-position:center 0%}
.seitenkopf-bild[src*="held"]{object-position:center 95%}
/* --- Weicher Auslauf unter dem Kopfbild ---------------------------------
   Das Kopfbild endete mit einer harten Kante gegen die helle Flaeche des
   ersten Abschnitts. Dieser Auslauf blendet die unteren 38 Bildpunkte in
   #eff5fb aus - das ist der Ton, mit dem .abschnitt-hell beginnt
   (rgba(233,242,250,.75) auf Weiss ergibt #eff5fb). Damit gibt es keinen
   Farbsprung mehr.

   Erste Fassung waren 64px mit einem Haltepunkt bei 62 Prozent. Das war zu
   hoch und durch den Haltepunkt ungleichmaessig - der Verlauf setzte in der
   Mitte sichtbar an. Jetzt 38px und ein durchgehend linearer Verlauf ohne
   Zwischenstufe.
   Der Textblock ist im unguenstigsten Fall (Ueberschrift und Vorspann je
   zweizeilig) 213,8px hoch und in 380px senkrecht zentriert, steht also
   zwischen 83,1 und 296,9. Der Auslauf beginnt bei 342 - 45px unter der
   letzten Textzeile, es gibt keine Ueberlappung. */
.seitenkopf::after{content:"";position:absolute;left:0;right:0;bottom:0;height:38px;
  z-index:1;pointer-events:none;
  background:linear-gradient(to bottom,rgba(239,245,251,0) 0%,#eff5fb 100%)}
/* --- Scheibe im Seitenkopf ----------------------------------------------
   Traegt die Klasse "eis" und damit alle vorhandenen Glasregeln. Hier nur
   Maße, Innenabstand und die Stapelung des Inhalts ueber Glanz und Sheen.

   Hoehe nachgerechnet: Textblock im unguenstigsten Fall 213,8px, dazu
   2,2rem + 2,1rem Innenabstand der Scheibe = 68,8px, macht 282,6px. Plus
   2 x 2,4rem Abstand im Kopfbereich sind 359,4px. Die feste Kopfhoehe wird
   deshalb von 380 auf 420px erhoeht - sonst saesse die Scheibe ohne Luft
   zwischen Kopfleiste und Auslauf. */
/* Durchsichtiger als die Grundform .eis (0,92/0,66/0,60 bei 14px Unschaerfe),
   dafuer mit deutlich mehr Unschaerfe: 26px statt 14px verwischen das Bild
   darunter so weit, dass der Text trotz geringerer Deckkraft traegt.

   Durchgemessen an allen sieben Motiven, und zwar nur an den Bildpunkten,
   an denen wirklich Buchstaben stehen: dazu wurde jede Seite zweimal
   gerendert - einmal mit, einmal mit unsichtbarer Schrift - und der
   Unterschied als Glyphenmaske benutzt. Ergebnis mit diesen Werten:
   Ueberschrift 5,53:1, Vorspann 4,65:1, Scheibe gegen Umfeld 3,04:1.
   Bei 0,66/0,42/0,36 waeren es nur noch 4,33 / 3,57 / 2,64 - also unter
   allen drei Grenzen. Weiter durchsichtig geht nicht ohne Verlust. */
.seitenkopf-scheibe{position:relative;max-width:52rem;
  padding:2.2rem 2.3rem 2.1rem;border-radius:26px;
  background:linear-gradient(150deg,rgba(255,255,255,.78) 0%,rgba(255,255,255,.52) 42%,rgba(226,240,251,.46) 100%);
  backdrop-filter:blur(26px) saturate(1.25);
  -webkit-backdrop-filter:blur(26px) saturate(1.25)}
.seitenkopf-scheibe>*:not(.glanz):not(.sheen){position:relative;z-index:2}
.seitenkopf-scheibe h1{margin-bottom:.45em}
.seitenkopf .taste{margin-top:1.5rem}

@media (min-width:901px){
  .seitenkopf{min-height:420px}
}
@media (max-width:900px){
  .seitenkopf-scheibe{padding:1.7rem 1.4rem 1.6rem}
}