/* Tegernsee Index · gemeinsamer Rahmen aller Seiten: Grundschrift, Satz, Kopfleiste, Seitentitel, Fußzeile, Menü am Handy.
   Farben stehen ausschließlich in farben.css.
   Schwellen: ab 1240 px Suchfeld in der Kopfleiste, ab 1140 px zwei Spalten auf den Inhaltsseiten, unter 940 px Handy-Kopfleiste und Menü unten. */
:root{--rund-karte:28px;--rund-kachel:24px;--rund-innen:18px;--rund-klein:16px;--rund-knopf:14px;--rund-symbol:12px;--rund-pille:999px}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--tinte);font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;line-height:1.5}
a{color:inherit}
img,svg{max-width:100%}
h1,h2,h3{margin:0;font-family:inherit;color:var(--tinte)}
h2{font-size:clamp(22px,2vw,26px);font-weight:700;letter-spacing:-.025em;line-height:1.15}
h3{font-size:16px;font-weight:700;letter-spacing:-.01em;line-height:1.3}
p{margin:0}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--pflaume);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
/* Große Zahlen: Besley kursiv, nie mit Tabellenziffern */
.besley{font-family:"Besley",Georgia,serif;font-style:italic;font-weight:800;font-variant-numeric:normal;letter-spacing:-.02em}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

/* Satz: Fließtext ohne einzelnes Wort in der letzten Zeile, Überschriften und kurze Texte gleichmäßig umbrochen */
p,li,dd,dt,figcaption{text-wrap:pretty}
h1,h2,h3,h4,legend,.ueberzeile,.kk-p{text-wrap:balance}

/* Seite: Inhalt höchstens 1320 px breit, am Handy 16 px Rand */
.rahmen{width:min(1320px,100% - 2 * clamp(16px,3vw,40px));margin:0 auto;padding:20px 0 48px;display:flex;flex-direction:column;gap:28px}
.inhalt{display:flex;flex-direction:column;gap:20px;min-width:0}
.sprung{position:absolute;left:12px;top:-60px;z-index:50;background:var(--tinte);color:var(--flaeche);padding:10px 16px;border-radius:var(--rund-symbol);text-decoration:none;font-weight:600}
.sprung:focus{top:12px}

/* Kopfleiste: am Computer eine durchgehende weiße Leiste als Pille, die einzige Menüfläche auf dem Grund */
.kl{position:relative;z-index:20;display:flex;flex-direction:column;gap:12px}
.kl-zeile{display:flex;align-items:center;gap:12px;min-height:66px;padding:6px 22px 6px 18px;background:var(--flaeche);border-radius:var(--rund-pille);box-shadow:var(--schatten-schwebend)}
.marke{flex:none;display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--tinte);border-radius:var(--rund-knopf)}
.marke svg{display:block;flex:none}
.marke-kachel{display:none!important}
.marke-text{display:flex;flex-direction:column;line-height:1.15}
.marke-name{font-size:17px;font-weight:700;letter-spacing:-.015em}
.marke-unter{font-size:12.5px;color:var(--tinte-mittel)}
.menue{flex:1 1 auto;min-width:0;display:flex;justify-content:center}
.menue-pillen{display:flex;gap:2px;min-width:0}
.menue-pillen a{padding:10px 16px;border-radius:var(--rund-pille);text-decoration:none;white-space:nowrap;font-size:14.5px;font-weight:500;color:var(--tinte-stark)}
.menue-pillen a:hover{background:var(--flaeche-schiene);color:var(--tinte)}
.menue-pillen a[aria-current=page]{background:var(--pflaume);color:var(--auf-pflaume);font-weight:600}
.kl-suche{flex:0 1 300px;min-width:0;display:flex;align-items:center;gap:10px;background:var(--flaeche-schiene);border-radius:var(--rund-pille);padding:0 4px 0 16px;height:46px;margin:0}
.kl-suche:focus-within{box-shadow:0 0 0 2px var(--pflaume)}
.kl-suche svg{flex:none;color:var(--tinte-mittel)}
.kl-suche input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--tinte);height:100%;padding:0;-webkit-appearance:none;appearance:none}
.kl-suche input::placeholder{color:var(--tinte-platzhalter)}
.kl-suche input::-webkit-search-cancel-button{display:none}
.suche-leeren{flex:none;width:38px;height:38px;border-radius:var(--rund-pille);border:0;background:var(--flaeche);color:var(--tinte-stark);display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.fuer-gastro{flex:none;display:flex;align-items:center;height:48px;padding:0 6px;color:var(--tinte);font-size:14.5px;font-weight:600;white-space:nowrap;text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px;text-decoration-color:var(--unterstrich)}
.fuer-gastro:hover{text-decoration-color:var(--tinte)}
.kl-knoepfe{flex:none;display:none;gap:8px}
.kl-knopf{width:46px;height:46px;border-radius:var(--rund-pille);border:0;background:var(--flaeche-schiene);color:var(--tinte);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
/* Suchvorschläge */
.vorschlaege{position:absolute;top:calc(100% + 8px);right:0;width:min(100%,560px);z-index:30;background:var(--flaeche);border-radius:var(--rund-kachel);box-shadow:var(--schatten-ebene);padding:10px;max-height:min(460px,70vh);overflow-y:auto;display:flex;flex-direction:column;gap:6px}
.vs-gruppe{display:flex;flex-direction:column;gap:2px}
.vs-titel{font-size:12.5px;font-weight:600;color:var(--tinte-leise);padding:8px 12px 4px}
.vs-eintrag{display:flex;flex-direction:column;gap:1px;padding:10px 12px;border-radius:var(--rund-knopf);text-decoration:none;color:var(--tinte)}
.vs-eintrag:hover,.vs-eintrag:focus-visible{background:var(--pflaume-hover);outline:0}
.vs-name{font-size:15px;font-weight:500}
.vs-name mark{background:none;color:var(--pflaume);font-weight:700}
.vs-zusatz{font-size:13px;color:var(--tinte-leise)}
.vs-mehr{padding:8px 12px;font-size:13.5px;font-weight:600;color:var(--pflaume);text-decoration:none;border-radius:var(--rund-symbol)}
.vs-mehr:hover{text-decoration:underline}
.vs-leer{padding:14px 12px;color:var(--tinte-mittel);font-size:14.5px}

/* Seitentitel */
.titel{display:flex;flex-direction:column;gap:12px;padding-top:14px;min-width:0}
.titel h1{font-size:clamp(34px,4.6vw,62px);font-weight:800;letter-spacing:-.04em;line-height:1.04;overflow-wrap:anywhere}
.titel-unter{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 20px;color:var(--tinte-mittel);font-size:15px}
.titel-unter strong{color:var(--tinte);font-weight:500}
.brotkrumen{display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--tinte-mittel)}
.brotkrumen a{position:relative;color:var(--tinte-stark);text-decoration:none}
.brotkrumen a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}
.brotkrumen a:hover{text-decoration:underline}

/* Fußzeile */
.fuss{display:flex;flex-direction:column;gap:10px;padding:8px 4px 0;font-size:13px;color:var(--tinte-mittel);line-height:1.6}
.fuss p{max-width:980px}
.fuss-links{display:flex;flex-wrap:wrap;gap:15px 18px}
.fuss-links a{position:relative;color:var(--tinte);padding:4px 0}
.fuss-links a::after{content:"";position:absolute;left:0;right:0;top:50%;height:44px;transform:translateY(-50%)}

/* Menü unten: nur am Handy und Tablet */
.menue-unten{display:none}

/* Zu schmal für das Suchfeld neben dem Menü: die Lupe öffnet es darunter, in der Leiste, die dann zweizeilig wird */
@media (max-width:1239px){
  .kl-zeile{flex-wrap:wrap}
  .kl-suche{display:none;order:10;flex:1 0 100%;height:48px}
  .kl[data-suche-offen] .kl-zeile{border-radius:30px;padding-bottom:10px}
  .kl[data-suche-offen] .kl-suche{display:flex;box-shadow:0 0 0 2px var(--pflaume)}
  .kl-knoepfe{display:flex}
}
/* Handy und Tablet: oben nur Logo, Name und Lupe auf dem Grund; das dunkle Menü schwebt unten */
@media (max-width:939px){
  .kl-zeile{min-height:52px;padding:0;background:transparent;border-radius:0;box-shadow:none}
  .kl[data-suche-offen] .kl-zeile{border-radius:0;padding-bottom:0}
  .marke-frei{display:none!important}
  .marke-kachel{display:block!important}
  .kl-knopf{background:var(--flaeche)}
  .kl-suche{background:var(--flaeche)}
  .suche-leeren{background:var(--flaeche-schiene)}
  /* Tiefer geht es nicht: Safari auf dem iPhone (schwebende Adressleiste) legt bei weniger als etwa 5 px Abstand zum unteren Rand eine dunkle Fläche unter das Menü */
  .menue-unten{position:fixed;z-index:40;left:14px;right:14px;bottom:calc(5px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2px;padding:6px;background:var(--flaeche-dunkel);border-radius:var(--rund-pille);box-shadow:var(--schatten-menue)}
  .menue-unten a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;min-height:54px;border-radius:var(--rund-pille);text-decoration:none;color:var(--menue-auf-dunkel);font-size:11.5px;font-weight:600;letter-spacing:-.005em}
  .menue-unten a[aria-current=page]{background:var(--flieder);color:var(--tinte)}
  .menue-unten a:focus-visible{outline:3px solid var(--flaeche);outline-offset:-3px}
  /* Platz unter der Fußzeile, damit nichts unter dem Menü liegt */
  .rahmen{padding-bottom:calc(98px + env(safe-area-inset-bottom))}
  /* Bleibt oben stehen, verschwindet beim Runterscrollen und kommt beim Hochwischen zurück (kopf.js setzt data-weg) */
  html{scroll-padding-top:84px}
  .rahmen{padding-top:10px}
  .kl{position:sticky;top:0;padding:10px 0;margin-bottom:-10px;transition:transform .2s ease}
  .kl::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(-1 * clamp(16px,3vw,40px));right:calc(-1 * clamp(16px,3vw,40px));background:var(--grund);transition:box-shadow .2s ease}
  .kl[data-gescrollt]::before{box-shadow:var(--schatten-kopf-linie)}
  .kl[data-weg]{transform:translateY(calc(-100% - 4px))}
  .menue,.fuer-gastro{display:none}
  .kl-knoepfe{margin-left:auto}
  .kl-suche input{font-size:16px}
  .fuss-links{gap:6px 16px}
}