/* ==============================================================
   fuss.css  ·  Besitzer: P1 Kopf & Fuss  ·  v4 „Passer“ (25.09.2026)
   K12 Fuss auf der Ladenschild-Buehne (.schild), K13 Nach-oben.
   Altregeln aus v3 zurueckgebaut; Sicherung:
   _backups-vor-aenderung-2026-09-25-p1/.

   Inhalt:
     1 Buehne, Fehlregister-Kante
     2 Schild-Zeile: Telefon gross (Gross-Stufe), Anschrift, Zeiten
     3 Linkgruppen (<details data-mobil-zu>), Orte als Fliesszeile
     4 Fusszeile: Copyright + Credit, Rechtliches, Cookie-Knopf
     5 Nach-oben (K13)
     6 Bewegung reduziert, Druck

   Nichts unter 14 px (auch Desktop, Plan 6), Tap-Ziele >= 24 px
   (WCAG 2.5.8), Umbrueche nur fuer die Spaltenzahl (48rem, 64rem).
   ============================================================== */

/* ---- 1 Buehne ------------------------------------------------- */
.site-foot{
  position:relative;
  padding-block:clamp(2.75rem, 2rem + 3vw, 4.5rem) clamp(5rem, 4rem + 2vw, 5.5rem);  /* unten Platz fuer Pfeil + Cookie-Knopf */
  background-color:var(--bg);color:var(--text);
  border-top:3px solid var(--platte);
}
/* Fehlregister: die Magenta-Haarlinie liegt 3 px unter der Cyan-Platte */
.site-foot::before{
  content:"";position:absolute;left:0;right:0;top:3px;height:2px;
  background-color:var(--haar);
}
.site-foot a{color:var(--text);text-decoration:none;text-underline-offset:.2em}
.site-foot a:hover,.site-foot a:focus-visible{color:var(--accent-text);text-decoration:underline;text-decoration-thickness:2px}

/* Etikett-Stil wie Kicker: Saira-Versalien, 14 px (vorher Mono 11,7 px) */
.fuss-k{
  margin:0 0 .8rem;
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.875rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);
}

/* ---- 2 Schild-Zeile ---------------------------------------------- */
.fuss-schild{
  display:grid;gap:1.75rem 1.5rem;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  grid-template-areas:"marke marke" "adresse zeiten";
  padding-bottom:clamp(2rem, 1.5rem + 2vw, 3rem);
  border-bottom:1px solid var(--line);
}
.fuss-schild > *{min-width:0}
.fuss-marke{grid-area:marke}
.fuss-adresse{grid-area:adresse}
.fuss-zeiten{grid-area:zeiten}
@media (min-width:64rem){
  .fuss-schild{
    grid-template-columns:minmax(0,7fr) minmax(0,2.6fr) minmax(0,2.4fr);
    grid-template-areas:"marke adresse zeiten";
    align-items:end;
  }
}
.fuss-marke .fuss-k{display:flex;align-items:center;gap:.75rem}
.fuss-marke .fuss-k::before{
  content:"";flex:0 0 auto;width:28px;height:3px;
  background-color:var(--platte);box-shadow:2px 2px 0 var(--haar);
}
/* Die Nummer: Gross-Stufe (Plan 6), Cyan auf Schwarz (7,38:1).
   Mobil etwas kleiner, damit sie bei 390 px in EINE Zeile passt. */
.site-foot .fuss-tel{
  display:inline-block;
  font-family:var(--schrift-titel);font-weight:780;font-stretch:88%;
  font-size:clamp(2.125rem, 1.35rem + 3.4vw, 4.75rem);line-height:.95;letter-spacing:-.02em;
  color:var(--accent-text);white-space:nowrap;
  padding-block:.1em;
}
.site-foot .fuss-tel:hover,.site-foot .fuss-tel:focus-visible{color:var(--text);text-decoration:none}
@media (hover:hover) and (pointer:fine){
  /* Passer: beim Zeigen rutscht die Magenta-Platte unter die Ziffern */
  .site-foot .fuss-tel{transition:text-shadow var(--t-kurz) var(--ease),color var(--t-kurz) var(--ease)}
  .site-foot .fuss-tel:hover{text-shadow:.04em .04em 0 var(--haar)}
}
.fuss-mail{
  display:inline-flex;align-items:center;min-height:24px;margin-top:.7rem;
  font-size:1.0625rem;
}
.site-foot .fuss-marke > a{margin-right:1rem}
.fuss-adresse,.fuss-zeiten p{
  margin:0;font-style:normal;color:var(--muted);font-size:1rem;line-height:1.6;
}
.fuss-adresse{padding-top:calc(.875rem * 1.3 + .8rem)}   /* Grundlinie wie die Zeiten neben der Ueberschrift */
@media (min-width:64rem){ .fuss-adresse{padding-top:0} }
.fuss-zeiten .fuss-termin{margin-top:.6rem}

/* ---- 3 Linkgruppen ------------------------------------------------ */
.fuss-links{
  display:grid;gap:0;
  grid-template-columns:minmax(0,1fr);
  padding-block:clamp(1rem, .5rem + 2vw, 2.75rem) 0;
}
.fuss-links > *{min-width:0}
@media (min-width:48rem){
  .fuss-links{grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(0,3fr);gap:2rem 1.5rem}
}
@media (min-width:64rem){
  .fuss-links{grid-template-columns:minmax(0,2.2fr) minmax(0,2.2fr) minmax(0,5fr)}
}
.fuss-gruppe > summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.fuss-gruppe > summary::-webkit-details-marker{display:none}
.fuss-gruppe > summary::marker{content:""}
.fuss-gruppe > summary .fuss-k{margin:0}
@media (max-width:47.99rem){
  /* mobil: Aufklapper mit Pfeil, 48 px hoch, getoente Linie dazwischen */
  .fuss-gruppe{border-bottom:1px solid var(--line)}
  .fuss-gruppe > summary{min-height:48px;cursor:pointer}
  .fuss-gruppe > summary::after{
    content:"";flex:0 0 auto;width:.6rem;height:.6rem;margin-right:.3rem;translate:0 -.15rem;
    border-right:2px solid var(--accent-text);border-bottom:2px solid var(--accent-text);
    rotate:45deg;transition:rotate var(--t-kurz) var(--ease),translate var(--t-kurz) var(--ease);
  }
  .fuss-gruppe[open] > summary::after{rotate:-135deg;translate:0 .15rem}
  .fuss-gruppe[open]{padding-bottom:1rem}
}
@media (min-width:48rem){
  .fuss-gruppe > summary{min-height:32px;margin-bottom:.5rem;cursor:default}   /* Tap-Ziel >= 24 px, auch wenn offen */
}

.foot-liste{list-style:none;margin:0;padding:0;display:grid;gap:.15rem}
.foot-liste a,.fuss-orte a{
  display:inline-flex;align-items:center;min-height:32px;
  font-size:1rem;line-height:1.3;
}
/* Orte als Fliesszeile mit Mittelpunkten (Plan K12). Jeder Ort traegt
   seinen Punkt VORN; die Liste ist um die Punktbreite nach links
   verschoben und clip-path schneidet genau diesen Streifen ab - so steht
   am Zeilenanfang nie ein Punkt, egal wo umbrochen wird. Der Fokusring
   liegt innen (outline-offset negativ) und wird darum nie mit beschnitten. */
.fuss-orte{
  list-style:none;margin:0 0 0 -1.1rem;padding:0;
  display:flex;flex-wrap:wrap;align-items:center;
  clip-path:inset(-8px -8px -8px 1.1rem);
}
.fuss-orte li{display:inline-flex;align-items:center}
.fuss-orte li::before{content:"·";flex:none;width:1.1rem;text-align:center;color:var(--muted);font-weight:700}
.fuss-orte a{padding-inline:.2rem}
.fuss-orte a:focus-visible{outline-offset:-3px}
.fuss-alle a{color:var(--accent-text)}
@media (min-width:64rem){
  .foot-liste a,.fuss-orte a{min-height:28px}
}

/* ---- 4 Fusszeile ---------------------------------------------------- */
.foot-bottom{
  margin-top:clamp(1.5rem, 1rem + 2vw, 2.75rem);padding-top:1.2rem;border-top:1px solid var(--line);
  display:flex;gap:.75rem 2rem;flex-wrap:wrap;justify-content:space-between;align-items:center;
  font-size:.9375rem;color:var(--muted);
}
.fuss-copy{margin:0;max-width:60ch;color:var(--muted);font-size:.9375rem;line-height:1.6}
/* Der Credit steht im Satz: bleibt unterstrichen, damit er nicht nur an der Farbe haengt */
.site-foot .fuss-credit{display:inline-block;min-height:24px;color:var(--accent-text);text-decoration:underline;text-underline-offset:.2em}   /* inline-block: eigenes Tap-Ziel >= 24 px, Textblock wie v3 */
.fuss-recht{display:flex;flex-wrap:wrap;align-items:center;gap:0 1.1rem}
.fuss-recht a,.fuss-recht .link-knopf{display:inline-flex;align-items:center;min-height:32px;font-size:.9375rem}
.fuss-redaktion{font-weight:400}

/* ---- Knopf, der wie ein Link aussieht (Cookie-Einstellungen) - */
.link-knopf{
  background:none;border:0;padding:0;margin:0;cursor:pointer;
  font:inherit;color:var(--accent-text);text-decoration:underline;text-underline-offset:3px;
}
.link-knopf:hover{text-decoration-thickness:2px}
.site-foot .link-knopf{color:var(--text);text-decoration:none}
.site-foot .link-knopf:hover,.site-foot .link-knopf:focus-visible{color:var(--accent-text);text-decoration:underline;text-decoration-thickness:2px}

@media (pointer:coarse){
  .fuss-recht a,.fuss-recht .link-knopf,.foot-liste a,.fuss-orte a{min-height:44px}
  .fuss-mail{min-height:44px}
}

/* ---- 5 Nach-oben (K13) ----------------------------------------------
   Material: Ladenschild-Knopf mit Cyan-Rand und Fehlregister-Schatten.
   Ohne JavaScript steht er immer da (href="#top"), mit JS erst nach
   einem Bildschirm. Rechts unten; der Cookie-Knopf sitzt links unten,
   der Anruf-Knopf oben im Kopf - keine Ueberdeckung. */
.nach-oben{
  --bg:var(--schild);
  position:fixed;right:max(1rem, env(safe-area-inset-right));bottom:max(1rem, env(safe-area-inset-bottom));
  z-index:40;display:grid;place-items:center;width:48px;height:48px;
  border-radius:var(--r-knopf);
  background-color:var(--schild);color:var(--cyan);text-decoration:none;
  border:2px solid var(--cyan);
  box-shadow:3px 3px 0 var(--haar);
  transition:opacity var(--t-kurz) var(--ease),translate var(--t-kurz) var(--ease),
             box-shadow var(--t-kurz) var(--ease),visibility var(--t-kurz);
}
@media (hover:hover) and (pointer:fine){
  .nach-oben:hover{translate:0 -3px;box-shadow:5px 5px 0 var(--haar)}
}
.nach-oben:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
/* fix2: an html.js (setzt js-an.js synchron im head) statt an .js-oben (kommt
   erst mit dem verzoegerten Skript) - sonst blitzt der Knopf beim Laden auf.
   Ohne JS steht er nicht fixiert ueber dem Hero, sondern am Ende des Fusses. */
.js .nach-oben:not(.ist-da){opacity:0;visibility:hidden;translate:0 8px}
html:not(.js) .nach-oben{position:static;margin:1rem max(1rem, env(safe-area-inset-right)) 1rem auto}

/* ---- 6 Bewegung reduziert, Druck ---------------------------------- */
@media (prefers-reduced-motion:reduce){
  .nach-oben,.site-foot .fuss-tel,.fuss-gruppe > summary::after{transition:none}
  .nach-oben:hover{translate:none}
}
@media print{
  .nach-oben{display:none}
  .fuss-links{display:none}
}