/* Paket V36 (04.10.2026): Seitenfuß 4 "Datenblatt" (Vorlage kopf-fuss-filigran-2026-10-04/empfehlung.html, filigran.css .f4).
   Ersetzt Fuß C (V33). Eingebunden vom Fuß selbst (public/architecture/shell.mjs siteFooter). Fußgrund wie bisher #d7dce3,
   Text --t-ink #142a4c. Haarlinien 1 px statt Kacheln, Rahmen und Schatten. Alle Regeln hängen an footer.f-fuss, damit
   allgemeine Regeln der Seitenstile (button, h2, p, footer in shop/style.css, shop.css, service.css, home.css) nicht
   durchschlagen. Handy (bis 760 px): Linkspalten als Aufklapper (public/architecture/fuss.mjs). */
footer.f-fuss{--f-muted:#4a5361;--f-haar:#b6bcc5;display:block;margin:0;padding:0;border:0;background:#d7dce3;color:var(--t-ink,#142a4c);font:400 13.5px/1.6 Manrope,Arial,sans-serif;text-align:left;overflow-wrap:anywhere;scroll-margin-top:120px}
footer.f-fuss .f-innen{max-width:1440px;margin-inline:auto;padding:64px 40px 0}
footer.f-fuss a{color:inherit}
footer.f-fuss h2,footer.f-fuss p,footer.f-fuss dl,footer.f-fuss dd{margin:0;max-width:none;letter-spacing:normal;line-height:inherit;font-size:inherit;font-weight:inherit}
footer.f-fuss ul{margin:0;padding:0;list-style:none}
footer.f-fuss li{margin:0;padding:0;border:0}
footer.f-fuss .f-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
footer.f-fuss .f-zeichen{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
footer.f-fuss .f-pfeil{display:none;width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .15s}
footer.f-fuss .f-auf[aria-expanded="true"] .f-pfeil{transform:rotate(180deg)}
footer.f-fuss a:focus-visible,footer.f-fuss button:focus-visible{outline:2px solid #a2480a;outline-offset:3px}
/* Raster: links Kontakt, rechts drei Linkspalten */
footer.f-fuss .f4-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px}
footer.f-fuss .f-klein,footer.f-fuss .f-info-titel,footer.f-fuss .f-kontakt dt{font:600 11px/1.4 Manrope,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--f-muted)}
footer.f-fuss .f4-titel{display:flex;align-items:center;min-height:28px;margin:0 0 8px}
/* Kontakt als Tabelle mit Haarlinien */
footer.f-fuss .f-kontakt{display:grid}
footer.f-fuss .f4-tabelle div{display:grid;grid-template-columns:130px minmax(0,1fr);align-items:baseline;gap:12px;min-height:40px;padding:8px 0;border-bottom:1px solid var(--f-haar)}
footer.f-fuss .f4-tabelle div:first-child{border-top:1px solid var(--f-haar)}
footer.f-fuss .f-kontakt dd{font:500 14px/1.5 Manrope,Arial,sans-serif}
footer.f-fuss .f-kontakt a{display:inline-flex;align-items:center;min-height:24px;color:var(--t-ink,#142a4c);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#142a4c40;text-underline-offset:4px}
footer.f-fuss .f-kontakt a:hover{text-decoration-color:currentColor}
footer.f-fuss .f-ort{margin-top:20px;font-size:13px}
footer.f-fuss .f-ueber{margin-top:12px;max-width:440px;color:var(--f-muted);font-size:13px}
footer.f-fuss .f-ueber strong{font-weight:600;color:var(--t-ink,#142a4c)}
/* Linkspalten */
footer.f-fuss .f-spalten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
footer.f-fuss .f-titel{margin:0}
footer.f-fuss .f-auf{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:28px;margin:0 0 6px;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--f-muted);font:600 11px/1.4 Manrope,Arial,sans-serif;letter-spacing:.16em;text-transform:uppercase;text-align:left;cursor:default}
footer.f-fuss .f-auf:hover{background:none;color:var(--f-muted)}
footer.f-fuss .f-liste a{display:inline-flex;align-items:baseline;gap:8px;min-height:32px;padding:5px 0;color:var(--t-ink,#142a4c);font:500 13.5px/1.6 Manrope,Arial,sans-serif;text-decoration:none}
footer.f-fuss .f-liste a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}
footer.f-fuss .f-liste a{overflow-wrap:normal;word-break:normal}
footer.f-fuss .f-zahl{flex:none;white-space:nowrap;color:var(--f-muted);font-size:12px;font-variant-numeric:tabular-nums}
footer.f-fuss .f-inhalt[hidden]{display:none!important}
/* Zahlarten und Versand als eine Textzeile */
footer.f-fuss .f-info{display:flex;flex-wrap:wrap;gap:6px 40px;margin-top:48px;padding:16px 0;border-top:1px solid var(--f-haar);font:500 12.5px/1.6 Manrope,Arial,sans-serif}
footer.f-fuss .f-info p{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0}
footer.f-fuss .f-info-titel{margin:0 14px 0 0;font-size:12px}
footer.f-fuss .f-info-wert+.f-info-wert::before{content:"";display:inline-block;width:1px;height:11px;margin:0 12px;background:var(--f-haar);vertical-align:-1px}
/* Schmale Schlusszeile */
footer.f-fuss .f-basis{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 24px;min-height:52px;border-top:1px solid var(--f-haar);color:var(--f-muted);font:500 12px/1.4 Manrope,Arial,sans-serif}
footer.f-fuss .f-basis-rechts{display:flex;align-items:center;gap:24px}
footer.f-fuss a.f-verwaltung{display:inline-flex;align-items:center;min-height:32px;color:var(--f-muted);text-decoration:none}
footer.f-fuss a.f-verwaltung:hover{text-decoration:underline;text-underline-offset:4px}
footer.f-fuss .f-nach-oben{display:inline-flex;align-items:center;gap:6px;min-height:32px;margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--t-ink,#142a4c);font:500 12px/1 Manrope,Arial,sans-serif;letter-spacing:0;cursor:pointer}
footer.f-fuss .f-nach-oben:hover{background:none;color:var(--t-ink,#142a4c)}
footer.f-fuss .f-nach-oben span{text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:#142a4c59;text-underline-offset:4px}
footer.f-fuss .f-nobr{white-space:nowrap}
@media(max-width:1100px){footer.f-fuss .f-innen{padding-inline:16px}}
/* Mittlere Breiten: ganze Wörter und Artikelzahlen brauchen nutzbare Linkspalten. */
@media(min-width:901px) and (max-width:1100px){
  footer.f-fuss .f4-raster{grid-template-columns:320px minmax(0,1fr);gap:32px}
  footer.f-fuss .f-spalten{gap:16px}
}
@media(min-width:761px) and (max-width:900px){
  footer.f-fuss .f4-raster{grid-template-columns:minmax(0,1fr);gap:28px}
  footer.f-fuss .f-spalten{gap:16px}
}
/* Handy */
@media(max-width:760px){
  footer.f-fuss .f-innen{padding:40px 20px 0}
  footer.f-fuss .f4-raster{grid-template-columns:1fr;gap:28px}
  footer.f-fuss .f4-tabelle div{grid-template-columns:104px minmax(0,1fr)}
  footer.f-fuss .f4-tabelle div:last-child{grid-template-columns:1fr;gap:2px}
  footer.f-fuss .f-spalten{grid-template-columns:minmax(0,1fr);gap:0}
  footer.f-fuss .f-spalte{border-bottom:1px solid var(--f-haar)}
  footer.f-fuss .f-spalte .f-auf{min-height:48px;margin:0;cursor:pointer}
  footer.f-fuss .f-spalte .f-pfeil{display:block}
  footer.f-fuss .f-spalte .f-inhalt{padding-bottom:12px}
  footer.f-fuss .f-liste a{min-height:36px}
  footer.f-fuss .f-info{flex-direction:column;margin-top:8px;border-top:0}
  footer.f-fuss .f-info p{display:block}
  footer.f-fuss .f-info-titel{display:block;margin:0 0 2px}
  footer.f-fuss .f-info-wert{display:block}
  footer.f-fuss .f-info-wert+.f-info-wert::before{display:none}
  footer.f-fuss .f-basis{padding:10px 0 14px}
}
@media(min-width:761px){footer.f-fuss .f-spalte .f-inhalt[hidden]{display:block!important}}
@media print{footer.f-fuss{display:none!important}}
/* V36: Bedienziele mindestens 44 px hoch (Hausregel, tests/pruefe.mjs und pruefe-start.mjs). Einzelne Ziele wachsen
   unsichtbar (negativer Außenabstand hält die Zeile); die Linklisten bekommen echte 44-px-Zeilen, weil sich überlappende
   Flächen gegenseitig verdecken würden (tests/shop/v7-barrierefreiheit.test.mjs A11Y-5). */
footer.f-fuss .f-liste a{align-items:center;min-height:44px;padding-block:0}
/* Karte 46 (20.10.2026): "AGB" war ab 761 px nur 30 px breit. Mindestbreite 44 px, der Text bleibt linksbündig. */
footer.f-fuss .f-liste a{min-width:44px}
footer.f-fuss .f-kontakt a{min-height:44px;margin-block:-10px}
footer.f-fuss .f-auf{min-height:44px;margin-block:-8px -2px}
footer.f-fuss a.f-verwaltung,footer.f-fuss .f-nach-oben{min-height:44px;margin-block:-6px}
@media(max-width:760px){footer.f-fuss .f-liste a{min-height:44px}footer.f-fuss .f-spalte .f-auf{min-height:48px;margin:0}}

/* Richtung A (Kundenwahl 17.10.2026, Entwurf a-start.html): Fuß in Nachtblau tief mit Logo (Fassung für dunklen Grund),
   weißer Schrift, Spaltentitel in Orange (Orange als Schrift nur auf Nachtblau) und Breite wie Kopf 9.8 (1760 px).
   Aufbau und Handy-Aufklapper bleiben wie in V36; hier stehen nur Farben, Maße und das Logo. */
footer.f-fuss{--f-muted:#b8c4d6;--f-haar:rgba(255,255,255,.16);background:#0d1e38;color:#fff;font-size:14.5px;border-bottom:0}
footer.f-fuss .f-innen{max-width:1760px;padding:72px 64px 0}
footer.f-fuss .f-logo{display:block;height:46px;width:auto;margin:0 0 28px}
footer.f-fuss .f-klein,footer.f-fuss .f-kontakt dt,footer.f-fuss .f-auf,footer.f-fuss .f-auf:hover{color:#f2884b;font-weight:800;font-size:12px;letter-spacing:.14em}
footer.f-fuss .f-kontakt dt{color:var(--f-muted);font-weight:700;letter-spacing:.1em}
footer.f-fuss .f-kontakt dd{font-size:15px;font-weight:700}
footer.f-fuss .f-kontakt a,footer.f-fuss .f-ueber strong{color:#fff;text-decoration-color:rgba(255,255,255,.4)}
footer.f-fuss .f-ort,footer.f-fuss .f-ueber{color:var(--f-muted);font-size:14px}
footer.f-fuss .f-liste a{min-height:44px;color:#fff;font-size:15px;font-weight:600}
footer.f-fuss .f-liste a:hover{text-decoration-color:#f2884b;text-decoration-thickness:2px;text-underline-offset:5px}
footer.f-fuss .f-zahl{color:var(--f-muted)}
footer.f-fuss .f-info,footer.f-fuss .f-basis{color:var(--f-muted)}
footer.f-fuss .f-info-titel{color:#fff;font-weight:800}
footer.f-fuss .f-basis a,footer.f-fuss .f-basis button,footer.f-fuss .f-firma{color:#fff}
footer.f-fuss a:focus-visible,footer.f-fuss button:focus-visible{outline-color:#f2884b}
@media (max-width:1700px){footer.f-fuss .f-innen{padding-inline:56px}}
@media (max-width:1279px){footer.f-fuss .f-innen{padding-inline:32px}}
@media (max-width:1099px){footer.f-fuss .f-innen{padding-inline:24px}}
@media (max-width:480px){footer.f-fuss .f-innen{padding-inline:16px}footer.f-fuss .f-logo{height:38px}}
/* 18.10.2026: Zahlarten und Versand mit Zeichen (shell.mjs INFO_ZEICHEN). Zeichen in Orange ohne Rahmen (V36: keine Rahmen und Kacheln), der
   Abstand zwischen den Werten ersetzt den Trennstrich. Handy: ein Wert je Zeile, Zeichen links. */
footer.f-fuss .f-info{align-items:center;gap:14px 56px;padding:20px 0}
footer.f-fuss .f-info p{align-items:center;gap:10px 28px}
footer.f-fuss .f-info-titel{margin:0 2px 0 0}
footer.f-fuss .f-info-eintrag{display:inline-flex;align-items:center;gap:10px}
footer.f-fuss .f-info-zeichen{width:22px;height:22px;flex:none;fill:none;stroke:#f2884b;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
footer.f-fuss .f-info-wert{color:#dfe6f0}
@media(max-width:760px){
  footer.f-fuss .f-info{gap:18px;padding:8px 0 20px;align-items:stretch}
  footer.f-fuss .f-info p{width:100%;margin:0}
  footer.f-fuss .f-info-titel{margin:0 0 8px}
  footer.f-fuss .f-info-eintrag{display:flex;margin-top:8px}
}