/* Variante A
   Knöpfe: Arrow Fill Button (21st, hyperiux, id 26022). Gefüllte Pille, rechts ein Kreis mit Pfeil;
   beim Zeigen wächst der Kreis über den ganzen Knopf, der Text färbt sich um, der Pfeil wird ersetzt.
   Kopfleiste: Immersive Full Screen Navigation (21st, hyperiux, id 27229). Schriftzug links, drei Striche rechts,
   das Menü wischt als rote Vollfläche von unten nach oben auf. */

:root { --pf-kurve: cubic-bezier(.785, .135, .15, .86); }

/* ---------- Knopf: Grundform */
.pille {
  --h: 58px; --kreis: 44px; --kr: 7px; --pl: 30px; --pr: calc(var(--kreis) + var(--kr) + 20px);
  --bg: var(--rot); --rand-f: var(--rot); --text: var(--creme);
  --fl: var(--creme); --fl-text: var(--rot); --pfeil: var(--rot);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--h); min-height: var(--h); padding: 0 var(--pr) 0 var(--pl);
  border-radius: 999px; border: 1.5px solid var(--rand-f); background: var(--bg); color: var(--text);
  font-family: var(--grotesk); font-weight: 500; font-size: 17px; line-height: 1; letter-spacing: 0; text-transform: none;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; text-rendering: geometricPrecision;
}
.pf-text { position: relative; z-index: 1; padding-bottom: 1px; }
.pf-flaeche {
  position: absolute; z-index: 2; pointer-events: none; border-radius: 999px; background: var(--fl);
  top: calc((100% - var(--kreis)) / 2); bottom: calc((100% - var(--kreis)) / 2);
  right: var(--kr); left: calc(100% - var(--kr) - var(--kreis));
  transition: top .45s var(--pf-kurve), right .45s var(--pf-kurve), bottom .45s var(--pf-kurve), left .45s var(--pf-kurve), background-color .45s var(--pf-kurve);
}
.pf-kopie {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; display: flex; align-items: center; justify-content: center;
  padding: 0 var(--pr) 0 var(--pl); color: var(--fl-text);
  clip-path: inset(calc((100% - var(--kreis)) / 2) var(--kr) calc((100% - var(--kreis)) / 2) calc(100% - var(--kr) - var(--kreis)) round 999px);
  transition: clip-path .45s var(--pf-kurve), color .45s var(--pf-kurve);
}
.pf-kopie span { padding-bottom: 1px; white-space: nowrap; }
.pf-kreis {
  position: absolute; z-index: 3; right: var(--kr); top: 50%; width: var(--kreis); height: var(--kreis); transform: translateY(-50%);
  border-radius: 50%; overflow: hidden; background: var(--fl); color: var(--pfeil); pointer-events: none;
  transition: background-color .45s var(--pf-kurve), color .45s var(--pf-kurve);
}
.pf-pfeil { position: absolute; left: 50%; top: 50%; width: 21px; height: 21px; transition: transform .45s var(--pf-kurve); }
.pf-pfeil-neu { transform: translate(-170%, -50%) scale(0); }
.pf-pfeil-alt { transform: translate(-50%, -50%); }

/* Zeigen (Maus), Tastatur-Fokus und Antippen (data-gedrueckt aus variante.js) */
@media (hover: hover) {
  .pille:hover .pf-flaeche { top: 0; right: 0; bottom: 0; left: 0; }
  .pille:hover .pf-kopie { clip-path: inset(0 0 0 0 round 999px); }
  .pille:hover .pf-pfeil-neu { transform: translate(-50%, -50%) scale(1); }
  .pille:hover .pf-pfeil-alt { transform: translate(70%, -50%) scale(0); }
}
.pille:focus-visible .pf-flaeche, .pille[data-gedrueckt] .pf-flaeche { top: 0; right: 0; bottom: 0; left: 0; }
.pille:focus-visible .pf-kopie, .pille[data-gedrueckt] .pf-kopie { clip-path: inset(0 0 0 0 round 999px); }
.pille:focus-visible .pf-pfeil-neu, .pille[data-gedrueckt] .pf-pfeil-neu { transform: translate(-50%, -50%) scale(1); }
.pille:focus-visible .pf-pfeil-alt, .pille[data-gedrueckt] .pf-pfeil-alt { transform: translate(70%, -50%) scale(0); }

/* ---------- Knopf: Formen (gefüllt, Umriss, auf Rot) */
.pille-voll { --bg: var(--rot); --rand-f: var(--rot); --text: var(--creme); --fl: var(--creme); --fl-text: var(--rot); --pfeil: var(--rot); }
.pille-rand { --bg: transparent; --rand-f: var(--tinte); --text: var(--tinte); --fl: var(--tinte); --fl-text: var(--creme); --pfeil: var(--creme); }
.pille-hell { --bg: var(--creme); --rand-f: var(--creme); --text: var(--tinte); --fl: var(--tinte); --fl-text: var(--creme); --pfeil: var(--creme); }
.pille-rand-hell, .fuss .pille-hell { --bg: transparent; --rand-f: var(--creme); --text: var(--creme); --fl: var(--creme); --fl-text: var(--rot); --pfeil: var(--rot); }
.fuss .pille-hell { background: transparent; border: 1.5px solid var(--creme); color: var(--creme); }
.karte-laden { border: 1.5px solid var(--rand-f); }
.karte-hinweis .pille { --h: 52px; --kreis: 40px; --kr: 6px; --pl: 24px; --pr: calc(var(--kreis) + var(--kr) + 16px); font-size: 16px; }

@media (max-width: 767px) {
  .pille { --h: 54px; --kreis: 42px; --kr: 6px; --pl: 24px; --pr: calc(var(--kreis) + var(--kr) + 16px); font-size: 16px; }
}
.leiste .pille { --h: 54px; min-height: 54px; }
.leiste { grid-template-columns: 1.25fr 1fr; }

/* ---------- Kopfleiste */
.kopf { padding-top: calc(16px + env(safe-area-inset-top)); padding-bottom: 16px; }
.kopf-rechts { gap: 14px; }
.kopf .pille { --h: 52px; --kreis: 40px; --kr: 6px; --pl: 24px; --pr: calc(var(--kreis) + var(--kr) + 16px); font-size: 16px; }
.kopf.offen { background: transparent; }
.kopf.offen .marke { opacity: .55; transition: color .3s, opacity .45s; }
.kopf.offen:not(.dunkel) .marke { color: var(--creme); }
.kopf.offen .pille-anruf { visibility: hidden; }
.burger-imm { width: 48px; height: 48px; margin-left: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 0 4px; }
.burger-imm span { width: 40px; height: 2px; background: var(--creme); transition: transform .45s cubic-bezier(.32, .72, 0, 1), opacity .3s, background-color .3s; }
.kopf.dunkel .burger-imm span { background: var(--tinte); }
.kopf.offen .burger-imm span { background: var(--creme); transition: transform .45s cubic-bezier(.32, .72, 0, 1), opacity .3s, background-color .2s; }
.kopf.offen .burger-imm span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.kopf.offen .burger-imm span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.kopf.offen .burger-imm span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
@media (max-width: 420px) { .kopf .pille { padding: 0 var(--pr) 0 var(--pl); } }
@media (max-width: 400px) { .kopf .pille { --h: 48px; --pl: 18px; --kreis: 36px; --kr: 6px; --pr: calc(var(--kreis) + var(--kr) + 12px); font-size: 15px; } .kopf-rechts { gap: 8px; } .burger-imm { width: 44px; height: 44px; } .burger-imm span { width: 34px; } }
@media (max-width: 374px) { .kopf .pille { --pl: 14px; --kreis: 32px; --pr: calc(var(--kreis) + var(--kr) + 8px); } .burger-imm span { width: 28px; } }

/* ---------- Menü: rotes Seitenpanel fährt von rechts herein, dahinter dunkler Schleier (Klick darauf schließt) */
.menue {
  padding: 0; overflow: hidden; display: block; gap: 0;
  background: rgba(0, 0, 0, .45); color: var(--creme); cursor: pointer;
  opacity: 0; transition: opacity .45s cubic-bezier(.32, .72, 0, 1);
}
.menue.auf { opacity: 1; }
.menue.geht { opacity: 0; }
.menue-panel {
  position: absolute; top: 0; right: 0; bottom: 0; width: 460px; max-width: 100%;
  background: var(--rot); color: var(--creme); cursor: auto;
  padding: calc(104px + env(safe-area-inset-top)) 40px calc(32px + env(safe-area-inset-bottom));
  overflow-y: auto; overscroll-behavior: contain;
  display: flex; flex-direction: column; justify-content: space-between; align-items: stretch; gap: 40px;
  transform: translateX(100%); transition: transform .45s cubic-bezier(.32, .72, 0, 1);
}
.menue.auf .menue-panel { transform: translateX(0); }
.menue.geht .menue-panel { transform: translateX(100%); }
.menue-panel > nav { display: block; }
.menue-liste { text-align: left; }
.menue-liste a { font-family: var(--serife); text-transform: none; letter-spacing: -.01em; font-size: clamp(32px, 5.2vh, 44px); line-height: 1.08; padding: 3px 0; color: var(--creme); transition: color .3s; }
@media (hover: hover) { .menue-liste a:hover { color: var(--tinte); } }
.menue-liste a[aria-current="page"] { color: var(--creme); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }
.menue a:focus-visible { outline-color: var(--creme); }
.menue-info { width: 100%; display: flex; flex-direction: column; align-items: flex-start; text-align: left; gap: 12px; font-size: 16px; }
.menue-info p { margin: 0; }
.menue-info a { font-weight: 500; }
@media (min-width: 1001px) { .menue { grid-template-columns: none; padding-top: 0; } }
@media (max-width: 767px) {
  .menue-panel { width: 90%; padding-left: var(--rand); padding-right: var(--rand); gap: 36px; }
}

/* ---------- Bewegung reduzieren: kein Hereinfahren, nur kurzes Einblenden, Knöpfe schalten sofort um */
@media (prefers-reduced-motion: reduce) {
  .pf-flaeche, .pf-kopie, .pf-kreis, .pf-pfeil, .burger-imm span, .kopf.offen .burger-imm span, .kopf.offen .marke, .menue-panel { transition: none; }
  .menue { transition: opacity .2s ease-out; }
  .menue-panel, .menue.auf .menue-panel, .menue.geht .menue-panel { transform: none; }
}

/* Fußbereich: Impressum und Datenschutz nebeneinander, etwas kleiner */
.fuss-links .pille { --h: 48px; --kreis: 36px; --kr: 5px; --pl: 18px; --pr: calc(var(--kreis) + var(--kr) + 12px); font-size: 15px; }

/* Lange Knopftexte (z. B. Instagram) dürfen am Handy umbrechen statt die Seite zu verbreitern */
.pille { max-width: 100%; height: auto; padding-top: 8px; padding-bottom: 8px; }
.pf-text, .pf-kopie span { white-space: normal; text-align: center; line-height: 1.2; }

/* Haarlinie zwischen Rand und Füllung (Kantenglättung) schließen: am Ende der Füllung bekommt der Knopf selbst Füllfarbe und Rand */
@media (hover: hover) { .pille:hover { background-color: var(--fl); border-color: var(--fl); transition: background-color 0s .4s, border-color 0s .4s; } }
.pille:focus-visible, .pille[data-gedrueckt] { background-color: var(--fl); border-color: var(--fl); transition: background-color 0s .4s, border-color 0s .4s; }
@media (prefers-reduced-motion: reduce) { .pille:hover, .pille:focus-visible, .pille[data-gedrueckt] { transition: none; } }

/* Logo und Menue-Knopf etwas groesser (13.11.2026) */
.marke { font-size: 34px; }
.burger-imm { width: 56px; height: 56px; gap: 7px; }
.burger-imm span { width: 48px; height: 3px; }
.kopf.offen .burger-imm span:nth-child(1) { transform: translateY(10px) rotate(45deg); }
.kopf.offen .burger-imm span:nth-child(3) { transform: translateY(-10px) rotate(-45deg); }
@media (max-width: 767px) {
  .marke { font-size: 29px; }
  .burger-imm { width: 48px; height: 48px; }
  .burger-imm span { width: 40px; }
}

/* Knoepfe in der Luecke ueber dem mittleren Foto (13.11.2026) */
.foto-spalte { display: flex; flex-direction: column; align-items: center; min-width: 0; }
.foto-spalte .creme-knoepfe { margin: 0; padding: 2.4vw 0 2.4vw; }
.foto-spalte .foto-mitte { margin-top: 0; width: 100%; }
.fotoreihe { margin-top: 72px; }
@media (max-width: 767px) {
  .foto-spalte .creme-knoepfe { flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; padding: 18px 0 18px; gap: 8px; }
  .foto-spalte .creme-knoepfe .pille { --h: 46px; --kreis: 34px; --kr: 6px; --pl: 16px; --pr: calc(var(--kreis) + var(--kr) + 10px); font-size: 14px; }
  .fotoreihe { margin-top: 48px; }
}

/* Handy: Marke im offenen Menue ausblenden, kein Anschnitt am Panelrand */
@media (max-width: 767px) { .kopf.offen .marke { opacity: 0; pointer-events: none; } }

/* Ueberschrift "Oeffnungszeiten" (langes Wort) passt sich der Spaltenbreite an */
#zeiten-t { font-size: clamp(32px, 4.2vw, 66px); overflow-wrap: normal; }
@media (max-width: 899px) { #zeiten-t { font-size: min(80px, calc((100vw - 40px) / 9.6)); } }

/* Startseite Anfahrt: 3D-Lageplan (Bild als Hintergrund, Beschriftung als SVG darueber) */
.lp3box { position: relative; aspect-ratio: 1 / 1; background: var(--sand); }
.lp3box .lp3 { position: absolute; inset: 0; background: var(--sand) url(../media/stadt-3d-handy.webp) center / cover no-repeat; }
.lp3box .lp3 > svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; max-width: none; }
.lp3box .lp3 text { paint-order: stroke; stroke: rgba(248, 242, 230, .92); stroke-linejoin: round; font-family: var(--grotesk); fill: var(--tinte); }
.lp3box .lp3-s { font-weight: 500; font-size: 50px; stroke-width: 10px; }
.lp3box .lp3-adr { font-weight: 500; font-size: 52px; stroke-width: 10px; }
.lp3box .lp3-gross { font-family: var(--serife); font-weight: 400; font-size: 80px; fill: var(--rot); stroke-width: 12px; }
.lp3box .lp3-pin circle { fill: none; stroke: var(--rot); stroke-width: 6px; }

/* 14.11.2026: Hero-Texte blenden aus, bevor der cremefarbene Block sie anschneidet (kein Streifen "SEIT 1966" mehr) */
.hero-titel, .hero-heute, .hero-fuss { opacity: var(--hero-text, 1); }
/* Fuss: Leuchtschild mittig (links und rechts gleich viel Platz, rechts sitzt der Nach-oben-Knopf), Spalten ohne leeres Feld */
@media (min-width: 641px) {
  .fuss-oben { display: grid; grid-template-columns: 64px minmax(0, 1fr) 64px; align-items: start; }
  .fuss-oben .schild { grid-column: 2; }
  .fuss-oben .fuss-hoch { grid-column: 3; }
}
@media (min-width: 768px) {
  .fuss-spalten { grid-template-columns: repeat(3, auto); justify-content: space-between; }
}

/* Über uns, Bewertungskarten: Sterne in Palettenfarbe, Zitat oben, Name unten (alle Karten gleich aufgebaut) */
.stimme-sterne .an { fill: var(--rot); color: var(--rot); }
.stimme-sterne .aus { fill: rgba(18, 18, 18, .14); color: rgba(18, 18, 18, .14); }
.stimme-innen { justify-content: flex-start; }
.stimme-text { flex: 1 1 auto; }