/* ====================================================================
   digitalPRO Homepage - Gestaltung
   Am 02.09.2026 aus index.html herausgeloest. Die drei <style>-Bloecke
   stehen hier in derselben Reihenfolge wie vorher im Dokument - die
   Kaskade ist damit unveraendert.
   ==================================================================== */

/* --- vormals <style>-Block 1 von 3 ------------------------------ */
  /* Zielgruppe neben dem Produktnamen. Die neuen Namen (Ida, Concordia)
     erklaeren sich nicht von selbst - diese Zeile muss deshalb ueberall
     mitlaufen, wo der Name zuerst gelesen wird. */
  .fuer{font-size:.62em;font-weight:600;opacity:.75;white-space:nowrap;
        display:inline-block;margin-left:.35em;}
  .fuer-gross{font-size:var(--t-l);font-weight:600;opacity:.8;margin:.35rem 0 0;}

  /* Bildschirmfotos auf den Produktseiten. Bis heute verkaufte die Seite
     beide Produkte, ohne ein einziges Bild zu zeigen. */
  .schaubilder{display:grid;gap:18px;margin:26px 0 8px;
               grid-template-columns:repeat(auto-fit,minmax(320px,1fr));}
  .schaubild{margin:0;background:var(--surface-2,#eef1f5);border-radius:14px;
             overflow:hidden;border:1px solid var(--hair,#e2e6ec);}
  .schaubild img{display:block;width:100%;height:auto;}
  .schaubild figcaption{padding:10px 14px;font-size:var(--t-s);line-height:1.35;
                        color:var(--muted,#6b7684);}

  /* Echte Aufnahme statt gezeichneter Attrappe auf der Produktkachel. */
  .kachelbild{padding:0!important;overflow:hidden;border-radius:12px;}
  .kachelbild img{display:block;width:100%;height:auto;}
  :root{
  /* Schriftskala, eingefuehrt 02.09.2026. Vorher lagen hier 34 verschiedene
     rem-Werte zwischen .64 und 1.7 - ohne System, mit Abstaenden von 1 %.
     Acht Stufen, gerade Pixelwerte bei 16 px Basis, nichts unter 12 px. */
  --t-2xs:.75rem; --t-xs:.8125rem; --t-s:.875rem; --t-m:.9375rem;
  --t-l:1.0625rem; --t-xl:1.1875rem; --t-2xl:1.375rem; --t-3xl:1.625rem;

    --paper:#f5f6f9; --surface:#ffffff; --surface-2:#eef1f5;
    --ink:#0f1720; --ink-2:#33404e; --muted:#5c6773; --hair:#e2e6ec;
    --brand:#1746c9; --brand-2:#3a63e0; --on-brand:#ffffff;
    --bauhof:#a85a04; --verein:#0a7350; --glas:#097693; --danger:#d64545;
    --shadow:0 1px 2px rgba(15,23,32,.04), 0 12px 32px -12px rgba(15,23,32,.14);
    --r:14px; --r-s:9px; --maxw:1160px;
    --f-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --f-mono:ui-monospace,"SF Mono","Cascadia Code","Segoe UI Mono",Consolas,monospace;
  }
  @media (prefers-color-scheme:dark){
    :root{
      --paper:#0a0e15; --surface:#121924; --surface-2:#0f1621;
      --ink:#eef2f7; --ink-2:#c3ccd6; --muted:#93a0af; --hair:#212b39;
      --brand:#5f84ff; --brand-2:#7a99ff; --on-brand:#0a0e15;
      --bauhof:#f2a340; --verein:#2fc489; --glas:#38c4e6; --danger:#ff7a7a;
      --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"]{
    --paper:#0a0e15; --surface:#121924; --surface-2:#0f1621;
    --ink:#eef2f7; --ink-2:#c3ccd6; --muted:#93a0af; --hair:#212b39;
    --brand:#5f84ff; --brand-2:#7a99ff; --on-brand:#0a0e15;
    --bauhof:#f2a340; --verein:#2fc489; --glas:#38c4e6;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 18px 40px -16px rgba(0,0,0,.6);
  }
  :root[data-theme="light"]{
    --paper:#f5f6f9; --surface:#ffffff; --surface-2:#eef1f5;
    --ink:#0f1720; --ink-2:#33404e; --muted:#5c6773; --hair:#e2e6ec;
    --brand:#1746c9; --brand-2:#3a63e0; --on-brand:#ffffff;
    --bauhof:#a85a04; --verein:#0a7350; --glas:#097693; --danger:#d64545;
    --shadow:0 1px 2px rgba(15,23,32,.04), 0 12px 32px -12px rgba(15,23,32,.14);
  }
  *{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; }
  @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
  body{ margin:0; background:var(--paper); color:var(--ink); font-family:var(--f-sans);
    line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  .wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:22px; }
  a{ color:inherit; text-decoration:none; }
  .eyebrow{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.16em; text-transform:uppercase; color:var(--muted); }
  h1,h2,h3{ text-wrap:balance; line-height:1.08; margin:0; letter-spacing:-.02em; font-weight:800; }
  h2{ font-size:clamp(1.7rem,3.6vw,2.5rem); }
  p{ margin:0; }
  :focus-visible{ outline:2.5px solid var(--aktion); outline-offset:3px; border-radius:4px; }

  /* nav */
  header.nav{ position:sticky; top:0; z-index:20; background:color-mix(in srgb,var(--paper) 82%, transparent);
    backdrop-filter:saturate(1.4) blur(10px); border-bottom:1px solid var(--hair); }
  .nav-in{ display:flex; align-items:center; gap:18px; height:62px; }
  .brand{ display:flex; align-items:center; gap:9px; font-weight:800; letter-spacing:-.02em; font-size:var(--t-l); }
  .brand .mark{ width:22px; height:22px; border-radius:6px; background:var(--brand);
    display:grid; place-items:center; color:var(--on-brand); font-family:var(--f-mono); font-size:var(--t-xs); font-weight:700; }
  .brand b{ color:var(--brand); }
  .nav-links{ margin-left:auto; display:flex; align-items:center; gap:6px; }
  .nav-links a.lnk{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.04em; color:var(--ink-2);
    padding:8px 12px; border-radius:8px; }
  .nav-links a.lnk:hover{ color:var(--ink); background:var(--surface-2); }
  .icon-btn{ width:38px; height:38px; border:1px solid var(--hair); background:var(--surface); border-radius:9px;
    color:var(--ink); cursor:pointer; display:grid; place-items:center; }
  .icon-btn:hover{ border-color:var(--muted); }
  .btn{ display:inline-flex; align-items:center; gap:8px; font-weight:650; font-size:var(--t-m);
    padding:11px 17px; border-radius:10px; border:1px solid transparent; cursor:pointer; transition:transform .12s ease, background .15s; }
  .btn:hover{ transform:translateY(-1px); }
  .btn.primary{ background:var(--aktion-flaeche); color:var(--auf-aktion); }
  .btn.primary:hover{ background:var(--aktion-flaeche-hover); }
  .btn.ghost{ background:var(--surface); color:var(--ink); border-color:var(--hair); }
  .btn.ghost:hover{ border-color:var(--muted); }
  @media (max-width:900px){ .nav-links a.lnk{ display:none; } }

  /* hero */
  .hero{ position:relative; overflow:hidden; border-bottom:1px solid var(--hair); }
  #bg{ position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; }
  .hero-in{ position:relative; z-index:1; padding:clamp(56px,9vw,104px) 0 clamp(48px,7vw,84px); max-width:800px; }
  .hero h1{ font-size:clamp(2.3rem,6vw,4.2rem); margin:16px 0 0; }
  .hero .lede{ font-size:clamp(1.05rem,2vw,1.28rem); color:var(--ink-2); margin-top:20px; max-width:60ch; }
  .cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
  .trust{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:34px; font-family:var(--f-mono);
    font-size:var(--t-2xs); letter-spacing:.03em; color:var(--muted); }
  .trust span{ display:inline-flex; align-items:center; gap:7px; }
  .trust .d{ width:6px; height:6px; border-radius:50%; background:var(--aktion-flaeche); }

  /* generic section */
  section{ padding:clamp(56px,8vw,92px) 0; }
  .sec-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:38px; flex-wrap:wrap; }
  .sec-head p{ color:var(--muted); max-width:46ch; margin-top:8px; }

  /* product panels */
  .products{ display:flex; flex-direction:column; gap:26px; }
  .panel{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); box-shadow:var(--shadow);
    overflow:hidden; display:grid; grid-template-columns:minmax(0,0.82fr) minmax(0,1.18fr); }
  .panel .fig{ position:relative; padding:28px; border-right:1px solid var(--hair);
    background:linear-gradient(160deg, color-mix(in srgb,var(--ac) 12%, var(--surface)), var(--surface)); min-height:220px;
    display:flex; flex-direction:column; justify-content:center; gap:14px; }
  .panel .code{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.14em; color:var(--ac); }
  .panel .glyph{ width:64px; height:64px; border-radius:14px; background:color-mix(in srgb,var(--ac) 16%, var(--surface));
    border:1px solid color-mix(in srgb,var(--ac) 40%, transparent); display:grid; place-items:center; color:var(--ac); }
  .panel .glyph svg{ width:34px; height:34px; }
  /* Produkt-Vorschau: gezeichneter Mini-Screenshot je App */
  .shot{ width:100%; border:1px solid var(--hair); border-radius:12px; overflow:hidden;
    background:var(--surface); box-shadow:0 14px 30px -18px rgba(15,23,32,.55); }
  .shot .sbar{ display:flex; align-items:center; gap:8px; padding:8px 11px;
    border-bottom:1px solid var(--hair); background:color-mix(in srgb,var(--ac) 7%, var(--surface-2)); }
  .shot .sic{ width:21px; height:21px; border-radius:6px; display:grid; place-items:center; flex:none;
    background:color-mix(in srgb,var(--ac) 18%, var(--surface)); color:var(--ac);
    border:1px solid color-mix(in srgb,var(--ac) 40%, transparent); }
  .shot .sic svg{ width:13px; height:13px; }
  .shot .stt{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.02em; color:var(--ink-2); font-weight:600; }
  .shot .sdots{ margin-left:auto; display:flex; gap:5px; }
  .shot .sdots i{ width:7px; height:7px; border-radius:50%; background:var(--hair); }
  .shot .scv{ display:block; }
  .shot .scv svg{ display:block; width:100%; height:auto; }
  .panel .body{ padding:32px; display:flex; flex-direction:column; gap:14px; }
  .panel h3{ font-size:var(--t-3xl); }
  .panel .body>.pl{ color:var(--ink-2); }
  .feat{ display:grid; grid-template-columns:1fr 1fr; gap:9px 20px; margin:6px 0 4px; padding:0; list-style:none; }
  .feat li{ position:relative; padding-left:24px; font-size:var(--t-m); color:var(--ink-2); }
  .feat li::before{ content:""; position:absolute; left:0; top:.42em; width:13px; height:8px;
    border-left:2.4px solid var(--ac); border-bottom:2.4px solid var(--ac); transform:rotate(-45deg); }
  .panel .foot{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
    margin-top:8px; padding-top:16px; border-top:1px solid var(--hair); }
  .price{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ink); }
  .price b{ font-size:var(--t-2xl); font-weight:800; } .price .per{ color:var(--muted); font-size:var(--t-xs); }
  .price .yr{ display:block; font-size:var(--t-2xs); color:var(--muted); margin-top:2px; }
  .tag{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.04em; color:var(--ac);
    border:1px solid color-mix(in srgb,var(--ac) 40%,transparent); padding:3px 9px; border-radius:999px; }
  @media (max-width:900px){
    .panel{ grid-template-columns:1fr; } .panel .fig{ border-right:none; border-bottom:1px solid var(--hair); min-height:0; }
    .feat{ grid-template-columns:1fr; }
  }

  /* steps */
  .steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; counter-reset:s; }
  .step{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:26px; box-shadow:var(--shadow); }
  .step .n{ counter-increment:s; font-family:var(--f-mono); font-size:var(--t-s); color:var(--aktion);
    display:flex; align-items:center; gap:10px; letter-spacing:.1em; }
  .step .n::before{ content:"0" counter(s); }
  .step .n::after{ content:""; flex:1; height:1px; background:var(--hair); }
  .step h3{ font-size:var(--t-xl); margin:14px 0 8px; } .step p{ color:var(--muted); font-size:var(--t-m); }
  @media (max-width:900px){ .steps{ grid-template-columns:1fr; } }

  /* pricing */
  .ptable{ width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--hair);
    border-radius:var(--r); overflow:hidden; box-shadow:var(--shadow); }
  .ptable th,.ptable td{ padding:15px 18px; text-align:left; border-bottom:1px solid var(--hair); }
  .ptable thead th{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); font-weight:600; }
  .ptable td.num{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
  .ptable tbody tr:last-child td{ border-bottom:none; }
  .ptable .pname{ font-weight:700; } .ptable .pname .dot{ display:inline-block; width:9px; height:9px; border-radius:50%; margin-right:9px; vertical-align:middle; }
  .ptable td .save{ color:var(--verein); font-family:var(--f-mono); font-size:var(--t-2xs); }
  .table-scroll{ overflow-x:auto; }
  .fine{ color:var(--muted); font-size:var(--t-xs); margin-top:18px; }

  /* tiered pricing */
  .price-groups{ display:flex; flex-direction:column; gap:30px; }
  .pgroup .pg-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
  .pgroup .pg-head .dot{ width:11px; height:11px; border-radius:50%; background:var(--ac); }
  .pgroup .pg-head h3{ font-size:var(--t-xl); }
  .pgroup .pg-head .scale{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.04em; color:var(--muted); margin-left:auto; }
  .tiers{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  /* Nur die Gruppe mit vier Stufen. Sonst faellt die vierte Kachel
     alleine in eine zweite Zeile. */
  .tiers.vier{ grid-template-columns:repeat(4,1fr); gap:12px; }
  @media (max-width:1180px){ .tiers.vier{ grid-template-columns:repeat(2,1fr); } }
  .tier{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:20px;
    display:flex; flex-direction:column; gap:7px; box-shadow:var(--shadow); }
  .tier.reco{ border-color:var(--ac); box-shadow:0 0 0 1.5px var(--ac), var(--shadow); }
  .tier .badge{ align-self:flex-start; font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.08em; text-transform:uppercase;
    background:color-mix(in srgb,var(--ac) 15%, var(--surface)); color:var(--ac);
    border:1px solid color-mix(in srgb,var(--ac) 42%, transparent); padding:3px 9px; border-radius:999px; margin-bottom:2px; }
  .tier .t-name{ font-weight:800; font-size:var(--t-l); }
  .tier .t-size{ font-family:var(--f-mono); font-size:var(--t-2xs); color:var(--muted); }
  .tier .t-price{ margin-top:5px; font-variant-numeric:tabular-nums; }
  .tier .t-price b{ font-size:var(--t-3xl); font-weight:800; letter-spacing:-.02em; }
  .tier .t-price .per{ color:var(--muted); font-size:var(--t-xs); }
  .tier .t-year{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:var(--t-2xs); color:var(--muted); }
  .tier .t-setup{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; font-size:var(--t-2xs); color:var(--ac); margin-top:2px; }
  .tier .t-year s{ color:var(--muted); text-decoration-thickness:1px; opacity:.8; }
  .tier .save{ color:var(--verein); }
  .tier .t-note{ font-size:var(--t-s); color:var(--ink-2); border-top:1px solid var(--hair); padding-top:11px; margin-top:5px; }
  .tier .btn.sm{ margin-top:14px; padding:9px 14px; font-size:var(--t-s); justify-content:center; }
  @media (max-width:900px){ .tiers{ grid-template-columns:1fr; } .pgroup .pg-head .scale{ margin-left:0; width:100%; } }

  /* contact */
  .contact{ background:var(--brand); color:var(--on-brand); border-radius:var(--r); padding:clamp(32px,5vw,54px);
    display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
  .contact h2{ color:var(--on-brand); }
  .contact p{ color:color-mix(in srgb,var(--on-brand) 82%, transparent); max-width:44ch; margin-top:8px; }
  .contact .btn.ghost{ background:transparent; color:var(--on-brand); border-color:color-mix(in srgb,var(--on-brand) 55%, transparent); }
  .contact .btn.solid{ background:var(--on-brand); color:var(--brand); }

  /* footer */
  footer.ft{ border-top:1px solid var(--hair); padding:48px 0 40px; margin-top:8px; }
  .ft-grid{ display:flex; justify-content:space-between; gap:28px; flex-wrap:wrap; align-items:flex-start; }
  .ft-links{ display:flex; gap:26px; flex-wrap:wrap; font-family:var(--f-mono); font-size:var(--t-xs); color:var(--ink-2); }
  .ft-links a:hover{ color:var(--aktion); }
  .ft-meta{ font-family:var(--f-mono); font-size:var(--t-2xs); color:var(--muted); margin-top:22px; display:flex; gap:8px 18px; flex-wrap:wrap; }
  .note{ background:var(--surface-2); border:1px dashed var(--hair); border-radius:var(--r-s); padding:12px 15px;
    font-size:var(--t-xs); color:var(--muted); margin-top:20px; }

  /* legal pages */
  .legal{ display:none; }
  .legal .lwrap{ max-width:760px; }
  .legal .back{ font-family:var(--f-mono); font-size:var(--t-2xs); color:var(--aktion); display:inline-flex; gap:6px; margin-bottom:20px; }
  .legal .back:hover{ text-decoration:underline; }
  .legal h1{ font-size:clamp(1.7rem,4vw,2.3rem); margin-bottom:4px; }
  .legal .sub{ color:var(--muted); font-family:var(--f-mono); font-size:var(--t-2xs); margin-bottom:8px; }
  .legal h2{ font-size:var(--t-l); margin:28px 0 8px; }
  .legal p, .legal li{ color:var(--ink-2); max-width:68ch; }
  .legal ul{ padding-left:20px; } .legal li{ margin:3px 0; }
  .legal .dl{ display:grid; grid-template-columns:max-content 1fr; gap:7px 20px; margin:12px 0; align-items:baseline; }
  .legal .dl dt{ color:var(--muted); font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.02em; }
  .legal .dl dd{ margin:0; }
  .ph{ color:var(--aktion); background:color-mix(in srgb,var(--aktion-flaeche) 13%, transparent);
    border:1px solid color-mix(in srgb,var(--aktion) 30%, transparent); padding:0 6px; border-radius:5px;
    font-family:var(--f-mono); font-size:.85em; white-space:nowrap; }
  .legal .warn{ background:color-mix(in srgb,var(--bauhof) 10%, var(--surface)); border:1px solid color-mix(in srgb,var(--bauhof) 35%, transparent);
    border-radius:9px; padding:13px 16px; font-size:var(--t-s); color:var(--ink-2); margin:22px 0; }

  /* ===== Ausbau: Produkt-Bühne, Kennzahlen, Motion ===== */
  html.js .reveal{ opacity:0; transform:translateY(18px); }
  html.js .reveal.in{ opacity:1; transform:none; transition:opacity .7s ease, transform .7s cubic-bezier(.2,.75,.2,1); }
  html.js .rg>*{ opacity:0; transform:translateY(18px); }
  html.js .rg.in>*{ opacity:1; transform:none; transition:opacity .6s ease, transform .6s cubic-bezier(.2,.75,.2,1); }
  html.js .rg.in>*:nth-child(2){ transition-delay:.08s } html.js .rg.in>*:nth-child(3){ transition-delay:.16s } html.js .rg.in>*:nth-child(4){ transition-delay:.24s }

  /* Hero zweispaltig + Produkt-Bühne */
  .hero-in{ display:grid; grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:44px; align-items:center; max-width:var(--maxw); padding-block:clamp(22px,3vw,46px) clamp(44px,6vw,76px); }
  .hero-copy{ max-width:37rem; }
  @keyframes heroUp{ from{ opacity:0; transform:translateY(20px); } to{ opacity:1; transform:none; } }
  .hero-copy{ animation:heroUp .8s cubic-bezier(.2,.75,.2,1) both; }
  .hero-visual{ animation:heroUp .85s cubic-bezier(.2,.75,.2,1) .12s both; }
  .hero h1 .accentline{ color:var(--aktion); }
  .hero-visual{ position:relative; min-height:300px; }
  .hv-glow{ position:absolute; inset:-14% -8%; z-index:0; pointer-events:none; filter:blur(26px);
    background:
      radial-gradient(48% 52% at 62% 42%, color-mix(in srgb,var(--glas) 30%, transparent), transparent 72%),
      radial-gradient(40% 44% at 20% 22%, color-mix(in srgb,var(--bauhof) 22%, transparent), transparent 70%),
      radial-gradient(44% 48% at 84% 90%, color-mix(in srgb,var(--verein) 22%, transparent), transparent 72%); }
  .hv-stage{ position:relative; z-index:1; }
  .hv-main{ position:relative; z-index:3; width:100%; --ac:var(--glas); }
  .hv-back{ position:absolute; width:70%; z-index:1; }
  .hv-back.a{ top:-9%; left:-7%; transform:rotate(-6deg); --ac:var(--bauhof); }
  .hv-back.b{ bottom:-11%; right:-7%; transform:rotate(6deg); z-index:2; --ac:var(--verein); }
  .hv-main .shot,.hv-back .shot{ box-shadow:0 34px 64px -32px rgba(15,23,32,.55), 0 10px 24px -14px rgba(15,23,32,.32); }
  @keyframes floaty{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(-8px) } }
  .hv-main .shot{ animation:floaty 6.5s ease-in-out infinite; }
  .hv-back.a .shot{ animation:floaty 7.5s ease-in-out infinite -2.2s; }
  .hv-back.b .shot{ animation:floaty 7s ease-in-out infinite -4.4s; }

  /* Kennzahlen-Band */
  .stats-band{ padding-block:32px; border-block:1px solid var(--hair); background:var(--surface-2); }
  .statgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; }
  .stat{ display:flex; flex-direction:column; gap:5px; padding-left:16px;
    border-left:2px solid color-mix(in srgb,var(--aktion) 48%, var(--hair)); }
  .stat b{ font-size:clamp(1.9rem,3.3vw,2.7rem); font-weight:800; letter-spacing:-.02em; line-height:1;
    color:var(--aktion); font-variant-numeric:tabular-nums; }
  .stat span{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.02em; color:var(--muted); }

  /* Hover-Feinschliff (nur Schatten/Rand + Kind-Zoom -> kein Konflikt mit Reveal-Transform) */
  .panel{ transition:box-shadow .22s ease, border-color .22s ease; }
  .panel:hover{ border-color:color-mix(in srgb,var(--ac) 42%, var(--hair));
    box-shadow:0 1px 2px rgba(15,23,32,.05), 0 26px 50px -24px color-mix(in srgb,var(--ac) 42%, rgba(15,23,32,.34)); }
  .panel .shot{ transition:transform .3s cubic-bezier(.2,.7,.2,1); }
  .panel:hover .shot{ transform:translateY(-2px) scale(1.014); }
  .tier{ transition:box-shadow .22s ease, border-color .22s ease; }
  .tier:hover{ border-color:color-mix(in srgb,var(--ac) 40%, var(--hair));
    box-shadow:0 20px 40px -22px color-mix(in srgb,var(--ac) 40%, rgba(15,23,32,.3)); }
  .step{ transition:box-shadow .22s ease, border-color .22s ease; }
  .step:hover{ border-color:var(--muted); box-shadow:0 18px 36px -22px rgba(15,23,32,.28); }
  .btn.primary{ position:relative; overflow:hidden; }
  .btn.primary::after{ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%;
    background:linear-gradient(100deg, transparent, color-mix(in srgb,var(--on-brand) 42%, transparent), transparent);
    transform:skewX(-18deg); transition:left .6s ease; }
  .btn.primary:hover::after{ left:140%; }

  /* Fortschrittsbalken wachsen (Glasfaser-Vorschau) */
  #produkte .gfill{ transition:width 1.15s cubic-bezier(.2,.8,.2,1); }
  html.js #produkte .gfill{ width:0; }
  .products.in .gfill{ width:var(--w); }

  @media (max-width:900px){
    .hero-in{ grid-template-columns:1fr; gap:30px; }
    .hero-copy{ order:1; max-width:none; } .hero-visual{ order:2; margin-top:4px; }
  }
  @media (max-width:640px){
    .statgrid{ grid-template-columns:1fr 1fr; gap:20px 14px; }
    .hv-back{ display:none; }
  }
  /* Produkt-Detailseiten */
  .detail{ display:none; }
  .detail .back{ font-family:var(--f-mono); font-size:var(--t-2xs); color:var(--ac); display:inline-flex; gap:6px; margin-bottom:22px; }
  .detail .back:hover{ text-decoration:underline; }
  .dhead{ max-width:54rem; margin-bottom:36px; }
  .dhead .tag{ display:inline-block; margin-bottom:14px; }
  .dhead h1{ font-size:clamp(2rem,5vw,3.1rem); margin:2px 0 0; }
  .dhead .dlede{ color:var(--ink-2); font-size:clamp(1.02rem,1.7vw,1.2rem); margin-top:16px; max-width:56ch; }
  .dhead .cta-row{ margin-top:24px; }
  .modgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:18px; align-items:stretch; }
  .mod{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:22px 22px 20px; box-shadow:var(--shadow);
    transition:box-shadow .2s ease, border-color .2s ease; }
  .mod:hover{ border-color:color-mix(in srgb,var(--ac) 40%, var(--hair)); box-shadow:0 18px 40px -24px color-mix(in srgb,var(--ac) 40%, rgba(15,23,32,.34)); }
  .mod h3{ font-size:var(--t-l); display:flex; align-items:center; gap:10px; margin:0 0 14px; }
  .mod h3::before{ content:""; width:9px; height:9px; border-radius:3px; background:var(--ac); flex:none; }
  .mod .feat{ grid-template-columns:1fr; gap:9px; margin:0; }
  .mod .feat li{ font-size:var(--t-s); }
  .dcta{ margin-top:34px; background:var(--surface-2); border:1px solid var(--hair); border-radius:var(--r);
    padding:26px 28px; display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; }
  .dcta h3{ font-size:var(--t-xl); } .dcta p{ color:var(--muted); margin-top:4px; max-width:48ch; }
  .morelink{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; margin-top:2px;
    font-family:var(--f-mono); font-size:var(--t-xs); letter-spacing:.02em; color:var(--ac); }
  .morelink:hover{ gap:9px; text-decoration:underline; }

  @media (prefers-reduced-motion:reduce){
    html.js .reveal, html.js .rg>*{ opacity:1 !important; transform:none !important; }
    .reveal.in, .rg.in>*{ transition:none !important; }
    .hv-main .shot,.hv-back .shot{ animation:none !important; }
    .hero-copy,.hero-visual{ animation:none !important; }
    #produkte .gfill{ transition:none !important; }
    .btn.primary::after{ display:none; }
  }

  /* Partnerprogramm / Empfehlung */
  #partner{ background:color-mix(in srgb,var(--brand) 5%, var(--paper)); border-block:1px solid var(--hair); }
  .progs{ display:grid; grid-template-columns:1fr 1fr; gap:22px; align-items:stretch; }
  .prog{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); box-shadow:var(--shadow);
    padding:28px; display:flex; flex-direction:column; gap:14px; position:relative; overflow:hidden;
    transition:box-shadow .22s ease, border-color .22s ease; }
  .prog::before{ content:""; position:absolute; top:0; left:0; right:0; height:3px; background:var(--ac); }
  .prog:hover{ border-color:color-mix(in srgb,var(--ac) 42%, var(--hair));
    box-shadow:0 26px 50px -26px color-mix(in srgb,var(--ac) 40%, rgba(15,23,32,.34)); }
  .prog .who{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.06em; text-transform:uppercase; color:var(--ac); }
  .prog h3{ font-size:var(--t-2xl); }
  .reward{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; padding:4px 0 2px; }
  .reward .upto{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .reward b{ font-size:clamp(2.1rem,5vw,3rem); font-weight:800; letter-spacing:-.02em; line-height:1;
    color:var(--ac); font-variant-numeric:tabular-nums; }
  .reward .desc{ color:var(--ink-2); font-weight:650; }
  .prog .lead{ color:var(--ink-2); }
  .flow{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; counter-reset:f; }
  .flow li{ position:relative; padding-left:36px; color:var(--ink-2); font-size:var(--t-m); }
  .flow li::before{ counter-increment:f; content:counter(f); position:absolute; left:0; top:-2px;
    width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
    font-family:var(--f-mono); font-size:var(--t-2xs); font-weight:700; color:var(--ac);
    background:color-mix(in srgb,var(--ac) 14%, var(--surface)); border:1px solid color-mix(in srgb,var(--ac) 40%, transparent); }
  .perks{ list-style:none; margin:2px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:9px 18px; }
  .perks li{ position:relative; padding-left:22px; font-size:var(--t-s); color:var(--ink-2); }
  .perks li::before{ content:""; position:absolute; left:0; top:.42em; width:12px; height:7px;
    border-left:2.2px solid var(--ac); border-bottom:2.2px solid var(--ac); transform:rotate(-45deg); }
  .prog .note-sm{ font-size:var(--t-s); color:var(--muted); }
  .prog .foot{ margin-top:auto; padding-top:15px; border-top:1px solid var(--hair); }
  .prog--wide{ grid-column:1 / -1; flex-direction:row; align-items:center; gap:18px 36px; flex-wrap:wrap; }
  .prog--wide .pw-main{ flex:1 1 460px; display:flex; flex-direction:column; gap:11px; }
  .prog--wide .pw-side{ flex:0 0 auto; display:flex; flex-direction:column; gap:12px; align-items:flex-start; }
  .pw-badge{ font-family:var(--f-mono); font-size:var(--t-2xs); letter-spacing:.04em; color:var(--ac);
    border:1px solid color-mix(in srgb,var(--ac) 42%, transparent); background:color-mix(in srgb,var(--ac) 12%, var(--surface));
    padding:5px 11px; border-radius:999px; }
  @media (max-width:900px){ .progs{ grid-template-columns:1fr; } .perks{ grid-template-columns:1fr; }
    .prog--wide{ flex-direction:column; align-items:flex-start; } }

  /* Anfrageformular */
  #anfrage .frmwrap{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r);
    box-shadow:var(--shadow); padding:clamp(24px,4vw,40px); max-width:780px; }
  .frm{ display:grid; gap:16px; }
  .frm .row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
  .field{ display:flex; flex-direction:column; gap:6px; }
  .field label{ font-size:var(--t-xs); font-weight:650; color:var(--ink-2); }
  .field .req{ color:var(--danger); }
  .frm input, .frm select, .frm textarea{ font:inherit; font-size:var(--t-m); color:var(--ink); background:var(--surface);
    border:1px solid var(--hair); border-radius:10px; padding:11px 13px; width:100%;
    transition:border-color .15s ease, box-shadow .15s ease; }
  .frm input:focus, .frm select:focus, .frm textarea:focus{ outline:none; border-color:var(--aktion);
    box-shadow:0 0 0 3px color-mix(in srgb,var(--aktion) 18%, transparent); }
  .frm input:invalid:not(:placeholder-shown){ border-color:color-mix(in srgb,var(--danger) 60%, var(--hair)); }
  .frm textarea{ resize:vertical; min-height:118px; }
  .consent{ display:flex; gap:11px; align-items:flex-start; font-size:var(--t-s); color:var(--ink-2); line-height:1.5; }
  .consent input{ width:auto; margin-top:3px; flex:none; accent-color:var(--aktion); }
  .consent a{ color:var(--aktion); text-decoration:underline; }
  .frm .actions{ display:flex; align-items:center; gap:16px 20px; flex-wrap:wrap; margin-top:2px; }
  .frm .hintline{ font-size:var(--t-xs); color:var(--muted); max-width:44ch; }
  @media (max-width:640px){ .frm .row{ grid-template-columns:1fr; } }

  /* Weitere Ermäßigungen – Hinweisband */
  .moreoffer{ margin-top:22px; background:var(--surface); border:1px solid var(--hair); border-left:3px solid var(--aktion);
    border-radius:var(--r); box-shadow:var(--shadow); padding:22px 26px; display:flex; align-items:center;
    justify-content:space-between; gap:14px 26px; flex-wrap:wrap; }
  .moreoffer .mo-txt{ flex:1 1 340px; }
  .moreoffer b{ display:block; font-size:var(--t-l); letter-spacing:-.01em; }
  .moreoffer p{ color:var(--ink-2); margin-top:5px; max-width:66ch; font-size:var(--t-m); }

  /* Branchen-Chips */
  .branchpills{ display:flex; flex-wrap:wrap; justify-content:center; gap:9px; max-width:840px; margin:24px auto 0; }
  .branchpills span{ font-size:var(--t-s); font-weight:600; color:var(--ink-2); background:var(--surface);
    border:1px solid var(--hair); border-radius:999px; padding:7px 14px; transition:border-color .18s ease, transform .18s ease; }
  .branchpills span:hover{ border-color:color-mix(in srgb,var(--aktion) 45%, var(--hair)); transform:translateY(-1px); }
  .branchpills span.more{ color:var(--aktion); border-color:color-mix(in srgb,var(--aktion) 42%, transparent);
    background:color-mix(in srgb,var(--aktion-flaeche) 8%, var(--surface)); }

  /* Startseiten-Teaser für ausgelagerte Preise/Partner + Unterseiten */
  .tprices{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
  .tprice{ display:flex; flex-direction:column; gap:3px; background:var(--surface); border:1px solid var(--hair);
    border-left:3px solid var(--ac); border-radius:var(--r); padding:16px 18px; box-shadow:var(--shadow);
    transition:transform .18s ease, box-shadow .18s ease; }
  .tprice:hover{ transform:translateY(-2px); box-shadow:0 18px 36px -22px color-mix(in srgb,var(--ac) 42%, rgba(15,23,32,.3)); }
  .tprice .pn{ font-weight:700; font-size:var(--t-m); }
  .tprice .pf{ font-family:var(--f-mono); font-variant-numeric:tabular-nums; color:var(--ac); font-weight:700; font-size:var(--t-l); }
  .tprice .pu{ font-size:var(--t-2xs); color:var(--muted); }
  .tpartner{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  .tp{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:18px 20px; box-shadow:var(--shadow); }
  .tp b{ display:block; font-size:var(--t-2xl); font-weight:800; color:var(--aktion); letter-spacing:-.02em; }
  .tp span{ color:var(--ink-2); font-size:var(--t-s); }
  #preise .back, #partner .back{ font-family:var(--f-mono); font-size:var(--t-2xs); color:var(--aktion); display:inline-flex; gap:6px; margin-bottom:14px; }
  #preise .back:hover, #partner .back:hover{ text-decoration:underline; }
  .view .reveal, .view .rg>*{ opacity:1 !important; transform:none !important; }
  @media (max-width:900px){ .tprices{ grid-template-columns:1fr 1fr; } .tpartner{ grid-template-columns:1fr; } }
  @media (max-width:640px){ .tprices{ grid-template-columns:1fr; } }

  /* Nutzen / ROI */
  .valuegrid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
  .vcard{ background:var(--surface); border:1px solid var(--hair); border-radius:var(--r); padding:24px; box-shadow:var(--shadow);
    transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .vcard:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--aktion) 40%, var(--hair));
    box-shadow:0 20px 40px -24px rgba(15,23,32,.3); }
  .vcard .vic{ width:46px; height:46px; border-radius:12px; display:grid; place-items:center; margin-bottom:14px;
    color:var(--aktion); background:color-mix(in srgb,var(--aktion-flaeche) 12%, var(--surface));
    border:1px solid color-mix(in srgb,var(--aktion) 34%, transparent); }
  .vcard .vic svg{ width:24px; height:24px; }
  .vcard h3{ font-size:var(--t-l); margin-bottom:8px; }
  .vcard p{ color:var(--ink-2); font-size:var(--t-m); }
  @media (max-width:900px){ .valuegrid{ grid-template-columns:1fr; } }

/* --- vormals <style>-Block 2 von 3 ------------------------------ */
.brutto{display:block;font-size:var(--t-2xs);font-weight:600;color:var(--muted,#8a8a8a);margin-top:3px;letter-spacing:.2px}

/* --- vormals <style>-Block 3 von 3 ------------------------------ */
  .preis-toggle{display:inline-flex;gap:0;border:1px solid var(--hair,#ddd);border-radius:999px;padding:3px;background:var(--surface,#fff);margin:6px 0 4px}
  .preis-toggle button{border:0;background:transparent;cursor:pointer;font:600 .9rem/1 var(--f-sans,sans-serif);color:var(--ink-2,#555);padding:9px 16px;border-radius:999px}
  .preis-toggle button.active{background:var(--aktion-flaeche);color:var(--auf-aktion)}
  /* Umschalter auf dunklem KI-Banner (hell/lesbar) */
  .preis-toggle.on-dark{border-color:rgba(255,255,255,.42);background:rgba(255,255,255,.10)}
  .preis-toggle.on-dark button{color:rgba(255,255,255,.9)}
  .preis-toggle.on-dark button.active{background:#fff;color:#1a56db}
  .preis-nav button{padding:6px 12px;font-size:var(--t-xs)}
  @media(max-width:900px){.preis-nav{display:none}}
  .preis-note{font-size:var(--t-s);color:var(--muted,#8a8a8a);margin:2px 0 10px}
  body[data-preis="brutto"] .p-net{display:none}
  body[data-preis="netto"] .p-gross{display:none}
  /* Zwei Tarifwelten: Der Umschalter oben zeigt die passende. Ohne das
     standen beide untereinander, und beim Klick auf "Privatkunde" aenderte
     sich nichts sichtbar - die Privatpreise SIND ja schon brutto. */
  /* !important ist hier noetig, kein Schoenheitsfehler: Die Tarifkaesten
     tragen ihr display:grid INLINE, und ein inline gesetztes style schlaegt
     jede Regel aus dem Stylesheet. Ohne das blieben beide Welten sichtbar -
     genau der Fehler vom 23.08.2026. */
  body[data-preis="brutto"] .nur-gewerbe{display:none !important}
  body[data-preis="netto"]  .nur-privat{display:none !important}

  /* ================================================================
     Vera-Bereich in Veras Farben                      (23.08.2026)
     Werte aus /opt/vera-chat/web/stil.css uebernommen, damit Homepage
     und Produkt dieselbe Handschrift tragen.
     ================================================================ */
  #ki-assistent{
    --v-grund:#05070f; --v-flaeche:rgba(255,255,255,.045);
    --v-kante:rgba(255,255,255,.10); --v-kante-hell:rgba(255,255,255,.18);
    --v-schrift:#e6ecf7; --v-leise:#8b98b4;
    --v-tuerkis:#5eead4; --v-blau:#38bdf8; --v-violett:#a78bfa;
    --v-auf-akzent:#05070f; --v-schleier:rgba(255,255,255,.06);
    --v-glanz-1:rgba(94,234,212,.13); --v-glanz-2:rgba(167,139,250,.13);
    --v-akz-flaeche:rgba(94,234,212,.07); --v-akz-kante:rgba(94,234,212,.34);
    --v-akz-flaeche-2:rgba(94,234,212,.10); --v-akz-kante-2:rgba(94,234,212,.42);
    --v-akz-flaeche-3:rgba(94,234,212,.13); --v-akz-kante-3:rgba(94,234,212,.30);
    --v-akz-hover:rgba(94,234,212,.16);
    --v-verlauf:linear-gradient(120deg,var(--v-tuerkis),var(--v-blau) 55%,var(--v-violett));
    background:
      radial-gradient(1100px 460px at 12% -8%, var(--v-glanz-1), transparent 62%),
      radial-gradient(900px 420px at 88% 108%, var(--v-glanz-2), transparent 62%),
      var(--v-grund) !important;
    color:var(--v-schrift) !important;
  }
  /* Die Ueberschrift traegt den Verlauf - der Wiedererkennungswert von Vera. */
  #ki-assistent h2{
    background:var(--v-verlauf); -webkit-background-clip:text;
    background-clip:text; color:transparent;
    display:inline-block; line-height:1.18;
  }
  /* Kaesten: Veras Flaechen statt der weissen Schleier. */
  #ki-assistent [style*="rgba(255,255,255,.10)"],
  #ki-assistent [style*="rgba(255,255,255,.13)"]{
    background:var(--v-flaeche) !important;
    border-color:var(--v-kante) !important;
  }
  #ki-assistent [style*="rgba(255,255,255,.19)"]{
    background:var(--v-akz-flaeche) !important;
    border-color:var(--v-akz-kante) !important;
  }
  /* Die Marke EMPFOHLEN und die weissen Pillen: Veras Verlauf statt Blau. */
  #ki-assistent [style*="background:#fff"][style*="color:#1a56db"]{
    background:var(--v-verlauf) !important; color:var(--v-auf-akzent) !important;
  }
  /* Knoepfe */
  #ki-assistent a[style*="background:#fff"]{
    background:var(--v-verlauf) !important; color:var(--v-auf-akzent) !important;
    font-weight:700;
  }
  #ki-assistent a[style*="background:#fff"]:hover{ filter:brightness(1.08); }
  /* Preise in Tuerkis - die Zahl ist das, was zaehlt. */
  #ki-assistent .kiprice{ color:var(--v-tuerkis) !important; }
  /* Der Umschalter auf dunklem Grund */
  #ki-assistent .preis-toggle{
    border-color:var(--v-kante-hell); background:var(--v-schleier);
  }
  #ki-assistent .preis-toggle button{ color:var(--v-leise); }
  #ki-assistent .preis-toggle button.active{
    background:var(--v-verlauf); color:var(--v-auf-akzent);
  }
  /* Feine Linien und leiser Text */
  /* Zweiter Knopf: ruhige Flaeche mit tuerkisem Rand statt weissem Schleier. */
  #ki-assistent a[style*="rgba(255,255,255,.14)"]{
    background:var(--v-akz-flaeche-2) !important;
    border:1px solid var(--v-akz-kante-2) !important;
    color:var(--v-tuerkis) !important;
  }
  #ki-assistent a[style*="rgba(255,255,255,.14)"]:hover{
    background:var(--v-akz-hover) !important;
  }
  /* Die Pille "NEU - 100 % in Deutschland gehostet" - das Versprechen, auf
     das es ankommt, also darf es leuchten. */
  #ki-assistent [style*="rgba(255,255,255,.16)"]{
    background:var(--v-akz-flaeche-3) !important;
    color:var(--v-tuerkis) !important;
    box-shadow:inset 0 0 0 1px var(--v-akz-kante-3);
  }
  #ki-assistent hr{ border-color:var(--v-kante); }
  #ki-assistent .preis-note{ color:var(--v-leise) !important; }

  .p-net,.p-gross{white-space:nowrap}

  /* Eingangsauswahl: Privat oder gewerblich (23.08.2026) */
  #dp-eingang{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;
    justify-content:center;padding:20px;background:rgba(6,10,20,.72);
    -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
  #dp-eingang .karte{background:#fff;color:#16203a;border-radius:18px;
    padding:30px 28px 24px;max-width:520px;width:100%;
    box-shadow:0 24px 70px rgba(0,0,0,.4);text-align:center}
  #dp-eingang h2{margin:0 0 8px;font-size:var(--t-2xl);line-height:1.25}
  #dp-eingang p.sub{margin:0 0 20px;font-size:var(--t-m);line-height:1.5;color:#5a6478}
  #dp-eingang .wahl{display:grid;gap:11px}
  #dp-eingang button.opt{display:block;width:100%;text-align:left;cursor:pointer;
    border:1px solid #d9dfea;background:#f7f8fb;border-radius:12px;
    padding:15px 17px;font:inherit;color:inherit;transition:border-color .15s,background .15s}
  #dp-eingang button.opt:hover,#dp-eingang button.opt:focus-visible{
    border-color:#1a56db;background:#eef3fd;outline:none}
  #dp-eingang button.opt b{display:block;font-size:var(--t-l);margin-bottom:3px}
  #dp-eingang button.opt span{font-size:var(--t-s);color:#5a6478;line-height:1.4}
  #dp-eingang .spaeter{margin:16px 0 0;font-size:var(--t-s);color:#8a93a6}
  #dp-eingang .spaeter button{background:none;border:0;padding:0;font:inherit;
    color:#1a56db;text-decoration:underline;cursor:pointer}
  @media (prefers-reduced-motion:no-preference){
    #dp-eingang .karte{animation:dpAuf .22s ease-out}
    @keyframes dpAuf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
  }

  /* Preise verbergen, bis die richtige (Brutto/Netto-)Anzeige steht – sonst blitzt beim
     Laden kurz der NETTO-Preis auf, bevor der Umschalter ihn auf Brutto umschreibt.
     Nur wenn JS aktiv ist (html.js); ohne JS bleiben die Nettopreise sichtbar. */
  html.js body:not(.preis-ready) .tprice,
  html.js body:not(.preis-ready) .t-price,
  html.js body:not(.preis-ready) .t-year,
  html.js body:not(.preis-ready) .t-setup,
  html.js body:not(.preis-ready) .foot .price,
  html.js body:not(.preis-ready) .kiprice{ visibility:hidden }



/* ==================================================================
   Mobile Bedienbarkeit - eingefuegt 02.09.2026
   Die Kopfleiste ist position:sticky und 63 px hoch. Ohne
   scroll-margin-top landete jeder Ankersprung dahinter - "Zurueck zur
   Startseite" war halb verdeckt. 76 px = Leiste plus etwas Luft.
   Tippziele: 44 px ist die Untergrenze, die ein Daumen zuverlaessig
   trifft. Betroffen waren Navigations- und Fusszeilenlinks (19-21 px),
   der Preis-Umschalter (32 px) und die Knoepfe (38-41 px).
   ================================================================== */
section[id]{ scroll-margin-top:76px; }

.btn, button.btn{ min-height:44px; }
.preis-toggle button{ min-height:44px; }
.icon-btn{ min-width:44px; min-height:44px; }
.nav-links .lnk, .ft-links a, .morelink, .back, .brand{
  display:inline-flex; align-items:center; min-height:44px;
}
/* Das Kaestchen war 13x13 px. Der Klick wird zwar vom umgebenden
   <label class="consent"> aufgefangen (296x84 px), aber wer gezielt auf
   das Kaestchen tippt, soll es auch treffen. */
input[type="checkbox"], input[type="radio"]{ width:20px; height:20px; }

/* ==================================================================
   Handlungsfarbe - eingefuegt 02.09.2026
   Knoepfe, aktive Zustaende, Fokus und Sprungmarken tragen Idas Amber.
   Das Logo und die grossen Flaechenverlaeufe bleiben blau: Blau ist die
   Dachmarke, Amber ist die Bedienung.
   ================================================================== */
:root{
  --aktion:#b45309; --aktion-hover:#92400e;
  --aktion-flaeche:#d97706; --aktion-flaeche-hover:#b45309;
  /* Dunkler Text auf der Amber-Flaeche: 6,07:1. Weiss darauf waere
     3,19:1 gewesen und damit unter der Schwelle. */
  --auf-aktion:#1a1204;
}
[data-theme="dark"]{
  --aktion:#f2a340; --aktion-hover:#fbbf24;
  --aktion-flaeche:#f2a340; --aktion-flaeche-hover:#fbbf24;
  --auf-aktion:#0a0e15;
}


/* ==================================================================
   Produktfarbe Dispo - eingefuegt 02.09.2026
   Die uebrigen vier Produktfarben haben je eine helle und eine dunkle
   Fassung. Dispo stand als einzige fest im HTML und war im Dunkelmodus
   mit 3,18:1 nicht lesbar.
   ================================================================== */
:root{ --dispo:#5b57d6; }
[data-theme="dark"]{ --dispo:#8b87ff; }


/* ==================================================================
   Preisseite auf dem Handy - eingefuegt 02.09.2026
   Vier Produktgruppen mit zusammen 14 Tarifkacheln untereinander sind
   auf 390 px eine sehr lange Strecke. Die Reiter zeigen nur die Gruppe,
   die den Besucher betrifft. Ab 640 px bleibt alles wie bisher.
   ================================================================== */
.produkt-reiter{ display:none; }

@media (max-width:640px){
  .produkt-reiter{
    display:flex; gap:6px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    padding:4px 0 10px; margin:0 0 4px; scrollbar-width:none;
  }
  .produkt-reiter::-webkit-scrollbar{ display:none; }
  .produkt-reiter button{
    flex:0 0 auto; min-height:44px; padding:0 14px; cursor:pointer;
    border:1px solid var(--hair); border-radius:999px;
    background:var(--surface); color:var(--ink-2);
    font:600 var(--t-s)/1 var(--f-sans,system-ui,sans-serif);
  }
  .produkt-reiter button.an{
    background:var(--aktion-flaeche); color:var(--auf-aktion);
    border-color:var(--aktion-flaeche);
  }
  .pgroup.reiter-aus{ display:none !important; }

  /* Der Umschalter bleibt sichtbar, solange Preise auf dem Schirm sind -
     eine Zahl ohne erkennbaren Steuerstatus ist eine gefaehrliche Zahl.
     63 px ist die Hoehe der Kopfleiste. */
  #preise .preis-toggle{
    position:sticky; top:63px; z-index:40;
    background:var(--paper); box-shadow:0 6px 14px -8px rgba(0,0,0,.6);
  }
}


/* ==================================================================
   hidden soll auch wirken - ergaenzt 02.09.2026
   Das Attribut hidden setzt display:none nur im Standardstylesheet des
   Browsers. Jede eigene Regel mit display schlaegt es: .panel ist
   display:grid, .tprice ist display:flex - beide Balu-Elemente waren
   deshalb sichtbar, obwohl sie als versteckt ausgezeichnet waren.
   Diese eine Regel gilt fuer alle kuenftigen Faelle mit.
   ================================================================== */
[hidden]{ display:none !important; }

/* Auf recht.html stehen alle vier Rechtstexte untereinander. Dort gibt es
   keinen Hash-Router, der sie einblendet - diese Regel uebernimmt das. */
[data-seite="recht"] .legal{ display:block; }

/* ==================================================================
   Kontrast im Kontaktbereich - 02.09.2026
   Die Bereichsmarke stand mit 80 % Deckkraft auf dem blauen Grund und
   kam damit auf 4,45:1 - knapp unter den geforderten 4,5:1. Volle
   Deckkraft bringt 5,9:1. Der Absatz darunter (82 %) liegt mit 4,8:1
   darueber und bleibt, wie er ist.
   ================================================================== */
.contact .eyebrow{ color:var(--on-brand); }


/* ==================================================================
   Vera im Hellmodus - eingefuegt 02.09.2026
   Bis dahin blieb der Bereich auch auf heller Seite tiefdunkel. Die
   Toene sind nicht dieselben: Veras Tuerkis #5eead4 kommt auf hellem
   Grund auf 1,4:1 und waere unlesbar. Gemessen gegen #f4fbfa tragen
   #0f766e (5,22:1), #0369a1 (5,66:1) und #6d28d9 (6,78:1) - derselbe
   Verlauf, eine Oktave tiefer.
   ================================================================== */
[data-theme="light"] #ki-assistent{
  --v-grund:#f4fbfa;
  --v-flaeche:rgba(15,23,42,.035);
  --v-kante:rgba(15,23,42,.10); --v-kante-hell:rgba(15,23,42,.18);
  --v-schrift:#0f172a; --v-leise:#55657d;
  --v-tuerkis:#0f766e; --v-blau:#0369a1; --v-violett:#6d28d9;
  --v-auf-akzent:#ffffff; --v-schleier:rgba(15,23,42,.04);
  --v-glanz-1:rgba(15,118,110,.10); --v-glanz-2:rgba(109,40,217,.08);
  --v-akz-flaeche:rgba(15,118,110,.07); --v-akz-kante:rgba(15,118,110,.32);
  --v-akz-flaeche-2:rgba(15,118,110,.09); --v-akz-kante-2:rgba(15,118,110,.40);
  --v-akz-flaeche-3:rgba(15,118,110,.11); --v-akz-kante-3:rgba(15,118,110,.30);
  --v-akz-hover:rgba(15,118,110,.15);
}


/* ==================================================================
   Preisumschalter in der Kopfleiste (Handy) - 02.09.2026
   ================================================================== */
@media (max-width:640px){
  .nav-in .btn.primary{ display:none; }
  .preis-toggle.preis-nav{ display:inline-flex !important; margin:0; }
  .preis-toggle.preis-nav button{
    padding:0 16px; font-size:var(--t-2xs); min-height:44px; white-space:nowrap;
  }
  .nav-in{ gap:8px; }
}