/*! © 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 */
/* ═══ TATAMI ═════════════════════════════════════════════════════════════════════════════════
   Der vierte Aufbau (D-160, 20.09.2026). Geladen NUR, wenn ein Haus ihn gewählt hat — nach
   site.css und vor brand.css, damit eine Regel hier die Grundplatte schlägt und die Hausfarbe
   beide schlägt (siehe `Layout::stilvorlage()`).

   WAS DIESEN AUFBAU AUSMACHT, in einem Satz: die KARTE ist die Gestaltung. Er ist für das Haus
   gebaut, dessen Substanz die Rubriken sind und nicht die Fotografie — gemessen an Ghien
   Tempura: 30 Rubriken, 178 Gerichte, sechs Bilder, kein geschriebenes Band. Deshalb ein
   strenges Modul aus Quadraten, viel Luft, Haarlinien, ein Akzent; die wenigen guten Bilder
   stehen gross und selten dazwischen.

   ⛔ KEINE KÜCHEN-DEKORATION. Kein Sushi-Muster, kein Bambus, keine Kirschblüte, kein Drache.
      Ofen legt ein Pizzamuster hinter jedes Haus, das ihn wählt, und musste deshalb auf
      Pizzerien beschränkt werden. Dieser Aufbau soll das vietnamesische, das thailändische und
      das japanische Haus gleich gut tragen — asiatisch wird er durch Mass, Raster und Ruhe.

   ⛔ NICHTS LEUCHTET, NICHTS WANDERT. Bühne gleitet, Ofen scrubbt einen Film. Hier deckt nur
      auf, was hereinkommt, einmal. Eine Kachel, die beim Scrollen wandert, zerlegt das Raster,
      und das Raster IST der Entwurf.

   ⚠️ DUNKEL IST DIE VORGABE, NICHT DER ZWANG. Gezeichnet ist beides: die Grundregeln stehen für
      «Tag», der Nachtsatz hängt wie überall an `:root[data-theme="dark"]` (tokens.css,
      `Helligkeit`). `Layout::vorgabeHelligkeit()` stellt den Schalter beim Wechsel sichtbar auf
      Nacht; zurückstellen darf der Wirt jederzeit.
   ════════════════════════════════════════════════════════════════════════════════════════════ */

/* ── 0 · Schriften (selbst ausgeliefert; CSP font-src 'self') ─────────────────────────────── */
/* EINE FAMILIE, UND DAS IST DER UNTERSCHIED ZU BÜHNE. Bühne führt eine Serife, Ofen eine fette
   Grotesk. Hier trägt EINE Grotesk in drei Schnitten alles: 300 für die grossen Zeilen, 400 für
   den Text, 600 für die gesperrten Marken. Die Ruhe kommt aus dem Mass, nicht aus dem Wechsel. */
/* D-255 (13.10.2026): die Grotesk des Themas, Hanken Grotesk, statt Schibsted — eine Familie im Produkt. */
@font-face {
    font-family: "Hanken Grotesk";
    src: url("/assets/fonts/hanken-grotesk.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
/* Georgisch nur, wo georgische Zeichen stehen: `unicode-range` lässt den Browser die Datei gar
   nicht erst laden, wenn ein Haus keine hat. */
@font-face {
    font-family: "Noto Serif Georgian";
    src: url("/assets/fonts/noto-serif-georgian.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
    unicode-range: U+10A0-10FF, U+1C90-1CBF, U+2D00-2D2F;
}

/* ── 1 · Ton: Farben, Schrift, Mass ───────────────────────────────────────────────────────── */
.layout-tatami {
    --ta-grund: #FAF9F7;
    --ta-flaeche: #F1EFEA;
    --ta-tiefe: #E4E1DA;
    --ta-tinte: #15171A;
    --ta-tinte-weich: #5C6167;
    --ta-linie: rgba(21, 23, 26, .12);
    --ta-linie-fest: rgba(21, 23, 26, .26);

    --ta-akzent: var(--accent);
    --ta-akzent-tief: var(--accent-strong);
    --ta-akzent-tinte: var(--accent-ink);
    --ta-auf-akzent: var(--on-accent);

    --ta-schrift: "Hanken Grotesk", "Noto Serif Georgian", system-ui, -apple-system, "Segoe UI", sans-serif;
    /* Eine Familie bleibt eine Familie: auch die Stellen des Grundblatts, die `--serif` lesen (Marke,
       Standortwahl), setzen hier die Grotesk — nicht die Serife des Themas. */
    --serif: var(--ta-schrift);

    --ta-breite: 1320px;
    --ta-rand: clamp(16px, 4vw, 56px);
    --ta-abstand: clamp(68px, 7.6vw, 128px);
    --ta-luft: clamp(28px, 3.2vw, 52px);
    /* Die Fuge des Rasters — dasselbe Mass zwischen Kacheln, Gerichten und Bildern. Ein Raster,
       dessen Fugen sich je Abschnitt ändern, liest man als drei Raster. */
    --ta-fuge: clamp(10px, 1.1vw, 18px);
    --ta-r: 2px;
    /* Der grosse Radius: Tafel, Kacheln, Gerichtkarten, Bildfenster. Der kleine (2 px) bleibt
       für Knöpfe und Felder — ein Knopf mit 22 px Radius wäre eine Pille und spräche eine
       andere Sprache als der Rest dieses Aufbaus. */
    --ta-r-gross: clamp(14px, 1.5vw, 24px);
    --ta-kurve: cubic-bezier(.22, .8, .3, 1);
    --ta-zeit: .8s;

    background: var(--ta-grund);
    color: var(--ta-tinte);
    font-family: var(--ta-schrift);
}

/* DIE NACHT, und sie ist der Zustand, für den dieser Aufbau gedacht ist: ein Abendhaus. Grund
   und Tinte tauschen, die Tinte bleibt WARM (#F0EDE8, nicht Weiss) — reines Weiss auf Schwarz
   flirrt bei langen Listen, und dieser Aufbau besteht aus Listen. */
:root[data-theme="dark"] .layout-tatami {
    --ta-grund: #0D0E10;
    --ta-flaeche: #16181B;
    --ta-tiefe: #202328;
    --ta-tinte: #F0EDE8;
    --ta-tinte-weich: #9DA2A9;
    --ta-linie: rgba(240, 237, 232, .13);
    --ta-linie-fest: rgba(240, 237, 232, .3);

    --line: rgba(240, 237, 232, .18);
    --c-line: rgba(240, 237, 232, .18);
    --gold: #8D9198;
    --gold-ink: #C0C4CA;
    --enamel: #7CCB9A;

    /* ⛔ DIE HAUSFARBE BLEIBT SATT — gemessen und korrigiert. tokens.css hellt `--accent` für die
          Nacht zu einem Pastell auf, damit dunkle Schrift darauf trägt; bei dem Orange dieses
          Hauses wurde daraus ein Lachsrosa, und «Tisch reservieren» — der wichtigste Knopf der
          Seite — stand blass auf schwarzem Grund. Der Knopf trägt deshalb die echte Hausfarbe
          mit der dafür gerechneten Schrift (`--c-on-accent`, App\Site\Kontrast); aufgehellt wird
          nur, wo die Farbe als SCHRIFT auf dem dunklen Grund steht. Dieselbe Regel und derselbe
          Grund wie in ofen.css. */
    --accent: var(--c-accent);
    --accent-strong: var(--c-accent-2);
    --on-accent: var(--c-on-accent, #FFFFFF);
}
/* Die Hausfarbe als SCHRIFT auf dunklem Grund wird angehoben, der Knopf behält seine echte
   Farbe mit der gerechneten Schrift darauf (App\Site\Kontrast) — dieselbe Regel wie in
   ofen.css, und aus demselben Grund: ein Tomatenrot, für Dunkel aufgehellt, wird Lachsrosa. */
@supports (color: oklch(from red l c h)) {
    :root[data-theme="dark"] .layout-tatami {
        --ta-akzent-tinte: oklch(from var(--c-accent) max(l, .76) min(c, .16) h);
        --accent-ink: var(--ta-akzent-tinte);
        --link: var(--ta-akzent-tinte);
    }
}

/* ── 2 · Grund: Schrift, Verweise, Fokus ──────────────────────────────────────────────────── */
.layout-tatami body,
body.layout-tatami {
    background: var(--ta-grund);
    color: var(--ta-tinte);
}
.layout-tatami main { overflow-x: clip; }
.layout-tatami h1,
.layout-tatami h2,
.layout-tatami h3 {
    font-family: var(--ta-schrift);
    font-weight: 300;
    letter-spacing: -.015em;
    text-wrap: balance;
}
.layout-tatami a { color: inherit; }
/* ⚠️ `a { color: inherit }` (0,1,1) schlägt `.mobilebar > a` (0,1,1) der Grundplatte, weil diese Datei
   später lädt: Anrufen, Warenkorb und Start erbten das helle Gebrochen-Weiss der Nacht und standen
   auf der hellen Leiste (gemessen 1,15 : 1). Die ruhenden Ziele nehmen wieder die Farbe der Leiste;
   das aktive Ziel (Pille) und «Reservieren» haben eigene, stärkere Regeln und bleiben davon frei. */
.layout-tatami .mobilebar > a:not(:has(> .mobilebar__pille)):not([data-ziel="reservieren"]) { color: var(--leiste-still); }
.layout-tatami :focus-visible {
    outline: 2px solid var(--ta-akzent-tinte);
    outline-offset: 3px;
}
.layout-tatami ::selection { background: color-mix(in oklab, var(--ta-akzent) 26%, transparent); }

/* ── 3 · Knöpfe: eine Linie, keine Pille ──────────────────────────────────────────────────── */
.layout-tatami .btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 13px 22px;
    border: 1px solid transparent;
    border-radius: var(--ta-r);
    font-family: var(--ta-schrift);
    font-size: .8rem;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .35s var(--ta-kurve), color .35s var(--ta-kurve), border-color .35s var(--ta-kurve);
}
.layout-tatami .btn--primary {
    background: var(--ta-akzent);
    border-color: var(--ta-akzent);
    color: var(--ta-auf-akzent);
}
.layout-tatami .btn--primary:hover { background: var(--ta-akzent-tief); border-color: var(--ta-akzent-tief); }
.layout-tatami .btn--ghost {
    background: transparent;
    border-color: var(--ta-linie-fest);
    color: var(--ta-tinte);
}
.layout-tatami .btn--ghost:hover { border-color: var(--ta-tinte); }

/* ── 4 · Satzspiegel, Abschnitt, Rubrikmarke ──────────────────────────────────────────────── */
.layout-tatami .ta-rahmen {
    max-width: var(--ta-breite);
    margin: 0 auto;
    padding-left: var(--ta-rand);
    padding-right: var(--ta-rand);
}
/* ⛔ HALB OBEN, HALB UNTEN. Mit vollem Abstand auf beiden Seiten standen zwischen zwei
      Abschnitten ZWEI Abstände — auf 1440 gemessen rund 250 px Leere zwischen der Fusszeile des
      Titels und «Die Karte», und dieselbe Lücke noch dreimal weiter unten. Ein Abschnittswechsel
      braucht einen Abstand, nicht zwei. */
.layout-tatami .ta-abschnitt { padding: calc(var(--ta-abstand) / 2) 0; }
/* Das Register «Gut zu wissen» mischt seine Nische mit dem Papier DIESES Aufbaus. */
.layout-tatami .facts { --az-papier: var(--ta-grund); }
/* ⚠️ JEDER ABSCHNITT IST EIN SPRUNGZIEL (`#karte`, `#galerie`, `#finden`, `#ueber` …) und die
      Kopfleiste klebt. Ohne eigenen Rand steht die Überschrift nach dem Sprung HINTER der Leiste,
      und der Gast landet scheinbar mitten im Abschnitt. */
.layout-tatami .ta-rubriken,
.layout-tatami .ta-auswahl,
.layout-tatami .ta-band,
.layout-tatami .ta-galerie,
.layout-tatami .ta-finden,
.layout-tatami .ta-aufmacher { scroll-margin-top: clamp(68px, 9vh, 104px); }

/* Die laufende Nummer wird GEZÄHLT, nicht getippt: ein Abschnitt, der bei einem Haus wegfällt,
   darf keine Lücke in der Zählung hinterlassen (dieselbe Lösung wie auf Bühne). */
.layout-tatami main { counter-reset: ta-abschnitt; }
.layout-tatami .ta-abschnitt { counter-increment: ta-abschnitt; }
.layout-tatami .ta-kopf {
    display: grid;
    gap: clamp(14px, 1.6vw, 22px);
    margin-bottom: var(--ta-luft);
}
.layout-tatami .ta-kopf__marke {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ta-tinte-weich);
}

.layout-tatami .ta-kopf__titel {
    margin: 0;
    font-size: clamp(1.6rem, 2.6vw, 2.5rem);
    line-height: 1.12;
}
.layout-tatami .ta-kopf__linie {
    height: 1px;
    background: var(--ta-linie);
    transform-origin: 0 50%;
}
.layout-tatami .ta-hinweis {
    margin: var(--ta-luft) 0 0;
    font-size: .8rem;
    line-height: 1.7;
    color: var(--ta-tinte-weich);
}
.layout-tatami .ta-hinweis a { color: var(--ta-akzent-tinte); }

/* ── 5 · Der Aufmacher: die Fotografie füllt den Bildschirm ───────────────────── */
/* ⚠️ DER SCHLEIER IST GERECHNET, NICHT GERATEN. Die Schrift liegt jetzt auf dem Bild (Wunsch des
      Betreibers: «hero fotografi tam kaplasin heryeri»), und damit hängt der Kontrast am Motiv —
      ein helles Sushi-Foto und weiße Schrift darauf. Der Verlauf deckt deshalb genau das untere
      Drittel, wo die Zeilen stehen, und läuft nach oben aus: das Bild bleibt ein Bild, die Schrift
      trägt auf jedem Motiv. Ein gleichmäßiger Schleier über dem ganzen Bild wäre das
      Baukasten-Rezept. */
.layout-tatami .ta-aufmacher { padding: 0 0 calc(var(--ta-abstand) / 2); }
/* ⛔ SIE WAR RANDLOS UND 84 vh HOCH, UND DAS WAR EIN FEHLER MIT EINER MESSBAREN URSACHE. Der
      Betreiber wollte das Bild gross («hero fotografi tam kaplasin heryeri»), sah das Ergebnis am
      echten Haus und sagte: «cok kötü duruyor». Er hat recht, und es lag nicht am Wunsch: das
      Kopfbild dieses Hauses ist 1200 x 1152 — fast quadratisch und klein. Auf einem 1920er Schirm
      randlos gezogen wurde es 1,6-fach HOCHGERECHNET und aus einem Quadrat ein breiter Streifen
      GESCHNITTEN. Beides sieht man sofort: unscharf und falsch angeschnitten.

      Ein Aufbau darf keine Fotografie voraussetzen, die das Haus nicht hat. Die Bühne ist deshalb
      so breit wie der Satzspiegel (dort wird ein 1200er Bild nur noch 1,1-fach gerechnet) und so
      hoch, wie 16:9 daraus ergibt, gedeckelt bei 62 vh. Wer ein randloses Kinobild will, braucht
      eine Aufnahme ab 2000 px Breite — genau das sagt `PhotoGuidance` am Hochladefeld. */
.layout-tatami .ta-buehne {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    /* ⛔ KEIN SEITENVERHÄLTNIS. Das ist die Lehre aus drei Fassungen: `aspect-ratio` rechnet
          die eine Seite aus der anderen, und zwar in BEIDE Richtungen. Mit einem Deckel auf der
          Höhe wurde daraus eine Breite von 992 px statt 1208 («hero fotografi kücülmüs»); mit
          einer Mindesthöhe auf dem Telefon wurde daraus eine Breite von 1102 px in einem 390er
          Fenster. Beide Male zog eine Rechnung an einer Seite, die niemand gemeint hatte.
          Jetzt steht die Höhe für sich und die Breite ist die des Fensters — nichts rechnet
          mehr aneinander. Die Tafel wächst, wenn der Satz mehr Platz braucht; deshalb eine
          MINDEST-, keine feste Höhe.
          ⚠️ RANDLOS HEISST OHNE RADIUS: eine abgerundete Ecke an einer Kante, die es nicht gibt,
             sieht aus wie ein Fehler. Die Rundungen dieses Aufbaus gehören den Kacheln. */
    width: 100%;
    min-height: min(84vh, 780px);
    margin: 0 0 clamp(26px, 3vw, 46px);
    overflow: hidden;
    background: var(--ta-tiefe);
}
.layout-tatami .ta-buehne__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.06;
    animation: ta-bild-kommt 1.8s var(--ta-kurve) forwards;
}
/* Wer weniger Bewegung wünscht, bekommt das Bild gleich in seiner Endgrösse, ohne den Zoom. */
@media (prefers-reduced-motion: reduce) {
    .layout-tatami .ta-buehne__foto { animation: none; scale: 1; }
}
/* Ohne Kopfbild trägt die Bühne nur das Zeichen des Hauses — dann ist die volle Höhe zu viel
   Leere für nichts. */
.layout-tatami .ta-aufmacher--ohne-bild .ta-buehne { min-height: min(56vh, 520px); }

/* Schmal trägt der Satz mehr Zeilen und der Schirm weniger Höhe: die Untergrenze sinkt, den
   Rest bestimmt wie überall der Inhalt. */
@media (max-width: 899px) {
    .layout-tatami .ta-buehne { min-height: min(72vh, 560px); }
}
.layout-tatami .ta-buehne__zeichen {
    position: absolute;
    inset: 0;
    /* Ein Wasserzeichen über der ganzen Bühne — es darf nichts anfassen. */
    pointer-events: none;
    display: grid;
    place-items: center;
    margin: 0;
    font-size: clamp(2.6rem, 9vw, 7rem);
    font-weight: 300;
    color: color-mix(in oklab, var(--ta-tinte) 22%, transparent);
}
.layout-tatami .ta-buehne__schleier {
    position: absolute;
    inset: 0;
    /* ⚠️ DER VERLAUF FÄNGT DORT AN ZU DECKEN, WO DIE ERSTE ZEILE STEHT, nicht erst beim Titel.
       Die Küchenzeile ist die oberste des Satzes und lag genau auf der Kante — auf diesem Foto
       über einer hellen Steinsäule, und «SUSHI» verschwand darin. Oben bleibt das Bild offen. */
    background: linear-gradient(180deg,
        rgba(8, 9, 11, .16) 0%,
        rgba(8, 9, 11, 0) 30%,
        rgba(8, 9, 11, .32) 52%,
        rgba(8, 9, 11, .62) 72%,
        rgba(8, 9, 11, .88) 100%);
    pointer-events: none;
}
/* Der Satzspiegel INNERHALB der randlosen Tafel. `position: relative`, damit er über dem
   Schleier liegt; `width: 100%`, damit er die Breite der Tafel nimmt und nicht die seines
   Inhalts. */
.layout-tatami .ta-buehne__mass {
    position: relative;
    width: 100%;
}
.layout-tatami .ta-buehne__satz {
    position: relative;
    width: 100%;
    min-width: 0;
    padding-left: clamp(18px, 2.4vw, 44px);
    padding-right: clamp(18px, 2.4vw, 44px);
    padding-bottom: clamp(26px, 3.4vw, 52px);
    color: #F6F3EE;
}
/* Die Marke des Hauses: Beiwort und Küche, klein und gesperrt, durch einen Strich getrennt.
   Sie steht im Aufmacher auf dem Bild und sonst auf dem Grund. */
.layout-tatami .ta-marke {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    margin: 0 0 clamp(14px, 1.6vw, 22px);
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ta-tinte-weich);
}
.layout-tatami .ta-marke__wort { color: var(--ta-akzent-tinte); }
/* ⚠️ EIGENER SCHATTEN FÜR DIE KLEINEN ZEILEN. Der Verlauf ist oben bewusst offen, damit das Bild
      ein Bild bleibt — genau dort steht aber die Marke, und auf einer hellen Stelle (hier eine
      Lampe) verschwand sie. Ein Schatten hängt nicht am Motiv, ein Verlauf über allem nimmt dem
      Foto die Luft. */
.layout-tatami .ta-marke--auf-bild {
    color: rgba(246, 243, 238, .92);
    text-shadow: 0 1px 12px rgba(8, 9, 11, .9), 0 0 3px rgba(8, 9, 11, .8), 0 0 22px rgba(8, 9, 11, .7);
}
.layout-tatami .ta-marke--auf-bild .ta-marke__wort { color: #F6F3EE; }
.layout-tatami .ta-marke--auf-bild .ta-marke__kueche::before { background: rgba(246, 243, 238, .45); }
.layout-tatami .ta-buehne__titel {
    max-width: 18ch;
    margin: 0 0 clamp(14px, 1.6vw, 22px);
    font-size: clamp(2.2rem, 5.2vw, 4.4rem);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -.03em;
    color: inherit;
    text-shadow: 0 2px 30px rgba(8, 9, 11, .45);
}
.layout-tatami .ta-buehne__intro {
    max-width: 38ch;
    margin: 0 0 clamp(24px, 2.6vw, 36px);
    font-size: clamp(1rem, .95rem + .22vw, 1.18rem);
    line-height: 1.65;
    color: rgba(246, 243, 238, .9);
    text-shadow: 0 1px 14px rgba(8, 9, 11, .85);
}
.layout-tatami .ta-buehne__tun { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
/* Ein Knopf auf einer Fotografie braucht eine eigene Fassung: Glas statt Linie, sonst verschwindet
   die Kante im Motiv. */
.layout-tatami .btn--klar {
    border-color: rgba(246, 243, 238, .45);
    background: rgba(246, 243, 238, .08);
    color: #F6F3EE;
    backdrop-filter: blur(6px);
}
.layout-tatami .btn--klar:hover { border-color: #F6F3EE; background: rgba(246, 243, 238, .16); }

/* Das Lot: eine Linie, die sich einmal zieht. Kein Pfeil, kein Hüpfen. */
.layout-tatami .ta-buehne__lot {
    position: absolute;
    right: var(--ta-rand);
    bottom: clamp(30px, 4vw, 60px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    font-size: .8125rem;
    font-weight: 600;
    color: rgba(246, 243, 238, .7);
}
.layout-tatami .ta-buehne__lotlinie {
    width: 1px;
    height: clamp(34px, 5vw, 62px);
    background: rgba(246, 243, 238, .5);
    transform-origin: 50% 0;
}
@media (prefers-reduced-motion: no-preference) {
    .layout-tatami .ta-buehne__lotlinie { animation: ta-lot 2.6s var(--ta-kurve) infinite; }
}

.layout-tatami .ta-aufmacher__fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(20px, 2.6vw, 44px);
    padding-top: clamp(18px, 2vw, 26px);
    border-top: 1px solid var(--ta-linie);
}
.layout-tatami .ta-fakten {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(18px, 2.6vw, 48px);
    margin: 0;
}
.layout-tatami .ta-fakt dt {
    margin-bottom: 6px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ta-tinte-weich);
}
.layout-tatami .ta-fakt dd { margin: 0; font-size: .9rem; line-height: 1.5; }
.layout-tatami .ta-fakt dd a { text-decoration: none; }
.layout-tatami .ta-fakt dd a:hover { text-decoration: underline; }
.layout-tatami .ta-status {
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 7px;
    border-radius: 50%;
    background: var(--ta-tinte-weich);
    vertical-align: baseline;
}
.layout-tatami .ta-status--offen { background: var(--enamel, #2F9E5E); }
.layout-tatami .ta-fakt__offen { color: var(--enamel, #2F9E5E); font-weight: 600; }

@keyframes ta-bild-kommt { to { scale: 1; } }
@keyframes ta-lot {
    0%, 100% { scale: 1 1; opacity: .5; }
    50% { scale: 1 .4; opacity: 1; }
}

/* ── 6 · DAS MODUL: ein Raster aus Quadraten ──────────────────────────────────────────────── */
/* Rubriken, Gerichte und Bilder liegen im SELBEN Raster mit derselben Fuge — das ist der Grund,
   warum die Seite als ein Entwurf liest und nicht als eine Folge von Abschnitten. `auto-fit` mit
   einem Mindestmass, damit vier Kacheln am Schreibtisch und zwei auf dem Telefon stehen, ohne
   dass irgendwo eine Zahl je Bildschirmbreite gepflegt werden muss. */
.layout-tatami .ta-raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: var(--ta-fuge);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ── 7 · Die Rubriken der Karte ───────────────────────────────────────────────────────────── */
.layout-tatami .ta-kachel { margin: 0; }
.layout-tatami .ta-kachel__weg {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: stretch;
    gap: 10px;
    aspect-ratio: 4 / 3;
    padding: clamp(14px, 1.4vw, 22px);
    overflow: hidden;
    border: 1px solid var(--ta-linie);
    border-radius: var(--ta-r-gross);
    background: var(--ta-flaeche);
    text-decoration: none;
    transition: border-color .4s var(--ta-kurve), translate .4s var(--ta-kurve),
                box-shadow .4s var(--ta-kurve);
}
/* Die Geste beim Zeigen: die Kachel hebt sich, wirft einen weichen Schatten, das Foto fährt
   näher und der Verlauf tritt einen Schritt zurück. Vier Bewegungen, EINE Kurve und EINE Dauer
   — deshalb liest es sich als eine einzige Geste und nicht als vier Effekte übereinander. */
.layout-tatami .ta-kachel__weg:hover,
.layout-tatami .ta-kachel__weg:focus-visible {
    border-color: var(--ta-linie-fest);
    translate: 0 -6px;
    box-shadow: 0 22px 44px -22px rgba(8, 9, 11, .62);
}
/* ⛔ EIN SCHLEIER ÜBER DEM FOTO, sonst hängt die Lesbarkeit am Motiv. Die Vorschauzeilen stehen
      in gedämpfter Schrift; über einer hellen Stelle einer Aufnahme — und Essensfotos haben helle
      Stellen — verschwinden sie. Der Verlauf liegt ZWISCHEN Foto und Schrift (`z-index`), nicht
      über allem. */
.layout-tatami .ta-kachel__weg::after {
    content: "";
    position: absolute;
    inset: 0;
    /* ⚠️ OBEN DICHTER ALS FRÜHER, weil dort jetzt IMMER Schrift auf einer Fotografie steht:
       die drei Gerichtnamen. In der Mitte bleibt das Bild offen — dort steht nichts. */
    background: linear-gradient(180deg,
        color-mix(in oklab, var(--ta-grund) 86%, transparent) 0%,
        color-mix(in oklab, var(--ta-grund) 56%, transparent) 30%,
        color-mix(in oklab, var(--ta-grund) 34%, transparent) 48%,
        color-mix(in oklab, var(--ta-grund) 82%, transparent) 74%,
        color-mix(in oklab, var(--ta-grund) 95%, transparent) 100%);
    pointer-events: none;
    transition: opacity .6s var(--ta-kurve);
}
/* Beim Zeigen tritt der Verlauf einen Schritt zurück und das Foto kommt heraus. */
.layout-tatami .ta-kachel__weg:hover::after,
.layout-tatami .ta-kachel__weg:focus-visible::after { opacity: .84; }
.layout-tatami .ta-kachel__vorschau,
.layout-tatami .ta-kachel__satz { z-index: 1; }
/* Das Foto liegt HINTER der Schrift und wird stark gedämpft: so bleibt der Kontrast unabhängig
   vom Motiv, und eine Kachel mit Bild steht neben einer ohne, ohne dass es nach Fehler aussieht. */
/* ⛔ DAS FOTO WAR AUF 30 % HERUNTERGEDREHT, UND SO SAH ES AUCH AUS. Der Betreiber:
      «keske fotograflar saydam kalmasa». Der Grund für die Dämpfung war richtig — die
      Vorschauzeilen müssen auf jedem Motiv lesbar sein —, die Lösung war es nicht: eine
      halbdurchsichtige Aufnahme liest sich als kaputt, nicht als ruhig. Das Bild steht jetzt
      voll da; für die Lesbarkeit sorgt der Verlauf darüber (`::after`), und der deckt nur, wo
      Schrift steht. Beim Zeigen fährt es langsam näher. */
.layout-tatami .ta-kachel__foto {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    scale: 1.04;
    transition: scale 1.1s var(--ta-kurve), filter .6s var(--ta-kurve);
}
.layout-tatami .ta-kachel__weg:hover .ta-kachel__foto,
.layout-tatami .ta-kachel__weg:focus-visible .ta-kachel__foto { scale: 1.12; filter: brightness(1.08); }
/* Die Vorschau: drei Gerichtnamen der Rubrik, leise. Sie füllt das Quadrat mit dem, was wirklich
   darin steht — eine Kachel, die nur einen Namen und eine Zahl trägt, ist eine leere Fläche, und
   davon standen hier zwölf nebeneinander. `aria-hidden`, weil die Namen auf der Speisekarte
   vollständig vorgelesen werden; hier sind sie ein Blick, keine Liste. */
.layout-tatami .ta-kachel__vorschau {
    position: relative;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: flex-start;
    gap: 4px;
    overflow: hidden;
    font-size: .78rem;
    line-height: 1.45;
    /* ⚠️ HELLER UND MIT SCHATTEN, SEIT DAS FOTO VOLL DASTEHT. Gedämpfte Schrift auf einer
       gedämpften Aufnahme war lesbar; auf einer vollen ist sie es nicht — die Frühlingsrollen
       sind hell, die Namen darüber verschwanden. Der Schatten hängt nicht am Motiv. */
    color: color-mix(in oklab, var(--ta-tinte) 82%, transparent);
    text-shadow: 0 1px 10px var(--ta-grund), 0 0 4px var(--ta-grund);
    /* ⛔ HIER STAND EINE MASKE, DIE DEN LETZTEN NAMEN AUSLAUFEN LIESS. Sie war richtig, solange
       die Kachel eine leere Fläche war und die Liste andeuten sollte, dass mehr folgt. Seit
       jede Kachel eine Fotografie trägt, liest sich derselbe Verlauf nicht mehr als «es geht
       weiter», sondern als «dieser Name ist kaputt»: «Frühlingsrollen» stand halb da. Es sind
       genau drei Namen und sie passen — also braucht es keine Andeutung. */
}
.layout-tatami .ta-kachel__zeile {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* DAS SIGNATURELEMENT DIESES AUFBAUS: eine Linie in der Hausfarbe, die sich beim Zeigen über der
   Rubrik von links nach rechts zieht — dieselbe Geste wie unter einer Angabe in «Gut zu wissen».
   Zwei Orte, eine Sprache. */
.layout-tatami .ta-kachel__satz::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -1px;
    height: 1px;
    background: var(--ta-akzent);
    transform-origin: 0 50%;
    scale: 0 1;
    transition: scale .55s var(--ta-kurve);
}
.layout-tatami .ta-kachel__weg:hover .ta-kachel__satz::after { scale: 1 1; }
.layout-tatami .ta-kachel__satz {
    position: relative;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
    padding-top: 12px;
    border-top: 1px solid var(--ta-linie-fest);
}
.layout-tatami .ta-kachel__name {
    font-size: clamp(.95rem, .9rem + .25vw, 1.15rem);
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: -.01em;
}
.layout-tatami .ta-kachel__zahl {
    flex: none;
    font-size: .72rem;
    font-weight: 600;
    color: var(--ta-akzent-tinte);
    font-variant-numeric: lining-nums tabular-nums;
}
.layout-tatami .ta-rubriken__weiter { margin: var(--ta-luft) 0 0; }

/* ── 8 · Die Auswahl ──────────────────────────────────────────────────────────────────────── */
/* Alle Karten gleich hoch, der Preis steht bei jeder auf derselben Kante: `flex` mit
   `margin-top: auto` am Preis. Mit `align-content: start` sass der Preis mitten in der Karte,
   sobald die Nachbarkarte eine längere Beschreibung hatte. */
/* Breiter als die Rubrikkacheln: hier stehen Beschreibung, Preis und Kennzeichnung untereinander,
   und bei 230 px bricht ein Gerichtname wie «Vegane Gebratene Reis und Nudel» viermal um. */
.layout-tatami .ta-raster--gerichte { grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); }
.layout-tatami .ta-gericht {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(14px, 1.4vw, 22px);
    border: 1px solid var(--ta-linie);
    border-radius: var(--ta-r-gross);
    background: var(--ta-flaeche);
}
.layout-tatami .ta-gericht__fenster {
    aspect-ratio: 1 / 1;
    margin-bottom: 4px;
    overflow: hidden;
    border-radius: var(--ta-r-gross);
    background: var(--ta-tiefe);
}
.layout-tatami .ta-gericht__foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Das Zeichen im Fenster (D-229): die Klasse des Fotos setzt `display: block`, das Zeichen braucht Flex. */
.layout-tatami .ta-gericht__foto.platzhalter { display: flex; }
/* Ohne Bilder trägt die Schrift die Reihe: etwas mehr Höhe, damit die Karten nicht als schmaler
   Streifen zwischen zwei grossen Rastern verschwinden, und der Name eine Spur grösser. */
.layout-tatami .ta-auswahl--ohne-foto .ta-gericht {
    min-height: clamp(148px, 15vw, 200px);
    padding: clamp(18px, 1.8vw, 26px);
}
.layout-tatami .ta-auswahl--ohne-foto .ta-gericht__name { font-size: clamp(1.05rem, .95rem + .35vw, 1.3rem); }
.layout-tatami .ta-gericht__name {
    margin: 0;
    font-size: clamp(.95rem, .9rem + .25vw, 1.15rem);
    font-weight: 400;
    line-height: 1.25;
}
.layout-tatami .ta-gericht__satz {
    margin: 0;
    font-size: .85rem;
    line-height: 1.6;
    color: var(--ta-tinte-weich);
}
.layout-tatami .ta-gericht__preis {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin: auto 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--ta-linie);
    font-size: .88rem;
    font-weight: 600;
    font-variant-numeric: lining-nums tabular-nums;
}
.layout-tatami .ta-gericht__var { font-size: .8rem; font-weight: 400; color: var(--ta-tinte-weich); }
.layout-tatami .ta-gericht__zeichen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-size: .7rem;
    color: var(--ta-tinte-weich);
}


/* ── 10 · Ein geschriebenes Band ──────────────────────────────────────────────────────────── */
.layout-tatami .ta-band__raster {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--ta-fuge);
    align-items: start;
}
.layout-tatami .ta-band__kopf { grid-column: 1 / -1; grid-row: 1; }
.layout-tatami .ta-band__satz { grid-column: 1 / span 5; grid-row: 2; }
.layout-tatami .ta-band__zeile {
    margin: 0 0 12px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ta-akzent-tinte);
}
.layout-tatami .ta-band__titel {
    margin: 0;
    font-size: clamp(1.5rem, 2.4vw, 2.3rem);
    line-height: 1.14;
}
.layout-tatami .ta-band--gross .ta-band__titel { font-size: clamp(1.7rem, 3vw, 2.9rem); }
.layout-tatami .ta-band__text {
    grid-column: 7 / -1;
    grid-row: 2;
    max-width: 30rem;
    font-size: clamp(.975rem, .93rem + .18vw, 1.0625rem);
    line-height: 1.78;
    text-wrap: pretty;
}
.layout-tatami .ta-band__text p { margin: 0 0 1.1em; }
.layout-tatami .ta-band__text p:last-child { margin-bottom: 0; }
.layout-tatami .ta-band__tun { margin: var(--ta-luft) 0 0 !important; }
.layout-tatami .ta-band__bild {
    grid-column: 1 / -1;
    grid-row: 3;
    margin: var(--ta-luft) 0 0;
}
.layout-tatami .ta-tafel__foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.layout-tatami .ta-band--mit-bild .ta-tafel__fenster { aspect-ratio: 21 / 8; }

/* ── 11 · Die Bilder ──────────────────────────────────────────────────────────────────────── */
.layout-tatami .ta-raster--bilder { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.layout-tatami .ta-bild { margin: 0; }
.layout-tatami .ta-bild__figur { margin: 0; }
.layout-tatami .ta-bild__fenster {
    overflow: hidden;
    aspect-ratio: 1 / 1;
    border-radius: var(--ta-r-gross);
    background: var(--ta-tiefe);
}
.layout-tatami .ta-bild__foto {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: scale .9s var(--ta-kurve);
}
.layout-tatami .ta-bild__figur:hover .ta-bild__foto { scale: 1.04; }
.layout-tatami .ta-bild__text {
    margin: 10px 0 0;
    font-size: .76rem;
    line-height: 1.5;
    color: var(--ta-tinte-weich);
}

/* ── 12 · Der Weg ─────────────────────────────────────────────────────────────────────────── */
.layout-tatami .ta-finden__raster {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    gap: var(--ta-luft) clamp(24px, 4vw, 72px);
}
.layout-tatami .ta-finden__weg { min-width: 0; }
.layout-tatami .ta-finden__zeiten { min-width: 0; }
.layout-tatami .ta-finden__satz {
    margin: 0 0 18px;
    max-width: 30rem;
    font-size: 1rem;
    line-height: 1.75;
    color: var(--ta-tinte-weich);
}
.layout-tatami .ta-finden__adresse {
    margin: 0 0 22px;
    font-style: normal;
    font-size: 1.05rem;
    line-height: 1.7;
}
.layout-tatami .ta-finden__tun {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}
.layout-tatami .ta-finden__h {
    margin: 0 0 16px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ta-tinte-weich);
}
.layout-tatami .ta-finden .karte,
.layout-tatami .ta-finden .map-frame { margin-top: var(--ta-luft); }

/* ── 13 · Der Knopf im Kopf und die Schlussszene ──────────────────────────────────────────── */
/* ⛔ DIE KOPFZEILE BRACH UM, UND DAS SAH AUS WIE EIN FEHLER. Der Betreiber: «header düzensiz».
      Gemessen bei 1440: «Speisekarte & Bestellen», «Tisch reservieren» und «Anfahrt & Kontakt»
      standen zweizeilig, die übrigen einzeilig — eine Leiste aus fünf verschieden hohen Wörtern.
      Der Grund liegt in diesem Blatt: `.layout-tatami` setzt eine andere Schrift für die ganze
      Seite, und dieselben Wörter brauchen darin mehr Breite als im Grundblatt. Die Leiste gehört
      zum GEMEINSAMEN Kopf, also wird sie hier nicht umgebaut — sie bekommt nur das Mass, in dem
      ihre Wörter wieder in eine Zeile passen, und das Verbot umzubrechen. Wird es doch einmal
      eng, weicht der Abstand, nicht das Wort. */
/* ⛔ NUR AM SCHREIBTISCH. Auf dem Telefon ist dieselbe Leiste ein ausfahrendes Menü, und
      `nowrap` zwang dort jede Zeile auf ihre volle Wortbreite — gemessen 725 px Dokument in einem
      390er Fenster, also eine Seite, die sich seitwärts ziehen liess. Die Regel gilt ab der
      Breite, ab der die Leiste wirklich eine Leiste ist. */
@media (min-width: 900px) {
    .layout-tatami .site-header__bar .nav > a {
        white-space: nowrap;
        font-size: .875rem;
        letter-spacing: 0;
    }
    .layout-tatami .site-header__bar .nav { column-gap: clamp(14px, 1.6vw, 28px); }
}
/* Der Kopf liegt über der Fotografie: erst Glas, und sobald die Seite läuft, eine ruhige Fläche
   mit einer Haarlinie. `animation-timeline: scroll()` braucht dafür kein Skript und keinen
   Beobachter; wo es fehlt, bleibt das Glas, und das ist kein Mangel. */
/* ⛔ DAS GLAS LIEGT AUF `::before`, NICHT AUF DEM KOPF SELBST — und das ist kein Stilwunsch,
      sondern gemessen. `backdrop-filter` auf einem Element macht es zum Bezugsrahmen für JEDES
      `position: fixed` darin: die Daumenleiste am unteren Rand (ein Kind des Kopfes im Markup)
      rechnete ihre Breite plötzlich gegen den Kopf statt gegen das Fenster, wurde 520 statt
      370 px breit und zog das Dokument auf 725 px in einem 390er Telefon. Dieselbe Falle steht
      in ofen.css. Auf einem Pseudoelement wirkt das Glas genauso und der Kopf bleibt ein
      gewöhnlicher Kasten. */
.layout-tatami .site-header {
    background: transparent;
    border-bottom: 1px solid transparent;
}
.layout-tatami .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: color-mix(in oklab, var(--ta-grund) 62%, transparent);
    backdrop-filter: blur(14px) saturate(1.1);
}
@keyframes ta-kopf {
    to { background: color-mix(in oklab, var(--ta-grund) 94%, transparent); }
}
@keyframes ta-kopf-kante {
    to { border-bottom-color: var(--ta-linie); }
}
@supports (animation-timeline: scroll()) {
    @media (prefers-reduced-motion: no-preference) {
        .layout-tatami .site-header::before {
            animation: ta-kopf linear both;
            animation-timeline: scroll();
            animation-range: 0 220px;
        }
        .layout-tatami .site-header {
            animation: ta-kopf-kante linear both;
            animation-timeline: scroll();
            animation-range: 0 220px;
        }
    }
}
/* ⛔ «TISCH RESERVIEREN» BRACH IN ZWEI ZEILEN, und ein zweizeiliger Knopf macht die ganze Leiste
      höher als ihre Nachbarn. Zwei Ursachen zugleich: gesperrte Versalien brauchen Platz, und
      nichts verbot den Umbruch. Beides steht jetzt hier. */
.layout-tatami .ta-kopfknopf {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--ta-linie-fest);
    border-radius: var(--ta-r);
    font-size: .8125rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: border-color .35s var(--ta-kurve), background-color .35s var(--ta-kurve);
}
.layout-tatami .ta-kopfknopf:hover {
    border-color: var(--ta-tinte);
    background: color-mix(in oklab, var(--ta-tinte) 8%, transparent);
}
/* ⛔ UNTER 1480 px FÄLLT DIESER KNOPF WEG, UND ZWAR WEIL ER DOPPELT IST. Die Leiste trägt
      «Tisch reservieren» bereits als Menüpunkt; daneben derselbe Satz als Knopf ergab bei 1024
      gemessen 13 px Überlauf — die Seite liess sich seitwärts ziehen, weil zwei Wege zum selben
      Ziel nebeneinander standen. Eine Handlung in Reichweite, nicht zwei gleiche.
      ⚠️ Er erscheint überhaupt nur noch, wenn das Haus SEINE ZEITEN NICHT KENNT; sonst steht
         hier die Auskunft darunter. Die Regel bleibt für genau diesen Fall.
      ⚠️ DIE GRENZE LAG BEI 1200 UND WAR ZU TIEF. Marke, fünf Menüpunkte samt «Anrufen», Knopf und
         Konto brauchen gut 1180 px, die Spalte des Kopfes hat um die 1010 — gemessen bei 1200,
         1280 und 1366: Seite 68, 36 und 2 px breiter als das Fenster, der Konto-Knopf halb
         draussen. Darum fällt bis 1479 auch der Anruf aus der Leiste (er steht in «Anfahrt &
         Kontakt», in der Fusszeile und auf dem Telefon in der Daumenleiste; Kontor tut dasselbe). */
@media (max-width: 1479px) {
    .layout-tatami .ta-kopfknopf { display: none; }
}
@media (min-width: 861px) and (max-width: 1479px) {
    .layout-tatami .site-header__bar .nav > a[href^="tel:"] { display: none; }
}

/* Die Menüpunkte bekommen eine Linie, die sich beim Zeigen von links zieht — dieselbe Geste wie
   an der Rubrikkachel und unter einer Angabe in «Gut zu wissen». Drei Orte, eine Sprache. */
@media (min-width: 900px) {
    .layout-tatami .site-header__bar .nav > a {
        position: relative;
        padding-bottom: 3px;
    }
    .layout-tatami .site-header__bar .nav > a::after {
        content: "";
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 1px;
        background: var(--ta-akzent);
        transform-origin: 0 50%;
        scale: 0 1;
        transition: scale .45s var(--ta-kurve);
    }
    .layout-tatami .site-header__bar .nav > a:hover::after,
    .layout-tatami .site-header__bar .nav > a[aria-current]::after { scale: 1 1; }
}

.layout-tatami .ta-finale {
    padding: calc(var(--ta-abstand) / 2) 0 clamp(48px, 5vw, 84px);
    border-top: 1px solid var(--ta-linie);
}
.layout-tatami .ta-finale__raster {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: clamp(24px, 3vw, 56px);
}
.layout-tatami .ta-finale__satz { flex: 1 1 18rem; min-width: 0; }
/* Die Handlungen stehen rechts unten auf der Grundlinie des Namens, nicht darüber. */
.layout-tatami .ta-finale__tun { flex: 0 1 auto; text-align: right; }
.layout-tatami .ta-finale__wort {
    margin: 0 0 14px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ta-akzent-tinte);
}
.layout-tatami .ta-finale__name {
    margin: 0;
    font-size: clamp(2rem, 5vw, 4rem);
    font-weight: 300;
    line-height: 1.04;
    letter-spacing: -.028em;
}
.layout-tatami .ta-finale__stand {
    margin: 0 0 14px;
    font-size: .85rem;
    color: var(--ta-tinte-weich);
}
.layout-tatami .ta-finale__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
}

/* ── 14 · Der erste Tag ───────────────────────────────────────────────────────────────────── */
.layout-tatami .ta-leer { border-top: 1px solid var(--ta-linie); }
.layout-tatami .ta-leer__satz {
    max-width: 34rem;
    margin: 0 0 22px;
    font-size: clamp(1.05rem, 1.6vw, 1.35rem);
    line-height: 1.6;
    color: var(--ta-tinte-weich);
}

/* ── 15 · Tablett und Telefon ─────────────────────────────────────────────────────────────── */
/* Das Raster regelt sich über `auto-fit` selbst; hier stehen nur die Stellen, an denen eine
   feste Spaltenzahl steht — das Band — und die Masse, die auf kleinen Schirmen zu gross wären. */
@media (max-width: 899px) {
    .layout-tatami .ta-band__satz,
    .layout-tatami .ta-band__text {
        grid-column: 1 / -1;
        max-width: 34rem;
    }
    .layout-tatami .ta-band__text { grid-row: 3; margin-top: var(--ta-luft); }
    .layout-tatami .ta-band__bild { grid-row: 4; }
    .layout-tatami .ta-tafel__fenster { aspect-ratio: 3 / 2; }
    .layout-tatami .ta-band--mit-bild .ta-tafel__fenster { aspect-ratio: 3 / 2; }
}
@media (max-width: 639px) {
    .layout-tatami { --ta-fuge: 8px; }
    .layout-tatami .ta-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .layout-tatami .ta-raster--bilder { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .layout-tatami .ta-aufmacher__fuss { align-items: flex-start; }
    .layout-tatami .ta-buehne__tun .btn,
    .layout-tatami .ta-finale__knoepfe .btn { flex: 1 1 100%; justify-content: center; }
    .layout-tatami .ta-buehne__lot { display: none; }
    .layout-tatami .ta-tafel__fenster { aspect-ratio: 4 / 3; }
    /* Die Daumenleiste unten trägt Anrufen und Reservieren bereits. */
    .layout-tatami .ta-kopfknopf { display: none; }
}

/* ── 16b · Der Schluss als Auftritt (24.09.2026) ──────────────────────────────────────────── */
/* Leiser als auf der Bühne, wie alles hier: das Beiwort rückt von links heran, der Name steigt
   als ein Block aus seiner Maske, rechts kommen Zustand und Knöpfe nach. Kein Schein, kein
   Reflex — die Ruhe ist der Entwurf. Nur unter `.ta-bewegt`; ohne Skript oder bei reduzierter
   Bewegung steht die Szene einfach da.

   ⛔ DIE ALLGEMEINE ANKUNFT (Abschnitt 16: Block blendet ein und rückt 14px) GILT IM SCHLUSS
      NICHT — sie läge über der Maske und hielte das Beiwort unsichtbar, bis der ganze Block da
      ist. Die beiden Blöcke bleiben stehen; ihre Teile kommen einzeln. */
.layout-tatami .ta-finale__name-innen { display: block; }
.ta-bewegt .layout-tatami .ta-finale [data-ta-auftritt]:not(.ist-da) { opacity: 1; translate: none; }

.ta-bewegt .layout-tatami .ta-finale__wort { transition: opacity .9s var(--ta-kurve) .1s, translate .9s var(--ta-kurve) .1s; }
.ta-bewegt .layout-tatami .ta-finale__satz:not(.ist-da) .ta-finale__wort { opacity: 0; translate: -12px 0; }

/* Die Maske liegt auf der Überschrift, der Block darin steigt: 1.1 s, nach dem Beiwort. Die
   Ränder der Maske sind negativ, damit Ober- und Unterlängen der leichten Schnitte nicht
   beschnitten werden, wenn der Name steht. */
.ta-bewegt .layout-tatami .ta-finale__name { clip-path: inset(-.2em -.1em -.25em -.1em); }
.ta-bewegt .layout-tatami .ta-finale__name-innen { transition: translate 1.1s var(--ta-kurve) .3s, opacity .8s var(--ta-kurve) .3s; }
.ta-bewegt .layout-tatami .ta-finale__satz:not(.ist-da) .ta-finale__name-innen { translate: 0 calc(100% + .3em); opacity: 0; }

.ta-bewegt .layout-tatami .ta-finale__stand { transition: opacity .8s var(--ta-kurve) .5s, translate .8s var(--ta-kurve) .5s; }
.ta-bewegt .layout-tatami .ta-finale__tun:not(.ist-da) .ta-finale__stand { opacity: 0; translate: 0 8px; }
.ta-bewegt .layout-tatami .ta-finale__knoepfe .btn { transition: opacity .8s var(--ta-kurve) .62s, translate .8s var(--ta-kurve) .62s, background var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast); }
.ta-bewegt .layout-tatami .ta-finale__knoepfe .btn + .btn { transition-delay: .74s, .74s, 0s, 0s, 0s, 0s; }
.ta-bewegt .layout-tatami .ta-finale__tun:not(.ist-da) .ta-finale__knoepfe .btn { opacity: 0; translate: 0 10px; }


/* ── 16 · Ankommen — nur unter `ta-bewegt`, nie ohne Wachhund ─────────────────────────────── */
/* Die Elemente tragen `data-ta-auftritt` und bekommen `ist-da` vom Beobachter in tatami.js.
   Ohne die Klasse auf <html> (kein Skript, reduzierte Bewegung, Wachhund hat abgeräumt) steht
   alles sofort da — es gibt hier keine Regel, die ohne `.ta-bewegt` etwas versteckt.

   ⛔ NUR `opacity` UND `translate`. Kein Gleiten, kein Skalieren des Rasters: eine Kachel, die
      beim Ankommen wächst, verschiebt ihre Nachbarn, und das Raster ist der Entwurf. */
/* ⛔ ZWÖLF KACHELN, DIE GLEICHZEITIG ERSCHEINEN, SIND EIN SCHNITT, KEINE BEWEGUNG. Sie liegen
      in einem Raster und treten deshalb alle im selben Moment in den Blick. Der Versatz folgt
      der SPALTE, nicht der Reihenfolge im Quelltext: so läuft die Bewegung von links nach
      rechts über die Reihe, wie der Blick es ohnehin tut.
      ⚠️ Nur eine Verzögerung, kein eigener Weg: die Regel hängt an derselben `ist-da`-Klasse
         wie alles andere. Ohne Skript greift sie nie, weil ohne `.ta-bewegt` nichts versteckt
         ist — es gibt hier keinen zweiten Wachhund und es braucht keinen. */
.ta-bewegt .layout-tatami .ta-raster > .ta-kachel:nth-child(4n+2) { transition-delay: .07s; }
.ta-bewegt .layout-tatami .ta-raster > .ta-kachel:nth-child(4n+3) { transition-delay: .14s; }
.ta-bewegt .layout-tatami .ta-raster > .ta-kachel:nth-child(4n+4) { transition-delay: .21s; }

.ta-bewegt .layout-tatami [data-ta-auftritt] {
    transition: opacity var(--ta-zeit) var(--ta-kurve), translate var(--ta-zeit) var(--ta-kurve);
}
.ta-bewegt .layout-tatami [data-ta-auftritt]:not(.ist-da) {
    opacity: 0;
    translate: 0 14px;
}
/* Die Kacheln kommen nacheinander, aber kurz: sechs Stufen zu 45 ms, danach gleichzeitig. Ein
   Raster, das Kachel für Kachel über zwei Sekunden erscheint, liest sich als Ladebalken. */
.ta-bewegt .layout-tatami .ta-raster > :nth-child(2) { transition-delay: .045s; }
.ta-bewegt .layout-tatami .ta-raster > :nth-child(3) { transition-delay: .09s; }
.ta-bewegt .layout-tatami .ta-raster > :nth-child(4) { transition-delay: .135s; }
.ta-bewegt .layout-tatami .ta-raster > :nth-child(5) { transition-delay: .18s; }
.ta-bewegt .layout-tatami .ta-raster > :nth-child(n+6) { transition-delay: .225s; }
/* Die Haarlinie des Abschnittskopfs zieht sich, statt einzublenden. */
.ta-bewegt .layout-tatami .ta-kopf__linie { transition: scale 1.4s var(--ta-kurve) .1s; }
.ta-bewegt .layout-tatami .ta-kopf:not(.ist-da) .ta-kopf__linie { scale: 0 1; }