/*
 * Speisekarten-Onepager -- aus dem Entwurf vom 2026-09-02 (billoffare/webseite/index.html).
 * Alles unter .sk gekapselt: der Entwurf benutzt dieselben Farbnamen wie style.css
 * (--tinte, --text, --leise, --linie, --grund). Ohne Dunkelschema, mit den Schriften der Seite.
 * Erzeugt mit onepager_bauen.py -- Änderungen am besten im Entwurf und neu erzeugen.
 */
/* Farbmarken. Helles Grundschema auf :root, Dunkel nur als Neudefinition
   derselben Marken - nie eine Farbe ausschliesslich in einem Medienblock. */
.sk{
  --grund:#F6F8F3;      /* klarer, kuehler Grund - kein Creme mehr */
  --blatt:#FFFFFF;      /* Flaechen, die aufliegen */
  --kachel:#E7EFE4;     /* Bandgrund: das Gruen der Fliese, aufgehellt */
  --tinte:#17211B;      /* Ueberschriften */
  --text:#464F48;       /* Fliesstext */
  --leise:#626B64;      /* Beischriften */
  --marke:#26624B;      /* Kachelgruen - alles Bedienbare */
  --marke-tief:#1D5040;
  --marke-hauch:#DCEADF;
  --senf:#E8B33C;       /* Senf der Fliese - Flaeche und Markierung, nie Text */
  --senf-tief:#C9922A;
  --glut:#B0451F;       /* Zustand, der Aufmerksamkeit verlangt */
  --glut-hauch:#FAEAE2;
  --linie:#DDE4D8;
  --linie-fein:#E9EEE5;
  --schatten:0 1px 2px rgba(23,33,27,.05), 0 8px 24px -12px rgba(23,33,27,.20);
  --schatten-tief:0 2px 4px rgba(23,33,27,.06), 0 22px 50px -20px rgba(23,33,27,.30);
  --rund:14px;
  --breite:1160px;
  --display:var(--heading-font);
  --sans:var(--default-font);
  --mono:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
.sk *{box-sizing:border-box}
.sk{
  margin:0; background:var(--grund); color:var(--text);
  font-family:var(--sans); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.sk h1,.sk h2,.sk h3,.sk h4{font-family:var(--display); color:var(--tinte); margin:0; text-wrap:balance; letter-spacing:-.015em}
.sk h1{font-size:clamp(2.5rem,6.2vw,4.35rem); line-height:1.02; font-weight:800; letter-spacing:-.035em}
.sk h2{font-size:clamp(1.8rem,3.4vw,2.7rem); line-height:1.08; font-weight:700; letter-spacing:-.025em}
.sk h3{font-size:1.2rem; line-height:1.3; font-weight:600}
.sk p{margin:0}
.sk a{color:var(--marke); text-decoration-thickness:1px; text-underline-offset:3px}
.sk img{display:block; max-width:100%}
.sk :focus-visible{outline:2.5px solid var(--glut); outline-offset:3px; border-radius:4px}
.sk .bahn{max-width:var(--breite); margin-inline:auto; padding-inline:clamp(20px,5vw,40px)}
.sk .abschnitt{padding-block:clamp(64px,9vw,116px)}/* Beischrift im Duktus der Speisekarte: gesperrt, klein, einfarbig */
.sk .marke-klein{
  font-family:var(--mono); font-size:.72rem; font-weight:500;
  letter-spacing:.16em; text-transform:uppercase; color:var(--leise);
}/* Kopfzeile */
.sk .kopf{
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--grund) 88%, transparent);
  backdrop-filter:blur(14px) saturate(1.3);
  border-bottom:1px solid var(--linie-fein);
}
.sk .kopf-innen{display:flex; align-items:center; justify-content:space-between; gap:24px; height:66px}
.sk .wortmarke{display:flex; align-items:center; gap:10px; font-family:var(--display); font-weight:800; font-size:1.08rem; color:var(--tinte); text-decoration:none; letter-spacing:-.02em}
.sk .wortmarke .punkt{width:11px; height:11px; border-radius:50%; background:var(--senf); flex:none}
.sk .navi{display:flex; gap:26px; align-items:center}
.sk .navi a{color:var(--text); text-decoration:none; font-size:.94rem}
.sk .navi a:hover{color:var(--tinte)}
.sk .navi a[aria-current]{color:var(--tinte); font-weight:600; box-shadow:inset 0 -2.5px 0 var(--senf)}
@media (max-width:900px){
.sk .navi{display:none}}
.sk .knopf{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--sans); font-size:.97rem; font-weight:600; line-height:1;
  padding:13px 22px; border-radius:9px; border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:transform .12s ease, background .16s ease, box-shadow .16s ease;
}
.sk .knopf-voll{background:var(--marke); color:var(--grund); box-shadow:var(--schatten)}
.sk .knopf-voll:hover{background:var(--marke-tief); transform:translateY(-1px)}
.sk .knopf-leer{background:var(--blatt); color:var(--tinte); border-color:var(--linie); box-shadow:var(--schatten)}
.sk .knopf-leer:hover{border-color:var(--leise); transform:translateY(-1px)}
.sk .knopf-klein{padding:10px 16px; font-size:.9rem}/* Aufmacher -- Text auf klarem Grund, das Foto als eigenes Objekt daneben.
   Vorher lag es ganzflaechig darunter und toente die halbe Seite mit. */
.sk .aufmacher-innen{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,64px); align-items:center;
  padding-block:clamp(56px,7vw,92px) clamp(84px,9vw,128px);
}
@media (max-width:920px){
.sk .aufmacher-innen{grid-template-columns:1fr; padding-bottom:clamp(48px,7vw,72px)}}
.sk .aufmacher-text{max-width:38ch}
.sk .aufmacher-text p.anriss{margin-top:22px; font-size:clamp(1.02rem,1.5vw,1.16rem); line-height:1.58; color:var(--text); max-width:34ch}
.sk .aufmacher-tasten{display:flex; flex-wrap:wrap; gap:12px; margin-top:32px}
.sk .aufmacher-fuss{margin-top:26px; display:flex; align-items:center; gap:10px; color:var(--leise); font-size:.88rem}
.sk .aufmacher-schau{position:relative}
.sk .aufmacher-bild{
  border-radius:var(--rund); overflow:hidden; box-shadow:var(--schatten-tief);
  aspect-ratio:1; background:var(--kachel);
}
.sk .aufmacher-bild img{width:100%; height:100%; object-fit:cover}
@media (min-width:921px){
.sk .aufmacher-schau{padding-bottom:150px}
.sk .aufmacher-schau .karte-live{position:absolute; left:-34px; bottom:0; max-width:400px; z-index:2}
}
@media (max-width:920px){
.sk .aufmacher-schau .karte-live{margin:-56px auto 0; position:relative; z-index:2}
}/* Die lebende Karte im Aufmacher */
.sk .karte-live{
  background:var(--blatt); border:1px solid var(--linie); border-radius:var(--rund);
  box-shadow:var(--schatten-tief); padding:22px 24px 18px; max-width:420px; width:100%;
}
.sk .karte-live-kopf{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:14px; border-bottom:1.5px solid var(--tinte)}
.sk .karte-live-kopf strong{font-family:var(--display); font-size:1.06rem; color:var(--tinte); font-weight:700}
.sk .gericht{
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 12px;
  padding:13px 0; border-bottom:1px solid var(--linie-fein);
  transition:opacity .5s ease;
}
.sk .gericht:last-of-type{border-bottom:0}
.sk .gericht .name{font-weight:500; color:var(--tinte); font-size:.99rem}
.sk .gericht .note{grid-column:1/-1; font-size:.83rem; color:var(--leise); line-height:1.45}
.sk .gericht .preis{font-family:var(--mono); font-size:.97rem; color:var(--tinte); font-variant-numeric:tabular-nums; white-space:nowrap; padding:1px 4px; border-radius:5px}
.sk .gericht sup{font-family:var(--mono); font-size:.68em; color:var(--leise); margin-left:3px}
.sk .gericht.aus .wort,.sk .gericht.aus .note{opacity:.42; text-decoration:line-through; text-decoration-thickness:1px}
.sk .gericht.aus .preis{opacity:.42}
.sk .gericht.neu{animation:einblenden .55s ease both}
.sk .wechsel{display:inline-block; padding:1px 7px; border-radius:5px; background:var(--glut-hauch); color:var(--glut); font-family:var(--mono); font-size:.78rem; font-weight:500; margin-left:8px; vertical-align:middle}
.sk .preis.geaendert{animation:aufleuchten 1.8s ease}
@keyframes aufleuchten{0%{background:var(--glut-hauch); color:var(--glut)}66%{background:var(--glut-hauch); color:var(--glut)}100%{background:transparent}}
@keyframes einblenden{from{opacity:0; transform:translateY(-6px)}to{opacity:1; transform:none}}
.sk .karte-live-fuss{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:14px; padding-top:12px; border-top:1px solid var(--linie-fein)}
.sk .puls{display:inline-flex; align-items:center; gap:8px; font-family:var(--mono); font-size:.76rem; color:var(--leise)}
.sk .puls i{width:7px; height:7px; border-radius:50%; background:var(--marke); flex:none; animation:pulsen 2.4s ease-in-out infinite}
@keyframes pulsen{0%,100%{opacity:1}50%{opacity:.28}}
.sk .neuspielen{background:none; border:0; padding:0; font:inherit; font-size:.8rem; color:var(--marke); cursor:pointer; text-decoration:underline; text-underline-offset:3px}/* Was sich aendert */
.sk .kopfzeile{max-width:52ch; margin-bottom:clamp(36px,5vw,56px)}
.sk .kopfzeile p{margin-top:14px; font-size:1.08rem; color:var(--leise)}
.sk .gitter-4{display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:clamp(18px,2.2vw,26px)}
.sk .satz{
  background:var(--blatt); border:1px solid var(--linie-fein); border-radius:var(--rund);
  padding:26px 24px 24px; box-shadow:var(--schatten);
  display:flex; flex-direction:column; gap:12px;
  transition:transform .16s ease, box-shadow .16s ease;
}
.sk .satz:hover{transform:translateY(-2px); box-shadow:var(--schatten-tief)}
.sk .satz svg{width:26px; height:26px; stroke:var(--marke); fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
.sk .satz h3{margin-top:2px}
.sk .satz p{font-size:.96rem; line-height:1.58}
.sk .satz a{font-size:.92rem; font-weight:600; margin-top:auto; padding-top:6px}/* Kanaele: Reiter */
.sk .kanaele{background:var(--kachel); border-block:1px solid var(--linie-fein)}
.sk .reiterleiste{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:30px; border-bottom:1px solid var(--linie)}
.sk .reiter{
  appearance:none; background:none; border:0; border-bottom:2.5px solid transparent;
  font:inherit; font-size:.98rem; font-weight:500; color:var(--leise);
  padding:12px 18px 13px; cursor:pointer; display:flex; align-items:center; gap:9px;
  transition:color .15s ease, border-color .15s ease;
}
.sk .reiter svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}
.sk .reiter:hover{color:var(--tinte)}
.sk .reiter[aria-selected="true"]{color:var(--tinte); font-weight:600; border-bottom-color:var(--senf)}
.sk .tafel{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.05fr); gap:clamp(28px,4.5vw,56px); align-items:center}
@media (max-width:820px){
.sk .tafel{grid-template-columns:1fr}}
.sk .tafel[hidden]{display:none}
.sk .tafel h3{font-size:clamp(1.45rem,2.6vw,2rem); font-weight:700; letter-spacing:-.02em; line-height:1.14}
.sk .tafel .intro{margin-top:16px; font-size:1.06rem; color:var(--text)}
.sk .tafel .weiter{margin-top:14px; font-size:.98rem; color:var(--leise)}
.sk .tafel-bild{border-radius:var(--rund); overflow:hidden; box-shadow:var(--schatten-tief); aspect-ratio:4/3; background:var(--linie)}
.sk .tafel-bild img{width:100%; height:100%; object-fit:cover}/* Geraete */
.sk .geraete{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:clamp(28px,4vw,48px); align-items:start}
.sk .geraet-titel{margin-bottom:20px}
.sk .geraet-titel h3{font-size:1.28rem}
.sk .geraet-titel p{margin-top:8px; color:var(--leise); font-size:.96rem; max-width:38ch}
.sk .handy{
  width:100%; max-width:330px; margin-inline:auto;
  border:9px solid var(--tinte); border-radius:34px; background:var(--blatt);
  box-shadow:var(--schatten-tief); overflow:hidden;
}
.sk .handy-leiste{display:flex; align-items:center; justify-content:space-between; padding:9px 16px 7px; font-family:var(--mono); font-size:.66rem; color:var(--leise); background:var(--blatt)}
.sk .handy-inhalt{padding:4px 18px 22px; min-height:430px}
.sk .gast-kopf{text-align:center; padding:10px 0 16px; border-bottom:1.5px solid var(--tinte)}
.sk .gast-kopf .haus{font-family:var(--display); font-weight:800; font-size:1.15rem; color:var(--tinte); letter-spacing:-.02em}
.sk .gast-kopf .tag{margin-top:5px; font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--marke)}
.sk .gruppe{margin-top:18px}
.sk .gruppe > .titel{font-family:var(--mono); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--leise); padding-bottom:7px; border-bottom:1px solid var(--linie-fein)}
.sk .legende{margin-top:20px; padding-top:12px; border-top:1px solid var(--linie-fein); font-size:.72rem; line-height:1.6; color:var(--leise)}
.sk .legende b{font-family:var(--mono); color:var(--text); font-weight:500}
.sk .app-kopf{display:flex; align-items:baseline; justify-content:space-between; padding:12px 0 14px}
.sk .app-kopf strong{font-family:var(--display); font-size:1.12rem; color:var(--tinte); font-weight:700}
.sk .app-kopf span{font-family:var(--mono); font-size:.7rem; color:var(--leise)}
.sk .zeile{display:flex; align-items:center; justify-content:space-between; gap:12px; padding:13px 0; border-bottom:1px solid var(--linie-fein)}
.sk .zeile .bez{font-size:.94rem; color:var(--tinte)}
.sk .zeile .unter{font-size:.78rem; color:var(--leise); margin-top:2px}
.sk .schalter{width:42px; height:24px; border-radius:12px; background:var(--linie); position:relative; flex:none; transition:background .2s ease}
.sk .schalter::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--blatt); box-shadow:0 1px 3px rgba(0,0,0,.28); transition:transform .2s ease}
.sk .schalter.an{background:var(--glut)}
.sk .schalter.an::after{transform:translateX(18px)}
.sk .feld{margin-top:16px; border:1px solid var(--linie); border-radius:10px; padding:11px 13px; background:var(--kachel)}
.sk .feld .etikett{font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; color:var(--leise)}
.sk .feld .wert{margin-top:5px; font-size:.95rem; color:var(--tinte)}
.sk .sk-chips{display:flex; flex-wrap:wrap; gap:7px; margin-top:11px}
.sk .sk-chip{font-size:.79rem; padding:5px 11px; border-radius:99px; border:1px solid var(--linie); color:var(--text); background:var(--blatt)}
.sk .sk-chip.gewaehlt{background:var(--marke-hauch); border-color:var(--marke); color:var(--marke-tief); font-weight:500}
.sk .sk-chip.vorschlag{border-style:dashed; color:var(--leise)}
.sk .hinweis{margin-top:14px; display:flex; gap:9px; align-items:flex-start; padding:11px 13px; border-radius:10px; background:var(--glut-hauch); color:var(--glut); font-size:.83rem; line-height:1.5}
.sk .hinweis svg{width:16px; height:16px; flex:none; margin-top:2px; stroke:currentColor; fill:none; stroke-width:1.8}/* Preis */
.sk .preise{display:grid; grid-template-columns:repeat(auto-fit,minmax(272px,1fr)); gap:22px; max-width:760px}
.sk .tarif{background:var(--blatt); border:1px solid var(--linie-fein); border-radius:var(--rund); padding:28px 26px; box-shadow:var(--schatten); position:relative; display:flex; flex-direction:column}
.sk .tarif.hervor{border-color:var(--marke); box-shadow:var(--schatten-tief)}
.sk .tarif .band{position:absolute; top:-11px; left:26px; background:var(--senf); color:var(--tinte); font-family:var(--mono); font-size:.68rem; letter-spacing:.1em; text-transform:uppercase; padding:4px 10px; border-radius:5px}
.sk .tarif h3{font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--leise); font-weight:500}
.sk .betrag{display:flex; align-items:baseline; gap:6px; margin-top:12px}
.sk .betrag .zahl{font-family:var(--display); font-size:3.1rem; font-weight:800; color:var(--tinte); line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.sk .betrag .waehrung{font-family:var(--display); font-size:1.5rem; font-weight:600; color:var(--tinte)}
.sk .betrag .zeitraum{font-size:.92rem; color:var(--leise); margin-left:4px}
.sk .enthalten{list-style:none; margin:20px 0 24px; padding:0; display:flex; flex-direction:column; gap:9px}
.sk .enthalten li{display:flex; gap:10px; align-items:flex-start; font-size:.94rem}
.sk .enthalten svg{width:15px; height:15px; flex:none; margin-top:5px; stroke:var(--marke); fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.sk .tarif .knopf{margin-top:auto; width:100%}
.sk .preis-fuss{margin-top:20px; font-size:.9rem; color:var(--leise)}/* Fragen */
.sk .fragen{max-width:760px}
.sk details{border-bottom:1px solid var(--linie-fein)}
.sk summary{
  list-style:none; cursor:pointer; padding:20px 0; display:flex; gap:16px;
  align-items:baseline; justify-content:space-between;
  font-family:var(--display); font-weight:600; font-size:1.08rem; color:var(--tinte);
}
.sk summary::-webkit-details-marker{display:none}
.sk summary .kreuz{flex:none; width:15px; height:15px; position:relative; margin-top:5px}
.sk summary .kreuz::before,.sk summary .kreuz::after{content:""; position:absolute; background:var(--marke); transition:transform .2s ease}
.sk summary .kreuz::before{top:7px; left:0; width:15px; height:1.8px}
.sk summary .kreuz::after{left:6.6px; top:0; width:1.8px; height:15px}
.sk details[open] summary .kreuz::after{transform:rotate(90deg)}
.sk details .antwort{padding-bottom:22px; max-width:62ch; font-size:1rem}/* Abschluss */
.sk .abschluss{position:relative; overflow:hidden; border-top:1px solid var(--linie-fein)}
.sk .abschluss-bild{position:absolute; inset:0}
.sk .abschluss-bild img{width:100%; height:100%; object-fit:cover}
.sk .abschluss-bild::after{content:""; position:absolute; inset:0; background:linear-gradient(90deg, var(--grund) 0%, color-mix(in srgb,var(--grund) 90%,transparent) 44%, color-mix(in srgb,var(--grund) 40%,transparent) 72%, color-mix(in srgb,var(--grund) 15%,transparent) 100%)}
@media (max-width:820px){
.sk .abschluss-bild::after{background:linear-gradient(to bottom, color-mix(in srgb,var(--grund) 78%,transparent), var(--grund) 55%)}}
.sk .abschluss-bahn{position:relative; z-index:1; padding-block:clamp(64px,9vw,104px)}
.sk .abschluss-innen{max-width:46ch}
.sk .abschluss-innen p{margin-top:18px; font-size:1.08rem}
.sk .telefon{display:inline-flex; align-items:center; gap:10px; margin-top:10px; font-family:var(--mono); font-size:1.12rem; color:var(--tinte); text-decoration:none; font-variant-numeric:tabular-nums}
.sk .telefon svg{width:18px; height:18px; stroke:var(--marke); fill:none; stroke-width:1.8}/* Fuss */
.sk .fuss{border-top:1px solid var(--linie-fein); background:var(--kachel); padding-block:40px; font-size:.9rem; color:var(--leise)}
.sk .fuss-innen{display:flex; flex-wrap:wrap; gap:20px 36px; justify-content:space-between; align-items:flex-start}
.sk .fuss a{color:var(--leise); text-decoration:none}
.sk .fuss a:hover{color:var(--tinte)}
.sk .fuss-links{display:flex; flex-wrap:wrap; gap:18px}
.sk .anschrift{font-style:normal; line-height:1.7}/* Anhang: Gestaltungsvorgabe */
.sk .anhang{background:var(--grund); border-top:2px dashed var(--linie)}
.sk .anhang .bahn{padding-block:clamp(56px,8vw,88px)}
.sk .anhang h2{font-size:clamp(1.5rem,2.6vw,2rem)}
.sk .spec{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:clamp(28px,4vw,44px); margin-top:36px}
.sk .farben{display:grid; grid-template-columns:repeat(auto-fill,minmax(128px,1fr)); gap:12px}
.sk .farbe{border:1px solid var(--linie-fein); border-radius:10px; overflow:hidden; background:var(--blatt)}
.sk .farbe .flaeche{height:56px}
.sk .farbe .beschriftung{padding:9px 11px 11px}
.sk .farbe .rolle{font-size:.82rem; color:var(--tinte); font-weight:500}
.sk .farbe .hex{font-family:var(--mono); font-size:.72rem; color:var(--leise); margin-top:2px}
.sk .schriftprobe{border:1px solid var(--linie-fein); border-radius:10px; background:var(--blatt); padding:18px 20px; margin-bottom:12px}
.sk .schriftprobe .name{font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--leise)}
.sk .schriftprobe .probe{margin-top:8px; color:var(--tinte); line-height:1.2}
.sk .notizen{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:14px}
.sk .notizen li{display:grid; grid-template-columns:auto 1fr; gap:12px; font-size:.95rem; line-height:1.55}
.sk .notizen b{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--glut); padding-top:4px; white-space:nowrap}
@media (prefers-reduced-motion:reduce){
.sk *,.sk *::before,.sk *::after{animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important}
}