/* Zum Posthorn – Marke: Posthorn-Blau und Gold (aus Logo und Bildmaterial) */
@font-face{font-family:"Marcellus";src:url(fonts/marcellus-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+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Marcellus";src:url(fonts/marcellus-latin-ext-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Alegreya Sans";src:url(fonts/alegreya-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(fonts/alegreya-sans-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(fonts/alegreya-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(fonts/alegreya-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Alegreya Sans";src:url(fonts/alegreya-sans-greek-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0370-03FF}
@font-face{font-family:"Alegreya Sans";src:url(fonts/alegreya-sans-greek-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0370-03FF}
@font-face{font-family:"Alegreya Sans";src:url(fonts/alegreya-sans-greek-700-normal.woff2) format("woff2");font-weight:700;font-display:swap;unicode-range:U+0370-03FF}

:root{
  --blau:#02234b;      /* Posthorn-Blau, aus den Markenbildern */
  --nacht:#011632;     /* tiefer für Flächen hinter Text */
  --gold:#c9a35b;      /* Logo-Gold, mittlerer Ton */
  --hellgold:#ecd8a4;  /* Gold auf Blau, gut lesbar */
  --marmor:#f3f4f7;    /* kühles Weiß wie Stein, kein Creme */
  --tinte:#14203a;     /* Fließtext auf Hell */
  --grau:#5a6478;
  --linie:#d9dce4;
  --kopf:"Marcellus","Alegreya Sans",Georgia,serif;
  --text:"Alegreya Sans",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(--marmor);color:var(--tinte);font:400 1.125rem/1.6 var(--text)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
h1,h2,h3{font-family:var(--kopf);font-weight:400;line-height:1.15;margin:0}
h2{font-size:clamp(2rem,6vw,3.1rem);letter-spacing:.01em}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.draft{background:var(--hellgold);color:var(--nacht);font:500 .85rem/1.2 var(--text);text-align:center;padding:7px 12px}

/* Kopfleiste */
.bar{position:sticky;top:0;z-index:20;background:var(--blau);color:#fff;border-bottom:1px solid rgba(236,216,164,.25)}
.bar .wrap{display:flex;align-items:center;gap:12px;min-height:64px}
.bar .marke img{height:34px;width:auto}
.bar nav{margin-left:auto;display:flex;align-items:center;gap:4px}
.bar nav a,.bar nav button{color:#fff;text-decoration:none;font:500 1rem var(--text);background:none;border:0;padding:12px 10px;min-height:44px;cursor:pointer}
.bar nav .nl{display:none}
.bar .res{background:var(--gold);color:var(--nacht);border-radius:2px;padding:10px 16px;font-weight:700}
.sprache{position:relative}
.sprache ul{position:absolute;right:0;top:100%;margin:6px 0 0;padding:6px;list-style:none;background:#fff;border-radius:4px;box-shadow:0 8px 30px rgba(1,22,50,.35);min-width:150px}
.sprache ul button{display:block;width:100%;text-align:left;color:var(--tinte)!important}
.sprache ul button[aria-current=true]{font-weight:700;color:var(--blau)!important}
@media(min-width:820px){.bar nav .nl{display:inline-block}.bar .marke img{height:40px}}

/* Kopfbereich: das eine große Bild der Seite */
.held{position:relative;background:var(--blau) url(bilder/buste-blau.jpg) right bottom/auto 100% no-repeat;color:#fff;overflow:hidden}
.held:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--blau) 35%,rgba(2,35,75,.55))}
.held .wrap{position:relative;display:grid;gap:28px;padding-top:44px;padding-bottom:56px}
.held .logo{width:min(560px,92%)}
.held .links{display:grid;gap:22px}
.held .satz{font:400 1.3rem/1.45 var(--text);color:var(--hellgold);max-width:30ch;margin:0}
.heute{display:flex;align-items:center;gap:10px;font-weight:500;font-size:1.05rem;margin:0}
.heute i{width:10px;height:10px;border-radius:50%;background:#7fd19b;box-shadow:0 0 0 4px rgba(127,209,155,.22)}
.heute.zu i{background:#e7a0a0;box-shadow:0 0 0 4px rgba(231,160,160,.2)}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.kn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:0 24px;border:1.5px solid var(--hellgold);color:#fff;text-decoration:none;font:700 1.05rem var(--text);background:transparent;border-radius:2px;cursor:pointer}
.kn.gold{background:var(--gold);border-color:var(--gold);color:var(--nacht)}
.rahmen{position:relative;margin:8px auto 0;width:min(560px,100%);aspect-ratio:1100/779}
.rahmen .pinsel{position:absolute;inset:0;width:100%;height:100%;transform:translate(3%,4%)}
.rahmen .foto{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  -webkit-mask:url(bilder/pinselstrich.png) center/100% 100% no-repeat;mask:url(bilder/pinselstrich.png) center/100% 100% no-repeat}
@media(min-width:900px){
  .held .wrap{grid-template-columns:1.05fr .95fr;align-items:center;padding-top:72px;padding-bottom:88px}
  .held .links{align-content:center}
  .rahmen{margin:0}
}
@media(prefers-reduced-motion:no-preference){
  .rahmen .foto{animation:auf 1.1s .15s cubic-bezier(.2,.7,.2,1) both}
  @keyframes auf{from{opacity:0;transform:scale(1.06)}to{opacity:1;transform:none}}
}

/* Küche: Bilder groß, Text knapp */
section{padding:64px 0}
.kueche h2,.raum h2{margin-bottom:10px}
.lead{color:var(--grau);max-width:52ch;margin:0 0 28px}
.teller{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.teller figure{margin:0}
.teller img{width:100%;object-fit:cover;aspect-ratio:4/5}
.teller figure:first-child{grid-column:1/-1}
.teller figure:first-child img{aspect-ratio:16/10}
.teller figcaption{font:400 1.05rem/1.3 var(--kopf);padding-top:8px}
@media(min-width:900px){
  .teller{grid-template-columns:2fr 1fr 1fr;grid-template-rows:auto auto}
  .teller figure:first-child{grid-column:1;grid-row:1/3}
  .teller figure:first-child{position:relative;min-height:420px}
  .teller figure:first-child img{position:absolute;left:0;right:0;top:0;bottom:2.4rem;width:100%;height:calc(100% - 2.4rem);aspect-ratio:auto}
  .teller figure:first-child figcaption{position:absolute;left:0;bottom:0}
}

/* Speisekarte als Inhaltsverzeichnis auf Blau */
.karte{background:var(--blau);color:#fff}
.karte h2{color:#fff}
.karte .lead{color:var(--hellgold)}
.verz{columns:2 180px;column-gap:40px;margin:0 0 34px;padding:0;list-style:none}
.verz li{break-inside:avoid;border-bottom:1px solid rgba(236,216,164,.22)}
.verz a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;text-decoration:none;font:400 1.15rem var(--kopf)}
.verz a span{color:var(--hellgold);font:500 .95rem var(--text)}
.verz a:hover{color:var(--hellgold)}

/* Gastraum */
.raum .bilder{display:grid;gap:14px;grid-template-columns:1fr 1fr}
.raum .bilder img{width:100%;aspect-ratio:3/4;object-fit:cover}
.raum .bilder img:first-child{grid-column:1/-1;aspect-ratio:16/9}
@media(min-width:900px){.raum .bilder{grid-template-columns:1.4fr 1fr 1fr}.raum .bilder img,.raum .bilder img:first-child{grid-column:auto;aspect-ratio:auto;height:480px}}

/* Zeiten und Kontakt */
.info{background:#fff;border-top:1px solid var(--linie)}
.info .wrap{display:grid;gap:48px}
@media(min-width:900px){.info .wrap{grid-template-columns:1fr 1fr}}
.zeiten{width:100%;border-collapse:collapse;margin-top:20px}
.zeiten th,.zeiten td{text-align:left;padding:14px 0;border-bottom:1px solid var(--linie);vertical-align:top;font-weight:400}
.zeiten td{text-align:right;font-weight:500}
.zeiten tr.jetzt th,.zeiten tr.jetzt td{color:var(--blau);font-weight:700}
.zeiten tr.jetzt th:after{content:" · heute";content:attr(data-heute);margin-left:8px;font:500 .8rem var(--text);background:var(--hellgold);color:var(--nacht);padding:2px 8px;border-radius:2px}
.kontakt dl{margin:20px 0 0;display:grid;gap:18px}
.kontakt dt{color:var(--grau);font-size:.95rem}
.kontakt dd{margin:2px 0 0;font-size:1.2rem}
.kontakt dd a{color:var(--blau)}
.kellner{display:none}
@media(min-width:900px){.kontakt{position:relative;padding-right:160px}.kellner{display:block;position:absolute;right:0;bottom:-64px;width:150px}}

/* Fuß */
.fuss{background:var(--nacht) url(bilder/saeulen-blau.jpg) center bottom/cover no-repeat;color:#fff;position:relative}
.fuss:before{content:"";position:absolute;inset:0;background:rgba(1,22,50,.72)}
.fuss .wrap{position:relative;padding-top:56px;padding-bottom:40px;display:grid;gap:22px;justify-items:start}
.fuss img.logo{width:min(340px,80%)}
.fuss p{margin:0;color:var(--hellgold)}
.fuss .klein{font-size:.95rem;color:#c8cfdd}
.fuss .klein a{color:#fff}
.sozial{display:flex;gap:8px}
.sozial a{display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid rgba(236,216,164,.5);border-radius:50%;color:#fff}

/* Reservierung */
dialog.resd{border:0;padding:0;border-radius:4px;width:min(520px,calc(100vw - 24px));color:var(--tinte)}
dialog.resd::backdrop{background:rgba(1,22,50,.7)}
.resd form{padding:24px;display:grid;gap:12px}
.resd h3{font-size:1.7rem;color:var(--blau)}
.resd label{display:grid;gap:4px;font-size:.95rem;color:var(--grau)}
.resd input,.resd select,.resd textarea{font:inherit;font-size:1rem;color:var(--tinte);padding:11px 12px;border:1px solid var(--linie);border-radius:2px;background:#fff;width:100%}
.resd .row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.resd .go{background:var(--blau);color:#fff;border:0;min-height:50px;font:700 1.05rem var(--text);cursor:pointer;border-radius:2px}
.resd .cx{background:none;border:0;color:var(--grau);font:inherit;cursor:pointer;min-height:44px}
.resd small{color:var(--grau);line-height:1.45}
.resd .hp{position:absolute;left:-9999px}
#resmsg:not(:empty){background:var(--marmor);border-left:3px solid var(--gold);padding:10px 12px}

/* Speisekarte-Seite */
.kseite .kopf{background:var(--blau);color:#fff;padding:44px 0 30px}
.kseite .kopf h1{font-size:clamp(2.3rem,8vw,3.6rem)}
.kseite .kopf p{color:var(--hellgold);margin:10px 0 0;max-width:56ch}
.reiter{position:sticky;top:64px;z-index:10;background:var(--blau);border-top:1px solid rgba(236,216,164,.2)}
.reiter .wrap{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
.reiter a{flex:none;color:#d7dceb;text-decoration:none;padding:13px 12px;font:500 1rem var(--text);border-bottom:3px solid transparent;min-height:48px}
.reiter a.on{color:#fff;border-bottom-color:var(--gold)}
.gruppe{padding:44px 0 8px;scroll-margin-top:130px}
.gruppe h2{font-size:clamp(1.8rem,5vw,2.4rem);color:var(--blau);display:flex;align-items:center;gap:16px}
.gruppe h2:after{content:"";flex:1;height:1px;background:var(--linie)}
.gruppe .hinweis{color:var(--grau);font-style:italic;margin:8px 0 0;max-width:60ch}
.gerichte{margin:14px 0 0;padding:0;list-style:none;display:grid;column-gap:48px}
@media(min-width:900px){.gerichte{grid-template-columns:1fr 1fr}}
.gericht{display:grid;grid-template-columns:2.6rem 1fr auto;column-gap:10px;padding:16px 0;border-bottom:1px dotted var(--linie);align-items:baseline}
.gericht .nr{color:var(--gold);font:500 .95rem var(--text)}
.gericht .name{font:400 1.2rem/1.25 var(--kopf)}
.gericht .name sup{font:500 .7rem var(--text);color:var(--grau);margin-left:5px;vertical-align:.45em;letter-spacing:.02em}
.gericht .preis{font-weight:700;white-space:nowrap;color:var(--blau)}
.gericht p{grid-column:2/4;margin:4px 0 0;color:var(--grau);font-size:1rem;line-height:1.45}
.gericht.ohne{grid-template-columns:1fr auto}
.gericht.ohne .nr{display:none}
.gericht.ohne p{grid-column:1/3}
.legende{color:var(--grau);font-size:.95rem;padding:36px 0 56px;max-width:70ch}

/* Unterseiten */
.recht{max-width:720px;margin:0 auto;padding:40px 20px 64px}
.recht h1{font-size:2.4rem;color:var(--blau);margin-bottom:18px}
.recht h2{font-size:1.4rem;margin:26px 0 6px;color:var(--blau)}
.recht mark{background:var(--hellgold);padding:0 4px}

/* Reservierung: Bestätigung und Fehler (wie Limani) */
.resok{padding:32px 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 h3{font-size:1.9rem;margin:0;color:var(--blau)}
.resok p{margin:0;max-width:34ch}
.resok .okwer{font-weight:700;background:var(--marmor);padding:10px 14px;border-radius:4px}
.resok .klein{color:var(--grau);font-size:.9rem}
.resok .go{margin-top:8px;min-width:180px;padding:0 24px}
#resmsg.fehler{background:#fbe9eb;color:#7a1622;border:1px solid #e3b3ba;border-left:3px solid #7a1622}

/* Bausteine aus der Plattform: verborgen, bis die Team-App sie freischaltet */
.kn[hidden],[data-pause][hidden],[data-res][hidden]{display:none!important}