/* =================================================================
       PLATEIA · Editorial Rebuild · Mock v5 (Synthesis)

       v5 keeps v1's locked design system (Off-White #F5F5F4 base,
       near-black #1A1A1A anchors, Greek-Blue #2175D8 accent, Fraunces
       + Inter, no glassmorphism / no gradient-mesh / no card-shadows /
       no emojis), and merges:

       · v2 polish — Emil-tier motion tokens, button :active, focus-
         visible, hover-gating, text-wrap, font features, skip-link,
         hero stagger, prefers-reduced-motion guards on every animation
       · v3 subtractive — folio system (I-V) replacing layered eyebrows,
         no hero scroll-cue, real Praktisch headline, dish-counts on
         menu category heads, italic anchor words on headlines
       · v4 additive — masthead band that scrolls out, nav-link left-
         to-right Greek-Blue rule (replaces color-flip), drop-cap on
         the lead, leader-dot menu rules, figure-numbered gallery
         captions, OpenType old-style figures sitewide with tabular-
         lining only on prices and hours, italic Kolophon line

       Deliberately rejected from v4: Hero BG Ken-Burns (breaks the
       "BG static, portrait carries the motion" rule), new copy
       "Mit Familie." (locked copy), vertical spine annotation and
       marginalia column (excess chrome), § markers flanking the
       meander (the SVG already carries it).
       ================================================================= */

    .plateia-mock {
      /* === COLOR === */
      --base: oklch(0.965 0.005 80);
      --section-dark: oklch(0.213 0.008 257);
      --ink: oklch(0.215 0.008 257);
      --ink-on-dark: oklch(0.960 0.005 80);
      --muted: oklch(0.495 0.014 257);
      --muted-on-dark: oklch(0.685 0.012 257);
      --hairline: oklch(0.860 0.008 80);
      --hairline-on-dark: oklch(0.275 0.012 257);
      --accent: oklch(0.555 0.176 257);
      --accent-hover: oklch(0.460 0.160 257);

      /* === TYPE === */
      --display: "Fraunces", Georgia, "Times New Roman", serif;
      /* Überschriften-Font (Section-/Page-Titel). Fällt auf Fraunces zurück. */
      --heading: "Playfair Display", "Fraunces", Georgia, serif;
      --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

      /* === SCALE === */
      --container: 1280px;
      --gutter: 32px;
      --masthead-h: 34px;
      --nav-h: 78px;

      /* === MOTION === */
      --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
      --ease-soft: cubic-bezier(0.22, 0.84, 0.42, 1);
      --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
      --t-press: 120ms;
      --t-fast: 160ms;
      --t-base: 220ms;
      --t-slow: 560ms;
    }

    /* Reset */
    .plateia-mock *, .plateia-mock *::before, .plateia-mock *::after { box-sizing: border-box; margin: 0; padding: 0; }
    .plateia-mock {
      /* scroll-behavior was 'smooth' in v6 — v7 uses Lenis (loaded
         via CDN) for buttery wheel-event interpolation. Native
         scroll-behavior is set to 'auto' so it doesn't fight Lenis.
         Under reduced-motion, Lenis is disabled and scroll-behavior
         falls back to auto (which is fine — instant, no jarring
         smooth-scroll either). */
      scroll-padding-top: calc(var(--masthead-h) + var(--nav-h) + 16px);
      -webkit-text-size-adjust: 100%;
    }
    .plateia-mock {
      font-family: var(--body);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.55;
      color: var(--ink);
      background: var(--base);
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-rendering: optimizeLegibility;
      font-kerning: normal;
      /* Old-style figures sitewide — v4's finding. Tabular-lining
         is re-enabled per-element where columns of money/time need
         to align (.menu-item-price, .hours-list .time, .contact-row,
         .gallery-caption .fig). */
      font-feature-settings: "kern", "liga", "calt", "onum";
    }
    .plateia-mock img { max-width: 100%; height: auto; display: block; }
    .plateia-mock a { color: inherit; text-decoration: none; }
    .plateia-mock button { font: inherit; border: 0; background: none; cursor: pointer; }
    .plateia-mock ul, .plateia-mock li { list-style: none; }

    .plateia-mock ::selection { background: var(--accent); color: #fff; }

    /* ============================================================
       SITE-WIDE GRAIN (v7)
       Fixed pseudo-element, pointer-events:none, ~3% opacity. SVG
       fractal noise as data: URL. Applied to body::before so it
       sits behind all content but above the section backgrounds.
       Subtle enough to read as paper texture, not visible noise.
       Performance: fixed (not in scroll containers) — no repaint
       cost during scroll.
       ============================================================ */
    .plateia-mock::before {
      content: "";
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      opacity: 0.05;
      /* perf: KEIN mix-blend-mode — eine fixed+full-viewport mix-blend-Ebene
         erzwingt pro Scroll-Frame ein Full-Viewport-Recomposite (blockiert
         Lenis). Schwarzes Rauschen bei niedriger Deckkraft sieht im Normal-
         Blend praktisch identisch aus wie multiply. */
      background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 160px 160px;
    }
    /* Slightly stronger grain on dark surfaces (multiply on dark
       reads ~half as strong as on light). */
    .plateia-mock.has-dark::before { opacity: 0.05; }

    /* ============================================================
       FIXED MEANDER PARALLAX LAYER (P7)
       A single position:fixed full-viewport plane carrying a large
       tiled Greek-key/meander raster at the LOWEST z-index. Every
       section scrolls over it; it shimmers through at section seams
       and in the hero. Very low opacity (~0.04) so it complements
       — never overpowers — the section-wash + grain. The pattern is
       a tilted (3deg) 80px tile rendered as an inline SVG data: URL
       that mirrors the page's #meander glyph proportions. A slow
       ambient drift (meanderDrift, 120s) keeps it barely alive;
       reduced-motion freezes it.
       ============================================================ */
    .plateia-mock .meander-fixed-bg {
      position: fixed;
      inset: -8%;
      pointer-events: none;
      z-index: 0;
      opacity: 0.09;
      transform: rotate(3deg);
      background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cpath d='M 0 64 V 8 H 64 V 56 H 16 V 24 H 48 V 40 H 32' fill='none' stroke='%231A1A1A' stroke-width='2' stroke-linejoin='miter' stroke-linecap='butt'/%3E%3C/svg%3E");
      background-size: 80px 80px;
      background-repeat: repeat;
      /* perf: KEINE background-position-Animation + KEIN mix-blend-mode auf
         dieser fixierten Vollbild-Ebene — beides erzwingt Full-Viewport-
         Repaint/Recomposite pro Frame und blockiert Lenis-Smooth-Scroll.
         Parallax bleibt via position:fixed (Content scrollt drüber). */
    }

    @keyframes meanderDrift {
      from { background-position: 0 0; }
      to   { background-position: 800px 320px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .meander-fixed-bg { animation: none !important; }
    }

    /* ============================================================
       SECTION WASH (v7)
       Per-section radial-gradient overlay providing a "light source"
       within the section — adds atmospheric depth on dark anchors.
       Welle 1 sets up the CSS structure with the gradient defined
       but the drift animation NOT YET enabled — Welle 2 will wire
       it in with prefers-reduced-motion guards.

       Use: place <div class="section-wash" data-wash="nw|center|ne|n"></div>
       as the FIRST child of a section (or after the BG layer).
       z-index: 1 — sits above the section background but below content
       (which is at z-index 3).
       ============================================================ */
    .plateia-mock .section-wash {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 1;
      /* Default: center. Each variant below overrides position. */
      background-image: radial-gradient(
        ellipse 70% 60% at 50% 30%,
        rgba(255, 245, 220, 0.045) 0%,
        rgba(255, 245, 220, 0.022) 35%,
        transparent 70%
      );
      /* Welle 2 will enable: animation: washDrift 90s var(--ease-in-out) infinite alternate; */
    }
    .plateia-mock .section-wash[data-wash="nw"] {
      background-image: radial-gradient(
        ellipse 65% 55% at 15% 20%,
        rgba(255, 245, 220, 0.055) 0%,
        rgba(255, 245, 220, 0.025) 38%,
        transparent 72%
      );
    }
    .plateia-mock .section-wash[data-wash="center"] {
      background-image: radial-gradient(
        ellipse 60% 60% at 50% 45%,
        rgba(255, 245, 220, 0.050) 0%,
        rgba(255, 245, 220, 0.022) 40%,
        transparent 75%
      );
    }
    .plateia-mock .section-wash[data-wash="ne"] {
      background-image: radial-gradient(
        ellipse 65% 55% at 85% 20%,
        rgba(255, 245, 220, 0.055) 0%,
        rgba(255, 245, 220, 0.025) 38%,
        transparent 72%
      );
    }
    .plateia-mock .section-wash[data-wash="n"] {
      background-image: radial-gradient(
        ellipse 70% 50% at 50% 12%,
        rgba(255, 245, 220, 0.050) 0%,
        rgba(255, 245, 220, 0.020) 40%,
        transparent 75%
      );
    }
    /* Light-section wash variant — much fainter, warm-cream tint
       on the Off-White Speisekarte. Adds dimension without going
       dark. */
    .plateia-mock .section-wash[data-wash="light-n"] {
      background-image: radial-gradient(
        ellipse 80% 50% at 50% 10%,
        rgba(140, 100, 60, 0.025) 0%,
        rgba(140, 100, 60, 0.010) 40%,
        transparent 78%
      );
    }
    /* Wash drift — slow 90s cycle, barely perceptible. Activated
       in Welle 2. Long cycle is intentional: this is ambient
       atmosphere, not an interaction. Marketing/explanatory motion
       can be longer than UI motion. */
    @keyframes washDrift {
      0%   { transform: translate3d(0, 0, 0) scale(1); }
      50%  { transform: translate3d(2.5%, 1.5%, 0) scale(1.04); }
      100% { transform: translate3d(-1.5%, -2%, 0) scale(1.02); }
    }
    .plateia-mock .section-wash {
      animation: washDrift 90s var(--ease-in-out) infinite alternate;
      will-change: transform;
    }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .section-wash { animation: none !important; }
    }
    /* Hero has a dark scrim overlay at z-index 2. The wash must
       sit ABOVE the scrim (otherwise the dark gradient swallows
       it), but BELOW the content (z-index 3). Same z-index as
       overlay + later DOM order = wash paints on top. */
    .plateia-mock .hero .section-wash { z-index: 2; }

    /* For sections without explicit content z-index, ensure the
       .container stacks above the wash (which is z-index 1). */
    .plateia-mock .lead .container, .plateia-mock .menu .container, .plateia-mock .praktisch .container { position: relative; z-index: 2; }

    /* ============================================================
       MOTION CHOREOGRAPHY (v7 · Welle 2 · emil-design-eng)
       Three new motion patterns tied to scroll-into-view:
       · word-by-word headline reveals (every section headline)
       · drop-cap scale-in on Lead enter (the featured moment)
       · section-boundary horizontal Greek-Blue rule draw

       Reduced-motion: all three skipped (words show immediately,
       drop-cap doesn't scale, boundary rule shows at full width).
       ============================================================ */

    /* Word-reveal — JS splits headline innerHTML into <span class="word">
       tokens with --word-i custom property. CSS handles the cascade
       via per-word transition-delay. Separate transitions (not one
       keyframe) so they're interruptible. */
    .plateia-mock .word {
      display: inline-block;
      opacity: 0;
      transform: translateY(8px);
      transition:
        opacity 480ms var(--ease-soft),
        transform 480ms var(--ease-soft);
      transition-delay: calc(var(--word-i, 0) * 60ms);
      will-change: opacity, transform;
    }
    .plateia-mock [data-words-revealed="true"] .word {
      opacity: 1;
      transform: translateY(0);
    }
    /* Em tags wrap words too — make sure they inherit the italic
       treatment without breaking the inline-block from .word. */
    .plateia-mock .word em {
      font-style: italic;
      font-weight: 400;
    }

    /* Drop-cap scale-in. The ::first-letter pseudo-element accepts
       transform in modern browsers. Pre-state: scale 0.88. When
       .lead.revealed (set by the existing reveal IO), transition
       to scale 1.0 with a 200ms delay so the section's own fade-up
       settles first. */

    /* Section-boundary horizontal rule. A 1px-tall hairline that
       draws left-to-right when the boundary scrolls into the
       viewport center. Uses transform: scaleX (not width) — fully
       hardware-accelerated, no layout reflow. */
    .plateia-mock .boundary-rule {
      position: relative;
      height: 1px;
      width: 100%;
      background: transparent;
      overflow: visible;
      margin: 0;
      pointer-events: none;
    }
    .plateia-mock .boundary-rule::after {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 1px;
      width: 100%;
      max-width: var(--container);
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      transform-origin: left center;
      background: var(--accent);
      transition: transform 600ms var(--ease-soft);
      will-change: transform;
    }
    .plateia-mock .boundary-rule.revealed::after {
      transform: translateX(-50%) scaleX(1);
    }

    /* Reduced-motion: instant reveals, no scale, no draw. */
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .word {
        opacity: 1;
        transform: none;
        transition: none;
      }
      .plateia-mock .boundary-rule::after {
        transform: translateX(-50%) scaleX(1);
        transition: none;
      }
    }

    /* Considered focus rings, keyboard-only */
    .plateia-mock :where(a, button, [tabindex]):focus-visible {
      outline: 2px solid var(--accent);
      outline-offset: 3px;
      border-radius: 0;
    }

    /* Skip-link */
    .plateia-mock .skip-link {
      position: fixed;
      top: 8px;
      left: 8px;
      padding: 10px 18px;
      background: var(--accent);
      color: #fff;
      font-family: var(--body);
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: 0.04em;
      z-index: 200;
      transform: translateY(calc(-100% - 24px));
      transition: transform var(--t-fast) var(--ease-out);
    }
    .plateia-mock .skip-link:focus-visible {
      transform: translateY(0);
      outline: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .skip-link { transition: none; }
    }

    .plateia-mock .container {
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--gutter);
    }

    /* ============================================================
       FOLIO — editorial replacement for eyebrows.
       v3 system: ONE folio per section in the section opener, not
       layered across every block. Roman numeral + section name.
       ============================================================ */
    .plateia-mock .folio {
      display: flex;
      align-items: baseline;
      gap: 14px;
      font-family: var(--body);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--muted);
      font-variant-numeric: tabular-nums lining-nums;
    }
    .plateia-mock .folio .num { color: var(--accent); }
    /* Greek letter ornament — set in Fraunces italic, opsz 24,
       slightly larger than the Roman numeral, accent color.
       The one consistent Greek touch across the page; each
       section gets a different letter chosen for meaning.
       Π Plateia · Γ Geleit/Geschmack · Κ Kouzina/Karte ·
       Φ Φως=Licht/Foto · Ω Ωράριο=Stunden. */
    .plateia-mock .folio .greek {
      font-family: var(--display);
      font-style: italic;
      font-weight: 400;
      font-variation-settings: "opsz" 36;
      font-feature-settings: "kern", "liga";
      font-size: 18px;
      line-height: 1;
      letter-spacing: 0;
      text-transform: none;
      color: var(--accent);
      /* Slight optical lift — italic Fraunces sits a touch low on
         the baseline next to Inter caps. */
      transform: translateY(2px);
      display: inline-block;
    }
    /* When the folio is centered (section openers), it switches to
       inline-block so margin:auto can horizontally center the whole
       group as a unit. */
    .plateia-mock .folio.is-centered {
      display: inline-flex;
    }
    .plateia-mock .folio .sep {
      width: 28px;
      height: 1px;
      background: var(--hairline);
      display: inline-block;
      transform: translateY(-3px);
    }
    .plateia-mock .folio-dark { color: var(--muted-on-dark); }
    .plateia-mock .folio-dark .sep { background: var(--hairline-on-dark); }

    /* Reveal */
    .plateia-mock [data-reveal] {
      opacity: 0;
      transform: translateY(10px);
      transition:
        opacity var(--t-slow) var(--ease-soft),
        transform var(--t-slow) var(--ease-soft);
    }
    .plateia-mock [data-reveal].revealed {
      opacity: 1;
      transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock [data-reveal] {
        opacity: 1;
        transform: none;
        transition: none;
      }
      .plateia-mock { }
    }

    /* ============================================================
       BUTTONS — square corners, locked.
       Adds v2's :active scale, hover gating, focus-visible inherits
       from the global :where(…) rule above.
       ============================================================ */
    .plateia-mock .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 13px 24px;
      font-family: var(--body);
      font-weight: 500;
      font-size: 13.5px;
      letter-spacing: 0.04em;
      border-radius: 0;
      border: 1px solid transparent;
      white-space: nowrap;
      transition:
        background var(--t-base) var(--ease-out),
        color var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease-out),
        transform var(--t-press) var(--ease-out);
    }
    .plateia-mock .btn:active { transform: scale(0.97); }
    .plateia-mock .btn-primary { background: var(--accent); color: #fff; }
    /* [P1] Kleines weißes Lorbeer-Ornament auf allen „Tisch reservieren"-Buttons. */
    .plateia-mock .btn-primary::after {
      content: "";
      flex: none;
      width: 26px;
      height: 24px;
      margin-left: 2px;
      background: no-repeat center / contain
        url("/plateia/wreath.png");
      opacity: 0.92;
    }
    .plateia-mock .btn-ghost {
      background: transparent;
      color: #fff;
      border-color: rgba(255, 255, 255, 0.4);
    }
    .plateia-mock .btn-large { padding: 16px 32px; font-size: 15px; }
    @media (hover: hover) and (pointer: fine) {
      .plateia-mock .btn-primary:hover { background: var(--accent-hover); }
      .plateia-mock .btn-ghost:hover {
        border-color: #fff;
        background: rgba(255, 255, 255, 0.06);
      }
    }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .btn, .plateia-mock .btn:active { transform: none; }
    }

    /* ============================================================
       MASTHEAD — from v4. Fixed 34px dark band at the very top,
       carries the edition number + days line. Scrolls out past 80px
       and the nav promotes to top:0. Magazine pedigree on first paint.
       ============================================================ */
    .plateia-mock .masthead {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 101;
      height: var(--masthead-h);
      background: var(--section-dark);
      color: var(--muted-on-dark);
      display: flex;
      align-items: center;
      transition:
        transform 360ms var(--ease-soft),
        opacity 280ms ease;
    }
    .plateia-mock .masthead.lifted {
      transform: translateY(-100%);
      opacity: 0;
      pointer-events: none;
    }
    .plateia-mock .masthead-inner {
      max-width: var(--container);
      width: 100%;
      margin: 0 auto;
      padding: 0 var(--gutter);
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-family: var(--body);
      font-size: 10.5px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-weight: 500;
    }
    .plateia-mock .masthead-edition { color: var(--accent); }
    .plateia-mock .masthead-dot {
      display: inline-block;
      width: 3px;
      height: 3px;
      background: var(--muted-on-dark);
      border-radius: 50%;
      vertical-align: middle;
      margin: 0 12px 2px;
    }
    @media (max-width: 640px) {
      .plateia-mock .masthead { height: 28px; }
      .plateia-mock .masthead-inner {
        font-size: 9.5px;
        letter-spacing: 0.2em;
      }
      .plateia-mock .masthead .hide-mobile { display: none; }
    }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .masthead { transition: none; }
    }

    /* ============================================================
       NAV — sits under the masthead initially; promotes to top:0
       when the masthead lifts off (>80px scroll).
       Adds v4's nav-link left-to-right rule on hover, replacing
       v1's SaaS-y color flip.
       ============================================================ */
    .plateia-mock .nav {
      position: fixed;
      top: var(--masthead-h);
      left: 0; right: 0;
      z-index: 100;
      padding: 22px 0;
      border-bottom: 1px solid transparent;
      transition:
        top 360ms var(--ease-soft),
        background var(--t-base) var(--ease-out),
        padding var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease-out);
    }
    .plateia-mock .nav.scrolled {
      top: 0;
      background: var(--base);
      padding: 14px 0;
      border-bottom-color: var(--hairline);
    }
    @media (max-width: 640px) {
      .plateia-mock .nav { top: 28px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .nav { transition: none; }
    }
    .plateia-mock .nav-inner {
      display: grid;
      grid-template-columns: auto 1fr auto;
      align-items: center;
      gap: 24px;
    }
    .plateia-mock .nav-logo {
      display: flex;
      flex-direction: column;
      line-height: 1;
    }
    .plateia-mock .nav-logo .wordmark {
      font-family: var(--dalek);
      font-weight: 700;
      font-size: 22px;
      color: #fff;
      font-variation-settings: "opsz" 36;
      font-feature-settings: "ss01", "kern", "liga";
      letter-spacing: -0.005em;
      transition: color var(--t-base) var(--ease-out);
    }
    .plateia-mock .nav.scrolled .nav-logo .wordmark { color: var(--ink); }
    .plateia-mock .nav-logo .subline {
      font-family: var(--body);
      font-weight: 500;
      font-size: 9px;
      letter-spacing: 0.36em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.7);
      margin-top: 5px;
      transition: color var(--t-base) var(--ease-out);
    }
    .plateia-mock .nav.scrolled .nav-logo .subline { color: var(--muted); }
    .plateia-mock .nav-links {
      display: flex;
      justify-self: center;
      gap: 36px;
    }
    .plateia-mock .nav-links a {
      position: relative;
      font-family: var(--body);
      font-weight: 500;
      font-size: 13px;
      letter-spacing: 0.04em;
      color: rgba(255, 255, 255, 0.88);
      padding-bottom: 4px;
      transition: color var(--t-base) var(--ease-out);
    }
    .plateia-mock .nav.scrolled .nav-links a { color: var(--ink); }
    /* Left-to-right Greek-Blue rule on hover. Print-style annotation,
       not SaaS color-flip. */
    .plateia-mock .nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 1px;
      background: var(--accent);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform 340ms var(--ease-soft);
    }
    @media (hover: hover) and (pointer: fine) {
      .plateia-mock .nav-links a:hover::after { transform: scaleX(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .nav-links a::after { transition: none; }
    }
    /* ---- Hamburger toggle (hidden ≥880px) ---- */
    .plateia-mock .nav-toggle {
      display: none;
      width: 44px;
      height: 44px;
      justify-self: end;
      align-items: center;
      justify-content: center;
      background: none;
      border: 0;
      padding: 0;
      cursor: pointer;
      color: rgba(255, 255, 255, 0.9);
      transition: color var(--t-base) var(--ease-out);
    }
    .plateia-mock .nav.scrolled .nav-toggle { color: var(--ink); }
    .plateia-mock .nav-toggle .nav-toggle-bars, .plateia-mock .nav-toggle .nav-toggle-bars::before, .plateia-mock .nav-toggle .nav-toggle-bars::after {
      content: "";
      display: block;
      width: 22px;
      height: 1.5px;
      background: currentColor;
      transition: transform 320ms var(--ease-soft), opacity 200ms var(--ease-out);
    }
    .plateia-mock .nav-toggle .nav-toggle-bars { position: relative; }
    .plateia-mock .nav-toggle .nav-toggle-bars::before { position: absolute; top: -7px; }
    .plateia-mock .nav-toggle .nav-toggle-bars::after { position: absolute; top: 7px; }
    .plateia-mock .nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
    .plateia-mock .nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(7px) rotate(45deg); }
    .plateia-mock .nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: translateY(-7px) rotate(-45deg); }

    @media (max-width: 880px) {
      .plateia-mock .nav-links { display: none; }
      .plateia-mock .nav-inner { grid-template-columns: auto 1fr auto; }
      .plateia-mock .nav-inner > .btn-primary { display: none; }
      .plateia-mock .nav-toggle { display: inline-flex; }
    }

    /* ---- Mobile off-canvas drawer ---- */
    .plateia-mock .nav-drawer {
      position: fixed;
      inset: 0;
      z-index: 120;
      display: none;
      background: rgba(26, 26, 26, 0.97);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 30px;
      opacity: 0;
      transition: opacity 320ms var(--ease-out);
    }
    .plateia-mock .nav-drawer.open { display: flex; opacity: 1; }
    .plateia-mock .nav-drawer a {
      font-family: var(--display);
      font-weight: 400;
      font-size: 28px;
      color: rgba(255, 255, 255, 0.92);
      letter-spacing: -0.01em;
    }
    .plateia-mock .nav-drawer a:hover { color: var(--accent); }
    .plateia-mock .nav-drawer .btn-primary {
      margin-top: 14px;
      font-size: 15px;
    }
    .plateia-mock .nav-drawer-close {
      position: absolute;
      top: 28px;
      right: 24px;
      width: 44px;
      height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      background: none;
      border: 0;
      color: rgba(255, 255, 255, 0.85);
      font-size: 30px;
      line-height: 1;
      cursor: pointer;
    }
    .plateia-mock.nav-open { overflow: hidden; }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .nav-drawer { transition: none; }
      .plateia-mock .nav-toggle .nav-toggle-bars, .plateia-mock .nav-toggle .nav-toggle-bars::before, .plateia-mock .nav-toggle .nav-toggle-bars::after { transition: none; }
    }

    /* ============================================================
       HERO
       v5 keeps v1's headline copy ("Griechisch essen.") — does not
       add "Mit Familie." (locked copy). The folio strip at the top
       sets the magazine register, the hero stagger from v2 carries
       the load-feel, no scroll-cue (v3 audit), BG stays static
       (locked rule — portrait video carries motion in production).
       ============================================================ */
    .plateia-mock .hero {
      position: relative;
      height: 100vh;
      min-height: 720px;
      overflow: hidden;
      color: #fff;
    }
    .plateia-mock .hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }
    .plateia-mock .hero-overlay {
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(
        180deg,
        rgba(20, 20, 20, 0.32) 0%,
        rgba(20, 20, 20, 0.46) 45%,
        rgba(20, 20, 20, 0.74) 100%
      );
    }
    .plateia-mock .hero-overlay::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(
        90deg,
        rgba(20, 20, 20, 0.50) 0%,
        rgba(20, 20, 20, 0.20) 45%,
        rgba(20, 20, 20, 0) 70%
      );
    }

    /* Folio strip at hero top — magazine-cover register */
    .plateia-mock .hero-folio-strip {
      position: relative;
      z-index: 3;
      max-width: var(--container);
      width: 100%;
      margin: 0 auto;
      padding: max(124px, 14vh) var(--gutter) 0;
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      color: rgba(255, 255, 255, 0.86);
      font-family: var(--body);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      font-variant-numeric: tabular-nums lining-nums;
      opacity: 0;
      animation: heroEnter 720ms var(--ease-soft) 40ms forwards;
    }
    .plateia-mock .hero-folio-strip .left {
      display: flex;
      align-items: baseline;
      gap: 14px;
    }
    .plateia-mock .hero-folio-strip .rule {
      width: 32px;
      height: 1px;
      background: rgba(255, 255, 255, 0.55);
      display: inline-block;
      transform: translateY(-3px);
    }
    .plateia-mock .hero-folio-strip .accent {
      color: rgba(255, 255, 255, 0.96);
    }
    .plateia-mock .hero-folio-strip .greek {
      font-family: var(--display);
      font-style: italic;
      font-weight: 400;
      font-variation-settings: "opsz" 36;
      font-size: 18px;
      line-height: 1;
      letter-spacing: 0;
      text-transform: none;
      color: var(--accent);
      transform: translateY(2px);
      display: inline-block;
    }
    .plateia-mock .hero-folio-strip .right {
      color: rgba(255, 255, 255, 0.72);
    }
    @media (max-width: 768px) {
      .plateia-mock .hero-folio-strip {
        padding: 130px var(--gutter) 0;
        font-size: 10px;
        letter-spacing: 0.22em;
      }
      .plateia-mock .hero-folio-strip .right { display: none; }
    }

    .plateia-mock .hero-content {
      position: relative;
      z-index: 3;
      max-width: var(--container);
      margin: 0 auto;
      padding: 36px var(--gutter) 56px;
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: start;
      gap: 56px;
    }
    .plateia-mock .hero-text { max-width: 56ch; }
    .plateia-mock .hero-portrait {
      position: relative;
      width: clamp(264px, 24vw, 344px);
      aspect-ratio: 4 / 5.6;
    }
    /* Ken-Burns on the still poster inside the video-card ONLY (mock
       case). In production the <img> is replaced by a <video> which
       carries its own internal motion. The BG stays static (locked
       rule: BG static, portrait card carries the motion). 24s × 1.04×
       scale is barely perceptible — just enough to keep the still from
       reading as a frozen frame. */
    .plateia-mock .hero-vcard-media img {
      animation: portraitBreath 24s var(--ease-in-out) infinite alternate;
      transform-origin: 50% 55%;
      will-change: transform;
    }
    @keyframes portraitBreath {
      from { transform: scale(1.0); }
      to   { transform: scale(1.04); }
    }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .hero-vcard-media img { animation: none; transform: none; }
    }
    .plateia-mock .hero h1 {
      font-family: var(--display);
      font-weight: 400;
      font-size: clamp(56px, 9vw, 140px);
      line-height: 0.94;
      letter-spacing: -0.022em;
      font-variation-settings: "opsz" 144;
      font-feature-settings: "ss01", "kern", "liga", "calt";
      color: #fff;
      margin-bottom: 28px;
      max-width: 12ch;
      text-wrap: balance;
    }
    .plateia-mock .hero-hairline {
      width: 96px;
      height: 1px;
      background: var(--accent);
      margin-bottom: 28px;
      transform-origin: left center;
    }
    .plateia-mock .hero-subline {
      font-family: var(--body);
      font-weight: 500;
      font-size: 18px;
      color: rgba(255, 255, 255, 0.94);
      margin-bottom: 44px;
      letter-spacing: 0.01em;
      text-wrap: pretty;
    }
    .plateia-mock .hero-ctas {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center;
    }

    /* ---- [P5] Hero eyebrow with location pin — Greek-Blue, tracked ---- */
    .plateia-mock .hero-eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-family: var(--body);
      font-weight: 600;
      font-size: 12px;
      letter-spacing: 0.26em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 26px;
      /* Dark plate behind the Greek-Blue eyebrow so it holds ≥4.5:1
         even where the facade photo brightens behind it (WCAG 1.4.3). */
      text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
    }
    .plateia-mock .hero-eyebrow .hero-pin {
      width: 15px;
      height: 15px;
      flex: none;
      color: var(--accent);
      transform: translateY(-0.5px);
    }
    .plateia-mock .hero-eyebrow-sep {
      color: rgba(33, 117, 216, 0.55);
      font-weight: 400;
      margin: 0 -2px;
    }

    /* ---- [P5] Engraved mini-divider: laurel + temple/column ---- */
    .plateia-mock .hero-emblem {
      display: flex;
      align-items: center;
      gap: 14px;
      color: var(--accent);
      margin-bottom: 28px;
      /* drop-shadow (not text-shadow) so the engraved SVG laurel/temple
         keep contrast over a variable-brightness photo. */
      filter: drop-shadow(0 1px 5px rgba(0, 0, 0, 0.55));
    }
    .plateia-mock .hero-emblem .hero-laurel {
      width: 64px;
      height: 14px;
      opacity: 0.85;
    }
    .plateia-mock .hero-emblem .hero-laurel-r { transform: scaleX(-1); }
    .plateia-mock .hero-emblem .hero-temple {
      width: 26px;
      height: 21px;
      opacity: 0.92;
      flex: none;
    }

    /* ---- [P5] Hero body paragraph between subline and CTAs ---- */
    .plateia-mock .hero-lede {
      font-family: var(--body);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.6;
      color: rgba(255, 255, 255, 0.82);
      max-width: 46ch;
      margin-bottom: 38px;
      text-wrap: pretty;
    }

    /* ---- [P5] Hero Atmosphäre video-card (right column) ---- */
    .plateia-mock .hero-vcard {
      position: relative;
      margin: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 20px;
      overflow: hidden;
      background: rgba(26, 26, 26, 0.55);
      border: 1px solid rgba(255, 255, 255, 0.14);
      box-shadow:
        0 24px 60px -24px rgba(0, 0, 0, 0.65),
        0 2px 12px -4px rgba(0, 0, 0, 0.45);
      backdrop-filter: blur(6px);
      -webkit-backdrop-filter: blur(6px);
    }
    .plateia-mock .hero-vcard-top {
      position: absolute;
      top: 0; left: 0; right: 0;
      z-index: 3;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 16px;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0) 100%);
    }
    .plateia-mock .hero-vcard-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-family: var(--body);
      font-weight: 600;
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, 0.92);
    }
    .plateia-mock .hero-vcard-glyph { color: var(--accent); font-size: 11px; }
    .plateia-mock .hero-vcard-dots {
      color: rgba(255, 255, 255, 0.7);
      font-size: 16px;
      letter-spacing: 0.05em;
      line-height: 0;
    }
    .plateia-mock .hero-vcard-media {
      position: relative;
      flex: 1 1 auto;
      min-height: 0;
    }
    .plateia-mock .hero-vcard-media img, .plateia-mock .hero-vcard-media video {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .plateia-mock .hero-vcard-media::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.42) 100%);
      pointer-events: none;
    }
    .plateia-mock .hero-vcard-play {
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      z-index: 2;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      border: 1.5px solid rgba(255, 255, 255, 0.55);
      background: rgba(33, 117, 216, 0.86);
      color: #fff;
      display: grid;
      place-items: center;
      cursor: pointer;
      box-shadow: 0 8px 28px -8px rgba(0, 0, 0, 0.6);
      transition: transform 260ms var(--ease-soft), background 260ms var(--ease-soft);
    }
    .plateia-mock .hero-vcard-play svg { width: 26px; height: 26px; transform: translateX(1px); }
    .plateia-mock .hero-vcard-play::before {
      content: "";
      position: absolute;
      inset: -10px;
      border-radius: 50%;
      border: 1px solid rgba(255, 255, 255, 0.28);
      animation: vcardPulse 2.8s var(--ease-in-out) infinite;
    }
    @keyframes vcardPulse {
      0%   { transform: scale(1);    opacity: 0.7; }
      70%  { transform: scale(1.28); opacity: 0; }
      100% { transform: scale(1.28); opacity: 0; }
    }
    .plateia-mock .hero-vcard-play:hover { transform: translate(-50%, -50%) scale(1.06); background: rgba(33, 117, 216, 1); }
    .plateia-mock .hero-vcard-bottom {
      position: absolute;
      bottom: 0; left: 0; right: 0;
      z-index: 3;
      display: flex;
      flex-direction: column;
      gap: 10px;
      padding: 14px 16px 16px;
      background: linear-gradient(0deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0) 100%);
    }
    .plateia-mock .hero-vcard-caption {
      font-family: var(--body);
      font-weight: 500;
      font-size: 13px;
      color: rgba(255, 255, 255, 0.94);
      letter-spacing: 0.01em;
    }
    .plateia-mock .hero-vcard-progress {
      display: flex;
      gap: 6px;
    }
    .plateia-mock .hero-vcard-progress i {
      width: 22px;
      height: 3px;
      border-radius: 2px;
      background: rgba(255, 255, 255, 0.3);
    }
    .plateia-mock .hero-vcard-progress i.is-active { background: var(--accent); width: 30px; }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .hero-vcard-play::before { animation: none; }
    }

    /* Hero entrance — staggered (v2). Folio strip leads, eyebrow +
       headline follow, emblem + subline + lede + CTAs settle in.
       Portrait card fades in alongside. */
    .plateia-mock .hero-text > *, .plateia-mock .hero-portrait {
      opacity: 0;
      animation: heroEnter 720ms var(--ease-soft) forwards;
    }
    .plateia-mock .hero-eyebrow { animation-delay: 80ms; }
    .plateia-mock .hero h1 { animation-delay: 160ms; }
    .plateia-mock .hero-emblem { animation-delay: 300ms; }
    .plateia-mock .hero-hairline {
      transform: scaleX(0);
      animation-name: heroHairline;
      animation-delay: 320ms;
    }
    .plateia-mock .hero-subline { animation-delay: 380ms; }
    .plateia-mock .hero-lede { animation-delay: 440ms; }
    .plateia-mock .hero-ctas { animation-delay: 520ms; }
    .plateia-mock .hero-portrait { animation-delay: 240ms; animation-duration: 880ms; }

    @keyframes heroEnter {
      from { opacity: 0; transform: translateY(14px); }
      to   { opacity: 1; transform: translateY(0); }
    }
    @keyframes heroHairline {
      from { opacity: 0; transform: scaleX(0); }
      to   { opacity: 1; transform: scaleX(1); }
    }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .hero-text > *, .plateia-mock .hero-portrait, .plateia-mock .hero-folio-strip {
        opacity: 1;
        animation: none;
        transform: none;
      }
      .plateia-mock .hero-hairline { transform: scaleX(1); }
    }

    @media (max-width: 980px) {
      .plateia-mock .hero { height: auto; min-height: 100vh; }
      .plateia-mock .hero-content {
        grid-template-columns: 1fr;
        gap: 56px;
        padding: 56px var(--gutter) 96px;
        align-items: start;
      }
      .plateia-mock .hero-portrait {
        width: min(300px, 78vw);
        justify-self: start;
        order: 2;
      }
      .plateia-mock .hero-text { order: 1; }
    }
    @media (max-width: 768px) {
      .plateia-mock .hero h1 { font-size: clamp(40px, 12vw, 72px); }
      .plateia-mock .hero-subline { font-size: 16px; }
      .plateia-mock .hero-lede { font-size: 15px; }
      .plateia-mock .hero-emblem .hero-laurel { width: 52px; }
      .plateia-mock .hero-portrait { width: min(300px, 86vw); }
      .plateia-mock .hero-content { padding: 44px var(--gutter) 72px; gap: 40px; }
    }

    /* ============================================================
       LEAD STATEMENT (v7: flipped to DARK + container centered)
       Now sits on near-black with the drop-cap as the Greek-Blue
       focal point. The folio (Γ · II · Geleit) is centered above
       a centered text-block; within the block, lead-statement
       stays left-aligned so the drop-cap can float properly.
       ============================================================ */
    .plateia-mock .lead {
      padding: 160px 0 160px;
      background: var(--section-dark);
      color: var(--ink-on-dark);
      position: relative;
    }
    /* Centered container for the whole lead block — sits in the
       middle of the page. The statement inside stays text-align:left
       (drop-cap requires that), but the block as a whole is centered. */
    .plateia-mock .lead-inner {
      max-width: 36ch;
      margin: 0 auto;
      position: relative;
      z-index: 3;
    }
    /* Folio block: stacked vertically, centered. Was a left/right
       flex; v7 restacks as a centered column. */
    .plateia-mock .lead-folio {
      padding-bottom: 28px;
      margin-bottom: 56px;
      border-bottom: 1px solid var(--hairline-on-dark);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 14px;
      text-align: center;
    }
    .plateia-mock .lead-kicker {
      font-family: var(--display);
      font-style: italic;
      font-weight: 400;
      font-size: 14px;
      font-variation-settings: "opsz" 24;
      color: var(--muted-on-dark);
      letter-spacing: -0.005em;
      text-align: center;
    }
    .plateia-mock .lead-kicker a {
      color: var(--accent);
      border-bottom: 1px solid currentColor;
      padding-bottom: 1px;
      font-style: normal;
      font-family: var(--body);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.22em;
      text-transform: uppercase;
      margin-left: 12px;
      transition:
        color var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .plateia-mock .lead-kicker a:hover { color: var(--accent-hover); }
    }
    .plateia-mock .lead-statement {
      font-family: var(--dalek);
      font-weight: 700;
      font-size: clamp(30px, 4vw, 52px);
      /* Brush ist rauer → etwas mehr Zeilenhöhe für Lesbarkeit. */
      line-height: 1.32;
      letter-spacing: -0.015em;
      font-variation-settings: "opsz" 96;
      font-feature-settings: "ss01", "kern", "liga", "calt";
      color: var(--ink-on-dark);
      text-wrap: balance;
      /* Statement stays left-aligned within the centered container
         so the drop-cap can float-left properly. */
      text-align: left;
    }
    .plateia-mock .lead-statement em {
      /* Brush hat keinen echten Kursiv-Schnitt → normal lassen; die blaue
         Farbe trägt die Hervorhebung (P3: „blaue Wörter"). */
      font-style: normal;
      font-weight: 400;
      color: var(--accent);
    }
    /* Drop-cap stays Greek-Blue. On near-black, Greek-Blue at
       #2175D8 has WCAG AA contrast (~5.4:1) — readable. */
    @media (max-width: 768px) {
      .plateia-mock .lead { padding: 120px 0 100px; }
      .plateia-mock .lead-inner { max-width: none; padding: 0 var(--gutter); }
    }

    /* [P8] Lead photo strip — fills the space under the statement
       with a quiet 3-up row of small photos (a "table glimpse"
       triptych). Wider than the 36ch statement column so it reads
       as its own band; on dark, each photo carries a thin hairline
       + a soft lift. Each tile reveals on scroll with a small
       per-tile delay (uses the global [data-reveal] IO). */
    .plateia-mock .lead-photos {
      max-width: 760px;
      margin: 64px auto 0;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: clamp(12px, 1.8vw, 22px);
      position: relative;
      z-index: 3;
    }
    .plateia-mock .lead-photo {
      position: relative;
      aspect-ratio: 3 / 4;
      overflow: hidden;
      border-radius: 3px;
      background: var(--hairline-on-dark);
      box-shadow:
        inset 0 0 0 1px var(--hairline-on-dark),
        0 16px 34px -22px rgba(0,0,0,0.7);
      /* staggered reveal: starts slightly down + faded; the global
         IO adds .revealed to the parent [data-reveal]. */
      opacity: 0;
      transform: translateY(18px);
      transition:
        opacity 620ms var(--ease-soft),
        transform 620ms var(--ease-soft);
    }
    .plateia-mock .lead-photo:nth-child(1) { transition-delay: 60ms; }
    .plateia-mock .lead-photo:nth-child(2) { transition-delay: 150ms; }
    .plateia-mock .lead-photo:nth-child(3) { transition-delay: 240ms; }
    .plateia-mock .lead.revealed .lead-photo {
      opacity: 1;
      transform: none;
    }
    /* the middle tile sits a touch taller for a quiet editorial
       rhythm (a vitrine row, not a flat grid) */
    .plateia-mock .lead-photo.is-tall { margin-top: -22px; aspect-ratio: 3 / 4.4; }
    .plateia-mock .lead-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%;
      display: block;
      transition: transform 900ms var(--ease-soft);
    }
    @media (hover: hover) and (pointer: fine) {
      .plateia-mock .lead-photo:hover img { transform: scale(1.05); }
    }
    @media (max-width: 600px) {
      .plateia-mock .lead-photos {
        max-width: none;
        padding: 0 var(--gutter);
        gap: 12px;
        margin-top: 48px;
      }
      .plateia-mock .lead-photo.is-tall { margin-top: 0; aspect-ratio: 3 / 4; }
    }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .lead-photo {
        opacity: 1;
        transform: none;
        transition: none;
      }
      .plateia-mock .lead-photo img { transition: none; }
      .plateia-mock .lead-photo:hover img { transform: none; }
    }

    /* ============================================================
       MEANDER DIVIDER — exactly once on the page (unchanged from v1).
       The SVG already carries it; v4 added § flanks, v5 rejects them.
       ============================================================ */
    .plateia-mock .meander-divider {
      padding: 8px 0 40px;
      background: var(--base);
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .plateia-mock .meander-divider svg { display: block; }

    /* ============================================================
       RUNNING MEANDER MARQUEE (P2)
       One prominent, slowly LEFT-running Greek-key band — a seamless
       loop built from two identical pattern tracks translated by
       -50% (the duplicate makes the wrap invisible). Bigger/bolder
       than the static .meander-divider. Two surface modifiers:
         .meander-marquee.on-light  → BLUE  (#2175D8 / --accent)
         .meander-marquee.on-dark   → WHITE
       reduced-motion: animation off → reads as a static band.

       Markup:
         <div class="meander-marquee on-light" aria-hidden="true">
           <div class="meander-marquee-track">
             <span class="meander-band"></span><span class="meander-band"></span><span class="meander-band"></span><span class="meander-band"></span>
           </div>
         </div>
       Each .meander-band is a wide repeating SVG strip; the track
       holds two of them and slides one full band-width.
       ============================================================ */
    .plateia-mock .meander-marquee {
      position: relative;
      overflow: hidden;
      width: 100%;
      /* prominent height vs. the 20px divider */
      height: 34px;
      display: flex;
      align-items: center;
      /* mask the ends so the band fades in/out rather than hard-cuts */
      -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
              mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    }
    .plateia-mock .meander-marquee-track {
      display: flex;
      flex: none;
      width: max-content;
      animation: meanderRun 36s linear infinite;
      will-change: transform;
    }
    .plateia-mock .meander-band {
      flex: none;
      /* one band = a wide multiple of the 40px tile so the two
         copies tile seamlessly across the join */
      width: 1280px;
      height: 34px;
      /* 40×34 tile of the meander glyph, stroke = currentColor */
      background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34' viewBox='0 0 40 34'%3E%3Cpath d='M 0 27 V 5 H 33 V 22 H 12 V 11 H 25 V 16 H 18 V 27 H 40' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linejoin='miter' stroke-linecap='butt'/%3E%3C/svg%3E");
      background-repeat: repeat-x;
      background-position: 0 50%;
      background-size: 40px 34px;
    }
    /* Surface tints — recolour the strokes by swapping the data: URL.
       (CSS can't recolour an SVG-as-background's stroke directly, so
       each modifier carries its own coloured data: URL.) */
    .plateia-mock .meander-marquee.on-dark .meander-band {
      background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34' viewBox='0 0 40 34'%3E%3Cpath d='M 0 27 V 5 H 33 V 22 H 12 V 11 H 25 V 16 H 18 V 27 H 40' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linejoin='miter' stroke-linecap='butt'/%3E%3C/svg%3E");
      opacity: 0.85;
    }
    .plateia-mock .meander-marquee.on-light .meander-band {
      background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34' viewBox='0 0 40 34'%3E%3Cpath d='M 0 27 V 5 H 33 V 22 H 12 V 11 H 25 V 16 H 18 V 27 H 40' fill='none' stroke='%232175D8' stroke-width='2.4' stroke-linejoin='miter' stroke-linecap='butt'/%3E%3C/svg%3E");
      opacity: 0.9;
    }
    /* Standalone light-surface band (its own row on the base paper). */
    .plateia-mock .meander-marquee.is-divider {
      padding: 26px 0;
      background: var(--base);
    }
    @keyframes meanderRun {
      from { transform: translate3d(0, 0, 0); }
      /* slide exactly one band width so the second copy lands where
         the first started — seamless infinite loop */
      to   { transform: translate3d(-1280px, 0, 0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .meander-marquee-track { animation: none !important; }
    }

    /* ============================================================
       SPEISEKARTE
       Folio "III · Karte", title with italic anchor ("auf den Tisch"),
       dish-counts on category heads (v3), leader-dot rules between
       name and price (v4), tabular-lining figures only on prices.
       ============================================================ */
    .plateia-mock .menu {
      padding: 56px 0 180px;
      background: var(--base);
      position: relative;
    }
    /* v7: header centered above 3-column body. */
    .plateia-mock .menu-header {
      max-width: 920px;
      margin: 0 auto 96px;
      text-align: center;
    }
    .plateia-mock .menu-folio {
      margin-bottom: 36px;
      display: flex;
      justify-content: center;
    }
    .plateia-mock .menu-title {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(44px, 5.5vw, 68px);
      line-height: 1.06;
      letter-spacing: -0.022em;
      font-variation-settings: "opsz" 96;
      font-feature-settings: "ss01", "kern", "liga", "calt";
      color: var(--ink);
      text-wrap: balance;
      max-width: 16ch;
      margin: 0 auto;
    }
    .plateia-mock .menu-title em {
      font-style: italic;
      font-weight: 400;
      color: var(--accent);
    }
    .plateia-mock .menu-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 72px;
    }
    @media (max-width: 980px) {
      .plateia-mock .menu-grid {
        grid-template-columns: 1fr;
        gap: 56px;
      }
    }
    .plateia-mock .menu-cat {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 16px;
      padding-bottom: 18px;
      margin-bottom: 24px;
      border-bottom: 1px solid var(--hairline);
    }
    .plateia-mock .menu-cat .label {
      font-family: var(--body);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--accent);
    }
    /* "4 Speisen" — italic count next to category head. Confidence,
       not feature-list. (v3 finding.) */
    .plateia-mock .menu-cat .count {
      font-family: var(--display);
      font-style: italic;
      font-weight: 400;
      font-size: 13px;
      font-variation-settings: "opsz" 24;
      color: var(--muted);
      font-variant-numeric: tabular-nums lining-nums;
    }
    .plateia-mock .menu-item {
      padding: 16px 0;
      border-bottom: 1px solid var(--hairline);
    }
    .plateia-mock .menu-item:last-child { border-bottom: none; }
    .plateia-mock .menu-item-head {
      display: flex;
      align-items: baseline;
      gap: 8px;
      margin-bottom: 4px;
    }
    .plateia-mock .menu-item-name {
      font-family: var(--display);
      font-weight: 500;
      font-size: 19px;
      letter-spacing: -0.005em;
      font-variation-settings: "opsz" 36;
      font-feature-settings: "ss01", "kern", "liga";
      color: var(--ink);
      flex-shrink: 0;
    }
    /* Leader-dots — CSS radial-gradient tile, no asset. The thing
       printed menus had until ~1995 and almost no website has. */
    .plateia-mock .menu-item-leader {
      flex: 1;
      height: 0.65em;
      background-image: radial-gradient(
        circle,
        var(--hairline) 0,
        var(--hairline) 0.9px,
        transparent 1.1px
      );
      background-size: 5px 5px;
      background-repeat: repeat-x;
      background-position: left bottom 0.18em;
      align-self: end;
      transform: translateY(-0.18em);
    }
    .plateia-mock .menu-item-price {
      font-family: var(--body);
      font-weight: 500;
      font-size: 14.5px;
      color: var(--ink);
      flex-shrink: 0;
      white-space: nowrap;
      /* Override the sitewide onum — prices need tabular-lining
         so the column reads as a clean €-stack. */
      font-feature-settings: "kern", "tnum", "lnum";
      font-variant-numeric: tabular-nums lining-nums;
    }
    .plateia-mock .menu-item-desc {
      font-family: var(--body);
      font-size: 13.5px;
      color: var(--muted);
      line-height: 1.6;
      text-wrap: pretty;
      hyphens: auto;
      -webkit-hyphens: auto;
      max-width: 38ch;
    }
    .plateia-mock .menu-footer {
      margin-top: 72px;
      text-align: center;
    }
    .plateia-mock .menu-footer a {
      color: var(--accent);
      font-family: var(--body);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: 0.04em;
      border-bottom: 1px solid currentColor;
      padding-bottom: 2px;
      transition:
        color var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .plateia-mock .menu-footer a:hover { color: var(--accent-hover); }
    }

    /* ============================================================
       MENU CARDS (v9)
       Replaces the 3-column dish list with 3 category cards:
       Speisen / Desserts / Getränke. Each is a round photo
       frame with title above + description + CTA below — the
       "select a category" pattern from the reference screenshot,
       adapted to Plateia editorial restraint.

       Hover orchestration (5 coordinated changes):
       1. Title color → accent (Greek-Blue)
       2. Image scale 1.04 over 800ms (slow Ken-Burns)
       3. Halo ring expands 10px outside the circle (Greek-Blue
          1px stroke, fades in + scales from 0.94 to 1.0)
       4. CTA underline grows from transparent to currentColor
       5. Arrow translates +4px right

       Stagger-reveal on section enter: 100/200/300ms per card.
       ============================================================ */
    .plateia-mock .menu-cards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 56px;
      max-width: 1080px;
      margin: 0 auto;
    }
    @media (max-width: 980px) {
      .plateia-mock .menu-cards {
        grid-template-columns: 1fr;
        gap: 80px;
      }
    }

    .plateia-mock .menu-card {
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      color: inherit;
      text-decoration: none;
      /* Stagger-reveal: initial state, .menu.revealed triggers
         the full state. Per-card delay below. */
      opacity: 0;
      transform: translateY(14px);
      transition:
        opacity 600ms var(--ease-soft),
        transform 600ms var(--ease-soft);
    }
    .plateia-mock .menu.revealed .menu-card { opacity: 1; transform: translateY(0); }
    .plateia-mock .menu.revealed .menu-card:nth-child(1) { transition-delay: 100ms; }
    .plateia-mock .menu.revealed .menu-card:nth-child(2) { transition-delay: 200ms; }
    .plateia-mock .menu.revealed .menu-card:nth-child(3) { transition-delay: 300ms; }

    .plateia-mock .menu-card-title {
      /* Italic Fraunces at opsz-96 — the "script-feel" cursive
         the screenshot uses, but editorial-grade not Comic-Sans.
         Stays Fraunces (NOT Dalek) — these category names are
         a layer below the section title in hierarchy, and Dalek
         on top of Dalek would flatten the rhythm. */
      font-family: var(--display);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(32px, 3.4vw, 44px);
      font-variation-settings: "opsz" 96;
      font-feature-settings: "ss01", "kern", "liga", "calt";
      letter-spacing: -0.005em;
      color: var(--ink);
      margin-bottom: 28px;
      line-height: 1.1;
      transition: color var(--t-base) var(--ease-out);
    }

    .plateia-mock .menu-card-frame {
      position: relative;
      width: clamp(200px, 22vw, 280px);
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      overflow: hidden;
      background: var(--hairline);
      margin-bottom: 36px;
    }

    .plateia-mock .menu-card-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 800ms var(--ease-soft);
    }

    /* Halo ring — sits 10px outside the circle. Default
       invisible + slightly shrunk. Expands on hover. */
    .plateia-mock .menu-card-frame::after {
      content: "";
      position: absolute;
      inset: -10px;
      border: 1px solid var(--accent);
      border-radius: 50%;
      opacity: 0;
      transform: scale(0.94);
      transition:
        opacity 600ms var(--ease-soft),
        transform 600ms var(--ease-soft);
      pointer-events: none;
    }

    .plateia-mock .menu-card-desc {
      font-family: var(--body);
      font-size: 14.5px;
      line-height: 1.65;
      color: var(--muted);
      text-wrap: pretty;
      max-width: 30ch;
      margin-bottom: 28px;
    }

    .plateia-mock .menu-card-cta {
      display: inline-flex;
      align-items: baseline;
      gap: 10px;
      font-family: var(--body);
      font-weight: 500;
      font-size: 11.5px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--accent);
      padding-bottom: 4px;
      border-bottom: 1px solid transparent;
      transition: border-color var(--t-base) var(--ease-out);
    }
    .plateia-mock .menu-card-arrow {
      display: inline-block;
      transform: translateX(0);
      transition: transform var(--t-base) var(--ease-out);
    }

    /* Hover orchestration. Gated to hover-capable devices so
       touch doesn't false-fire on tap. */
    @media (hover: hover) and (pointer: fine) {
      .plateia-mock .menu-card:hover .menu-card-title { color: var(--accent); }
      .plateia-mock .menu-card:hover .menu-card-image { transform: scale(1.04); }
      .plateia-mock .menu-card:hover .menu-card-frame::after {
        opacity: 1;
        transform: scale(1);
      }
      .plateia-mock .menu-card:hover .menu-card-cta {
        border-bottom-color: currentColor;
      }
      .plateia-mock .menu-card:hover .menu-card-arrow {
        transform: translateX(4px);
      }
    }

    /* Keyboard parallel: same affordance when the card is
       :focus-visible. */
    .plateia-mock .menu-card:focus-visible .menu-card-frame::after {
      opacity: 1;
      transform: scale(1);
    }
    .plateia-mock .menu-card:focus-visible .menu-card-title { color: var(--accent); }

    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .menu-card, .plateia-mock .menu-card-image, .plateia-mock .menu-card-title, .plateia-mock .menu-card-frame::after, .plateia-mock .menu-card-cta, .plateia-mock .menu-card-arrow {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
      }
    }

    /* ============================================================
       GALERIE — Steintafel grid (v10, P6).
       The 8 photos hang as a wall of ornamental sandstone tablets
       (.stone-tablet, defined further below). No pinning, no
       slideshow, no JS — a static editorial grid on the dark
       section. The header + folio + title rules below are still in
       use; the tablet component carries the rest.
       (Replaced the v6–v9 pinned cross-fade slideshow.)
       ============================================================ */
    /* v7: Galerie is DARK — the tablets + captions sit on near-black
       like museum-vitrine pieces; captions go light-on-dark. */
    .plateia-mock .gallery {
      padding: 120px 0 120px;
      background: var(--section-dark);
      color: var(--ink-on-dark);
      position: relative;
    }
    .plateia-mock .gallery-header {
      max-width: 820px;
      margin: 0 auto 56px;
      text-align: center;
      position: relative;
      z-index: 3;
    }
    .plateia-mock .gallery-folio {
      margin-bottom: 36px;
      display: flex;
      justify-content: center;
    }
    .plateia-mock .gallery-title {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(38px, 4.5vw, 56px);
      line-height: 1.06;
      letter-spacing: -0.018em;
      font-variation-settings: "opsz" 72;
      font-feature-settings: "ss01", "kern", "liga", "calt";
      color: var(--ink-on-dark);
      text-wrap: balance;
      max-width: 18ch;
      margin: 0 auto;
    }
    .plateia-mock .gallery-title em {
      font-style: italic;
      font-weight: 400;
      color: var(--accent);
    }

    /* (The v6–v9 pinned-slideshow + mobile-fallback CSS for the
       Galerie was removed in v10 — the section is now a static
       grid of .stone-tablet components, defined just below.) */

    /* ============================================================
       [P6] STEINTAFEL (stone tablet) — the reusable ornamental
       frame around every Galerie photo (and reused on speisen.html).
       A horizontal warm-beige sandstone plate: a chiselled raised
       outer border, a recessed centre panel holding the photo
       (object-fit:cover, rectangular — no circle, no halo ring),
       and engraved ornament around it: a Greek majuscule inscription
       top + bottom, a vertical column of Greek words left + right,
       a laurel sprig in each side margin, and Greek-key + rosette
       blocks in the four corners. All ornament is low-contrast
       beige-brown so multiple tablets read calm, not loud.

       Layout grid (3 cols × 3 rows): the photo panel sits centre,
       the side word-columns + laurels flank it, the inscriptions
       run along top + bottom, rosettes pin the corners.
       ============================================================ */
    .plateia-mock .gallery-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: clamp(36px, 4vw, 64px);
      max-width: var(--container);
      margin: 0 auto;
      padding: 0 var(--gutter);
    }
    @media (max-width: 720px) {
      .plateia-mock .gallery-grid { grid-template-columns: 1fr; gap: 40px; }
    }

    /* The tablet block. --stone / --stone-* tokens are scoped here so
       the component is self-contained + portable to speisen.html. */
    .plateia-mock .stone-tablet {
      --stone:        #d8caaf;   /* sandstone face */
      --stone-hi:     #ece1c8;   /* raised highlight */
      --stone-lo:     #b7a482;   /* carved shadow */
      --stone-engrave:#8a7855;   /* engraved-ornament ink (low contrast) */
      --stone-deep:   #6f5f42;   /* deepest carved line */
      position: relative;
      background-color: var(--stone);
      background-image:
        /* faint warm tonal drift */
        radial-gradient(120% 90% at 30% 20%, rgba(255,250,235,0.5), transparent 60%),
        radial-gradient(120% 90% at 80% 90%, rgba(110,95,66,0.16), transparent 62%),
        /* sandstone grain (feTurbulence) */
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.25 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
      background-blend-mode: normal, normal, multiply;
      padding: clamp(20px, 3.2vw, 40px);
      /* chiselled raised outer edge: bright top-left, dark bottom-right */
      border-radius: 5px;
      box-shadow:
        inset 0 2px 0 rgba(255,250,235,0.75),
        inset 2px 0 0 rgba(255,250,235,0.45),
        inset 0 -3px 0 rgba(95,80,55,0.55),
        inset -3px 0 0 rgba(95,80,55,0.4),
        inset 0 0 0 2px rgba(120,103,72,0.35),
        0 18px 40px -22px rgba(40,32,18,0.55),
        0 4px 10px -6px rgba(40,32,18,0.4);
      color: var(--stone-engrave);
    }
    /* fine surface cracks + a 2nd carved bevel just inside the rim */
    .plateia-mock .stone-tablet::before {
      content: "";
      position: absolute;
      inset: clamp(10px, 1.6vw, 18px);
      border: 1px solid rgba(111,95,66,0.32);
      border-radius: 3px;
      box-shadow:
        inset 0 1px 0 rgba(255,250,235,0.4),
        inset 0 -1px 0 rgba(95,80,55,0.3);
      pointer-events: none;
    }

    /* inner content grid: [laurel|main|laurel] × rows */
    .plateia-mock .stone-tablet-inner {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr auto;
      grid-template-rows: auto 1fr auto;
      gap: clamp(8px, 1.4vw, 16px);
      align-items: stretch;
    }

    /* top + bottom engraved inscriptions span the centre column */
    .plateia-mock .stone-inscription {
      grid-column: 2;
      text-align: center;
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(9px, 1.05vw, 12px);
      letter-spacing: 0.42em;
      text-indent: 0.42em;            /* offsets the tracking so it stays centred */
      text-transform: uppercase;
      color: var(--stone-engrave);
      /* engraved look: dark cut + light catch-light below */
      text-shadow:
        0 1px 0 rgba(255,250,235,0.55),
        0 -1px 0 rgba(95,80,55,0.4);
      opacity: 0.92;
      white-space: nowrap;
      overflow: hidden;
      align-self: center;
    }
    .plateia-mock .stone-inscription.is-top    { grid-row: 1; padding-bottom: 4px; }
    .plateia-mock .stone-inscription.is-bottom { grid-row: 3; padding-top: 4px; }

    /* vertical Greek word column, left + right */
    .plateia-mock .stone-words {
      grid-row: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(10px, 1.6vw, 20px);
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(8px, 0.95vw, 11px);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--stone-engrave);
      text-shadow: 0 1px 0 rgba(255,250,235,0.5);
      opacity: 0.85;
    }
    .plateia-mock .stone-words span {
      writing-mode: vertical-rl;
      text-orientation: upright;
    }
    .plateia-mock .stone-words.is-left  { grid-column: 1; }
    .plateia-mock .stone-words.is-right { grid-column: 3; }

    /* engraved laurel sprig in each side margin (uses currentColor) */
    .plateia-mock .stone-laurel {
      width: clamp(22px, 2.4vw, 34px);
      height: auto;
      color: var(--stone-engrave);
      opacity: 0.72;
      align-self: center;
    }
    .plateia-mock .stone-laurel.is-left  { grid-column: 1; grid-row: 2; }
    .plateia-mock .stone-laurel.is-right { grid-column: 3; grid-row: 2; transform: scaleX(-1); }

    /* the recessed centre panel holding the photo */
    .plateia-mock .stone-panel {
      grid-column: 2;
      grid-row: 2;
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: 3px;
      background: #2a241a;
      /* carved-in recess: dark top-left, light bottom-right (inverse
         of the raised outer rim) + a thin engraved keyline */
      box-shadow:
        inset 0 3px 7px rgba(40,30,12,0.65),
        inset 3px 0 7px rgba(40,30,12,0.5),
        inset 0 -2px 0 rgba(255,250,235,0.4),
        inset -2px 0 0 rgba(255,250,235,0.28),
        0 0 0 1px rgba(95,80,55,0.55);
    }
    .plateia-mock .stone-panel img {
      width: 100%;
      height: 100%;
      object-fit: cover;          /* fills the recessed panel — rectangular */
      object-position: 50% 50%;
      display: block;
      transition: transform 900ms var(--ease-soft);
    }
    .plateia-mock .stone-tablet:hover .stone-panel img { transform: scale(1.04); }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .stone-panel img { transition: none; }
      .plateia-mock .stone-tablet:hover .stone-panel img { transform: none; }
    }

    /* corner ornaments: rosette/spiral + Greek-key block, one per
       corner, absolutely pinned over the tablet face */
    .plateia-mock .stone-corner {
      position: absolute;
      width: clamp(26px, 3.2vw, 42px);
      height: clamp(26px, 3.2vw, 42px);
      color: var(--stone-engrave);
      opacity: 0.6;
      pointer-events: none;
    }
    .plateia-mock .stone-corner.tl { top: clamp(6px, 1vw, 12px);  left: clamp(6px, 1vw, 12px); }
    .plateia-mock .stone-corner.tr { top: clamp(6px, 1vw, 12px);  right: clamp(6px, 1vw, 12px); transform: scaleX(-1); }
    .plateia-mock .stone-corner.bl { bottom: clamp(6px, 1vw, 12px); left: clamp(6px, 1vw, 12px); transform: scaleY(-1); }
    .plateia-mock .stone-corner.br { bottom: clamp(6px, 1vw, 12px); right: clamp(6px, 1vw, 12px); transform: scale(-1, -1); }

    /* caption below each tablet — same fig/name grammar as the
       gallery, but on the dark section so light-on-dark */
    .plateia-mock .stone-tablet-caption {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      margin-top: 16px;
      padding-bottom: 5px;
      border-bottom: 1px solid var(--hairline-on-dark);
    }
    .plateia-mock .stone-tablet-caption .fig {
      font-family: var(--body);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--accent);
      font-variant-numeric: tabular-nums lining-nums;
    }
    .plateia-mock .stone-tablet-caption .name {
      font-family: var(--display);
      font-style: italic;
      font-weight: 400;
      font-size: 15px;
      font-variation-settings: "opsz" 18;
      color: var(--ink-on-dark);
    }

    /* tighter ornament on small tablets — drop the vertical word
       columns + side laurels so the photo keeps room; keep the
       inscriptions + corners (they carry the stone read on their own) */
    @media (max-width: 540px) {
      .plateia-mock .stone-tablet-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
      }
      .plateia-mock .stone-words, .plateia-mock .stone-laurel { display: none; }
      .plateia-mock .stone-inscription, .plateia-mock .stone-panel { grid-column: 1; }
      .plateia-mock .stone-inscription.is-top    { grid-row: 1; }
      .plateia-mock .stone-panel                 { grid-row: 2; }
      .plateia-mock .stone-inscription.is-bottom { grid-row: 3; }
      .plateia-mock .stone-inscription { letter-spacing: 0.3em; text-indent: 0.3em; }
    }

    /* ============================================================
       PRAKTISCH (dark anchor)
       Folio "V · Praktisch" + real headline "Wo, wann, wie." (v3)
       with italic accent on "wie". 3-col grid retained.
       ============================================================ */
    .plateia-mock .praktisch {
      background: var(--section-dark);
      color: var(--ink-on-dark);
      padding: 140px 0 160px;
      position: relative;
    }
    .plateia-mock .praktisch::before {
      content: "";
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 1px;
      background: var(--accent);
      opacity: 0.55;
    }
    .plateia-mock .praktisch-header {
      margin: 0 auto 80px;
      padding-bottom: 32px;
      border-bottom: 1px solid var(--hairline-on-dark);
      text-align: center;
    }
    .plateia-mock .praktisch-folio {
      margin-bottom: 28px;
      display: flex;
      justify-content: center;
    }
    .plateia-mock .praktisch-title {
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(40px, 5vw, 64px);
      line-height: 1.04;
      letter-spacing: -0.022em;
      font-variation-settings: "opsz" 96;
      font-feature-settings: "ss01", "kern", "liga", "calt";
      color: var(--ink-on-dark);
      text-wrap: balance;
      max-width: 16ch;
      margin: 0 auto;
    }
    .plateia-mock .praktisch-title em {
      font-style: italic;
      font-weight: 400;
      color: var(--accent);
    }
    .plateia-mock .praktisch-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 56px;
    }
    @media (max-width: 980px) {
      .plateia-mock .praktisch-grid {
        grid-template-columns: 1fr;
        gap: 48px;
      }
    }
    .plateia-mock .praktisch-col h3 {
      font-family: var(--body);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 28px;
      padding-bottom: 16px;
      border-bottom: 1px solid var(--hairline-on-dark);
    }

    .plateia-mock .hours-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .plateia-mock .hours-list li {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      font-family: var(--body);
      font-size: 15px;
      color: var(--ink-on-dark);
      gap: 16px;
    }
    .plateia-mock .hours-list .day { font-weight: 500; }
    .plateia-mock .hours-list .time {
      color: var(--muted-on-dark);
      /* Override sitewide onum — hours column needs tabular-lining. */
      font-feature-settings: "kern", "tnum", "lnum";
      font-variant-numeric: tabular-nums lining-nums;
    }
    .plateia-mock .hours-list .closed .time {
      color: var(--accent);
      font-style: italic;
      font-family: var(--display);
      font-variation-settings: "opsz" 24;
      font-feature-settings: "kern", "liga";
    }

    .plateia-mock .address-block {
      font-family: var(--body);
      font-size: 15px;
      line-height: 1.7;
      color: var(--ink-on-dark);
    }
    .plateia-mock .address-block p { margin-bottom: 20px; }
    .plateia-mock .address-block .address-line {
      font-family: var(--display);
      font-size: 19px;
      font-weight: 500;
      font-variation-settings: "opsz" 36;
      font-feature-settings: "ss01", "kern", "liga";
      color: var(--ink-on-dark);
      margin-bottom: 4px;
    }
    .plateia-mock .address-link {
      color: var(--accent);
      border-bottom: 1px solid currentColor;
      padding-bottom: 1px;
      display: inline-block;
      margin-top: 4px;
      font-size: 13.5px;
      transition:
        color var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .plateia-mock .address-link:hover { color: var(--accent-hover); }
    }
    .plateia-mock .contact-row {
      margin-top: 28px;
      padding-top: 20px;
      border-top: 1px solid var(--hairline-on-dark);
      display: flex;
      flex-direction: column;
      gap: 6px;
      font-size: 14px;
      color: var(--muted-on-dark);
    }
    .plateia-mock .contact-row a {
      color: var(--ink-on-dark);
      /* Tabular-lining for the phone number. */
      font-feature-settings: "kern", "tnum", "lnum";
      font-variant-numeric: tabular-nums lining-nums;
      transition: color var(--t-base) var(--ease-out);
    }
    .plateia-mock .contact-row a[href^="mailto"] {
      /* Email isn't a number column — restore onum. */
      font-feature-settings: "kern", "liga", "calt", "onum";
      font-variant-numeric: normal;
    }
    @media (hover: hover) and (pointer: fine) {
      .plateia-mock .contact-row a:hover { color: var(--accent); }
    }

    .plateia-mock .reservation-cta {
      display: flex;
      flex-direction: column;
      gap: 18px;
    }
    .plateia-mock .reservation-cta .btn-primary { align-self: flex-start; }
    .plateia-mock .reservation-cta .alt {
      font-family: var(--body);
      font-size: 13.5px;
      color: var(--muted-on-dark);
      line-height: 1.6;
      text-wrap: pretty;
    }
    .plateia-mock .reservation-cta .alt a {
      color: var(--ink-on-dark);
      border-bottom: 1px solid var(--muted-on-dark);
      padding-bottom: 1px;
      transition:
        color var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .plateia-mock .reservation-cta .alt a:hover {
        color: var(--accent);
        border-color: var(--accent);
      }
    }

    /* ============================================================
       FOOTER — coda
       v3 composition (wordmark + practical info as a coda, not a
       fresh section), v4 italic Kolophon line at the bottom.
       ============================================================ */
    .plateia-mock .footer {
      background: var(--section-dark);
      color: var(--muted-on-dark);
      padding: 88px 0 36px;
      border-top: 1px solid rgba(33, 117, 216, 0.45);
    }
    /* P3 — merged praktisch+footer block: inherits the dark .footer
       surface but takes the praktisch section's generous rhythm and
       centered header so the page closes on one coherent block. */
    .plateia-mock .footer-merged {
      padding: 132px 0 44px;
      position: relative;
    }
    /* [P6] Google-Maps-Embed-Band, dezent ans dunkle editorial-Theme angepasst. */
    .plateia-mock .footer-map {
      margin-top: clamp(48px, 6vw, 88px);
      border: 1px solid rgba(255, 255, 255, 0.14);
      border-radius: 4px;
      overflow: hidden;
      background: #15140f;
    }
    .plateia-mock .footer-map iframe {
      display: block;
      width: 100%;
      height: clamp(220px, 30vw, 340px);
      border: 0;
      filter: grayscale(0.4) brightness(0.95) contrast(1.04);
    }
    .plateia-mock .footer-merged-header {
      margin: 0 auto 80px;
      padding-bottom: 32px;
      border-bottom: 1px solid var(--hairline-on-dark);
      text-align: center;
    }
    .plateia-mock .footer-merged-header .praktisch-folio {
      margin-bottom: 28px;
      display: flex;
      justify-content: center;
    }
    .plateia-mock .footer-merged .footer-wordmark {
      font-size: clamp(40px, 4.6vw, 56px);
      line-height: 0.92;
    }
    .plateia-mock .footer-merged .reservation-cta {
      margin-top: 28px;
    }
    .plateia-mock .footer-coda-folio {
      margin-bottom: 48px;
      padding-bottom: 24px;
      border-bottom: 1px solid var(--hairline-on-dark);
    }
    .plateia-mock .footer-grid {
      display: grid;
      grid-template-columns: 1.6fr 1fr 1fr;
      gap: 56px;
      margin-bottom: 56px;
    }
    @media (max-width: 768px) {
      .plateia-mock .footer-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }
    .plateia-mock .footer-wordmark {
      font-family: var(--dalek);
      font-weight: 700;
      font-size: clamp(48px, 6vw, 72px);
      letter-spacing: -0.022em;
      line-height: 0.9;
      color: var(--ink-on-dark);
      font-variation-settings: "opsz" 144;
      font-feature-settings: "ss01", "kern", "liga", "calt";
    }
    .plateia-mock .footer-wordmark .subtitle {
      display: block;
      font-family: var(--body);
      font-size: 11px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--muted-on-dark);
      margin-top: 16px;
      font-weight: 500;
    }
    .plateia-mock .footer-col h4 {
      font-family: var(--body);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 20px;
    }
    .plateia-mock .footer-col p {
      font-family: var(--body);
      font-size: 13.5px;
      line-height: 1.75;
      color: var(--muted-on-dark);
      text-wrap: pretty;
    }
    .plateia-mock .footer-col ul {
      display: flex;
      flex-direction: column;
      gap: 4px;
    }
    .plateia-mock .footer-col li {
      font-family: var(--body);
      font-size: 13.5px;
      color: var(--muted-on-dark);
      line-height: 1.7;
    }
    .plateia-mock .footer-col .day {
      display: inline-block;
      width: 56px;
      color: var(--ink-on-dark);
      font-weight: 500;
    }
    .plateia-mock .footer-col .time {
      font-feature-settings: "kern", "tnum", "lnum";
      font-variant-numeric: tabular-nums lining-nums;
    }

    /* Kolophon — italic signature, single sentence. v4. */
    .plateia-mock .colophon {
      margin-top: 8px;
      padding-top: 32px;
      border-top: 1px solid var(--hairline-on-dark);
      font-family: var(--display);
      font-style: italic;
      font-weight: 400;
      font-size: 14px;
      font-variation-settings: "opsz" 24;
      color: var(--muted-on-dark);
      max-width: 62ch;
      line-height: 1.55;
    }
    .plateia-mock .colophon::before {
      content: "Kolophon · ";
      color: var(--accent);
      font-style: normal;
      font-family: var(--body);
      font-weight: 500;
      font-size: 10px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      margin-right: 8px;
    }

    .plateia-mock .footer-bottom {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 32px;
      margin-top: 40px;
      border-top: 1px solid var(--hairline-on-dark);
      font-size: 12px;
      color: var(--muted-on-dark);
      flex-wrap: wrap;
      gap: 16px;
    }
    .plateia-mock .footer-legal {
      display: flex;
      gap: 24px;
    }
    .plateia-mock .footer-legal a {
      color: var(--muted-on-dark);
      transition: color var(--t-base) var(--ease-out);
    }
    @media (hover: hover) and (pointer: fine) {
      .plateia-mock .footer-legal a:hover { color: var(--ink-on-dark); }
    }

    /* ============================================================
       DALEK SWAP (v8)
       Display headlines + wordmarks swap from Fraunces to Dalek
       (K-Type, 2007 — letterforms with Phoenician/Greek/Runic
       overtones, originally cut for the Doctor Who Daleks). All
       caps, angular-archaic, reads as inscribed-ancient rather
       than tourist-taverna.

       Strategy: Dalek is used ONLY for the largest display
       moments (hero h1, manifesto, section titles, wordmarks).
       Fraunces stays on mid-size editorial detail (dish names,
       address-line, gallery-caption-name, italic kicker) so the
       page has TWO display voices in tension: archaic-block and
       editorial-italic. Inter stays on body + buttons + every
       small UI label.

       Fallback chain: where a glyph isn't in Dalek (e.g. the
       Greek folio letters Π/Γ/Κ/Φ/Ω), the browser falls through
       to Fraunces — preserving the italic-accent Greek-letter
       look from v7.

       Free for private use only (K-Type). Production Plateia
       site needs commercial licence from k-type.com.
       ============================================================ */
    .plateia-mock {
      --dalek: "Norse", "Fraunces", Georgia, serif;
    }

    /* [P5] Brush font (Dalek) applied to the HERO H1 ONLY — it is the
       single distinctive display move of the page. All other headlines
       (lead-statement, menu/gallery/praktisch titles, footer wordmark,
       nav wordmark, drop-cap, headline em-tags) STAY Fraunces. The
       Dalek glyphs are raw/uppercase by nature, so the H1 is also set
       VERSAL via text-transform: uppercase. Neutralize Fraunces-specific
       tightenings because Dalek doesn't have those axes. */
    .plateia-mock .hero h1 {
      font-family: var(--dalek);
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.01em;
      font-variation-settings: normal;
      font-feature-settings: "kern";
      font-style: normal;
    }

    /* Hero H1 size compensation: Dalek caps read ~10% larger optically
       than Fraunces at the same px, so the clamp ceiling is dropped a
       touch and line-height loosened so the two uppercase words breathe. */
    .plateia-mock .hero h1 { font-size: clamp(46px, 7.6vw, 118px); line-height: 0.92; }

    /* [P1] Vertikaler weißer Lorbeerzweig links neben der Hero-Headline (wie Screenshot).
       Der Wrapper ist jetzt das .hero-text-Kind → erbt die Entrance-Animation;
       die Stagger-Verzögerung der alten h1 (160ms) wird hier übernommen. */
    .plateia-mock .hero-h1-row {
      display: flex;
      align-items: center;
      gap: clamp(8px, 1.6vw, 22px);
      animation-delay: 160ms;
    }
    .plateia-mock .hero-h1-laurel {
      flex: none;
      width: clamp(88px, 10vw, 164px);
      height: auto;
      opacity: 0.95;
      align-self: center;
      /* etwas nach außen ziehen, damit der geschwungene Zweig die Headline begleitet */
      margin-right: clamp(-4px, -0.5vw, 4px);
    }
    @media (max-width: 600px) {
      .plateia-mock .hero-h1-laurel { width: 64px; }
    }
  
    .plateia-mock .gallery-stage {
      position: relative;
      padding-bottom: 160px;
    }

    /* Pin: full-viewport-below-nav, sticky, opaque so it covers
       the (invisible) markers stacked behind it. */
    .plateia-mock .gallery-pin {
      position: sticky;
      top: var(--nav-h);
      height: calc(100vh - var(--nav-h));
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 2;
      background: var(--section-dark);
    }
    .plateia-mock .gallery-pin-inner {
      width: 100%;
      height: 100%;
      max-width: var(--container);
      padding: 32px var(--gutter) 40px;
      display: flex;
      flex-direction: column;
      gap: 22px;
      align-items: stretch;
    }
    /* Zentriert den (jetzt bild-großen) Steintafel-Rahmen in der Pin-Fläche.
       Caption bleibt darunter als stabile Grundlinie. */
    .plateia-mock .gallery-frame-area {
      flex: 1;
      min-height: 0;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .plateia-mock .gallery-frame-pinned {
      position: relative;
      /* [Iter] Der Rahmen füllt die Fläche nicht mehr starr, sondern wird per
         JS (fitFrame) auf das AKTIVE Bild geschnitten — die Steintafel umfasst
         jede Aufnahme in deren eigenem Seitenverhältnis, statt Hochformate auf
         einer dunklen Matte zu „letterboxen". height/aspect-ratio = Default vor
         dem ersten JS-Fit; width/height setzt fitFrame() dann explizit in px. */
      flex: 0 0 auto;
      height: 100%;
      aspect-ratio: 3 / 2;
      max-width: 100%;
      max-height: 100%;
      transition: width 0.5s var(--ease-soft), height 0.5s var(--ease-soft);
      background: var(--section-dark);
      overflow: hidden;
    }
    .plateia-mock .gallery-frame-pinned .slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      /* contain (not cover) — each image displays at its natural
         aspect ratio. Portraits appear tall + narrow centered on
         the matte; landscapes fill the frame's width. The user
         sees the actual orientation of each shot. */
      object-fit: contain;
      object-position: 50% 50%;
      opacity: 0;
      transition: opacity 700ms var(--ease-soft);
      will-change: opacity;
    }
    .plateia-mock .gallery-frame-pinned .slide[data-active="true"] {
      opacity: 1;
    }
    /* [Iter] „Komplett ruhig": kein Zoom-Breath mehr — nur Crossfade + sanftes
       Rahmen-Mitwachsen. Das war zudem die Ursache, dass das Bild über die
       Kante lief; ohne Skalierung sitzt es garantiert voll im Rahmen. */

    /* Caption below the frame: updates as the active slide changes.
       Same visual grammar as the v5 figure-caption — accent fig
       number left, italic name right, on a hairline baseline. */
    .plateia-mock .gallery-caption-pinned {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      gap: 12px;
      padding-bottom: 6px;
      border-bottom: 1px solid var(--hairline-on-dark);
    }
    .plateia-mock .gallery-caption-pinned .fig {
      font-family: var(--body);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--accent);
      font-variant-numeric: tabular-nums lining-nums;
    }
    .plateia-mock .gallery-caption-pinned .fig .total {
      color: var(--muted-on-dark);
      margin-left: 4px;
    }
    .plateia-mock .gallery-caption-pinned .name {
      font-family: var(--display);
      font-style: italic;
      font-weight: 400;
      font-size: 16px;
      font-variation-settings: "opsz" 24;
      color: var(--ink-on-dark);
      transition: opacity 280ms var(--ease-out);
    }

    /* The markers: 8 invisible 70vh-tall divs, stacked behind the
       sticky pin. They exist purely to give the IO something to
       observe and to consume scroll budget. */
    .plateia-mock .gallery-markers {
      position: relative;
      z-index: 1;
      display: grid;
      grid-template-rows: repeat(8, 70vh);
    }
    .plateia-mock .gallery-markers .marker {
      visibility: hidden;
    }

    /* Fallback list — used by reduced-motion + mobile. Hidden by
       default so the slideshow path renders in the standard case. */
    .plateia-mock .gallery-fallback {
      display: none;
    }

    /* === Reduced-motion + mobile fallback ===
       Drop pinning entirely. Show all 8 images as a vertical stack
       with full captions; this matches v5's masonry behaviour but
       collapsed to one column for honesty (the masonry-spans were
       desktop-grid-only anyway). */
    @media (prefers-reduced-motion: reduce), (max-width: 880px) {
      .plateia-mock .gallery-stage { padding-bottom: 80px; }
      .plateia-mock .gallery-pin {
        position: static;
        height: auto;
        display: none;
      }
      .plateia-mock .gallery-markers { display: none; }
      .plateia-mock .gallery-fallback {
        display: grid;
        grid-template-columns: 1fr;
        gap: 48px;
      }
      .plateia-mock .gallery-fallback figure { display: flex; flex-direction: column; }
      .plateia-mock .gallery-fallback .frame {
        background: var(--section-dark);
        overflow: hidden;
        /* No fixed aspect-ratio — each image displays at its native
           orientation. Portraits show as tall, landscapes as wide.
           Honest format, no crop. */
      }
      .plateia-mock .gallery-fallback img {
        width: 100%;
        height: auto;
        display: block;
      }
      .plateia-mock .gallery-fallback figcaption {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 12px;
        margin-top: 14px;
        padding-bottom: 4px;
        border-bottom: 1px solid var(--hairline-on-dark);
      }
      .plateia-mock .gallery-fallback .fig {
        font-family: var(--body);
        font-weight: 500;
        font-size: 10px;
        letter-spacing: 0.32em;
        text-transform: uppercase;
        color: var(--accent);
        font-variant-numeric: tabular-nums lining-nums;
      }
      .plateia-mock .gallery-fallback .name {
        font-family: var(--display);
        font-style: italic;
        font-weight: 400;
        font-size: 14px;
        font-variation-settings: "opsz" 14;
        color: var(--ink-on-dark);
      }
    }
    /* Reduced-motion only — also disable the slide-breath scale. */
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .gallery-frame-pinned .slide[data-active="true"] {
        animation: none;
        transform: none;
      }
    }

    /* [Iter] Modern-editorial Galerie-Rahmen — helles Elfenbein-Passepartout,
       Mäander-Friese oben/unten (clean sides), kleine „PLATEIA"-Wortmarke im
       oberen Fries, haarfeine Keyline ums Foto. Ersetzt die Sandstein-Tafel:
       Griechisch über Geometrie & Proportion, nicht über Faux-Stein. Padding
       ist asymmetrisch (oben/unten Platz für die Friese, Seiten schmaler) und
       via CSS-Vars geführt, damit JS (fitFrame) exakt darauf rechnen kann. */
    .plateia-mock .gallery-frame-pinned.stone-frame {
      --mat: #f1ece1;            /* warmes Elfenbein */
      --mat-top: #f6f2ea;
      --mat-edge: #e6dfd0;
      --frame-ink: #201e1b;
      --fpad-y: clamp(40px, 4.6vw, 66px);
      --fpad-x: clamp(18px, 2.4vw, 34px);
      --frieze-h: clamp(15px, 1.7vw, 21px);
      --frieze-inset: clamp(11px, 1.3vw, 19px);
      background-color: var(--mat);
      background-image: linear-gradient(180deg, var(--mat-top) 0%, var(--mat) 40%, var(--mat-edge) 100%);
      padding: var(--fpad-y) var(--fpad-x);
      border-radius: 4px;
      box-shadow:
        inset 0 0 0 1px rgba(32,30,27,0.10),
        0 30px 64px -34px rgba(15,12,6,0.75),
        0 6px 16px -10px rgba(15,12,6,0.4);
      color: var(--frame-ink);
    }
    /* haarfeine Keyline rund ums Foto (liegt über den Slides) */
    .plateia-mock .gallery-frame-pinned.stone-frame::before {
      content: ""; position: absolute;
      top: var(--fpad-y); bottom: var(--fpad-y);
      left: var(--fpad-x); right: var(--fpad-x);
      border: 1px solid rgba(32,30,27,0.55);
      border-radius: 2px;
      z-index: 2; pointer-events: none;
    }
    /* Foto-Container — ein NICHT-ersetztes <div>, das per inset sauber auf die
       innere Fläche gelegt + geclippt wird. Der <img>-Slide liegt darin mit
       inset:0/100%/100%. Das umgeht die Abspos-Sizing-Eigenheit ERSETZTER
       Elemente: ein <img> mit width:auto + allen vier insets nutzt seine
       INTRINSISCHE Größe und ignoriert right/bottom (CSS-Spec) → es lief oben-
       links verankert rechts/unten aus dem Rahmen. In einem <div> gibt es das
       nicht — der Container wird korrekt von den insets bemessen. */
    .plateia-mock .gframe-photo {
      position: absolute;
      top: var(--fpad-y); bottom: var(--fpad-y);
      left: var(--fpad-x); right: var(--fpad-x);
      border-radius: 2px;
      overflow: hidden;
      z-index: 1;
    }
    .plateia-mock .gallery-frame-pinned.stone-frame .slide {
      inset: 0;
      width: 100%;
      height: 100%;
      border-radius: 2px;
      /* contain + Rahmen ist exakt aufs Bild geschnitten → GANZES Bild sichtbar,
         vollständig im Container, kein Crop, kein Überlauf. */
      object-fit: contain;
    }
    /* Mäander-Friese oben + unten — eine Reihe griechischer Key-Zellen (dasselbe
       Motiv wie der Seiten-Hintergrund, hier als feines Band). */
    .plateia-mock .gframe-frieze {
      position: absolute; left: var(--fpad-x); right: var(--fpad-x);
      height: var(--frieze-h);
      background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='80'%3E%3Cpath d='M 0 64 V 8 H 64 V 56 H 16 V 24 H 48 V 40 H 32' fill='none' stroke='%23201e1b' stroke-width='5' stroke-linejoin='miter' stroke-linecap='butt'/%3E%3C/svg%3E");
      background-size: auto 100%;
      background-repeat: repeat-x;
      background-position: center;
      opacity: 0.82;
      z-index: 2; pointer-events: none;
    }
    .plateia-mock .gframe-frieze.is-top    { top: var(--frieze-inset); }
    .plateia-mock .gframe-frieze.is-bottom { bottom: var(--frieze-inset); }
    /* „PLATEIA"-Wortmarke mittig im oberen Fries, mit Elfenbein-Knockout, damit
       der Mäander nicht durch die Lettern läuft. */
    .plateia-mock .gframe-mark {
      position: absolute; left: 50%; transform: translateX(-50%);
      top: var(--frieze-inset); height: var(--frieze-h);
      display: flex; align-items: center;
      padding: 0 14px; background: var(--mat);
      font-family: var(--display); font-weight: 600;
      font-size: clamp(9px, 1vw, 12px); letter-spacing: 0.46em; text-indent: 0.46em;
      text-transform: uppercase; color: var(--frame-ink);
      white-space: nowrap; z-index: 3; pointer-events: none;
    }

    /* [Iter] Überschriften → Playfair Display Bold (700) — kräftig + editorial.
       Fließtext bleibt Inter; die Brush-Lead (h2.lead-statement) + die „Plateia"-
       Wortmarke bleiben Dalek; Gerichtnamen bleiben Fraunces (Hierarchie Section
       ≠ Eintrag). Der HERO behält bewusst die griechische Brush-Schrift (Dalek),
       siehe Extra-Regel unten. Steht am Style-Ende → gewinnt per Source-Order. */
    .plateia-mock .menu-title, .plateia-mock .menu-card-title, .plateia-mock .gallery-title, .plateia-mock .praktisch-title {
      font-family: var(--heading);
      font-weight: 700;
    }
    /* Hero behält die griechische Brush-Schrift (Dalek) — nicht Playfair. */
    .plateia-mock .hero h1 {
      font-family: var(--dalek);
      font-weight: 700;
    }



    /* =================================================================
       PLATEIA · SPEISEN-SEITE
       Sub-page reached from the homepage Speisen card. Same Plateia
       chrome (masthead + nav + grain + tokens) for site continuity;
       drops the homepage-specific bits (hero/lead/gallery/praktisch/
       slideshow/Lenis). Adds the dish-list pattern plus the floating
       round preview image that follows the cursor when hovering a
       dish — Plateia's signature interaction.
       ================================================================= */

    /* Grain — same SVG noise tile as v7+ */

    /* ============================================================
       MASTHEAD + NAV — same as v9 for continuity. Masthead scrolls
       out past 80px, nav promotes to top.
       ============================================================ */
    /* ---- Hamburger toggle (hidden ≥880px) — ported 1:1 from mock-v10.html ---- */

    /* ---- Mobile off-canvas drawer ---- */
    /* [P1] Kleines weißes Lorbeer-Ornament auf allen „Tisch reservieren"-Buttons. */

    /* ============================================================
       PAGE HERO — compact. Plateia "Vom Rost" image as BG with
       dark scrim. Italic Fraunces "Speisen" title centered.
       Category strip floats inside the hero, below the title.
       ============================================================ */

    .plateia-mock .page-hero {
      position: relative;
      min-height: 460px;
      padding: calc(var(--masthead-h) + var(--nav-h) + 80px) var(--gutter) 64px;
      overflow: hidden;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    .plateia-mock .page-hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 1;
    }
    .plateia-mock .page-hero-scrim {
      position: absolute;
      inset: 0;
      z-index: 2;
      background:
        linear-gradient(180deg,
          rgba(20, 20, 20, 0.62) 0%,
          rgba(20, 20, 20, 0.50) 50%,
          rgba(20, 20, 20, 0.72) 100%);
    }
    .plateia-mock .page-hero-inner {
      position: relative;
      z-index: 3;
      max-width: 720px;
      margin: 0 auto;
    }
    .plateia-mock .page-hero-folio {
      font-family: var(--body);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.32em;
      text-transform: uppercase;
      color: var(--accent);
      margin-bottom: 28px;
      display: inline-flex;
      align-items: center;
      gap: 12px;
      font-variant-numeric: tabular-nums lining-nums;
    }
    .plateia-mock .page-hero-folio .sep {
      width: 24px;
      height: 1px;
      background: rgba(255, 255, 255, 0.5);
      display: inline-block;
    }
    .plateia-mock .page-hero-title {
      font-family: var(--display);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(64px, 11vw, 144px);
      line-height: 0.92;
      letter-spacing: -0.022em;
      font-variation-settings: "opsz" 144;
      font-feature-settings: "ss01", "kern", "liga", "calt";
      color: #fff;
      margin-bottom: 20px;
    }
    .plateia-mock .page-hero-sub {
      font-family: var(--display);
      font-style: italic;
      font-weight: 400;
      font-size: clamp(16px, 1.6vw, 20px);
      font-variation-settings: "opsz" 36;
      color: rgba(255, 255, 255, 0.86);
      max-width: 50ch;
      margin: 0 auto;
    }

    /* ============================================================
       CATEGORY STRIP — anchor chips for direct jump to a section.
       Sits below the page-hero as a sticky-ish band on a hairline
       background. Editorial pill grammar (numbered Greek letters),
       not the screenshot's down-arrow circles.
       ============================================================ */
    .plateia-mock .category-strip {
      background: var(--base);
      border-bottom: 1px solid var(--hairline);
      position: sticky;
      top: calc(var(--masthead-h) + var(--nav-h));
      z-index: 50;
      transition: top 360ms var(--ease-soft);
    }
    .plateia-mock .masthead.lifted ~ * .category-strip, .plateia-mock.masthead-lifted .category-strip {
      top: var(--nav-h);
    }
    .plateia-mock .category-strip-inner {
      max-width: var(--container);
      margin: 0 auto;
      padding: 16px var(--gutter);
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px 4px;
    }
    .plateia-mock .category-chip {
      display: inline-flex;
      align-items: baseline;
      gap: 8px;
      padding: 9px 17px;
      font-family: var(--body);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--ink);
      /* [Buttons] echte Button-Anmutung: Pill-Form, weiße Füllung (hebt sich
         von der Creme-Leiste ab), sichtbarer Rand + winziger Lift. */
      background: #fff;
      border: 1px solid var(--hairline);
      border-radius: 999px;
      box-shadow: 0 1px 2px rgba(40, 32, 18, 0.05);
      transition:
        color var(--t-base) var(--ease-out),
        border-color var(--t-base) var(--ease-out),
        background var(--t-base) var(--ease-out),
        box-shadow var(--t-base) var(--ease-out),
        transform var(--t-base) var(--ease-out);
      font-variant-numeric: tabular-nums lining-nums;
    }
    .plateia-mock .category-chip .greek {
      font-family: var(--display);
      font-style: italic;
      font-weight: 400;
      font-variation-settings: "opsz" 36;
      font-feature-settings: "kern", "liga";
      font-size: 16px;
      line-height: 1;
      letter-spacing: 0;
      text-transform: none;
      color: var(--accent);
      transform: translateY(2px);
    }
    @media (hover: hover) and (pointer: fine) {
      .plateia-mock .category-chip:hover {
        color: var(--accent);
        border-color: var(--accent);
        box-shadow: 0 3px 9px rgba(33, 117, 216, 0.15);
        transform: translateY(-1px);
      }
    }
    .plateia-mock .category-chip:active { transform: translateY(0); }
    /* aktive Kategorie (Sektion gerade im Blick) — gefüllter Button, „du bist hier" */
    .plateia-mock .category-chip.is-active {
      color: #fff;
      background: var(--accent);
      border-color: var(--accent);
      box-shadow: 0 2px 8px rgba(33, 117, 216, 0.28);
    }
    .plateia-mock .category-chip.is-active .greek { color: #fff; }
    @media (max-width: 768px) {
      .plateia-mock .category-strip-inner {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
        justify-content: flex-start;
        gap: 4px;
        padding-left: 16px;
        padding-right: 16px;
      }
      .plateia-mock .category-strip-inner::-webkit-scrollbar { display: none; }
      .plateia-mock .category-chip {
        white-space: nowrap;
        flex: 0 0 auto;
      }
    }

    /* ============================================================
       DISH SECTIONS — italic Fraunces section title + horizontal
       rule + dish list. Tight editorial spacing, no decorative
       cards. Each section gets a folio (Α/Β/Γ/…) above the title.
       ============================================================ */
    .plateia-mock .dishes {
      padding: 80px 0 160px;
      /* [Fix] transparent statt opaker Creme — sonst deckt diese große Fläche
         (liegt in main{z-index:2} ÜBER dem fixen Meander z-index:0) das
         Hintergrundmuster auf der ganzen Menüliste zu, sodass es nur ganz oben
         sichtbar war. Die Creme liefert der Body; der fixe Meander scheint jetzt
         beim Scrollen durch (Content scrollt übers Muster). */
      background: transparent;
    }
    .plateia-mock .dish-section {
      padding: 50px 0 38px;
    }
    .plateia-mock .dish-section:first-child { padding-top: 28px; }
    /* [Speisekarte] Klarer Gang-Trenner zwischen den Sektionen — volle Karten-
       breite (breiter als die 540px-Gericht-Hairlines → Hierarchie: breite Linie
       = neuer Gang, schmale = nächstes Gericht). Liest wie eine gegliederte
       Menükarte. Border am Sektions-Anfang (letztes Gericht hat keinen Border). */
    .plateia-mock .dish-section:not(:first-child) {
      border-top: 1px solid var(--hairline);
    }
    .plateia-mock .dish-section-head {
      max-width: 720px;
      margin: 0 auto 56px;
      text-align: center;
    }
    .plateia-mock .dish-section-folio {
      display: inline-flex;
      align-items: baseline;
      gap: 14px;
      font-family: var(--body);
      font-weight: 500;
      font-size: 11px;
      letter-spacing: 0.28em;
      text-transform: uppercase;
      color: var(--muted);
      font-variant-numeric: tabular-nums lining-nums;
      margin-bottom: 28px;
    }
    .plateia-mock .dish-section-folio .greek {
      font-family: var(--display);
      font-style: italic;
      font-weight: 400;
      font-variation-settings: "opsz" 36;
      font-size: 18px;
      line-height: 1;
      letter-spacing: 0;
      text-transform: none;
      color: var(--accent);
      transform: translateY(2px);
    }
    .plateia-mock .dish-section-folio .num { color: var(--accent); }
    .plateia-mock .dish-section-folio .sep {
      width: 24px;
      height: 1px;
      background: var(--hairline);
      display: inline-block;
      transform: translateY(-3px);
    }
    .plateia-mock .dish-section-title {
      font-family: var(--display);
      font-style: normal;
      font-weight: 400;
      font-size: clamp(34px, 4.4vw, 56px);
      line-height: 1.06;
      letter-spacing: -0.015em;
      font-variation-settings: "opsz" 96;
      font-feature-settings: "ss01", "kern", "liga", "calt";
      color: var(--ink);
      margin-bottom: 18px;
    }
    .plateia-mock .dish-section-sub {
      font-family: var(--body);
      font-size: 13px;
      color: var(--muted);
      letter-spacing: 0.04em;
      max-width: 40ch;
      margin: 0 auto;
      line-height: 1.6;
    }
    /* [Speisekarte] Mäander-Ornament (griechische Key-Borte) statt schlichter
       Linie — thematische Gang-Flourish unter jedem Sektionstitel, „engraved". */
    .plateia-mock .dish-section-rule {
      width: 88px;
      height: 15px;
      margin: 20px auto 0;
      background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='80'%3E%3Cpath d='M 0 64 V 8 H 64 V 56 H 16 V 24 H 48 V 40 H 32' fill='none' stroke='%23201e1b' stroke-width='7' stroke-linejoin='miter' stroke-linecap='butt'/%3E%3C/svg%3E");
      background-size: auto 100%;
      background-repeat: repeat-x;
      background-position: center;
      opacity: 0.42;
    }

    /* ============================================================
       2-COLUMN LAYOUT (v9.2)
       Left: dish list + section heads. Right: sticky round
       preview presented on a Greek STONE TABLET. The dish-list
       column is narrower than before and the items themselves
       are CENTERED (name → price → description as stacked center-
       aligned blocks, like a printed inscription).
       ============================================================ */
    .plateia-mock .dishes-grid {
      display: grid;
      /* Preview-Spalte deutlich breiter (war 300px → Foto nur ~120px, weil
         Tafel-Padding + Seiten-Deko ~170px fressen). Jetzt clamp bis 480px →
         Foto-Panel ~300px. */
      grid-template-columns: minmax(0, 540px) clamp(380px, 36vw, 480px);
      gap: 56px;
      justify-content: center; /* Center the whole grid block */
      max-width: 1120px;
      margin: 0 auto;
      align-items: start;
    }
    @media (max-width: 980px) {
      .plateia-mock .dishes-grid {
        grid-template-columns: 1fr;
        gap: 0;
      }
    }
    .plateia-mock .dishes-main {
      min-width: 0;
      /* [Lesbarkeit] Menütext liegt auf einem ruhigen, ~90% deckenden Creme-
         „Menükärtchen" (gleicher --base-Ton) → Text crisp; der Meander scheint
         nur noch als Hauch durch, bleibt aber in den Rändern, im Spalten-
         Zwischenraum und ober/unterhalb voll sichtbar (Menükarte auf gemusterter
         Tischdecke). Flacher Look (kein Schatten), nur eine feine Hairline. */
      background: color-mix(in srgb, var(--base) 90%, transparent);
      border: 1px solid var(--hairline);
      border-radius: 6px;
      padding: clamp(22px, 3vw, 46px) clamp(18px, 2.6vw, 40px);
    }
    @media (max-width: 980px) {
      .plateia-mock .dishes-main { padding: clamp(18px, 5vw, 32px) clamp(14px, 4vw, 26px); }
    }
    .plateia-mock .dishes-preview {
      position: sticky;
      top: calc(var(--masthead-h) + var(--nav-h) + 100px);
      transition: top 360ms var(--ease-soft);
    }
    .plateia-mock.masthead-lifted .dishes-preview {
      top: calc(var(--nav-h) + 100px);
    }
    @media (max-width: 980px) {
      .plateia-mock .dishes-preview { display: none; }
    }

    /* ============================================================
       PREVIEW MARBLE TABLET (v9.3)
       Realistic polished-marble panel, NOT sandstone slab. The
       Greek theme is already carried by the page architecture
       (folios, drop-cap, meander divider) — slapping another
       meander on the preview was over-styling. The marble panel
       now feels like a museum vitrine slab: pale cream-white with
       soft veining, fine quarry-grain, subtle top-light from
       upper-left, slight ambient-occlusion shadow at lower-right.

       Layer order (bottom to top in CSS, which renders bottom to
       top visually since later in source = on top):
         1. Solid base color (deepest layer)
         2. Two offset radial-gradients → soft veining clouds
         3. Linear-gradient overlay → polished light play
         4. ::before → fine multiply-grain (quarried texture)
         5. ::after → bottom-right ambient darkening + top-left highlight
         6. Inset 1px border → the chiseled stone edge
       ============================================================ */
    .plateia-mock .preview-tablet {
      position: relative;
      padding: 30px 24px;
      background:
        /* Top-left subtle polished highlight, bottom-right gentle shadow */
        linear-gradient(135deg,
          rgba(255, 252, 240, 0.45) 0%,
          rgba(255, 252, 240, 0) 35%,
          rgba(110, 90, 70, 0.08) 100%
        ),
        /* Vein cloud 1 — wide soft patch upper-right */
        radial-gradient(ellipse 80% 55% at 75% 25%,
          oklch(0.94 0.010 82) 0%,
          transparent 60%
        ),
        /* Vein cloud 2 — wide soft patch lower-left, slightly warmer */
        radial-gradient(ellipse 70% 65% at 20% 75%,
          oklch(0.86 0.022 72) 0%,
          transparent 60%
        ),
        /* Marble base — warm cream, not sandstone */
        oklch(0.90 0.014 80);
      border-radius: 6px;
      overflow: hidden;
      /* Chiseled edge — thin darker line all around (not a shadow) */
      box-shadow: inset 0 0 0 1px oklch(0.72 0.030 78);
    }
    /* Fine quarry-grain — multiply-blended so it reads as stone
       texture rather than overlaid noise. Tighter tile + higher
       baseFrequency = finer grain detail. */
    .plateia-mock .preview-tablet::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 140px 140px;
      opacity: 0.13;
      /* perf: Normal-Blend statt multiply — die Tafel ist sticky + dauernd im
         Viewport beim Speisen-Scroll; ein mix-blend recomposite-te ihre Fläche
         jeden Frame. Deckkraft entsprechend gesenkt, Textur bleibt subtil. */
      pointer-events: none;
      z-index: 1;
    }
    /* Ambient-occlusion corners — slight warm darkening at bottom-
       right and a faint cooler highlight at top-left. Subtle 3D
       presence without a card-shadow. */
    .plateia-mock .preview-tablet::after {
      content: "";
      position: absolute;
      inset: 0;
      background:
        radial-gradient(ellipse 55% 70% at 100% 100%,
          oklch(0.55 0.04 70) 0%,
          transparent 55%
        ),
        radial-gradient(ellipse 70% 55% at 0% 0%,
          oklch(0.97 0.010 90) 0%,
          transparent 50%
        );
      opacity: 0.22;
      mix-blend-mode: multiply;
      pointer-events: none;
      z-index: 1;
    }

    /* Round preview frame — sits on top of the marble (z-index 2),
       no harsh dark pit anymore. The empty/loading state uses a
       soft warm beige so the circle reads as "inset polished pit"
       in the marble, not a black hole. */
    .plateia-mock .preview-frame {
      position: relative;
      z-index: 2;
      width: 100%;
      aspect-ratio: 1 / 1;
      border-radius: 50%;
      overflow: hidden;
      background: oklch(0.78 0.022 78);
      border: 1px solid var(--accent);
    }
    /* Two stacked slots cross-fade inside the .stone-panel. The
       higher specificity here wins over the generic `.stone-panel img`
       rule (which only sets a transform transition), so the opacity
       fade animates. */
    .plateia-mock .stone-panel .preview-img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 600ms var(--ease-soft);
      will-change: opacity;
    }
    .plateia-mock .stone-panel .preview-img.is-active { opacity: 1; }

    .plateia-mock .preview-caption {
      margin-top: 24px;
      text-align: center;
      min-height: 48px;
      transition: opacity 280ms var(--ease-soft);
    }
    .plateia-mock .preview-caption .name {
      font-family: var(--display);
      font-style: italic;
      font-weight: 400;
      font-size: 18px;
      font-variation-settings: "opsz" 36;
      color: var(--ink);
      line-height: 1.2;
    }
    .plateia-mock .preview-caption .meta {
      display: block;
      margin-top: 6px;
      font-family: var(--body);
      font-size: 10.5px;
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--muted);
      font-variant-numeric: tabular-nums lining-nums;
    }

    /* ============================================================
       DISH LIST — CENTERED EDITORIAL STACK (v9.2)
       Each item is a centered column: name on top (with inline
       number prefix and allergens superscript), price as block
       below the name, description centered below. Reads like a
       printed tablet inscription rather than a left-right ledger.
       ============================================================ */
    .plateia-mock .dish-list {
      max-width: 540px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 0;
    }
    .plateia-mock .dish-item {
      padding: 24px 0;
      border-bottom: 1px solid var(--hairline);
      cursor: default;
      position: relative;
      text-align: center;
      transition: background var(--t-base) var(--ease-out);
    }
    .plateia-mock .dish-item:last-child { border-bottom: none; }
    @media (hover: hover) and (pointer: fine) {
      .plateia-mock .dish-item:hover {
        background: rgba(33, 117, 216, 0.03);
      }
    }
    /* dish-head: stacked centered column (was a flex row). */
    .plateia-mock .dish-head {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      margin-bottom: 10px;
    }
    .plateia-mock .dish-name {
      font-family: var(--display);
      font-weight: 500;
      font-size: 21px;
      line-height: 1.25;
      letter-spacing: -0.005em;
      font-variation-settings: "opsz" 36;
      font-feature-settings: "ss01", "kern", "liga";
      color: var(--ink);
      text-align: center;
    }
    .plateia-mock .dish-num {
      font-family: var(--display);
      font-style: normal;
      font-weight: 500;
      font-size: 0.85em;
      font-variation-settings: "opsz" 36;
      color: var(--muted);
      letter-spacing: 0;
      margin-right: 6px;
      font-variant-numeric: tabular-nums lining-nums;
    }
    .plateia-mock .dish-allerg {
      font-family: var(--body);
      font-weight: 400;
      font-size: 10px;
      color: var(--accent);
      letter-spacing: 0;
      margin-left: 4px;
      vertical-align: super;
      line-height: 1;
      font-variant-numeric: tabular-nums lining-nums;
    }
    .plateia-mock .dish-price {
      font-family: var(--body);
      font-weight: 500;
      font-size: 15px;
      color: var(--ink);
      white-space: nowrap;
      font-feature-settings: "kern", "tnum", "lnum";
      font-variant-numeric: tabular-nums lining-nums;
      text-align: center;
    }
    .plateia-mock .dish-desc {
      font-family: var(--body);
      font-size: 14px;
      line-height: 1.6;
      color: var(--muted);
      max-width: 44ch;
      margin: 0 auto;
      text-wrap: pretty;
      hyphens: auto;
      -webkit-hyphens: auto;
      text-align: center;
      padding-left: 0;
    }

    .plateia-mock .dish-section-head {
      max-width: 540px;
      margin: 0 auto 56px;
    }

    /* ============================================================
       FOOTER — compact for the sub-page. Same colors as homepage.
       ============================================================ */

    /* ============================================================
       SHARED CHROME (ported 1:1 from mock-v10.html for continuity)
       — folio grammar, btn-large, fixed meander parallax bg,
       running meander marquee, the merged dark footer (praktisch +
       footer), and the [P6] Steintafel component.
       ============================================================ */

    /* --- folio grammar (used by the merged-footer header) --- */

    /* --- btn-large (merged-footer reservation CTA) --- */

    /* ============================================================
       [P7] FIXED MEANDER PARALLAX LAYER
       A single position:fixed full-viewport plane carrying a large
       tiled Greek-key/meander raster at the LOWEST z-index. Every
       section scrolls over it; very low opacity (~0.045) so it
       complements — never overpowers — the grain. Slow ambient drift;
       reduced-motion freezes it.
       ============================================================ */

    /* ============================================================
       [P2] RUNNING MEANDER MARQUEE
       One prominent, slowly LEFT-running Greek-key band — a seamless
       loop built from two identical pattern tracks. Two surface
       modifiers: .on-light → BLUE (#2175D8) · .on-dark → WHITE.
       reduced-motion: animation off → static band.
       ============================================================ */

    /* ============================================================
       [P6] STEINTAFEL (stone tablet) — the reusable ornamental
       frame around every Galerie photo (homepage) and reused here
       around the SPEISEN preview photo. Warm-beige sandstone plate:
       chiselled raised rim, recessed rectangular centre panel holding
       the photo (object-fit:cover — no circle, no halo), engraved
       Greek inscription top + bottom, vertical Greek word-columns +
       laurel sprigs on the sides, Greek-key + rosette corner blocks.
       ============================================================ */
    .plateia-mock .stone-tablet {
      --stone:        #d8caaf;
      --stone-hi:     #ece1c8;
      --stone-lo:     #b7a482;
      --stone-engrave:#8a7855;
      --stone-deep:   #6f5f42;
      position: relative;
      background-color: var(--stone);
      background-image:
        radial-gradient(120% 90% at 30% 20%, rgba(255,250,235,0.5), transparent 60%),
        radial-gradient(120% 90% at 80% 90%, rgba(110,95,66,0.16), transparent 62%),
        url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.25 0 0 0 0.10 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)'/%3E%3C/svg%3E");
      background-blend-mode: normal, normal, multiply;
      padding: clamp(20px, 3.2vw, 40px);
      border-radius: 5px;
      box-shadow:
        inset 0 2px 0 rgba(255,250,235,0.75),
        inset 2px 0 0 rgba(255,250,235,0.45),
        inset 0 -3px 0 rgba(95,80,55,0.55),
        inset -3px 0 0 rgba(95,80,55,0.4),
        inset 0 0 0 2px rgba(120,103,72,0.35),
        0 18px 40px -22px rgba(40,32,18,0.55),
        0 4px 10px -6px rgba(40,32,18,0.4);
      color: var(--stone-engrave);
    }
    .plateia-mock .stone-tablet::before {
      content: "";
      position: absolute;
      inset: clamp(10px, 1.6vw, 18px);
      border: 1px solid rgba(111,95,66,0.32);
      border-radius: 3px;
      box-shadow:
        inset 0 1px 0 rgba(255,250,235,0.4),
        inset 0 -1px 0 rgba(95,80,55,0.3);
      pointer-events: none;
    }
    .plateia-mock .stone-tablet-inner {
      position: relative;
      display: grid;
      grid-template-columns: auto 1fr auto;
      /* Rows content-sized, damit das .stone-panel sein aspect-ratio 4/3
         behält statt von einer 1fr-Row verzerrt zu werden (Bild saß sonst
         nicht sauber im Rahmen). Seiten-Deko zentriert in der mittleren Row. */
      grid-template-rows: auto auto auto;
      gap: clamp(8px, 1.4vw, 16px);
      align-items: center;
    }
    .plateia-mock .stone-inscription {
      grid-column: 2;
      text-align: center;
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(9px, 1.05vw, 12px);
      letter-spacing: 0.42em;
      text-indent: 0.42em;
      text-transform: uppercase;
      color: var(--stone-engrave);
      text-shadow:
        0 1px 0 rgba(255,250,235,0.55),
        0 -1px 0 rgba(95,80,55,0.4);
      opacity: 0.92;
      white-space: nowrap;
      overflow: hidden;
      align-self: center;
    }
    .plateia-mock .stone-inscription.is-top    { grid-row: 1; padding-bottom: 4px; }
    .plateia-mock .stone-inscription.is-bottom { grid-row: 3; padding-top: 4px; }
    .plateia-mock .stone-words {
      grid-row: 2;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: clamp(10px, 1.6vw, 20px);
      font-family: var(--display);
      font-weight: 500;
      font-size: clamp(8px, 0.95vw, 11px);
      letter-spacing: 0.3em;
      text-transform: uppercase;
      color: var(--stone-engrave);
      text-shadow: 0 1px 0 rgba(255,250,235,0.5);
      opacity: 0.85;
    }
    .plateia-mock .stone-words span {
      writing-mode: vertical-rl;
      text-orientation: upright;
    }
    .plateia-mock .stone-words.is-left  { grid-column: 1; }
    .plateia-mock .stone-words.is-right { grid-column: 3; }
    .plateia-mock .stone-laurel {
      width: clamp(22px, 2.4vw, 34px);
      height: auto;
      color: var(--stone-engrave);
      opacity: 0.72;
      align-self: center;
    }
    .plateia-mock .stone-laurel.is-left  { grid-column: 1; grid-row: 2; }
    .plateia-mock .stone-laurel.is-right { grid-column: 3; grid-row: 2; transform: scaleX(-1); }
    .plateia-mock .stone-panel {
      grid-column: 2;
      grid-row: 2;
      position: relative;
      aspect-ratio: 4 / 3;
      overflow: hidden;
      border-radius: 3px;
      background: #2a241a;
      box-shadow:
        inset 0 3px 7px rgba(40,30,12,0.65),
        inset 3px 0 7px rgba(40,30,12,0.5),
        inset 0 -2px 0 rgba(255,250,235,0.4),
        inset -2px 0 0 rgba(255,250,235,0.28),
        0 0 0 1px rgba(95,80,55,0.55);
    }
    .plateia-mock .stone-panel img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 50% 50%;
      display: block;
      transition: transform 900ms var(--ease-soft);
    }
    @media (prefers-reduced-motion: reduce) {
      .plateia-mock .stone-panel img { transition: none; }
    }
    .plateia-mock .stone-corner {
      position: absolute;
      width: clamp(26px, 3.2vw, 42px);
      height: clamp(26px, 3.2vw, 42px);
      color: var(--stone-engrave);
      opacity: 0.6;
      pointer-events: none;
    }
    .plateia-mock .stone-corner.tl { top: clamp(6px, 1vw, 12px);  left: clamp(6px, 1vw, 12px); }
    .plateia-mock .stone-corner.tr { top: clamp(6px, 1vw, 12px);  right: clamp(6px, 1vw, 12px); transform: scaleX(-1); }
    .plateia-mock .stone-corner.bl { bottom: clamp(6px, 1vw, 12px); left: clamp(6px, 1vw, 12px); transform: scaleY(-1); }
    .plateia-mock .stone-corner.br { bottom: clamp(6px, 1vw, 12px); right: clamp(6px, 1vw, 12px); transform: scale(-1, -1); }
    @media (max-width: 540px) {
      .plateia-mock .stone-tablet-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
      }
      .plateia-mock .stone-words, .plateia-mock .stone-laurel { display: none; }
      .plateia-mock .stone-inscription, .plateia-mock .stone-panel { grid-column: 1; }
      .plateia-mock .stone-inscription.is-top    { grid-row: 1; }
      .plateia-mock .stone-panel                 { grid-row: 2; }
      .plateia-mock .stone-inscription.is-bottom { grid-row: 3; }
      .plateia-mock .stone-inscription { letter-spacing: 0.3em; text-indent: 0.3em; }
    }

    /* ============================================================
       [P3] MERGED DARK FOOTER (praktisch + footer fused)
       The dark closing block: real "Wo, wann, wie." headline + folio,
       the FULL 7-day hours, address/maps/tel/mail, reservation CTA,
       italic Kolophon, and a legal/social row. The #kontakt anchor
       lives here. CSS ported 1:1 from mock-v10.html.
       ============================================================ */

    /* [Iter] Überschriften → Playfair Display Bold (700) — kräftig + editorial
       (wie Home). Fließtext bleibt Inter, die „Plateia"-Wortmarke bleibt Dalek,
       Gerichtnamen (.dish-name) bleiben Fraunces. */
    .plateia-mock .page-hero-title, .plateia-mock .dish-section-title, .plateia-mock .praktisch-title {
      font-family: var(--heading);
      font-weight: 700;
    }
  
.plateia-mock{--heading:var(--brand-font-display);--display:var(--brand-font-display);--body:var(--brand-font-body);--dalek:var(--font-norse);}

.plateia-mock .lead{padding:64px 0 64px}
.plateia-mock .lead-photos{margin-top:36px}

.plateia-mock [data-reveal]{opacity:1 !important;transform:none !important}

.plateia-mock .hero{height:auto;min-height:100vh}


.about { padding: clamp(40px,6vw,80px) 0 clamp(80px,12vw,140px); }
.about-inner { max-width: 760px; margin: 0 auto; text-align: center; }
.about-eyebrow { font-family: var(--body); font-weight: 500; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.about-welcome { font-family: var(--dalek); font-size: clamp(40px, 8vw, 84px); line-height: 1.0; color: var(--ink); margin-bottom: 26px; }
.about-lead { max-width: 60ch; margin: 0 auto clamp(40px,6vw,56px); }
.about-lead p { font-family: var(--body); font-size: clamp(16px,2vw,19px); line-height: 1.72; color: var(--ink); margin-bottom: 16px; text-wrap: pretty; }
.about-photo, .about-biergarten-photo { margin: 0; border-radius: 8px; overflow: hidden; border: 1px solid var(--hairline); background: var(--base); }
.about-photo { margin-bottom: clamp(40px,6vw,60px); }
.about-photo img { width: 100%; display: block; aspect-ratio: 16/10; object-fit: cover; }
.about-biergarten { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(22px,4vw,44px); align-items: center; text-align: left; margin-bottom: clamp(40px,6vw,60px); }
.about-biergarten-photo img { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.about-h3 { font-family: var(--heading); font-weight: 700; font-style: normal; font-size: clamp(22px,3vw,28px); color: var(--ink); margin-bottom: 12px; }
.about-biergarten-text p { font-family: var(--body); font-size: clamp(15px,1.9vw,17px); line-height: 1.7; color: var(--muted); }
@media (max-width: 700px){ .about-biergarten { grid-template-columns: 1fr; text-align: center; } }

/* Legal pages (Impressum / Datenschutz) — readable prose on a quiet cream card. */
.legal { padding: clamp(40px,6vw,72px) 0 clamp(80px,12vw,140px); }
.legal-card { max-width: 720px; margin: 0 auto; background: color-mix(in srgb, var(--base) 90%, transparent); border: 1px solid var(--hairline); border-radius: 6px; padding: clamp(26px, 5vw, 56px); }
.legal-h2 { font-family: var(--heading); font-weight: 700; font-style: normal; font-size: clamp(22px, 3vw, 30px); line-height: 1.15; color: var(--ink); margin: clamp(32px,5vw,44px) 0 14px; }
.legal-card > .legal-h2:first-child { margin-top: 0; }
.legal-h3 { font-family: var(--heading); font-weight: 700; font-style: normal; font-size: clamp(16px, 2.2vw, 20px); line-height: 1.2; color: var(--ink); margin: 26px 0 8px; }
.legal-p { font-family: var(--body); font-size: 15px; line-height: 1.72; color: var(--muted); margin-bottom: 14px; text-wrap: pretty; }
.legal-p strong { color: var(--ink); font-weight: 600; }
.legal-p a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; text-decoration-color: var(--accent); }
.legal-p a:hover { color: var(--accent); }