/* ------------------------------------------------------------------
   Nur der OBERE Teil des Nachbaus: Kopfleiste, Auftaktbild, Einleitung,
   die zwei versetzten Bilder, das Bewertungs-Laufband, die Buchungsleiste.
   Alles darunter kommt aus lp-stil.css (Landingpage wandern).

   Michael, 23.09.2026:
     "Der Footer soll nicht ueber die ganze Breite gehen, er soll mit den
      Bildern rechts und links abschliessen. Es soll kein Bild ohne
      Maximalgroesse sein fuer die groesseren Bildschirme."
   Deshalb liegt ALLES in main (max-width 1435 px) und traegt denselben
   Seitenrand var(--rand) wie die Bildreihen. Kein randloses Bild mehr.
   ------------------------------------------------------------------ */

:root {
  --a1: 8px; --a2: 16px; --a3: 24px; --a4: 40px; --a5: 64px; --a6: 128px;
  --leise: #706B64;   /* hellster Ton, der auf #F3EEE7 noch 4.5:1 haelt */
}

/* ---------- Kopfleiste ---------- */

.kopf {
  position: sticky; top: 0; z-index: 60;
  max-width: var(--breite); margin: 0 auto;
  height: 110px;
  background: var(--grund);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: var(--rand);
}
.menueknopf { display: flex; flex-direction: column; gap: 7px; width: 40px; padding: var(--a1) 0; justify-self: start; background: none; border: 0; cursor: pointer; }
.menueknopf span { display: block; height: 1px; background: var(--tinte); transition: transform .35s, opacity .25s; }
.kopf.offen .menueknopf span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kopf.offen .menueknopf span:nth-child(2) { opacity: 0; }
.kopf.offen .menueknopf span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Michael 23.09.2026: "Das ist wesentlich eleganter als der Klumpen oben.
   Tausche das aus, ein bisschen groesser." Gemeint ist die Wortmarke aus dem
   Logotype im Fuss. Dieselben Werte wie dort: Oswald 300, Laufweite 0,42 em,
   Farbe #3D3733 -- nur 32 px -> 36 px -> 30 px (23.09.2026 "etwas kleiner"). Serifen sind fuer die Wortmarke
   ausgeschlossen (Regel 22). */
.wortmarke {
  font-family: 'Oswald', system-ui, sans-serif;
  font-weight: 300; font-size: 30px; line-height: normal;
  letter-spacing: .42em; text-indent: .42em; text-transform: uppercase;
  color: var(--tinte); text-decoration: none;
}
.sprache {
  justify-self: end; margin: 0;
  font-family: 'Jost', system-ui, sans-serif;
  font-weight: 300; font-size: 13.68px; letter-spacing: .16em; color: #57534B;
}
.sprache a { text-decoration: none; color: inherit; }
.sprache .aus { opacity: .45; }

/* ---------- Rolldown-Menue ---------- */

.menue {
  position: fixed; inset: 110px 0 auto 0; z-index: 55;
  background: var(--grund); border-bottom: 1px solid var(--linie);
  padding: var(--a5) var(--rand); display: none;
}
.menue.offen { display: block; }
.menue > * { max-width: var(--breite); margin-inline: auto; }
.menue ol { list-style: none; padding: 0; display: grid; gap: var(--a3); }
.menue .zaehler {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-size: 12px; letter-spacing: .3em; color: var(--grau);
  display: block; margin-bottom: 4px;
}
.menue .haupt {
  font-family: 'Cormorant Garamond', 'Cormorant Ersatz',Georgia, serif;
  font-weight: 300; font-size: 30px; line-height: 1.1; color: var(--tinte); text-decoration: none;
}
.menue .anschrift { margin-top: var(--a4); font-size: 16px; line-height: 1.7; color: var(--text); }

/* ---------- Auftaktbild ---------- */

.auftakt-bild { padding: var(--a4) var(--rand) 0; }
.auftakt-bild .bildkasten { position: relative; aspect-ratio: 1355 / 735; }
.auftakt-bild img { width: 100%; height: 100%; object-fit: cover; }

/* Kiesel -- Form, Groesse und Glas 1:1 von der Landingpage abgemessen
   (wandern.hotel-gebhard.at, .ssc/.ssc-glas, gemessen 23.09.2026):
     Kasten   244 x 232 px   -> breiter als hoch
     Radius   50% 50% 44% 56% / 60% 58% 42% 40%
     Glas     rgba(53,48,43,.92)
   Der Text ist der der Framer-Seite (Inter 16 px, vier Zeilen).
   Michael 23.09.2026: "leicht animiert, dreht sich im Kreis" -- 28 s je
   Umdrehung, nur die Glasform dreht, die Schrift bleibt gerade. */
.kiesel {
  /* Michael 23.09.2026: "Passt in der Webseite an."
     An der Framer-Auslieferung gemessen (1440 px):
       Kiesel   x 98, y 274, 183 x 184
       im Bild  links 6,81 %, oben 13,83 % (Bild x0 y166, 1440 x 781)
       Text     Inter 400, 16 px / 19,2 px, #F3EEE7 */
  /* 24.09.2026, abends: auf die Masse der Landingpage gebracht (244 x 232),
     damit die Originaltypografie ohne Umrechnung passt. Bei 183 px ragte
     das gesperrte INKLUSIVE rechts aus der Form heraus -- gemessen, nicht
     geschaetzt: Textblock 162 px im nutzbaren Innenraum von 183 px. */
  position: absolute; left: 6.81%; top: 13.83%;
  width: 244px; height: 232px;
  display: grid; place-items: center;
  pointer-events: none;
}
.kieselglas {
  position: absolute; inset: 0;
  border-radius: 50% 50% 44% 56% / 60% 58% 42% 40%;
  background: #3D3733;                       /* Vollton statt Milchglas */
  box-shadow: inset 0 0 0 1px rgba(246,242,234,.07), 0 0 26px -10px rgba(20,17,15,.42);
  animation: kiesel-drehen 28s linear infinite;
}
/* Michael 24.09.2026: "mach ihn aber nicht aufs Glas, das gefaellt mir auch
   nicht." Der backdrop-filter faellt damit weg, der Koerper wird Vollton.
   Die Landingpage hat dort blur(36px) saturate(.65) -- wir ausdruecklich nicht. */
@keyframes kiesel-drehen { from { rotate: 0deg } to { rotate: 360deg } }

.kieseltext {
  /* 1:1 die Framer-Werte, die Michael am 24.09.2026 gezeigt hat:
     Inter Regular, 16 px, Laufweite 0 em, Zeilenhoehe 1,2 em, zentriert.
     (Mein Versuch mit 300/15 px/21 px war falsch und ist zurueckgenommen.) */
  position: relative; margin: 0; width: 100%; padding: 0 14px;
  color: #F6F2EA; text-align: center;
}

/* ---------- Einleitung ----------
   1:1 die Werte der Framer-Startseite, gemessen am gerenderten DOM bei
   1440 px (nicht geschaetzt, nicht aus einer Probedatei):
     Spalte   x 200, Breite 1040   -> beidseitig 200 px Rand
     Kicker   DM Mono 400, 12 px / 19,8 px, Sperrung 1,2 px, #666666
     H1       Cormorant Garamond 300, 49 px / 58,8 px, #6B635F, 24 px unter dem Kicker
     Lauftext Abhaya Libre 400, 18 px / 29,7 px, #6B635F, direkt darunter
     Abstand zum Auftaktbild 267 px
   Michael 23.09.2026: "Eins ist scheisse, das hast du gemacht. Zwei ist gut,
   bau es um." -- Zwei war die Framer-Fassung. */

.einleitung { max-width: 1440px; margin: 0 auto; padding: 128px 200px 0; }
.einleitung .zeile {
  font-family: 'DM Mono', ui-monospace, monospace;
  font-weight: 400; font-size: 12px; line-height: 19.8px; letter-spacing: 1.2px;
  color: #666666; margin: 0;
}
.einleitung h1 {
  font-family: 'Cormorant Garamond', 'Cormorant Ersatz',Georgia, serif;
  font-weight: 300; font-size: 49px; line-height: 58.8px; letter-spacing: normal;
  color: var(--text); max-width: none;
  margin: 24px 0 0;
}
.einleitung .lauf {
  font-size: 18px; line-height: 29.7px; color: var(--text);
  max-width: none;
  /* Abstand H1 -> Lauftext. Die Framer-AUSLIEFERUNG hat hier nur 4 px, die
     Framer-VORSCHAU im Editor rund 90 px -- deshalb drehten wir uns im Kreis.
     Michael 23.09.2026: "Der Abstand passt nicht." Gesetzt auf einen Wert des
     Swiss-Rasters, damit es eine Zahl gibt, an der man drehen kann. */
  margin: var(--abstand-h1, 64px) 0 0;
}

/* ---------- Die zwei versetzten Bilder ---------- */

.versatz {
  padding: var(--a6) var(--rand) 0;
  display: grid; grid-template-columns: 44fr 12fr 44fr; align-items: start;
}
.versatz .links  { grid-column: 1; grid-row: 1; margin-top: var(--a6); }
.versatz .rechts { grid-column: 3; grid-row: 1; }
.versatz img { width: 100%; height: auto; }

/* ---------- Bewertungs-Laufband ----------
   Michael 23.09.2026: "bewegen sich zu schnell von rechts nach links und
   sind viel zu dunkel, vor allem die Logos."
   Tempo 60 s -> 180 s. Logos auf 38 % Deckung. Note auf #706B64. */

.laufband {
  margin-top: var(--a6);
  max-width: var(--breite); margin-inline: auto;
  padding-inline: var(--rand);
}
/* Michael 23.09.2026: "Die Lightshow soll rechts und links auch begrenzt
   sein, genauso breit wie die Bilder." overflow:hidden schneidet am
   Polsterrand ab -- darum ein eigenes Fenster auf der Inhaltsbreite. */
.laufband .fenster { overflow: hidden; }
.laufband .bahn { display: flex; width: max-content; animation: laufen 180s linear infinite; }
.laufband:hover .bahn, .laufband:focus-within .bahn { animation-play-state: paused; }
@keyframes laufen { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.bewertung { width: 564px; flex: 0 0 564px; }
.bewertung .saeule { width: 302px; display: grid; justify-items: center; }
/* Michael 23.09.2026: "Die Logos koennen ein kleines bisschen kraeftiger
   sein." 0,38 -> 0,46. Mehr nicht: am 23.09. hatte er sie als "viel zu
   dunkel" beanstandet, das war 1,0. */
.bewertung .zeichen { height: 60px; display: grid; align-content: center; opacity: .46; }
.bewertung .zeichen img { width: auto; background: none; }
/* lp-stil.css setzt img{background:#E6DFD4} als Platzhalter fuers Nachladen.
   Bei den freigestellten Logo-PNGs wird daraus ein sichtbarer Kasten --
   Michael 23.09.2026: "entferne die Rahmen um die Logos". */
.bewertung .zeichen.google img       { height: 31px; }
.bewertung .zeichen.holidaycheck img { height: 48px; }
.bewertung .zeichen.tripadvisor img  { height: 60px; }
.bewertung .zeichen.booking img      { height: 33px; }
.bewertung blockquote {
  margin: var(--a3) 0 0; width: 302px; text-align: left;
  font-size: 14px; line-height: 1.65; color: var(--text);
}
.bewertung .note {
  margin: var(--a2) 0 0; width: 240px; text-align: center;
  font-family: Inter, system-ui, sans-serif;
  font-size: 13px; line-height: 1.2; color: var(--leise);
}

/* ---------- Presse-Zeile aus der Framer-Seite entfaellt ---------- */

/* Damit die feste Leiste den Fussbereich nicht verdeckt */
.fuss { padding-bottom: 180px; }


/* ---------- Fussbereich ----------
   Michael 23.09.2026: "Zwei sehr schoene ausbalancierte Viererbloecke,
   zwei Zeilen mit vier Spalten. Am Schluss das Logo mit der Typografie."
   Die Breite ist dieselbe wie bei jeder Bildreihe (max-width 1435, Rand 40). */

.fuss { padding-bottom: 180px; }
.fussinhalt { font-family: 'Abhaya Libre', 'Abhaya Ersatz',Georgia, serif; }

.fussraster {
  /* Michael 23.09.2026: "Warum ist in der dritten Spalte so viel Abstand?"
     Die vierte Spalte war 1 fr breit, ihr Inhalt aber schmal und nach rechts
     geschoben -- daraus wurde eine Luecke von rund 335 px.
     Jetzt bekommt sie nur die Breite ihres Inhalts (auto), die ersten drei
     teilen sich den Rest. Damit sind alle Rinnen 40 px UND die laengste
     Zeile endet weiter auf der rechten Bildkante. */
  display: grid; grid-template-columns: repeat(3, 1fr) auto; gap: var(--a4);
  text-align: left;   /* lp-stil.css zentriert seinen Fuss -- hier nicht:
                         der Block soll mit den Bildkanten abschliessen */
}
.fussblock h2 {
  font-size: 13px; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase;
  color: #8A857D; font-weight: 400;
  /* Michael 23.09.2026: "Korrigiere den Abstand zwischen allen Bloecken."
     Die Rinnen sind 40 px, waagrecht wie senkrecht. Falsch war der Abstand
     INNEN: Ueberschrift -> erste Zeile stand auf 16 px, das ergab einen
     Grundlinienabstand von 40 px gegen 24 px in der Liste -- die Ueberschrift
     schwebte. Mit 8 px sind es 32 px, also weiter auf dem Achter-Raster. */
  margin: 0 0 var(--a1);
}
.fussblock h2.leer { visibility: hidden; }
.fussblock ul { list-style: none; margin: 0; padding: 0; }
/* Michael 23.09.2026: "Footer-Schrift 3 Punkt kleiner." 17 px -> 14 px.
   Die Spaltenueberschriften bleiben bei 13 px -- drei Punkte weniger waeren
   10 px und damit unter der Lesbarkeitsgrenze. */
.fussblock li { font-size: 14px; line-height: 1.7; color: var(--text); }
.fussblock li a { color: var(--text); }
.fussblock li a:hover { color: var(--tinte); }

/* Nur das Signet (Michael 23.09.2026), Strich 5 statt 4. */
.fuss .zeichen { display: grid; place-items: center; margin-top: var(--a6); }
.fuss .zeichen a { display: block; color: var(--tinte); }
.fuss .signet { display: block; width: 96px; height: auto; }

.fuss .copy { text-align: center; margin: var(--a4) 0 0; font-size: 13px; color: var(--text); }
.fuss .cookieknopf {
  display: block; margin: var(--a3) auto 0;
  font-size: 13px; color: var(--text); background: none; border: 0; cursor: pointer;
  text-decoration: underline; text-underline-offset: 3px;
}

/* ---------- Tablet ---------- */

@media (max-width: 1100px) {
  .einleitung { padding-inline: 96px; }
  .einleitung h1 { font-size: 40px; line-height: 48px; }
  .fussraster { grid-template-columns: repeat(2, 1fr); }
  .versatz { grid-template-columns: 1fr; gap: var(--a3); }
  .versatz .links, .versatz .rechts { grid-column: 1; grid-row: auto; margin-top: 0;
    margin-inline: calc(var(--rand) * -1); }   /* randlos am Handy, 28.09.2026 */
}

/* ---------- Handy ---------- */

@media (max-width: 809px) {
  .kopf { height: 88px; }
  .wortmarke { font-size: 21px; }
  .sprache { font-size: 12px; }
  .menue { inset: 88px 0 auto 0; padding: var(--a4) var(--rand); }

  .auftakt-bild .bildkasten { aspect-ratio: 350 / 500; margin-inline: calc(var(--rand) * -1); }

  .fussraster { grid-template-columns: 1fr; gap: var(--a4); }
  .fuss .signet { width: 80px; }
  .einleitung { padding: 120px var(--rand) 0; }
  .einleitung h1 { font-size: 31px; line-height: 37.2px; }
  .versatz { padding-top: 80px; }
  .laufband { margin-top: 80px; }

  .bewertung { width: 320px; flex-basis: 320px; }
  .bewertung .saeule, .bewertung blockquote { width: 280px; }
  .bewertung .note { width: 240px; }

}

/* ---------- Ganz schmal (ab 320 px) ----------
   Die Bewertungszahlen der Landingpage stehen dort noch zweispaltig und
   ragen 20 px hinaus (Regel 9, gemessen mit rand-320-messen.mjs). */
@media (max-width: 400px) {
  .bewertungen { grid-template-columns: 1fr; row-gap: 28px; }
}

/* ---------- Zimmergleis: runde Pfeile auf den Bildern ----------
   Michael 23.09.2026: "Hier fehlen die Buttons zum Weiterleiten nach rechts
   und nach links." Die Prev/Next-Zeile der Landingpage bleibt zusaetzlich.
   Die Hoehe setzt seite.js aus dem ersten Kartenbild -- die Karten sind je
   Haltepunkt verschieden breit, ein fester Wert waere bei jeder Breite falsch. */

.gleisrahmen { position: relative; }

.gleispfeil {
  position: absolute; top: var(--pfeilhoehe, 280px); z-index: 5;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(61,55,51,.5);
  display: grid; place-content: center;
  border: 0; cursor: pointer;
  backdrop-filter: blur(6px);
  transition: background .2s, opacity .2s;
}
.gleispfeil:hover { background: rgba(61,55,51,.82); }
.gleispfeil:disabled { opacity: 0; pointer-events: none; }
.gleispfeil.zurueck { left: 24px; }
.gleispfeil.vor     { right: 24px; }

@media (max-width: 809px) {
  .gleispfeil { width: 38px; height: 38px; }
  .gleispfeil.zurueck { left: 12px; }
  .gleispfeil.vor     { right: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .kieselglas { animation: none; }
}

/* ---------- Schieber unter dem Zimmergleis ----------
   Michael 23.09.2026: der Balken der Framer-Seite statt Prev/Next.
   Die Knoepfe bleiben im Markup (buchen.js greift ohne Pruefung darauf zu)
   und sind nur ausgeblendet -- geblaettert wird mit den runden Pfeilen. */

.gleissteuerung { gap: var(--a3); margin-top: var(--a4); }
.gleissteuerung button { display: none; }
.gleissteuerung .spur { flex: 1; height: 1px; background: rgba(61,55,51,.18); }
.gleissteuerung .laeufer { height: 1px; background: var(--tinte); }
.gleiszaehler {
  flex: 0 0 auto;
  font-family: 'Abhaya Libre', 'Abhaya Ersatz',Georgia, serif;
  font-size: 18px; line-height: 1.66; color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ---------- Zimmerkarten: Typografie der Framer-Seite ----------
   Michael 23.09.2026: "Aendere die Typografie unterhalb der
   Zimmerkategorien, dort ist die schoenere." Gemeint ist der Satz der
   Framer-Startseite. Gemessen dort (1440 px):
     Titel     Cormorant Garamond 300, 22 px / 28,6 px, #4A4A45
     Text      Abhaya Libre 400, 18 px / 29,88 px, #6B635F
     Merkmal   Abhaya Libre 400, 18 px / 29,88 px
   Die Landingpage setzt Titel in Abhaya 17 px und den Preis halbfett --
   das wird hier ueberschrieben. Inhalt bleibt unveraendert. */

.gleis .karte { gap: 0; }
.gleis .kzeile { align-items: baseline; padding-top: 46px; }
.gleis .kzeile h3 {
  font-family: 'Cormorant Garamond', 'Cormorant Ersatz',Georgia, serif;
  font-weight: 300; font-size: 22px; line-height: 28.6px;
  color: #4A4A45; letter-spacing: 0;
}
.gleis .kmass {
  font-family: 'Abhaya Libre', 'Abhaya Ersatz',Georgia, serif;
  font-size: 16px; line-height: 28.6px; color: var(--grau);
}
.gleis .klinie { margin-top: 16px; background: rgba(61,55,51,.14); }
.gleis .kpreis {
  font-weight: 400; font-size: 17px; line-height: 1.66;
  color: var(--grau); margin-top: 14px;
}
.gleis .ktext {
  font-size: 18px; line-height: 29.88px; color: var(--text); margin-top: 12px;
}

@media (max-width: 809px) {
  .gleis .kzeile { padding-top: 28px; }
  .gleis .kzeile h3 { font-size: 20px; line-height: 26px; }
  .gleis .ktext { font-size: 17px; line-height: 1.66; }
}

/* ---------- Zeilenlaenge ----------
   Michael 23.09.2026: "Die Zeilen sind zu lang, das geht nicht. Immer wenn
   die Zeile zu lang ist, machst du einen Umbruch. Es schaut nicht elegant
   und luxurioes aus."
   Zwei Mittel statt harter <br>:
     text-wrap: balance   gleicht die Zeilen eines kurzen Absatzes an --
                          keine volle Zeile mit einem Wort darunter
     max-width in em      begrenzt das Satzmass auf rund 45 Zeichen,
                          statt die Karte bis zur Kante zu fuellen */

.gleis .kzeile h3 { text-wrap: balance; }
.gleis .ktext {
  max-width: 22em;          /* ~ 45 Zeichen bei 18 px Abhaya Libre */
  text-wrap: balance;
  hyphens: none;
}
.gleis .kpreis, .gleis .kmass { text-wrap: nowrap; }

/* Dieselbe Regel fuer die Ueberschriften und kurzen Absaetze der Abschnitte */
.abschnitt h2, .kopf1 h2, .kopf2 h2 { text-wrap: balance; }
.leitsatz, .einleitung h1 { text-wrap: balance; }
.lauf, .einleitung .lauf { text-wrap: pretty; }

/* ---------- Fuss: linke und rechte Kante ----------
   Michael 23.09.2026: "Links soll die Schrift mit dem oberen Bild vertikal
   abschliessen. Rechts soll der letzte Buchstabe des laengsten Wortes
   ebenfalls mit dem oberen Bild abschliessen -- das N von Buchen."
   Spalte 1 steht ohnehin auf der Bildkante. Spalte 4 wird rechtsbuendig,
   damit ihre laengste Zeile genau auf der rechten Bildkante endet. */

/* Die vierte Spalte: Info und Folgen stehen in EINER Huelle.
   Die Huelle schrumpft auf ihre breiteste Zeile ("Verfuegbarkeit und Buchen")
   und wird an den rechten Rasterrand gestellt. Damit endet die laengste Zeile
   auf der rechten Bildkante (1398) UND beide Bloecke haben dieselbe linke
   Kante, stehen also untereinander. Der Text bleibt linksbuendig.
   Michael 23.09.2026: links war gut, rechts fehlte der Abschluss. */
.fussspalte {
  grid-column: 4; grid-row: 1 / 3;
  justify-self: end;
  display: grid; align-content: start; gap: var(--a4);
  text-align: left;
}

/* Michael 23.09.2026: "Bildunterschriften alle um zwei Punkt kleiner."
   lp-stil.css setzt .mikro und figcaption auf 12 px -> 10 px. */
figcaption { font-size: 10px; }

/* Michael 23.09.2026: "Zentriere diesen Bereich." — die vier Bewertungszahlen
   im Abschnitt buchen. Nur die Ausrichtung, sonst nichts. */
.bewertungen .bw { align-items: center; text-align: center; }

/* ---------- Zimmer-Kopf, Fassung A "Zeitungskopf" ----------
   Michael 23.09.2026, aus drei Vorschlaegen gewaehlt.
   12 Spalten auf der Inhaltsbreite, Rinne 40 px. */

/* Michael 23.09.2026: "Bild eins gleich anordnen wie Bild zwei im Zentrum."
   Also dieselbe Spalte wie die Einleitung: 160 px zusaetzlich nach innen,
   damit der Satzspiegel bei x 203 beginnt und 1035 breit ist -- gemessen an
   der Einleitung. Der Satz steht einspaltig ueber die volle Spaltenbreite. */
.zimmerkopf {
  display: grid; grid-template-columns: 1fr;
  padding-inline: 160px;
}
.zimmerkopf h2 {
  margin: 0;
  font-family: 'Cormorant Garamond', 'Cormorant Ersatz',Georgia, serif;
  font-weight: 300; font-size: 34px; line-height: 1.22; letter-spacing: -.012em;
  color: var(--tinte);
}
/* Zwei echte Rasterspalten statt column-count. Mit column-count startet die
   zweite Spalte eine Zeile tiefer, weil der Abstand zwischen den Absaetzen
   an den Spaltenkopf rutscht. Michael 23.09.2026: "gleiche Hoehe, Swiss Grid."
   Im Raster beginnen beide Spalten auf derselben Grundlinie. */
.zimmerkopf .satz {
  /* Michael 23.09.2026: "Pass den Abstand an." Derselbe Wert wie zwischen
     H1 und Fliesstext in der Einleitung -- eine Stellschraube fuer beide. */
  margin-top: var(--abstand-h1, 64px);
  display: grid; grid-template-columns: 1fr; row-gap: 1.7em;
}
.zimmerkopf .satz p { font-size: 16px; line-height: 1.7; color: var(--text); margin: 0; }

@media (max-width: 809px) {
  .zimmerkopf { padding-inline: 0; }
  .zimmerkopf h2 { font-size: 26px; }
  .zimmerkopf .satz { margin-top: 24px; }
}

/* ---------- Haeufige Fragen ----------
   Michael 23.09.2026: der Block der Framer-Seite statt "Was im Preis steckt".
   An der Framer-Auslieferung gemessen (1440 px):
     Spalte   x 148 bis 1292 (1144 breit)
     Frage    Cormorant Garamond 300, 20 px / 26 px, Sperrung 0,4 px, #6B635F
     Zeile    Haarlinie unter jeder Frage, Zeilenabstand 88 px
     Zeichen  Plus, 20 x 20 px, rechts */

.fragen .fragenliste { width: 100%; max-width: 1144px; margin-inline: auto; }
.fragen details { border-bottom: 1px solid var(--linie); }
.fragen summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--a3);
  padding: 26px 8px;
}
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary h3 {
  flex: 1; margin: 0;
  font-family: 'Cormorant Garamond', 'Cormorant Ersatz',Georgia, serif;
  font-weight: 300; font-size: 20px; line-height: 26px; letter-spacing: .4px;
  color: var(--text);
}
.fragen summary .zeichen { position: relative; width: 20px; height: 20px; flex: 0 0 20px; }
.fragen summary .zeichen::before, .fragen summary .zeichen::after {
  content: ''; position: absolute; background: var(--text); inset: 9px 0 auto; height: 2px;
}
.fragen summary .zeichen::after { transform: rotate(90deg); transition: transform .25s, opacity .25s; }
.fragen details[open] summary .zeichen::after { transform: rotate(0); opacity: 0; }
.fragen .antwort {
  margin: 0 8px 26px; max-width: 760px;
  font-size: 17px; line-height: 1.66; color: var(--tinte);
}

@media (max-width: 809px) {
  .fragen summary { padding: 20px 0; }
  .fragen summary h3 { font-size: 18px; }
  .fragen .antwort { margin-inline: 0; }
}

/* Michael 23.09.2026: "Mach so viel Abstand nach unten zum Bild" --
   gezeigt hat er den Abstand der Einleitung zu ihrem Bild: 133 px.
   row-gap 144 ergibt gemessen dieselben 133 px (die Differenz ist der
   Unterlaengenraum der letzten Textzeile). */
#zimmer { row-gap: 144px; }


/* ---------- Schmale Fenster: die vierte Fussspalte aufloesen ----------
   Michael-unabhaengiger Messfund vom 23.09.2026:
   werkzeug/rand-320-messen.mjs meldete bei 320 px "scrollWidth=492
   (172 px zuviel), Taeter: 36". Ursache: .fussspalte verlangt grid-column 4.
   Im schmalen Raster gibt es nur EINE Spalte, also legte das Raster drei
   leere Spalten dazu und der Fuss wurde 492 px breit.
   Das Zuruecksetzen muss ganz unten stehen: Medienabfragen erhoehen die
   Spezifitaet nicht, und die Grundregel .fussspalte steht weiter oben im
   selben Blatt -- weiter oben eingefuegt blieb sie wirkungslos. */
@media (max-width: 1100px) {
  .fussspalte { grid-column: auto; grid-row: auto; justify-self: stretch; }
}

/* ---------- Drittelraster unter dem Kinderblock ----------
   Michael 23.09.2026: "Mach darunter linke Seite 1/3 und rechte Seite 2/3
   Container." 1355 Inhalt = 1/3 + 24 Rinne + 2/3, also 443,7 und 887,3.
   Der Versatz nach oben ist derselbe wie zwischen zwei Bildreihen (-40),
   damit der Block auf demselben Achter-Raster sitzt wie alles darueber. */
.drittelreihe {
  display: grid; grid-template-columns: 1fr 2fr; gap: var(--a3);
  align-items: start; margin-top: -40px;
}
.drittelreihe figure { margin: 0; }
.drittelreihe img { width: 100%; height: auto; display: block; }
@media (max-width: 809px) {
  .drittelreihe { grid-template-columns: 1fr; gap: var(--a4); margin-top: 0; }
}

/* ---------- Markierte Textstellen ----------
   Michael 23.09.2026: "Wenn ich es markiere, soll es nicht braun sein,
   sondern ein leichtes schoenes Beige."
   Ohne eigene Regel nimmt der Browser sein Systemblau -- das ist der
   einzige Fleck auf der Seite, der nicht aus der Hauspalette kommt.
   #E6DDCD liegt zwischen --linie (#DDD5C9) und --grund (#F3EEE7), also
   im warmen Papierton. Schrift bleibt --tinte: 8,9:1 Kontrast. */
::selection      { background: #E6DDCD; color: var(--tinte); }
::-moz-selection { background: #E6DDCD; color: var(--tinte); }

/* ---------- Zimmergleis: Fassung A3 ----------
   Michael 23.09.2026 aus vier Anschnitten gewaehlt: "A3 ist ganz gut."
   Zwei ganze Zimmer stehen auf 600 px, das angeschnittene Viertel liegt
   im rechten Seitenrand statt im Satzspiegel. Dafuer laeuft das Gleis
   ueber die Inhaltsbreite hinaus bis an den Fensterrand -- 50 % ist die
   halbe Gleisbreite, 50vw das halbe Fenster.
   Das Polster rechts haelt den Anschlag beim Durchscrollen auf dem
   Seitenrand, sonst klebt die letzte Karte an der Fensterkante. */
@media (min-width: 1101px) {
  /* Michael 24.09.2026: "Druck eine Spur nach links, das ist zu weit
     draussen, sieht angeklebt aus." Gemessen bei 1440: alles andere endet
     auf 1398, nur das Gleis lief bis 1440, also bis an die Fensterkante.
     Jetzt Karte 590 statt 600 und Deckel 1375 (590 + 24 + 590 + 24 + 147).
     Rechte Kante 1418, damit 22 px Luft zum Fenster -- und der Anschnitt
     bleibt bei einem Viertel. */
  #zimmer .karte { flex: 0 0 590px; }
  /* Bei 1920 px waere der Anschnitt sonst kein Viertel mehr, sondern 65 %
     (gemessen 23.09.2026). Der Deckel haelt ihn: 600 + 24 + 600 + 24 + 150
     = 1398 px, also genau zwei ganze Karten und ein Viertel. */
  /* Die 22 px Luft muessen bei JEDER Breite bleiben. Ohne den Zuschlag
     klebte das Gleis bei 1280 wieder an der Kante (gemessen: Luft 0). */
  #zimmer .gleis { margin-right: calc(50% - 50vw + 22px); max-width: 1375px;
                   padding-right: var(--rand, 40px); }
  #zimmer .gleispfeil.vor { right: 64px; }
}


/* ---------- Zimmerkopf: der Satz auf drei Zeilen ----------
   Michael 24.09.2026: "3 Zeilen."
   Gemessen: 305 Zeichen liefen auf 1035 px in ZWEI Zeilen, also rund
   152 Zeichen je Zeile. Gemessen wurde danach die Zeilenzahl fuer jede
   Breite von 700 bis 920 px: ueberall genau drei Zeilen, bei 690 px
   waren es vier. 800 px liegt in der Mitte dieses Bandes, also weit weg
   von beiden Kanten. */
.zimmerkopf .satz p { max-width: 800px; }

/* ---------- Datum im Buchungsformular und in der Tafel ----------
   Michael 24.09.2026: "Die Schrift vom Datum eine Spur heller."
   Gemessen stand es auf #3A342F, derselbe Wert wie die Unterlinie.
   Jetzt #5C554F (--text2 der Hausfarben), ein Schritt heller. Kontrast
   auf #F3EEE7 bleibt bei 7,6:1, also weit ueber der Grenze. */
.buchform .feldknopf,
.buchform input,
.cg-datblock .cg-dat-in { color: #5C554F; }

/* ---------- Schieberzeile naeher an die Zimmerkarten ----------
   Michael 24.09.2026: "Etwas zu viel Abstand in jedem Breakpoint."
   Gemessen bei 390, 810 und 1440: ueberall 184 px zwischen Kartentext und
   der Zeile "01 / 11". Die setzen sich zusammen aus row-gap 144 des
   Abschnitts und margin-top 40 der Zeile. Der grosse Abstand gehoert
   zwischen die BLOECKE, nicht zwischen Gleis und seine eigene Bedienzeile.
   Der Zug nach oben nimmt den row-gap heraus, uebrig bleiben 40 px. */
/* Der Zug nach oben muss GENAU den row-gap aufheben. Stand er fest auf
   144, waehrend der Abschnitt 64 hatte, zog er die Schieberzeile 104 px
   in den Kartentext hinein (gemessen 24.09.2026, Fassung 2). Darum
   beide aus derselben Variablen. */
#zimmer { --zgap: 144px; row-gap: var(--zgap); }
#zimmer .gleissteuerung { margin-top: calc(var(--a4) - var(--zgap)); }

/* ---------- Wortmarke im Kopf eine Stufe duenner ----------
   Michael 24.09.2026: "Die Schrift etwas duenner."
   Oswald 300 war bisher der leichteste vorhandene Schnitt. Oswald 200 ist
   jetzt mitgeliefert (selbst gehostet, 7,5 KB, keine Verbindung zu Google).
   Regel 22 bleibt: Logo-artiges ist Oswald, nur der Schnitt wird leichter. */
.wortmarke { font-weight: 200; }

/* ---------- Tafel: mehr Abhebung, Seite bleibt scrollbar ----------
   Michael 24.09.2026: "Etwas mehr Schatten. Oder den Hintergrund etwas
   dunkler. Aber scrollbar bleiben."
   Beides, je zur Haelfte: der Schleier geht von 0,42 auf 0,58, der Schatten
   wird tiefer statt breiter. Der Schleier liegt auf position:fixed und
   nimmt der Seite kein Scrollen -- kein overflow:hidden am body, damit
   bleibt es scrollbar. */
/* probe-tafel-milchglas.css setzt "body[data-ptf] .gbt-schleier" auf
   transparent und ist damit spezifischer. Ohne denselben Vorsatz bleibt
   der Schleier unsichtbar (gemessen: rgba(0,0,0,0)). */
body[data-ptf] .gbt-schleier, .gbt-schleier { background: rgba(38,34,30,.58); }

/* Michael 24.09.2026: "Wenn ich den Chatbot oeffne, warum diese Verdunklung
   bei der Belegung?" Der Chat bringt einen EIGENEN Schleier mit (0,42).
   Steht die Tafel schon offen, liegt deren Schleier bereits darunter -- der
   zweite verdunkelt nur noch den Kalender. Solange die Tafel offen ist,
   bleibt der Chat-Schleier deshalb aus. */
html.cg-tafel .gc-schleier { background: transparent; }
.gbt-tafel {
  box-shadow: 0 60px 140px -40px rgba(24,21,19,.62),
              0 18px 48px -18px rgba(24,21,19,.34),
              0 0 0 1px rgba(38,34,30,.06);
}

/* ---------- Auf- und Zugehen der Tafel ----------
   Michael 24.09.2026: "Mach den Effekt mit dem Dunklerwerden etwas
   schoener. Nicht kaputt. Was macht ihr Emil Kowalski."

   Nach Emil Kowalskis Regeln, Punkt fuer Punkt:
   1. Eintritt und Austritt sind VERSCHIEDEN lang. Eintritt darf Zeit
      haben (320 ms), Austritt muss schnell sein (180 ms) -- sonst fuehlt
      sich Schliessen traege an.
   2. ease-out beim Eintritt, und zwar eine EIGENE Kurve. Die eingebauten
      sind zu schwach: cubic-bezier(.23,1,.32,1).
   3. Nie aus scale(0). Wir starten bei .97, das ist schon sichtbar.
   4. Nur transform und opacity bewegen -- beides laeuft auf der GPU.
   5. Unschaerfe maskiert den Uebergang: der Schleier faehrt seinen Blur
      von 0 auf 8 px mit. Unter 20 px bleiben, sonst wird Safari teuer.
   6. CSS-Transitions statt Keyframes: sie lassen sich mitten in der
      Bewegung umdrehen, wenn jemand schnell zu- und wieder aufmacht.
   7. Wer Bewegung abbestellt hat, bekommt nur noch die Deckkraft. */
body[data-ptf] .gbt-schleier, .gbt-schleier {
  transition: opacity 180ms cubic-bezier(.4,0,1,1),
              -webkit-backdrop-filter 180ms cubic-bezier(.4,0,1,1),
              backdrop-filter 180ms cubic-bezier(.4,0,1,1);
  -webkit-backdrop-filter: blur(0px); backdrop-filter: blur(0px);
}
body[data-ptf] .gbt-schleier.da, .gbt-schleier.da {
  transition: opacity 320ms cubic-bezier(.23,1,.32,1),
              -webkit-backdrop-filter 320ms cubic-bezier(.23,1,.32,1),
              backdrop-filter 320ms cubic-bezier(.23,1,.32,1);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body[data-ptf] .gbt-tafel, .gbt-tafel {
  transform: translate(-50%,-50%) translateY(10px) scale(.97);
  transition: opacity 180ms cubic-bezier(.4,0,1,1),
              transform 180ms cubic-bezier(.4,0,1,1);
}
body[data-ptf] .gbt-tafel.da, .gbt-tafel.da {
  transform: translate(-50%,-50%) translateY(0) scale(1);
  transition: opacity 320ms cubic-bezier(.23,1,.32,1),
              transform 320ms cubic-bezier(.23,1,.32,1);
}
@media (prefers-reduced-motion: reduce) {
  .gbt-schleier, .gbt-schleier.da, .gbt-tafel, .gbt-tafel.da {
    transition: opacity 120ms linear !important; transform: translate(-50%,-50%) !important;
  }
  .gbt-schleier, .gbt-schleier.da { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* ---------- Eingabetext im Chat so gross wie der Platzhalter ----------
   Michael 24.09.2026: "Der Eingabetext ist zu klein, soll so gross sein
   wie in Abbildung zwei."
   Gemessen: Platzhalter 16 px / 1,6 px Sperrung, getippter Text nur
   10 px / 1,2 px. Die 10 px stammen aus einer Regel vom 20.09.2026 mit
   !important, die den Platzhalter auf EINE Zeile zwingen sollte -- sie
   traf aber den ganzen Textbereich mit. Der Platzhalter bleibt einzeilig,
   dafuer sorgt die Auslassungsregel daneben, nicht die Schriftgroesse. */
html[data-chat][data-eingabe] .gc-fenster .gc-feld textarea {
  /* Michael 24.09.2026, zweiter Anlauf: "Die Schrift ist immer noch zu
     klein." 16 px stimmten zwar mit dem Platzhalter ueberein, wirken in
     DM Mono mit Versalien und weiter Sperrung aber kleiner als der
     Fliesstext daneben (Abhaya Libre 17 px). Jetzt 18 / 26 px, und die
     Sperrung von .1em auf .06em, damit die Zeile nicht laenger wird. */
  /* Michael 24.09.2026, dritter Anlauf: "Die Schrift um zwei Punkt
     kleiner." 18 -> 16 px, Zeile 26 -> 24. */
  font-size: 16px !important;
  letter-spacing: .06em !important;
  line-height: 24px !important;
}
html[data-chat][data-eingabe] .gc-fenster .gc-feld textarea::placeholder {
  font-size: 16px; letter-spacing: .06em;
}

/* ---------- Kieseltypografie nach Michaels Abbildung zwei ----------
   Michael 24.09.2026: "Ersetze die Typografie von Bild eins mit der von
   Bild zwei, setze sie genau uebereinander und miss sie aus."

   Ausgemessen wurden die zwei Bildschirmfotos selbst (Pixel, nicht
   geschaetzt): der Kiesel ueber seine dunkle Flaeche, die Schrift ueber
   die hellen Pixel INNERHALB dieser Flaeche.

     Bild 1   Kiesel 381 px   Buchstabenhoehe 25   Zeilenabstand 38,7
     Bild 2   Kiesel 350 px   Buchstabenhoehe 20   Zeilenabstand 30,7

   Auf die Kieselbreite bezogen:
     Buchstabenhoehe  0,0656 gegen 0,0571   ->  Faktor 0,870
     Zeilenabstand    0,1015 gegen 0,0876   ->  Faktor 0,863

   Das Verhaeltnis Zeilenabstand zu Buchstabenhoehe ist in beiden gleich
   (1,548 und 1,535) -- es ist also dieselbe Schrift, nur kleiner gesetzt.
   Bei 183 px Kiesel heisst das: 16 x 0,870 = 13,9 -> 14 px, und
   0,0876 x 183 = 16,0 px Zeilenabstand.
   Die Schriftfarbe misst in Bild 2 heller (254 gegen 247 im Kern), darum
   #F6F2EA statt #F3EEE7 -- beides Hausfarben, ein Schritt heller.

   Gegenprobe am GERENDERTEN Kiesel, mit demselben Pixelverfahren wie an
   den Vorlagen: Zeilenabstand traf auf 0,2 Prozent, die Buchstaben waren
   noch 4,4 Prozent zu gross. 14 x 0,956 = 13,4 -> 13,5 px. */
/* UEBERHOLT AM 24.09.2026, abends. Michael hat den Kiesel der Landingpage
   gezeigt und gesagt "bau den Kiesel ein auf der Home-Seite". Damit gilt
   nicht mehr die Rechnung oben, sondern der GEMESSENE Stand der Landingpage
   (.ssc-n / .ssc-i am gerenderten DOM von wandern.hotel-gebhard.at, 1440 px):
     Kasten     244 x 232
     Oberzeile  DM Mono 400, 11 px / 19 px, Sperrung 2,64 px  = 0,24 em
     Unterzeile Cormorant Garamond 400, 18 px / 18 px, 7,2 px = 0,40 em
     beide Versalien, Farbe #F6F2EA, dazwischen ein senkrechter Strich
   Unser Kiesel ist 183 px statt 244, Faktor 0,75. Die Groessen sind damit
   umgerechnet und auf halbe Pixel gerundet. */
.kieseltext { width: auto; text-align: center; color: #F6F2EA; }
.kieseltext .kn {
  display: block; font-family: "DM Mono", ui-monospace, monospace; font-weight: 400;
  font-size: 11px; line-height: 19px; letter-spacing: 2.64px; text-indent: 2.64px;
  text-transform: uppercase;
}
.kieseltext .kstrich {
  display: block; width: 1px; height: 16px; margin: 11px auto 10px;
  background: rgba(246,242,234,.55);
}
.kieseltext .ki {
  /* Die Landingpage meldet Gewicht 400. Dieses Projekt laedt von Cormorant
     Garamond nur den Schnitt 300 -- mit 400 rechnet der Browser einen
     kuenstlich breiteren Satz, gemessen 154 px statt der 150 px, die der
     Kiesel am Handy breit ist. Darum 300. */
  display: block; font-family: "Cormorant Garamond", 'Cormorant Ersatz',Georgia, serif; font-weight: 300;
  font-size: 18px; line-height: 18px; letter-spacing: 7.2px; text-indent: 7.2px;
  text-transform: uppercase;
}

/* =====================================================================
   Kalendertafel auf dem Swiss Grid, DM Mono
   Michael 24.09.2026: "Übernimm die" (probe-tafel-mono.html).
   Die Probe steht in probe-tafel-inter.css und probe-tafel-mono.html,
   gemessen: Zelle 40, sieben Tage 280, Rinne 40, Zeile 56, Polster 72.
   Hier werden dieselben Zahlen auf das ECHTE Bauteil gelegt. Sicherung
   davor: kopf.css.vor-monoraster, chat-glas.css.vor-monoraster.
   ===================================================================== */
@media (min-width: 1024px) {
  html[data-swiss] .gbt-tafel[data-form="breit"] {
    --e: 8px; --zelle: 40px; --spalte: 280px; --rinne: 40px;
    width: calc(3 * var(--spalte) + 2 * var(--rinne) + 2 * 72px);
    font-family: 'DM Mono', ui-monospace, monospace;
  }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-kopf,
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-rumpf { padding-inline: 72px; }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-kopf { padding-block: 72px 40px; }

  /* Kalenderblock 2 x 280 + Rinne, Belegung 280 */
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-satz {
    display: grid;
    grid-template-columns: calc(2 * var(--spalte) + var(--rinne)) var(--spalte);
    column-gap: var(--rinne);
  }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-gitter,
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-kalkopf {
    grid-template-columns: repeat(7, var(--zelle)); width: var(--spalte);
  }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-gitter button {
    width: var(--zelle); height: var(--zelle);
    font: 300 14px/var(--zelle) 'DM Mono', ui-monospace, monospace;
  }
  /* Schriftstufen wie in der Probe */
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-kopf h2 {
    font: 300 15px/24px 'DM Mono', ui-monospace, monospace;
    letter-spacing: .16em; text-transform: uppercase;
  }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-kalkopf span,
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-monat {
    font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-zeile > span:first-child {
    font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  }
  html[data-swiss] .gbt-tafel[data-form="breit"] .cg-dat-l { font-size: 10px; letter-spacing: .16em; }
  html[data-swiss] .gbt-tafel[data-form="breit"] .cg-dat-in { font-size: 16px; }
  html[data-swiss] .gbt-tafel[data-form="breit"] .gbt-knopf {
    font-size: 11px; letter-spacing: .16em; height: 56px;
  }
  /* Der Chatknopf: gleicher Grund wie der Knopf, getrennt durch eine
     Haarlinie -- nicht dunkler, sonst wirkt er wie ein zweites Feld. */
  html[data-swiss] .gbt-tafel[data-form="breit"] .cg-ruf-fuss {
    background: #3D3733; border-left: 1px solid rgba(246,242,234,.22);
    height: 56px; width: 56px;
  }
}

/* ===== Kiesel am Handy -- MUSS GANZ UNTEN STEHEN =====================
   Gemessen am 24.09.2026: bei 390 px rechnete der Browser trotzdem mit
   18 px Schrift. Grund ist nicht der Media Query, sondern die Reihenfolge:
   ein @media erhoeht die Spezifitaet NICHT, und die Desktop-Regeln fuer
   .kieseltext .ki stehen weiter unten in dieser Datei. Derselbe Fehler wie
   bei .fussspalte am 23.09.2026. Darum stehen die Handywerte hier am Ende.
   Werte von der Landingpage bei 390 px abgelesen:
     Kasten 150 x 143, Oberzeile 9/14 sperr 1,62, Unterzeile 12,5 sperr 3,75
   ===================================================================== */
@media (max-width: 760px) {
  /* Zentriert ueber left, NICHT ueber transform: die Kiesel-Parallaxe in
     eintritt-home.js schreibt selbst auf transform und haette ein
     translateX(-50%) ueberschrieben -- gemessen am 24.09.2026, der Kiesel
     stand danach bei x=175 statt x=120 in einem 390 px breiten Bild. */
  .kiesel { left: calc(50% - 75px); top: 12%; width: 150px; height: 143px; }
  .kieseltext { padding: 0 6px; }
  .kieseltext .kn { font-size: 9px; line-height: 14px; letter-spacing: 1.62px; text-indent: 1.62px; }
  .kieseltext .kstrich { height: 12px; margin: 8px auto 7px; }
  .kieseltext .ki { font-size: 12.5px; line-height: 12.5px; letter-spacing: 3.75px; text-indent: 3.75px; }
}

/* ===== Chatfenster an die Textkante, nicht an den Fensterrand ==========
   Michael 25.09.2026: "Der Chatbot ist zu weit an der rechten Seite. Setz
   ihn etwas mehr links, er ist ganz drueben, das schaut nicht so gut aus."
   Gemessen war er mit 24 px am Fensterrand -- der Seiteninhalt endet aber
   schon frueher, bei 1440 px Fenster naemlich bei 1397. Deshalb wird der
   Abstand jetzt aus dem SATZSPIEGEL gerechnet statt aus dem Fenster:
     rechts = (100vw - 1435) / 2 + 80
   Erster Anlauf endete genau auf der Satzspiegelkante (+40) -- gemessen nur
   43 px statt 24 px bei 1440, also kaum ein Unterschied. Mit +80 sind es
   83 px, das ist sichtbar weg vom Rand, ohne dass das Fenster in die Mitte
   rutscht. Unter 1435 px greift der Mindestwert 40 px.
   Der Selektor ist derselbe wie in chat-glas.css; diese Datei wird spaeter
   geladen und gewinnt dadurch. ===================================== */
@media (min-width: 810px) {
  html[data-chat="C"]:not(.cg-tafel) .gc-fenster {
    right: max(40px, calc((100vw - var(--breite, 1435px)) / 2 + 80px));
  }
}