/* Bento: Kacheln aus satten Farbflächen, große Ziffern, klare Navigation.
   Farbe gliedert die Flächen; Zustände stehen zusätzlich immer als Wort da. */
:root{
  /* 16 px on phones/laptops, 18 px at 1920 and 20 px at 2560 (default browser text size).
     rem keeps browser text preferences and zoom available; no CSS zoom/transform. */
  font-size:clamp(1rem,calc(.75rem + .3125vw),1.25rem);
  --grund:#eceef1; --flaeche:#fff; --band:#f1f3f6;
  --tinte:#151a24; --tinte2:#5a6474; --tinte3:#697487; --linie:#e1e5ea;
  --ink:#16233f; --koralle:#ff5a3c; --amber:#ffc247; --teal:#0fae9c; --lila:#6f5cf0;
  --gut:#0c7c5a; --gut-flaeche:#e0f3ec;
  --warn:#8a5d00; --warn-flaeche:#fdf1d8;
  --stop:#b3311f; --stop-flaeche:#ffeae6;
  --ui:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --zier:"Bricolage Grotesque",var(--ui);
  --zahl:"Roboto Mono",ui-monospace,Menlo,monospace;
  --r-gross:22px; --r-klein:13px;
  --seitenbreite:1920px;
  --seitenrand:clamp(16px,4vw,80px);
  --kontrollgroesse:2.75rem;
}
*{box-sizing:border-box}
body{min-height:100vh; margin:0; display:flex; flex-direction:column; background:var(--grund);
  color:var(--tinte); font-family:var(--ui); font-size:1rem; line-height:1.55;
  -webkit-font-smoothing:antialiased}
a{color:inherit; text-underline-offset:2px}

header.balken{width:calc(100% - 2 * var(--seitenrand)); max-width:var(--seitenbreite);
  margin:1.25rem auto 0; background:transparent}
header.balken .innen{position:relative;
  display:flex; align-items:center; gap:1.5rem; min-height:4.75rem; background:var(--flaeche);
  border:1px solid var(--linie); border-radius:1.125rem; padding:.75rem 1.125rem;
  box-shadow:0 2px 8px rgba(22,35,63,.025)}
header.balken .marke{display:inline-flex; flex:0 1 auto; align-items:center; gap:10px;
  min-width:0; padding:0; font-family:var(--zier); font-weight:800; font-size:1.125rem;
  letter-spacing:-.02em; text-decoration:none; color:var(--tinte); white-space:nowrap}
header.balken .marke img{width:1.75rem; height:auto; flex:0 0 auto}
header.balken a{padding:.625rem .75rem; border-radius:.625rem; font-size:1rem; font-weight:700;
  color:var(--tinte2); text-decoration:none}
header.balken a:hover{color:var(--tinte)}
header.balken a.aktiv{background:var(--ink); color:#fff}
.hauptnavigation{display:flex; align-items:center; gap:.25rem; margin:0; white-space:nowrap}
.hauptnavigation a:hover:not(.aktiv){background:var(--band)}
header.balken .rechts{margin-left:auto; display:flex; flex-shrink:0; gap:8px; align-items:center;
  font-size:0.875rem; color:var(--tinte2)}
.hilfeblase{display:flex; width:var(--kontrollgroesse); height:var(--kontrollgroesse); align-items:center; justify-content:center;
  padding:0!important; border-radius:50%!important; background:var(--band); color:var(--tinte2)!important;
  font-family:var(--zier); font-size:1rem!important; font-weight:800!important}
.hilfeblase:hover{background:var(--ink)!important; color:#fff!important}
.kontomenue,.benachrichtigungsmenue{position:relative}
[data-kopfmenue] > summary{list-style:none; -webkit-tap-highlight-color:transparent}
[data-kopfmenue] > summary::-webkit-details-marker{display:none}
.benachrichtigungsmenue > .benachrichtigungsblase{position:relative; display:flex; width:var(--kontrollgroesse); height:var(--kontrollgroesse);
  align-items:center; justify-content:center; padding:0; border-radius:50%; background:var(--band);
  color:var(--tinte2); cursor:pointer}
.benachrichtigungsblase:hover,.benachrichtigungsmenue[open] > .benachrichtigungsblase{
  background:var(--ink); color:#fff}
.benachrichtigungsblase svg{width:1.25rem; height:1.25rem}
.benachrichtigungszaehler{position:absolute; top:-5px; right:-7px; display:flex; min-width:1.125rem;
  height:1.125rem; align-items:center; justify-content:center; padding:0 5px; border:2px solid var(--flaeche);
  border-radius:99px; background:var(--koralle); color:#fff; font-size:0.59375rem; font-weight:800;
  line-height:1}
.benachrichtigungs-popup{position:absolute; z-index:50; top:calc(100% + 10px); right:0;
  width:min(26.25rem,calc(100vw - 48px)); overflow:hidden; border:1px solid var(--linie);
  border-radius:18px; background:var(--flaeche); color:var(--tinte);
  box-shadow:0 18px 45px rgba(22,35,63,.18)}
.popup-kopf{display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px 11px; border-bottom:1px solid var(--linie)}
.popup-kopf strong{font-family:var(--zier); font-size:0.9375rem}
.popup-kopf span{color:var(--tinte3); font-size:0.8125rem}
.popup-liste{max-height:min(22rem,55dvh); overflow:auto}
header.balken .popup-zeile{display:grid; grid-template-columns:8px minmax(0,1fr) auto; gap:10px;
  align-items:start; padding:12px 14px; border-bottom:1px solid var(--linie); border-radius:0;
  color:var(--tinte); font-size:0.875rem; font-weight:500}
header.balken .popup-zeile:hover{background:var(--band)}
.popup-punkt{width:7px; height:7px; margin-top:6px; border-radius:50%; background:transparent}
.popup-zeile.ungelesen .popup-punkt{background:var(--lila)}
.popup-text{display:flex; min-width:0; flex-direction:column; line-height:1.4}
.popup-text strong{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:0.875rem}
.popup-text span{display:-webkit-box; overflow:hidden; color:var(--tinte2); -webkit-box-orient:vertical;
  -webkit-line-clamp:2}
.popup-zeile time{color:var(--tinte3); font-family:var(--zahl); font-size:0.6875rem; white-space:nowrap}
.popup-leer{margin:0; padding:22px 16px; color:var(--tinte2); text-align:center}
.popup-fuss{display:flex; min-height:44px; align-items:center; justify-content:flex-end; gap:14px;
  padding:8px 14px; background:var(--band)}
.popup-fuss form{width:auto; margin:0}
.popup-fuss .linkknopf{font-size:0.8125rem; font-weight:700}
header.balken .popup-fuss a{padding:0; color:var(--lila); font-size:0.8125rem; font-weight:800}

.kontomenue > .kontoknopf,.mobilnavigation > summary{display:flex; align-items:center;
  justify-content:center; gap:.5rem; min-height:var(--kontrollgroesse); padding:.5625rem .75rem; border-radius:.6875rem;
  background:var(--band); color:var(--tinte); font-size:1rem; cursor:pointer}
.kontoknopf > svg,.mobilnavigation > summary svg{width:1.25rem; height:1.25rem; flex-shrink:0}
.kontoknopf > .menuepfeil{width:.875rem; height:.875rem; transition:transform .15s}
.kontomenue[open] .menuepfeil{transform:rotate(180deg)}
.kontomenue[open] > summary,.kontoknopf:hover,.mobilnavigation > summary:hover,
.mobilnavigation[open] > summary{background:var(--ink); color:#fff}
.konto-popup,.mobilnavigation-popup{position:absolute; z-index:50; top:calc(100% + 10px); right:0;
  padding:.5rem; width:min(20rem,calc(100vw - 48px)); background:var(--flaeche);
  border:1px solid var(--linie); border-radius:16px; box-shadow:0 18px 45px rgba(22,35,63,.14)}
.konto-identitaet{display:flex; flex-direction:column; gap:4px; padding:12px;
  margin-bottom:6px; border-bottom:1px solid var(--linie); overflow-wrap:anywhere}
.konto-identitaet strong{font-size:0.9375rem; color:var(--tinte)}
.konto-identitaet span{font-size:0.875rem; color:var(--tinte2)}
.konto-popup form{margin:0}
header.balken .konto-popup a,.konto-popup button{display:block; width:100%; min-height:var(--kontrollgroesse); padding:.6875rem .75rem;
  text-align:left; border-radius:9px; font-size:0.9375rem; font-weight:600; color:var(--tinte)}
header.balken .konto-popup a:hover,.konto-popup button:hover{background:var(--band); text-decoration:none}
.mobilnavigation{display:none}
.mobilnavigation-popup a{display:block}

@media (max-width:1279px){
  .hauptnavigation{display:none}
  .mobilnavigation{display:block}
  .mobilnavigation > summary{width:var(--kontrollgroesse); padding:0}
  .mobilnavigation-popup{right:12px; top:calc(100% + 8px)}
}

main{width:calc(100% - 2 * var(--seitenrand)); max-width:var(--seitenbreite); margin:0 auto;
  padding:1.625rem 0 5rem; flex:1 0 auto; min-width:0}
.formularseite{max-width:70rem; margin:0 auto}
h1{font-family:var(--zier); font-size:clamp(1.75rem,2.2vw,2.25rem); font-weight:800; letter-spacing:-.03em;
  margin:14px 0 0}
h2{font-size:0.875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--tinte2);
  margin:26px 0 10px}
h3{font-size:1rem; font-weight:700; margin:0 0 8px}
.unterzeile{color:var(--tinte2); margin:6px 0 16px; font-size:0.9375rem; max-width:70ch}
.anmeldung{max-width:28rem; margin:3rem auto}
.anmeldung-marke{display:inline-flex; align-items:center; gap:10px; color:var(--tinte2);
  font-size:0.875rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase}
.anmeldung-marke img{width:31px; height:auto}
.seitenfuss{width:100%; padding:0 20px 24px; display:flex; align-items:center; justify-content:center;
  gap:7px; color:var(--tinte3); font-size:0.8125rem}
.magellan-signatur{display:inline-flex; align-items:center; gap:6px; color:var(--tinte2)}
.magellan-signatur img{width:18px; height:auto}
.magellan-signatur strong{font-size:0.8125rem; font-weight:700}

.karte{background:var(--flaeche); border-radius:var(--r-gross); padding:1.5rem; margin-bottom:1.125rem}
.karte.eng{padding:15px 18px}
.reihe{display:flex; gap:14px; flex-wrap:wrap}
.reihe > *{flex:1 1 300px; min-width:0}
.reihe > #admins{flex-basis:100%; order:2}
#admins .admin-gruppe{margin:1.5rem 0}
#admins .admin-gruppe h3{margin:0 0 .75rem}
#admins .admin-kontozeile{display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  margin:.5rem 0; padding:1rem; background:var(--band); border-radius:var(--r-klein)}
#admins .admin-konto-info{flex:1 1 260px; min-width:0; overflow-wrap:anywhere}
#admins .admin-kontoaktionen{display:flex; flex-wrap:wrap; align-items:center; gap:.5rem}
#admins .admin-kontoaktionen form{width:auto; margin:0}
#admins .admin-kontoaktionen .knopf.leise{background:var(--flaeche)}
#admins .admin-rollen-form{max-width:640px}
#admins .admin-neu{border-top:1px solid var(--linie); padding-top:1rem}
#admins .admin-neu form{margin-top:1rem}
.admin-rollendialog{width:min(640px,calc(100vw - 2rem)); max-height:calc(100dvh - 2rem);
  margin:auto; overflow:auto; padding:1.5rem; border:1px solid var(--linie);
  border-radius:var(--r-gross); background:var(--flaeche); color:var(--tinte); font:inherit}
.admin-rollendialog::backdrop{background:rgba(22,35,63,.5)}
.admin-rollendialog p{overflow-wrap:anywhere}
.admin-dialog-kopf,.admin-dialog-aktionen{display:flex; align-items:center; justify-content:space-between; gap:1rem}
.admin-dialog-kopf h2{margin:0}
.admin-dialog-aktionen{justify-content:flex-end; flex-wrap:wrap; margin-top:1rem}
.gitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; margin-bottom:14px}
.gitter > div{background:var(--flaeche); border-radius:var(--r-gross); padding:18px 20px}
.gitter > div:first-child{background:var(--ink); color:#fff}
.gitter > div:first-child .klein{color:#aab6cc}
.wert{font-family:var(--zier); font-size:2.125rem; font-weight:800; letter-spacing:-.04em; line-height:1.05;
  margin-top:4px}
.klein{font-size:0.875rem; color:var(--tinte2)}
.gitter .klein:first-child, .etikett{font-size:0.8125rem; font-weight:800;
  letter-spacing:.12em; text-transform:uppercase; color:var(--tinte3)}

.scroll{overflow-x:auto; background:var(--flaeche); border-radius:var(--r-gross); padding:6px}
table{width:100%; border-collapse:separate; border-spacing:0 7px; font-size:0.9375rem}
th{text-align:left; font-size:0.8125rem; letter-spacing:.11em; text-transform:uppercase; color:var(--tinte3);
  font-weight:800; padding:6px 14px; white-space:nowrap}
td{padding:13px 14px; background:var(--band); font-weight:600; vertical-align:middle}
td:first-child{border-radius:var(--r-klein) 0 0 var(--r-klein)}
td:last-child{border-radius:0 var(--r-klein) var(--r-klein) 0}
td.zahl, th.zahl{text-align:right; font-family:var(--zahl); font-variant-numeric:tabular-nums;
  font-weight:500; white-space:nowrap}
tr.summe td{background:var(--ink); color:#fff; font-weight:800}

label{display:block; font-size:0.8125rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase;
  color:var(--tinte3); margin:0 0 5px}
input,select,textarea{font:inherit; font-size:1rem; color:var(--tinte); background:var(--band);
  width:100%; min-height:var(--kontrollgroesse); border:1px solid transparent; border-radius:.6875rem; padding:.6875rem .875rem}
td input, td select{background:var(--flaeche)}
input.zahl{font-family:var(--zahl); font-size:1rem; text-align:right}
input[type=checkbox]{width:1.25rem; height:1.25rem; min-height:0; flex-shrink:0; accent-color:var(--ink)}
input:focus-visible,select:focus-visible,textarea:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{
  outline:2px solid var(--lila); outline-offset:2px}
.feld{margin-bottom:13px}

.knopf{display:inline-block; background:var(--ink); color:#fff; border:0; border-radius:99px;
  min-height:var(--kontrollgroesse); padding:.6875rem 1.25rem; font:inherit; font-size:1rem; font-weight:800; cursor:pointer;
  text-decoration:none; white-space:nowrap}
.knopf:hover{opacity:.9}
.knopf.leise{background:var(--band); color:var(--tinte)}
.knopf.gefahr{background:var(--stop-flaeche); color:var(--stop)}
.knopf.klein{padding:.6875rem .875rem; font-size:.9375rem}
.linkknopf{appearance:none; border:0; background:transparent; color:inherit; padding:0;
  font:inherit; cursor:pointer; text-decoration:none}
.linkknopf:hover{text-decoration:underline}
.kopfzeile{display:flex; justify-content:space-between; align-items:flex-end; gap:16px; flex-wrap:wrap}
.inline-formular{width:auto; margin-bottom:16px}
.filterleiste{display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 14px}
.filterleiste a{padding:7px 13px; border-radius:99px; background:var(--flaeche); color:var(--tinte2);
  font-size:0.875rem; font-weight:700; text-decoration:none}
.filterleiste a.aktiv{background:var(--ink); color:#fff}
.einstellungen-tabs{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px;
  margin:18px 0 16px; padding:7px; border-radius:18px; background:var(--flaeche)}
.einstellungen-tabs a{display:flex; min-width:0; flex-direction:column; padding:11px 13px;
  border-radius:12px; color:var(--tinte2); text-decoration:none}
.einstellungen-tabs a:hover{background:var(--band); color:var(--tinte)}
.einstellungen-tabs a.aktiv{background:var(--ink); color:#fff}
.einstellungen-tabs strong{font-size:0.9375rem}
.einstellungen-tabs span{overflow:hidden; margin-top:2px; font-size:0.8125rem; line-height:1.35;
  opacity:.72; text-overflow:ellipsis; white-space:nowrap}
.einstellungen-bereich{scroll-margin-top:18px}
.einstellungen-bereich > .knopf{margin:2px 0 22px}
.einstellungen-kopf{display:flex; align-items:flex-start; justify-content:space-between; gap:16px;
  margin-bottom:17px}
.einstellungen-kopf h2{margin:0 0 4px}
.einstellungen-kopf p{max-width:75ch; margin:0; color:var(--tinte2); font-size:0.875rem}
.einstellungen-vorschau-kopf{margin-top:28px}
.einstellungen-detail > summary span{color:var(--tinte2); font-size:0.875rem; font-weight:500}
.benachrichtigungsliste{display:flex; flex-direction:column; gap:8px}
.benachrichtigungszeile{display:grid; grid-template-columns:12px minmax(0,1fr) auto; gap:12px;
  align-items:center; padding:15px 18px; border-radius:var(--r-klein); background:var(--flaeche);
  text-decoration:none}
.benachrichtigungszeile.ungelesen{box-shadow:inset 4px 0 var(--lila)}
.benachrichtigungspunkt{width:8px; height:8px; border-radius:50%; background:transparent}
.benachrichtigungszeile.ungelesen .benachrichtigungspunkt{background:var(--lila)}
.benachrichtigungstext{display:flex; flex-direction:column; min-width:0}
.benachrichtigungstext span{color:var(--tinte2); font-size:0.875rem; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}
.benachrichtigungszeit{font-family:var(--zahl); font-size:0.8125rem; color:var(--tinte3); white-space:nowrap}
.nachricht-meta{display:flex; justify-content:space-between; align-items:center; color:var(--tinte3);
  font-size:0.875rem}
.email-vorschau{border:1px solid var(--linie); border-radius:var(--r-klein); overflow:hidden;
  margin:18px 0}
.email-kopf{background:var(--band); padding:12px 16px; font-size:0.875rem}
.email-kopf div{display:grid; grid-template-columns:58px minmax(0,1fr); gap:8px; padding:3px 0}
.email-kopf span{color:var(--tinte3); font-weight:700}
.email-inhalt{padding:18px; white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--ui)}
.email-status{text-transform:capitalize}

.hilfe-start{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px;
  margin:18px 0 22px}
.hilfe-start a{display:block; padding:17px 18px; border-radius:var(--r-klein); background:var(--flaeche);
  text-decoration:none; font-weight:800}
.hilfe-start a span{display:block; margin-top:4px; color:var(--tinte2); font-size:0.875rem;
  font-weight:500}
.hilfe-schritte{counter-reset:hilfe; display:grid; gap:10px; margin:0; padding:0; list-style:none}
.hilfe-schritte > li{counter-increment:hilfe; position:relative; min-height:46px; padding:11px 12px 11px 54px;
  border-radius:var(--r-klein); background:var(--band)}
.hilfe-schritte > li::before{content:counter(hilfe); position:absolute; top:10px; left:12px; display:flex;
  width:28px; height:28px; align-items:center; justify-content:center; border-radius:50%;
  background:var(--ink); color:#fff; font-family:var(--zahl); font-size:0.875rem; font-weight:700}
.hilfe-schritte strong{display:block}
.hilfe-schritte span{display:block; margin-top:2px; color:var(--tinte2); font-size:0.875rem}
.hilfe-hinweis{border-left:4px solid var(--lila)}
.hilfe-kontakt{display:flex; flex-direction:column; align-items:stretch; gap:18px;
  background:var(--ink); color:#fff}
.hilfe-kontakt h2{color:#aab6cc}
.hilfe-kontakt p{max-width:55ch; margin-bottom:0; color:#d8deea}
.hilfe-kontaktwege{display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:9px; width:100%}
.hilfe-kontaktperson{display:flex; flex-direction:column; gap:4px; min-width:0; padding:14px 15px;
  border-radius:var(--r-klein); background:rgba(255,255,255,.1)}
.hilfe-kontaktperson a{color:#fff; overflow-wrap:anywhere; text-decoration-color:rgba(255,255,255,.35)}
.hilfe-kontaktperson a:hover{text-decoration-color:#fff}
.hilfe-kontaktwege span{color:#aab6cc; font-size:0.8125rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase}
.hilfe-kontaktwege strong{margin-bottom:4px; overflow-wrap:anywhere; font-size:1rem}

.meldung{padding:14px 18px; margin:14px 0; font-size:0.9375rem; border-radius:var(--r-klein);
  background:var(--band)}
.meldung.gut{background:var(--gut-flaeche); color:var(--gut); font-weight:600}
.meldung.demo-hinweis{background:#fff5d9; color:#574415; border:1px solid #e8d49b}
.meldung.schlecht{background:var(--stop-flaeche); color:var(--stop); font-weight:600}

.schild{display:inline-flex; align-items:center; font-size:0.8125rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; padding:4px 10px; border-radius:99px; background:var(--band);
  color:var(--tinte2)}
.schild.offen{background:var(--gut-flaeche); color:var(--gut)}
.schild.zu{background:var(--band); color:var(--tinte2)}
.schild.warn{background:var(--warn-flaeche); color:var(--warn)}
.schild.rot{background:var(--stop-flaeche); color:var(--stop)}

.stufe{background:var(--band); border-radius:var(--r-klein); padding:13px 16px; margin-bottom:8px}
.stufe.erreicht{background:var(--gut-flaeche)}
.stufe.aktiv{background:var(--lila); color:#fff}
.stufe.aktiv .klein{color:#e2ddff}
.stufe.aktiv .schild{background:rgba(255,255,255,.2); color:#fff}
.stufe.aktiv .balken-fortschritt{background:rgba(255,255,255,.25)}
.stufe.aktiv .balken-fortschritt div{background:#fff}
.bedingung{display:flex; justify-content:space-between; gap:12px; padding:4px 0; font-size:0.9375rem}
.balken-fortschritt{height:6px; border-radius:99px; background:#dfe3ea; overflow:hidden; margin-top:4px}
.balken-fortschritt div{height:100%; border-radius:99px; background:var(--tinte2)}
.stufe.erreicht .balken-fortschritt div{background:var(--gut)}

.gebuehren-kurz{display:grid; grid-template-columns:repeat(4,minmax(120px,1fr)) auto; gap:16px;
  align-items:center; color:inherit; text-decoration:none; border:1px solid transparent}
.gebuehren-kurz:hover{border-color:#cfd5df}
.gebuehren-kurz div{display:flex; min-width:0; flex-direction:column}
.gebuehren-kurz span{color:var(--tinte3); font-size:0.8125rem; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase}
.gebuehren-kurz strong{margin-top:3px; font-size:0.9375rem}
.gebuehren-kurz > b{color:var(--lila); white-space:nowrap}
.gebuehren-kpis > div:first-child{background:var(--ink); color:#fff}

.produktgitter{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)); gap:1rem; margin-bottom:1rem}
.produktkarte{overflow:hidden; border-radius:var(--r-gross); background:var(--flaeche);
  box-shadow:0 1px 0 rgba(22,35,63,.04)}
.produktbild{display:flex; height:12rem; align-items:center; justify-content:center; overflow:hidden;
  background:linear-gradient(135deg,#dbe9df,#f0e6d7); color:var(--ink); text-decoration:none}
.produktbild img{width:100%; height:100%; object-fit:cover; transition:transform .25s ease}
.produktbild img.demo-produktbild{object-fit:contain; background:#fafafa}
.demobild-hinweis{margin:0 0 .625rem; color:var(--tinte2); font-size:.75rem; line-height:1.4}
.produktbild:hover img{transform:scale(1.025)}
.produktbild span,.produkt-platzhalter{display:flex; width:78px; height:78px; align-items:center;
  justify-content:center; border-radius:50%; background:rgba(255,255,255,.62); font-family:var(--zier);
  font-size:2.25rem; font-weight:800}
.produktkarten-inhalt{padding:17px 18px 18px}
.produkt-badges{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:9px}
.produktkarte h3{font-family:var(--zier); font-size:1.1875rem; line-height:1.2; margin:0}
.produktkarte h3 a{text-decoration:none}
.produkt-meta{min-height:39px; margin:5px 0 9px}
.produktkarten-preis,.produkt-preis{font-family:var(--zier); font-size:1.6875rem; font-weight:800;
  letter-spacing:-.03em; color:var(--ink)}
.produktkarten-preis small,.produkt-preis small{display:block; color:var(--tinte3); font-family:var(--ui);
  font-size:0.8125rem; font-weight:700; letter-spacing:.04em}
.produktkarten-regeln{display:flex; gap:6px; flex-wrap:wrap; margin:11px 0}
.produktkarten-regeln span{padding:5px 8px; border-radius:8px; background:var(--band);
  color:var(--tinte2); font-size:0.8125rem; font-weight:700}
.coa-link,.produktdetails{display:inline-block; margin:3px 0 10px; color:var(--lila); font-size:0.875rem;
  font-weight:800; text-decoration:none}
.produktdetails{margin:2px 0 0; display:inline-flex; align-items:center; min-height:var(--kontrollgroesse)}
.produkt-eingabe{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:9px;
  padding-top:10px; border-top:1px solid var(--linie)}
.produkt-eingabe .feld{margin-bottom:7px}
.produkt-detail{display:grid; grid-template-columns:minmax(280px,1.1fr) minmax(320px,.9fr); gap:18px;
  align-items:stretch; margin-top:14px}
.produkt-hero{min-height:450px; overflow:hidden; border-radius:var(--r-gross);
  background:linear-gradient(135deg,#dbe9df,#f0e6d7); display:flex; align-items:center; justify-content:center}
.produkt-hero img{width:100%; height:100%; min-height:450px; object-fit:cover}
.produkt-hero:has(.demo-produktbild){background:#fafafa}
.produkt-hero img.demo-produktbild{height:auto; min-height:0; object-fit:contain}
.produkt-info{margin:0; padding:28px}
.produkt-info h1{font-size:2.25rem; margin-top:8px}
.produkt-fakten{display:grid; gap:0; margin:22px 0; border-top:1px solid var(--linie)}
.produkt-fakten div{display:flex; justify-content:space-between; gap:14px; padding:11px 0;
  border-bottom:1px solid var(--linie)}
.produkt-fakten span{color:var(--tinte2); font-size:0.875rem}
.schalterzeile{display:flex; gap:10px; min-height:var(--kontrollgroesse); align-items:flex-start; color:var(--tinte); font-size:1rem;
  font-weight:600; letter-spacing:0; text-transform:none}
.schalterzeile input{margin-top:4px}
.schalterzeile span{display:flex; flex-direction:column}
.schalterzeile small{margin-top:2px; color:var(--tinte2); font-weight:500}
.schalterzeile.zustimmung{margin:16px 0}
.rechtstext div{white-space:pre-wrap; max-width:85ch}
button:disabled{cursor:not-allowed; opacity:.45}
.benachrichtigung-auswahl{border:1px solid var(--linie); border-radius:12px; margin:18px 0; padding:14px 18px; min-width:0}
.benachrichtigung-auswahl legend{font-weight:700; padding:0 6px; max-width:100%; overflow-wrap:anywhere}
.benachrichtigung-auswahl p{margin:0 0 8px}
.benachrichtigung-kanaele{display:flex; gap:12px 28px; flex-wrap:wrap}
.benachrichtigung-kanaele label{display:flex; align-items:center; gap:10px; min-height:44px; margin:0;
  font-size:1rem; text-transform:none; letter-spacing:0}
.benachrichtigung-kanaele input{width:20px; height:20px}
.kopieraktionen{display:inline-flex; gap:6px; flex-wrap:wrap; margin:8px 0 0 10px; vertical-align:middle}

details > summary{cursor:pointer; font-weight:700; font-size:0.9375rem; padding:6px 0}
hr{border:0; border-top:1px solid var(--linie); margin:16px 0}
@media (max-width:900px){
  .gebuehren-kurz{grid-template-columns:1fr 1fr}
  .gebuehren-kurz > b{grid-column:1/-1}
  .produkt-detail{grid-template-columns:1fr}
}
@media (max-width:640px){ .reihe > *{flex-basis:100%} main{padding:1.25rem 0 3.5rem}
  header.balken{margin-top:.75rem} .wert{font-size:1.8125rem}
  header.balken .innen{min-height:66px; padding:10px 12px; gap:8px; border-radius:16px}
  header.balken .marke img{width:30px}
  header.balken .marke span{position:absolute; width:1px; height:1px; padding:0;
    overflow:hidden; clip-path:inset(50%); white-space:nowrap}
  header.balken .rechts{gap:6px}
  .kontoknopf > span,.kontoknopf > .menuepfeil{display:none}
  .kontomenue > .kontoknopf{width:var(--kontrollgroesse); padding:0}
  .kontomenue,.benachrichtigungsmenue{position:static}
  .konto-popup,.benachrichtigungs-popup{right:0; top:calc(100% + 8px); width:min(420px,100%)}
  .karte{padding:20px}
  .knopf{white-space:normal; text-align:center}
  .einstellungen-tabs{grid-template-columns:1fr 1fr; gap:6px; padding:6px}
  .einstellungen-tabs a{padding:10px 11px}
  .hilfe-kontaktwege{grid-template-columns:1fr}
  .gebuehren-kurz{grid-template-columns:1fr}
  .anmeldung{margin:36px auto}
  .anmeldung h1{font-size:clamp(1.375rem,6vw,1.75rem); overflow-wrap:anywhere}
  .bestellabschluss .knopf{width:100%}
  .produkt-fakten div{flex-wrap:wrap; gap:4px 12px}
  .benachrichtigungszeile{grid-template-columns:10px minmax(0,1fr)}
  .benachrichtigungszeit{grid-column:2}
  .produkt-hero,.produkt-hero img{min-height:300px}
  .produkt-info h1{font-size:1.8125rem} }
.bestell-produkte{margin-top:14px; display:grid; gap:8px}
.bestell-produkt{display:flex; gap:6px 12px; align-items:center; flex-wrap:wrap; padding-top:8px; border-top:1px solid var(--linie); overflow-wrap:anywhere}
.bestell-produkt .coa-link,.produkt-dokument .coa-link{margin:0}
.coa-charge,.coa-fehlt{display:inline-block; margin:3px 0 10px; overflow-wrap:anywhere}
.coa-fehlt{color:var(--warn)}
.produkt-dokument,.produkt-coa{margin:12px 0; overflow-wrap:anywhere}
.coa-zuordnung{margin:8px 0 16px; display:flex; gap:8px; align-items:end; flex-wrap:wrap}
.coa-zuordnung label{flex-basis:100%; text-transform:none}
.coa-zuordnung input{flex:1 1 220px}