/* The Private Table – Feinschliff untere Seite und seitenweite Mikro-Details (21.10.2026).
   Eigenständig, additiv: nur vorhandene Klassen/IDs, Präfix .fu- für Neues. Kupfer nur als feine Linie.
   Ohne JS steht alles fertig da; Bewegung nur unter html.fu-bewegt (setzt fein-unten.js). */

/* ---------- Seitenweit: Auswahl, Fokus ---------- */
::selection{background:var(--papier);color:var(--tinte)}
:focus-visible{outline:1px solid var(--kupfer);outline-offset:5px}
.sz2.sz2-an .sz2-pfeil:focus-visible,.fuss .letzte a.siegel-f:focus-visible{outline:1px solid var(--kupfer);outline-offset:6px}

/* Seiten-Fortschritt: Haarlinie am rechten Rand, füllt sich in Kupfer */
.fu-weg{position:fixed;right:0;top:0;bottom:0;width:1px;z-index:85;pointer-events:none;background:rgba(239,233,223,.07);opacity:0;transition:opacity .8s var(--ease)}
.fu-weg.an{opacity:1}
.fu-weg i{position:absolute;inset:0;background:var(--kupfer);transform-origin:50% 0;transform:scaleY(var(--fu-p,0))}

/* Knöpfe: magnetischer Zug über die eigenständige translate-Eigenschaft (transform bleibt den Kollegen) */
.fu-magnet{transition:translate .7s var(--ease)}

/* Zeiger: Wort im Ring über Bildern – ruhig, ohne Klein-Zustand */
.zeiger.wort.klein i{transform:scale(1)}

/* ---------- 04 Die Gastgeber ---------- */

.gastgeber .bild{isolation:isolate}
/* Fuge zwischen Bild und Zitat: eine Kupferlinie, die sich beim Lesen von oben zieht */
.gastgeber .bild .fu-fuge{position:absolute;right:0;top:0;bottom:0;width:1px;z-index:2;background:var(--kupfer);opacity:.75;transform-origin:50% 0;pointer-events:none}

/* ---------- 05 Anlässe: Lichtkante beim Zeigen ---------- */
.sz2.sz2-an .sz2-bild:before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;transition:opacity .7s var(--ease);
  background:radial-gradient(60% 45% at var(--lx,50%) var(--ly,30%),rgba(239,233,223,.16),rgba(239,233,223,0) 70%);
  box-shadow:inset 0 0 0 1px rgba(239,233,223,.22)}
.sz2.sz2-an .sz2-karte:hover .sz2-bild:before{opacity:1}
.sz2.sz2-an .sz2-karte .sz2-bild img{transition:scale 1.2s var(--ease)}
.sz2.sz2-an .sz2-karte:hover .sz2-bild img{scale:1.035}

/* ---------- 06 Ihr Abend: eingravierter Tellerrand im Halbkreis ---------- */
.reservierung .rund:before{content:"";position:absolute;inset:16px;border-radius:50%;border:1px solid var(--kupfer);opacity:var(--fu-rand,.55);pointer-events:none}
.reservierung .rund{overflow:visible}

/* ---------- Fuß ---------- */
.fu-zeit{font-variant-numeric:tabular-nums;white-space:nowrap}
.fu-zeit:before{content:"·";margin:0 .7em}
.fuss .fuss-svg #platte{transform-box:fill-box}

/* ---------- Anfrage-Ebene als Brief auf Papier ---------- */
#ebene{background:var(--papier);color:var(--tinte);color-scheme:light;width:min(600px,92vw);padding:64px 56px 48px;border-radius:1px;overflow:auto;overscroll-behavior:contain;
  box-shadow:0 40px 120px rgba(0,0,0,.55),0 2px 0 rgba(0,0,0,.04)}
#ebene::backdrop{background:rgba(10,14,12,.82);backdrop-filter:blur(6px)}
#ebene ::selection{background:var(--tinte);color:var(--papier)}
/* Kupferrahmen, innen abgesetzt wie bei einer Menükarte */
#ebene .fu-rahmen{position:absolute;inset:12px;pointer-events:none}
#ebene .fu-rahmen i{position:absolute;background:var(--kupfer)}
#ebene .fu-rahmen i:nth-child(1),#ebene .fu-rahmen i:nth-child(3){left:0;right:0;height:1px}
#ebene .fu-rahmen i:nth-child(1){top:0;transform-origin:0 50%}#ebene .fu-rahmen i:nth-child(3){bottom:0;transform-origin:100% 50%}
#ebene .fu-rahmen i:nth-child(2),#ebene .fu-rahmen i:nth-child(4){top:0;bottom:0;width:1px}
#ebene .fu-rahmen i:nth-child(2){right:0;transform-origin:50% 0}#ebene .fu-rahmen i:nth-child(4){left:0;transform-origin:50% 100%}
/* Federzeichnung: das Weinglas steht rechts oben auf einer kurzen Kupferplatte */
#ebene .fu-glas{position:absolute;right:56px;top:50px;width:auto;height:118px;aspect-ratio:1320/3218;color:var(--tinte);pointer-events:none}
#ebene .fu-glas-platte{position:absolute;right:40px;top:168px;width:76px;height:1px;background:var(--kupfer);transform-origin:100% 50%}
#ebene>.mikro{opacity:.62}
#ebene h2{color:var(--tinte);margin:16px 0 40px}
#ebene h2 em{opacity:.62}
#ebene .zu{color:var(--tinte);border-radius:50%;z-index:3;right:20px;top:18px;font-family:G;font-weight:300;transition:rotate .6s var(--ease)}
#ebene .zu:hover{rotate:90deg}
#ebene label .mikro{opacity:.6}
#ebene input,#ebene select{color:var(--tinte);border-bottom:1px solid rgba(30,43,36,.28);transition:border-color .5s;
  background:linear-gradient(var(--kupfer),var(--kupfer)) 0 100%/0 1px no-repeat;transition:background-size .8s var(--ease),border-color .5s}
#ebene input:focus,#ebene select:focus{outline:0;background-size:100% 1px;border-bottom-color:rgba(30,43,36,.12)}
#ebene input:focus-visible,#ebene select:focus-visible{outline:0}
#ebene label:focus-within .mikro{opacity:1}
#ebene select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:28px;
  background-image:linear-gradient(var(--kupfer),var(--kupfer)),linear-gradient(45deg,transparent 46%,var(--tinte) 47%,var(--tinte) 53%,transparent 54%),linear-gradient(-45deg,transparent 46%,var(--tinte) 47%,var(--tinte) 53%,transparent 54%);
  background-position:0 100%,calc(100% - 13px) 50%,calc(100% - 6px) 50%;background-size:0 1px,8px 8px,8px 8px;background-repeat:no-repeat}
#ebene select:focus{background-size:100% 1px,8px 8px,8px 8px}
#ebene select option{color:#111;background:#fff}
#ebene input::-webkit-calendar-picker-indicator{opacity:.55;cursor:pointer}
#ebene .senden{--f:var(--papier);background:var(--tinte);color:var(--papier);border:1px solid var(--tinte)}
#ebene .senden:hover,#ebene .senden:focus-visible{color:var(--tinte)}
/* Bestätigung: Brief bekommt die Unterschrift der Gastgeber (Satzschrift, keine nachgemachte Handschrift) */
#ebene .antwort{color:var(--tinte);opacity:.82}
#ebene .fu-gruss{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:6px}
#ebene .fu-gruss i{display:block;width:44px;height:1px;background:var(--kupfer);transform-origin:0 50%}
#ebene .fu-gruss span{font-style:italic;font-size:30px;line-height:1.1;letter-spacing:-.01em}
#ebene .fu-gruss small{font-family:J;font-weight:300;font-size:11px;letter-spacing:.22em;text-transform:uppercase;opacity:.6}

@media (max-width:820px){
  #ebene{padding:56px 26px 32px}
  #ebene .fu-glas{right:30px;top:96px;height:72px}
  #ebene .fu-glas-platte{right:18px;top:168px;width:52px}
  #ebene .fu-rahmen{inset:8px}
  .reservierung .rund:before{inset:10px}
  .fu-zeit:before{content:none}.fu-zeit{display:block}
}
@media (prefers-reduced-motion:reduce){
  .fu-magnet,.sz2.sz2-an .sz2-karte .sz2-bild img,#ebene .zu,#ebene input,#ebene select{transition:none}
  .sz2.sz2-an .sz2-karte:hover .sz2-bild img{scale:1}
}