/* Delphi Bad Windsheim – Design „Blaue Stunde in Delphi“ (POLITIS TEAM, 10/2026)
   Farben gemessen aus der Visitenkarte „56 - Delphi Bad Windsheim - VS“ (Canva-PDF, 600 dpi, Median je Fläche). */
@font-face{font-family:"GFS Didot";src:url(fonts/gfs-didot-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"GFS Didot";src:url(fonts/gfs-didot-greek-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:Commissioner;src:url(fonts/commissioner-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Commissioner;src:url(fonts/commissioner-greek-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:Commissioner;src:url(fonts/commissioner-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Commissioner;src:url(fonts/commissioner-greek-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}

:root{
  --nacht:#10254e;      /* große blaue Fläche, Rückseite Visitenkarte */
  --tief:#0d1832;       /* dunkelste Fläche, Vorderseite (Meer im Schatten) */
  --aegaeis:#204184;    /* Schreibschrift „SCAN“, Rückseite */
  --gold:#b9812c;       /* Ecken um den QR-Code – nur Linien/große Schrift auf Blau */
  --gold-hell:#c19d69;  /* Mäander-Band – Text auf Nachtblau (5,9:1) */
  --papier:#efebe8;     /* helle Seite mit Wellenkante */
  --text:#10254e;       /* Text auf Papier = Nachtblau (12,7:1) */
  --leise:#3d4f74;      /* Nachtblau aufgehellt für Nebentext auf Papier (8,1:1) */
  --linie:#d9d2c8;
  --kopf:"GFS Didot",Didot,"Bodoni 72",Georgia,serif;
  --text-f:Commissioner,"Avenir Next",Avenir,system-ui,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--papier);color:var(--text);font:400 17px/1.6 var(--text-f)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:3px}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
h1,h2,h3{font-family:var(--kopf);font-weight:400;line-height:1.15;margin:0}
.draft{background:#ffe066;color:#3a2f00;text-align:center;font:600 13px/1.4 var(--text-f);padding:6px 10px}

/* Kopfleiste */
.bar{background:var(--tief);color:#fff;position:sticky;top:0;z-index:20;border-bottom:1px solid rgba(193,157,105,.35)}
.bar .wrap{display:flex;align-items:center;gap:14px;min-height:64px}
.marke img{width:48px;height:48px}
.bar nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.nl{display:none;text-decoration:none;padding:8px 10px;font-size:15px;color:#e8e4df}
.nl:hover{color:var(--gold-hell)}
@media(min-width:820px){.nl{display:inline-block}}
.sprache{position:relative}
.sprache>button{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;border-radius:999px;padding:6px 11px;font:600 13px var(--text-f);cursor:pointer}
.sprache ul{position:absolute;right:0;top:110%;list-style:none;margin:0;padding:6px;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);min-width:140px}
.sprache ul button{display:block;width:100%;text-align:left;background:none;border:0;padding:8px 10px;font:400 15px var(--text-f);color:var(--nacht);cursor:pointer;border-radius:6px}
.sprache ul button:hover,.sprache ul button[aria-current=true]{background:var(--papier)}
.res{background:var(--gold);color:var(--tief);border:0;border-radius:999px;padding:9px 16px;font:600 14px var(--text-f);cursor:pointer}
.res:hover{background:var(--gold-hell)}

/* Kopfbereich: blaue Stunde */
.held{position:relative;color:#fff;background:linear-gradient(180deg,var(--tief) 0%,var(--nacht) 62%,#1b3466 100%);overflow:hidden}
.held .wrap{position:relative;display:grid;gap:28px;padding-top:44px;padding-bottom:120px}
.saeule{position:absolute;right:-30px;bottom:70px;width:170px;opacity:.12;pointer-events:none}
@media(min-width:900px){.held .wrap{grid-template-columns:1.1fr .9fr;align-items:center;padding-top:72px;padding-bottom:150px}.saeule{right:3%;width:230px;bottom:90px;opacity:.16}}
.held .logo{width:150px;order:-1}
@media(min-width:900px){.held .logo{order:0;width:300px;justify-self:center}}
.ort{font-family:var(--kopf);font-size:clamp(30px,6.4vw,52px);margin:0 0 10px}
.ort em{font-style:normal;color:var(--gold-hell)}
.satz{font-size:18px;color:#dfe4ee;max-width:34ch;margin:0 0 18px}
.heute{display:inline-flex;align-items:center;gap:10px;margin:0 0 26px;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.08);font-size:15px}
.heute i{width:9px;height:9px;border-radius:50%;background:#6fd08c;box-shadow:0 0 0 0 rgba(111,208,140,.6);animation:puls 2.4s infinite}
.heute.zu i{background:#c9cfda;animation:none}
@keyframes puls{70%{box-shadow:0 0 0 9px rgba(111,208,140,0)}100%{box-shadow:0 0 0 0 rgba(111,208,140,0)}}
.knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.kn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 20px;border-radius:999px;border:1px solid rgba(255,255,255,.45);color:#fff;background:none;text-decoration:none;font:600 15px var(--text-f);cursor:pointer}
.kn:hover{border-color:var(--gold-hell);color:var(--gold-hell)}
.kn.gold{background:var(--gold);border-color:var(--gold);color:var(--tief)}
.kn.gold:hover{background:var(--gold-hell);border-color:var(--gold-hell);color:var(--tief)}
[data-plattform][hidden]{display:none!important}

/* Das besondere Element: Wellenkante wie auf der Visitenkarte, mit Mäander */
.welle{position:relative;display:block;width:100%;height:auto;margin-top:-1px}
.welle.unten{position:absolute;left:0;right:0;bottom:-1px}
.maeander{height:14px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='14' viewBox='0 0 28 14'%3E%3Cpath d='M1 13V1h12v8H5V5h4' fill='none' stroke='%23b9812c' stroke-width='1.6'/%3E%3Cpath d='M15 13h12' stroke='%23b9812c' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left center;opacity:.9}
.band{max-width:420px;margin:0 auto}

/* Abschnitte auf Papier */
section{scroll-margin-top:80px}
.papier{padding:56px 0 64px}
.papier h2{font-size:clamp(32px,6vw,46px);color:var(--nacht);margin-bottom:12px}
.lead{color:var(--leise);max-width:58ch;margin:0 0 28px}
.kueche{display:grid;gap:0;border-top:1px solid var(--linie)}
.kueche div{padding:20px 0;border-bottom:1px solid var(--linie);display:grid;grid-template-columns:3.2em 1fr;gap:4px 14px}
.kueche b{grid-row:span 2;font:400 30px/1 var(--kopf);color:var(--aegaeis)}
.kueche h3{font-size:24px;color:var(--nacht)}
.kueche p{margin:0;color:var(--leise)}
@media(min-width:900px){.kueche{grid-template-columns:repeat(3,1fr);gap:0 40px;border-top:0}.kueche div{border-top:1px solid var(--linie)}}
.karte-hinweis{margin-top:34px;padding:22px 24px;border-left:3px solid var(--aegaeis);background:#fff;max-width:640px}
.karte-hinweis p{margin:0 0 12px}
.kn.dunkel{color:var(--nacht);border-color:var(--nacht)}
.kn.dunkel:hover{color:var(--aegaeis);border-color:var(--aegaeis)}

/* Öffnungszeiten auf Nachtblau */
.nacht{position:relative;background:var(--nacht);color:#fff;padding:64px 0 140px}
.nacht h2{font-size:clamp(28px,5vw,40px);letter-spacing:.14em;text-transform:uppercase;color:var(--gold-hell);text-align:center;margin:22px 0 30px}
.zeiten{width:100%;max-width:560px;margin:0 auto;border-collapse:collapse}
.zeiten th,.zeiten td{padding:13px 4px;border-bottom:1px solid rgba(193,157,105,.28);font-weight:400;text-align:left}
.zeiten td{text-align:right;font-family:var(--kopf);font-size:19px;color:var(--gold-hell);white-space:nowrap}
.zeiten td span{display:block}
.zeiten tr.jetzt th{color:#fff;font-weight:600}
.zeiten tr.jetzt th::after{content:attr(data-heute);margin-left:10px;font-size:12px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--gold);color:var(--tief);vertical-align:2px}
.zeiten tr.jetzt td{color:#fff}
.fussnote{text-align:center;color:#c6cddc;font-size:14px;margin:18px auto 0;max-width:46ch}

/* Kontakt */
.kontakt{display:grid;gap:26px}
@media(min-width:900px){.kontakt{grid-template-columns:1fr 1fr;align-items:start}}
.kontakt dl{margin:0;display:grid;grid-template-columns:7.5em 1fr;gap:12px 14px}
.kontakt dt{color:var(--leise);font-size:15px}
.kontakt dd{margin:0;font-size:18px}
.kontakt dd a{color:var(--aegaeis);text-decoration-thickness:1px;text-underline-offset:3px}
.stadt{font:400 clamp(26px,4.6vw,36px)/1.25 var(--kopf);color:var(--nacht);margin:0}

/* Fuß */
.fuss{background:var(--tief);color:#d6dbe6;padding:44px 0 34px;text-align:center}
.fuss .logo{width:120px;margin:0 auto 14px}
.fuss p{margin:6px 0}
.klein{font-size:14px}
.fuss a{color:#e8e4df}

/* Reservierungsdialog */
.resd{border:0;border-radius:14px;padding:0;max-width:440px;width:calc(100% - 28px);color:var(--nacht)}
.resd::backdrop{background:rgba(13,24,50,.7)}
.resd form{padding:22px;display:grid;gap:12px}
.resd h3{font-size:28px}
.resd label{display:grid;gap:4px;font-size:14px;color:var(--leise)}
.resd input,.resd select,.resd textarea{font:400 16px var(--text-f);padding:10px;border:1px solid #c8c0b5;border-radius:8px;color:var(--nacht);background:#fff;width:100%}
.resd .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.resd .go{background:var(--nacht);color:#fff;border:0;border-radius:999px;padding:12px;font:600 15px var(--text-f);cursor:pointer}
.resd .cx{background:none;border:0;color:var(--leise);font:400 15px var(--text-f);cursor:pointer;padding:6px}
.resd small{color:var(--leise)}
#resmsg:not(:empty){padding:10px;border-radius:8px;background:var(--papier)}
.hp{position:absolute;left:-9999px;width:1px;height:1px}

/* Unterseiten */
.recht{max-width:760px;margin:0 auto;padding:40px 20px 70px}
.recht h1{font-size:40px;margin-bottom:18px}
.recht h2{font:600 17px var(--text-f);margin:26px 0 6px;color:var(--nacht)}
.recht p{margin:0 0 10px}
.platzhalter{background:#ffe066;padding:0 4px}
.karte-seite{padding:40px 0 70px}
.karte-seite h1{font-size:clamp(36px,7vw,54px);margin-bottom:10px}

/* ---------- Stand 02.11.2026: Foto im Kopf, Plattform, Speisekarte ---------- */
.held.foto{background:var(--tief)}
.held.foto::before{content:"";position:absolute;inset:0;background:url(bilder/santorini-terrasse-abend-800.jpg) center 60%/cover no-repeat;opacity:.55}
@media(min-width:900px){.held.foto::before{background-image:url(bilder/santorini-terrasse-abend.jpg)}}
.held.foto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(13,24,50,.92) 0%,rgba(16,37,78,.7) 45%,rgba(16,37,78,.86) 100%)}
.held.foto .wrap{z-index:1}
.held h1{font-family:var(--kopf);font-size:clamp(32px,6.6vw,56px);margin:0 0 12px}
.held h1 small{display:block;font:600 15px/1.4 var(--text-f);letter-spacing:.16em;text-transform:uppercase;color:var(--gold-hell);margin-bottom:10px}
.mitnehmen{font-size:15px;color:#c6cddc;margin:-6px 0 22px}
[data-schalter][hidden]{display:none!important}
.zitat{font:400 clamp(22px,3.6vw,30px)/1.4 var(--kopf);color:var(--nacht);max-width:30ch;margin:0 0 18px}
.zitat::before{content:"„"}.zitat::after{content:"“"}
.zwei{display:grid;gap:32px;align-items:center}
@media(min-width:900px){.zwei{grid-template-columns:1.2fr .8fr}}
.zwei img{max-width:380px;margin:0 auto;width:100%}
.empf{list-style:none;margin:28px 0 0;padding:0;display:grid;gap:0;border-top:1px solid var(--linie)}
@media(min-width:760px){.empf{grid-template-columns:1fr 1fr;column-gap:40px}}
.empf li{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:16px 0;border-bottom:1px solid var(--linie)}
.empf b{font:400 22px/1.25 var(--kopf);color:var(--nacht)}
.empf span{color:var(--leise);font-size:15px;grid-column:1}
.empf em{font-style:normal;font:400 21px var(--kopf);color:var(--aegaeis);grid-row:1;grid-column:2;white-space:nowrap}
.verz{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.verz a{display:inline-block;padding:9px 16px;border:1px solid var(--linie);border-radius:999px;background:#fff;text-decoration:none;color:var(--nacht);font-size:15px}
.verz a:hover{border-color:var(--aegaeis);color:var(--aegaeis)}
.gutschein{background:#fff;border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.gutschein .zwei img{max-width:320px}
.sozial{display:flex;justify-content:center;gap:14px;margin:10px 0}
/* Speisekarte */
.reiter{position:sticky;top:64px;z-index:10;background:var(--papier);border-bottom:1px solid var(--linie);overflow-x:auto;white-space:nowrap;scrollbar-width:thin}
.reiter .wrap{display:flex;gap:6px;padding-top:10px;padding-bottom:10px}
.reiter a{display:inline-block;padding:7px 13px;border-radius:999px;text-decoration:none;font-size:14px;color:var(--nacht);border:1px solid transparent}
.reiter a.on,.reiter a:hover{border-color:var(--nacht)}
.gruppe{padding:34px 0 8px;scroll-margin-top:130px}
.gruppe h2{font-size:clamp(28px,5vw,38px);color:var(--nacht);margin:0 0 6px}
.gruppe .note{color:var(--leise);margin:0 0 10px;font-style:italic}
.gericht{display:grid;grid-template-columns:3.4em 1fr auto;gap:2px 12px;padding:14px 0;border-bottom:1px solid var(--linie)}
.gericht .nr{font:400 17px/1.5 var(--kopf);color:var(--aegaeis)}
.gericht h3{font:600 16px/1.45 var(--text-f);color:var(--nacht);margin:0}
.gericht h3 sup{font-weight:400;font-size:11px;color:var(--leise);margin-left:6px;letter-spacing:.02em}
.gericht p{grid-column:2;margin:0;color:var(--leise);font-size:15px}
.gericht .pr{grid-row:1;grid-column:3;font:400 18px/1.4 var(--kopf);color:var(--nacht);white-space:nowrap}
.legende{margin:36px 0 0;padding:20px 22px;background:#fff;border:1px solid var(--linie);font-size:14px;color:var(--leise)}
.legende h2{font:600 16px var(--text-f);color:var(--nacht);margin:0 0 8px}
.legende p{margin:0 0 8px}
.folgt{margin-top:30px;padding:18px 22px;border-left:3px solid var(--gold);background:#fff}
/* Bestätigung Reservierung */
.resok{padding:26px 22px;text-align:center}
.resok .haken{width:58px;height:58px;border-radius:50%;background:var(--nacht);color:#fff;display:grid;place-items:center;margin:0 auto 12px}
.resok h3{font-size:28px;margin-bottom:8px}
.resok p{margin:0 0 8px;color:var(--leise)}
.resok .okwer{color:var(--nacht);font-weight:600}
#resmsg.fehler{background:#fde8e8;color:#8a1c1c}
.zeiten td{white-space:normal;max-width:16em}
@media(max-width:480px){.zeiten th{font-size:15px}.zeiten td{font-size:17px}}
.gericht .veg{vertical-align:-2px;margin-left:6px}
.gericht .menge{display:block;font:400 13px var(--text-f);color:var(--leise);text-align:right}
.vegleg{margin:30px 0 0;color:var(--leise);font-size:15px;display:flex;align-items:center;gap:8px}
/* 11.11.2026: Zeiten aus der App kommen als „11:30 – 14:00, 17:30 – 22:00“ – auf dem Handy in einer Zeile */
@media(max-width:480px){.zeiten th{font-size:14px;padding-right:8px}.zeiten td{white-space:nowrap;max-width:none;font-size:15px;letter-spacing:-.01em}}