/* === /schriften/schriften.css === */
/* Selbst gehostet, damit beim Laden keine Verbindung zu Google entsteht (DSGVO). */

/* --- Abhaya Libre 400 --- */
@font-face { font-family:'Abhaya Libre'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/AbhayaLibre-400-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family:'Abhaya Libre'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/AbhayaLibre-400-latin.woff2) format('woff2');
  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; }

/* --- Cormorant Garamond 300 --- */
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/CormorantGaramond-300-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family:'Cormorant Garamond'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/CormorantGaramond-300-latin.woff2) format('woff2');
  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; }

/* --- DM Mono 300 / 400 --- */
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/DMMono-300-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/DMMono-300-latin.woff2) format('woff2');
  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:'DM Mono'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/DMMono-400-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family:'DM Mono'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/DMMono-400-latin.woff2) format('woff2');
  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; }

/* --- Inter 300 / 400 --- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/Inter-300-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/Inter-300-latin.woff2) format('woff2');
  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:'Inter'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/Inter-400-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/Inter-400-latin.woff2) format('woff2');
  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; }

/* --- Oswald 300 --- */
@font-face { font-family:'Oswald'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/Oswald-300-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:300; font-display: swap;
  src:url(/schriften/Oswald-300-latin.woff2) format('woff2');
  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; }

/* --- Jost 300 (nur DE/EN-Umschalter) --- */

/* --- Oswald 200 (Michael 24.09.2026: "Die Schrift etwas duenner") ---
   ACHTUNG: der erste Versuch holte nur EINEN Teilschnitt (7,7 KB). Darin
   fehlte unter anderem das A, es fiel auf Impact zurueck und stand fett
   zwischen duennen Buchstaben. Jetzt beide Latin-Schnitte, 12,2 und
   11,6 KB, selbst gehostet wie alle anderen. */
@font-face { font-family:'Oswald'; font-style:normal; font-weight:200; font-display: swap;
  src:url(/schriften/Oswald-200-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family:'Oswald'; font-style:normal; font-weight:200; font-display: swap;
  src:url(/schriften/Oswald-200-latin.woff2) format('woff2');
  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; }

/* --- EB Garamond 400 (25.09.2026 selbst gehostet: kinderkarte.html holte sie bis dahin von Google) --- */
@font-face { font-family:'EB Garamond'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/EBGaramond-400-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family:'EB Garamond'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/EBGaramond-400-latin.woff2) format('woff2');
  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; }

/* --- Inter 500 (25.09.2026 nachgezogen, gleiche Quelle) --- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display: swap;
  src:url(/schriften/Inter-500-latin-ext.woff2) format('woff2');
  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; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display: swap;
  src:url(/schriften/Inter-500-latin.woff2) format('woff2');
  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; }

/* --- ERSATZSCHRIFT MIT PASSENDEN MASSEN (26.09.2026) ---
   Bis dahin stand im Schriftsatz "Cormorant Garamond", Georgia, serif. Georgia ist
   GEMESSEN 14 Prozent breiter: derselbe Satz misst bei 100 px Schriftgrad 1503 px
   in Georgia und 1316 px in Cormorant. Am Handy brauchte die Ueberschrift der
   Galerie deshalb eine Zeile mehr, bis die echte Schrift da war, und sprang dann
   um gut 220 px nach oben. CLS 0,144 bei einer Schwelle von 0,1, gemessen um 90 ms,
   also lange bevor ein Bild geladen ist.

   size-adjust rechnet Georgia auf die Breite von Cormorant herunter. Der Platz
   stimmt damit von der ersten Malung an, und beim Schriftwechsel springt nichts.
   Der Wert 87.56 ist der gemessene Faktor, nicht geschaetzt. */
@font-face {
  font-family: 'Cormorant Ersatz';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 87.56%;
  font-display: swap;
}

/* Dasselbe fuer die Fliesstextschrift. Abhaya Libre ist GEMESSEN 8,3 Prozent
   schmaler als Georgia (1895 zu 2066 px bei 100 px Schriftgrad). Der Vorspann der
   Galerie brauchte deshalb bis zum Schriftwechsel eine Zeile mehr und schob den
   ganzen Rest der Seite um 113 px. Zusammen mit der Ueberschrift ergab das CLS
   0,133 bei einer Schwelle von 0,1 -- gemessen nach 47 ms, ohne dass ein Bild
   im Spiel war. */
@font-face {
  font-family: 'Abhaya Ersatz';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 91.72%;
  font-display: swap;
}

/* --- Inter 400 und 500 (Angebotskarte im Chat, Michael 21.10.2026) --- */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/Inter-400-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display: swap;
  src:url(/schriften/Inter-400-latin.woff2) format('woff2');
  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:'Inter'; font-style:normal; font-weight:500; font-display: swap;
  src:url(/schriften/Inter-500-latin-ext.woff2) format('woff2');
  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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display: swap;
  src:url(/schriften/Inter-500-latin.woff2) format('woff2');
  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; }

/* === /leben.css === */
/* Das Leben der Seite: EINE Bewegungssprache fuer alle Seiten.
   Michael 11.10.2026: "Jede Seite soll die gleiche Bildanimation, die gleiche
   Schriftanimation und die gleiche Linkanimation haben. Die Linkanimationen
   spektakulaer. Das Glas-Objektiv. Bei den Bildern auch eine Motion."

   Drei Bausteine, alle an html.js und an echtem Zeigen gebunden:
   1. LINK    Glastropfen: eine Glasflaeche breitet sich von der Stelle aus,
              an der der Zeiger eintrat, und zieht sich zu der Stelle zurueck,
              an der er ging. Lichtfleck folgt dem Zeiger, die Linie zeichnet.
   2. BILD    langsame Tiefe beim Scrollen (Parallaxe ueber die Eigenschaft
              translate, getrennt vom Eintritt E1, der transform nimmt) und
              eine Glaslinse, die dem Zeiger folgt und das Bild darunter
              leicht bricht.
   3. SEITE   weicher Uebergang zwischen den Seiten, Kopf und Buchungsleiste
              bleiben stehen.

   Eintritt von Schrift (T2) und Bild (E1) liegt weiter in eintritt-home.css.
   Hier steht nur, was dazukommt. Alles faellt weg bei
   prefers-reduced-motion, und die Zeiger-Effekte nur dort, wo es einen
   Zeiger gibt (hover: hover). Am Handy bleibt: Druckblitz beim Tippen,
   Tiefe beim Scrollen, Seitenuebergang. */

:root {
  --gl-aus: cubic-bezier(.23,1,.32,1);
  --gl-sanft: cubic-bezier(.77,0,.175,1);
}

/* ---------- 3. Seitenuebergang ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .kopf { view-transition-name: gl-kopf; }
  .klebeleiste { view-transition-name: gl-leiste; }
  ::view-transition-group(root) { animation-duration: 420ms; animation-timing-function: var(--gl-aus); }
  ::view-transition-old(root) { animation: gl-raus 240ms var(--gl-sanft) both; }
  ::view-transition-new(root) { animation: gl-rein 420ms var(--gl-aus) both; }
  ::view-transition-group(gl-kopf), ::view-transition-group(gl-leiste) { animation-duration: 0s; }
  @keyframes gl-raus { to { opacity: 0; filter: blur(6px); } }
  @keyframes gl-rein { from { opacity: 0; filter: blur(8px); transform: translateY(10px); } }
}

/* ---------- 1. Links ---------- */
/* Das Skript haengt data-gl an jede Verweisflaeche und setzt zwei Kinder
   hinein: .gl-glas (die Flaeche) und .gl-linie (die Zeichnung). Beide liegen
   ausser der Reihe (absolute) und aendern kein Mass. */
/* position setzt das Skript NUR, wenn der Verweis noch 'static' ist: ein Verweis, der
   schon absolut oder klebend steht (Kartenverweise), darf nicht umgestellt werden. */
html.gl [data-gl] { isolation: isolate; -webkit-tap-highlight-color: transparent; }
html.gl [data-gl] > .gl-glas, html.gl [data-gl] > .gl-linie { position: absolute; pointer-events: none; }

html.gl [data-gl="text"] { text-decoration: none; }
html.gl [data-gl="text"] > .gl-glas {
  inset: -.22em -.62em; z-index: -1;
  background:
    radial-gradient(120px 70px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.85), rgba(255,255,255,0) 70%),
    linear-gradient(135deg, rgba(255,255,255,.78), rgba(255,255,255,.34));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.75), inset 0 1px 0 rgba(255,255,255,.95), 0 14px 30px -12px rgba(61,55,51,.38);
  clip-path: circle(0 at var(--mx, 50%) var(--my, 50%));
  /* Der Weichzeichner haengt NUR am aktiven Verweis (66 Glasflaechen mit
     dauerhaftem backdrop-filter kosten beim Scrollen), und er bleibt noch so
     lange stehen, wie sich die Flaeche zurueckzieht. */
  transition: clip-path 620ms var(--gl-aus), backdrop-filter 0s 640ms, -webkit-backdrop-filter 0s 640ms;
}
html.gl [data-gl="text"]:hover > .gl-glas, html.gl [data-gl="text"].gl-an > .gl-glas, html.gl [data-gl="text"]:active > .gl-glas, html.gl [data-gl="text"]:focus-visible > .gl-glas {
  -webkit-backdrop-filter: blur(7px) saturate(1.5); backdrop-filter: blur(7px) saturate(1.5);
  transition: clip-path 620ms var(--gl-aus), backdrop-filter 0s, -webkit-backdrop-filter 0s;
}
html.gl [data-gl="text"] > .gl-linie {
  left: 0; right: 0; bottom: -.12em; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: var(--seite, left) center;
  transition: transform 520ms var(--gl-aus);
}

/* Die Lichtkante: ein heller Bogen laeuft einmal um den Rand der Glasflaeche
   (dieselbe Zeichnung wie "Glas B Lichtkante" beim Kiesel, 19.09.2026). */
@property --gl-w { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
html.gl [data-gl] > .gl-glas::before {
  content: ""; position: absolute; inset: 0; padding: 1.5px; border-radius: inherit; opacity: 0;
  background: conic-gradient(from var(--gl-w), rgba(255,255,255,0) 0 55%, rgba(255,255,255,.95) 78%, rgba(255,255,255,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
html.gl [data-gl="knopf"] > .gl-glas::before {
  background: conic-gradient(from var(--gl-w), rgba(255,255,255,0) 0 55%, rgba(255,255,255,.85) 78%, rgba(255,255,255,0) 100%);
}
@keyframes gl-lauf { from { --gl-w: 0deg; opacity: 1; } 85% { opacity: 1; } to { --gl-w: 360deg; opacity: 0; } }
@media (hover: hover) and (pointer: fine) {
  html.gl [data-gl]:hover > .gl-glas::before { animation: gl-lauf 1300ms var(--gl-aus) both; }
}
html.gl [data-gl].gl-an > .gl-glas::before { animation: gl-lauf 1000ms var(--gl-aus) both; }

/* Knoepfe (rechtwinklig, Hausregel): kein Tropfen, ein Lichtfleck unter dem Zeiger
   und eine Kante, die das Licht faengt. */
html.gl [data-gl="knopf"] { transition: transform 240ms var(--gl-aus), box-shadow 320ms var(--gl-aus); }
html.gl [data-gl="knopf"] > .gl-glas {
  inset: 0; z-index: 0; border-radius: inherit; overflow: hidden; opacity: 0;
  background:
    radial-gradient(180px 120px at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.34), rgba(255,255,255,0) 70%),
    linear-gradient(115deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.16) 50%, rgba(255,255,255,0) 60%) var(--glanz, -160%) 0 / 260% 100% no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.34);
  transition: opacity 360ms var(--gl-aus);
}
html.gl [data-gl="knopf"] > .gl-linie { display: none; }
/* der Inhalt des Knopfes bleibt ueber dem Licht */
html.gl [data-gl="knopf"] > :not(.gl-glas):not(.gl-linie) { position: relative; z-index: 1; }

@media (hover: hover) and (pointer: fine) {
  html.gl [data-gl="text"]:hover > .gl-glas, html.gl [data-gl="text"].gl-an > .gl-glas { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }
  html.gl [data-gl="text"]:hover > .gl-linie, html.gl [data-gl="text"].gl-an > .gl-linie { transform: scaleX(1); }
  html.gl [data-gl="knopf"]:hover { transform: translateY(-1px); box-shadow: 0 10px 26px -12px rgba(61,55,51,.55); }
  html.gl [data-gl="knopf"]:hover > .gl-glas { opacity: 1; --glanz: 160%; transition: opacity 360ms var(--gl-aus), background-position 900ms var(--gl-aus); }
}
html.gl [data-gl="knopf"]:active { transform: scale(.985); transition-duration: 90ms; }
html.gl [data-gl="knopf"].gl-an > .gl-glas { opacity: 1; }
html.gl [data-gl="text"]:active > .gl-glas { clip-path: circle(150% at var(--mx, 50%) var(--my, 50%)); }

/* Tastatur: dieselbe Zeichnung wie beim Zeigen */
html.gl [data-gl="text"]:focus-visible > .gl-glas { clip-path: circle(150% at 50% 50%); }
html.gl [data-gl="text"]:focus-visible > .gl-linie { transform: scaleX(1); }

/* ---------- 2. Bilder ---------- */
/* Tiefe beim Scrollen. translate und scale sind EIGENE Eigenschaften; E1
   benutzt transform. Beide laufen nebeneinander, ohne sich zu stoeren.
   Nur im Chromium und in Safari 26, wo es animation-timeline gibt; sonst
   steht das Bild still, und das ist in Ordnung. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* Die Zeitachse haengt am RAHMEN, nicht am Bild: der Rahmen hat overflow:hidden
       und ist damit selbst ein Scroll-Container -- view() am Bild lauschte auf
       ihn und lief nie (gemessen 11.10.2026: progress null). */
    html.gl [data-ein="bild"][data-tiefe] { view-timeline: --gl-tiefe block; }
    html.gl [data-ein="bild"][data-tiefe] img {
      scale: var(--gl-s, 1.07);
      animation: gl-tiefe linear both; animation-timeline: --gl-tiefe; animation-range: cover 0% cover 100%;
      will-change: translate;
    }
    @keyframes gl-tiefe { from { translate: 0 calc(var(--gl-v, 3%) * -1); } to { translate: 0 var(--gl-v, 3%); } }
  }
}

/* Beim Zeigen atmet das Bild ein Stueck naeher heran (langsam, damit es ruhig
   bleibt). Nur dort, wo es einen Zeiger gibt. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.gl [data-ein="bild"][data-tiefe] img { transition: filter 900ms var(--aus, ease), transform 900ms var(--aus, ease), opacity 520ms linear, scale 1600ms var(--gl-aus); }
  /* Michael 19.10.2026: "Kein Effekt beim rueber scrollen mit der Maus. Das ist zu viel." Kein Heranatmen mehr. */
}

/* Nichts davon im Kopf, im Chat, in der Tafel, in Karten und Schiebern: dort
   ist Bewegung Bedienung, nicht Schmuck. */
html.gl .gc-fenster [data-gl] > .gl-glas, html.gl .gc-fenster [data-gl] > .gl-linie { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.gl [data-gl] > .gl-glas, html.gl [data-gl] > .gl-linie { transition: none !important; }
  html.gl [data-ein="bild"][data-tiefe] img { animation: none !important; scale: none !important; }
  html.gl [data-gl="knopf"] { transition: none !important; }
}

/* Handy (bis 809 px): Bildunterschriften waren hinter dem Bild. Das Bild bekommt die Tiefe (scale 1,07 plus
   Versatz), sein Rahmen ist aber die ganze figure MIT figcaption. Das vergroesserte Bild malte ueber die
   Unterschrift (gemessen 11.10.2026, 390 px: 4 von 20 Unterschriften verdeckt). Mit Unterschrift steht das Bild
   dort still. Michael 11.10.2026: "Bei Breakpoint Mobil fehlen die Bildunterschriften." */
@media (max-width: 809px) {
  html.gl [data-ein="bild"][data-tiefe]:has(figcaption) img { scale: none !important; translate: none !important; animation: none !important; }
}

/* Fusszeile (Michael 11.10.2026: "Was ist hier los? Beim Footer"): die Verweise dort haben 10 px Tippflaeche oben und unten
   (kopf.css: padding 10px 0, margin -10px 0). Das Glas und die Linie bezogen sich auf diesen 44-px-Kasten, deckten die
   Nachbarzeilen zu und die Linie lag auf dem naechsten Verweis. Jetzt beziehen sie sich auf die Textzeile. */
html.gl .fussblock li a[data-gl="text"] > .gl-glas { inset: -.22em -.62em; }
html.gl .fussblock li a[data-gl="text"] > .gl-linie { bottom: -.12em; }

/* 12.10.2026, Michael: Hover der Buchungsleiste "eleganter, aber nicht moderner". Jetzt: das Papier faehrt von links ueber den Knopf (Wischer, 480 ms, Expo),
   die Schrift kippt dabei auf dunkel. Kein Lichtfleck, kein Rahmen, kein Schatten. Tippen am Handy: derselbe Wischer, kurz. */
html.gl .buchbar [data-gl="knopf"] { transition: color 360ms var(--gl-aus); isolation: isolate; }
html.gl .buchbar [data-gl="knopf"] > .gl-glas { z-index: -1; }
html.gl .buchbar [data-gl="knopf"] > .gl-glas {
  background: #F3EEE7; box-shadow: none; opacity: 1; clip-path: inset(0 100% 0 0); transition: clip-path 520ms var(--gl-aus);
}
html.gl .buchbar [data-gl="knopf"] > .gl-glas::before { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.gl .buchbar [data-gl="knopf"]:hover { transform: none; box-shadow: none; color: #3D3733; }
  html.gl .buchbar [data-gl="knopf"]:hover > .gl-glas { clip-path: inset(0 0 0 0); opacity: 1; }
}
html.gl .buchbar [data-gl="knopf"].gl-an { color: #3D3733; }
html.gl .buchbar [data-gl="knopf"].gl-an > .gl-glas { clip-path: inset(0 0 0 0); }
html.gl .buchbar [data-gl="knopf"]:focus-visible { color: #3D3733; }
html.gl .buchbar [data-gl="knopf"]:focus-visible > .gl-glas { clip-path: inset(0 0 0 0); }
html.gl .buchbar [data-gl="knopf"] svg, html.gl .buchbar [data-gl="knopf"] img { transition: filter 360ms var(--gl-aus); }
@media (prefers-reduced-motion: reduce) { html.gl .buchbar [data-gl="knopf"] > .gl-glas { transition: none; } }

/* 12.10.2026, Michael: kein weisser Balken hinter Verweisen, nirgends. Neuer Effekt: eine Haarlinie zieht unter dem Wort ein (von der Seite, aus der der Zeiger kommt),
   das Wort rueckt 3 px nach rechts und wird eine Spur dunkler. Keine Flaeche, kein Schatten, keine Unschaerfe. */
html.gl [data-gl="text"] > .gl-glas { display: none !important; }
html.gl [data-gl="text"] { transition: color 380ms var(--gl-aus), translate 380ms var(--gl-aus); }
html.gl [data-gl="text"] > .gl-linie { bottom: -.2em; height: 1px; transition: transform 640ms var(--gl-aus); }
@media (hover: hover) and (pointer: fine) {
  html.gl [data-gl="text"]:hover { translate: 3px 0; color: #1F1B18; }
}
@media (prefers-reduced-motion: reduce) { html.gl [data-gl="text"] { transition: none; translate: none !important; } }

/* 12.10.2026, Michael: "Der Wischeffekt ist besser, aber noch nicht perfekt. Mehr zeitgenoessisch." Statt einer harten Kante faehrt das Papier mit
   WEICHER Kante ein (Maske mit Verlauf, keine Schiebekante), von der Seite, an der der Zeiger eintritt (--seite aus leben.js), und sehr leicht
   durchscheinend mit Weichzeichner, wie Milchglas. Die Schrift kippt etwas spaeter als die Flaeche, damit sie nie auf halber Farbe steht. */
html.gl .buchbar [data-gl="knopf"] > .gl-glas {
  clip-path: none;
  background: rgba(243,238,231,.96);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  -webkit-mask-image: linear-gradient(90deg, #000 0 34%, transparent 66% 100%); mask-image: linear-gradient(90deg, #000 0 34%, transparent 66% 100%);
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  transition: mask-position 720ms var(--gl-aus), -webkit-mask-position 720ms var(--gl-aus);
}
html.gl .buchbar [data-gl="knopf"][style*="right"] > .gl-glas {
  -webkit-mask-image: linear-gradient(270deg, #000 0 34%, transparent 66% 100%); mask-image: linear-gradient(270deg, #000 0 34%, transparent 66% 100%);
  -webkit-mask-position: 0 0; mask-position: 0 0;
}
html.gl .buchbar [data-gl="knopf"] { transition: color 280ms var(--gl-aus) 140ms; }
@media (hover: hover) and (pointer: fine) {
  html.gl .buchbar [data-gl="knopf"]:hover > .gl-glas { clip-path: none; -webkit-mask-position: 0 0; mask-position: 0 0; }
  html.gl .buchbar [data-gl="knopf"][style*="right"]:hover > .gl-glas { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
}
html.gl .buchbar [data-gl="knopf"].gl-an > .gl-glas, html.gl .buchbar [data-gl="knopf"]:focus-visible > .gl-glas { clip-path: none; -webkit-mask-position: 0 0; mask-position: 0 0; }
html.gl .buchbar [data-gl="knopf"][style*="right"].gl-an > .gl-glas, html.gl .buchbar [data-gl="knopf"][style*="right"]:focus-visible > .gl-glas { -webkit-mask-position: 100% 0; mask-position: 100% 0; }
@media (prefers-reduced-motion: reduce) { html.gl .buchbar [data-gl="knopf"] > .gl-glas { transition: none; } }

/* Ueberschriften steigen Wort fuer Wort auf (siehe leben.js, 12.10.2026). Das Wort sitzt in einer Maske
   mit etwas Luft (Unterlaengen, Schwung der Cormorant), die Maske verschiebt das Layout nicht. */
html.lw-bereit .lw { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .06em .14em; margin: 0 -.06em -.14em; }
html.lw-bereit .lw-i { display: inline-block; transform: translateY(108%); will-change: transform;
  transition: transform 950ms var(--gl-aus) calc(var(--i, 0) * 55ms); }
html.lw-bereit .lw-an .lw-i { transform: none; }
@media (prefers-reduced-motion: reduce) { html.lw-bereit .lw-i { transform: none; transition: none; } }

/* Handy: Der Wischer der Buchungsleiste deckt auch das Chat-Symbol zu (Michael 12.10.2026: "die Schrift wird dunkel, das Logo des Chatbots nicht").
   Der Knopf "Verfuegbarkeit" ist am Handy so breit wie die ganze Leiste; das Papier liegt unter dem Symbol, das Symbol blieb hell auf hell.
   Jetzt kippt das Symbol mit der Schrift: Blase dunkel, Augen hell (umgekehrt zum Ruhezustand). */
@media (max-width: 809px) {
  html.gl .buchbar .cg-ruf { transition: color 360ms var(--gl-aus); }
  html.gl .buchbar .cg-ruf svg rect { transition: fill 360ms var(--gl-aus); }
  html.gl .buchbar:has(.buchtext.gl-an) .cg-ruf,
  html.gl .buchbar:has(.buchtext:focus-visible) .cg-ruf { color: #3D3733; }
  html.gl .buchbar:has(.buchtext.gl-an) .cg-ruf svg rect,
  html.gl .buchbar:has(.buchtext:focus-visible) .cg-ruf svg rect { fill: #F3EEE7 !important; }
}
@media (max-width: 809px) and (hover: hover) and (pointer: fine) {
  html.gl .buchbar:has(.buchtext:hover) .cg-ruf { color: #3D3733; }
  html.gl .buchbar:has(.buchtext:hover) .cg-ruf svg rect { fill: #F3EEE7 !important; }
}

/* 12.10.2026, Michael: "Mach einen besseren Rollover, das sieht nicht gut aus, einfacher und eleganter." Der Wischer mit Maske und Weichzeichner
   entfaellt ganz. Jetzt: der Knopf hellt nur leise auf (Papierton, 10 %), die Schrift bleibt hell und steht still. Eine Eigenschaft, eine Dauer.
   Das Chat-Symbol kippt nicht mehr mit, es bleibt wie im Ruhezustand. */
html.gl .buchbar [data-gl="knopf"] > .gl-glas { display: none !important; }
html.gl .buchbar [data-gl="knopf"] { transition: background-color 420ms var(--gl-aus); }
@media (hover: hover) and (pointer: fine) {
  html.gl .buchbar [data-gl="knopf"]:hover { background-color: rgba(246,242,234,.10); color: #F6F2EA; }
}
html.gl .buchbar [data-gl="knopf"].gl-an,
html.gl .buchbar [data-gl="knopf"]:focus-visible { background-color: rgba(246,242,234,.10); color: #F6F2EA; }
@media (max-width: 809px) {
  html.gl .buchbar:has(.buchtext.gl-an) .cg-ruf,
  html.gl .buchbar:has(.buchtext:focus-visible) .cg-ruf { color: #F1ECE3; }
  html.gl .buchbar:has(.buchtext.gl-an) .cg-ruf svg rect,
  html.gl .buchbar:has(.buchtext:focus-visible) .cg-ruf svg rect { fill: #3D3733 !important; }
}
@media (max-width: 809px) and (hover: hover) and (pointer: fine) {
  html.gl .buchbar:has(.buchtext:hover) .cg-ruf { color: #F1ECE3; }
  html.gl .buchbar:has(.buchtext:hover) .cg-ruf svg rect { fill: #3D3733 !important; }
}

/* 13.10.2026, Michael: "Mach das Roll over bei allen dicken Button wie bei der Booking Bar, auf allen Breakpoints, bei allen Seiten."
   Ein Rollover fuer alle grossen Knoepfe: nur die Fuellung wandert leise (Papierton, 10 %), die Schrift bleibt, nichts hebt sich, nichts kippt um.
   Dunkle Knoepfe werden eine Spur heller (#504A45 = Tinte + 10 % Papier), Linienknoepfe bekommen eine zarte Tinte-Flaeche. Eine Eigenschaft, 420 ms, gleiche Kurve. */
html body .ts-knopf.ts-knopf.ts-knopf, html body .an-knopf.an-knopf.an-knopf, html body.rg .buchen.buchen.buchen {
  transition: background-color 420ms var(--gl-aus); }
@media (hover: hover) and (pointer: fine) {
  html body .ts-knopf.ts-knopf.ts-knopf:hover, html body .an-knopf.an-knopf.an-knopf:hover:not(.voll) { background: rgba(61,55,51,.08); color: var(--tinte, #3D3733); transform: none; box-shadow: none; }
  html body .an-knopf.an-knopf.an-knopf.voll:hover, html body .an-kartentafel .an-knopf.an-knopf.an-knopf:hover, html body.rg .buchen.buchen.buchen:hover { background: #504A45; color: #F3EEE7; transform: none; box-shadow: none; }
}
html body .ts-knopf.ts-knopf.ts-knopf:active, html body .an-knopf.an-knopf.an-knopf:active, html body.rg .buchen.buchen.buchen:active { transform: none; }
@media (prefers-reduced-motion: reduce) { html body .ts-knopf.ts-knopf.ts-knopf, html body .an-knopf.an-knopf.an-knopf, html body.rg .buchen.buchen.buchen { transition: none; } }

/* 16.10.2026, Michael: "einfachere Animation, diese passt nicht zu unserem Design". Die Knoepfe (data-gl="knopf") bekommen KEIN
   Glaslicht mehr (kein Lichtfleck unter dem Zeiger, kein Glanzstreifen, kein Anheben, kein Schatten, keine Lichtkante): nur der
   ruhige Farbwechsel, den die Knopfklasse selbst mitbringt (Fuellung wird dunkler oder hell hinterlegt). Links (data-gl="text")
   bleiben wie sie sind. Zurueck: leben.css.vor-knopf-ruhig-16102026 */
html.gl [data-gl="knopf"] > .gl-glas, html.gl [data-gl="knopf"] > .gl-linie { display: none !important; }
html.gl [data-gl="knopf"], html.gl [data-gl="knopf"]:hover { transform: none !important; box-shadow: none; transition: background-color .28s ease, color .28s ease, border-color .28s ease; }
html.gl [data-gl="knopf"]:active { transform: none !important; }

/* Michael 19.10.2026: "Kein Effekt beim rueber scrollen mit der Maus. Das ist zu viel."
   Glastropfen, Lichtfleck und Lichtlauf unter dem Zeiger sind aus. Die Unterstreichung
   der Textverweise (.gl-linie) bleibt: sie sagt nur, dass man klicken kann. */
html.gl [data-gl] > .gl-glas { display: none !important; }

/* 20.10.2026, Michael (FAQ, Inhalt): "Mach den Strich um 25 % weniger lang auf der rechten Seite, dass er nicht ganz
   nach aussen geht, und um 50 % heller." Gilt fuer die Inhaltsliste aller Textseiten (dieselbe Liste). */
html.gl .ts-inhalt [data-gl="text"] > .gl-linie, html.gl .ts-inhalt [data-gl="text"] > .gl-glas { display: none; }   /* 20.10.2026: dort gilt Variante A (textseiten.css) */

/* === /cookiebanner.css === */
/* Einwilligung: Hinweis, Einstellungen, Liste der Cookies.
   Haus-Stil: Papier #F3EEE7, Tinte #3D3733, Linie #DDD5C9, Radius 0 bei Knoepfen
   (Michael 05.09.2026), Schieber rund. Ueberschriften Cormorant Garamond 300,
   Text Abhaya Libre, Beschriftungen DM Mono in Versalien.
   Gleichwertigkeit: alle Knoepfe einer Ebene teilen EINE Regel (.cb-knopf).
   Es gibt bewusst keine Farbvariante fuer "Alles akzeptieren". */

.cookiebanner {
  --cb-grund: #F3EEE7; --cb-tinte: #3D3733; --cb-text: #5C554F; --cb-leise: #6E6862;
  --cb-linie: #DDD5C9; --cb-rand: clamp(20px, 3vw, 42px);
  font-family: "Abhaya Libre", "Abhaya Ersatz", Georgia, serif;
  color: var(--cb-tinte); font-size: 17px; line-height: 1.6;
}
.cookiebanner [hidden] { display: none !important; }
.cookiebanner *, .cookiebanner *::before, .cookiebanner *::after { box-sizing: border-box; }
.cookiebanner :where(h2, h3, p, dl, dd) { margin: 0; }
.cookiebanner :where(button) { font: inherit; color: inherit; }
.cookiebanner :where(a) { color: inherit; text-underline-offset: 3px; }
.cookiebanner :focus-visible { outline: 2px solid var(--cb-tinte); outline-offset: 3px; }
html.cb-sperre { overflow: hidden; }

/* ---------- ein Knopf, drei Aufgaben ---------- */

.cb-knopf {
  display: flex; align-items: center; justify-content: center; text-align: center;
  width: 100%; min-height: 52px; padding: 10px 20px;
  border: 1px solid var(--cb-tinte); border-radius: 0; background: transparent; cursor: pointer;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; line-height: 1.3; color: var(--cb-tinte);
  transition: background-color .22s ease, color .22s ease;
}
.cb-knopf:hover { background: var(--cb-tinte); color: var(--cb-grund); }
.cb-knopf:active { transform: translateY(1px); }
.cb-knoepfe { display: grid; gap: 12px; }

.cb-textknopf, .cb-zu, .cb-sprache button, .cb-navdienst {
  background: none; border: 0; padding: 0; cursor: pointer; border-radius: 0;
}
.cb-textknopf {
  display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; color: var(--cb-tinte);
}
.cb-zu {
  min-height: 44px; padding: 0 2px;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px;
}

/* ---------- Sprache ---------- */

.cb-sprache {
  display: inline-flex; align-items: center; gap: 2px; color: var(--cb-leise);
  font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .16em;
}
.cb-sprache button {
  min-width: 44px; min-height: 44px; display: grid; place-items: center;
  font: inherit; letter-spacing: inherit; color: var(--cb-leise);
}
.cb-sprache button:last-child { justify-content: end; margin-right: -.16em; }
.cb-sprache button[aria-pressed="true"] { color: var(--cb-tinte); font-weight: 500; }

/* ---------- Ebene 1: Hinweis ---------- */

.cb-leiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9000;
  background: var(--cb-grund); border-top: 1px solid var(--cb-linie);
  box-shadow: 0 -18px 48px rgba(61, 55, 51, .10);
  max-height: 100dvh; overflow-y: auto;
  /* Kein Einblenden mehr: Michael 19.10.2026 ("Stell A und B live"), der Hinweis steht sofort */
}
.cb-leiste[data-da] { opacity: 1; transform: none; }
.cb-innen {
  /* Swiss Grid (16.10.2026): 12 Spalten, 24 px Rinne. Titel Spalte 1 bis 4, Text 5 bis 9, Knoepfe 10 bis 12.
     --breite der Zimmerseiten (Kartenbreite) darf hier NICHT einfliessen: sie quetschte die Leiste auf 490 px. */
  max-width: 1435px; margin: 0 auto;
  padding: 28px var(--cb-rand) calc(24px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; row-gap: 16px; align-items: center;
}
.cb-links { grid-column: 1 / span 9; display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); column-gap: 24px; row-gap: 8px; align-items: start; }
.cb-links .cb-titel { grid-column: 1 / span 4; grid-row: 1 / span 2; }
.cb-links .cb-text { grid-column: 5 / span 5; grid-row: 1; margin-top: 0; max-width: none; }
.cb-links .cb-fuss { grid-column: 5 / span 5; grid-row: 2; margin-top: 6px; }
.cb-rechts { grid-column: 10 / span 3; }
@media (max-width: 900px) {
  .cb-innen { grid-template-columns: minmax(0, 1fr); }
  .cb-links, .cb-rechts { grid-column: 1; }
  .cb-links { grid-template-columns: minmax(0, 1fr); }
  .cb-links .cb-titel, .cb-links .cb-text, .cb-links .cb-fuss { grid-column: 1; grid-row: auto; }
}
.cb-titel {
  font-family: "Cormorant Garamond", "Cormorant Ersatz", Georgia, serif;
  font-weight: 300; font-size: 27px; line-height: 1.15; letter-spacing: -.005em; color: var(--cb-tinte);
}
.cb-text { margin-top: 8px; max-width: 80ch; font-size: 16px; line-height: 1.55; color: var(--cb-text); }
.cb-fuss { display: flex; flex-wrap: wrap; gap: 0 24px; margin-top: 2px; }
.cb-fuss a {
  display: inline-flex; align-items: center; min-height: 32px;
  font-family: "DM Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase;
  text-decoration: none; color: var(--cb-leise);
}
.cb-fuss a:last-child { margin-right: -.16em; }
.cb-fuss a:hover { color: var(--cb-tinte); text-decoration: underline; text-underline-offset: 5px; }
.cb-rechts { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 4px; }
.cb-rechts .cb-sprache { align-self: flex-end; margin: -8px 0 0 0; }
.cb-rechts .cb-knopf { min-height: 44px; }
.cb-rechts .cb-knoepfe { gap: 8px; }

/* ---------- Ebene 2 und 3: Fenster ---------- */

.cb-schleier {
  position: fixed; inset: 0; z-index: 9001; background: rgba(38, 34, 30, .52);
  animation: cb-ein .3s ease both;
}
.cb-modal {
  position: fixed; z-index: 9002; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(1040px, calc(100% - 32px)); height: min(820px, calc(100dvh - 32px));
  display: flex; flex-direction: column;
  background: var(--cb-grund); border: 1px solid var(--cb-linie); box-shadow: 0 30px 90px rgba(38, 34, 30, .35);
  animation: cb-auf .45s cubic-bezier(.22, 1, .36, 1) both;
}
.cb-kopf {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 32px 40px 0;
}
.cb-kopf .cb-titel { font-size: 32px; padding-top: 4px; }
.cb-kopfrechts { display: flex; align-items: center; gap: 4px; flex: none; margin-top: -6px; }
.cb-koerper { flex: 1 1 auto; overflow-y: auto; padding: 24px 40px 8px; overscroll-behavior: contain; }
.cb-modalfuss {
  flex: none; padding: 20px 40px calc(24px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--cb-linie); display: grid; gap: 14px;
}
.cb-id { font-family: "DM Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .08em; color: var(--cb-leise); }
.cb-modalfuss .cb-knoepfe { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cb-modalfuss .cb-knoepfe.cb-zwei { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; margin-left: auto; width: 100%; }

/* Auswahl */
.cb-zeile {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px 48px; align-items: start;
  padding: 28px 0; border-bottom: 1px solid var(--cb-linie);
}
.cb-zeile:first-child { padding-top: 12px; }
.cb-zeile h3 {
  font-family: "Cormorant Garamond", "Cormorant Ersatz", Georgia, serif;
  font-weight: 400; font-size: 26px; line-height: 1.2;
}
.cb-zahl { font-family: "DM Mono", ui-monospace, monospace; font-size: 13px; letter-spacing: .08em; color: var(--cb-leise); vertical-align: .15em; }
.cb-zeile p { margin-top: 8px; max-width: 62ch; color: var(--cb-text); }

/* Schieber: rund (Hausregel), mit Wort daneben, damit der Zustand nicht nur an der Farbe haengt */
.cb-schalter { display: inline-flex; align-items: center; gap: 14px; cursor: pointer; min-height: 44px; position: relative; }
.cb-schalter input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: inherit; }
.cb-schiene {
  position: relative; flex: none; width: 52px; height: 30px; border-radius: 999px;
  border: 1px solid var(--cb-leise); background: transparent; transition: background-color .25s ease, border-color .25s ease;
}
.cb-schiene::after {
  content: ""; position: absolute; top: 4px; left: 4px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--cb-leise); transition: transform .3s cubic-bezier(.22, 1, .36, 1), background-color .25s ease;
}
.cb-schalter input:checked + .cb-schiene { background: var(--cb-tinte); border-color: var(--cb-tinte); }
.cb-schalter input:checked + .cb-schiene::after { transform: translateX(22px); background: var(--cb-grund); }
.cb-schalter input:disabled { cursor: default; }
.cb-schalter input:disabled + .cb-schiene { opacity: .62; }
.cb-schalter input:focus-visible + .cb-schiene { outline: 2px solid var(--cb-tinte); outline-offset: 3px; }
.cb-zustand {
  min-width: 7.5em; font-family: "DM Mono", ui-monospace, monospace; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-text);
}

/* Liste */
.cb-zweispalt { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 0 48px; align-items: start; }
.cb-nav { position: sticky; top: 0; padding-right: 24px; border-right: 1px solid var(--cb-linie); }
.cb-navgruppe + .cb-navgruppe { margin-top: 28px; }
.cb-navkat {
  font-family: "Inter", system-ui, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-leise); margin-bottom: 4px;
}
.cb-navdienst {
  display: block; width: 100%; text-align: left; min-height: 44px; padding: 8px 0 8px 14px; margin-left: -14px;
  border-left: 2px solid transparent; color: var(--cb-text); line-height: 1.3;
}
.cb-navdienst:hover { color: var(--cb-tinte); }
.cb-navdienst[aria-current="true"] { color: var(--cb-tinte); border-left-color: var(--cb-tinte); }
.cb-kopfzeile { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-bottom: 12px; border-bottom: 2px solid var(--cb-tinte); }
.cb-kopfzeile h2 { font-family: "Cormorant Garamond", "Cormorant Ersatz", Georgia, serif; font-weight: 400; font-size: 30px; line-height: 1.2; }
.cb-dienst { margin: 28px 0 8px; font-family: "Cormorant Garamond", "Cormorant Ersatz", Georgia, serif; font-weight: 500; font-size: 24px; line-height: 1.25; }
.cb-felder { display: grid; gap: 18px; margin-top: 16px; }
.cb-feld dt { font-family: "Inter", system-ui, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-leise); margin-bottom: 2px; }
.cb-feld dd { color: var(--cb-text); overflow-wrap: anywhere; }
.cb-tabelle { width: 100%; margin: 28px 0 16px; border-collapse: collapse; font-size: 16px; text-align: left; }
.cb-tabelle caption { text-align: left; font-family: "Inter", system-ui, sans-serif; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-leise); padding-bottom: 8px; }
.cb-tabelle th { font-family: "DM Mono", ui-monospace, monospace; font-size: 11.5px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; padding: 10px 14px 10px 0; border-bottom: 1px solid var(--cb-tinte); }
.cb-tabelle td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--cb-linie); vertical-align: top; color: var(--cb-text); }
.cb-tabelle td:first-child { font-family: "DM Mono", ui-monospace, monospace; font-size: 13px; color: var(--cb-tinte); overflow-wrap: anywhere; }

@keyframes cb-ein { from { opacity: 0; } to { opacity: 1; } }
@keyframes cb-auf { from { opacity: 0; transform: translate(-50%, -48%); } to { opacity: 1; transform: translate(-50%, -50%); } }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
  .cb-innen { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px 40px; }
}

/* ---------- Handy ---------- */
@media (max-width: 809px) {
  .cookiebanner { font-size: 16px; }
  .cb-leiste { max-height: 94dvh; }
  .cb-innen { grid-template-columns: 1fr; gap: 12px; padding: 14px var(--cb-rand) calc(14px + env(safe-area-inset-bottom)); }
  .cb-titel { font-size: 22px; }
  .cb-text { margin-top: 6px; font-size: 15.5px; }
  .cb-fuss { margin-top: 4px; justify-content: space-between; }
  .cb-rechts { display: contents; }
  .cb-rechts .cb-sprache { order: -1; justify-self: end; margin: -10px 0 -6px 0; }
  .cb-links { order: 0; }
  .cb-rechts .cb-knoepfe { order: 1; gap: 8px; }
  .cb-knopf, .cb-rechts .cb-knopf { min-height: 44px; }
  .cb-zustand { min-width: 0; }

  .cb-modal { inset: 0; top: 0; left: 0; transform: none; width: 100%; height: 100dvh; max-height: none; border: 0; animation: cb-ein .3s ease both; }
  .cb-kopf { padding: 18px var(--cb-rand) 0; flex-wrap: wrap; gap: 4px 12px; }
  .cb-kopf .cb-titel { font-size: 25px; order: 2; flex-basis: 100%; padding-top: 0; }
  .cb-kopfrechts { order: 1; margin: 0 0 0 auto; }
  .cb-koerper { padding: 12px var(--cb-rand) 8px; }
  .cb-modalfuss { padding: 14px var(--cb-rand) calc(16px + env(safe-area-inset-bottom)); gap: 10px; }
  .cb-modalfuss .cb-knoepfe, .cb-modalfuss .cb-knoepfe.cb-zwei { grid-template-columns: 1fr; max-width: none; gap: 8px; }
  .cb-zeile { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .cb-zeile h3 { font-size: 23px; }

  .cb-zweispalt { grid-template-columns: 1fr; gap: 20px; }
  .cb-nav { position: static; padding: 0 0 16px; border-right: 0; border-bottom: 1px solid var(--cb-linie); }
  .cb-kopfzeile h2 { font-size: 25px; }
  .cb-tabelle thead { position: absolute; left: -9999px; }
  .cb-tabelle tr { display: block; padding: 10px 0; border-bottom: 1px solid var(--cb-linie); }
  .cb-tabelle td { display: block; border: 0; padding: 2px 0; }
  .cb-tabelle td::before { content: attr(data-l); display: block; font-family: "Inter", system-ui, sans-serif; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--cb-leise); margin-top: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-leiste, .cb-schleier, .cb-modal, .cb-schiene, .cb-schiene::after, .cb-knopf { transition: none; animation: none; }
  .cb-leiste { transform: none; }
}

/* 16.10.2026: am Handy kompakter, die Leiste fuellte 62 % des Bildschirms (502 von 800 px) */
@media (max-width: 600px) {
  .cb-innen { padding-top: 14px; row-gap: 10px; }
  .cb-leiste .cb-titel { font-size: 21px; }
  .cb-leiste .cb-text { font-size: 14.5px; line-height: 1.45; }
  .cb-leiste .cb-fuss a { min-height: 28px; }
  .cb-leiste .cb-rechts .cb-knopf { min-height: 42px; }
  .cb-leiste .cb-rechts .cb-knoepfe { gap: 6px; }
}

/* ---------- Liste und Auswahl im Swiss Grid (Michael 16.10.2026: "grosszuegiger, eleganter, luxurioeser") ----------
   Raster: 12 Spalten, 32 px Rinne. Navigation Spalte 1 bis 3, Inhalt Spalte 5 bis 12. Haarlinien 1 px statt dicker Balken,
   Ueberschriften leicht (Cormorant 300), Beschriftungen DM Mono 11 px gesperrt, Abstaende auf 8-Punkt-Raster (24/32/48/64).
   Zurueck: cookiebanner.css.vor-liste-16102026 */
@media (min-width: 810px) {
  .cb-modal { width: min(1200px, calc(100% - 64px)); height: min(880px, calc(100dvh - 64px)); box-shadow: 0 40px 120px rgba(38, 34, 30, .32); }
  .cb-kopf { padding: 48px 64px 0; align-items: baseline; }
  .cb-kopf .cb-titel { font-size: 44px; font-weight: 300; line-height: 1.1; letter-spacing: -.01em; padding-top: 0; }
  .cb-kopfrechts { margin-top: 0; gap: 24px; }
  .cb-koerper { padding: 40px 64px 32px; }
  .cb-kopf + .cb-koerper { border-top: 1px solid var(--cb-linie); margin-top: 32px; }

  .cb-zweispalt { grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }
  .cb-nav { grid-column: 1 / span 3; border-right: 0; padding-right: 0; top: 8px; }
  .cb-detail { grid-column: 5 / span 8; min-width: 0; }
  .cb-navgruppe + .cb-navgruppe { margin-top: 48px; }
  .cb-navkat { font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .22em; margin-bottom: 12px; }
  .cb-navdienst { min-height: 40px; padding: 8px 0 8px 20px; margin-left: 0; border-left: 1px solid var(--cb-linie); font-size: 19px; line-height: 1.3; transition: color .25s ease, border-color .25s ease; }
  .cb-navdienst[aria-current="true"] { border-left-color: var(--cb-tinte); }

  .cb-kopfzeile { padding-bottom: 24px; border-bottom: 1px solid var(--cb-tinte); align-items: baseline; }
  .cb-kopfzeile h2 { font-size: 38px; font-weight: 300; letter-spacing: -.005em; }
  .cb-dienst { margin: 48px 0 24px; font-size: 28px; font-weight: 400; }
  .cb-felder { gap: 0; margin-top: 0; }
  .cb-feld { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); column-gap: 32px; padding: 20px 0; border-top: 1px solid var(--cb-linie); }
  .cb-feld:last-child { border-bottom: 1px solid var(--cb-linie); }
  .cb-feld dt { grid-column: 1 / span 2; font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .2em; margin: 5px 0 0; }
  .cb-feld dd { grid-column: 3 / span 6; font-size: 17px; line-height: 1.65; }
  .cb-tabelle { margin: 56px 0 24px; }
  .cb-tabelle caption { font-family: "DM Mono", ui-monospace, monospace; font-size: 11px; letter-spacing: .22em; padding-bottom: 16px; }
  .cb-tabelle th { font-size: 11px; letter-spacing: .2em; padding: 14px 24px 14px 0; border-bottom: 1px solid var(--cb-tinte); }
  .cb-tabelle td { padding: 18px 24px 18px 0; line-height: 1.55; }

  .cb-modalfuss { flex-direction: row; display: flex; align-items: center; justify-content: space-between; gap: 32px; padding: 28px 64px calc(32px + env(safe-area-inset-bottom)); }
  .cb-modalfuss .cb-knoepfe.cb-zwei { margin: 0; width: auto; max-width: none; grid-template-columns: repeat(2, 260px); gap: 16px; }
  .cb-modalfuss .cb-knoepfe { grid-template-columns: repeat(3, 220px); gap: 16px; }
  .cb-modalfuss .cb-knopf { min-height: 56px; }
}

/* 16.10.2026, Michael: Knoepfe rechts wieder wie am Anfang (320 x 44 px, 8 px Abstand), nur der Rahmen eine Spur heller.
   Zurueck: cookiebanner.css.vor-urform-16102026 */
.cb-leiste .cb-rechts .cb-knopf { border-color: rgba(61, 55, 51, .55); }
.cb-leiste .cb-rechts .cb-knopf:hover { border-color: var(--cb-tinte); }

/* 16.10.2026, Michael: "die drei Knoepfe gleich hoch wie der Fliesstext: Oberkante des Textes bis Unterkante des Textblocks, nach Swiss Grid".
   Der Textblock (Absatz + Links) bestimmt die Hoehe; die drei Knoepfe teilen sie sich zu gleichen Teilen (8 px Abstand, gemessen ca. 40 px je Knopf).
   Die Sprachwahl rutscht ueber den Block, in die obere Randzone. Am Handy unveraendert. Zurueck: cookiebanner.css.vor-bluendig-16102026 */
@media (min-width: 901px) {
  .cb-innen { padding-top: 64px; align-items: stretch; }
  .cb-links { min-height: 128px; align-content: start; }
  .cb-leiste .cb-rechts { position: relative; display: block; }
  .cb-leiste .cb-rechts .cb-sprache { position: absolute; right: 0; top: -48px; margin: 0; align-self: auto; }
  .cb-leiste .cb-rechts .cb-knoepfe { height: 100%; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .cb-leiste .cb-rechts .cb-knopf { min-height: 0; height: 100%; padding: 0 20px; }
}

/* 16.10.2026, Michael: "Ueberschrift, Fliesstext und Knoepfe genau ausgerichtet". An Pixeln gemessen (Bildschirmfoto, doppelte Aufloesung):
   Tinte oben: Ueberschrift 4 px, Fliesstext 5,5 px unter der Oberkante der Knoepfe; Links endeten 12 px ueber der Unterkante.
   Jetzt beginnen alle drei auf EINER Linie und die Links enden auf der Unterkante der Knoepfe. Zurueck: cookiebanner.css.vor-ausrichtung-16102026 */
@media (min-width: 901px) {
  .cb-links .cb-titel { margin-top: -4px; }
  .cb-links .cb-text { margin-top: -5.5px; }
  .cb-links .cb-fuss { margin-bottom: -12px; }
}
/* 16.10.2026, Michael: Text lief bis an die Knoepfe, "frueher umbrechen": rechts 48 px Luft im Fliesstext (zusaetzlich zur Rinne). */
@media (min-width: 901px) { .cb-links .cb-text { padding-right: 48px; } }

/* 16.10.2026, Michael: "Verbessere die Typografie in diesem Breakpoint" (Cookie-Leiste, einspaltig 601 bis 900 px). Befund am Screenshot: Titel brach mit
   dem Einzelwort "Technologien." um, der Text lief mit rund 90 Zeichen je Zeile und endete auf "werden.". Jetzt: Titel ausgewogen umbrochen, Text auf
   etwa 62 Zeichen begrenzt, ruhigerer Zeilenabstand, keine Einzelwoerter am Absatzende, Anfuehrungszeichen haengen. Zurueck: cookiebanner.css.vor-satz-16102026 */
.cb-titel { text-wrap: balance; hanging-punctuation: first; }
.cb-text { text-wrap: pretty; hyphens: manual; }
@media (min-width: 601px) and (max-width: 900px) {
  .cb-links .cb-titel { font-size: 32px; line-height: 1.12; letter-spacing: -.01em; max-width: 26ch; }
  .cb-links .cb-text { margin-top: 14px; max-width: 62ch; font-size: 16.5px; line-height: 1.62; padding-right: 0; }
  .cb-links .cb-fuss { margin-top: 12px; }
}

/* ---- Responsive-Fix 28.10.2026 Teil 5: Cookie-Knoepfe am Handy mindestens 44 px hoch (vorher 42) ---- */
@media (max-width: 600px) { .cb-leiste .cb-rechts .cb-knopf { min-height: 44px; } }