/* GX-Backup – Webseite. Aussehen wie das Programm (GX-Backup USB v0.72 / GX-Backup Server v0.72):
   Kopf blau #387DC5, Seite #E6E5E1, Karten #FAF9F5, Roboto 400/500, Ecken 8 px. Dunkel wie im Programm.
   Keine fremden Schriften, Skripte oder Cookies. */

@font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("schrift/roboto-400.woff2") format("woff2"); }
@font-face { font-family: "Roboto"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("schrift/roboto-500.woff2") format("woff2"); }

:root {
  --blau: #387DC5; --blau-hell: #73A2D3; --blau-text: #27588A;
  --gruen: #72B84C; --orange: #F0962E;
  --seite: #E6E5E1; --flaeche: #FAF9F5; --flaeche-2: #F0EFEB;
  --text: #272622; --text-2: #64635F; --text-3: #969591; --linie: #DCDBD7; --linie-stark: #C9C8C4;
  --kopf: #11263B; --kopf-text: #FFFFFF; --kopf-2: rgba(255, 255, 255, .8);
  --held: #2F6CAD; --held-2: rgba(255, 255, 255, .88);
  --nacht: #11263B; --nacht-karte: #18324D; --nacht-linie: rgba(255, 255, 255, .16);
  --nacht-text: #FFFFFF; --nacht-text-2: rgba(255, 255, 255, .78); --nacht-akzent: #8DB8E4;
  --ok-hg: #C0D4E6; --gruen-hg: #D1E6C2; --orange-hg: #F7DBB9;
  --gruen-text: #3B6E22; --orange-text: #8A5410;
  --entwurf: #B35A00;
  --fokus: #F0962E;
  --schatten: 0 1px 2px rgba(39, 38, 34, .08), 0 2px 8px rgba(39, 38, 34, .06);
  --schatten-bild: 0 1px 2px rgba(39, 38, 34, .10), 0 10px 30px rgba(39, 38, 34, .14);
  --r: 8px;
  --breite: 1120px;
  --rand: 24px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --seite: #000000; --flaeche: #141414; --flaeche-2: #1D1D1B;
    --text: #FFFFFF; --text-2: #A3A29E; --text-3: #6E6D69; --linie: #272622; --linie-stark: #3A3935;
    --kopf: #11263B; --kopf-2: rgba(255, 255, 255, .72);
    --held: #0F2236; --held-2: rgba(255, 255, 255, .82);
    --nacht: #0B1928; --nacht-karte: #13283E; --nacht-linie: rgba(255, 255, 255, .12);
    --ok-hg: #11263B; --gruen-hg: #223817; --orange-hg: #482D0E;
    --gruen-text: #9BCB7E; --orange-text: #F7B871; --blau-text: #73A2D3;
    --fokus: #72B84C; --schatten: none; --schatten-bild: 0 0 0 1px #272622;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --seite: #000000; --flaeche: #141414; --flaeche-2: #1D1D1B;
  --text: #FFFFFF; --text-2: #A3A29E; --text-3: #6E6D69; --linie: #272622; --linie-stark: #3A3935;
  --kopf: #11263B; --kopf-2: rgba(255, 255, 255, .72);
  --held: #0F2236; --held-2: rgba(255, 255, 255, .82);
  --nacht: #0B1928; --nacht-karte: #13283E; --nacht-linie: rgba(255, 255, 255, .12);
  --ok-hg: #11263B; --gruen-hg: #223817; --orange-hg: #482D0E;
  --gruen-text: #9BCB7E; --orange-text: #F7B871; --blau-text: #73A2D3;
  --fokus: #72B84C; --schatten: none; --schatten-bild: 0 0 0 1px #272622;
  color-scheme: dark;
}

/* ---------- Grundlagen ---------- */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 92px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--seite); color: var(--text);
  font: 400 17px/1.55 "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; overflow-wrap: break-word; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--blau-text); text-underline-offset: .18em; }
a:hover { text-decoration-thickness: 2px; }
b, strong { font-weight: 500; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; border-radius: 2px; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-weight: 500; margin: 0; }
p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }
.huelle { max-width: calc(var(--breite) + 2 * var(--rand)); margin: 0 auto; padding: 0 var(--rand); }
.sprite { display: none; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sprung { position: absolute; left: 12px; top: -48px; z-index: 50; background: var(--flaeche); color: var(--blau-text);
  padding: 8px 14px; border-radius: var(--r); font-weight: 500; box-shadow: var(--schatten); }
.sprung:focus { top: 8px; }
svg.i { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round; vertical-align: middle; }

/* ---------- Kopf (wie im Programm) ---------- */
.kopf { position: sticky; top: 0; z-index: 30; background: var(--kopf); color: var(--kopf-text); }
/* dunkel: Kopf (Nacht) und Startbereich liegen nah beieinander – eine feine Linie trennt sie */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .kopf { box-shadow: 0 1px 0 rgba(255, 255, 255, .12); } }
:root[data-theme="dark"] .kopf { box-shadow: 0 1px 0 rgba(255, 255, 255, .12); }
.kopf-innen { height: 76px; display: flex; align-items: center; gap: 16px; }
.marke { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; font-weight: 500;
  font-size: 21px; white-space: nowrap; min-width: 0; }
.marke svg { width: 28px; height: 28px; flex: none; }
/* GX-Tools (23.10.2026): Kachel und Schriftzug „gx◆tools“ als Formen (keine fremde Schrift); Kopf in Nacht #11263B.
   Ab v0.72 größer (Kopf 76 px statt 56 px): Kachel 42 px, Schriftzug 29 px hoch (Seitenverhältnis 392,6 : 90) */
.marke .marke-kachel { width: 42px; height: 42px; }
.marke .marke-schrift { width: 126.5px; height: 29px; }
.marke small { font-weight: 400; font-size: 13px; color: var(--kopf-2); }
.kopf-nav { display: flex; gap: 4px; margin-left: auto; align-items: center; }
.kopf-nav a { color: var(--kopf-2); text-decoration: none; padding: 10px 15px; border-radius: var(--r); font-weight: 500;
  font-size: 18px; white-space: nowrap; }
.kopf-nav a:hover { background: rgba(255, 255, 255, .12); color: var(--kopf-text); }
.kopf-knopf { background: none; border: 0; color: var(--kopf-text); width: 46px; height: 46px; border-radius: var(--r);
  display: grid; place-items: center; cursor: pointer; flex: none; }
.kopf-knopf svg.i { width: 24px; height: 24px; }
.kopf-knopf:hover { background: rgba(255, 255, 255, .12); }
/* Sprache: Flaggen im Kopf – die eigene mit Ring, schmal nur die andere */
.sprachen { display: flex; gap: 4px; margin-left: 6px; }
.flagge { width: 46px; height: 46px; border-radius: var(--r); display: grid; place-items: center; flex: none; }
.flagge svg { width: 30px; height: 20px; border-radius: 2px; box-shadow: 0 0 0 1px rgba(255, 255, 255, .45); display: block; }
.flagge:hover { background: rgba(255, 255, 255, .12); }
.flagge.an svg { box-shadow: 0 0 0 2px #FFFFFF; }
.flagge:focus-visible { outline-offset: -2px; }

/* Entwurfsband – vor dem Veröffentlichen entfernen (siehe LIESMICH-Webseite.txt) */
.entwurf { background: var(--entwurf); color: #FFFFFF; font-size: 14.5px; line-height: 1.45; }
.entwurf .huelle { display: flex; gap: 12px; align-items: flex-start; padding-top: 10px; padding-bottom: 10px; }
.entwurf svg.i { margin-top: 1px; }
[data-platzhalter] { outline: 2px dashed var(--orange); outline-offset: 3px; border-radius: 4px; }

/* ---------- Knöpfe und Plaketten (wie im Programm) ---------- */
.knopf { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px;
  padding: 9px 18px; border-radius: var(--r); border: 2px solid var(--blau); background: var(--blau); color: #FFFFFF;
  font-weight: 500; font-size: 16px; line-height: 1.25; text-decoration: none; cursor: pointer; text-align: center; }
.knopf:hover { filter: brightness(1.06); text-decoration: none; }
.knopf:active { background: var(--blau-hell); border-color: var(--blau-hell); }
.knopf.zweit { background: transparent; color: var(--blau-text); border-color: var(--blau); }
.knopf.zweit:hover { background: var(--ok-hg); filter: none; }
.knopf.hell { background: #FFFFFF; border-color: #FFFFFF; color: #1F4E80; }
.knopf.hell:hover { background: #EAF1F9; filter: none; }
.knopf.hell-rand { background: transparent; border-color: rgba(255, 255, 255, .8); color: #FFFFFF; }
.knopf.hell-rand:hover { background: rgba(255, 255, 255, .1); filter: none; }
.knopfreihe { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.medium { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 6px; font-size: 13px;
  font-weight: 500; line-height: 1.6; white-space: nowrap; vertical-align: middle; }
.medium.pro { color: var(--blau-text); box-shadow: inset 0 0 0 1.5px var(--blau); }
.medium.alle { background: var(--ok-hg); color: var(--blau-text); }
.medium.gruen { background: var(--gruen-hg); color: var(--gruen-text); }
.medium.nacht { color: #FFFFFF; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .7); }
.hinweis { display: flex; gap: 12px; padding: 14px 18px; border-radius: var(--r); background: var(--ok-hg); }
.hinweis > svg.i { margin-top: 2px; color: var(--blau-text); }
.hinweis.warn { background: var(--orange-hg); }
.hinweis.warn > svg.i { color: var(--orange-text); }
.karte { background: var(--flaeche); border-radius: var(--r); box-shadow: var(--schatten); }

/* ---------- Bilder: Bildschirmfotos wie Programmfenster ---------- */
.bild { margin: 0; }
.bild img { border-radius: var(--r); box-shadow: var(--schatten-bild); background: var(--flaeche); }
.bild figcaption { color: var(--text-2); font-size: 14.5px; margin-top: 10px; }
.nur-dunkel { display: none !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nur-hell { display: none !important; }
  :root:not([data-theme="light"]) .nur-dunkel { display: block !important; }
}
:root[data-theme="dark"] .nur-hell { display: none !important; }
:root[data-theme="dark"] .nur-dunkel { display: block !important; }
.handy { width: 100%; max-width: 300px; margin: 0 auto; border: 10px solid #1D1D1B; border-radius: 38px;
  overflow: hidden; background: #1D1D1B; box-shadow: var(--schatten-bild); }
.handy img { border-radius: 28px; }

/* ---------- Kopfbereich ---------- */
.held { background: var(--held); color: #FFFFFF; padding: 56px 0 72px; }
.held h1 { font-size: clamp(34px, 4.4vw, 54px); line-height: 1.06; letter-spacing: -.012em; max-width: 22ch; }
.held .lead { font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--held-2); max-width: 46ch;
  margin: 18px 0 0; }
.tueren { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.tuer { position: relative; display: flex; flex-direction: column; border-radius: 12px; overflow: hidden;
  min-height: 100%; }
.tuer.privat { background: var(--flaeche); color: var(--text); box-shadow: 0 2px 6px rgba(0, 0, 0, .12); }
.tuer.betrieb { background: var(--nacht); color: var(--nacht-text); box-shadow: 0 2px 6px rgba(0, 0, 0, .18),
  inset 0 0 0 1px rgba(255, 255, 255, .08); }
.tuer-text { padding: 28px 28px 22px; }
.tuer-titel { font-size: 30px; font-weight: 500; line-height: 1.1; margin: 0 0 8px; }
.tuer-fuer { color: var(--text-2); margin: 0 0 18px; max-width: 40ch; }
.tuer.betrieb .tuer-fuer { color: var(--nacht-text-2); }
.tuer-liste { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; }
.tuer-liste li { display: flex; gap: 10px; align-items: flex-start; }
.tuer-liste svg.i { margin-top: 2px; color: var(--blau); }
.tuer.betrieb .tuer-liste svg.i { color: var(--nacht-akzent); }
.tuer-preis { font-size: 22px; font-weight: 500; }
.tuer .knopf::after { content: ""; position: absolute; inset: 0; border-radius: 12px; }   /* ganze Tür klickbar */
.tuer:hover .knopf { filter: brightness(1.06); }
.tuer:focus-within { outline: 3px solid var(--fokus); outline-offset: 3px; }
.tuer .knopf:focus-visible { outline: none; }
.tuer-bild { margin-top: auto; height: 260px; overflow: hidden; padding: 0 28px; display: flex; justify-content: center; }
.tuer.privat .tuer-bild { align-items: flex-start; }
.tuer.privat .handy { max-width: 236px; border-bottom: 0; border-radius: 34px 34px 0 0; box-shadow: 0 4px 18px rgba(39, 38, 34, .18); }
.tuer.privat .handy img { border-radius: 24px 24px 0 0; }
.tuer.betrieb .tuer-bild img { width: 100%; border-radius: 10px 10px 0 0; box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
  object-fit: cover; object-position: top; }

/* ---------- Bereiche ---------- */
.bereich { padding: 88px 0; }
.bereich-kopf { max-width: 760px; margin-bottom: 40px; }
.bereich-kopf h2 { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.12; letter-spacing: -.008em; }
.bereich-kopf .lead { font-size: 19px; color: var(--text-2); margin-top: 14px; max-width: 60ch; }
.unter { font-size: clamp(26px, 2.6vw, 32px); line-height: 1.2; margin: 0 0 22px; }

/* Was gesichert wird */
.gesichert { padding: 56px 0 0; }
.gesichert-karte { display: grid; grid-template-columns: 1fr 1fr; }
.gesichert-karte > div { padding: 26px 28px; }
.gesichert-karte > div + div { border-left: 1px solid var(--linie); }
.gesichert-karte h2 { font-size: 20px; display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.gesichert-karte h2 svg.i { color: var(--blau-text); }
.gesichert-karte p { color: var(--text-2); max-width: 54ch; }
.gesichert-karte .nicht h2 svg.i { color: var(--text-3); }

/* Privat */
.privat-hinweis { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: start; padding: 24px 26px;
  border-radius: var(--r); background: var(--flaeche); box-shadow: var(--schatten); border-left: 6px solid var(--blau);
  max-width: 860px; margin-bottom: 64px; }
.privat-hinweis svg.i { width: 36px; height: 36px; color: var(--blau); stroke-width: 1.8; }
.privat-hinweis h3 { font-size: 22px; margin-bottom: 6px; }
.privat-hinweis p { color: var(--text-2); }

.schritte-teil { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 48px; align-items: start;
  margin-bottom: 96px; }
.schritte { list-style: none; counter-reset: s; padding: 0; margin: 0 0 24px; display: grid; gap: 22px; }
.schritte li { counter-increment: s; display: grid; grid-template-columns: 36px 1fr; gap: 14px; }
.schritte li::before { content: counter(s); width: 32px; height: 32px; border-radius: 50%; background: var(--blau);
  color: #FFFFFF; display: grid; place-items: center; font-weight: 500; font-size: 16px; margin-top: 1px; }
.schritte h4 { font-size: 19px; margin-bottom: 4px; }
.schritte p { color: var(--text-2); }
.klein { font-size: 14.5px; color: var(--text-2); }

.funktionen { display: grid; gap: 88px; margin-bottom: 96px; }
/* Text links, Bild rechts; .links: Bild links; .hoch: schmales, hohes Bild (Fenster, Handy) */
.funktion { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: center; }
.funktion.links { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.funktion.links .funktion-bild { order: -1; }
.funktion.hoch { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
.funktion.hoch.links { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
.funktion h4 { font-size: 23px; line-height: 1.2; margin-bottom: 12px; display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; }
.funktion p { color: var(--text-2); max-width: 52ch; }
.funktion .klein { margin-top: 12px; }
.funktion-bild.plan { max-width: 400px; width: 100%; justify-self: center; }

.ausserdem { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; margin-bottom: 96px; }
.ausserdem h4 { font-size: 17px; display: flex; gap: 10px; align-items: center; margin-bottom: 6px; }
.ausserdem h4 svg.i { color: var(--blau-text); }
.ausserdem p { color: var(--text-2); font-size: 15.5px; }

/* Preise */
.preise { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.preis { display: flex; flex-direction: column; padding: 26px 24px 24px; position: relative; }
.preis.empfohlen { outline: 2px solid var(--blau); outline-offset: -2px; }
.preis h4 { font-size: 22px; display: flex; gap: 10px; align-items: center; }
.preis .betrag { font-size: 46px; font-weight: 500; line-height: 1; margin: 18px 0 6px; font-feature-settings: "tnum";
  letter-spacing: -.01em; }
.preis .betrag small { font-size: 18px; font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.preis .zu { color: var(--text-2); font-size: 15px; margin-bottom: 18px; }
.preis ul { list-style: none; padding: 0; margin: 0 0 22px; display: grid; gap: 8px; font-size: 15.5px; }
.preis li { display: flex; gap: 10px; align-items: flex-start; }
.preis li svg.i { width: 18px; height: 18px; margin-top: 3px; color: var(--gruen-text); stroke-width: 2.4; }
.preis .knopf { margin-top: auto; width: 100%; }
.preis .unter-knopf { font-size: 13.5px; color: var(--text-2); margin-top: 10px; text-align: center; }
.preis-fuss { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 20px; }
.preis-fuss .hinweis p { margin: 0; }

.vergleich-huelle { margin-top: 40px; overflow-x: auto; }
.vergleich { width: 100%; border-collapse: collapse; background: var(--flaeche); border-radius: var(--r);
  box-shadow: var(--schatten); overflow: hidden; font-size: 15.5px; }
.vergleich th, .vergleich td { padding: 12px 16px; border-bottom: 1px solid var(--linie); text-align: center; }
.vergleich th:first-child, .vergleich td:first-child { text-align: left; }
.vergleich thead th { font-weight: 500; color: var(--text-2); font-size: 14.5px; background: var(--flaeche-2); }
.vergleich tbody th { font-weight: 400; }
.vergleich tr:last-child td, .vergleich tr:last-child th { border-bottom: 0; }
.vergleich svg.i { width: 18px; height: 18px; stroke-width: 2.4; }
.vergleich .ja { color: var(--gruen-text); }
.vergleich .nein { color: var(--text-3); }
.nach-tabelle { margin-top: 14px; }

/* Download */
.download { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px; margin-top: 96px; }
.download .karte { padding: 26px 28px; }
.paket { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; font-size: 19px; font-weight: 500;
  margin: 18px 0 10px; }
.paket .dateiname { white-space: nowrap; }
.paket svg.i { color: var(--blau-text); }
.download .haftung { margin: 16px 0 16px; }
.pruefsumme { margin: 18px 0 0; font-size: 14.5px; color: var(--text-2); }
.pruefsumme code { display: block; margin-top: 4px; padding: 8px 10px; border-radius: 6px; background: var(--flaeche-2);
  color: var(--text); font: 13px/1.4 ui-monospace, "SF Mono", Menlo, Consolas, monospace; overflow-wrap: anywhere; }
.voraus { margin: 0; display: grid; grid-template-columns: 9em 1fr; }
.voraus dt { font-weight: 500; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--linie); }
.voraus dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--linie); color: var(--text-2); }
.voraus dt:last-of-type, .voraus dd:last-of-type { border-bottom: 0; }

/* Hilfe und Austausch */
.hilfe-teil { margin-top: 96px; }
.hilfe-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.hilfe-karte { padding: 24px; display: flex; flex-direction: column; }
.hilfe-karte h4 { font-size: 19px; display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.hilfe-karte h4 svg.i { color: var(--blau-text); }
.hilfe-karte p { color: var(--text-2); font-size: 16px; }
.hilfe-karte .knopf { margin-top: auto; align-self: flex-start; }
.hilfe-karte p + .knopf { margin-top: 16px; }
.hilfe-hinweis { border-radius: var(--r); background: var(--ok-hg); }

/* ---------- Geschäftlich (Nachtblau) ---------- */
.betrieb-band { background: var(--nacht); color: var(--nacht-text); }
.betrieb-band .bereich-kopf .lead, .betrieb-band .gedaempft { color: var(--nacht-text-2); }
.betrieb-band a:not(.knopf) { color: var(--nacht-akzent); }
.angebote { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 96px; }
.angebot { background: var(--flaeche); color: var(--text); border-radius: var(--r); padding: 28px; display: flex;
  flex-direction: column; }
.angebot a:not(.knopf) { color: var(--blau-text); }
.angebot h3 { font-size: 24px; line-height: 1.2; margin-bottom: 6px; }
.angebot .auf-anfrage { color: var(--text-2); font-weight: 500; margin-bottom: 14px; }
.angebot ul { padding: 0; margin: 0 0 24px; list-style: none; display: grid; gap: 10px; color: var(--text-2); }
.angebot li { display: flex; gap: 10px; align-items: flex-start; }
.angebot li svg.i { width: 18px; height: 18px; margin-top: 3px; color: var(--blau-text); stroke-width: 2.4; }
.angebot .knopfreihe { margin-top: auto; }

.server-kopf { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-bottom: 36px; max-width: 760px; }
.server-kopf h3 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; }
.server-kopf p { color: var(--nacht-text-2); font-size: 18.5px; }
.server-bild { margin: 0 0 56px; }
.server-bild img { border-radius: 10px; box-shadow: 0 12px 40px rgba(0, 0, 0, .45); }
.server-bild figcaption { color: var(--nacht-text-2); font-size: 14.5px; margin-top: 12px; }
.vorteile { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 32px; margin-bottom: 88px; }
.vorteil h4 { font-size: 19px; line-height: 1.3; display: flex; gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.vorteil h4 svg.i { width: 24px; height: 24px; color: var(--nacht-akzent); margin-top: -1px; }
.vorteil p { color: var(--nacht-text-2); font-size: 16px; padding-left: 36px; }
.galerie { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 32px; margin-bottom: 88px;
  align-items: start; }
.galerie .bild figcaption { color: var(--nacht-text-2); }
.galerie .bild img { box-shadow: 0 10px 32px rgba(0, 0, 0, .4); }
.galerie .handy-zelle { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 28px; align-items: center; }
.galerie .handy { border-color: #000; background: #000; box-shadow: 0 10px 32px rgba(0, 0, 0, .4); }
.galerie .handy-titel { font-size: 19px; margin-bottom: 8px; }
.abstand-oben { margin-top: 10px; }
.server-voraus { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; margin-bottom: 88px; }
.server-voraus h3 { font-size: 24px; }
.server-voraus .voraus dt { border-color: var(--nacht-linie); }
.server-voraus .voraus dd { border-color: var(--nacht-linie); color: var(--nacht-text-2); }

/* Anfrage */
.anfrage { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 48px; align-items: start; }
.anfrage-text h3 { font-size: clamp(26px, 2.8vw, 34px); line-height: 1.15; margin-bottom: 14px; }
.anfrage-text p { color: var(--nacht-text-2); }
.formular { background: var(--flaeche); color: var(--text); border-radius: var(--r); padding: 28px; }
.formular a { color: var(--blau-text); }
.formular fieldset { border: 0; padding: 0; margin: 0 0 18px; }
.formular legend, .formular label.feld > span { display: block; font-weight: 500; margin-bottom: 6px; font-size: 15.5px; }
.formular .wahl { display: grid; gap: 8px; }
.formular .wahl label { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--linie-stark);
  border-radius: var(--r); cursor: pointer; background: var(--flaeche); }
.formular .wahl label:has(input:checked) { border-color: var(--blau); box-shadow: inset 0 0 0 1px var(--blau); background: var(--ok-hg); }
.formular .wahl small { display: block; color: var(--text-2); font-size: 14px; }
.formular input[type="checkbox"], .formular input[type="radio"] { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--blau); flex: none; }
.formular .wahl.zwei { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.unterstuetzung { margin-top: 88px; padding-top: 88px; border-top: 1px solid var(--nacht-linie); }
.felder { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; margin-bottom: 18px; }
.felder .breit { grid-column: 1 / -1; }
.formular label.feld { display: block; }
.formular input[type="text"], .formular input[type="email"], .formular input[type="tel"], .formular input[type="number"],
.formular textarea { width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--linie-stark);
  border-radius: var(--r); background: var(--flaeche); color: var(--text); font-size: 16px; }
.formular textarea { min-height: 110px; resize: vertical; line-height: 1.45; }
.formular input:focus-visible, .formular textarea:focus-visible { outline: 2px solid var(--blau); outline-offset: 0; border-color: var(--blau); }
.formular .pflicht { color: var(--text-3); font-weight: 400; }
.formular .fehler-text { color: #A7302D; font-size: 14.5px; margin: 0 0 12px; display: none; }
.formular.zeige-fehler .fehler-text { display: block; }
.formular .klein { margin-top: 14px; }
.gesendet { margin-top: 16px; display: none; }
.gesendet.an { display: flex; }
.gesendet pre { white-space: pre-wrap; font: 13px/1.45 ui-monospace, "SF Mono", Menlo, Consolas, monospace; margin: 10px 0;
  padding: 10px; background: var(--flaeche); border-radius: 6px; max-height: 220px; overflow: auto; }

/* ---------- Fragen ---------- */
.fragen-teil { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 56px; align-items: start; }
.fragen { border-top: 1px solid var(--linie-stark); }
.fragen-seite { padding: 24px; position: sticky; top: 80px; }
.fragen-seite h3 { font-size: 20px; margin-bottom: 8px; }
.fragen-seite p { color: var(--text-2); }
.fragen-seite .knopf { width: 100%; margin-top: 6px; }
.fragen-seite hr { border: 0; border-top: 1px solid var(--linie); margin: 20px 0; }
.fragen details { border-bottom: 1px solid var(--linie-stark); }
.fragen summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 2px; font-size: 18.5px; font-weight: 500;
  position: relative; }
.fragen summary::-webkit-details-marker { display: none; }
.fragen summary svg.i { position: absolute; right: 8px; top: 21px; color: var(--text-2); transition: transform .15s; }
.fragen details[open] summary svg.i { transform: rotate(180deg); }
.fragen .antwort { padding: 0 2px 22px; color: var(--text-2); max-width: 68ch; }
.fragen .antwort ul { margin: 0 0 12px; padding-left: 20px; }
.fragen .antwort li { margin-bottom: 6px; }
@media (prefers-reduced-motion: reduce) { .fragen summary svg.i { transition: none; } }

/* ---------- Fuß ---------- */
.fuss { background: var(--flaeche); border-top: 1px solid var(--linie); padding: 40px 0 48px; font-size: 14.5px;
  color: var(--text-2); }
.fuss nav { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-bottom: 18px; }
.fuss nav a { color: var(--text); font-weight: 500; text-decoration: none; }
.fuss nav a:hover { text-decoration: underline; }
.fuss p { max-width: 80ch; }

/* ---------- Rechtsseiten ---------- */
.recht { padding: 48px 0 88px; }
.recht .karte { padding: 32px; max-width: 860px; }
.recht h1 { font-size: clamp(30px, 3.4vw, 40px); margin-bottom: 10px; }
.recht h2 { font-size: 21px; margin: 28px 0 8px; }
.recht p, .recht li { color: var(--text-2); }
.recht ul { padding-left: 20px; }
.zurueck { display: inline-flex; gap: 6px; align-items: center; margin-bottom: 18px; font-weight: 500; text-decoration: none; }

/* ---------- Schmaler ---------- */
@media (max-width: 1000px) {
  .ausserdem { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hilfe-raster { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .vorteile { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preise { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .preis-fuss { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
}
@media (max-width: 900px) {
  .kopf-nav .breit-nur { display: none; }
  .kopf-innen { height: 68px; }
  .tueren, .angebote, .gesichert-karte, .download, .galerie, .server-voraus, .anfrage, .schritte-teil, .fragen-teil { grid-template-columns: minmax(0, 1fr); }
  .fragen-seite { position: static; max-width: 560px; }
  .gesichert-karte > div + div { border-left: 0; border-top: 1px solid var(--linie); }
  .funktion, .funktion.links, .funktion.hoch, .funktion.hoch.links { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .funktion.links .funktion-bild { order: 0; }
  .funktion h4 { font-size: 21px; }
  .funktion-bild.plan { justify-self: start; }
  .galerie .handy-zelle { grid-template-columns: minmax(0, 200px) minmax(0, 1fr); }
}
@media (max-width: 720px) {
  :root { --rand: 16px; }
  body { font-size: 16.5px; }
  .marke small { display: none; }
  .marke { font-size: 18px; gap: 10px; }
  .kopf-innen { height: 60px; gap: 12px; }
  .marke .marke-kachel { width: 34px; height: 34px; }
  .marke .marke-schrift { width: 100.3px; height: 23px; }
  .kopf-nav { gap: 2px; }
  .sprachen { margin-left: 0; }
  .flagge.an { display: none; }
  .flagge { width: 42px; height: 42px; }
  .flagge svg { width: 27px; height: 18px; }
  .kopf-knopf { width: 42px; height: 42px; }
  .kopf-knopf svg.i { width: 22px; height: 22px; }
  .kopf-nav a { padding: 8px 9px; font-size: 16px; }
  html { scroll-padding-top: 76px; }
  .held { padding: 36px 0 48px; }
  .tueren { margin-top: 32px; gap: 18px; }
  .tuer-text { padding: 22px 20px 18px; }
  .tuer-titel { font-size: 26px; }
  .tuer-bild { height: 210px; padding: 0 20px; }
  .bereich { padding: 64px 0; }
  .bereich-kopf { margin-bottom: 28px; }
  .bereich-kopf .lead { font-size: 17.5px; }
  .privat-hinweis { gap: 12px; padding: 20px 18px; margin-bottom: 48px; border-left-width: 5px; }
  .privat-hinweis svg.i { width: 26px; height: 26px; }
  .privat-hinweis h3 { font-size: 20px; }
  .schritte-teil { margin-bottom: 64px; gap: 28px; }
  .funktionen { gap: 56px; }
  .funktion h4 { font-size: 20px; }
  .ausserdem { grid-template-columns: minmax(0, 1fr); gap: 20px; margin-bottom: 64px; }
  .vorteile { grid-template-columns: minmax(0, 1fr); gap: 26px; margin-bottom: 56px; }
  .vorteil p { padding-left: 0; }
  .angebote { margin-bottom: 64px; }
  .angebot, .formular { padding: 22px 20px; }
  .galerie { margin-bottom: 56px; gap: 32px; }
  .galerie .handy-zelle { grid-template-columns: minmax(0, 1fr); }
  .galerie .handy { max-width: 240px; margin: 0; }
  .felder { grid-template-columns: minmax(0, 1fr); }
  .formular .wahl.zwei { grid-template-columns: minmax(0, 1fr); }
  .hilfe-teil { margin-top: 64px; }
  .unterstuetzung { margin-top: 56px; padding-top: 56px; }
  .download { margin-top: 64px; }
  .download .karte { padding: 22px 20px; }
  .voraus { grid-template-columns: minmax(0, 1fr); }
  .voraus dt { padding: 12px 0 2px; border-bottom: 0; }
  .voraus dd { padding: 0 0 12px; }
  .vergleich th, .vergleich td { padding: 10px 8px; }
  .vergleich { font-size: 14.5px; }
  .gesichert-karte > div { padding: 22px 20px; }
  .fragen summary { font-size: 17px; }
  .recht .karte { padding: 22px 20px; }
}
@media (max-width: 460px) {   /* Handy: Platz für die Flagge – die Darstellung folgt hier dem System */
  .kopf-innen { gap: 8px; height: 58px; }
  .kopf-nav a { padding: 8px 7px; font-size: 15.5px; }
  .kopf-nav .kopf-knopf { display: none; }
  .flagge { width: 38px; }
  .marke .marke-kachel { width: 32px; height: 32px; }
  .marke .marke-schrift { width: 91.6px; height: 21px; }
}
@media (max-width: 380px) {
  .kopf-nav a { padding: 8px 6px; font-size: 14.5px; }
  .marke { font-size: 17px; gap: 8px; }
  .flagge { width: 36px; }
  .marke .marke-kachel { width: 28px; height: 28px; }
  .marke .marke-schrift { width: 78.5px; height: 18px; }
}
@media (max-width: 340px) {   /* sehr schmal (320 px): Marke und Menü kleiner, damit sie nebeneinander passen */
  .kopf-nav a { padding: 8px 5px; font-size: 14px; }
  .marke { gap: 7px; }
  .flagge { width: 32px; }
  .marke .marke-kachel { width: 26px; height: 26px; }
  .marke .marke-schrift { width: 69.8px; height: 16px; }
}