/* Tegernsee Index · Gastro Index (/gastro): Einkehr-Index, Kassenbon, Statuszeile, Preisspannen, Am günstigsten, Alle Preise, Rekord-Kacheln */

/* Einkehr-Index */
.einkehr{background:var(--pflaume);color:var(--auf-pflaume);border-radius:var(--rund-karte);padding:clamp(22px,2.8vw,36px);box-shadow:var(--schatten-schwebend)}
.reihe>.einkehr{gap:16px}
.einkehr h2{color:var(--auf-pflaume)}
.einkehr .ueberzeile{font-size:14px;font-weight:500;color:var(--auf-pflaume-leise)}
.einkehr-zahl{font-size:clamp(72px,10vw,144px);line-height:.95}
.einkehr-zahl span{font-size:.38em;margin-left:10px;color:var(--auf-pflaume-leise);letter-spacing:0}
.einkehr-text{font-size:16px;line-height:1.5;color:var(--auf-pflaume-text);text-wrap:balance}
.einkehr-reihe{display:flex;flex-direction:column;gap:8px;margin-top:auto;padding-top:10px}
.einkehr-reihe>p{font-size:14px;color:var(--auf-pflaume-text)}
.punktreihe{position:relative;height:58px;margin:0 8px}
.pr-tal{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-size:12.5px;font-weight:700;color:var(--butter)}
.pr-linie{position:absolute;left:-8px;right:-8px;top:37px;height:4px;border-radius:var(--rund-pille);background:var(--auf-pflaume-spur)}
.pr-strich{position:absolute;top:22px;height:34px;width:3px;margin-left:-1.5px;border-radius:1px;background:var(--butter)}
.pr-punkt{position:absolute;top:31px;width:16px;height:16px;margin-left:-8px;padding:0;border:0;border-radius:var(--rund-pille);background:var(--auf-pflaume);box-shadow:0 0 0 3px var(--pflaume);cursor:pointer;transform:translateY(var(--dy,0))}
/* größere Trefferfläche, Optik unverändert */
.pr-punkt::before{content:"";position:absolute;inset:-8px;border-radius:var(--rund-pille)}
.pr-punkt:hover,.pr-punkt:focus-visible{z-index:2;background:var(--auf-pflaume-leise)}
.pr-punkt:focus-visible{outline:3px solid var(--auf-pflaume);outline-offset:3px}
.pr-etikett{position:absolute;z-index:3;bottom:calc(100% - 24px);transform:translateX(-50%);white-space:nowrap;padding:5px 11px;border-radius:var(--rund-pille);background:var(--flaeche);color:var(--tinte);font-size:12.5px;font-weight:600;box-shadow:var(--schatten-etikett);pointer-events:none}
.pr-enden{display:flex;justify-content:space-between;gap:16px;font-size:13px;color:var(--auf-pflaume-leise);font-variant-numeric:tabular-nums}
.pr-enden strong{color:var(--auf-pflaume)}
.pr-max{flex:none;text-align:right;white-space:nowrap}

/* Kassenbon mit Textmarker in Butter hinter dem Einkehr-Index */
.bon{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bon-summe{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-top:12px;border-top:2px solid var(--tinte)}
.bon-summe span{font-size:24px;font-weight:800;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--pflaume);white-space:nowrap}
.kassenbon .fussnote{margin-top:auto}
.mk{position:relative;display:inline-block;isolation:isolate}
.mk svg{position:absolute;left:-7px;top:22%;width:calc(100% + 14px);height:78%;z-index:-1;transform:rotate(-1.2deg);overflow:visible;max-width:none;pointer-events:none}
.mk path{fill:var(--butter);stroke:none}
/* Wischt sich einmal beim Hineinscrollen ein (gastroindex.js); bei reduzierter Bewegung sofort fertig */
.mk.wartet svg{clip-path:inset(0 100% 0 0)}
.mk.zeichnen svg{clip-path:inset(0 100% 0 0);animation:mk-wischen .5s cubic-bezier(.4,.1,.3,1) forwards}
@keyframes mk-wischen{to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.mk.wartet svg,.mk.zeichnen svg{animation:none;clip-path:none}}

/* Derzeit geöffnet: schmale Statuszeile über die ganze Breite */
.inhalt>section.ix-statuszeile{display:flex;flex-direction:row;align-items:center;gap:14px 22px;padding:16px clamp(20px,2.4vw,30px);flex-wrap:nowrap}
.sz-titel{display:flex;align-items:center;flex:none}
.sz-titel h2{font-size:17px;letter-spacing:-.01em}
.st-punkt{display:inline-block;width:8px;height:8px;border-radius:var(--rund-pille);background:var(--geoeffnet);margin-right:7px;vertical-align:1px;box-shadow:0 0 0 3px var(--geoeffnet-ring)}
.sz-zahl{flex:none;font-size:14.5px;color:var(--tinte-mittel);white-space:nowrap}
.sz-zahl strong{font-size:17px;color:var(--tinte);font-variant-numeric:tabular-nums}
.sz-balken{flex:1 1 auto;min-width:80px;height:12px;border-radius:var(--rund-pille);background:var(--pflaume-hell);overflow:hidden}
.sz-balken span{display:block;height:100%;border-radius:var(--rund-pille);background:repeating-linear-gradient(135deg,var(--pflaume) 0 6px,var(--pflaume-streifen) 6px 12px)}
.sz-prozent{flex:none;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums}
.sz-stand{flex:none;font-size:12.5px;color:var(--tinte-leise);white-space:nowrap}
.ix-statuszeile .mehr-link{margin:0;flex:none;white-space:nowrap}
@media (max-width:939px){
  .inhalt>section.ix-statuszeile{flex-wrap:wrap;gap:10px 14px}
  .sz-titel{flex:1 1 auto}
  .ix-statuszeile .mehr-link{order:2}
  .sz-zahl{order:3;flex:1 1 auto}
  .sz-prozent{order:4}
  .sz-balken{order:5;flex:1 1 100%}
  .sz-stand{order:6;white-space:normal}
}

/* Preisspannen: jede Zeile ist zugleich die Auswahl */
.ix-spannen{gap:14px!important}
.ix-spannen .schalter{margin-top:4px;flex-wrap:nowrap}
.ps-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.spanne2{display:flex;flex-wrap:wrap;align-items:center;gap:8px 28px;color:var(--tinte);text-decoration:none}
.spanne2>.zp{flex:1 1 300px}
.ps2{width:100%;border:0;font:inherit;text-align:left;background:transparent;cursor:pointer;padding:12px 14px;border-radius:var(--rund-knopf)}
button.ps2:hover{background:var(--pflaume-hover)}
button.ps2:hover .zp-name strong{text-decoration:underline}
.ps2[aria-pressed=true]{background:var(--pflaume-hell);color:var(--tinte)}
.ps2[aria-pressed=true] .zp-name>span{color:var(--tinte-mittel)}
.ps2[aria-pressed=true] .fuell{border-bottom-color:var(--pflaume-punktlinie)}
.ps2[aria-pressed=true] .sp-spur{background:var(--flaeche)}
.ps2[aria-pressed=true] .sp-achse{color:var(--tinte-mittel)}
.ps2.leer{cursor:default;color:var(--tinte-leise)}
.ps2.leer .zp{color:var(--tinte-leise)}
.ps2.leer .zp-name strong,.ps2.leer .zp-preis{font-weight:500}
.sp-balken{flex:999 1 240px;min-width:0;display:flex;flex-direction:column;gap:6px}
.sp-spur{position:relative;height:10px;border-radius:var(--rund-pille);background:var(--pflaume-hell)}
.sp-punkt{position:absolute;top:-4px;width:18px;height:18px;margin-left:-9px;border-radius:var(--rund-pille);background:var(--pflaume);box-shadow:0 0 0 3px var(--flaeche)}
.sp-achse{display:flex;justify-content:space-between;font-size:12.5px;color:var(--tinte-leise);font-variant-numeric:tabular-nums}

/* Am günstigsten und Alle Preise im hellen Ton */
.ix-guenstig,.ix-alle{background:var(--pflaume-hell)}
.gu-bloecke{display:flex;flex-direction:column;gap:18px}
.gu-block{display:flex;flex-direction:column;gap:12px}
.gu-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.gu-kopf h3{font-size:14px;color:var(--pflaume)}
.gu-kopf a{position:relative;flex:none;font-size:13px;font-weight:600;color:var(--pflaume);text-underline-offset:3px}
.gu-kopf a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.gu-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.gu-liste li{position:relative;display:flex;align-items:center;gap:12px}
.gu-liste .zp{flex:1 1 auto}
.gu-liste .zp-name strong,.pa-name a,.pr-enden span{text-wrap:balance}
.gu-liste .fuell{border-bottom-color:var(--pflaume-punktlinie)}
/* die ganze Zeile führt zum Lokal */
.gu-liste .zp-name a::after{content:"";position:absolute;inset:-6px 0}
.gu-liste li:first-child .zp-name a::after{top:0}
.gu-liste li:hover .zp-name strong{text-decoration:underline}
.rang{flex:none;width:30px;height:30px;border-radius:var(--rund-pille);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;background:var(--flaeche);color:var(--tinte-stark)}
.rang.erster{background:var(--butter);color:var(--pflaume)}
/* Gleichstand an der Grenze: eine Zeile zum Aufklappen */
.gu-gruppe button{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:space-between;gap:10px;border:0;font:inherit;text-align:left;color:var(--tinte);background:var(--flaeche);border-radius:var(--rund-knopf);padding:9px 14px;min-height:46px;cursor:pointer}
.gu-gruppe button>span{display:flex;flex-direction:column}
.gu-gruppe button strong{font-weight:600}
.gu-gruppe button>span>span{font-size:12.5px;color:var(--tinte-leise)}
.gu-gruppe button[aria-expanded=true] svg{transform:rotate(180deg)}

.ix-alle{gap:14px!important}
.alle-kopf{display:flex;justify-content:space-between;align-items:flex-end;gap:12px 20px;flex-wrap:wrap}
.ix-alle .auswahl-feld{flex:0 1 320px}
.ix-alle .auswahl-feld select{background:var(--flaeche)}
.pa-legende{font-size:13px;color:var(--tinte-mittel);margin-bottom:6px;display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center}
.pa-legende i{display:inline-block;width:10px;height:10px;border-radius:var(--rund-pille);margin-right:6px;vertical-align:-1px}
.nv-u{background:var(--guenstig-punkt)}.nv-g{background:var(--median-punkt)}.nv-o{background:var(--teurer-punkt)}
.pa-kopf{display:flex;align-items:flex-end;gap:12px;padding-bottom:6px}
.pa-r{flex:none;width:24px;text-align:right;font-size:13px;color:var(--tinte-leise);font-variant-numeric:tabular-nums}
.pa-inhalt{flex:1 1 auto;min-width:0;display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px}
.pa-name{flex:1 1 180px;min-width:0;display:flex;flex-direction:column}
.pa-name a{font-weight:600;color:var(--tinte);text-decoration:none}
.pa-name a::after{content:"";position:absolute;inset:0}
.pa-name>span{font-size:12.5px;color:var(--tinte-leise)}
.pa-wert{flex:2 1 300px;min-width:0;display:flex;align-items:center;gap:12px}
.pa-spur{position:relative;flex:1 1 auto;height:10px;border-radius:var(--rund-pille);background:var(--flaeche)}
.pa-spur.leer{background:none;height:18px}
.pa-fuell{position:absolute;left:0;top:0;bottom:0;border-radius:var(--rund-pille)}
.pa-fuell.unter{background:var(--guenstig-balken)}
.pa-fuell.gleich{background:var(--median-balken)}
.pa-fuell.ueber{background:var(--teurer-balken)}
.pa-mstrich{position:absolute;top:-5px;bottom:-5px;width:2px;margin-left:-1px;border-radius:1px;background:var(--tinte)}
.pa-mtext{position:absolute;bottom:0;transform:translateX(-50%);white-space:nowrap;font-size:12.5px;font-weight:600;color:var(--tinte);font-variant-numeric:tabular-nums}
.pa-preis{flex:0 0 64px;text-align:right;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.pa-liste{list-style:none;margin:0;padding:0}
.pa-zeile,.pa-luecke{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid var(--pflaume-linie)}
.pa-zeile{position:relative}
.pa-zeile:hover .pa-name a{text-decoration:underline}
.pa-luecke{padding:10px 0}
.pa-luecke .pa-r{font-size:18px;line-height:1;color:var(--symbol-leise)}
.pa-luecke button{flex:1 1 auto;min-width:0;border:0;border-radius:var(--rund-knopf);background:var(--flaeche);color:var(--tinte);padding:12px 16px;min-height:46px;font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;text-align:center}
.pa-luecke button[aria-expanded=true] svg{transform:rotate(180deg)}
/* Alle Preise am Handy: erst ein Knopf, dann die ganze Liste */
.alle-auf{display:none;border:0;border-radius:var(--rund-knopf);background:var(--flaeche);color:var(--tinte);font:inherit;font-size:15px;font-weight:600;min-height:48px;padding:12px 16px;cursor:pointer;align-items:center;justify-content:center;gap:8px}
.alle-auf[aria-expanded=true] svg{transform:rotate(180deg)}
@media (max-width:939px){
  .alle-auf{display:flex}
  [data-alle]{display:flex;flex-direction:column;gap:12px}
  [data-alle]:not(.alle-offen) .pa-legende,[data-alle]:not(.alle-offen) .pa-kopf,[data-alle]:not(.alle-offen) .pa-liste{display:none}
  [data-alle].alle-offen .alle-auf{order:9}
}

/* Reihenfolge, sobald alles untereinander steht */
@media (max-width:1139px){
  .ix-spannen{order:1}.ix-guenstig{order:2}.ix-alle{order:3}.ix-spalten .radar-kasten{order:4}
}

/* Rekord-Kacheln: Hochformat 4:5, Maße relativ zur Kachelbreite, damit dieselbe Kachel auf Instagram funktioniert */
.rekorde{display:flex;flex-direction:column;gap:18px}
.kacheln-rekord{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.kacheln-rekord:focus-visible{outline-offset:6px}
.kacheln-rekord li{container-type:inline-size;min-width:0}
.rekord{margin:0;aspect-ratio:4/5;border-radius:var(--rund-kachel);overflow:hidden;padding:7cqw;display:flex;flex-direction:column;box-shadow:var(--schatten-schwebend)}
.rk-oben{display:flex;justify-content:space-between;align-items:baseline;gap:3cqw;font-size:max(12px,3.7cqw)}
.rk-marke{font-weight:800;letter-spacing:-.01em}
.rk-ober{font-weight:600;text-align:right}
.rk-mitte{margin-top:auto;display:flex;flex-direction:column;gap:3.2cqw}
.rk-zahl{font-size:25.5cqw;line-height:.92}
.rk-zahl span{font-size:.42em;letter-spacing:0;margin-left:2cqw}
.rk-titel{font-size:7.4cqw;font-weight:700;letter-spacing:-.025em;line-height:1.12;text-wrap:balance}
.rk-unter{font-size:max(13px,4.3cqw);line-height:1.35;text-wrap:pretty}
figcaption.rk-unter{font-size:max(12px,3.3cqw)}
/* Zahlen in allen Kacheln auf einer Höhe: Platz für immer zwei Zeilen Titel und drei Zeilen Text */
.rk-mitte .rk-titel{min-height:calc(2 * 1.12em)}
.rk-mitte .rk-unter{min-height:calc(3 * 1.35em)}
.rk-linie{display:block;margin:6cqw 0 3.6cqw;border-bottom:.7cqw dotted}
.rekord-dunkel{background:var(--flaeche-dunkel);color:var(--auf-pflaume)}
.rekord-dunkel .rk-ober,.rekord-dunkel .rk-zahl{color:var(--butter)}
.rekord-dunkel .rk-unter{color:var(--tinte-auf-dunkel)}
.rekord-dunkel .rk-linie{border-color:var(--auf-dunkel-punktlinie)}
.rekord-weiss{background:var(--flaeche);color:var(--tinte)}
.rekord-weiss .rk-ober,.rekord-weiss .rk-zahl{color:var(--pflaume)}
.rekord-weiss .rk-unter{color:var(--tinte-mittel)}
.rekord-weiss .rk-linie{border-color:var(--punktlinie)}
.rekord-butter{background:var(--butter);color:var(--tinte)}
.rekord-butter .rk-ober,.rekord-butter .rk-zahl{color:var(--pflaume)}
.rekord-butter .rk-unter{color:var(--tinte-stark)}
.rekord-butter .rk-linie{border-color:var(--auf-butter-punktlinie)}
@media (max-width:939px){
  .kacheln-rekord{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:12px;padding:18px 0 46px;margin:-18px 0 -42px}
  .kacheln-rekord::-webkit-scrollbar{display:none}
  .kacheln-rekord li{flex:0 0 46%;scroll-snap-align:start}
  .rekord{border-radius:22px}
}
@media (max-width:699px){.kacheln-rekord li{flex-basis:82%}}