/* Landhaus Öfingen – Gestaltung (Politis Team, Entwurf 10/2026)
   Farben gemessen aus dem Markenmaterial des Kunden (siehe Kundenakte PM-010, Abschnitt Markenfarben). */
:root{
  --blau:#023B64;      /* Ägäis-Blau: Dessertkarte S. 2, blaue Vektorfläche (Hauptfarbe aller Karten) */
  --tief:#01263F;      /* Tiefblau: aus #023B64 abgedunkelt, für Fuß und lange Texte auf Blau */
  --santorin:#045CA4;  /* Santorin-Blau: häufigste Farbe im Kuppel-/Himmelfoto der Dessertkarte */
  --gold:#B3925C;      /* Mäander-Gold: Vektor-Ornament der Dessertkarte; nur Linie/Fläche, nie Text auf hell */
  --hellgold:#D8C08F;  /* aus #B3925C aufgehellt: Text auf Blau (6,5:1) */
  --sonne:#FEC01B;     /* Sonne im Logo (Rand, gemessen aus Logo 1.png) */
  --tanne:#162F2A;     /* Berge und Schriftzug im Logo (gemessen) */
  --kalk:#F4F8FB;      /* heller Grund, aus Hellblau #CCE4F4 der Karte */
  --text:#231F20;      /* Schriftfarbe der Karten (Vektor) */
  --linie:#d9e3ec;
  --rand:clamp(16px,4vw,40px);
}
@font-face{font-family:"GFS Didot";font-display:swap;src:url(fonts/gfs-didot-latin-400-normal.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,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";font-display:swap;src:url(fonts/gfs-didot-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF}
@font-face{font-family:"Montserrat";font-display:swap;font-weight:400;src:url(fonts/montserrat-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-display:swap;font-weight:500;src:url(fonts/montserrat-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Montserrat";font-display:swap;font-weight:600;src:url(fonts/montserrat-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Commissioner";font-display:swap;font-weight:400;src:url(fonts/commissioner-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"Commissioner";font-display:swap;font-weight:600;src:url(fonts/commissioner-greek-600-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:"Allura";font-display:swap;src:url(fonts/allura-latin-400-normal.woff2) format("woff2")}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--kalk);color:var(--text);font:400 17px/1.65 "Montserrat","Commissioner",system-ui,sans-serif}
img{max-width:100%;height:auto;display:block}
a{color:var(--santorin)}
h1,h2,h3{font-family:"GFS Didot",Georgia,serif;font-weight:400;line-height:1.15;margin:0}
h2{font-size:clamp(30px,6vw,48px);color:var(--blau)}
:focus-visible{outline:3px solid var(--sonne);outline-offset:3px;border-radius:4px}
.wrap{max-width:1180px;margin:0 auto;padding:0 var(--rand)}
.draft{background:#f2b705;color:#1a1500;font:600 12px/1.3 system-ui,sans-serif;text-align:center;padding:7px 10px}
.zier{font-family:"Allura",cursive;font-size:1.6em;line-height:1;color:var(--hellgold);display:block;margin-bottom:.15em}
:lang(el) .zier{display:none}

/* Kopfleiste */
.leiste{position:absolute;inset:0 0 auto 0;z-index:5;display:flex;align-items:center;justify-content:space-between;padding:14px var(--rand)}
.leiste nav{display:flex;gap:20px;align-items:center}
.leiste nav a{color:#fff;text-decoration:none;font-weight:500;font-size:15px}
.leiste nav a:hover{text-decoration:underline;text-underline-offset:5px}
.nav-lang{display:none}
@media(min-width:900px){.nav-lang{display:inline}}
.sprache{position:relative}
.sprache>button{background:rgba(1,38,63,.55);color:#fff;border:1px solid rgba(255,255,255,.45);border-radius:999px;font-family:inherit;font-weight:600;font-size:13px;line-height:1;padding:9px 13px;cursor:pointer}
.sprache ul{position:absolute;right:0;top:calc(100% + 6px);list-style:none;margin:0;padding:6px;background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(1,38,63,.25);min-width:140px}
.sprache li button{display:block;width:100%;text-align:left;background:none;border:0;padding:9px 10px;font-family:inherit;font-weight:500;font-size:15px;line-height:1;color:var(--text);border-radius:6px;cursor:pointer}
.sprache li button[aria-current=true]{background:var(--kalk);color:var(--blau);font-weight:600}

/* Kopf: Foto, Logo, Berglinie */
.kopf{position:relative;color:#fff;background:var(--tief);min-height:min(100svh,860px);display:grid;overflow:hidden}
.kopf>.foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%}
.kopf::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(1,38,63,.55) 0%,rgba(1,38,63,.15) 35%,rgba(1,38,63,.6) 80%,rgba(1,38,63,.55) 100%);z-index:1}
.kopf-inhalt{position:relative;z-index:2;align-self:end;padding:120px var(--rand) clamp(96px,16vw,170px);max-width:calc(720px + var(--rand));margin-left:max(0px,calc((100vw - 1180px)/2))}
.kopf .logo{width:clamp(200px,40vw,300px);margin:0 0 20px;filter:drop-shadow(0 2px 14px rgba(1,38,63,.45))}
.kopf h1{font-size:clamp(28px,5.4vw,46px);text-shadow:0 2px 18px rgba(1,38,63,.5)}
.kopf p.unter{margin:12px 0 0;font-size:17px;max-width:34em;text-shadow:0 1px 10px rgba(1,38,63,.6)}
.heute{display:inline-flex;align-items:center;gap:9px;margin:20px 0 0;padding:8px 14px;border-radius:999px;background:rgba(1,38,63,.7);border:1px solid rgba(255,255,255,.25);font-weight:500;font-size:15px}
.heute i{width:10px;height:10px;border-radius:50%;background:var(--sonne);box-shadow:0 0 0 4px rgba(254,192,27,.25)}
.heute.zu i{background:#b8c4cf;box-shadow:none}
.knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;font-family:inherit;font-weight:600;font-size:15px;line-height:1;text-decoration:none;cursor:pointer;border:2px solid transparent}
.knopf.voll{background:var(--sonne);color:var(--tief)}
.knopf.voll:hover{background:#ffd257}
.knopf.rand{border-color:rgba(255,255,255,.8);color:#fff;background:rgba(1,38,63,.35)}
.knopf.rand:hover{background:rgba(1,38,63,.6)}
.knopf.blau{background:var(--santorin);color:#fff}
.knopf.blau:hover{background:var(--blau)}
[data-bald],[hidden]{display:none!important}
.berge{position:absolute;left:0;right:0;bottom:-1px;width:100%;height:clamp(70px,13vw,150px);z-index:3;display:block}
.berge path{fill:var(--blau)}
.berge .sonne{fill:var(--sonne)}
@media(prefers-reduced-motion:no-preference){
  .berge{animation:auf 1.2s cubic-bezier(.2,.7,.2,1) both}
  @keyframes auf{from{transform:translateY(40%)}to{transform:none}}
}

/* Willkommen auf Blau */
.blau{background:var(--blau);color:#eaf2f8}
.willkommen{padding:clamp(28px,6vw,60px) 0 clamp(48px,8vw,90px)}
.willkommen .wrap{display:grid;gap:28px}
.willkommen h2{color:#fff}
.willkommen p{max-width:38em;margin:14px 0 0}
.mander{height:18px;width:min(300px,70%);color:var(--gold);display:block}
@media(min-width:900px){.willkommen .wrap{grid-template-columns:1.1fr .9fr;align-items:end}}
.fakten{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fakten li{border-top:1px solid rgba(216,192,143,.45);padding-top:12px}
.fakten b{display:block;color:var(--hellgold);font-weight:600;font-size:14px;letter-spacing:.02em}

/* Abschnitte */
section.abschnitt{padding:clamp(56px,9vw,110px) 0}
.lead{max-width:40em;margin:12px 0 0;font-size:17px}
.kueche-liste{list-style:none;margin:36px 0 0;padding:0;display:grid;gap:34px}
.kueche-liste li{display:grid;gap:14px}
.kueche-liste img{border-radius:14px;aspect-ratio:4/3;object-fit:cover;width:100%}
.kueche-liste h3{font-size:26px;color:var(--blau)}
.kueche-liste p{margin:4px 0 0}
.kueche-liste img.frei{object-fit:contain;background:#f4ece4;padding:6px}
.preis{font-weight:600;color:var(--santorin);white-space:nowrap}
@media(min-width:760px){.kueche-liste{grid-template-columns:1fr 1fr;gap:40px 48px}}
@media(min-width:1100px){.kueche-liste li:nth-child(odd){transform:translateY(-28px)}}

/* Verzeichnis der Karte */
.verzeichnis{columns:2 180px;gap:28px;margin:28px 0 0;padding:0;list-style:none}
.verzeichnis li{break-inside:avoid;border-bottom:1px solid var(--linie)}
.verzeichnis a{display:flex;justify-content:space-between;gap:10px;padding:11px 2px;text-decoration:none;color:var(--text)}
.verzeichnis a:hover{color:var(--santorin)}
.verzeichnis small{color:#5b6672}
.mehr{margin-top:28px}

/* Aperitif-Bar: die Zeichnungen aus der Aperitif-Karte des Hauses */
.bar{background:var(--tief);color:#eaf2f8;position:relative;overflow:hidden}
.bar h2{color:#fff}
.glaeser{list-style:none;margin:34px 0 0;padding:0 0 6px;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);gap:18px;overflow-x:auto;scroll-snap-type:x mandatory}
.glaeser li{scroll-snap-align:start;text-align:center}
.glaeser img{height:190px;width:auto;margin:0 auto 12px;filter:drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.glaeser b{display:block;font-family:"GFS Didot",serif;font-weight:400;font-size:21px;color:#fff}
.glaeser img.hell{filter:brightness(2.1) sepia(.35) drop-shadow(0 8px 18px rgba(0,0,0,.35))}
.glaeser span{color:var(--hellgold);font-weight:600}
.glaeser p{font-size:14px;margin:6px 0 0;color:#cfdbe6}

/* Feiern */
.feiern .wrap{display:grid;gap:30px}
.feiern figure{margin:0}
.feiern img{border-radius:14px;width:100%;aspect-ratio:3/4;object-fit:cover}
@media(min-width:900px){.feiern .wrap{grid-template-columns:.85fr 1.15fr;align-items:center}.feiern img{aspect-ratio:4/5}}

/* Bus (wartet auf Fotos) */
.bus{background:linear-gradient(160deg,var(--santorin),var(--blau));color:#fff}

/* Gastraum und Terrasse */
.raeume{display:grid;gap:16px;margin-top:30px;align-items:start}
.raeume figure{margin:0;position:relative}
.raeume img{border-radius:14px;width:100%;aspect-ratio:2/3;object-fit:cover}
.raeume figcaption{position:absolute;left:14px;bottom:14px;background:rgba(1,38,63,.78);color:#fff;padding:6px 12px;border-radius:999px;font-size:14px;font-weight:500}
@media(min-width:700px){.raeume{grid-template-columns:1fr 1fr}.raeume figure:last-child{margin-top:60px}}

/* Zeiten und Kontakt */
.info .wrap{display:grid;gap:44px}
@media(min-width:900px){.info .wrap{grid-template-columns:1fr 1fr}}
.zeiten{width:100%;border-collapse:collapse;margin-top:18px;font-size:16px}
.zeiten th,.zeiten td{text-align:left;padding:12px 6px;border-bottom:1px solid var(--linie);font-weight:400}
.zeiten td{text-align:right}
.zeiten tr.jetzt th,.zeiten tr.jetzt td{color:var(--blau);font-weight:600}
.zeiten tr.jetzt th::after{content:attr(data-heute);margin-left:8px;font-size:12px;background:var(--santorin);color:#fff;padding:3px 8px;border-radius:999px;vertical-align:2px}
.kontakt dl{margin:18px 0 0;display:grid;gap:14px}
.kontakt dt{font-size:13px;font-weight:600;color:#5b6672}
.kontakt dd{margin:2px 0 0;font-size:17px}
.kontakt dd a{color:var(--blau);font-weight:500}
.kontakt .knoepfe{margin-top:22px}

/* Fuß */
.fuss{background:var(--tief);color:#c9d6e2;padding:44px 0 34px;font-size:14px}
.fuss .wrap{display:grid;gap:18px}
.fuss img{width:150px}
.fuss a{color:#fff}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.fuss .mander{color:var(--gold);opacity:.8}

/* Reservierung */
dialog{border:0;border-radius:16px;padding:0;max-width:min(560px,calc(100vw - 24px));width:100%;color:var(--text)}
dialog::backdrop{background:rgba(1,38,63,.6)}
dialog form{padding:24px;display:grid;gap:12px}
dialog h2{font-size:30px}
dialog label{display:grid;gap:4px;font-size:14px;font-weight:500}
dialog input,dialog select,dialog textarea{font:inherit;font-size:16px;padding:10px 12px;border:1px solid #b9c7d4;border-radius:8px;width:100%}
dialog .zwei{display:grid;grid-template-columns:1fr 1fr;gap:12px}
dialog .hinweis{font-size:13px;color:#5b6672;margin:0}
dialog .aktion{display:flex;gap:10px;flex-wrap:wrap}
dialog button.knopf{border:0}
dialog .abbr{background:#e7eef5;color:var(--blau)}
#resmsg{min-height:1.4em;margin:0;font-weight:500;color:var(--blau)}

/* Speisekarte */
.seitenkopf{background:var(--blau);color:#fff;padding:22px 0 0;position:relative}
.seitenkopf .oben{display:flex;justify-content:space-between;align-items:center;gap:12px}
.seitenkopf .oben a.home img{width:130px}
.seitenkopf h1{font-size:clamp(36px,7vw,58px);padding:28px 0 6px}
.seitenkopf p{margin:0 0 20px;color:#cfdbe6}
.seitenkopf .berge{position:relative;height:46px;margin-top:-1px}
.seitenkopf .berge path{fill:var(--kalk)}
#reiter{position:sticky;top:0;z-index:4;background:var(--kalk);border-bottom:1px solid var(--linie);display:flex;gap:6px;overflow-x:auto;padding:10px var(--rand);scrollbar-width:none}
#reiter::-webkit-scrollbar{display:none}
#reiter a{flex:none;padding:8px 14px;border-radius:999px;text-decoration:none;color:var(--blau);font-size:14px;font-weight:500;border:1px solid var(--linie);background:#fff}
#reiter a.on{background:var(--blau);color:#fff;border-color:var(--blau)}
.gruppe{padding:36px 0 8px;scroll-margin-top:64px}
.gruppe h2{font-size:clamp(28px,5vw,38px)}
.gruppe .hinweis{margin:8px 0 0;color:#4d5862;font-size:15px;max-width:44em}
.posten{list-style:none;margin:16px 0 0;padding:0}
.posten li{padding:14px 0;border-bottom:1px solid var(--linie);display:grid;grid-template-columns:1fr auto;gap:2px 16px}
.posten .nm{font-weight:600}
.posten sup{font-size:11px;color:#5b6672;font-weight:500;margin-left:4px;vertical-align:4px}
.posten .pr{font-weight:600;color:var(--blau);text-align:right}
.posten .pr span{white-space:nowrap}
.posten .ds{grid-column:1/-1;font-size:15px;color:#4d5862}
.posten .var{grid-column:1/-1;font-size:15px;color:var(--blau);font-weight:500}
.legende{margin:46px 0 60px;padding:22px;background:#fff;border-radius:14px;font-size:14px;color:#4d5862;border:1px solid var(--linie)}
.legende h2{font-size:24px;margin-bottom:8px}

/* Rechtstexte */
.recht{max-width:760px;margin:0 auto;padding:40px var(--rand) 70px}
.recht h1{font-size:44px;color:var(--blau);margin-bottom:10px}
.recht h2{font-size:24px;margin:28px 0 6px}
.offen{background:#fff2a8;padding:1px 4px;border-radius:3px}

/* Highlights */
.hl{background:var(--tief);color:#eaf2f8}
.hl h2{color:#fff}
.hl .lead{color:#cfdbe6}
.hlist{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:1px}
.hlist li{background:var(--tief);outline:1px solid rgba(216,192,143,.3)}
.hlist li>a,.hlist li:not(:has(a)){display:grid;gap:6px;align-content:start;padding:20px 16px;color:#eaf2f8;text-decoration:none;height:100%}
.hlist li>a:hover{background:var(--blau)}
.hlist svg{color:var(--sonne);width:34px;height:34px;margin-bottom:4px}
.hlist b{font-family:"GFS Didot",Georgia,serif;font-weight:400;font-size:20px;line-height:1.2;color:#fff}
.hlist b+span{color:#cfdbe6;font-size:14px;line-height:1.45}
@media(min-width:860px){.hlist{grid-template-columns:repeat(4,1fr)}.hlist li>a,.hlist li:not(:has(a)){padding:26px 22px}}

/* Weihnachtszeit: Tannengrün aus dem Logo (#162F2A), Gold, Schnee */
.weihnacht{position:relative;overflow:hidden;color:#eef3ef;background:radial-gradient(ellipse at 50% 0%,rgba(254,192,27,.18),transparent 60%),radial-gradient(ellipse at 85% 100%,rgba(179,146,92,.22),transparent 55%),var(--tanne)}
.weihnacht .wrap{position:relative;z-index:2}
.weihnacht h2{color:#fff}
.weihnacht .lead{color:#d6e2da;max-width:44em}
.weihnacht .zier{color:var(--sonne)}
.weihnacht .zweig{position:absolute;top:0;left:0;width:100%;height:60px;color:#3f6b55;z-index:1}
.weihnacht .zweig .kugel{fill:var(--sonne)}
.weihnacht .zweig .kugel:nth-of-type(2n){fill:#c8102e}
.weihnacht .merry{width:min(220px,55vw);margin:26px 0 6px;filter:drop-shadow(0 4px 14px rgba(0,0,0,.35))}
.wn-liste{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:18px}
.wn-liste li{border:1px solid rgba(254,192,27,.35);border-radius:14px;padding:20px 20px 18px;background:rgba(255,255,255,.04)}
.wn-liste h3{font-size:24px;color:#fff;margin:4px 0 6px}
.wn-liste p{margin:0;color:#d6e2da}
.wn-liste .stern{color:var(--sonne);font-size:20px}
@media(min-width:900px){.wn-liste{grid-template-columns:repeat(3,1fr)}}
.wn-info{margin:24px 0 0;font-weight:500;color:var(--hellgold)}
.schnee{position:absolute;inset:0;z-index:1;pointer-events:none;background-image:radial-gradient(2px 2px at 20px 30px,#fff,transparent),radial-gradient(1.5px 1.5px at 90px 120px,#fff,transparent),radial-gradient(2.5px 2.5px at 160px 60px,rgba(255,255,255,.9),transparent),radial-gradient(1.5px 1.5px at 230px 160px,#fff,transparent),radial-gradient(2px 2px at 300px 90px,rgba(255,255,255,.8),transparent);background-size:320px 200px;opacity:.55}
.schnee::after{content:"";position:absolute;inset:0;background-image:radial-gradient(1.5px 1.5px at 50px 80px,#fff,transparent),radial-gradient(2.5px 2.5px at 130px 10px,rgba(255,255,255,.8),transparent),radial-gradient(1px 1px at 210px 140px,#fff,transparent),radial-gradient(2px 2px at 380px 50px,#fff,transparent);background-size:470px 290px;opacity:.8}
@media(prefers-reduced-motion:no-preference){.schnee{animation:schnee 22s linear infinite}@keyframes schnee{from{background-position:0 0}to{background-position:60px 400px}}.schnee::after{animation:schnee2 34s linear infinite}@keyframes schnee2{from{background-position:0 0}to{background-position:-90px 580px}}}

/* Reservierung nach Vorbild Limani: Formular, Bestätigung, Fehler */
.resd form[hidden]{display:none}
.resd .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.resd .go:disabled{opacity:.6;cursor:wait}
#resmsg{margin:0;font-weight:500;color:var(--blau)}
#resmsg:not(:empty){background:var(--kalk);padding:10px 12px;border-radius:8px;font-size:15px}
#resmsg.fehler{background:#fbe9eb;color:#7a1622;border:1px solid #e3b3ba}
.resok{padding:34px 24px 28px;text-align:center;display:grid;gap:10px;justify-items:center}
.resok[hidden]{display:none}
.resok:focus{outline:none}
.resok .haken{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:#2f7d4f;color:#fff;margin-bottom:4px}
.resok h2{font-size:32px;margin:0}
.resok p{margin:0;max-width:34ch}
.resok .okwer{font-weight:600;color:var(--blau);background:var(--kalk);padding:10px 14px;border-radius:8px}
.resok .klein{color:#5b6672;font-size:14px}
.resok .knopf{margin-top:8px;min-width:180px;border:0}
.fuss .credit{margin:4px 0 0;opacity:.9}
.sondertag{display:flex;flex-direction:column;gap:3px;max-width:520px;margin:12px 0 0;padding:10px 16px;border-radius:14px;background:rgba(1,38,63,.78);border:1px solid var(--gold);font-size:15px;line-height:1.45}
.sondertag strong{color:var(--hellgold);font-weight:600;letter-spacing:.04em;font-size:13px;text-transform:uppercase}
.sondertag[hidden]{display:none!important}