/* Taverne Sonnenblick (PM-161) – Farben gemessen am 24.10.2026 aus dem Druckmaterial (Gutschein DIN lang, Briefumschläge, Logo) */
@font-face{font-family:"Cinzel";src:url(fonts/cinzel-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Cinzel";src:url(fonts/cinzel-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}
/* Cinzel hat kein Griechisch: griechische Überschriften in GFS Didot */
@font-face{font-family:"Didot GR";src:url(fonts/gfs-didot-greek-400-normal.woff2) format("woff2");font-weight:400 700;font-display:swap;unicode-range:U+0370-03FF,U+1F00-1FFF}
@font-face{font-family:"Fira Sans";src:url(fonts/fira-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Fira Sans";src:url(fonts/fira-sans-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"Fira Sans";src:url(fonts/fira-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Fira Sans";src:url(fonts/fira-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fira Sans";src:url(fonts/fira-sans-greek-400-normal.woff2) format("woff2");font-weight:400;font-display:swap;unicode-range:U+0370-03FF,U+1F00-1FFF}
@font-face{font-family:"Fira Sans";src:url(fonts/fira-sans-greek-500-normal.woff2) format("woff2");font-weight:500;font-display:swap;unicode-range:U+0370-03FF,U+1F00-1FFF}
@font-face{font-family:"Fira Sans";src:url(fonts/fira-sans-greek-600-normal.woff2) format("woff2");font-weight:600;font-display:swap;unicode-range:U+0370-03FF,U+1F00-1FFF}
@font-face{font-family:"Great Vibes";src:url(fonts/great-vibes-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --wein:#660001;      /* Logo-Schrift (Logo-PNG, 37 % der Fläche) – Hauptfarbe, Überschriften auf Papier */
  --bordeaux:#500304;  /* Fläche Gutschein-Vorderseite – Flächen hinter heller Schrift */
  --tief:#3b0001;      /* Rand/Schatten Gutschein – Fuß, dunkelste Fläche */
  --sonne:#f8be38;     /* Sonne im Logo – Akzent, Knöpfe auf Dunkel */
  --gold:#e8c060;      /* Schrift „GUTSCHEIN“ und Linien auf Bordeaux – Text auf Dunkel */
  --bronze:#995f3a;    /* Mäander und Olivenzweige auf der Gutschein-Rückseite – Linien, große Schrift auf Papier */
  --bronze-d:#7a4524;  /* dunklere Bronze für kleine Schrift auf Papier (7,1:1) */
  --papier:#f9f4e9;    /* Papier der Gutschein-Rückseite – heller Grund */
  --tinte:#2b0d0b;     /* Fließtext auf Papier (16,4:1) */
  --grau:#6b5a52;      /* Nebentext auf Papier (6,0:1) */
  --kopf:"Cinzel","Didot GR",Georgia,serif;
  --text:"Fira Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --zier:"Great Vibes","Didot GR",cursive;
}
*{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(--tinte);font:400 17px/1.6 var(--text)}
img{max-width:100%;height:auto;display:block}
[hidden]{display:none!important}
a{color:inherit}
:focus-visible{outline:3px solid var(--sonne);outline-offset:3px;border-radius:4px}
.wrap{width:min(1160px,100% - 40px);margin:0 auto}
h1,h2,h3{font-family:var(--kopf);font-weight:700;line-height:1.12;margin:0 0 .5em;letter-spacing:.02em}
h2{font-size:clamp(28px,4.4vw,44px);color:var(--wein)}
h3{font-size:20px;color:var(--wein)}
p{margin:0 0 1em}
.ober{font:600 13px/1.3 var(--text);letter-spacing:.14em;text-transform:uppercase;color:var(--bronze-d);margin:0 0 12px}
.draft{background:#ffe66b;color:#3a2a00;text-align:center;font:600 13px/1.4 var(--text);padding:6px 12px}

/* Mäanderband (griechischer Schlüssel) als Kachel, Farbe über currentColor */
.maeander{height:14px;color:var(--bronze);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='M0 13h28M1 13V1h12v9H5V5h4' fill='none' stroke='%23995f3a' stroke-width='1.6'/%3E%3Cpath d='M15 13V1h12v9h-8V5h4' fill='none' stroke='%23995f3a' stroke-width='1.6'/%3E%3C/svg%3E") repeat-x left center/28px 14px}
.maeander.gold{background-image: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='M0 13h28M1 13V1h12v9H5V5h4' fill='none' stroke='%23e8c060' stroke-width='1.6'/%3E%3Cpath d='M15 13V1h12v9h-8V5h4' fill='none' stroke='%23e8c060' stroke-width='1.6'/%3E%3C/svg%3E")}

/* Knöpfe */
.kn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 22px;border-radius:999px;border:1.5px solid currentColor;background:none;color:inherit;font:600 16px/1.2 var(--text);text-decoration:none;cursor:pointer}
.kn:hover{background:rgba(232,192,96,.12)}
.kn.voll{background:var(--sonne);border-color:var(--sonne);color:var(--tief)}
.kn.voll:hover{background:#ffd062}
.kn.wein{background:var(--wein);border-color:var(--wein);color:var(--papier)}
.kn.wein:hover{background:var(--bordeaux)}
.knoepfe{display:flex;flex-wrap:wrap;gap:10px}

/* Kopfleiste */
.bar{position:sticky;top:0;z-index:50;background:var(--tief);color:var(--papier);border-bottom:1px solid rgba(232,192,96,.35)}
.bar .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.marke img{width:150px}
.bar nav{display:flex;align-items:center;gap:6px}
.bar .nl{display:none;padding:10px 10px;text-decoration:none;font-weight:500;font-size:15px;color:var(--papier)}
.bar .nl:hover{color:var(--gold)}
.bar .res{min-height:42px;padding:9px 16px;font-size:15px}
.sprache{position:relative}
.sprache>button{background:none;border:1px solid rgba(249,244,233,.4);color:var(--papier);border-radius:999px;padding:8px 12px;font:600 14px var(--text);cursor:pointer;min-height:42px}
.sprache ul{position:absolute;right:0;top:calc(100% + 6px);list-style:none;margin:0;padding:6px;background:var(--papier);border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);min-width:150px}
.sprache ul button{display:block;width:100%;text-align:left;background:none;border:0;padding:10px 12px;font:500 15px var(--text);color:var(--tinte);cursor:pointer;border-radius:6px}
.sprache ul button:hover,.sprache ul button[aria-current=true]{background:#f0e6d2}
@media (min-width:980px){.bar .nl{display:inline-block}.marke img{width:170px}}

/* Kopfbereich mit Sonnenbogen */
.held{background:radial-gradient(120% 90% at 75% 100%,#6a0a0b 0,var(--bordeaux) 45%,var(--tief) 100%);color:var(--papier);overflow:hidden;position:relative}
.held .wrap{display:grid;gap:34px;padding:42px 0 0}
.held .ober{color:var(--gold)}
.held h1{font-size:clamp(34px,5.8vw,58px);color:var(--papier);margin-bottom:18px}
.held h1 em{display:block;font-style:normal;color:var(--gold)}
.held .satz{font-size:18px;max-width:36em;color:#f3e6d6}
.heute{display:inline-flex;align-items:center;gap:10px;margin:4px 0 22px;padding:8px 14px;border-radius:999px;background:rgba(0,0,0,.22);font-weight:500;font-size:15px}
.heute i{width:10px;height:10px;border-radius:50%;background:#7bd389;box-shadow:0 0 0 4px rgba(123,211,137,.25)}
.heute.zu i{background:#e9a0a0;box-shadow:0 0 0 4px rgba(233,160,160,.2)}
.held .knoepfe{margin-bottom:8px}
.held .kn{color:var(--papier)}
.held .kn.voll{color:var(--tief)}

.bogen{position:relative;justify-self:center;width:min(440px,92%);aspect-ratio:4/4.6;margin-top:6px}
.bogen .strahlen{position:absolute;left:50%;bottom:0;width:190%;aspect-ratio:2/1;transform:translateX(-50%);border-radius:999px 999px 0 0;
  background:repeating-conic-gradient(from -90deg at 50% 100%,rgba(248,190,56,.20) 0 2.2deg,transparent 2.2deg 9deg);
  -webkit-mask:radial-gradient(circle at 50% 100%,#000 30%,transparent 70%);mask:radial-gradient(circle at 50% 100%,#000 30%,transparent 70%);
  animation:aufgang 1.6s ease-out both}
@keyframes aufgang{from{opacity:0;transform:translate(-50%,12%)}to{opacity:1;transform:translate(-50%,0)}}
.bogen .ring{position:absolute;inset:0;border-radius:999px 999px 0 0;padding:16px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M1 23V1h20v16H7V7h8v6' fill='none' stroke='%23e8c060' stroke-width='1.7'/%3E%3C/svg%3E") 0 0/24px 24px,var(--wein);
  box-shadow:0 0 0 2px var(--gold),0 0 0 8px var(--bordeaux),0 0 0 9.5px rgba(232,192,96,.7)}
.bogen .innen{height:100%;border-radius:999px 999px 0 0;overflow:hidden;background:var(--tief);box-shadow:inset 0 0 0 2px var(--gold)}
.bogen .innen img{width:100%;height:100%;object-fit:cover}
.horizont{position:relative;height:56px;margin-top:-1px;background:var(--tief)}
.horizont svg{position:absolute;left:0;right:0;top:0;width:100%;height:56px}
@media (min-width:900px){.held .wrap{grid-template-columns:1.1fr .9fr;align-items:end;padding-top:64px}.bogen{margin-bottom:0}}

/* Platzhalter für Fotos (bis zum Fototermin) */
.platz{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;height:100%;min-height:180px;padding:18px;
  background:repeating-linear-gradient(135deg,#efe3cc 0 14px,#e7d7ba 14px 28px);color:var(--bronze-d);font:600 14px/1.35 var(--text);border:2px dashed var(--bronze)}
.platz span{background:var(--papier);padding:8px 12px;border-radius:6px;max-width:16em}
.bogen .platz{background:repeating-linear-gradient(135deg,#5b0a0c 0 14px,#4a0607 14px 28px);color:var(--gold);border-color:rgba(232,192,96,.6);border-radius:999px 999px 0 0}
.bogen .platz span{background:var(--tief)}

/* Küche: Liste statt Kacheln */
.kueche{padding:72px 0 40px}
.kueche .kopf{max-width:640px;margin-bottom:28px}
.teller{list-style:none;margin:0;padding:0;display:grid;gap:0}
.teller li{display:grid;grid-template-columns:62px 1fr;gap:4px 18px;align-items:start;padding:22px 0;border-top:1px solid #e3d5bd}
.teller li:last-child{border-bottom:1px solid #e3d5bd}
.teller .nr{font:400 34px/1 "Didot GR",var(--kopf);color:var(--bronze);padding-top:2px}
.teller h3{margin:0 0 4px;font-size:21px}
.teller p{margin:0;color:var(--grau)}
.teller .bild{grid-column:1/-1;margin-top:12px;aspect-ratio:16/9;border-radius:999px 999px 6px 6px;overflow:hidden}
@media (min-width:760px){.teller{grid-template-columns:1fr 1fr;column-gap:48px}.teller li:nth-last-child(2){border-bottom:1px solid #e3d5bd}}

/* Speisekarte als Verzeichnis */
.verz{padding:56px 0 64px}
.verz .wrap{display:grid;gap:26px}
.verz ol{list-style:none;margin:0;padding:0;columns:1;column-gap:40px}
.verz li{break-inside:avoid}
.verz ol a{display:flex;gap:14px;align-items:baseline;padding:12px 0;border-bottom:1px dotted #cdb894;text-decoration:none}
.verz ol a span{font:600 14px var(--text);color:var(--bronze);min-width:22px}
.verz ol a b{font:700 19px/1.3 var(--kopf);color:var(--wein)}
.verz ol a:hover b{text-decoration:underline;text-decoration-color:var(--bronze)}
@media (min-width:760px){.verz ol{columns:2}}
@media (min-width:980px){.verz .wrap{grid-template-columns:.8fr 1.2fr}}

/* Abholen */
.abholen{background:var(--bordeaux);color:var(--papier);padding:64px 0}
.abholen h2{color:var(--papier)}
.abholen h2 em{font-style:normal;color:var(--gold)}
.abholen .ober{color:var(--gold)}
.schritte{list-style:none;margin:26px 0;padding:0;display:grid;gap:18px;counter-reset:s}
.schritte li{counter-increment:s;display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.schritte li::before{content:counter(s);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--gold);color:var(--gold);font:700 18px var(--kopf)}
.schritte b{display:block;font-weight:600}
.schritte span{color:#ecd9c6}
.abholen .hinweis{font-size:15px;color:#ecd9c6}
.abholen .kn{color:var(--papier)}
.abholen .kn.voll{color:var(--tief)}
.abholen .wrap{display:grid;gap:34px}
.abholort{margin:0}
.abholort img{border-radius:999px 999px 8px 8px;aspect-ratio:4/4.2;object-fit:cover;width:100%;box-shadow:0 0 0 2px var(--gold),0 0 0 8px var(--bordeaux),0 0 0 9.5px rgba(232,192,96,.6)}
.abholort figcaption{margin-top:14px;font-size:15px;color:#ecd9c6;text-align:center}
@media (min-width:980px){.abholen .wrap{grid-template-columns:1.4fr .8fr;align-items:center}.schritte{grid-template-columns:1fr}}
@media (min-width:640px) and (max-width:979px){.schritte{grid-template-columns:repeat(3,1fr)}}

/* Gastraum */
.raum{padding:72px 0}
.raum .wrap{display:grid;gap:28px}
.raum .fotos{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:auto auto;gap:12px}
.raum .fotos>*{border-radius:8px;overflow:hidden}
.raum .fotos img{width:100%;height:100%;object-fit:cover}
.raum .fotos .gross{grid-row:1/3;aspect-ratio:3/4}
.raum .fotos .klein{aspect-ratio:4/3}
.zier{font:400 clamp(30px,5vw,44px)/1.1 var(--zier);color:var(--bronze);margin:0 0 6px}
@media (min-width:900px){.raum .wrap{grid-template-columns:1fr 1.1fr;align-items:center}}

/* Gutschein */
.gutschein{padding:24px 0 80px}
.karte{position:relative;display:grid;gap:22px;padding:40px 26px;background:var(--papier);border:1.5px solid var(--bronze);outline:1px solid var(--bronze);outline-offset:-8px;box-shadow:0 18px 40px rgba(59,0,1,.12)}
.karte::before{content:"";position:absolute;inset:-1px;pointer-events:none;background:
  linear-gradient(var(--bronze),var(--bronze)) left 10px top 10px/22px 2px no-repeat,linear-gradient(var(--bronze),var(--bronze)) left 10px top 10px/2px 22px no-repeat,
  linear-gradient(var(--bronze),var(--bronze)) right 10px bottom 10px/22px 2px no-repeat,linear-gradient(var(--bronze),var(--bronze)) right 10px bottom 10px/2px 22px no-repeat}
.karte .logo{width:170px}
.karte h2 .z{display:block;font:400 clamp(34px,5vw,48px)/1.1 var(--zier);color:var(--bronze);letter-spacing:0;margin-top:4px}
.betraege{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 18px;padding:0;list-style:none}
.betraege li{padding:8px 16px;border:1px solid var(--bronze);border-radius:999px;font:700 17px var(--kopf);color:var(--wein)}
@media (min-width:860px){.karte{grid-template-columns:220px 1fr;align-items:center;padding:48px 52px}}

/* Öffnungszeiten und Kontakt */
.info{background:#f2e8d6;padding:64px 0}
.info .wrap{display:grid;gap:44px}
.zeiten{width:100%;border-collapse:collapse;font-size:17px}
.zeiten th,.zeiten td{text-align:left;padding:11px 8px;border-bottom:1px solid #dcc9a8;vertical-align:top}
.zeiten th{font-weight:500;width:42%}
.zeiten tr.jetzt th,.zeiten tr.jetzt td{font-weight:600;color:var(--wein)}
.zeiten tr.jetzt th::after{content:attr(data-heute);margin-left:8px;padding:2px 8px;border-radius:999px;background:var(--wein);color:var(--papier);font-size:12px;font-weight:600;letter-spacing:.04em;vertical-align:2px}
.zeiten td small{display:block;color:var(--grau);font-size:14px}
.feiertag{font-size:15px;color:var(--grau);margin-top:12px}
address{font-style:normal;font-size:18px;line-height:1.7;margin-bottom:20px}
address a{color:var(--wein);font-weight:500}
.wege{display:flex;flex-wrap:wrap;gap:10px}
.schild{margin-top:26px;border-radius:8px;aspect-ratio:16/9;object-fit:cover;width:100%}
@media (min-width:900px){.info .wrap{grid-template-columns:1fr 1fr}}

/* Fuß */
.fuss{background:var(--tief);color:#ecd9c6;text-align:center;padding:48px 0 36px;font-size:15px}
.fuss .logo{width:230px;margin:0 auto 16px}
.fuss .maeander{max-width:280px;margin:0 auto 22px}
.fuss a{color:#f7e7cc}
.fuss .klein{font-size:14px;margin:6px 0}

/* Reservierungsdialog */
.resd{border:0;border-radius:14px;padding:0;width:min(520px,100% - 24px);background:var(--papier);color:var(--tinte);box-shadow:0 24px 60px rgba(0,0,0,.35)}
.resd::backdrop{background:rgba(30,0,0,.6)}
.resd form{padding:24px;display:grid;gap:12px}
.resd h3{font-size:24px;margin:0}
.resd label{display:grid;gap:4px;font-size:14px;font-weight:500}
.resd input,.resd select,.resd textarea{font:400 16px var(--text);padding:11px 12px;border:1px solid #c9b48f;border-radius:8px;background:#fff;color:var(--tinte);width:100%}
.resd .row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.resd .go{background:var(--wein);color:var(--papier);border:0;border-radius:999px;padding:13px;font:600 16px var(--text);cursor:pointer}
.resd .cx{background:none;border:0;color:var(--grau);font:500 15px var(--text);cursor:pointer;padding:6px}
.resd small{color:var(--grau);font-size:13px;line-height:1.45}
#resmsg:not(:empty){padding:10px 12px;border-radius:8px;background:#f0e3c8;font-weight:500}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}

/* Unterseiten (Impressum, Datenschutz) */
.seite{padding:56px 0 72px}
.seite .wrap{max-width:820px}
.seite h1{font-size:clamp(34px,7vw,52px);margin-bottom:14px}
.seite .maeander{max-width:260px;margin:0 0 26px}
.seite h2{font-size:22px;margin:30px 0 8px}
.seite p{margin:.5rem 0}
.platzhalter{background:#fff3b0;padding:1px 4px}
.zurueck{display:inline-block;margin-top:30px;color:var(--wein);font-weight:500}

/* Speisekarte */
.karte-seite{padding-bottom:40px}
.karte-seite .wrap{max-width:980px}
.karte-seite .intro{font-size:18px;max-width:40em}
.karte-seite .knoepfe{margin:18px 0 8px}
.reiter{position:sticky;top:68px;z-index:20;background:var(--papier);border-top:1px solid #e3d5bd;border-bottom:1px solid #e3d5bd;margin:26px 0 8px}
.reiter .wrap{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:10px 0}
.reiter .wrap::-webkit-scrollbar{display:none}
.reiter a{flex:none;padding:8px 14px;border-radius:999px;text-decoration:none;font:500 15px var(--text);color:var(--tinte);border:1px solid transparent;white-space:nowrap}
.reiter a:hover{border-color:var(--bronze)}
.reiter a.on{background:var(--wein);color:var(--papier)}
.gruppe{padding-top:34px;scroll-margin-top:140px}
.gruppe h2{font-size:clamp(26px,4vw,34px);margin-bottom:6px}
.gruppe h2 small{display:block;font:400 18px var(--zier);color:var(--bronze);letter-spacing:0;margin-top:4px}
.gruppe .hinweis{color:var(--grau);font-size:15px;margin:4px 0 6px}
.karte-liste{list-style:none;margin:10px 0 0;padding:0}
.karte-liste li{display:grid;grid-template-columns:44px 1fr auto;gap:2px 12px;padding:14px 0;border-bottom:1px dotted #cdb894}
.karte-liste .nr{font:600 15px var(--text);color:var(--bronze-d);padding-top:2px}
.karte-liste h3{font:600 17px/1.35 var(--text);color:var(--tinte);margin:0;letter-spacing:0}
.karte-liste p{margin:2px 0 0;color:var(--grau);font-size:15px;line-height:1.45}
.karte-liste .az{display:inline-block;margin-top:4px;font-size:12.5px;color:var(--bronze-d);letter-spacing:.03em}
.karte-liste .p{text-align:right;white-space:nowrap;font-size:16px}
.karte-liste .p b{font-weight:600;color:var(--wein)}
.karte-liste .menge{color:var(--grau);font-size:14px}
.karte-liste .pv{display:block}
.legende{margin-top:46px;padding:26px 22px;background:#f2e8d6;border-radius:10px}
.legende h2{font-size:26px}
.legende h3{font:600 16px var(--text);margin:14px 0 6px;color:var(--wein);letter-spacing:0}
.legende ul{list-style:none;margin:0;padding:0;font-size:14.5px;line-height:1.6}
.legende .spalten{display:grid;gap:10px 30px}
@media (min-width:760px){.legende .spalten{grid-template-columns:1.4fr 1fr}}
@media (max-width:420px){.karte-liste li{grid-template-columns:34px 1fr auto;gap:2px 8px}}