/* NeXtControl-Website – gemeinsames Stylesheet aller Seiten (Runde 1030 WEB1).
   Handy zuerst (375 px), ab 600 px zwei, ab 900 px drei Spalten. Systemschrift, keine fremden Ressourcen.
   Hell/Dunkel: ohne gespeicherte Wahl gilt die Einstellung des Geräts; die Wahl setzt site.js als data-theme.
   Tippflächen mindestens 44 px. Bewegung nur, wenn das Gerät sie nicht abbestellt hat (prefers-reduced-motion). */
:root{
  --akz:#3b5bdb; --akz2:#4c6ef5; --akz-text:#3451c9; --teal:#14b8b2; --teal-text:#0a7570; --teal-x:#0e9a94; --knopf2:#4263eb;
  --bg:#f3f6fc; --bg2:#e6ecfa; --karte:#fff; --linie:#e0e6f1; --text:#1c2431; --leise:#576173; --feld:#f6f8fc;
  --tint:#eaf0ff; --tint-teal:#e3f7f6; --bald:#626a7a; --rot:#c92a2a;
  --schatten:0 1px 2px rgba(20,32,70,.06),0 10px 28px rgba(20,32,70,.08);
  --rund:16px; --kopf:60px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --akz-text:#9db4ff; --teal-text:#46ddd5; --teal-x:#14b8b2;
    --bg:#0e1116; --bg2:#141a26; --karte:#171c25; --linie:#283142; --text:#e7ecf3; --leise:#a0a9b9; --feld:#11161e;
    --tint:#1d2640; --tint-teal:#14302f; --bald:#7d8697; --rot:#ff8787;
    --schatten:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --akz-text:#9db4ff; --teal-text:#46ddd5; --teal-x:#14b8b2;
  --bg:#0e1116; --bg2:#141a26; --karte:#171c25; --linie:#283142; --text:#e7ecf3; --leise:#a0a9b9; --feld:#11161e;
  --tint:#1d2640; --tint-teal:#14302f; --bald:#7d8697; --rot:#ff8787;
  --schatten:0 1px 2px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.35);
  color-scheme:dark;
}
*,*::before,*::after{ box-sizing:border-box; }
[hidden]{ display:none !important; }
html{ -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body{ margin:0; font-family:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif; font-size:16px;
      line-height:1.6; color:var(--text); background:var(--bg); overflow-x:hidden; }
img,svg{ max-width:100%; }
img{ height:auto; }
a{ color:var(--akz-text); text-underline-offset:2px; }
a:hover{ text-decoration-thickness:2px; }
h1,h2,h3,h4{ line-height:1.25; margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:clamp(30px,7vw,52px); letter-spacing:-.025em; }
h2{ font-size:clamp(24px,4.6vw,34px); }
h3{ font-size:20px; }
h4{ font-size:17px; }
p{ margin:0 0 1em; }
ul,ol{ margin:0 0 1em; padding-left:1.3em; }
:focus-visible{ outline:3px solid var(--akz2); outline-offset:2px; border-radius:6px; }
.container{ width:100%; max-width:1140px; margin:0 auto; padding:0 16px; }
.schmal{ max-width:820px; }
.sym{ width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round;
      stroke-linejoin:round; vertical-align:-4px; }
.sprung{ position:absolute; left:8px; top:-60px; z-index:50; padding:10px 14px; border-radius:10px; background:var(--karte);
         color:var(--text); box-shadow:var(--schatten); }
.sprung:focus{ top:8px; }

/* ---- Kopfleiste ------------------------------------------------------------------------------------------- */
.kopf{ position:sticky; top:0; z-index:40; background:color-mix(in srgb,var(--karte) 88%,transparent);
       border-bottom:1px solid var(--linie); -webkit-backdrop-filter:saturate(1.4) blur(10px); backdrop-filter:saturate(1.4) blur(10px); }
@supports not (background:color-mix(in srgb,red 50%,blue)){ .kopf{ background:var(--karte); } }
.kopf-innen{ display:flex; align-items:center; gap:8px; min-height:var(--kopf); }
.marke{ display:inline-flex; align-items:center; gap:8px; min-height:44px; padding-right:6px; font-weight:800; font-size:22px;
        letter-spacing:-.02em; color:var(--text); text-decoration:none; }
.marke .x{ color:var(--teal-x); }
.marke img{ width:30px; height:30px; }
/* Runde 1102 MARKE: Dachmarke NeXtEnterprise (nextenterprise.net) – Zeichen + Schriftzug zweizeilig, eng */
.marke-dach{ gap:9px; }
.marke-dach img{ width:34px; height:34px; }
.marke-zeilen{ display:flex; flex-direction:column; line-height:.9; letter-spacing:-.01em; }
.marke-zeilen > span:first-child{ font-size:19px; }
.marke-zeilen > span:last-child{ font-size:15.5px; }
/* Runde 1102 (ui-1102 WEB-KOPF): Produktseiten – Zeichen + Name, darunter klein „von NeXtEnterprise“ */
.marke-produkt .marke-zeilen > span:first-child{ font-size:20px; }
.marke-produkt .marke-zeilen > .marke-unter{ font-size:11px; font-weight:600; letter-spacing:0; color:var(--leise); }
.hauptnav{ display:none; }
.hauptnav a{ display:flex; align-items:center; min-height:44px; padding:0 12px; border-radius:10px; color:var(--text);
             text-decoration:none; font-weight:600; font-size:15px; }
.hauptnav a:hover{ background:var(--tint); color:var(--akz-text); }
.hauptnav a[aria-current="page"]{ color:var(--akz-text); background:var(--tint); }
.kopf-knoepfe{ margin-left:auto; display:flex; align-items:center; gap:6px; }
.rund{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius:12px;
       border:1px solid var(--linie); background:var(--feld); color:var(--leise); cursor:pointer; font:inherit; }
.rund:hover{ color:var(--akz-text); border-color:var(--akz2); }
.rund svg{ display:block; }
.kopf.nav-offen .hauptnav{ display:flex; flex-direction:column; position:absolute; left:0; right:0; top:100%; padding:8px 16px 16px;
       background:var(--karte); border-bottom:1px solid var(--linie); box-shadow:var(--schatten); }
.kopf.nav-offen .hauptnav a{ min-height:48px; font-size:17px; }
@media (min-width:900px){
  .hauptnav{ display:flex; gap:2px; margin-left:18px; }
  .kopf.nav-offen .hauptnav{ position:static; flex-direction:row; padding:0; box-shadow:none; border:0; background:none; }
  .menue-knopf{ display:none; }
}

/* ---- Knöpfe ----------------------------------------------------------------------------------------------- */
.knopf{ display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:10px 20px;
        border-radius:12px; border:1px solid transparent; font:inherit; font-weight:650; font-size:16px; line-height:1.25;
        text-align:center; text-decoration:none; cursor:pointer; color:#fff;
        background:linear-gradient(135deg,var(--akz),var(--knopf2)); box-shadow:0 8px 20px rgba(59,91,219,.28);
        transition:transform .15s, filter .15s; }
.knopf:hover{ filter:brightness(1.06); text-decoration:none; }
.knopf.zweit{ color:var(--akz-text); background:var(--karte); border-color:var(--linie); box-shadow:none; }
.knopf.zweit:hover{ border-color:var(--akz2); }
.knopf.hell{ color:#2b46c0; background:#fff; box-shadow:0 8px 22px rgba(10,20,60,.22); }
.knopf.hell-zweit{ color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.55); box-shadow:none; }
.knopf[aria-disabled="true"],.knopf.ist-bald{ cursor:default; color:var(--bald); background:var(--feld); border-color:var(--linie);
        box-shadow:none; filter:none; }
.k-zeilen{ display:flex; flex-direction:column; align-items:flex-start; text-align:left; line-height:1.25; }
.k-zeilen .bld{ font-size:12px; font-weight:400; }
.k-zeilen .bld:empty{ display:none; }
.k-bald{ display:none; }
.zu-bald .k-ok,.ist-bald .k-ok{ display:none; }
.zu-bald .k-bald,.ist-bald .k-bald{ display:inline; }
.knopfreihe{ display:flex; flex-wrap:wrap; gap:10px; margin:22px 0 0; }
.knopfreihe .knopf{ flex:1 1 220px; }
@media (min-width:600px){ .knopfreihe .knopf{ flex:0 0 auto; } }

/* ---- Schnellhilfe-Band ------------------------------------------------------------------------------------ */
.band{ color:#fff; background:linear-gradient(120deg,#2f4ccc 0%,#3b5bdb 70%,#2f6fd0 100%); }
.band-innen{ display:flex; flex-direction:column; gap:14px; padding-top:18px; padding-bottom:18px; }
.band-titel{ margin:0; font-weight:750; font-size:19px; }
.band-unter{ margin:2px 0 0; font-size:15px; opacity:.92; }
.band-knoepfe{ display:flex; flex-wrap:wrap; gap:10px; }
.band-knoepfe .knopf{ flex:1 1 210px; }
@media (min-width:900px){
  .band-innen{ flex-direction:row; align-items:center; justify-content:space-between; }
  .band-knoepfe .knopf{ flex:0 0 auto; }
}

/* ---- Abschnitte ------------------------------------------------------------------------------------------- */
.abschnitt{ padding:56px 0; scroll-margin-top:var(--kopf); }
.abschnitt.karte-bg{ background:var(--karte); border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); }
[id]{ scroll-margin-top:calc(var(--kopf) + 12px); }
.einstieg{ padding:52px 0 44px; background:radial-gradient(900px 420px at 85% -10%,rgba(76,110,245,.20),transparent 60%),
          radial-gradient(700px 380px at 0% 110%,rgba(20,184,178,.14),transparent 60%),linear-gradient(180deg,var(--bg2),var(--bg)); }
.vorzeile{ margin:0 0 10px; font-weight:700; font-size:14px; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-text); }
.einleitung{ font-size:18px; color:var(--leise); max-width:46em; }
.einstieg .einleitung{ font-size:clamp(17px,2.4vw,20px); }
.logoreihe{ display:flex; gap:14px; margin-top:28px; }
.logoreihe img{ width:44px; height:44px; }
.untertitel{ margin:0; color:var(--leise); font-weight:600; }
.klein{ font-size:14px; color:var(--leise); }
.hinweis{ font-size:15px; color:var(--leise); margin-top:14px; }
.zentriert{ text-align:center; }

/* ---- Raster ----------------------------------------------------------------------------------------------- */
.raster{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:600px){ .raster.zwei,.raster.drei,.raster.kacheln{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .raster.drei,.raster.kacheln{ grid-template-columns:repeat(3,1fr); gap:18px; } }

/* ---- Produktwahl ------------------------------------------------------------------------------------------ */
.pkarte{ display:flex; flex-direction:column; gap:6px; padding:22px; border-radius:var(--rund); background:var(--karte);
         border:1px solid var(--linie); box-shadow:var(--schatten); color:var(--text); text-decoration:none;
         transition:transform .15s, border-color .15s; }
.pkarte:hover{ border-color:var(--akz2); }
.pkarte img{ width:52px; height:52px; margin-bottom:6px; }
.pkarte h3{ margin:0; font-size:22px; }
.pkarte p{ margin:0; }
.pkarte .pk-text{ margin:6px 0 4px; color:var(--leise); }
.pkarte .mehr{ margin-top:auto; padding-top:10px; display:inline-flex; align-items:center; gap:6px; font-weight:700; color:var(--akz-text); }
.chips{ list-style:none; padding:0; margin:6px 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.chips li{ padding:3px 10px; border-radius:999px; font-size:13px; font-weight:600; background:var(--tint); color:var(--akz-text); }
.chips li.bald{ background:var(--feld); color:var(--leise); border:1px dashed var(--linie); }

/* ---- Produkt-Abschnitt ------------------------------------------------------------------------------------ */
.p-kopf{ display:grid; gap:22px; align-items:center; margin-bottom:30px; }
@media (min-width:900px){ .p-kopf{ grid-template-columns:3fr 2fr; gap:40px; } }
.p-titel{ display:flex; align-items:center; gap:14px; margin-bottom:14px; }
.p-titel img{ width:56px; height:56px; }
.p-titel h1,.p-titel h2{ margin:0; }
.bildflaeche{ border-radius:20px; padding:18px; background:linear-gradient(150deg,#e9eefc,#dde5fb); border:1px solid var(--linie); }
:root[data-theme="dark"] .bildflaeche{ background:linear-gradient(150deg,#1d263a,#151c2b); }
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .bildflaeche{ background:linear-gradient(150deg,#1d263a,#151c2b); } }
.bildflaeche img{ display:block; width:100%; }
.unter-titel{ margin-top:36px; }
.kachel{ padding:20px; border-radius:var(--rund); background:var(--karte); border:1px solid var(--linie); }
.karte-bg .kachel,.karte-bg .dl{ background:var(--bg); }
.kachel h4,.kachel h3{ margin:12px 0 6px; font-size:17px; }
.kachel p{ margin:0; color:var(--leise); font-size:15px; }
.k-sym{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius:12px;
        background:var(--tint); color:var(--akz-text); }
.k-sym .sym{ width:22px; height:22px; }
.kachel:nth-child(even) .k-sym{ background:var(--tint-teal); color:var(--teal-text); }
.ausserdem{ margin-top:16px; color:var(--leise); font-size:15px; }

/* ---- Download-Karten -------------------------------------------------------------------------------------- */
.dl{ display:flex; flex-direction:column; gap:8px; padding:20px; border-radius:var(--rund); background:var(--karte);
     border:1px solid var(--linie); }
.dl-kopf{ display:flex; gap:12px; align-items:flex-start; }
.dl-kopf img,.dl-sym{ width:40px; height:40px; flex:none; }
.dl-sym{ display:inline-flex; align-items:center; justify-content:center; border-radius:11px; background:var(--tint); color:var(--akz-text); }
.dl h4,.dl h3{ margin:0; font-size:17px; }
.dl-plat{ margin:2px 0 0; font-size:14px; color:var(--leise); }
.dl-text{ margin:0; font-size:15px; color:var(--leise); }
.dl-ver,.dl .ver{ margin:0; font-size:12px; font-weight:400; white-space:nowrap; color:var(--text); }
.dl-meta{ margin:0; font-size:13.5px; color:var(--leise); }
.dl-ver:empty,.dl-meta:empty{ display:none; }
.dl-ver b{ font-weight:inherit; }   /* Runde 1103 (installer-1103): Mac-Zeile wie Windows, nicht fett */
.dl .knopf{ margin-top:auto; width:100%; }
.dl-baldtext{ display:none; margin:0; font-size:14px; color:var(--leise); }
.zu-bald .dl-baldtext{ display:block; }
.zu-bald h4,.zu-bald h3,.zu-bald .dl-kopf img{ opacity:.75; }
.dl-neu{ font-size:14px; }
.dl-neu summary{ cursor:pointer; min-height:44px; display:flex; align-items:center; gap:8px; color:var(--akz-text); font-weight:600; list-style:none; }
.dl-neu summary::-webkit-details-marker{ display:none; }
.dl-neu summary::before{ content:""; width:7px; height:7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
                         transform:rotate(-45deg); transition:transform .15s; }
.dl-neu[open] > summary::before{ transform:rotate(45deg); }
.dl-neu ul{ margin:0 0 4px; color:var(--leise); }
.mac-wahl{ margin:14px 0 0; font-size:15px; color:var(--leise); }
.handy-hinweis{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:16px 0 0; padding:14px 16px; border-radius:14px;
                background:var(--tint); font-size:15px; }
.handy-hinweis span{ flex:1 1 200px; }
@media (min-width:761px){ .nur-handy{ display:none !important; } }
@media (max-width:599px){ .nur-gross{ display:none !important; } }

/* ---- Aufklapper, Schritte, Listen ------------------------------------------------------------------------- */
.aufklapp{ margin-top:14px; border:1px solid var(--linie); border-radius:14px; background:var(--karte); }
.karte-bg .aufklapp{ background:var(--bg); }
.aufklapp>summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; min-height:52px; padding:10px 16px;
                   font-weight:650; }
.aufklapp>summary::-webkit-details-marker{ display:none; }
.aufklapp>summary::before{ content:""; width:9px; height:9px; flex:none; border-right:2px solid currentColor; border-bottom:2px solid currentColor;
                   transform:rotate(-45deg); transition:transform .15s; margin-right:4px; }
.aufklapp[open]>summary::before{ transform:rotate(45deg); }
.aufklapp>summary:hover{ color:var(--akz-text); }
.aufklapp .innen{ padding:0 18px 14px; color:var(--leise); }
.aufklapp .innen li{ margin-bottom:6px; }
.aufklapp .innen b,.aufklapp .innen strong{ color:var(--text); }
.schritte{ list-style:none; padding:0; margin:0; counter-reset:schritt; display:grid; gap:12px; }
.schritte li{ counter-increment:schritt; position:relative; padding:4px 0 4px 52px; min-height:40px; }
.schritte li::before{ content:counter(schritt); position:absolute; left:0; top:0; width:38px; height:38px; border-radius:50%;
                      display:flex; align-items:center; justify-content:center; font-weight:750; color:#fff;
                      background:linear-gradient(135deg,var(--akz),var(--akz2)); }
.anfang{ display:grid; gap:20px; margin-top:30px; }
@media (min-width:900px){ .anfang.zwei{ grid-template-columns:1fr 1fr; } }
.anfang-box{ padding:22px; border-radius:var(--rund); background:var(--karte); border:1px solid var(--linie); }
.karte-bg .anfang-box{ background:var(--bg); }
.anfang-box h3,.anfang-box h4{ margin-top:0; }
.weiterlinks{ display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:24px; }
.weiterlinks a{ display:inline-flex; align-items:center; gap:6px; min-height:44px; font-weight:700; text-decoration:none; }
.weiterlinks a:hover{ text-decoration:underline; }
.haken-liste{ list-style:none; padding:0; margin:18px 0 0; display:grid; gap:8px; }
.haken-liste li{ position:relative; padding-left:30px; }
.haken-liste li::before{ content:""; position:absolute; left:4px; top:.5em; width:12px; height:7px; border-left:2.5px solid var(--teal);
                         border-bottom:2.5px solid var(--teal); transform:rotate(-45deg); }
.gruppe{ margin-top:26px; }
.gruppe h3{ display:flex; align-items:center; gap:10px; }
.gruppe ul{ color:var(--leise); }
.gruppe li{ margin-bottom:2px; }
.gruppe li a{ display:inline-block; padding:6px 0; }

/* ---- Konto, Daten, Fragen --------------------------------------------------------------------------------- */
.konto-raster{ display:grid; gap:24px; }
@media (min-width:900px){ .konto-raster{ grid-template-columns:3fr 2fr; gap:40px; align-items:start; } }
.kasten{ padding:24px; border-radius:var(--rund); background:var(--karte); border:1px solid var(--linie); box-shadow:var(--schatten); }
.kasten h3{ margin-top:0; }
.kasten .knopf{ width:100%; }
.wege{ list-style:none; padding:0; margin:26px 0 0; display:grid; gap:14px; }
@media (min-width:900px){ .wege{ grid-template-columns:repeat(3,1fr); } }
.wege li{ display:flex; gap:14px; padding:20px; border-radius:var(--rund); background:var(--bg); border:1px solid var(--linie); }
.wege h3{ font-size:18px; margin:4px 0 6px; }
.wege p{ margin:0; color:var(--leise); font-size:15px; }
.w-nr{ width:38px; height:38px; flex:none; display:flex; align-items:center; justify-content:center; border-radius:50%;
       font-weight:750; color:var(--teal-text); background:var(--tint-teal); }
.wege li:last-child .w-nr{ color:var(--akz-text); background:var(--tint); }
.fakten{ list-style:none; padding:0; margin:24px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.fakten li{ display:flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; background:var(--bg);
            border:1px solid var(--linie); font-weight:600; font-size:15px; }
.fakten .sym{ color:var(--teal-text); }
.fragen details{ border-bottom:1px solid var(--linie); }
.fragen summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between; gap:12px;
                 min-height:56px; padding:10px 0; font-weight:650; font-size:17px; }
.fragen summary::-webkit-details-marker{ display:none; }
.fragen summary::after{ content:"+"; flex:none; width:30px; height:30px; display:flex; align-items:center; justify-content:center;
                        border-radius:50%; background:var(--tint); color:var(--akz-text); font-size:20px; line-height:1; }
.fragen details[open] summary::after{ content:"–"; }
.fragen details p{ margin:0 0 16px; color:var(--leise); }

/* ---- Unterseiten ------------------------------------------------------------------------------------------ */
.seitenkopf{ padding:40px 0 28px; background:linear-gradient(180deg,var(--bg2),var(--bg)); }
.seitenkopf .einleitung{ margin-bottom:0; }
.inhalt-liste{ list-style:none; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:8px; }
.inhalt-liste a{ display:inline-flex; align-items:center; min-height:44px; padding:0 14px; border-radius:999px; background:var(--karte);
                 border:1px solid var(--linie); font-weight:600; text-decoration:none; color:var(--text); }
.inhalt-liste a:hover{ border-color:var(--akz2); color:var(--akz-text); }
.anleitung{ margin-top:18px; }
.anleitung h3{ margin-top:30px; }
.anleitung .schritte{ margin-top:12px; }
.weiterleitung{ min-height:70vh; display:flex; align-items:center; justify-content:center; text-align:center; padding:40px 16px; }

/* ---- Kontaktformular -------------------------------------------------------------------------------------- */
.formular{ display:grid; gap:16px; }
.formular .feld{ display:grid; gap:6px; }
.formular label{ font-weight:650; }
.formular input,.formular textarea{ width:100%; min-height:48px; padding:12px 14px; border-radius:12px; border:1px solid var(--linie);
        background:var(--feld); color:var(--text); font:inherit; font-size:16px; }
.formular textarea{ min-height:190px; resize:vertical; line-height:1.5; }
.formular input:focus,.formular textarea:focus{ outline:3px solid var(--akz2); outline-offset:1px; border-color:var(--akz2); }
.formular [aria-invalid="true"]{ border-color:var(--rot); }
.formular .klein{ margin:0; }
.formular .knopf{ justify-self:stretch; }
@media (min-width:600px){ .formular .knopf{ justify-self:start; } }
.zaehler{ margin:0; font-size:13px; color:var(--leise); text-align:right; }
.hp-feld{ position:absolute !important; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden; }
.meldung{ margin:0; min-height:1.6em; font-weight:650; }
.meldung.ok{ color:var(--teal-text); }
.meldung.fehler{ color:var(--rot); }

/* ---- Fuß -------------------------------------------------------------------------------------------------- */
.fuss{ padding:44px 0 34px; background:var(--karte); border-top:1px solid var(--linie); font-size:15px; }
.fuss-raster{ display:grid; gap:26px; }
@media (min-width:900px){ .fuss-raster{ grid-template-columns:2fr 1fr 1fr; } }
.fuss-titel{ margin:0 0 10px; font-weight:750; }
.fuss ul{ list-style:none; padding:0; margin:0; }
.fuss li a{ display:inline-flex; align-items:center; min-height:44px; color:var(--leise); text-decoration:none; }
.fuss li a:hover{ color:var(--akz-text); text-decoration:underline; }
.versionen{ margin:0; display:grid; grid-template-columns:minmax(0,1fr); gap:2px 16px; }
@media (min-width:600px){ .versionen{ grid-template-columns:auto minmax(0,1fr); } }
.versionen dt{ color:var(--leise); }
.versionen dd{ margin:0 0 8px; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; font-size:14px; overflow-wrap:anywhere; }
@media (min-width:600px){ .versionen dd{ margin:0; } }
.copy{ margin:30px 0 2px; color:var(--leise); text-align:center; }
.copy a{ display:inline-block; padding:8px 0; }
.site{ display:block; padding:10px 0; text-align:center; color:var(--akz-text); text-decoration:none; }

/* Rechtstexte und Anleitungen (Datenschutz, Impressum, Nutzungsbedingungen, Mac-Anleitung) – Inhalt unverändert */
.rechtstext{ --warn:#fff8e6; --warnlinie:#f0d999; --warntext:#6e5200; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .rechtstext{ --warn:#2a2413; --warnlinie:#5c4a1e; --warntext:#e8c76a; }
}
:root[data-theme="dark"] .rechtstext{ --warn:#2a2413; --warnlinie:#5c4a1e; --warntext:#e8c76a; }
.rechtstext{ font-size:16px; line-height:1.7; overflow-wrap:break-word; }
.rechtstext h1{ font-size:clamp(28px,6vw,40px); margin:0 0 .35em; }
.rechtstext h2{ font-size:clamp(19px,3.6vw,22px); margin:2em 0 .5em; scroll-margin-top:calc(var(--kopf) + 12px); }
.rechtstext h3{ font-size:17px; margin:1.4em 0 .4em; scroll-margin-top:calc(var(--kopf) + 12px); }
.rechtstext p,.rechtstext li,.rechtstext address{ color:var(--leise); margin:0 0 .7em; }
.rechtstext p b,.rechtstext li b,.rechtstext address b{ color:var(--text); font-weight:600; }
.rechtstext ul{ margin:0 0 .8em; padding-left:22px; }
.rechtstext li{ margin-bottom:.35em; }
.rechtstext address{ font-style:normal; }
.rechtstext a{ color:var(--akz-text); }
.rechtstext .stand,.rechtstext .sub{ font-size:14px; margin:0 0 1.6em; }
.rechtstext .hl,.rechtstext .tipp{ background:var(--karte); border:1px solid var(--linie); border-radius:var(--rund); padding:16px 18px; margin:18px 0 8px; box-shadow:var(--schatten); }
.rechtstext .hl p:last-child,.rechtstext .tipp p:last-child{ margin-bottom:0; }
.rechtstext .inhalt{ list-style:none; padding:16px 18px; margin:18px 0 8px; background:var(--karte); border:1px solid var(--linie); border-radius:var(--rund); }
.rechtstext .inhalt li{ font-size:15px; margin:0 0 6px; break-inside:avoid; }
@media (min-width:700px){ .rechtstext .inhalt{ columns:2; column-gap:28px; } }
.rechtstext .sep{ margin:28px 0 0; padding-top:20px; border-top:1px solid var(--linie); }
.rechtstext .schritt{ display:flex; gap:14px; align-items:flex-start; padding:20px 0; border-top:1px solid var(--linie); }
.rechtstext .schritt .n{ flex:0 0 auto; width:30px; height:30px; border-radius:50%; background:linear-gradient(135deg,var(--akz),var(--akz2)); color:#fff; display:grid; place-items:center; font-size:14px; font-weight:700; margin-top:2px; }
.rechtstext .schritt .txt{ flex:1 1 auto; min-width:0; }
.rechtstext .schritt h2{ font-size:18px; margin:2px 0 .45em; }
.rechtstext .warn{ background:var(--warn); border:1px solid var(--warnlinie); border-radius:12px; padding:12px 14px; margin:12px 0 8px; }
.rechtstext .warn p,.rechtstext .warn p b{ color:var(--warntext); margin:0; }
.rechtstext .tipp{ box-shadow:none; background:var(--feld); padding:12px 14px; border-radius:12px; }
.rechtstext .fertig{ background:linear-gradient(135deg,var(--akz),var(--akz2)); color:#fff; border-radius:var(--rund); padding:16px 18px; margin-top:22px; }
.rechtstext .fertig p,.rechtstext .fertig p b{ color:#fff; margin:0; }
.rechtstext kbd{ font-family:inherit; background:var(--feld); border:1px solid var(--linie); border-radius:6px; padding:1px 6px; font-size:14px; color:var(--text); white-space:nowrap; }

@media (prefers-reduced-motion:no-preference){
  html{ scroll-behavior:smooth; }
  .pkarte:hover{ transform:translateY(-2px); }
  .knopf:not([aria-disabled="true"]):not(.ist-bald):hover{ transform:translateY(-1px); }
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; }
}
@media print{
  .kopf,.band,.knopf,.handy-hinweis{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ---- Runde 1031 WEB: Steckbrief, Programmwahl, Downloads auf einen Blick, Prüfsumme -------------------------- */
.abschnitt.eng{ padding-top:0; }
.seitenkopf+.abschnitt.eng{ padding-top:28px; padding-bottom:8px; }
.chips li.preis{ background:var(--tint-teal); color:var(--teal-text); }
.steckbrief{ display:grid; gap:10px; grid-template-columns:1fr; margin:0 0 30px; }
@media (min-width:600px){ .steckbrief{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .steckbrief{ grid-template-columns:repeat(4,1fr); } }
.steckbrief>div{ padding:16px 18px; border-radius:14px; background:var(--bg); border:1px solid var(--linie); }
.karte-bg .steckbrief>div{ background:var(--bg); }
.steckbrief dt{ margin:0 0 6px; font-size:13px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-text); }
.steckbrief dd{ margin:0; font-size:15px; color:var(--text); }
.wahl{ list-style:none; padding:0; margin:0 0 12px; display:grid; gap:10px; }
.wahl a{ display:flex; flex-direction:column; gap:4px; min-height:56px; justify-content:center; padding:14px 18px; border-radius:14px;
         background:var(--karte); border:1px solid var(--linie); text-decoration:none; color:var(--text); }
.wahl a:hover{ border-color:var(--akz2); }
.wahl .w-ziel{ font-weight:600; }
.wahl .w-prog{ display:inline-flex; align-items:center; gap:6px; font-weight:750; color:var(--akz-text); }
@media (min-width:760px){
  .wahl a{ flex-direction:row; align-items:center; justify-content:space-between; gap:16px; }
  .wahl .w-prog{ flex:none; }
}
.dl-tafel{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:8px; }
@media (min-width:900px){ .dl-tafel{ grid-template-columns:repeat(2,1fr); gap:10px 14px; } }
.dl-zeile{ display:flex; flex-direction:column; gap:2px; min-height:56px; justify-content:center; padding:12px 18px; border-radius:14px;
           background:var(--karte); border:1px solid var(--linie); text-decoration:none; color:var(--text); }
.dl-zeile:hover{ border-color:var(--akz2); }
.dz-name b{ font-weight:700; }
.dz-plat{ margin-left:8px; font-size:14px; color:var(--leise); }
.dz-ver{ font-size:12px; font-weight:400; color:var(--leise); overflow-wrap:anywhere; }
.dl-zeile.zu-ok .dz-ver{ color:var(--teal-text); }
.dl-zeile.zu-bald .dz-ver{ color:var(--bald); font-style:italic; }
@media (min-width:600px){
  .dl-zeile{ flex-direction:row; align-items:center; justify-content:space-between; gap:14px; }
  .dz-ver{ text-align:right; flex:none; max-width:55%; }
}
.dl-erkannt{ color:var(--teal-text); font-weight:600; }
.dl-sha-wert{ margin:0 0 6px; font-size:12.5px; font-family:ui-monospace,"Cascadia Mono",Consolas,monospace; overflow-wrap:anywhere; word-break:break-all;
              user-select:all; color:var(--text); }
.dl-kopie{ min-height:36px; padding:4px 14px; font-size:14px; margin:0 0 8px; }
.dl-sha-fassung{ margin:2px 0 6px; font-size:13px; }
.dl-sha-fassung summary{ min-height:32px; }
.dl-sha-hinweis{ margin:0 0 6px; font-size:13px; color:var(--leise); }
/* Runde 1102 (pruefung2 W2-1): „Erste Schritte“ zählt nur sichtbare Abschnitte – verborgene (hidden) Server-Abschnitte
   unterbrechen die Nummerierung nicht. */
main{ counter-reset:es-nr; }
h2.es-nr::before{ counter-increment:es-nr; content:counter(es-nr) ". "; }
.dl-neu-sprache{ margin:6px 0 0; font-size:12.5px; color:var(--leise); font-style:italic; }

/* ---- Runde 1103: Funktionsseiten (funktionen.html), Galerie mit großer Ansicht, Tabellen ----------------------- */
.sr{ position:absolute !important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.fk-kopf{ padding:48px 0 34px; background:radial-gradient(900px 420px at 90% -20%,rgba(76,110,245,.22),transparent 60%),
          radial-gradient(700px 360px at -5% 120%,rgba(20,184,178,.16),transparent 60%),linear-gradient(180deg,var(--bg2),var(--bg)); }
.fk-kopf .einleitung{ margin-bottom:0; }
.fk-zahlen{ list-style:none; padding:0; margin:20px 0 0; display:flex; flex-wrap:wrap; gap:10px; }
.fk-zahlen li{ display:flex; align-items:baseline; gap:6px; padding:10px 16px; border-radius:14px; background:var(--karte);
               border:1px solid var(--linie); box-shadow:var(--schatten); color:var(--leise); font-weight:600; }
.fk-zahlen li img{ width:28px; height:28px; align-self:center; }
.fk-zahlen b{ font-size:24px; font-weight:800; color:var(--akz-text); letter-spacing:-.02em; }
.fk-sprung .inhalt-liste{ margin-top:20px; }
.fk-gkopf{ display:flex; gap:16px; align-items:flex-start; margin-bottom:24px; }
.fk-gkopf .k-sym{ flex:none; width:52px; height:52px; border-radius:14px; }
.fk-gkopf .k-sym .sym{ width:26px; height:26px; }
.fk-gkopf h2{ margin:0 0 4px; }
.fk-gkopf .einleitung{ margin:0; font-size:17px; }
.karte-bg .fk-gkopf .k-sym{ background:var(--tint-teal); color:var(--teal-text); }
.fk-raster{ display:grid; gap:14px; grid-template-columns:1fr; }
@media (min-width:600px){ .fk-raster{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .fk-raster{ grid-template-columns:repeat(3,1fr); gap:16px; } }
.fk-karte{ display:flex; flex-direction:column; gap:8px; padding:18px 18px 16px; border-radius:var(--rund); background:var(--karte);
           border:1px solid var(--linie); transition:border-color .15s, transform .15s, box-shadow .15s; }
.karte-bg .fk-karte{ background:var(--bg); }
.fk-karte:hover{ border-color:var(--akz2); box-shadow:var(--schatten); }
.fk-karte h3{ margin:0; font-size:17px; }
.fk-karte p{ margin:0; color:var(--leise); font-size:15px; }
.fk-platt{ list-style:none; padding:6px 0 0; margin:auto 0 0; display:flex; flex-wrap:wrap; gap:6px; }
.fk-platt li{ padding:2px 9px; border-radius:999px; font-size:12.5px; font-weight:650; background:var(--tint); color:var(--akz-text); }
.fk-platt li.fk-test{ background:transparent; color:var(--leise); border:1px dashed var(--linie); }
.fk-marke{ display:inline-block; margin-left:6px; padding:1px 8px; border-radius:999px; font-size:11.5px; font-weight:700;
           vertical-align:2px; white-space:nowrap; background:var(--tint-teal); color:var(--teal-text); }
/* Galerie: erstes Bild groß, die übrigen zu zweit; je Thema das passende Bild */
.galerie{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:760px){ .galerie{ grid-template-columns:repeat(2,1fr); } .galerie .gal-eintrag:first-child{ grid-column:1/-1; } }
.gal-eintrag{ margin:0; }
.gal-knopf{ display:block; width:100%; padding:0; border:1px solid var(--linie); border-radius:16px; overflow:hidden;
            background:var(--karte); box-shadow:var(--schatten); cursor:zoom-in; font:inherit; }
.gal-knopf img{ display:block; width:100%; height:auto; }
.bildflaeche.echt{ padding:0; overflow:hidden; background:none; box-shadow:var(--schatten); }
.bildflaeche.echt .gal-knopf{ border:0; border-radius:0; box-shadow:none; }
.gal-knopf img.gal-hoch{ width:auto; max-width:100%; max-height:560px; margin:0 auto; }
.gal-eintrag figcaption{ margin:10px 2px 0; font-size:15px; color:var(--leise); }
.gal-dunkel{ display:none !important; }
:root[data-theme="dark"] .gal-hell{ display:none !important; }
:root[data-theme="dark"] .gal-dunkel{ display:block !important; }
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gal-hell{ display:none !important; }
  :root:not([data-theme="light"]) .gal-dunkel{ display:block !important; }
}
.lightbox{ width:100vw; max-width:100vw; height:100vh; max-height:100vh; margin:0; padding:16px; border:0; background:transparent; }
.lightbox::backdrop{ background:rgba(6,9,16,.9); }
.lb-innen{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; }
.lb-innen img{ max-width:100%; max-height:calc(100vh - 150px); width:auto; height:auto; border-radius:12px;
               box-shadow:0 20px 60px rgba(0,0,0,.5); background:#fff; }
.lb-text{ margin:0; max-width:60em; text-align:center; color:#e7ecf3; font-size:15px; }
.lb-leiste{ display:flex; gap:12px; }
.lb-knopf{ width:48px; height:48px; font-size:22px; color:#fff; background:rgba(255,255,255,.12); border-color:rgba(255,255,255,.35); }
.lb-knopf:hover{ color:#fff; background:rgba(255,255,255,.22); border-color:#fff; }
/* Tabellen: „Was läuft wo?“ und der Vergleich der Programme */
.fk-tabelle-rahmen{ overflow-x:auto; border:1px solid var(--linie); border-radius:var(--rund); background:var(--karte); }
.karte-bg .fk-tabelle-rahmen{ background:var(--bg); }
.fk-tabelle{ width:100%; border-collapse:collapse; font-size:14.5px; }
.fk-tabelle th,.fk-tabelle td{ padding:9px 6px; border-bottom:1px solid var(--linie); text-align:center; vertical-align:middle; }
.fk-tabelle thead th{ font-size:12.5px; font-weight:750; color:var(--leise); letter-spacing:.02em; overflow-wrap:anywhere; }
.fk-tabelle thead th:first-child,.fk-tabelle th[scope="row"]{ text-align:left; padding-left:14px; }
.fk-tabelle th[scope="row"]{ font-weight:600; color:var(--text); }
.fk-tabelle tbody tr:last-child td,.fk-tabelle tbody tr:last-child th{ border-bottom:0; }
.fk-tabelle .fk-tgruppe th{ padding:10px 14px; text-align:left; font-size:14px; font-weight:750; color:var(--akz-text); background:var(--tint); }
.fk-ja{ color:var(--teal-text); font-weight:800; font-size:16px; }
.fk-t{ color:var(--leise); font-size:12px; font-weight:700; }
.fk-nein{ color:var(--leise); }
.fk-kurz{ display:none; }
@media (max-width:599px){ .fk-lang{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .fk-kurz{ display:inline; } }
@media (max-width:599px){ .fk-tabelle{ font-size:13.5px; } .fk-tabelle th,.fk-tabelle td{ padding:8px 3px; } .fk-tabelle th[scope="row"]{ padding-left:10px; } }
.fk-vergleich{ min-width:600px; }
.fk-vergleich th[scope="row"]{ position:sticky; left:0; z-index:1; background:var(--karte); box-shadow:1px 0 0 var(--linie); }
.karte-bg .fk-vergleich th[scope="row"]{ background:var(--bg); }
.fk-vergleich td{ text-align:left; color:var(--leise); padding:12px 10px; }
.fk-vergleich thead th{ font-size:16px; color:var(--text); text-align:left; padding:14px 10px; }
.fk-vergleich thead th img{ width:28px; height:28px; vertical-align:-8px; margin-right:8px; }
.fk-produkt{ display:flex; flex-direction:column; gap:10px; padding:22px; border-radius:var(--rund); background:var(--bg); border:1px solid var(--linie); }
.fk-produkt .p-titel{ margin:0; }
.fk-produkt .p-titel img{ width:44px; height:44px; }
.fk-produkt h3{ margin:0; font-size:22px; }
.fk-produkt .haken-liste{ margin:4px 0 6px; color:var(--leise); font-size:15px; }
.fk-produkt .haken-liste b{ color:var(--text); }
.fk-produkt .knopf{ margin-top:auto; }
.fk-zahl{ margin:0; color:var(--leise); font-weight:600; }
.fk-zahl b{ font-size:28px; font-weight:800; color:var(--akz-text); }
@media (min-width:900px) and (max-width:1139px){ .hauptnav a{ padding:0 8px; font-size:14px; } }
@media (prefers-reduced-motion:no-preference){ .fk-karte:hover{ transform:translateY(-2px); } }
/* Runde 1103: Neu, Sicherheit, Plattformen, Suche in den Funktionen */
.neu-liste{ display:grid; gap:18px; }
.neu-eintrag{ padding:22px; border-radius:var(--rund); background:var(--karte); border:1px solid var(--linie); box-shadow:var(--schatten); }
.neu-kopf{ display:flex; gap:12px; align-items:flex-start; margin-bottom:8px; }
.neu-kopf img{ width:28px; height:28px; flex:none; margin-top:4px; }
.neu-kopf img+img{ margin-left:-6px; }
.neu-kopf h2{ margin:0; font-size:clamp(18px,3vw,22px); }
.neu-datum{ margin:0 0 2px; font-size:13px; font-weight:750; letter-spacing:.06em; text-transform:uppercase; color:var(--teal-text); }
.neu-eintrag .haken-liste{ margin-top:10px; color:var(--leise); }
.sich-raster{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:760px){ .sich-raster{ grid-template-columns:repeat(2,1fr); } }
.sich-karte{ padding:22px; border-radius:var(--rund); background:var(--karte); border:1px solid var(--linie); }
.sich-karte h2{ margin:12px 0 4px; font-size:20px; }
.sich-karte .haken-liste{ margin-top:10px; color:var(--leise); font-size:15px; }
.sich-karte:nth-child(even) .k-sym{ background:var(--tint-teal); color:var(--teal-text); }
.fk-filter{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; margin-top:20px; }
.fk-filter input[type="search"]{ flex:1 1 240px; min-height:48px; padding:10px 14px; border-radius:12px; border:1px solid var(--linie);
                                 background:var(--karte); color:var(--text); font:inherit; font-size:16px; }
.fk-filter input[type="search"]:focus{ outline:3px solid var(--akz2); outline-offset:1px; border-color:var(--akz2); }
.fk-chip{ min-height:40px; padding:6px 14px; border-radius:999px; border:1px solid var(--linie); background:var(--karte); color:var(--text);
          font:inherit; font-size:14px; font-weight:650; cursor:pointer; }
.fk-chip[aria-pressed="true"]{ background:var(--akz); border-color:var(--akz); color:#fff; }
.fk-treffer{ margin:10px 0 0; font-size:14px; color:var(--leise); min-height:1.5em; }
.fk-leer{ display:none; }
/* Runde 1103: Startseiten – Kopf als Held, Leiste mit vier Versprechen und den Wegen */
.held{ position:relative; padding:60px 0 52px; background:
       radial-gradient(1000px 480px at 92% -15%,rgba(76,110,245,.28),transparent 62%),
       radial-gradient(760px 420px at -8% 115%,rgba(20,184,178,.20),transparent 62%),
       linear-gradient(180deg,var(--bg2),var(--bg)); }
.held h1{ font-size:clamp(36px,8vw,64px); }
.held .einleitung{ font-size:clamp(17px,2.4vw,21px); }
@media (min-width:900px){ .held{ padding:84px 0 72px; } }
.vertrauen{ background:var(--karte); border-top:1px solid var(--linie); border-bottom:1px solid var(--linie); padding:18px 0; }
.v-liste{ list-style:none; padding:0; margin:0; display:grid; gap:10px 18px; grid-template-columns:1fr; }
@media (min-width:600px){ .v-liste{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .v-liste{ grid-template-columns:repeat(4,1fr); } }
.v-liste li{ display:flex; align-items:center; gap:12px; font-weight:650; font-size:15.5px; }
.v-liste .k-sym{ width:40px; height:40px; flex:none; }
.v-liste li:nth-child(even) .k-sym{ background:var(--tint-teal); color:var(--teal-text); }
.v-wege{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-top:14px; padding-top:12px; border-top:1px dashed var(--linie); }
.v-wege a{ display:inline-flex; align-items:center; min-height:44px; font-weight:700; text-decoration:none; }
.v-wege a::after{ content:"→"; margin-left:6px; }
.v-wege a:hover{ text-decoration:underline; }

/* ---- Runde 1103, Ausbau: Animationen (ohne Text im Bild; drei Schritte im selben Takt) ---- */
.an-rahmen{ display:grid; gap:20px; align-items:center; grid-template-columns:1fr; }
@media (min-width:860px){ .an-rahmen{ grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:40px; } }
.anim{ display:block; width:100%; height:auto; border-radius:18px; background:linear-gradient(150deg,var(--tint),var(--tint-teal)); border:1px solid var(--linie); }
.anim use{ fill:none; stroke:var(--akz-text); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.an-knoten circle{ fill:var(--karte); stroke:var(--akz2); stroke-width:2; }
.an-linie{ stroke:var(--akz2); stroke-width:2; stroke-dasharray:6 6; fill:none; }
.an-direkt{ stroke:var(--teal-x); stroke-width:3; fill:none; }
.an-punkt{ fill:var(--teal-x); }
.an-blatt,.an-kachel{ fill:var(--karte); stroke:var(--akz2); stroke-width:2; }
.an-kachel.rot{ stroke:var(--rot); stroke-dasharray:5 4; }
.an-kachel.gut{ stroke:var(--teal-x); stroke-width:3; }
.an-zeile{ fill:var(--linie); }
.an-scan{ fill:var(--teal-x); }
.an-marke{ fill:var(--akz2); }
.an-marke.m2{ fill:var(--teal-x); }
.an-marke.m3{ fill:var(--knopf2); }
.an-treffer{ fill:var(--teal-x); opacity:.45; }
.an-lupe{ fill:none; stroke:var(--akz-text); stroke-width:6; stroke-linecap:round; }
.an-monitor rect{ fill:var(--karte); stroke:var(--akz2); stroke-width:2; }
.an-monitor line{ stroke:var(--akz2); stroke-width:3; stroke-linecap:round; }
.an-id{ fill:var(--akz2); }
.an-zeiger{ fill:var(--text); stroke:var(--karte); stroke-width:1.5; }
.an-mark{ fill:var(--akz2); }
.an-haken{ fill:none; stroke:var(--teal-x); stroke-width:7; stroke-linecap:round; stroke-linejoin:round; }
.an-schritte{ list-style:none; margin:0; padding:0; counter-reset:an; display:grid; gap:10px; }
.an-schritte li{ counter-increment:an; position:relative; padding:12px 14px 12px 54px; border-radius:14px; border:1px solid var(--linie); background:var(--karte); }
.an-schritte li::before{ content:counter(an); position:absolute; left:14px; top:12px; width:28px; height:28px; border-radius:50%;
  display:grid; place-items:center; font-weight:700; font-size:14px; color:#fff; background:var(--knopf2); }
@media (prefers-reduced-motion:no-preference){
  .anim .a1,.anim .a2,.anim .a3{ opacity:.22; animation:an-dritt 12s linear infinite; }
  .anim .a2{ animation-delay:4s; }
  .anim .a3{ animation-delay:8s; }
  @keyframes an-dritt{ 0%{ opacity:.22; } 3%,31%{ opacity:1; } 35%,100%{ opacity:.22; } }
  .an-schritte li{ animation:an-licht 12s linear infinite; }
  .an-schritte li:nth-child(2){ animation-delay:4s; }
  .an-schritte li:nth-child(3){ animation-delay:8s; }
  @keyframes an-licht{ 0%,34%,100%{ border-color:var(--linie); box-shadow:none; } 3%,31%{ border-color:var(--knopf2); box-shadow:0 0 0 2px var(--knopf2); background:var(--tint); } }
  .an-scan.a1{ animation:an-dritt 12s linear infinite, an-scan 4s ease-in-out infinite; }
  @keyframes an-scan{ 0%{ transform:translateY(0); } 100%{ transform:translateY(166px); } }
  .an-punkt.weg-1{ animation:an-dritt 12s linear 8s infinite, weg1 1.6s linear infinite; }
  .an-punkt.weg-2{ animation:an-dritt 12s linear 8s infinite, weg2 1.6s linear .5s infinite; }
  @keyframes weg1{ to{ transform:translate(312px,-48px); } }
  @keyframes weg2{ to{ transform:translate(312px,48px); } }
  .an-punkt.ver-1{ animation:an-dritt 12s linear 8s infinite, ver1 1.2s linear infinite; }
  @keyframes ver1{ to{ transform:translateX(140px); } }
  .an-zeiger.ver-z{ animation:an-dritt 12s linear 8s infinite, verz 3s ease-in-out infinite alternate; }
  @keyframes verz{ to{ transform:translate(34px,14px); } }
  .an-punkt.zeit-1{ animation:an-dritt 12s linear 4s infinite, zeit1 12s ease-in-out 4s infinite; }
  @keyframes zeit1{ 0%{ transform:none; } 30%,100%{ transform:translateX(-240px); } }
  .an-punkt.kon-1{ animation:an-dritt 12s linear 8s infinite, kon1 1.6s linear infinite; }
  .an-punkt.kon-2{ animation:an-dritt 12s linear 8s infinite, kon2 1.6s linear infinite; }
  .an-punkt.kon-3{ animation:an-dritt 12s linear 8s infinite, kon3 1.6s linear infinite; }
  @keyframes kon1{ to{ transform:translate(-160px,-48px); } }
  @keyframes kon2{ to{ transform:translate(160px,-48px); } }
  @keyframes kon3{ to{ transform:translateY(70px); } }
}
/* Rundgang: läuft nur sichtbar, mit Anhalten; ohne JavaScript stehen die Bilder untereinander */
.film-szene{ margin:0 0 18px; }
.film-szene img{ display:block; width:100%; height:auto; border-radius:16px; border:1px solid var(--linie); }
.film-szene figcaption{ margin-top:10px; color:var(--leise); }
.film.film-an{ position:relative; }
.film.film-an .film-buehne{ position:relative; aspect-ratio:16/10; overflow:hidden; border-radius:18px; border:1px solid var(--linie); box-shadow:var(--schatten); background:var(--karte); }
.film.film-an .film-szene{ position:absolute; inset:0; margin:0; opacity:0; visibility:hidden; transition:opacity .7s ease, visibility .7s; }
.film.film-an .film-szene.aktiv{ opacity:1; visibility:visible; }
.film.film-an .film-szene img{ width:100%; height:100%; object-fit:cover; object-position:top; border:0; border-radius:0; }
.film.film-an .film-szene figcaption{ display:none; }
@media (prefers-reduced-motion:no-preference){
  .film.film-an .film-szene.aktiv img{ animation:film-zoom 7s ease-out both; transform-origin:30% 10%; }
  @keyframes film-zoom{ from{ transform:scale(1); } to{ transform:scale(1.05); } }
}
.film-text{ min-height:3.2em; margin:12px 2px 4px; font-size:17px; }
.film-leiste{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.film-punkt{ width:32px; height:44px; padding:0; border:0; background:none; cursor:pointer; display:grid; place-items:center; }
.film-punkt::before{ content:""; width:24px; height:6px; border-radius:3px; background:var(--linie); }
.film-punkt[aria-current="true"]::before{ background:var(--knopf2); }
.film-knopf{ min-width:44px; height:44px; border-radius:22px; border:1px solid var(--linie); background:var(--karte); color:var(--text); font-size:16px; cursor:pointer; }
/* Themenseiten */
.thema-marke{ display:flex; align-items:center; gap:10px; margin:0 0 10px; font-weight:600; }
.thema-held .bildflaeche .gal-eintrag figcaption{ display:none; }
.thema-held .knopfreihe{ margin-top:18px; }
.held-raster{ display:grid; gap:28px; align-items:center; }
@media (min-width:900px){ .held-raster{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:48px; } }
.t-reihe{ display:grid; gap:18px; align-items:center; margin-bottom:44px; }
@media (min-width:860px){
  .t-reihe{ grid-template-columns:minmax(0,1fr) minmax(0,1.4fr); gap:40px; margin-bottom:64px; }
  .t-reihe:nth-child(even) .t-text{ order:2; }
}
.t-reihe h2{ font-size:clamp(22px,3.4vw,30px); }
.t-reihe p{ margin:0; font-size:17px; color:var(--leise); }
.t-karten{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:760px){ .t-karten{ grid-template-columns:repeat(2,1fr); } }
.t-karten .t-reihe{ margin:0; display:block; padding:20px; border:1px solid var(--linie); border-radius:var(--rund); background:var(--karte); }
.t-karten .t-reihe h2{ font-size:20px; }
.t-karten .t-reihe p{ font-size:16px; }
.t-kacheln{ display:grid; gap:18px; grid-template-columns:1fr; }
@media (min-width:600px){ .t-kacheln{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:900px){ .t-kacheln{ grid-template-columns:repeat(3,1fr); } }
.t-kachel{ display:flex; flex-direction:column; border:1px solid var(--linie); border-radius:var(--rund); overflow:hidden; background:var(--karte); color:var(--text); text-decoration:none; box-shadow:var(--schatten); }
.t-kbild{ display:block; aspect-ratio:16/10; overflow:hidden; background:var(--tint); }
.t-kbild img{ display:block; width:100%; height:100%; object-fit:cover; object-position:top; }
.t-kbild .gal-hoch{ object-fit:contain; max-height:none; }
.t-kbild > .sym{ display:block; width:64px; height:64px; margin:calc(31% - 32px) auto 0; color:var(--akz-text); }
.t-ktext{ display:block; padding:16px 18px 18px; }
.t-ktext b{ display:block; font-size:18px; margin-bottom:4px; }
.t-ktext span{ display:block; color:var(--leise); font-size:15px; }
@media (prefers-reduced-motion:no-preference){
  .t-kachel{ transition:transform .2s ease, box-shadow .2s ease; }
  .t-kachel:hover{ transform:translateY(-3px); }
}
.fk-mehr{ display:inline-block; margin-top:6px; padding:10px 0; font-weight:600; }
.schluss-band,.pa-band{ background:linear-gradient(120deg,var(--tint),var(--tint-teal)); }
.schluss-band .knopfreihe{ margin-top:14px; }
.pa-band-innen{ display:grid; gap:16px; align-items:center; }
.pa-band h2{ margin-bottom:4px; }
.pa-band p{ margin:0; color:var(--leise); }
@media (min-width:860px){ .pa-band-innen{ grid-template-columns:minmax(0,1fr) auto; } }
/* Pakete */
.pa-finder{ display:grid; gap:12px; grid-template-columns:1fr; }
@media (min-width:600px){ .pa-finder{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .pa-finder{ grid-template-columns:repeat(5,1fr); } }
.pa-wahl{ display:flex; align-items:center; min-height:64px; padding:14px 16px; border:1px solid var(--linie); border-radius:14px; background:var(--karte); font-weight:600; text-decoration:none; color:var(--akz-text); }
.pa-wahl:hover{ border-color:var(--akz2); }
.pa-raster{ display:grid; gap:16px; grid-template-columns:1fr; }
@media (min-width:640px){ .pa-raster{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .pa-raster{ grid-template-columns:repeat(3,1fr); } }
.pa-karte{ display:flex; flex-direction:column; gap:8px; padding:20px; border:1px solid var(--linie); border-radius:var(--rund); background:var(--karte); scroll-margin-top:calc(var(--kopf) + 16px); }
.pa-karte:target{ border-color:var(--knopf2); box-shadow:0 0 0 3px var(--knopf2); }
.pa-karte h3{ margin:0; }
.pa-karte p{ margin:0; }
.pa-wofuer{ font-weight:600; }
.pa-inhalt{ color:var(--leise); flex:1; }
.pa-karte .preis{ font-weight:700; color:var(--teal-text); }
.pa-karte .knopf{ margin-top:8px; align-self:flex-start; }
.pa-tabelle{ min-width:680px; }
.pa-tabelle th[data-noi18n]{ font-size:14px; line-height:1.25; }
.pa-tabelle tbody th[scope="row"]{ position:sticky; left:0; background:var(--karte); }
/* Häufige Fragen, Erste Schritte */
.faq-suche{ margin-top:14px; }
.faq-suche input{ width:100%; }
.es-pfad{ list-style:none; margin:0; padding:0; display:grid; gap:10px; grid-template-columns:1fr; }
@media (min-width:760px){ .es-pfad{ grid-auto-flow:column; grid-auto-columns:1fr; } }
.es-pfad a{ display:flex; align-items:center; gap:12px; height:100%; min-height:56px; padding:12px 14px; border:1px solid var(--linie); border-radius:14px; background:var(--karte); text-decoration:none; font-weight:600; }
.es-p-nr{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center; color:#fff; background:var(--knopf2); font-size:14px; }

/* Runde 1105: Geräte-Schau und Bilderreihen */
.schau-leiste{ display:flex; flex-wrap:wrap; gap:8px; margin:0 0 16px; }
.schau-leiste[hidden]{ display:none; }
.schau-tab{ min-height:44px; padding:8px 16px; border-radius:999px; border:1px solid var(--linie); background:var(--karte); color:var(--text); font:inherit; font-weight:600; cursor:pointer; }
.schau-tab[aria-selected="true"]{ background:var(--akz); border-color:var(--akz); color:#fff; }
.schau-titel{ margin:18px 0 2px; font-size:20px; }
.schau-an .schau-titel{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.schau-text{ margin:0 0 12px; color:var(--leise); }
.g-ueber{ margin:26px 0 12px; font-size:20px; }
.g-reihe{ display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x proximity; padding:4px 2px 12px; scrollbar-width:thin; }
.g-reihe .gal-eintrag{ flex:0 0 auto; width:min(56vw,200px); scroll-snap-align:start; }
.g-reihe .gal-eintrag.g-breit{ width:min(84vw,480px); }
.g-reihe .gal-knopf{ border-radius:20px; }
.g-reihe .gal-knopf img.gal-hoch{ width:100%; max-height:none; }
.g-reihe figcaption{ margin-top:8px; font-size:14px; }
.g-marke{ display:block; margin:8px 2px -4px; font-size:12px; font-weight:600; color:var(--akz-text); }