/*! © 2026 Bemuar Technology (Resmuar). Alle Rechte vorbehalten. Urheberrechtlich geschützt (§§ 2, 69a UrhG): Vervielfältigung, Weitergabe und Nachbau ohne schriftliche Zustimmung nicht gestattet. https://resmuar.de/impressum */
/* ============================================================================
   resmuar.de — «Volles Haus»  (fünftes System, 22.09.2026)
   ----------------------------------------------------------------------------
   Fotografisch, ruhig, kein Skript.

   FORM: weisse Seite, grosse Fotos in weichen Rahmen, ein Bento aus vier
   Zellen fuer die Module, eine dunkle Strecke in der Mitte (der Samstagabend
   und das Panel, das wirklich dunkel ist), ein dunkler Schluss (Kontakt und
   Fuss). Ueberschriften Manrope 700, eng gesetzt. Ein farbiger Strich aus der
   Wortmarke ueber jeder Ueberschrift statt eines Versalien-Eyebrows.

   FARBE: eine einzige (Betreiber, 08.10.2026, D-220): das Zeichen ist flach Rot
   (#E30613), die drei Pigmente der frueheren Marke sind Geschichte. Rot ist
   Akzent und traegt Weiss (Knopf, Strich ueber der Ueberschrift, Fokusring);
   sonst Tinte, Papier und Stein, auf der dunklen Strecke Nacht. Es gibt keinen
   Verlauf: --marke ist ein flacher Strich in Rot, kein Farbuebergang.

   BEWEGUNG: nur CSS. Einzug im Hero, ein Laufband, Aufblenden beim Scrollen
   (animation-timeline: view(), sonst still), Parallaxe auf dem Abendfoto.
   Alles steht unter prefers-reduced-motion still.

   OHNE DIE UEBLICHEN BAUSTEINE (Betreiber, 25.09.2026: «çok Claude AI kokuyor»):
   keine nachgebaute Browserleiste ueber den Aufnahmen, kein schiefer Stempel,
   kein Kassenbon mit Punktlinien, keine Statuspunkte, keine Schreibmaschinen-
   schrift, keine Versalien mit Sperrung, keine Leuchtflecken, keine Ziffern im
   Kreis, kein Eyebrow ueber der Seitenueberschrift. Was gezeigt wird, ist eine
   echte Aufnahme ohne Rahmenattrappe oder Satz: Zeile, Linie, Wort.
   build.py bricht ab, wenn einer davon zurueckkommt (VERBOTEN_*).

   Reihenfolge:
     01 Marken   02 Grundlage   03 Bauteile   04 Kopf   05 Startseite
     06 Kontakt/Fuss   07 Unterseiten   08 Bewegung   09 Schmale Schirme
     10 Rechts-nach-links
   ========================================================================= */

/* --- 01 Marken ----------------------------------------------------------- */

:root {
  --papier:   #FFFFFF;
  --papier-2: #F5F5F4;   /* matte Flaeche, warm-neutral wie die Fotos */
  --papier-3: #EBEBE9;
  --tinte:    #121114;
  --tinte-2:  #5B5960;   /* 6.6 auf Weiss */
  --tinte-3:  #8A878F;   /* nur fuer Deko, nie fuer Text unter 18px */
  --linie:       #E6E5E2;
  --linie-stark: #CFCDC9;

  /* EINE FARBE (Betreiber, 08.10.2026, D-220): das Zeichen ist flach Rot, die drei Pigmente
     sind Geschichte. Kontrast gegen Weiss / gegen Tinte:
       Rot        4.87 / 3.85  -> traegt WEISS; ist Schrift auf Weiss (AA), nie Tinte darauf
       Rot-dunkel 8.9  / 1.8   -> Hover, Fehler
       Rot-hell   2.8  / 6.7   -> nur auf Nacht, nie auf Weiss
     Die alten Namen (flamme, glut, veilchen) bleiben als Bruecke und zeigen alle auf Rot:
     so bleibt jede Regel darunter gueltig, und wer sie liest, weiss, was gemeint war. */
  --rot:        #E30613;
  --rot-dunkel: #9B000F;
  --rot-hell:   #FF6A5C;
  --rot-matt:   #FBE3E4;   /* Rot, in Papier gemischt: unter Zellen, nie unter Text */

  --flamme:   var(--rot);
  --glut:     var(--rot);
  --veilchen: var(--rot);
  --glut-schrift:     var(--rot-dunkel);
  --veilchen-schrift: var(--rot);

  /* Matt: eine rote Flaeche, die anderen Zellen liegen auf Stein. */
  --flamme-matt:   var(--rot-matt);
  --glut-matt:     var(--papier-2);
  --veilchen-matt: var(--papier-3);

  /* Ein Bild, kein Farbwert: `.schritt-ziel` setzt es als 2px-Linie, eine Farbe fuellte den Kasten. */
  --marke: linear-gradient(90deg, var(--rot), var(--rot));

  --nacht:        #121118;
  --nacht-2:      #1B1A22;
  --nacht-linie:  #2C2A35;
  --nacht-text:   #F7F6FA;
  --nacht-text-2: #A9A6B3;

  --ok:   #0E8A5F;
  --warn: #C77700;
  --stop: var(--rot-dunkel);   /* dunkler als die Marke, dazu immer ein Wort oder Zeichen */

  /* Ein Rundungssystem: Knoepfe rund, Fotos 24, Karten 20, Chips 12. */
  --radius-foto: 24px;
  --radius-card: 20px;
  --radius-chip: 12px;
  --radius-pill: 999px;
  --radius-bogen: 32px;   /* ein Abschnitt, der sich mit runden Ecken ueber den vorigen legt */

  --s1: 4px;  --s2: 8px;   --s3: 12px;  --s4: 16px; --s6: 24px;
  --s8: 32px; --s12: 48px; --s16: 64px; --s24: 96px; --s32: 128px;

  --font-body: 'Manrope', 'Noto Naskh Arabic', system-ui, -apple-system, sans-serif;
  /* Nur fuer Cookie-Namen in der Datenschutzerklaerung: dort ist es ein Bezeichner,
     kein Stilmittel. Keine eigene Datei, die Systemschrift reicht. */
  --font-code: ui-monospace, SFMono-Regular, Consolas, monospace;

  --t-display: clamp(2.5rem, 1.55rem + 3.9vw, 4.25rem);
  --t-h2:      clamp(1.875rem, 1.3rem + 2.2vw, 3rem);
  --t-h3:      clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
  --t-body:    1.0625rem;
  --t-small:   0.9375rem;

  --schatten: 0 1px 2px rgba(18, 17, 20, 0.04), 0 28px 56px -28px rgba(18, 17, 20, 0.22);
  --hair: 1px solid var(--linie);
  --wrap: 1200px;
  --hover: 180ms ease-out;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ein Modul, ein Pigment — seit D-220 ist es dasselbe Rot; die Klassen bleiben in den Vorlagen. */
.p-flamme   { --pigment: var(--rot); --pigment-schrift: #FFFFFF; --pigment-matt: var(--flamme-matt); }
.p-glut     { --pigment: var(--rot); --pigment-schrift: #FFFFFF; --pigment-matt: var(--glut-matt); }
.p-veilchen { --pigment: var(--rot); --pigment-schrift: #FFFFFF; --pigment-matt: var(--veilchen-matt); }

.nacht {
  --papier: var(--nacht);
  --papier-2: var(--nacht-2);
  --papier-3: var(--nacht-2);
  --tinte: var(--nacht-text);
  --tinte-2: var(--nacht-text-2);
  --tinte-3: var(--nacht-text-2);
  --linie: var(--nacht-linie);
  --linie-stark: #3B3846;
  /* Auf Nacht traegt nur das helle Rot Schrift (6.7); das Markenrot bleibt Flaeche. */
  --flamme: var(--rot-hell);
  --glut: var(--rot-hell);
  --veilchen: var(--rot-hell);
  --glut-schrift: var(--rot-hell);
  --veilchen-schrift: var(--rot-hell);
  --ok: #35C08A;
  --warn: #E8A93C;
  --stop: #FF8A80;
  --hair: 1px solid var(--nacht-linie);
  --schatten: none;
  background: var(--nacht);
  color: var(--nacht-text);
}

/* --- 02 Grundlage -------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-inline-size: 100%; block-size: auto; display: block; }
h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; }
ul, ol { padding-inline-start: 1.15em; }

h1, .display {
  font-size: var(--t-display);
  font-weight: 700;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: anywhere;   /* Sicherheitsnetz: ein einzelnes zu langes Wort bricht, statt zu laufen */
}

h2 {
  font-size: var(--t-h2);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

h3, .h3 {
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
}

p { max-inline-size: 62ch; color: var(--tinte-2); }
h1 + p, h2 + p, h3 + p, .lead + p { margin-block-start: var(--s4); }

.lead {
  font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem);
  line-height: 1.55;
  color: var(--tinte-2);
  max-inline-size: 54ch;
}

.small { font-size: var(--t-small); line-height: 1.55; color: var(--tinte-2); }
.cap   { font-size: var(--t-small); line-height: 1.55; color: var(--tinte-2); }

/* Kein Eyebrow. Die Seitenueberschrift steht allein; wo die Kleinzeile etwas
   sagte («Was wir von Ihnen brauchen»), ist sie selbst die Ueberschrift geworden. */

/* Der Strich aus der Wortmarke: steht ueber der Ueberschrift. */
.h-strich::before {
  content: '';
  display: block;
  inline-size: 44px;
  block-size: 4px;
  border-radius: 2px;
  background: var(--marke);
  margin-block-end: var(--s6);
}

code { font-family: var(--font-code); font-size: 0.9em; }

b, strong { font-weight: 700; color: var(--tinte); }

a { color: var(--veilchen-schrift); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--glut-schrift); }

:focus-visible { outline: 3px solid var(--veilchen); outline-offset: 3px; border-radius: 6px; }
.nacht :focus-visible { outline-color: var(--flamme); }
::selection { background: var(--veilchen); color: #FFFFFF; }

.wrap { inline-size: min(100% - 2 * var(--s8), var(--wrap)); margin-inline: auto; }
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Abschnitte liegen flach auf dem Papier; der Abstand macht die Gliederung. */
.abschnitt, .platte { padding-block: var(--s24); }
.platte-schmal { padding-block: var(--s16); }
.sec-kopf { margin-block-end: var(--s12); max-inline-size: 62ch; }
.sec-kopf .lead { margin-block-start: var(--s4); }

/* Der Bogen: ein Abschnitt legt sich mit runden Ecken ueber den vorigen, wie ein Blatt
   auf dem Tisch (Form von allo.restaurant, 11.10.2026). Drei Stellen: die Module ueber
   dem Samstagabend, «Fuer wen» ueber dem Panel, der Kontakt ueber allem — auf jeder
   Seite, denn der Kontakt steht in base.html. Der Vorgaenger gibt 32 px seines unteren
   Abstands her; jeder Abschnitt hat mindestens 48. Die Flaeche kommt aus --papier, das
   in .nacht selbst dunkel ist. */
.bogen-unten {
  position: relative; z-index: 2;
  background: var(--papier);
  border-end-start-radius: var(--radius-bogen);
  border-end-end-radius: var(--radius-bogen);
}
.bogen-unten + * { margin-block-start: calc(-1 * var(--radius-bogen)); }
.bogen-oben {
  position: relative; z-index: 2;
  background: var(--papier);
  border-start-start-radius: var(--radius-bogen);
  border-start-end-radius: var(--radius-bogen);
  margin-block-start: calc(-1 * var(--radius-bogen));
}
.sec-head { margin-block-end: var(--s12); max-inline-size: 62ch; }
.sec-head .lead { margin-block-start: var(--s4); }

/* --- 03 Bauteile --------------------------------------------------------- */

/* Knoepfe: Flamme traegt Tinte (8.63) — der lauteste und zugleich lesbarste
   Knopf der Seite. Beim Zeigen wird er Tinte; beim Druecken gibt er nach. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--t-body);
  line-height: 1;
  padding: 18px 28px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--hover), color var(--hover), border-color var(--hover), transform var(--hover), box-shadow var(--hover);
}
.btn:active { transform: scale(0.98); }
.btn-fill { background: var(--rot); color: #FFFFFF; }
.nacht .btn-fill { background: var(--rot); color: #FFFFFF; }
.btn-fill:hover { background: var(--tinte); color: #FFFFFF; transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(18, 17, 20, 0.5); }
.nacht .btn-fill:hover { background: #FFFFFF; color: var(--nacht); }
.btn-ghost { background: var(--papier); color: var(--tinte); border-color: var(--linie-stark); }
.btn-ghost:hover { border-color: var(--tinte); transform: translateY(-1px); }
.nacht .btn-ghost { background: transparent; color: var(--nacht-text); border-color: var(--linie-stark); }
.nacht .btn-ghost:hover { border-color: var(--nacht-text); }
.btn-klein { padding: 12px 18px; font-size: var(--t-small); }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-weight: 700;
  color: var(--tinte);
  text-decoration: none;
  transition: gap var(--hover), color var(--hover);
}
.link-arrow:hover { gap: var(--s3); color: var(--glut-schrift); }
.link-arrow::after { content: '\2192'; }
[dir="rtl"] .link-arrow::after { content: '\2190'; }
.link-hell { color: #FFFFFF; }
.link-hell:hover { color: var(--flamme); }

/* Das Foto: ein weicher Rahmen, das Bild fuellt ihn. Das Seitenverhaeltnis
   kommt von der Klasse, damit der Platz vor dem Laden feststeht (kein Springen). */
.foto {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-foto);
  background: var(--papier-3);
  isolation: isolate;
}
.foto img { inline-size: 100%; block-size: 100%; object-fit: cover; }
.foto-45 { aspect-ratio: 4 / 5; }
.foto-43 { aspect-ratio: 4 / 3; }
.foto-32 { aspect-ratio: 3 / 2; }
.foto-169 { aspect-ratio: 16 / 9; }

/* Geraeteaufnahmen. «Echte Aufnahmen, nicht nachgebaut» steht auf der Seite –
   kein Winkel, keine Perspektive, und keine nachgebaute Adressleiste darueber:
   die Aufnahme selbst ist der Beweis, was sie zeigt, sagt der Text daneben. */
.plate {
  background: var(--papier);
  border: var(--hair);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--schatten);
}
.nacht .plate { border-color: var(--nacht-linie); }
.plate-body { padding: var(--s6); }
.plate-body.shot-img { padding: 0; }
.plate-body.shot-img img { inline-size: 100%; }

/* Das Telefon: Proportion eines Telefons (9:19), dunkler Rand wie ein Geraet, und die
   Karte rollt innen langsam hinunter und wieder hinauf (karte-rollen, 08 Bewegung).
   Bis 13.10.2026 war es ein Rahmen ohne Hoehe: auf der Startseite ein 200x360-Ausschnitt,
   zu breit, zu kurz, mitten in der Karte abgeschnitten. Der Schirm ist ein
   Groessen-Container, damit die Rolle genau bis zum Ende der Aufnahme reicht
   (100cqh - 100 %); ohne Container-Einheiten steht die Karte einfach oben. */
.phone {
  display: grid;
  inline-size: 244px;
  aspect-ratio: 9 / 19;
  padding: 8px;
  border-radius: 40px;
  background: var(--nacht);
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(18, 17, 20, 0.12), 0 40px 80px -32px rgba(18, 17, 20, 0.5);
}
.phone .shot-img {
  overflow: hidden;
  border-radius: 32px;
  background: var(--nacht);
  container-type: size;
}
.phone .shot-img img { display: block; inline-size: 100%; block-size: auto; }

/* Das Band aus drei Pigmenten: die Kante der Seite, wie im Zeichen. */
.pigmentband {
  block-size: 3px;
  border: 0;
  margin: 0;
  background: var(--marke);
}

/* unterschrift – eine bestaetigte Angabe, gesetzt wie eine ausgefuellte
   Formularzeile: kleine Bezeichnung, der Wert auf einer Linie, darunter die
   Bedingung. Gerade, ohne Rahmen, in der Schrift der Seite. */
.unterschrift { max-inline-size: 36ch; font-size: var(--t-small); line-height: 1.5; color: var(--tinte-2); }
.unterschrift .u-wert {
  display: block;
  margin-block: var(--s1) var(--s2);
  padding-block-end: var(--s2);
  border-block-end: 1px solid var(--tinte);
  font-size: var(--t-body);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
}
.unterschrift .u-label, .unterschrift .u-frist { display: block; }

/* --- 04 Kopf ------------------------------------------------------------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.84);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-block-end: var(--hair);
}
@supports not (backdrop-filter: blur(1px)) { .site-header { background: var(--papier); } }
.site-header > .wrap { display: flex; align-items: center; gap: var(--s8); min-block-size: 72px; }
.brand { display: inline-flex; align-items: center; flex: none; }
/* Die Datei ist seit dem 09.10.2026 randlos (vorher 240x80 mit Luft rundherum: bei 30px Hoehe
   war die Wortmarke 9px hoch). Jetzt ist die Hoehe die des Zeichens. */
.brand img { block-size: 36px; inline-size: auto; }

.nav-links { display: flex; gap: var(--s6); margin-inline-end: auto; }
.nav-links a {
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--tinte-2);
  text-decoration: none;
  padding-block: 6px;
  border-block-end: 2px solid transparent;
  transition: color var(--hover), border-color var(--hover);
}
.nav-links a:hover { color: var(--tinte); }
.nav-links a[aria-current="page"] { color: var(--tinte); border-block-end-color: var(--flamme); }

.header-side { display: flex; align-items: center; gap: var(--s3); flex: none; margin-inline-start: auto; }

.lang-switch { position: relative; }
.lang-switch > summary {
  list-style: none;
  cursor: pointer;
  font-size: var(--t-small);
  font-weight: 700;
  color: var(--tinte);
  padding: 11px 14px;
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-pill);
  background: var(--papier);
  transition: border-color var(--hover);
}
.lang-switch > summary::-webkit-details-marker { display: none; }
.lang-switch > summary:hover { border-color: var(--tinte); }
.lang-menu {
  position: absolute;
  inset-block-start: calc(100% + var(--s2));
  inset-inline-end: 0;
  min-inline-size: 184px;
  background: var(--papier);
  border: var(--hair);
  border-radius: var(--radius-card);
  padding: var(--s2);
  z-index: 30;
  box-shadow: 0 16px 40px -12px rgba(18, 17, 20, 0.22);
}
.lang-menu a {
  display: flex; justify-content: space-between; gap: var(--s4);
  padding: 10px 12px; border-radius: var(--radius-chip);
  font-size: var(--t-small); font-weight: 500; color: var(--tinte-2); text-decoration: none;
}
.lang-menu a:hover { background: var(--papier-2); color: var(--tinte); }
.lang-menu a[aria-current="true"] { color: var(--tinte); font-weight: 700; }
.lang-menu .code { font-size: var(--t-small); font-weight: 600; color: var(--tinte-2); }

/* Das Menue fuer schmale Schirme: ein <details>, kein Skript. Auf breiten
   Schirmen unsichtbar, dort steht die Zeile. */
.menue { display: none; position: static; }
.menue > summary {
  list-style: none;
  cursor: pointer;
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px;
  border: 1px solid var(--linie-stark);
  border-radius: 50%;
  background: var(--papier);
}
.menue > summary::-webkit-details-marker { display: none; }
.menue-balken, .menue-balken::before, .menue-balken::after {
  display: block; inline-size: 18px; block-size: 2px; border-radius: 1px; background: var(--tinte);
}
.menue-balken { position: relative; }
.menue-balken::before, .menue-balken::after { content: ''; position: absolute; inset-inline-start: 0; }
.menue-balken::before { inset-block-start: -6px; }
.menue-balken::after { inset-block-start: 6px; }
.menue[open] .menue-balken { background: transparent; }
.menue[open] .menue-balken::before { inset-block-start: 0; transform: rotate(45deg); }
.menue[open] .menue-balken::after { inset-block-start: 0; transform: rotate(-45deg); }
.menue-liste {
  display: none;             /* nur offen und nur auf schmalen Schirmen: siehe 09 */
  position: absolute;
  inset-inline: 0;
  inset-block-start: 100%;
  gap: var(--s1);
  padding: var(--s4) var(--s6) var(--s6);
  background: var(--papier);
  border-block-end: var(--hair);
  box-shadow: 0 24px 48px -24px rgba(18, 17, 20, 0.3);
}
.menue-liste a {
  font-size: 1.25rem; font-weight: 700; color: var(--tinte); text-decoration: none;
  padding: var(--s3) 0; border-block-end: var(--hair);
}
.menue-liste a[aria-current="page"] { color: var(--veilchen-schrift); }
.menue-liste .btn { margin-block-start: var(--s4); border-block-end: 0; font-size: var(--t-body); padding: 16px 24px; }

/* --- 05 Startseite -------------------------------------------------------- */

/* Hero: Text links, das Foto rechts, das Telefon lehnt an der Ecke. */
.hero { padding-block: var(--s12) var(--s16); overflow: hidden; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: var(--s16);
  align-items: center;
}
.hero h1 { margin-block-end: var(--s6); }
/* Drei Saetze, drei Zeilen (in jeder Sprache): «Gaeste.» steht nie allein am Zeilenende. */
.hero h1 .satz { display: block; }
.hero .lead { margin-block-end: var(--s8); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); }
.hero-visual { position: relative; padding-block-end: var(--s8); padding-inline-start: var(--s8); }
.hero-foto { aspect-ratio: 4 / 5; }
.hero-foto img { object-position: 62% 30%; }
.hero-phone {
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  inline-size: 200px;
  padding: 7px;
  border-radius: 34px;
}
.hero-phone .shot-img { border-radius: 27px; }

/* Das Laufband: die Module als Worte, einmal je Seite. Beide Kopien stehen im
   Markup, die zweite ist fuer Vorleser unsichtbar. */
.laufband {
  overflow: hidden;
  border-block: var(--hair);
  padding-block: var(--s4);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.laufband-spur { display: flex; inline-size: max-content; }
.laufband-spur span {
  display: inline-flex; align-items: center; gap: var(--s8);
  padding-inline-end: var(--s8);
  white-space: nowrap;
  font-weight: 700; font-size: var(--t-small); color: var(--tinte-2);
}
.laufband-spur span::after { content: ''; inline-size: 1px; block-size: 14px; background: var(--linie-stark); }

/* Was Resmuar ist: Text und drei Punkte links, der Gastgeber rechts. */
.was-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s16);
  align-items: center;
}
.was-copy p + p { margin-block-start: var(--s4); }
.was-punkte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); margin-block-start: var(--s12); }
.wp { border-inline-start: 3px solid var(--pigment); padding-inline-start: var(--s4); }
.wp h3 { font-size: var(--t-body); font-weight: 700; }
.wp p { font-size: var(--t-small); margin-block-start: var(--s2); }
.was-foto img { object-position: 40% 30%; }

/* Das Bento der Module: vier Zellen, zwei mit Aufnahme, zwei mit mattem Pigment. */
.bento {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--s4);
}
.zelle {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  gap: var(--s6);
  padding: var(--s8);
  border-radius: var(--radius-card);
  background: var(--papier-2);
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.zelle:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.zelle-name { display: block; font-size: var(--t-small); font-weight: 700; color: var(--tinte-2); }
.zelle h3 { font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem); font-weight: 700; letter-spacing: -0.02em; margin-block-start: var(--s2); }
.zelle p { font-size: var(--t-small); max-inline-size: 44ch; }
.zelle-text { display: grid; gap: 0; }
.z-website { grid-column: 1 / span 7; grid-row: 1 / span 2; }

/* Das Tablet. Der Rahmen (WebP mit Alpha, aus der Vorlage des Betreibers
   geschnitten) liegt UNTER dem Schirm: sein Glas ist im Bild undurchsichtig
   grau, also deckt der Schirm es genau in seinem Rechteck ab. Das Rechteck ist
   aus den Pixeln der Vorlage gemessen (Bezel-Uebergaenge, nicht geschaetzt).
   Im Schirm liegt die Gastseite in ganzer Laenge und scrollt wie auf dem
   Geraet — ohne Skript, ohne Rahmen auf ein fremdes Haus. */
.tablet-buehne { margin-block-start: auto; display: grid; gap: var(--s4); justify-items: center; }
.tab-r { position: absolute; opacity: 0; pointer-events: none; }
.tablet { position: relative; inline-size: min(100%, 440px); aspect-ratio: 1057 / 1597; }
.tablet-rahmen { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; z-index: 1; pointer-events: none; }
.tablet-schirm {
  position: absolute;
  inset-inline-start: 5.014%; inset-block-start: 10.019%;
  inline-size: 90.066%; block-size: 78.898%;
  z-index: 2;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain;
  background: #FFFFFF;
  scrollbar-width: none;
}
.tablet-schirm::-webkit-scrollbar { display: none; }
.tablet-schirm .ts { display: none; inline-size: 100%; block-size: auto; }
#tab-1:checked ~ .tablet .ts1,
#tab-2:checked ~ .tablet .ts2,
#tab-3:checked ~ .tablet .ts3 { display: block; }
.tablet-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s2); }
.tablet-tabs label {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--linie-stark);
  background: var(--papier);
  font-size: var(--t-small); font-weight: 700; color: var(--tinte-2);
  cursor: pointer;
  transition: color var(--hover), background-color var(--hover), border-color var(--hover);
}
.tablet-tabs label:hover { color: var(--tinte); border-color: var(--tinte); }
#tab-1:checked ~ .tablet-tabs label:nth-of-type(1),
#tab-2:checked ~ .tablet-tabs label:nth-of-type(2),
#tab-3:checked ~ .tablet-tabs label:nth-of-type(3) { background: var(--tinte); color: #FFFFFF; border-color: var(--tinte); }
#tab-1:focus-visible ~ .tablet-tabs label:nth-of-type(1),
#tab-2:focus-visible ~ .tablet-tabs label:nth-of-type(2),
#tab-3:focus-visible ~ .tablet-tabs label:nth-of-type(3) { outline: 3px solid var(--veilchen); outline-offset: 2px; }
.tablet-buehne .cap { text-align: center; max-inline-size: 40ch; }
.z-karte { grid-column: 8 / span 5; grid-row: 1; background: var(--flamme-matt); padding-block-end: 0; }
.z-karte .plate { margin-block-start: auto; margin-inline-start: var(--s6); margin-block-end: -32px; max-block-size: 220px; border-block-end: 0; }
.z-karte .plate img { object-fit: cover; object-position: top; block-size: 220px; }
.z-res { grid-column: 8 / span 5; grid-row: 2; background: var(--glut-matt); padding-block-end: 0; }
.z-res .plate { margin-block-start: auto; margin-inline-start: var(--s6); margin-block-end: -32px; max-block-size: 220px; border-block-end: 0; }
.z-res .plate img { object-fit: cover; object-position: 0% 100%; block-size: 220px; }
.z-abh { grid-column: 1 / -1; grid-row: 3; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s8); background: var(--veilchen-matt); padding: 0; }
.z-abh .zelle-text { padding: var(--s8); }
.z-abh .foto { border-radius: 0; block-size: 100%; min-block-size: 300px; aspect-ratio: auto; }
.z-abh .foto img { object-position: 50% 40%; }
.module-schluss { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s6); margin-block-start: var(--s8); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: var(--tinte); }


/* Der Samstagabend: ein Foto ueber die ganze Breite, der Text unten links. */
.abend {
  position: relative;
  overflow: hidden;
  min-block-size: 640px;
  display: grid;
  align-items: end;
  color: #FFFFFF;
  background: var(--nacht);
}
.abend-bild { position: absolute; inset: -8% 0; z-index: 0; }
.abend-bild img { inline-size: 100%; block-size: 100%; object-fit: cover; object-position: 50% 35%; }
.abend::after {
  content: '';
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(12, 10, 14, 0.55), rgba(12, 10, 14, 0) 60%),
    linear-gradient(to top, rgba(12, 10, 14, 0.92) 0%, rgba(12, 10, 14, 0.5) 45%, rgba(12, 10, 14, 0.12) 100%);
}
/* Die Breitengrenze steht auf dem Kind, nicht auf .wrap — sonst rueckt der
   ganze Block in die Mitte (siehe .demo-offen). */
.abend-copy { position: relative; z-index: 2; padding-block: var(--s24) var(--s16); }
.abend-text { max-inline-size: 46rem; }
/* Die Ueberschrift ist 48 px gross, `ch` misst aber in Textgroesse: bei 34ch blieben ihr rund
   270 px, ein Wort je Zeile. Die Spalte ist jetzt breit (2-3 Zeilen, balanciert); nur der
   Absatz darunter bleibt bei 34ch. */
.abend-copy h2 { color: #FFFFFF; }
.abend-copy p { max-inline-size: 34ch; color: rgba(255, 255, 255, 0.82); margin-block-start: var(--s6); font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); }
.abend-copy .link-arrow { margin-block-start: var(--s8); }

/* Das Panel — dunkel, weil es dunkel ist. Fuenf Reiter, eine Buehne. */
.panel { padding-block: var(--s24); }
.panel-kopf { max-inline-size: 58ch; margin-block-end: var(--s12); }
.rund { position: relative; }
.rund-r { position: absolute; opacity: 0; pointer-events: none; }
.rund-seite { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-end: var(--s6); }
.rund-seite label {
  display: inline-flex; align-items: center; gap: var(--s2);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--nacht-linie);
  font-size: var(--t-small); font-weight: 700; color: var(--nacht-text-2); cursor: pointer;
  transition: color var(--hover), background-color var(--hover), border-color var(--hover);
}
.rund-seite label:hover { color: var(--nacht-text); border-color: var(--linie-stark); }
.rund-seite .rd { display: none; }
.rund-stage { position: relative; }
.rund-s { display: none; }
.rund-s figcaption { padding: var(--s4) var(--s6); font-size: var(--t-small); color: var(--nacht-text-2); border-block-start: 1px solid var(--nacht-linie); }
#rund-1:checked ~ .rund-stage .rs1,
#rund-2:checked ~ .rund-stage .rs2,
#rund-3:checked ~ .rund-stage .rs3,
#rund-4:checked ~ .rund-stage .rs4,
#rund-5:checked ~ .rund-stage .rs5,
#rund-6:checked ~ .rund-stage .rs6 { display: block; }
#rund-1:checked ~ .rund-seite label:nth-of-type(1),
#rund-2:checked ~ .rund-seite label:nth-of-type(2),
#rund-3:checked ~ .rund-seite label:nth-of-type(3),
#rund-4:checked ~ .rund-seite label:nth-of-type(4),
#rund-5:checked ~ .rund-seite label:nth-of-type(5),
#rund-6:checked ~ .rund-seite label:nth-of-type(6) { color: var(--nacht); background: var(--rot-hell); border-color: var(--rot-hell); }
#rund-1:focus-visible ~ .rund-seite label:nth-of-type(1),
#rund-2:focus-visible ~ .rund-seite label:nth-of-type(2),
#rund-3:focus-visible ~ .rund-seite label:nth-of-type(3),
#rund-4:focus-visible ~ .rund-seite label:nth-of-type(4),
#rund-5:focus-visible ~ .rund-seite label:nth-of-type(5),
#rund-6:focus-visible ~ .rund-seite label:nth-of-type(6) { outline: 3px solid var(--flamme); outline-offset: 2px; }
.rund-note { margin-block-start: var(--s6); }

/* Fuer wen: fuenf Karten auf sechs Spalten — drei oben, unten eine schmale ohne Foto und
   eine breite. Form: allo.restaurant «made for everyone», 21st.dev gallery-02. */
.wen-raster { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--s6) var(--s4); }
.wen { grid-column: span 2; }
.wen-breit { grid-column: span 4; }
.wen .foto { aspect-ratio: 4 / 5; }
.wen-breit .foto { aspect-ratio: 2 / 1; }
.wen .foto img { transition: transform 700ms var(--ease-out); }
.wen:hover .foto img { transform: scale(1.04); }
.wen-kueche img { object-position: 50% 20%; }
.wen h3 { margin-block-start: var(--s4); font-size: var(--t-body); font-weight: 700; }
.wen p { font-size: var(--t-small); margin-block-start: var(--s2); }
/* Die Karte ohne Foto: der Strich der Wortmarke oben, der Text unten, dazwischen Luft. */
.wen-text {
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--s6);
  border-radius: var(--radius-foto);
  background: var(--papier-2);
}
.wen-text::before { content: ''; inline-size: 44px; block-size: 4px; border-radius: 2px; background: var(--marke); margin-block-end: auto; }
.wen-text h3 { margin-block-start: var(--s8); }

/* Fuer welche Haeuser: acht Kacheln, je ein Zeichen, ein Name, eine Zeile, ein Pfeil.
   Form: allo.restaurant «Experience allO in action», 21st.dev features-01. */
.kacheln { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
.kachel {
  display: grid; grid-template-rows: auto 1fr auto; gap: var(--s6);
  min-block-size: 232px;
  padding: var(--s6);
  border-radius: var(--radius-card);
  background: var(--papier-2);
  color: inherit; text-decoration: none;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.kachel:hover { transform: translateY(-3px); box-shadow: var(--schatten); }
.kachel .kz { display: block; inline-size: 28px; block-size: 28px; color: var(--tinte); }
.kachel .kz svg { inline-size: 100%; block-size: 100%; }
.kachel h3 { font-size: var(--t-body); font-weight: 700; }
.kachel p { font-size: var(--t-small); margin-block-start: var(--s2); color: var(--tinte-2); }
.kachel .kp {
  display: grid; place-items: center; justify-self: end;
  inline-size: 36px; block-size: 36px; border-radius: 50%;
  border: 1px solid var(--linie-stark); color: var(--tinte);
  transition: background-color var(--hover), color var(--hover), border-color var(--hover);
}
.kachel:hover .kp { background: var(--rot); color: #FFFFFF; border-color: var(--rot); }

/* Vertrauen: die Koechin, der Text daneben, die Fakten darunter. Auf dem Foto
   liegt nichts: kein aufgeklebtes Etikett, kein Stempel. */
.vertrauen-grid {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--s16);
  align-items: center;
}
.vertrauen-copy p + p { margin-block-start: var(--s4); }
.vertrauen-copy .link-arrow { margin-block-start: var(--s8); }
.fakten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); margin-block-start: var(--s16); }
.fakt { background: var(--papier-2); border-radius: var(--radius-card); padding: var(--s8); }
.fakt h3 { font-size: var(--t-body); font-weight: 700; margin-block-end: var(--s6); }
.fakt dl { display: grid; gap: var(--s4); }
.fakt dt { font-weight: 700; font-size: var(--t-small); color: var(--tinte); }
.fakt dd { margin: 0; margin-block-start: 2px; font-size: var(--t-small); color: var(--tinte-2); }

/* Zwei Dinge, und was danach kommt: drei Schritte nebeneinander, jeder unter
   einer Linie. Keine Karten, keine Ziffer im Kreis: die Zahl steht klein am
   Anfang, und der letzte Schritt (das Ergebnis) liegt unter dem Strich der
   Wortmarke. */
.start { background: var(--papier-2); }
.schritte { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); }
.schritt { padding-block-start: var(--s4); border-block-start: 2px solid var(--tinte); }
.schritt-ziel { border-block-start-color: transparent; background: var(--marke) top / 100% 2px no-repeat border-box; }
.schritt .n { display: flex; align-items: center; block-size: 24px; font-size: var(--t-small); font-weight: 700; font-variant-numeric: tabular-nums; color: var(--tinte-2); }
.schritt .n svg { inline-size: 18px; block-size: 18px; color: var(--tinte); }
.schritt h2, .schritt h3 { font-size: var(--t-h3); font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; margin-block: var(--s3); }
.schritt p { color: var(--tinte-2); font-size: var(--t-small); }

/* Preis: eine Flaeche auf Stein, links der Satz und zwei Knoepfe, rechts der Stapel.
   Die drei Module liegen hinten, kleiner und blasser, «Ihr Restaurant» vorn mit dem
   roten Strich. Gestapelt im Fluss (negativer Abstand), nicht absolut: nichts laeuft
   ueber, nichts kippt. Form: allo.restaurant Schlussaufruf, 21st.dev card-stack. */
.preis-flaeche {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s12); align-items: center;
  padding: var(--s16);
  border-radius: var(--radius-bogen);
  background: var(--papier-2);
}
.preis-copy h2 { max-inline-size: 18ch; }
.preis-copy .lead { margin-block-start: var(--s4); max-inline-size: 40ch; }
.preis-ctas { display: flex; flex-wrap: wrap; gap: var(--s3); margin-block-start: var(--s8); }
.stapel { display: grid; list-style: none; margin: 0; padding: 0; inline-size: min(100%, 380px); justify-self: end; }
.sk {
  padding: var(--s3) var(--s6) var(--s8);
  border-radius: var(--radius-card);
  background: var(--papier);
  border: var(--hair);
  box-shadow: var(--schatten);
}
.sk + .sk { margin-block-start: -32px; }
.sk:nth-child(1) { scale: 0.88; opacity: 0.55; }
.sk:nth-child(2) { scale: 0.92; opacity: 0.7; }
.sk:nth-child(3) { scale: 0.96; opacity: 0.85; }
.sk b { display: block; font-size: var(--t-body); font-weight: 700; }
.sk span { display: block; margin-block-start: 2px; font-size: var(--t-small); color: var(--tinte-2); }
.sk-vorn { padding: var(--s6); border-block-start: 3px solid var(--rot); }

/* Vier Fragen vorab. */
.faq-kurz-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s16); align-items: start; }
.faq-kurz-kopf .link-arrow { margin-block-start: var(--s6); }
.fragen { display: grid; }
.frage { padding-block: var(--s6); border-block-start: var(--hair); }
.frage:last-child { border-block-end: var(--hair); }
.frage h3 { font-size: var(--t-body); font-weight: 700; }
.frage p { font-size: var(--t-small); margin-block-start: var(--s2); }

/* --- 06 Kontakt und Fuss ------------------------------------------------- */

.kontakt {
  position: relative;
  overflow: hidden;
  padding-block: var(--s24);
}
.kontakt-grid {
  position: relative;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s16); align-items: center;
}
.kontakt .kb-copy h2 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); }
.kontakt .kb-copy p { max-inline-size: 40ch; margin-block-start: var(--s6); }

.kanaele { display: grid; gap: var(--s3); }
.kanal {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s4);
  padding: var(--s6);
  background: var(--nacht-2);
  border: 1px solid var(--nacht-linie);
  border-radius: var(--radius-card);
  text-decoration: none; color: inherit;
  transition: transform var(--hover), border-color var(--hover);
}
.kanal:hover { transform: translateY(-2px); border-color: var(--linie-stark); }
.kanal .k-name { display: block; font-size: var(--t-small); font-weight: 700; color: var(--flamme); }
.kanal .k-wert {
  display: block; margin-block-start: var(--s1);
  font-variant-numeric: tabular-nums;
  font-size: var(--t-body); font-weight: 600; color: var(--nacht-text); overflow-wrap: anywhere;
}
.kanal .k-pfeil {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px; border-radius: 50%;
  background: var(--nacht); color: var(--nacht-text); flex: none;
  border: 1px solid var(--nacht-linie);
  transition: background-color var(--hover), color var(--hover);
}
.kanal:hover .k-pfeil { background: var(--flamme); color: var(--nacht); border-color: var(--flamme); }
.kontakt-fuss { margin-block-start: var(--s2); max-inline-size: 48ch; }
.kanal .k-zeichen {
  display: grid; place-items: center;
  inline-size: 44px; block-size: 44px; border-radius: 50%;
  background: var(--nacht); color: var(--nacht-text); border: 1px solid var(--nacht-linie);
}
.kanal .k-zeichen svg { inline-size: 22px; block-size: 22px; }
.kanal .k-zeichen-wa { color: #25D366; }

/* Der schwebende WhatsApp-Knopf: nur auf dem Telefon, sonst unsichtbar. */
.wa-fab { display: none; }
@media (max-width: 860px) {
  .wa-fab {
    position: fixed; z-index: 25;
    inset-inline-end: var(--s4);
    inset-block-end: calc(var(--s4) + env(safe-area-inset-bottom, 0px));
    display: grid; place-items: center;
    inline-size: 56px; block-size: 56px; border-radius: 50%;
    background: #25D366; color: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .28);
  }
  .wa-fab svg { inline-size: 30px; block-size: 30px; }
  .wa-fab:focus-visible { outline: 3px solid var(--flamme); outline-offset: 3px; }
  /* Am Seitenende steht der Kontakt-Block mit demselben Kanal: dort blendet der Knopf aus,
     damit er nicht ueber dem Text und der Fusszeile schwebt. Ohne Skript, an den Scrollweg gebunden. */
  @supports (animation-timeline: scroll()) {
    .wa-fab { animation: fab-weg linear both; animation-timeline: scroll(root); animation-range: 86% 100%; }
  }
  /* Damit der Knopf die Sprachleiste der Fusszeile nie verdeckt. */
  .site-footer { padding-block-end: calc(var(--s8) + 72px); }
}
@media print { .wa-fab { display: none; } }
@keyframes fab-weg { to { opacity: 0; transform: translateY(16px); visibility: hidden; } }
.hero-note { margin-block-start: var(--s3); }

.site-footer { padding-block: var(--s16) var(--s8); border-block-start: 1px solid var(--nacht-linie); }
.footer-grid { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: var(--s8) var(--s6); }
/* Der Name, gross und leise, in der Farbe der Linien: Schrift, nicht das Zeichen. */
.footer-wortmarke {
  margin-block: var(--s16) 0;
  font-size: clamp(3.5rem, 13.5vw, 12.5rem);
  font-weight: 700; letter-spacing: -0.05em; line-height: 0.85;
  color: var(--nacht-linie);
  user-select: none;
}
.footer-brand img { block-size: 30px; inline-size: auto; }
.footer-brand p { margin-block-start: var(--s4); font-size: var(--t-small); color: var(--nacht-text-2); max-inline-size: 30ch; }
.footer-col .fh { font-size: var(--t-small); font-weight: 700; color: var(--nacht-text); margin-block-end: var(--s4); }
.footer-col nav { display: grid; gap: var(--s3); }
.footer-col nav a { font-size: var(--t-small); color: var(--nacht-text-2); text-decoration: none; transition: color var(--hover); }
.footer-col nav a:hover { color: var(--nacht-text); }
.footer-col nav a.fl-cookie { display: inline-flex; align-items: center; gap: var(--s2); }
.footer-col nav a.fl-cookie svg { flex: none; }
.footer-bottom {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s4); margin-block-start: var(--s16); padding-block-start: var(--s6);
  border-block-start: 1px solid var(--nacht-linie);
  font-size: var(--t-small); color: var(--nacht-text-2);
}
.footer-bottom > span { max-inline-size: 70ch; }
.footer-langs { display: flex; flex-wrap: wrap; gap: var(--s4); }
.footer-langs a { font-size: var(--t-small); color: var(--nacht-text-2); text-decoration: none; }
.footer-langs a:hover { color: var(--nacht-text); }
.footer-langs a[aria-current="true"] { color: var(--nacht-text); font-weight: 700; }

/* --- 07 Unterseiten ------------------------------------------------------ */

.subhero { padding-block: var(--s12) var(--s8); }
.subhero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--s16);
  align-items: center;
}
.subhero h1 { margin-block-end: var(--s6); }
.subhero-copy > :last-child { margin-block-end: 0; }
.subhero-copy .spalten-2 { margin-block-start: var(--s8); }
.subhero-foto { aspect-ratio: 4 / 3; }

.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s16); align-items: center; }
.duo-rev .duo-visual { order: -1; }
.duo-top { align-items: start; }
.duo-copy h2 { margin-block-end: var(--s4); }
.duo-copy p + p { margin-block-start: var(--s4); }
.duo-copy .btn, .duo-copy .link-arrow { margin-block-start: var(--s8); }
/* Ein Telefon im Duo: mittig, und nur so hoch, wie der Text daneben traegt. */
.duo-telefon { display: flex; justify-content: center; }

/* Merkmale: zwei Spalten Zeilen, jede unter einer Haarlinie – wie ein
   Leistungsverzeichnis, ohne Haken im Kreis. */
.merkmale { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s8); margin-block-start: var(--s12); }
.merkmale .mk {
  padding-block: var(--s3);
  border-block-start: var(--hair);
  font-size: var(--t-small);
  color: var(--tinte-2);
}
.merkmale .mk b { color: var(--tinte); }

/* Pakete (D-206): drei Karten nebeneinander, Komplett mit kräftigerem Rand als Empfehlung; Zeilen
   unter Haarlinien wie bei den Merkmalen, ohne Haken. Darunter das Angebot für die ersten zehn Häuser
   auf matter Fläche. Keine Zahl: der Preis steht im Angebot. */
.pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); margin-block-start: var(--s12); align-items: stretch; }
.paket {
  display: flex; flex-direction: column; gap: var(--s4);
  padding: var(--s8); background: var(--papier);
  border: 1px solid var(--linie-stark); border-radius: var(--radius-card);
  min-width: 0;
}
.paket h3 { font-size: var(--t-h3); }
.paket-zeile { color: var(--tinte-2); font-size: var(--t-small); margin: 0; }
.paket-komplett { border: 2px solid var(--tinte); }
.paket-komplett .paket-zeile { color: var(--tinte); font-weight: 700; }
.paket-liste { list-style: none; margin: 0; padding: 0; flex: 1; }
.paket-liste li { padding-block: var(--s3); border-block-start: var(--hair); font-size: var(--t-small); color: var(--tinte-2); }
.paket .btn { align-self: flex-start; }
.gruender {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s8); align-items: center;
  margin-block-start: var(--s8); padding: var(--s8);
  background: var(--papier-2); border-radius: var(--radius-card);
}
.gruender-text { display: grid; gap: var(--s3); min-width: 0; }
.gruender-text h3 { font-size: var(--t-h3); }
.gruender-text p { margin: 0; }
.gruender-bedingung { color: var(--tinte-2); font-size: var(--t-small); }
@media (max-width: 860px) {
  .pakete { grid-template-columns: minmax(0, 1fr); }
  .gruender { grid-template-columns: minmax(0, 1fr); }
}

.fnk-top { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s12); align-items: center; }
.fnk-top.rev .fnk-shot { order: -1; }
.fnk-top-phone { grid-template-columns: minmax(0, 1fr) auto; }
.fnk-head h2 { margin-block-start: 0; }
.fnk-shot .shot-img { max-block-size: 460px; overflow: hidden; }
.fnk-shot .shot-img img { object-fit: cover; object-position: top; }
.fnk-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4); margin-block-start: var(--s4); }
.fnk-link { margin-block-start: var(--s8); }
.fnk .plate { margin-block-start: var(--s8); }
.fnk .fnk-top .plate { margin-block-start: 0; }

.paare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s12) var(--s16); }
.paare h3 { font-size: var(--t-h3); margin-block-end: var(--s3); }
.spalten-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s8); }

/* FAQ als <details>: kein Skript, die Tastatur kann es von Haus aus. */
.faq-liste { max-inline-size: 78ch; display: grid; }
.faq-item { border-block-start: var(--hair); }
.faq-item:last-child { border-block-end: var(--hair); }
.faq-item > summary {
  list-style: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s6);
  padding-block: var(--s6);
  font-weight: 700; font-size: var(--t-body); color: var(--tinte);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: '+';
  flex: none;
  display: grid; place-items: center;
  inline-size: 32px; block-size: 32px; border-radius: 50%;
  background: var(--papier-2);
  font-weight: 500; font-size: 1.25rem; line-height: 1;
  transition: transform 260ms var(--ease-out), background-color var(--hover);
}
.faq-item[open] > summary::after { transform: rotate(45deg); background: var(--flamme); }
.faq-item > p { padding-block: 0 var(--s6); max-inline-size: 64ch; }

/* Die Allergen-Pruefung als Beispiel. Kein nachgebauter Bildschirm: der
   Eintrag steht, wie er auf einer gedruckten Karte stuende (Name, dahinter die
   angegebenen Kennbuchstaben, darunter die Beschreibung). Die Woerter, die
   einen Befund ausloesen, sind unterkringelt wie in einer Rechtschreibpruefung
   – das Zeichen kennt jeder, der je einen Brief getippt hat. Darunter die
   Befunde als Saetze und die Unterschriftszeile. */
.pruefbeispiel { background: var(--papier-2); border-radius: var(--radius-card); padding: var(--s8); }
.pb-eintrag { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s1) var(--s4); }
.pb-name { font-size: var(--t-h3); font-weight: 700; color: var(--tinte); }
.pb-kz { font-size: var(--t-small); color: var(--tinte-2); }
.pb-text { margin-block-start: var(--s2); }
.pruefbeispiel .hit {
  color: var(--tinte);
  text-decoration: underline wavy var(--glut);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 5px;
  text-decoration-skip-ink: none;
}
.pb-befund { margin-block-start: var(--s6); padding-block-start: var(--s4); border-block-start: var(--hair); font-size: var(--t-small); }
.pb-befund p { color: var(--tinte-2); }
.pb-befund p + p { margin-block-start: var(--s1); }
.pb-befund .pb-kopf { font-weight: 700; color: var(--glut-schrift); }
.pruefbeispiel .unterschrift { margin-block-start: var(--s8); }

/* Das offene Demo-Haus. Breitengrenze auf dem Kind, nicht auf .wrap. */
.demo-offen { padding-block-end: var(--s16); max-inline-size: 72ch; }
.demo-offen h2 { margin-block-end: var(--s3); }
.demo-offen p { margin-block-end: var(--s4); }
.btn-reihe { display: flex; flex-wrap: wrap; gap: var(--s3); }
.demo-offen .zugang { font-size: var(--t-small); font-variant-numeric: tabular-nums; color: var(--tinte); }
.demo-offen .zugang span { white-space: nowrap; }

.legal { padding-block: var(--s12) var(--s16); max-inline-size: 72ch; }
/* «Datenschutzerklärung» ist ein Wort von 20 Buchstaben: in Schaugroesse laeuft
   es auf dem Telefon 68px ueber den Rand. Kleiner, und notfalls getrennt. */
.legal h1 { margin-block-end: var(--s8); font-size: clamp(1.9rem, 1.2rem + 3vw, 3rem); hyphens: auto; overflow-wrap: anywhere; }
.legal h2 { font-size: var(--t-body); font-weight: 700; line-height: 1.35; margin-block: var(--s8) var(--s3); }
.legal p + p { margin-block-start: var(--s3); }
.legal .keks-tabelle { inline-size: 100%; border-collapse: collapse; font-size: var(--t-small); margin-block: var(--s4) var(--s6); }
.legal .keks-tabelle th, .legal .keks-tabelle td { text-align: start; vertical-align: top; padding: var(--s3) var(--s4) var(--s3) 0; border-block-end: var(--hair); font-weight: 400; }
.legal .keks-tabelle thead th { font-weight: 700; color: var(--tinte-2); border-block-end: 1px solid var(--linie-stark); }
.legal .keks-tabelle tbody th { font-weight: 500; inline-size: 26%; }
.legal .keks-tabelle code { overflow-wrap: break-word; }
.legal .keks-tabelle__art { display: block; margin-block-start: var(--s1); font-size: .8125rem; color: var(--tinte-2); }

/* --- 07b Dienst-, Regions- und Ratgeberseiten (24.09.2026) --------------- */

/* Fliesstext: eine Lesespalte, Kapitel statt Karten. Die Ratgeber kommen als
   fertiger Koerper aus der Vorlage, deshalb greifen die Regeln ueber Elementnamen. */
.artikel { max-inline-size: 68ch; }
.artikel > * + * { margin-block-start: var(--s4); }
.artikel > h2 { margin-block-start: var(--s12); }
/* Lange deutsche Woerter («Infektionsschutzbelehrung») sprengen sonst auf dem Telefon die Zeile (12.10.2026). */
.artikel h2, .artikel h3, .ratgeber-liste a { hyphens: auto; overflow-wrap: break-word; }
.artikel > h2:first-child { margin-block-start: 0; }
.artikel > h2 + * { margin-block-start: var(--s4); }
.artikel ul, .artikel ol { padding-inline-start: 1.25em; display: grid; gap: var(--s2); }
.artikel li::marker { color: var(--flamme); }
.artikel strong, .artikel b { color: var(--tinte); font-weight: 700; }
.artikel a { color: var(--glut-schrift); text-underline-offset: .18em; }
.artikel .faq-liste { margin-block-start: var(--s4); }

/* «Kurz gesagt» (11.10.2026): die Antwort steht zuerst, fuer den Leser und fuer Suchmaschinen,
   die eine Antwort zitieren. Groesser als der Fliesstext, unter ihm eine Haarlinie, kein Kasten. */
.artikel .kurz { font-size: 1.125rem; line-height: 1.6; color: var(--tinte); padding-block-end: var(--s6); border-block-end: var(--hair); }

/* Ratgeber nach Themen (/ratgeber/) und «Weiterlesen» unter jedem Artikel. */
.ratgeber-thema + .ratgeber-thema { margin-block-start: var(--s16); }
.ratgeber-thema .lead { margin-block: var(--s4) var(--s8); max-inline-size: 62ch; }
.ratgeber-weiter .sec-kopf { margin-block-end: var(--s8); }

.tabelle { inline-size: 100%; border-collapse: collapse; font-size: var(--t-small); margin-block: var(--s6); }
.tabelle th, .tabelle td { text-align: start; vertical-align: top; padding: var(--s3) var(--s4) var(--s3) 0; border-block-end: var(--hair); font-weight: 400; line-height: 1.5; }
.tabelle thead th { font-weight: 700; color: var(--tinte-2); border-block-end: 1px solid var(--linie-stark); }
.tabelle tbody td:first-child { font-weight: 500; color: var(--tinte); }

/* Provisionsrechner (11.10.2026): vier Radioknoepfe, jede Wahl zeigt ihre fertig gerechnete
   Tabelle. Kein Skript. Form nach 21st.dev @balick/segmented-control, Pillen wie .tablet-tabs. */
.rechner { padding-block: var(--s6); border-block: var(--hair); }
.rechner-r { position: absolute; opacity: 0; pointer-events: none; }
.rechner-frage { font-weight: 700; color: var(--tinte); }
.rechner-wahl { display: flex; flex-wrap: wrap; gap: var(--s2); margin-block-start: var(--s3); }
.rechner-wahl label {
  padding: 9px 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--linie-stark);
  background: var(--papier);
  font-size: var(--t-small); font-weight: 700; color: var(--tinte-2);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: color var(--hover), background-color var(--hover), border-color var(--hover);
}
.rechner-wahl label:hover { color: var(--tinte); border-color: var(--tinte); }
#rr-1:checked ~ .rechner-wahl label:nth-of-type(1),
#rr-2:checked ~ .rechner-wahl label:nth-of-type(2),
#rr-3:checked ~ .rechner-wahl label:nth-of-type(3),
#rr-4:checked ~ .rechner-wahl label:nth-of-type(4) { background: var(--tinte); color: #FFFFFF; border-color: var(--tinte); }
#rr-1:focus-visible ~ .rechner-wahl label:nth-of-type(1),
#rr-2:focus-visible ~ .rechner-wahl label:nth-of-type(2),
#rr-3:focus-visible ~ .rechner-wahl label:nth-of-type(3),
#rr-4:focus-visible ~ .rechner-wahl label:nth-of-type(4) { outline: 3px solid var(--veilchen); outline-offset: 2px; }
.rechner .re { display: none; font-variant-numeric: tabular-nums; }
#rr-1:checked ~ .rechner-ergebnis .re1,
#rr-2:checked ~ .rechner-ergebnis .re2,
#rr-3:checked ~ .rechner-ergebnis .re3,
#rr-4:checked ~ .rechner-ergebnis .re4 { display: table; }
.rechner .re tbody tr:last-child td { color: var(--tinte); font-weight: 700; }

/* FAQ-Fragen sind Ueberschriften (h2 auf /faq/, h3 auf Dienst- und Ratgeberseiten),
   sehen aber aus wie die Zeile, in der sie stehen. */
.faq-item > summary > h2, .faq-item > summary > h3 { font: inherit; letter-spacing: inherit; margin: 0; }

/* Kopf eines Ratgebers: Brotkrume, Titel, Vorspann, Datum. */
.artikel-kopf h1 { font-size: clamp(1.9rem, 1.15rem + 2.8vw, 3.2rem); hyphens: auto; overflow-wrap: anywhere; }
.krumen { font-size: var(--t-small); margin-block-end: var(--s4); }
.krumen a { color: var(--tinte-2); text-decoration: none; transition: color var(--hover); }
.krumen a::before { content: '\2190\00a0'; }
.krumen a:hover { color: var(--tinte); }
.artikel-datum { margin-block-start: var(--s6); }
.artikel-cta { max-inline-size: 62ch; }
.artikel-cta p { margin-block: var(--s4) var(--s8); }

/* Ratgeber-Liste: drei Spalten mit Haarlinie, keine Karten. */
.ratgeber-liste { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s8); }
.ratgeber-liste li { display: grid; gap: var(--s3); align-content: start; padding-block-start: var(--s4); border-block-start: 2px solid var(--flamme); }
.ratgeber-liste a { font-weight: 700; font-size: var(--t-h3); line-height: 1.25; color: var(--tinte); text-decoration: none; text-wrap: balance; transition: color var(--hover); }
.ratgeber-liste a:hover { color: var(--glut-schrift); }
.ratgeber-liste span { font-size: var(--t-small); color: var(--tinte-2); line-height: 1.55; }
.ratgeber-kurz .sec-kopf { margin-block-end: var(--s8); }

/* Regionsseite: die Staedte als Raster mit Kennlinie. */
.staedte { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8) var(--s8); }
.stadt { padding-block-start: var(--s4); border-block-start: 2px solid var(--flamme); }
.stadt h3 { font-size: var(--t-body); margin-block-end: var(--s2); }
.stadt p { font-size: var(--t-small); color: var(--tinte-2); line-height: 1.55; }

/* Ort auf der Startseite, Anschrift in der Fusszeile. */
.ort { margin-block-start: var(--s6); max-inline-size: 62ch; }
.ort a { color: var(--tinte); font-weight: 600; }
.footer-adresse { font-style: normal; margin-block-start: var(--s4); font-size: var(--t-small); line-height: 1.6; color: var(--nacht-text-2); }
.footer-adresse a { color: inherit; text-decoration: none; transition: color var(--hover); }
.footer-adresse a:hover { color: var(--nacht-text); }

@media (max-width: 1000px) {
  .staedte, .ratgeber-liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .staedte, .ratgeber-liste { grid-template-columns: minmax(0, 1fr); }
  /* Mehrere Spalten passen nicht auf ein Telefon: jede Zeile wird ein Block, die Spaltenkoepfe
     stehen als kleine Beschriftung ueber jedem Wert (data-label, wie bei .keks-tabelle).
     Eine Tabelle, die in sich scrollt, versteckt die Haelfte der Spalten ohne Hinweis. */
  .tabelle thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .tabelle, .tabelle tbody, .tabelle tr, .tabelle td { display: block; }
  .tabelle tr { padding-block: var(--s3); border-block-end: var(--hair); }
  .tabelle td { padding: var(--s1) 0; border: 0; }
  .tabelle tbody td:first-child { font-size: 1.0625rem; padding-block-end: var(--s2); }
  .tabelle tbody td:first-child::before { content: none; }
  .tabelle td::before { content: attr(data-label); display: block; font-size: .8125rem; color: var(--tinte-2); font-weight: 400; }
  #rr-1:checked ~ .rechner-ergebnis .re1,
  #rr-2:checked ~ .rechner-ergebnis .re2,
  #rr-3:checked ~ .rechner-ergebnis .re3,
  #rr-4:checked ~ .rechner-ergebnis .re4 { display: block; }
}

/* Preisseite: was der Markt nimmt — drei Zeilen mit Haarlinie, keine Tabelle. */
.markt { display: grid; margin: 0; }
.markt-zeile {
  display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s4) var(--s8);
  padding-block: var(--s6); border-block-start: var(--hair);
}
.markt-zeile:last-child { border-block-end: var(--hair); }
.markt dt { font-weight: 700; color: var(--tinte); }
.markt dd { margin: 0; color: var(--tinte-2); }
.markt-schluss { margin-block-start: var(--s8); max-inline-size: 60ch; }
.merkmale-oben { margin-block-start: 0; }
.merkmale-eins { grid-template-columns: minmax(0, 1fr); }
.versprechen h2 { margin-block-end: var(--s6); }
@media (max-width: 640px) {
  .markt-zeile { grid-template-columns: minmax(0, 1fr); gap: var(--s1); }
}

/* --- 07c Anfrage (D-231) ------------------------------------------------- */

/* Form nach 21st.dev «Contact Form» (kevingirelli/contact-form): links Satz und drei Schritte,
   rechts das Formular auf einer Karte. Die Schritte sind eine Liste mit Haarlinien und der Zahl
   als Wort in Rot, keine Kreise. Pflicht ist nur die Adresse; das Kaestchen ist nie vorab gesetzt. */
.anfrage-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s16); align-items: start;
}
.anfrage-copy h1 { margin-block-end: var(--s6); }
.anfrage-schritte { list-style: none; margin: var(--s8) 0 0; padding: 0; counter-reset: schritt; }
.anfrage-schritte li {
  display: grid; grid-template-columns: 2.5ch minmax(0, 1fr); gap: var(--s3);
  padding-block: var(--s4); border-block-start: var(--hair);
  color: var(--tinte-2); counter-increment: schritt;
}
.anfrage-schritte li:last-child { border-block-end: var(--hair); }
.anfrage-schritte li::before { content: counter(schritt) "."; font-weight: 700; color: var(--glut-schrift); }
.anfrage-schritte b { color: var(--tinte); }
.anfrage-lieber { margin-block-start: var(--s8); }
.anfrage-lieber a, .anfrage-ergebnis-text .cap a { color: var(--tinte); }
.anfrage-nummer { direction: ltr; unicode-bidi: isolate; }

.anfrage-karte {
  position: relative;
  display: grid; gap: var(--s4);
  padding: var(--s8);
  background: var(--papier);
  border: var(--hair);
  border-radius: var(--radius-card);
  box-shadow: var(--schatten);
}
.feld { display: grid; gap: var(--s2); margin: 0; }
.feld label { font-size: var(--t-small); font-weight: 700; color: var(--tinte); }
.feld-frei { font-weight: 500; color: var(--tinte-2); }
.feld input {
  inline-size: 100%;
  padding: 14px 16px;
  font: inherit; font-size: var(--t-body); color: var(--tinte);
  background: var(--papier-2);
  border: 1px solid var(--linie-stark);
  border-radius: var(--radius-chip);
  transition: border-color var(--hover), background-color var(--hover), box-shadow var(--hover);
}
.feld input:focus-visible { outline: none; border-color: var(--rot); background: var(--papier); box-shadow: 0 0 0 3px var(--rot-matt); }
.feld-hint { margin: 0; font-size: var(--t-small); line-height: 1.5; color: var(--tinte-2); }
.feld-hint a { color: var(--tinte); }
/* Die Falle fuer Skripte: aus dem Bild und aus dem Vorlesen, aber im Formular. */
.feld-falle { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.feld-haken {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3); align-items: start;
  font-size: var(--t-small); line-height: 1.55; color: var(--tinte-2); cursor: pointer;
}
.feld-haken input { inline-size: 20px; block-size: 20px; margin: 2px 0 0; accent-color: var(--rot); }
.anfrage-knopf { justify-self: start; }

.anfrage-ergebnis-text { max-inline-size: 62ch; }
.anfrage-ergebnis-text h1 { margin-block-end: var(--s6); }
.anfrage-ergebnis-text .btn-reihe { margin-block: var(--s8) var(--s6); }

@media (max-width: 1000px) {
  .anfrage-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s12); }
}
@media (max-width: 560px) {
  .anfrage-karte { padding: var(--s6); }
  .anfrage-knopf { justify-self: stretch; }
}

/* --- 08 Bewegung --------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > * { animation: aufsteigen 900ms var(--ease-out) both; }
  .hero-copy > :nth-child(1) { animation-delay: 60ms; }
  .hero-copy > :nth-child(2) { animation-delay: 180ms; }
  .hero-copy > :nth-child(3) { animation-delay: 300ms; }
  .hero-foto { animation: einschweben 1200ms var(--ease-out) 120ms both; }
  .hero-phone { animation: aufsteigen 900ms var(--ease-out) 560ms both; }
  /* Die Karte im Telefon rollt hinunter und wieder hinauf: 16 s je Richtung, erst nachdem
     das Telefon steht. Ohne Container-Einheiten (alte Browser) steht sie einfach oben. */
  .phone .shot-img img { animation: karte-rollen 16s ease-in-out 2200ms infinite alternate; }
  .laufband-spur { animation: laufen 52s linear infinite; }
  .rund-s { animation: einblenden 480ms var(--ease-out) both; }

  /* Aufblenden beim Scrollen: an die Sichtbarkeit gebunden, nicht an die Zeit.
     Wo der Browser das nicht kann, steht alles einfach da. */
  @supports (animation-timeline: view()) {
    .reveal { animation: aufsteigen linear both; animation-timeline: view(); animation-range: entry 0% entry 38%; }
    .reveal:nth-child(2) { animation-range: entry 8% entry 46%; }
    .reveal:nth-child(3) { animation-range: entry 16% entry 54%; }
    .reveal:nth-child(4) { animation-range: entry 24% entry 62%; }
    .abend-bild img { animation: gleiten linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }

}

/* `translate`/`scale` statt `transform`: ein `transform` in diesen Keyframes
   wuerde jedes `transform` des Elements selbst (Hover-Hub) ueberschreiben. */
@keyframes aufsteigen {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: none; }
}
@keyframes einschweben {
  from { opacity: 0; scale: 1.04; }
  to   { opacity: 1; scale: 1; }
}
@keyframes karte-rollen {
  from { translate: 0 0; }
  to   { translate: 0 calc(100cqh - 100%); }
}
@keyframes einblenden {
  from { opacity: 0; translate: 0 10px; }
  to   { opacity: 1; translate: none; }
}
@keyframes gleiten {
  from { translate: 0 -6%; }
  to   { translate: 0 6%; }
}
@keyframes laufen { to { translate: -50% 0; } }

/* Bei ausdruecklichem Ruhewunsch steht alles. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* --- 09 Schmale Schirme -------------------------------------------------- */

@media (max-width: 1000px) {
  :root { --wrap: 740px; }
  .brand img { block-size: 34px; }
  .abschnitt, .platte, .panel, .kontakt { padding-block: var(--s16); }
  .platte-schmal { padding-block: var(--s12); }
  .hero { padding-block: var(--s8) var(--s12); }
  .hero-grid, .was-grid, .vertrauen-grid, .faq-kurz-grid, .kontakt-grid, .subhero-grid, .duo, .fnk-top, .fnk-top-phone { grid-template-columns: minmax(0, 1fr); gap: var(--s12); }
  .hero-visual { padding-inline-start: 0; padding-block-end: var(--s6); }
  .hero-foto { aspect-ratio: 16 / 11; }
  .hero-phone { inline-size: 150px; inset-inline-start: var(--s4); padding: 6px; border-radius: 28px; }
  .hero-phone .shot-img { border-radius: 22px; }
  .was-foto { aspect-ratio: 3 / 2; }
  .was-punkte { grid-template-columns: minmax(0, 1fr); gap: var(--s4); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .z-website, .z-karte, .z-res, .z-abh { grid-column: 1 / -1; grid-row: auto; }
  .z-abh { grid-template-columns: minmax(0, 1fr); }
  .z-abh .foto { min-block-size: 0; aspect-ratio: 16 / 10; }
  .abend { min-block-size: 520px; }
  .abend-copy { padding-block: var(--s16) var(--s12); }
  .rund-seite { flex-wrap: nowrap; overflow-x: auto; padding-block-end: var(--s2); }
  .rund-seite label { white-space: nowrap; }
  .wen-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wen, .wen-breit { grid-column: span 1; }
  .wen-breit .foto { aspect-ratio: 4 / 5; }
  .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kachel { min-block-size: 0; }
  .preis-flaeche { grid-template-columns: minmax(0, 1fr); gap: var(--s8); padding: var(--s8); }
  .stapel { justify-self: start; }
  .fakten, .schritte, .merkmale, .paare, .spalten-2, .fnk-duo { grid-template-columns: minmax(0, 1fr); }
  .duo-rev .duo-visual, .fnk-top.rev .fnk-shot { order: 0; }
  .subhero-foto { aspect-ratio: 16 / 10; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .nav-links { display: none; }
  .menue { display: block; }
  .menue[open] + .menue-liste { display: grid; }
}

@media (max-width: 640px) {
  :root { --wrap: 100%; --radius-foto: 20px; --radius-card: 16px; }
  .wrap { inline-size: min(100% - 2 * var(--s6), var(--wrap)); }
  .site-header > .wrap { gap: var(--s3); min-block-size: 64px; }
  .brand img { block-size: 30px; }
  .header-side .nav-demo { display: none; }
  .hero-ctas .btn { flex: 1 1 auto; }
  .hero-foto { aspect-ratio: 1 / 1; }
  .hero-phone { inline-size: 132px; padding: 5px; border-radius: 26px; }
  .hero-phone .shot-img { border-radius: 21px; }
  .kanal .k-wert { font-size: var(--t-small); }
  :root { --radius-bogen: 20px; }
  .wen-raster { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .wen .foto, .wen-breit .foto { aspect-ratio: 4 / 3; }
  /* Auf dem Telefon werden die Kacheln eine Liste: Zeichen, Text, Pfeil in einer Zeile —
     zwei schmale Spalten brachen jedes Wort um und machten aus acht Kacheln vier Schirme. */
  .kacheln { grid-template-columns: minmax(0, 1fr); gap: var(--s2); }
  .kachel { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: none; align-items: center; gap: var(--s4); padding: var(--s4); }
  .kachel .kz { inline-size: 24px; block-size: 24px; }
  .preis-flaeche { padding: var(--s6); }
  .zelle, .fakt, .kanal { padding: var(--s6); }
  .z-abh .zelle-text { padding: var(--s6); }
  .z-karte .plate, .z-res .plate { margin-inline-start: 0; }
  .abend { min-block-size: 480px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s6); }
  .legal .keks-tabelle thead { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); }
  .legal .keks-tabelle, .legal .keks-tabelle tbody, .legal .keks-tabelle tr, .legal .keks-tabelle th, .legal .keks-tabelle td { display: block; }
  .legal .keks-tabelle tr { padding-block: var(--s3); border-block-end: var(--hair); }
  .legal .keks-tabelle th, .legal .keks-tabelle td { padding: var(--s1) 0; border: 0; }
  .legal .keks-tabelle tbody th { inline-size: auto; }
  .legal .keks-tabelle td::before { content: attr(data-label); display: block; font-size: .8125rem; color: var(--tinte-2); }
}

/* --- 10 Rechts-nach-links (ar) ------------------------------------------- */

/* Technische Zeichenketten laufen links-nach-rechts, auch auf einer arabischen
   Seite. Ohne Isolierung wandert der Doppelpunkt an den Anfang. */
.kanal .k-wert, .demo-offen .zugang { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .kanal .k-wert { text-align: right; }

[dir="rtl"] .kanal .k-pfeil, [dir="rtl"] .kachel .kp { transform: scaleX(-1); }
[dir="rtl"] .laufband-spur { animation-direction: reverse; }

[lang="ar"] body { line-height: 1.9; }
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3 { line-height: 1.35; letter-spacing: 0; }
[lang="ar"] .zelle h3 { letter-spacing: 0; }

@media (prefers-reduced-motion: no-preference) {
  .hero-copy > :nth-child(4) { animation-delay: 420ms; }
}