/* BrowserDesk — gemeinsames Seiten-Gerüst der Website seit 09.10.2026 (Aufbau nach dem Vorbild kimai.org): weiß, flach, EINE
   Farbe (Petrol), Systemschrift, Linien statt Schatten, kein Verlauf, kein Glow. Alle Seiten außer /klassik/ und Countdown.
   Seit 20261009.18 (Entscheidung des Users, Variante B): Grund hellgrau-blau statt Weiß, Karten weiß, Kopfzeile in Petrol mit
   weißer Schrift — „die Website ist etwas sehr weiß“. */
:root{
  --ink:#17202b; --ink-2:#3a4756; --muted:#6b7786; --line:#e3e8ee; --line-2:#cfd7e0;
  /* Grund fast weiß (09.10.2026, zweite Runde: #f3f6f9 stand Ton in Ton mit Zwischenflächen und Innenflächen), Zwischenflächen
     einen klaren Schritt dunkler, Karten weiß mit Linie. */
  --bg:#f9fafb; --bg-soft:#eef2f6; --bg-tint:#e3f0f5; --karte:#ffffff;
  --brand:#0b7a9e; --brand-dark:#085f7c; --brand-ink:#063b4c;
  --hero-bg:#05070d;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1160px; --r:10px;
}
*{box-sizing:border-box}
/* hidden gewinnt immer - auch gegen display:inline-block/grid eigener Klassen (Falle aus dem Bestand, /shared/site.css). */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);color:var(--ink);background:var(--bg);line-height:1.55;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.02em;line-height:1.15}
h2{font-size:clamp(1.7rem,3.4vw,2.4rem)}
h3{font-size:1.1rem}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.eyebrow{display:block;font-size:.76rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--brand);margin-bottom:.7rem}
.lead{color:var(--ink-2);font-size:1.08rem}
.center{text-align:center}
.center .lead{max-width:680px;margin:0 auto}
section{padding:84px 0}
section.soft{background:var(--bg-soft)}

/* ---------- Knöpfe: flach, eine Farbe, kein Verlauf ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;border:1px solid transparent;border-radius:8px;
  padding:.72rem 1.3rem;font:inherit;font-size:.96rem;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .15s ease,border-color .15s ease}
.btn.primary{background:var(--brand);color:#fff}
.btn.primary:hover{background:var(--brand-dark)}
.btn.outline{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn.outline:hover{background:var(--bg-soft)}
.btn.onDark{background:#fff;color:var(--brand-ink)}
.btn.onDark:hover{background:#e9f1f5}
.btn.ghostDark{background:rgba(6,11,20,.45);color:#fff;border-color:rgba(255,255,255,.4)}
.btn.ghostDark:hover{background:rgba(6,11,20,.65)}
.btn svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Kopfzeile: weiß, fest, schlicht ---------- */
header{position:sticky;top:0;z-index:60;background:var(--brand-ink);color:#fff}
.nav{display:flex;align-items:center;gap:28px;height:64px}
/* 11.10.2026 (User: „Logo links soviel Abstand zum Rand wie rechts die Knöpfe“): der Kopfinhalt war mit 1175 px breiter als
   --maxw (1160) und lief rechts über die Polsterung — Logo 234 px vom Rand, Knöpfe 198 px (gemessen bei 1600 px). Die Kopfzeile
   bekommt darum einen eigenen, breiteren Rahmen (1360 px, zentriert) mit GLEICHEN Rändern links und rechts. */
header .wrap.nav,footer > .wrap{max-width:1360px;padding:0 clamp(16px,3vw,40px)}
/* 11.10.2026: der Fuß folgt demselben Rahmen wie die Kopfzeile — linke Kante der ersten Spalte unter dem Logo, rechte Kante unter
   dem letzten Knopf (vorher 1160 px mit 22 px, also eingerückt gegenüber dem Kopf). */
.brand{display:flex;align-items:center;gap:.6rem;font-weight:700;font-size:1.12rem;letter-spacing:-.02em;white-space:nowrap}
.brand img{width:28px;height:28px;border-radius:7px}
header .brand{color:#fff}
/* 11.10.2026: „BrowserDesk Cloud“ las sich als ein Name — der erste Menüpunkt stand 32 px neben der Marke, so nah wie die Punkte
   untereinander. Jetzt mit Trennstrich und deutlich mehr Luft. */
.nav-main{display:flex;align-items:center;gap:18px;margin-left:8px;padding-left:28px;border-left:1px solid rgba(255,255,255,.22);height:26px}
.nav-main a{font-size:.95rem;color:#dbe7ee;font-weight:500;white-space:nowrap}
.nav-main a:hover{color:#fff}
.nav-main a[aria-current="page"]{color:#fff;font-weight:600;box-shadow:inset 0 -2px 0 #8fe3f5;padding-bottom:2px}
.nav .right{margin-left:auto;display:flex;align-items:center;gap:10px}
.lang{display:inline-flex;border:1px solid rgba(255,255,255,.4);border-radius:8px;overflow:hidden}
.lang a{padding:.4rem .7rem;font-size:.8rem;font-weight:600;color:#bfe9f6}
.lang a.on{background:#fff;color:var(--brand-ink)}
/* Derselbe Umschalter, wenn ihn /shared/home-en.js anlegt (#lang mit Knöpfen) */
#lang{display:inline-flex;border:1px solid rgba(255,255,255,.4);border-radius:8px;overflow:hidden}
#lang button{border:0;background:transparent;padding:.4rem .7rem;font:inherit;font-size:.8rem;font-weight:600;color:#bfe9f6;cursor:pointer}
#lang button[aria-pressed="true"]{background:#fff;color:var(--brand-ink)}
/* Knöpfe in der Petrol-Kopfzeile: Hauptknopf weiß, Nebenknopf als weißer Umriss */
header .btn.primary{background:#fff;color:var(--brand-ink)}
header .btn.primary:hover{background:#e3f0f5}
header .btn.outline{color:#fff;border-color:rgba(255,255,255,.45);background:transparent}
header .btn.outline:hover{background:rgba(255,255,255,.1)}
.burger{display:none;border:1px solid rgba(255,255,255,.45);background:transparent;border-radius:8px;width:40px;height:40px;cursor:pointer;place-items:center}
.burger svg{width:22px;height:22px;fill:none;stroke:#fff;stroke-width:2;stroke-linecap:round}
/* 1280 px: sieben Menüpunkte + Sprache + zwei Knöpfe waren 1314 px breit (gemessen 09.10.2026) — der zweite Knopf weicht zuerst. */
@media (max-width:1320px){ .nav .right .btn.outline{display:none} }
@media (max-width:1100px){
  .nav-main{display:none}
  .nav .right .btn.outline{display:none}
  .burger{display:grid}
  header.open .nav-main{display:flex;flex-direction:column;align-items:flex-start;gap:0;position:absolute;left:0;right:0;top:64px;height:auto;border-left:0;
    background:var(--brand-ink);border-bottom:1px solid rgba(255,255,255,.15);padding:8px 22px 14px;margin:0}
  header.open .nav-main a{padding:.7rem 0;width:100%;border-top:1px solid rgba(255,255,255,.15);font-size:1rem;color:#fff;box-shadow:none}
  header.open .nav-main a:first-child{border-top:0}
}
@media (max-width:560px){
  .nav{gap:12px}
  .nav .right{gap:8px}
  .nav .right .lang,.nav .right #lang{display:none}
  .nav .right .btn.primary{padding:.6rem .85rem;font-size:.88rem}
  .brand{font-size:1rem}
}

/* ---------- Hero: bleibt wie auf der heutigen Startseite — ganze Höhe, Szene im Hintergrund, Schrift darüber ---------- */
.hero{position:relative;min-height:calc(100svh - 64px);display:grid;place-items:center;text-align:center;
  padding:90px 22px 110px;overflow:hidden;isolation:isolate;background:var(--hero-bg);color:#fff}
.hero > .bd-bg-layer{z-index:-2 !important}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(80% 60% at 50% 42%,rgba(5,7,13,.16),rgba(5,7,13,.52) 70%,rgba(5,7,13,.8) 100%),
             linear-gradient(180deg,rgba(5,7,13,.45) 0%,transparent 26%,transparent 70%,rgba(5,7,13,.85) 100%)}
.hwrap{position:relative;z-index:1;max-width:1100px}
.hero .over{display:inline-block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#bfe9f6;margin-bottom:1.2rem}
.hero h1{margin:0 0 1.1rem;font-size:clamp(2.9rem,9vw,7.2rem);line-height:.96;font-weight:700;letter-spacing:-.045em;text-shadow:0 2px 40px rgba(0,0,0,.5)}
.hero .lead{max-width:660px;margin:0 auto 2rem;font-size:clamp(1rem,1.5vw,1.22rem);color:#dbe7f3;text-shadow:0 1px 20px rgba(0,0,0,.7)}
.hero .cta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
/* Satz unter den Knöpfen: Sprung zur Schnellhilfe (11.10.2026) — Text, kein dritter Knopf */
.hero .hhilfe{margin:1.3rem 0 0;font-size:.95rem;color:#dbe7f3;text-shadow:0 1px 16px rgba(0,0,0,.7)}
.hero .hhilfe a{color:#8fe3f5;font-weight:600;text-decoration:underline;text-underline-offset:3px}
.hero .trust{margin-top:2.2rem;font-size:.9rem;color:#b9c7d6;display:flex;gap:1.4rem;justify-content:center;flex-wrap:wrap}
.hero .trust span::before{content:"✓";color:#8fe3f5;margin-right:.45rem;font-weight:700}
@media (max-width:760px){
  .hero{min-height:88svh;padding:80px 20px 80px}
  .hero h1{font-size:clamp(2.5rem,12vw,4rem)}
}

/* ---------- Weg wählen: zwei Karten nebeneinander ---------- */
.wege{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:46px}
.weg{border:1px solid var(--line);border-radius:14px;padding:34px 32px 30px;background:var(--karte);display:flex;flex-direction:column}
.weg.tint{background:var(--bg-tint);border-color:#c9dfe8}
.weg .tag{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--brand)}
.weg h3{font-size:1.9rem;margin:.5rem 0 .9rem}
.weg p{color:var(--ink-2)}
.weg ul{list-style:none;margin:1.4rem 0 1.6rem;padding:0;display:grid;gap:.6rem}
.weg li{display:flex;gap:.6rem;align-items:flex-start;font-size:.98rem}
.weg li svg{flex:0 0 auto;width:18px;height:18px;margin-top:.2rem;fill:none;stroke:var(--brand);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.weg .preis{margin-top:auto;padding-top:1.2rem;border-top:1px solid var(--line)}
.weg .preis .knoepfe{display:flex;gap:10px;flex-wrap:wrap;margin-top:1.1rem}
.weg .preis b{display:block;font-size:1.35rem;letter-spacing:-.02em}
.weg .preis small{display:block;color:var(--muted);font-size:.86rem;margin-top:.15rem}
.weg .preis a.more{color:var(--brand);font-weight:600;font-size:.92rem}
@media (max-width:860px){ .wege{grid-template-columns:1fr} .weg{padding:28px 22px 24px} .weg h3{font-size:1.6rem} }

/* ---------- Belege: nüchterne Zahlen, keine erfundenen Zitate ---------- */
.belege{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:40px}
.beleg{text-align:center;padding:26px 16px;border:1px solid var(--line);border-radius:12px;background:var(--karte)}
.beleg b{display:block;font-size:2rem;letter-spacing:-.03em;color:var(--brand-ink)}
.beleg span{display:block;color:var(--ink-2);font-size:.95rem;margin-top:.3rem}
@media (max-width:860px){ .belege{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .belege{grid-template-columns:1fr} }

/* ---------- Für Ihr Unternehmen: Text und Bild im Wechsel ---------- */
.block{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;padding:44px 0}
.block + .block{border-top:1px solid var(--line)}
.block:nth-child(even) .text{order:2}
.block h3{font-size:1.6rem;margin-bottom:.8rem}
.block p{color:var(--ink-2);font-size:1.02rem}
.block ul{margin:1rem 0 0;padding-left:1.2rem;color:var(--ink-2)}
.block li{margin:.3rem 0}
.block .bild{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--karte)}
.block .bild img{width:100%}
@media (max-width:860px){
  .block{grid-template-columns:1fr;gap:26px;padding:32px 0}
  .block:nth-child(even) .text{order:0}
}

/* ---------- Funktionen: Raster ---------- */
.raster{display:grid;grid-template-columns:repeat(4,1fr);gap:22px 28px;margin-top:46px}
.fn svg{width:26px;height:26px;fill:none;stroke:var(--brand);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:.7rem}
.fn h3{font-size:1.02rem;margin-bottom:.35rem}
.fn p{color:var(--ink-2);font-size:.93rem}
.fn .bald{display:inline-block;margin-left:.4rem;font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line-2);border-radius:5px;padding:.05rem .4rem;vertical-align:middle}
@media (max-width:1000px){ .raster{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .raster{grid-template-columns:1fr 1fr} }
@media (max-width:480px){ .raster{grid-template-columns:1fr} }

/* ---------- Plattformen / Download ---------- */
.plattformen{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:40px}
.pf{border:1px solid var(--line);border-radius:12px;padding:20px 14px;text-align:center;background:var(--karte)}
.pf svg{width:30px;height:30px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin:0 auto .6rem}
.pf b{display:block;font-size:.98rem}
.pf span{display:block;color:var(--muted);font-size:.82rem;margin-top:.15rem}
.pf a{display:inline-block;margin-top:.7rem;color:var(--brand);font-weight:600;font-size:.88rem}
@media (max-width:1000px){ .plattformen{grid-template-columns:repeat(3,1fr)} }
@media (max-width:560px){ .plattformen{grid-template-columns:1fr 1fr} }

/* ---------- Fragen ---------- */
.fragen{max-width:820px;margin:36px auto 0}
details{border-top:1px solid var(--line);padding:4px 0}
details:last-child{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:1rem 2.2rem 1rem 0;font-weight:600;font-size:1.05rem;position:relative}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:.2rem;top:.75rem;font-size:1.5rem;font-weight:300;color:var(--muted)}
details[open] summary::after{content:"–"}
details > div{padding:0 0 1.1rem;color:var(--ink-2)}

/* ---------- Download (11.10.2026 zurück): vier Karten, Windows hervorgehoben ---------- */
.dl-karten{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:40px}
.dl-karte{display:flex;flex-direction:column;gap:.8rem;border:1px solid var(--line);border-radius:12px;padding:22px;background:var(--karte)}
.dl-karte.hi{border-color:var(--brand);box-shadow:inset 0 3px 0 var(--brand)}
.dl-kopf{display:flex;align-items:center;gap:.75rem}
.dl-kopf svg{width:30px;height:30px;flex:none;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.dl-kopf h3{font-size:1.08rem}
.dl-ver{display:block;color:var(--muted);font-size:.84rem}
.dl-karte p{color:var(--ink-2);font-size:.93rem}
.dl-knoepfe{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.dl-knoepfe .btn{padding:.55rem .9rem;font-size:.88rem;white-space:normal;text-align:center}
.dl-karte p.dl-klein{font-size:.85rem}
.dl-liste{display:grid;width:100%}
.dl-zeile{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:.45rem 0;border-top:1px solid var(--line);font-size:.88rem;color:var(--ink-2)}
.dl-zeile:last-child{border-bottom:1px solid var(--line)}
.dl-arch{display:flex;gap:12px;flex:none}
.dl-arch a{color:var(--brand);font-weight:600}
.dl-arch a:hover{text-decoration:underline}
.dl-mobil{margin-top:26px;text-align:center;color:var(--muted);font-size:.9rem}
.dl-mobil + .dl-mobil{margin-top:8px}
/* Zweite Reihe (11.10.2026): Schnellhilfe, Windows XP, eigenes Relay — drei Karten unter einer Zwischenzeile */
.dl-zweit{margin-top:44px;text-align:center;font-size:1.15rem}
.dl-karten.drei{grid-template-columns:repeat(3,1fr);margin-top:20px}
.dl-karten.zweit{margin-top:20px}
@media (max-width:1000px){ .dl-karten, .dl-karten.drei{grid-template-columns:1fr 1fr} }
@media (max-width:560px){ .dl-karten, .dl-karten.drei{grid-template-columns:1fr} }

/* ---------- Schluss-CTA ---------- */
.schluss{background:var(--brand-ink);color:#fff;text-align:center;padding:84px 0}
.schluss h2{color:#fff}
.schluss p{color:#cfe3ea;max-width:620px;margin:1rem auto 2rem}

/* ---------- Fuß ---------- */
footer{padding:56px 0 36px;border-top:1px solid var(--line);background:var(--karte);color:var(--ink-2);font-size:.92rem}
.fspalten{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
.fspalten nav{display:grid;gap:.45rem;align-content:start}
.fspalten h2{font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink);margin-bottom:.4rem}
.fspalten a{color:var(--ink-2);width:fit-content}
.fspalten a:hover{color:var(--brand)}
.fschluss{margin-top:34px;padding-top:20px;border-top:1px solid var(--line);color:var(--muted);font-size:.86rem}
@media (max-width:760px){.fspalten{grid-template-columns:1fr 1fr;gap:24px}}
@media (max-width:480px){.fspalten{grid-template-columns:1fr}}

/* ---------- Der Weg der Daten: dunkler Abschnitt, Grafiken aus dem Bestand (Cyan/Violett bleiben dort) ---------- */
.dunkel{background:var(--hero-bg);color:#fff;padding:84px 0}
.dunkel h2{color:#fff}
.dunkel .eyebrow{color:#8fe3f5}
.dunkel .lead{color:#b9c7d6}
.tunnel{max-width:1000px;margin:40px auto 0}
.tunnel svg{width:100%;height:auto}
.tunnel .n{fill:#fff;font-size:17px;font-weight:600}
.tunnel .s{fill:#8fa6bd;font-size:13px}
.tunnel .t{fill:#b9c7d6;font-size:13px;font-weight:500}
@media (prefers-reduced-motion:reduce){.tunnel .dots{display:none}}
.three,.sec3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:38px;color:#b9c7d6;font-size:.94rem}
.three b,.sec3 b{display:block;color:#fff;margin-bottom:.2rem}
@media (max-width:860px){.three,.sec3{grid-template-columns:1fr;gap:18px}}
.herotunnel{position:relative;max-width:1120px;margin:56px auto 0;border-radius:18px;overflow:hidden;
  background:radial-gradient(120% 130% at 78% 50%,rgba(34,211,238,.20),transparent 58%),
             radial-gradient(90% 120% at 12% 50%,rgba(124,92,255,.26),transparent 62%),
             linear-gradient(180deg,#070c16,#04070d);
  border:1px solid rgba(255,255,255,.12)}
.herotunnel svg{width:100%;height:auto;display:block}
.herotunnel .cap{position:absolute;left:50%;bottom:18px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:.55rem;
  white-space:nowrap;font-size:.82rem;font-weight:560;color:#cfe6f4;background:rgba(4,8,14,.66);border:1px solid rgba(34,211,238,.28);
  border-radius:980px;padding:.4rem 1rem}
.herotunnel .cap i{width:7px;height:7px;border-radius:50%;background:#22d3ee;box-shadow:0 0 10px #22d3ee}
@media (max-width:620px){
  .herotunnel{padding-bottom:14px}
  .herotunnel .cap{position:static;transform:none;margin:2px auto 0;width:max-content;font-size:.74rem;padding:.32rem .8rem}
  #tunnel .tn{font-size:36px}
  #tunnel .ts{display:none}
}

/* ---------- Preise vom Server (shared/preise.js, data-bd-preis): Preissatz, Aktions-Abzeichen, Hinweis ---------- */
.preissatz{margin:0;font-size:.95rem;color:var(--ink-2);line-height:1.45}
.preissatz .bd-teil{display:block}
.preissatz .bd-zeit{display:block;font-size:.84rem;color:var(--muted);margin-top:2px}
.preissatz .bd-betrag{font-size:1.3rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
/* p.abzeichen und .weg: sonst gewinnt .weg p (0,1,1) und der Text steht dunkel auf dunkel (live gesehen 09.10.2026). */
.weg p.abzeichen,.abzeichen{display:inline-block;width:fit-content;max-width:100%;margin:0 0 .6rem;padding:.3rem .75rem;border-radius:6px;font-size:.76rem;
  font-weight:700;line-height:1.35;color:#fff;background:var(--brand-ink)}
.weg .preis small{display:block;color:var(--muted);font-size:.86rem;margin-top:.35rem}
.maphint{max-width:700px;margin:16px auto 0;text-align:center;color:var(--muted);font-size:.84rem;line-height:1.55}
.maphint a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px}
.textlink{color:var(--brand);font-weight:600}