/* DER HERO DER STARTSEITE (15.10.2026) — Aufbau nach dem Bild von Aira, das der Wirt geschickt hat
   („das soll die Struktur des Heros werden"), mit seinem Foto (Hand mit Handy, Widget „Thema Café").
   Struktur aus dem Bild: Foto über die ganze Fläche, links Überschrift in zwei Tönen (erst weiß, dann
   grau), darunter ein Satz in Grau und eine weiße Pille. Der Kopf liegt durchsichtig darüber: Wortmarke
   links, Seiten als Text rechts, eine weiße Pille — beim Weiterscrollen wird er wieder der gewohnte Kopf.
   Gemessen am Bild (809 × 490 Seite):
     Rand links 18 → 43 (Wortmarke und Text auf derselben Kante)
     Überschrift Schriftgröße ≈ 43, Zeilenabstand 41 — die Größen kommen aus der Familie: 72/76 Playfair 400
       (das Verhältnis zu Unterzeile, Abständen und Pille bleibt wie im Bild: 0,3 · 0,55 em · 0,56 em)
     zweite Zeile grau ≈ #C2C2C2, Unterzeile ≈ #C4C4C4 (Helligkeit 190–200 auf dunklem Grund)
     Unterzeile 22/30, Abstand Überschrift → Unterzeile 23 · Unterzeile → Pille 34 · Pille 40 hoch
     Textblock mittig, etwas unter der Mitte (53 %)
   Abweichung: die Überschrift hat vier Zeilen statt zwei — „das individuellste Reservierungssystem der Welt"
   ist länger als „your AI sales agent" und passt in Playfair 72 nicht neben das Handy. Präfix hd-. */

.seite-start .hd{position:relative;margin-top:-90px;height:100vh;min-height:680px;overflow:hidden;background:#0E0907;color:#fff}
/* DAS BILD: Foto (bilder/held/haende.jpg, 1916 × 821, aus dem Bild des Wirts mit grünem Bildschirm: Grün herausgerechnet,
   nach unten abgedunkelt wie bei Aira — ab 58 % der Höhe, unten −80 %, IM Foto, kein Verlauf auf der Seite; Wirt 15.10.2026) in seiner eigenen Größe auf
   einer Bühne; held.js vergrößert die Bühne so, dass sie die Fläche füllt (wie object-fit:cover) — Foto und
   Bildschirm wachsen gemeinsam. Das ist ein Bild, keine Oberfläche: Schrift und Knöpfe des Heros bleiben fest. */
.hd-bild{position:absolute;inset:0;overflow:hidden;background:#0B0806}
.hd-buehne{position:absolute;left:0;top:0;width:1916px;height:821px;transform-origin:0 0}
/* Foto um 18 % abgedunkelt, der Bildschirm nicht — so leuchtet er heraus (Wirt, 15.10.2026: „davor stach es mehr heraus") */
.hd-foto{display:block;width:1916px;height:821px;filter:brightness(.82)}
/* DER BILDSCHIRM: 374 × 788 (Breite des Entwurfs, Höhe aus dem Seitenverhältnis des Bildschirms im Foto), mit
   matrix3d genau auf die vier gemessenen Ecken gelegt (ol 1239,2/117,9 · or 1472,7/130,2 · ur 1423,6/637,1 ·
   ul 1182,2/612,5 — Kanten als Geraden angepasst, gerechnet mit D:/downloads/patch/matrix.cjs).
   Der Bildschirm ist EIN Bild (bilder/held/schirm-nox.png, 3-fach, zusammengesetzt in .schau-schirm.html):
   Statusleiste, der Entwurf des Wirts auf volle Höhe vergrößert, Knopf weiß mit „CONTINUE" — als Bild, weil Schrift in
   einer verzerrten Ebene nicht in jedem Browser verlässlich erscheint (Wirt, 15.10.2026: „es steht kein Continue mehr da"). */
.hd-schirm{position:absolute;left:0;top:0;width:374px;height:788px;transform-origin:0 0;
  transform:matrix3d(0.53590932,0.025070375,0,-0.000060040899,-0.12828415,0.59867763,0,-0.000047326273,0,0,1,0,1239.2,117.9,0,1);
  border-radius:36px;overflow:hidden;background:#0A0A0A}
.hd-schirm img{display:block;width:374px;height:788px}
.hd-inhalt{position:relative;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:64px 43px 0}
/* Die Spalte endet vor dem Handy (es beginnt bei ≈ 49 % der Breite, 30 px Luft): schmaler → mehr Zeilen, nie kleinere Schrift */
.hd-titel{max-width:calc(49% - 31px);margin:0;font-family:'Playfair Display',Georgia,serif;font-weight:400;font-size:72px;line-height:76px;letter-spacing:-.01em;color:#FFFFFF}
.hd-titel span{color:#C2C2C2}
.hd-text{margin:23px 0 0;max-width:460px;text-wrap:pretty;font-size:22px;line-height:30px;color:#C4C4C4}
.hd-knopf{display:inline-flex;align-items:center;height:40px;margin-top:34px;padding:0 22px;border-radius:20px;
  background:#FFFFFF;color:#101013;font-weight:500;font-size:17px;line-height:1}
.hd-knopf:hover{background:#ECECEC}

/* DER KOPF ÜBER DEM HERO — kopf.js setzt .im-held, solange der Hero unter dem Kopf liegt.
   Wie im Bild: über die ganze Breite (Rand 43), kein Band, alles weiß; die Seiten stehen rechts vor der
   Pille, Login als Text, Demo als weiße Pille. Beim Wechsel blendet der Kopf kurz aus und wieder ein. */
.seite-start .kopf{transition:opacity .16s ease}
.seite-start .kopf.blendet{opacity:0}
body .seite-start .kopf.im-held{width:calc(100% - 86px)}
body .seite-start .kopf.im-held::before{background:transparent}
body .kopf.im-held .marke b{color:#FFFFFF}
body .kopf.im-held .nav{left:auto;right:206px;top:23.5px;gap:32px;color:#FFFFFF}
body .kopf.im-held .nav a[aria-current="page"]::after{background:#FFFFFF}
body .kopf.im-held .zugang{gap:28px;right:0}
body .kopf.im-held .pille-hell{width:auto;padding:0;background:transparent;box-shadow:none;color:#FFFFFF;font-weight:400;font-size:16.5px}
body .kopf.im-held .pille-hell:hover{opacity:.7}
body .kopf.im-held .pille-dunkel{background:#FFFFFF;color:#101013}

@media (max-width:1599px){ .hd-titel{font-size:56px;line-height:60px} }
/* Handy: neben dem Handy im Foto ist kein Platz — die Schrift steht oben auf dunklem Grund, das Foto darunter */
@media (max-width:759px){
  .seite-start .hd{height:auto;min-height:0;display:flex;flex-direction:column-reverse}
  .hd-bild{position:relative;inset:auto;height:560px}
  .hd-inhalt{height:auto;padding:120px 24px 36px}
  body .kopf.im-held .zugang{gap:18px}
  .hd-titel{max-width:none;font-size:40px;line-height:44px}
  .hd-text{font-size:17px;line-height:24px}
  body .seite-start .kopf.im-held{width:calc(100% - 48px)}
}