/* ===== Gemeinsame Kopf- und Fusszeile (alle Seiten) ===== */
.uspbar{background:var(--slate,#0f151c);color:var(--on-slate,#e9edf2);font-family:"Sora","Source Sans 3",system-ui,sans-serif;font-size:13px;font-weight:500}
.uspin{max-width:1280px;margin:0 auto;padding:7px 22px;display:flex;justify-content:space-between;gap:18px;overflow:hidden}
.uspin span{white-space:nowrap;display:inline-flex;align-items:center;gap:7px}
.uspin i{font-style:normal;opacity:.9}
/* 02.10.2026 (Stefan): «Nachbesserung, sonst Geld zurück (14 Tage)» aus der Leiste genommen – 4. Eintrag überall aus;
   shell.js wechselt am Handy nur noch die ersten drei. Die Zusage steht weiter in Faktenzeile, Hilfe und AGB. */
.uspin span:nth-child(4){display:none!important}
.uspin{justify-content:space-around}
@media(max-width:380px){html[lang^="en"] .navin{padding:0 14px;gap:14px}}
@media(max-width:900px){.uspbar{font-size:12px}.uspin{justify-content:center;padding:7px 16px}.uspin span{display:none}.uspin span.on{display:inline-flex;white-space:normal;text-align:center}}
.topnav{position:sticky;top:0;z-index:60;background:var(--bg,#eceff3);background:color-mix(in srgb,var(--bg,#eceff3) 90%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line,#dce2e8)}
.navin{max-width:1280px;margin:0 auto;padding:0 22px;height:64px;display:flex;align-items:center;gap:22px}
.topnav .brand,.sitefoot .brand{display:flex;align-items:center;gap:10px;color:var(--ink,#15202b);text-decoration:none;line-height:1;flex:none}
.topnav .sig,.sitefoot .sig{width:36px;height:36px;flex:none}
.topnav .bw,.sitefoot .bw{display:flex;flex-direction:column;gap:3px}
.topnav .bn,.sitefoot .bn{font-family:"Sora","Source Sans 3",system-ui,sans-serif;font-weight:700;font-size:19px;letter-spacing:-.01em}
.topnav .bs,.sitefoot .bs{display:flex;align-items:center;gap:5px;font-family:"Sora","Source Sans 3",system-ui,sans-serif;font-weight:600;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted,#57646f)}
.topnav .chk{width:10px;height:10px;flex:none}
.navmenu{display:flex;align-items:center;gap:26px;flex:1}
.navlinks{display:flex;gap:18px;align-items:center;white-space:nowrap}
.navlinks a{font-family:"Sora","Source Sans 3",system-ui,sans-serif;color:var(--muted,#57646f);font-size:14px;font-weight:500;text-decoration:none;padding:6px 0;border-bottom:2px solid transparent}
.navlinks a:hover{color:var(--ink,#15202b)}
.navlinks a.akt{color:var(--ink,#15202b);border-bottom-color:var(--amber,#d5850f)}
.navcta{margin-left:auto;display:flex;gap:10px;align-items:center}
.navcta .btn{font-family:"Sora","Source Sans 3",system-ui,sans-serif;display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:14px;border-radius:11px;padding:9px 15px;text-decoration:none;border:1px solid transparent;white-space:nowrap}
.navcta .btn-pri{background:var(--amber,#d5850f);color:#1a1204}
.navcta .btn-ghost{background:transparent;border-color:color-mix(in srgb,var(--muted,#57646f) 40%,transparent);color:var(--ink,#15202b)}
.ext{font-size:.85em;opacity:.75}.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.navburger{display:none;margin-left:auto;-webkit-appearance:none;appearance:none;background:none;border:1px solid var(--line,#dce2e8);border-radius:10px;padding:8px 10px;cursor:pointer;color:var(--ink,#15202b);align-items:center;gap:8px;font:600 13px "Sora","Source Sans 3",system-ui,sans-serif}
.navburger span{display:block;width:16px;height:2px;background:currentColor;margin:3px 0}
.navburger b{font-weight:600}
@media(max-width:980px){
  .navlinks{gap:12px}.navlinks a{font-size:13px}.navcta .btn-ghost{display:none}
}
@media(max-width:820px){
  .navburger{display:flex}
  .navmenu{display:none;position:absolute;left:0;right:0;top:64px;background:var(--surface,#fff);border-bottom:1px solid var(--line,#dce2e8);padding:12px 22px 18px;flex-direction:column;align-items:stretch;gap:6px;box-shadow:0 14px 30px rgba(0,0,0,.12)}
  .navmenu.open{display:flex}
  .navlinks{flex-direction:column;align-items:stretch;gap:0}
  .navlinks a{padding:11px 4px;border-bottom:1px solid var(--line,#dce2e8);font-size:16px}
  .navlinks a.akt{border-bottom:1px solid var(--line,#dce2e8);color:var(--amber-ink,#9a5c08)}
  .navcta{margin:12px 0 0;flex-direction:column;align-items:stretch}
  .navcta .btn{justify-content:center;padding:12px}
  .navcta .btn-ghost{display:inline-flex}
  .navin .navcta-mobile{display:inline-flex}
}
/* 23.09.2026: längere Menütexte («Schauen statt lesen» / «Regarder plutôt que lire» / «Guardare, non leggere»):
   DE ab 1180 px kompakt (statt 980), FR/IT ab 1400 px kompakt und ab 1180 px im Hamburger-Menü. */
@media(max-width:1320px){.navlinks{gap:12px}.navlinks a{font-size:13px}.navcta .btn-ghost{display:none}}
@media(max-width:1400px){
  html[lang^="fr"] .navlinks,html[lang^="it"] .navlinks,html[lang^="en"] .navlinks{gap:13px}
  html[lang^="fr"] .navlinks a,html[lang^="it"] .navlinks a,html[lang^="en"] .navlinks a{font-size:13.5px}
  html[lang^="fr"] .navcta .btn-ghost,html[lang^="it"] .navcta .btn-ghost,html[lang^="en"] .navcta .btn-ghost{display:none}
}
@media(max-width:1180px) and (min-width:820.1px){
  html[lang^="fr"] .navburger,html[lang^="it"] .navburger,html[lang^="en"] .navburger{display:flex}
  html[lang^="fr"] .navmenu,html[lang^="it"] .navmenu,html[lang^="en"] .navmenu{display:none;position:absolute;left:0;right:0;top:64px;background:var(--surface,#fff);border-bottom:1px solid var(--line,#dce2e8);padding:12px 22px 18px;flex-direction:column;align-items:stretch;gap:6px;box-shadow:0 14px 30px rgba(0,0,0,.12)}
  html[lang^="fr"] .navmenu.open,html[lang^="it"] .navmenu.open,html[lang^="en"] .navmenu.open{display:flex}
  html[lang^="fr"] .navlinks,html[lang^="it"] .navlinks,html[lang^="en"] .navlinks{flex-direction:column;align-items:stretch;gap:0}
  html[lang^="fr"] .navlinks a,html[lang^="it"] .navlinks a,html[lang^="en"] .navlinks a{padding:11px 4px;border-bottom:1px solid var(--line,#dce2e8);font-size:16px}
  html[lang^="fr"] .navlinks a.akt,html[lang^="it"] .navlinks a.akt,html[lang^="en"] .navlinks a.akt{border-bottom:1px solid var(--line,#dce2e8);color:var(--amber-ink,#9a5c08)}
  html[lang^="fr"] .navcta,html[lang^="it"] .navcta,html[lang^="en"] .navcta{margin:12px 0 0;flex-direction:column;align-items:stretch}
  html[lang^="fr"] .navcta .btn,html[lang^="it"] .navcta .btn,html[lang^="en"] .navcta .btn{justify-content:center;padding:12px}
  html[lang^="fr"] .navcta .btn-ghost,html[lang^="it"] .navcta .btn-ghost,html[lang^="en"] .navcta .btn-ghost{display:inline-flex}
  html[lang^="fr"] .navin .navcta-mobile,html[lang^="it"] .navin .navcta-mobile,html[lang^="en"] .navin .navcta-mobile{display:inline-flex}
  html[lang^="fr"] .navmob,html[lang^="it"] .navmob,html[lang^="en"] .navmob{display:inline-flex;margin-left:auto;font-family:"Sora",system-ui,sans-serif;font-weight:600;font-size:13px;background:var(--amber,#d5850f);color:#1a1204;border-radius:10px;padding:9px 12px;text-decoration:none;white-space:nowrap}
  html[lang^="fr"] .navburger,html[lang^="it"] .navburger,html[lang^="en"] .navburger{margin-left:8px}
  html[lang^="fr"] .navmob.app,html[lang^="it"] .navmob.app,html[lang^="en"] .navmob.app{background:transparent;border:1px solid var(--line,#dce2e8);color:var(--ink,#15202b);padding:8px 12px}
}
/* fester Bestell-Knopf rechts im Kopf auf Handy */
.navmob{display:none}
@media(max-width:820px){.navmob{display:inline-flex;margin-left:auto;font-family:"Sora",system-ui,sans-serif;font-weight:600;font-size:13px;background:var(--amber,#d5850f);color:#1a1204;border-radius:10px;padding:9px 12px;text-decoration:none;white-space:nowrap}.navburger{margin-left:8px}
.navmob.app{background:transparent;border:1px solid var(--line,#dce2e8);color:var(--ink,#15202b);padding:8px 12px}}
/* Fuss */
.sitefoot{border-top:1px solid var(--line,#dce2e8);background:var(--surface2,#f4f6f9);padding:48px 0 56px;font-size:14.5px;color:var(--ink,#15202b);font-family:"Source Sans 3",system-ui,sans-serif}
.footin{max-width:1280px;margin:0 auto;padding:0 22px}
.fcols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr .8fr;gap:34px}
.fcols h4{font-family:"Sora","Source Sans 3",system-ui,sans-serif;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted,#57646f);margin:0 0 12px}
.fcols a{display:block;color:var(--ink,#15202b);text-decoration:none;margin:0 0 9px}
.fcols a:hover{color:var(--amber-ink,#9a5c08)}
.fbrand p{color:var(--muted,#57646f);margin:12px 0 0;max-width:300px;font-size:14px}
.fbrand .fmail a{display:inline;color:var(--amber-ink,#9a5c08);font-weight:600}
@media(max-width:980px){.fcols{grid-template-columns:1fr 1fr 1fr}.fbrand{grid-column:1/-1}}
@media(max-width:560px){.fcols{grid-template-columns:1fr 1fr}}
.fpay{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line,#dce2e8)}
.fpay .paylab{font-family:"Sora",system-ui,sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#57646f);margin-right:4px}
.fpay .pay{display:inline-flex;align-items:center;gap:4px;height:28px;padding:0 10px;border-radius:6px;border:1px solid var(--line,#dce2e8);background:#fff;color:#1a1a1a;font-size:12px;font-weight:800;letter-spacing:.02em}
.fpay .pay-twint{background:#000;color:#fff;border-color:#000}
.fpay .pay-visa{color:#1a1f71;font-style:italic;font-weight:900;letter-spacing:.04em}
.fpay .pay-mc i{display:inline-block;width:14px;height:14px;border-radius:50%;background:#eb001b}
.fpay .pay-mc i+i{background:#f79e1b;margin-left:-8px;margin-right:4px;opacity:.95}
.fpay .pay-inv{background:var(--surface2,#f4f6f9);color:var(--ink,#15202b)}
.fpay .paynote{font-size:13px;color:var(--muted,#57646f);margin-left:6px}
.ffine{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin-top:18px;font-size:13px;color:var(--muted,#57646f)}
/* Seitenkopf für Unterseiten */
.pagehead{padding:46px 0 10px}
.pagehead .eyebrow{font-family:"Sora",system-ui,sans-serif;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber-ink,#9a5c08);font-weight:700;margin-bottom:8px}
.pagehead h1{font-family:"Fraunces",serif;font-weight:600;font-size:clamp(32px,4.6vw,48px);line-height:1.08;margin:0 0 12px;text-wrap:balance;color:var(--ink,#15202b)}
.pagehead p.lead{color:var(--muted,#57646f);font-size:18.5px;max-width:64ch;margin:0}
.onpage{display:flex;flex-wrap:wrap;gap:8px;margin:20px 0 0;padding:10px 0;position:sticky;top:64px;z-index:20;background:var(--bg,#eceff3);background:color-mix(in srgb,var(--bg,#eceff3) 92%,transparent)}
.onpage span{font-family:"Sora",system-ui,sans-serif;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#57646f);align-self:center;margin-right:4px}
.onpage a{font-family:"Sora",system-ui,sans-serif;font-size:13.5px;font-weight:600;padding:7px 12px;border-radius:999px;border:1px solid var(--line,#dce2e8);background:var(--surface,#fff);color:var(--ink,#15202b);text-decoration:none}
.onpage a:hover{border-color:var(--amber,#d5850f);color:var(--amber-ink,#9a5c08)}
.themen{top:64px!important}
.topnav .brand{margin:0}
.topnav .brand .sig{width:36px;height:36px}

.fpay .pay-apple,.pay-apple{background:#000;color:#fff;border-color:#000}
.fpay .pay-google,.pay-google{background:#fff;color:#3c4043;border-color:#dadce0}

/* Zahlungs-Symbole: echte Logos auf Kacheln (Betreiber 06.09.2026) */
.pay,.fpay .pay,.payrow .pay{display:inline-flex!important;align-items:center;justify-content:center;width:60px!important;height:38px!important;padding:0!important;border-radius:8px!important;border:1px solid #d9dee4!important;background:#fff!important;color:transparent!important;font-size:0!important;overflow:hidden;box-sizing:border-box}
.pay img{display:block;height:auto;width:auto}
.pay.pay-twint,.fpay .pay-twint{background:#000!important;border-color:#000!important}
.pay-twint img{width:100%!important;height:100%!important;object-fit:contain;padding:0 2px}
.pay.pay-mc,.fpay .pay-mc{background:#1c1c1c!important;border-color:#1c1c1c!important}
.pay-mc img{width:34px!important}
.pay-visa img{width:40px!important}
.pay-apple img{width:38px!important}
.pay-google img{width:42px!important}
.pay-mc i{display:none}
/* Sprachumschalter DE | FR | IT im Kopf (tools/website/i18n/build.py setzt ihn ein) */
.langsw{display:flex;gap:2px;align-items:center;font:600 12px "Sora","Source Sans 3",system-ui,sans-serif;letter-spacing:.06em;flex:none}
.langsw a,.langsw span{padding:5px 7px;border-radius:8px;color:var(--muted,#57646f);text-decoration:none;line-height:1}
.langsw a:hover{color:var(--ink,#15202b);background:color-mix(in srgb,var(--muted,#57646f) 14%,transparent)}
.langsw .on{color:var(--ink,#15202b);background:var(--line,#dce2e8)}
@media(max-width:820px){ .langsw{margin-top:10px;justify-content:center;gap:8px} .langsw a,.langsw span{padding:8px 14px;font-size:14px} }

/* Sehr schmale Handys: neben dem App-Knopf passt das Wort «Menü» nicht mehr, nur die drei Striche bleiben */
@media(max-width:430px){.navburger b{display:none}.navburger{padding:10px 10px}.navmob.app{padding:8px 10px}}

/* Vier Sprachen im Umschalter (Englisch, 25.09.2026): FR/IT/EN bis 1600 px verdichtet, darunter bis 1280 px Menü-Knopf für ALLE Sprachen (html[lang]-Präfix, damit die Menü-Regeln die Verdichtung überstimmen) */
@media(max-width:1600px){html[lang^="fr"] .navlinks,html[lang^="it"] .navlinks,html[lang^="en"] .navlinks{gap:13px}html[lang^="fr"] .navlinks a,html[lang^="it"] .navlinks a,html[lang^="en"] .navlinks a{font-size:13.5px}html[lang^="fr"] .navcta .btn-ghost,html[lang^="it"] .navcta .btn-ghost,html[lang^="en"] .navcta .btn-ghost{display:none}}
/* Über 1600 px bleibt die Leiste 1280 px breit: FR/IT/EN Leiste 1400 px und leicht verdichtet, «Zur App» bleibt sichtbar (Prüfung tools/sprachpruefung/kopfzeile.mjs) */
@media(min-width:1600.1px){html[lang^="fr"] .navin,html[lang^="it"] .navin,html[lang^="en"] .navin{max-width:1400px}html[lang^="fr"] .navlinks,html[lang^="it"] .navlinks,html[lang^="en"] .navlinks{gap:14px}html[lang^="fr"] .navlinks a,html[lang^="it"] .navlinks a,html[lang^="en"] .navlinks a{font-size:14px}}
@media(max-width:1280px) and (min-width:820.1px){html[lang] .navburger{display:flex}html[lang] .navmenu{display:none;position:absolute;left:0;right:0;top:64px;background:var(--surface,#fff);border-bottom:1px solid var(--line,#dce2e8);padding:12px 22px 18px;flex-direction:column;align-items:stretch;gap:6px;box-shadow:0 14px 30px rgba(0,0,0,.12)}html[lang] .navmenu.open{display:flex}html[lang] .navlinks{flex-direction:column;align-items:stretch;gap:0}html[lang] .navlinks a{padding:11px 4px;border-bottom:1px solid var(--line,#dce2e8);font-size:16px}html[lang] .navlinks a.akt{border-bottom:1px solid var(--line,#dce2e8);color:var(--amber-ink,#9a5c08)}html[lang] .navcta{margin:12px 0 0;flex-direction:column;align-items:stretch}html[lang] .navcta .btn{justify-content:center;padding:12px}html[lang] .navcta .btn-ghost{display:inline-flex}html[lang] .navin .navcta-mobile{display:inline-flex}html[lang] .navmob{display:inline-flex;margin-left:auto;font-family:"Sora",system-ui,sans-serif;font-weight:600;font-size:13px;background:var(--amber,#d5850f);color:#1a1204;border-radius:10px;padding:9px 12px;text-decoration:none;white-space:nowrap}html[lang] .navburger{margin-left:8px}html[lang] .navmob.app{background:transparent;border:1px solid var(--line,#dce2e8);color:var(--ink,#15202b);padding:8px 12px}
}
/* 25.09.2026: vier Sprachen im Umschalter – Desktop-Kopfzeile sonst 22–33 px zu breit (gemessen mit Sora) */
@media(min-width:1320.1px) and (max-width:1600px){html[lang^="de"] .navlinks{gap:14px}html[lang^="de"] .navlinks a{font-size:13.5px}html[lang^="de"] .langsw a,html[lang^="de"] .langsw span{padding:5px 6px}}
@media(min-width:1600.1px){html[lang] .navin{max-width:1460px}}

/* 30.09.2026 Kopfzeile neu (Stefan: «gefällt mir nicht, zu voll»): sechs Menüpunkte + Knopf «Adresse prüfen».
   Handy/Tablet (bis 1280 px): im Kopf nur Marke, Knopf «Adresse prüfen» und Menü-Knopf. Prüfung: tools/sprachpruefung/kopfzeile.mjs */
.kopf2 .navmob{box-shadow:0 1px 0 rgba(0,0,0,.06)}
/* Nur Seiten mit der neuen Kopfzeile (Klasse kopf2) – FR/IT/EN mit der bisherigen Kopfzeile bleiben unverändert */
@media(min-width:1280.1px){.kopf2 .navlinks{gap:22px}.kopf2 .navlinks a{font-size:14.5px}.kopf2 .navcta .btn-pri{padding:10px 18px}}
@media(min-width:1280.1px) and (max-width:1600px){html[lang] .kopf2 .navlinks{gap:20px}html[lang] .kopf2 .navlinks a{font-size:14px}}
/* Menü-Knopf: drei Striche übereinander statt nebeneinander (vorher «— — —») */
@media(max-width:1280px){html[lang] .kopf2 .navburger{display:grid;grid-auto-flow:column;grid-template-rows:repeat(3,auto);align-items:center;column-gap:8px}html[lang] .kopf2 .navburger span{margin:2px 0}html[lang] .kopf2 .navburger b{grid-row:1/4}}
@media(max-width:430px){.kopf2 .navin{gap:10px;padding:0 14px}.kopf2 .navburger{padding:9px 9px}.kopf2 .navin .navmob{padding:9px 11px}}
@media(max-width:374px){.kopf2 .bn{font-size:17px}.kopf2 .sig{width:32px;height:32px}.kopf2 .navin .navmob{font-size:12.5px;padding:8px 9px}.kopf2 .bs{letter-spacing:.1em}}