/* PM-005 Athen Hirschaid – Markenfarben gemessen am 28.10.2026 (Kundenakte, Abschnitt „Markenfarben“) */
@font-face{font-family:"GFS Didot";font-style:normal;font-weight:400;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+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-style:normal;font-weight:400;font-display:swap;src:url(fonts/gfs-didot-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:Commissioner;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/commissioner-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+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Commissioner;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/commissioner-latin-ext-400-normal.woff2) format("woff2");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:Commissioner;font-style:normal;font-weight:400;font-display:swap;src:url(fonts/commissioner-greek-400-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:Commissioner;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/commissioner-latin-500-normal.woff2) format("woff2");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;font-style:normal;font-weight:500;font-display:swap;src:url(fonts/commissioner-greek-500-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
@font-face{font-family:Commissioner;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/commissioner-latin-600-normal.woff2) format("woff2");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;font-style:normal;font-weight:600;font-display:swap;src:url(fonts/commissioner-greek-600-normal.woff2) format("woff2");unicode-range:U+0370-03FF}
:root{
  --blau:#00142e;      /* Nachtblau: Logo-Buchstaben (Median) */
  --blau2:#112943;     /* Blau Fläche: helle Seite der Logo-Buchstaben */
  --gold:#eab42b;      /* Gold: Logo-Goldkante – nur auf Blau oder als Linie */
  --gold2:#fcdc7e;     /* Gold hell: Logo-Glanzlicht – Text auf Blau */
  --rot:#98444a;       /* Bordeaux: Tischläufer im Gastraum (Foto 25.07.2026) */
  --leinen:#f6f3ee;    /* Leinen: Tischdecke #eee3d1, aufgehellt */
  --linie:#ddd5c7;
  --grau:#4a5262;
  --serif:"GFS Didot",Didot,"Bodoni 72",Georgia,serif;
  --sans:Commissioner,system-ui,-apple-system,"Segoe UI",sans-serif;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;scroll-padding-top:84px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--leinen);color:var(--blau);font:400 17px/1.6 var(--sans);-webkit-text-size-adjust:100%}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:4px}
.hell :focus-visible{outline-color:var(--rot)}
.wrap{width:min(1180px,100% - 32px);margin:0 auto}
.entwurf{background:var(--gold2);color:var(--blau);text-align:center;font:600 13px/1 var(--sans);padding:8px 10px;letter-spacing:.04em}
h1,h2,h3{font-family:var(--serif);font-weight:400;line-height:1.15;margin:0}
.titel{margin-bottom:28px;max-width:640px}
.titel h2{font-size:clamp(30px,6vw,44px)}
.titel p{margin:12px 0 0;color:inherit;opacity:.85}
.klein{font-size:14px;opacity:.85}

/* Kopf */
.kopf{position:sticky;top:0;z-index:20;background:var(--blau);color:var(--leinen);border-bottom:1px solid rgba(234,180,43,.35)}
.kopf .wrap{display:flex;align-items:center;gap:18px;min-height:68px}
.kopf .marke img{width:132px}
.kopf nav{display:none;gap:22px;margin-left:auto;font-size:15px}
.kopf nav a{text-decoration:none;padding:6px 0;border-bottom:1px solid transparent}
.kopf nav a:hover{border-bottom-color:var(--gold)}
.rechts{display:flex;align-items:center;gap:10px;margin-left:auto}
.sprache{position:relative}
#lgbtn{background:none;border:1px solid rgba(246,243,238,.45);color:inherit;font:600 13px var(--sans);border-radius:999px;min-width:44px;min-height:40px;cursor:pointer}
#lgliste{position:absolute;right:0;top:46px;margin:0;padding:6px;list-style:none;background:var(--leinen);color:var(--blau);border-radius:12px;box-shadow:0 10px 30px rgba(0,0,0,.35);min-width:150px}
#lgliste button{display:block;width:100%;text-align:left;background:none;border:0;font:16px var(--sans);padding:10px 12px;border-radius:8px;cursor:pointer;color:inherit}
#lgliste button[aria-current="true"]{background:#e9e2d4;font-weight:600}
.res-kurz{background:var(--gold);color:var(--blau);border:0;border-radius:999px;font:600 14px var(--sans);padding:0 16px;min-height:40px;cursor:pointer}
@media (min-width:980px){.kopf nav{display:flex}.rechts{margin-left:18px}.kopf .marke img{width:150px}}

/* Knöpfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.kn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid currentColor;background:none;color:inherit;font:600 16px var(--sans);text-decoration:none;cursor:pointer}
.kn.voll{background:var(--gold);border-color:var(--gold);color:var(--blau)}
.hell .kn.voll{background:var(--blau);border-color:var(--blau);color:var(--leinen)}
.kn[hidden]{display:none}

/* Held */
.held{background:var(--blau);color:var(--leinen);padding:28px 0 56px}
.held .wrap{display:grid;gap:30px}
.bogen{max-width:430px;margin:0 auto;width:100%;border-radius:999px 999px 18px 18px;overflow:hidden;border:2px solid var(--gold);box-shadow:0 0 0 8px var(--blau),0 0 0 9px rgba(234,180,43,.4)}
.bogen img{aspect-ratio:3/4;object-fit:cover;width:100%}
h1{font-size:clamp(46px,11vw,76px);color:var(--leinen)}
h1 span{display:block;font:500 15px/1.4 var(--sans);letter-spacing:.06em;color:var(--gold2);margin-top:10px}
.satz{font-size:19px;margin:18px 0 0;max-width:34ch}
.heute{display:inline-flex;align-items:center;gap:10px;margin:22px 0 0;font-weight:600;color:var(--gold2)}
.heute::before{content:"";width:10px;height:10px;border-radius:50%;background:#5fc27e;box-shadow:0 0 0 4px rgba(95,194,126,.18)}
.heute.zu::before{background:var(--rot);box-shadow:0 0 0 4px rgba(152,68,74,.25)}
@media (min-width:900px){.held{padding:56px 0 80px}.held .wrap{grid-template-columns:5fr 6fr;align-items:center;gap:64px}.bogen{margin:0}}

/* Ägäis-Karte */
.reise{background:var(--blau2);color:var(--leinen);padding:64px 0;border-top:1px solid rgba(234,180,43,.25)}
.reise .titel p{color:var(--leinen)}
.reise-feld{display:grid;gap:26px}
.karte-ag{position:relative;aspect-ratio:100/115;max-width:520px;width:100%;margin:0 auto}
.karte-ag svg{position:absolute;inset:0;width:100%;height:100%}
.wellen path{fill:none;stroke:rgba(252,220,126,.28);stroke-width:.35;stroke-linecap:round}
.route{fill:none;stroke:var(--gold);stroke-width:.4;stroke-dasharray:1.2 1.4;opacity:.8}
.punkte circle{fill:var(--gold)}
.ort{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:12px;color:var(--leinen);font:400 clamp(15px,3.6vw,21px)/1 var(--serif);cursor:pointer;white-space:nowrap}
.ort span{display:inline-block;padding:7px 12px 6px;border:1px solid rgba(252,220,126,.45);border-radius:999px;background:rgba(0,20,46,.85);transition:background .2s,color .2s}
.ort:hover span{border-color:var(--gold)}
.ort[aria-pressed="true"] span{background:var(--gold);color:var(--blau);border-color:var(--gold)}
.reise-info{border:1px solid rgba(234,180,43,.45);border-radius:18px;padding:24px;background:var(--blau);align-self:center}
.reise-info small{display:block;color:var(--gold2);font-weight:600;letter-spacing:.05em}
.reise-info b{display:block;font:400 28px/1.2 var(--serif);margin-top:6px}
.reise-info em{display:block;font-style:normal;font-weight:600;color:var(--gold2);font-size:20px;margin-top:6px}
.reise-info span{display:block;margin-top:10px;opacity:.9}
.reise-info a{display:inline-block;margin-top:18px;color:var(--gold2);font-weight:600}
@media (min-width:900px){.reise{padding:90px 0}.reise-feld{grid-template-columns:3fr 2fr;gap:56px}}

/* Küche */
.hell{background:var(--leinen);color:var(--blau)}
.kueche{padding:64px 0 40px}
.reihe{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.reihe figure{margin:0}
.reihe img{aspect-ratio:3/4;object-fit:cover;border-radius:14px;width:100%}
.reihe figcaption{font-size:15px;margin-top:8px;font-weight:500}
@media (min-width:900px){.reihe{grid-template-columns:repeat(4,1fr);gap:18px}}
.empfehlung{display:grid;gap:0;margin-top:40px;border-top:1px solid var(--linie)}
.empfehlung div{display:grid;grid-template-columns:1fr auto;gap:2px 16px;padding:16px 0;border-bottom:1px solid var(--linie)}
.empfehlung b{font:400 22px/1.25 var(--serif)}
.empfehlung em{font-style:normal;font-weight:600;color:var(--rot);white-space:nowrap}
.empfehlung span{grid-column:1/-1;color:var(--grau);font-size:15px}
@media (min-width:900px){.empfehlung{grid-template-columns:1fr 1fr;column-gap:48px}}

/* Verzeichnis */
.verz-teil{padding:40px 0 72px}
.verzeichnis{list-style:none;margin:0;padding:0;columns:1;column-gap:48px}
.verzeichnis li{break-inside:avoid}
.verzeichnis a{display:flex;align-items:baseline;gap:10px;padding:12px 0;text-decoration:none;border-bottom:1px solid var(--linie)}
.verzeichnis b{font:400 20px var(--serif)}
.verzeichnis i{flex:1;border-bottom:1px dotted #b9ad97;transform:translateY(-4px)}
.verzeichnis small{color:var(--grau);font-size:14px;white-space:nowrap}
.verzeichnis a:hover b{color:var(--rot)}
@media (min-width:760px){.verzeichnis{columns:2}}

/* Feiern */
.feiern{background:var(--blau);color:var(--leinen);padding:64px 0}
.feiern .wrap{display:grid;gap:34px}
.feiern p{max-width:52ch}
.gut{margin-top:36px;padding-top:26px;border-top:1px solid rgba(234,180,43,.35)}
.gut h3{font-size:26px;color:var(--gold2)}
.tafeln{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tafeln img{border-radius:14px;aspect-ratio:3/4;object-fit:cover;width:100%}
.tafeln img:first-child{grid-column:1/-1;aspect-ratio:4/3}
@media (min-width:900px){.feiern{padding:90px 0}.feiern .wrap{grid-template-columns:5fr 6fr;align-items:center;gap:64px}.tafeln{grid-template-columns:3fr 2fr}.tafeln img{aspect-ratio:4/3}.tafeln img:first-child{grid-column:auto;grid-row:span 2;aspect-ratio:auto;height:100%}}

/* Zeiten und Kontakt */
.info{padding:64px 0 72px}
.info .wrap{display:grid;gap:48px}
@media (min-width:900px){.info .wrap{grid-template-columns:1fr 1fr;gap:80px}}
.zeiten{width:100%;border-collapse:collapse}
.zeiten th,.zeiten td{text-align:left;padding:12px 0;border-bottom:1px solid var(--linie);font-weight:400;vertical-align:top}
.zeiten td{text-align:right;white-space:pre-line}
.zeiten tr.jetzt th,.zeiten tr.jetzt td{font-weight:600}
.zeiten tr.jetzt th::after{content:attr(data-heute);margin-left:10px;font:600 12px var(--sans);color:var(--leinen);background:var(--rot);padding:3px 8px;border-radius:999px;vertical-align:2px}
.kontakt dl{margin:0;display:grid;gap:16px}
.kontakt dt{font-size:14px;color:var(--grau)}
.kontakt dd{margin:2px 0 0;font-size:18px}

/* Fuß */
.fuss{background:var(--blau);color:var(--leinen);padding:44px 0 56px;font-size:15px;border-top:1px solid rgba(234,180,43,.35)}
.fuss .wrap{display:grid;gap:16px;justify-items:start}
.fuss .marke{width:150px}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 20px}

/* Speisekarte */
.karte-kopf{padding:44px 0 18px}
.karte-kopf h1{color:var(--blau)}
.karte-kopf p{max-width:62ch;color:var(--grau)}
.reiter{position:sticky;top:68px;z-index:10;background:var(--leinen);border-bottom:1px solid var(--linie)}
.reiter .wrap{display:flex;gap:6px;overflow-x:auto;padding:10px 0;scrollbar-width:none}
.reiter a{flex:none;text-decoration:none;font-size:14px;font-weight:500;padding:8px 14px;border-radius:999px;border:1px solid var(--linie);background:#fff}
.reiter a.on{background:var(--blau);color:var(--leinen);border-color:var(--blau)}
.karte-inhalt{padding:20px 0 70px}
.gruppe{padding-top:28px}
.gruppe h2{font-size:clamp(28px,5.5vw,38px);padding-bottom:10px;border-bottom:2px solid var(--gold)}
.notiz{margin:10px 0 0;font-size:15px;color:var(--grau)}
.pos{list-style:none;margin:0;padding:0}
.pos li{display:grid;grid-template-columns:42px 1fr auto;gap:12px;padding:13px 0;border-bottom:1px solid var(--linie)}
.pos .nr{color:var(--rot);font-weight:600;font-size:14px;padding-top:2px}
.pos b{font-weight:600}
.pos sup{font-size:11px;color:var(--grau);margin-left:3px;font-weight:500}
.pos .was span{display:block;color:var(--grau);font-size:15px}
.pos .wie{text-align:right;white-space:nowrap}
.pos .wie small{display:block;color:var(--grau);font-size:13px}
.pos em{font-style:normal;font-weight:600}
@media (min-width:900px){.gruppe .pos{columns:2;column-gap:48px}.pos li{break-inside:avoid}}
.legende{margin-top:44px;padding:24px;border-radius:16px;background:#fff;border:1px solid var(--linie)}
.legende h2{font-size:26px}
.legende ul{list-style:none;padding:0;margin:14px 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px 20px;font-size:15px}
.legende p{margin:0;color:var(--grau);font-size:15px}

/* Recht */
.recht{padding:44px 0 70px}
.recht h1{color:var(--blau);font-size:clamp(38px,8vw,54px);margin-bottom:12px}
.recht h2{font:600 17px var(--sans);margin:26px 0 6px}
.recht p{margin:0;max-width:72ch}
.recht .wrap{max-width:820px}

/* Reservierung (Dialog aus der Standardvorlage) */
dialog{border:0;border-radius:20px;padding:0;width:min(520px,100% - 24px);max-height:calc(100svh - 24px);background:var(--leinen);color:var(--blau)}
dialog::backdrop{background:rgba(0,20,46,.7)}
#resform,.resok{padding:24px;display:grid;gap:12px}
#resform h2,.resok h2{font-size:30px}
#resform label{display:grid;gap:4px;font-size:14px;font-weight:500}
#resform .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
#resform input,#resform select,#resform textarea{font:16px var(--sans);padding:11px 12px;border:1px solid #c9bfae;border-radius:10px;background:#fff;color:var(--blau);min-height:46px;width:100%}
#resform .go,.resok .go{background:var(--blau);color:var(--leinen);border:0;border-radius:999px;font:600 16px var(--sans);min-height:50px;cursor:pointer}
#resform .cx{background:none;border:1px solid var(--blau);color:var(--blau);border-radius:999px;font:600 15px var(--sans);min-height:46px;cursor:pointer}
#resform small,.resok .klein{color:var(--grau)}
#resmsg{margin:0;font-weight:500}
#resmsg.fehler{color:#a3262f}
.hp{position:absolute;left:-9999px}
.resok{text-align:center;justify-items:center}
.resok .haken{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:var(--blau);color:var(--gold2)}
.okwer{font-weight:600}