/* BackupBox — gemeinsamer Stil für alle Seiten.
   Motiv ist der Datenblock: Das Produkt liest nur die geänderten Blöcke, und
   genau das trägt Logo, Held und Abschnittsmarken. */

:root{
  --papier:#fbfaf7;
  --papier-tief:#f2efe9;
  --karte:#ffffff;
  --tinte:#12161b;
  --stahl:#5c6b7a;
  --stahl-hell:#8a97a4;
  --linie:#e0dcd4;
  --jade:#0f8a5f;
  --jade-weich:#e3f2ea;
  --kupfer:#b4633a;
  --block-aus:#dcd8d0;
  --block-an:#0f8a5f;

  --anzeige:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --text:"IBM Plex Sans","Segoe UI",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#0e1216;
    --papier-tief:#121820;
    --karte:#161d26;
    --tinte:#eef2f6;
    --stahl:#9aa8b6;
    --stahl-hell:#6d7c8b;
    --linie:#242e3a;
    --jade:#2fb37f;
    --jade-weich:#12281f;
    --kupfer:#d8845a;
    --block-aus:#232d38;
    --block-an:#2fb37f;
  }
}
:root[data-theme="dark"]{
  --papier:#0e1216; --papier-tief:#121820; --karte:#161d26; --tinte:#eef2f6;
  --stahl:#9aa8b6; --stahl-hell:#6d7c8b; --linie:#242e3a; --jade:#2fb37f;
  --jade-weich:#12281f; --kupfer:#d8845a; --block-aus:#232d38; --block-an:#2fb37f;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--text);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--anzeige);text-wrap:balance;margin:0}
a{color:inherit}
p,li,dd,dt,h1,h2,h3,small,b,span{overflow-wrap:break-word}
img,svg,table{max-width:100%}
.rahmen{max-width:1120px;margin:0 auto;padding:0 28px}
.rahmen > *{min-width:0}
.eng{max-width:760px}

/* ------------------------------------------------------------------- Kopf */
.kopf{
  position:sticky;top:0;z-index:20;
  background:color-mix(in srgb,var(--papier) 92%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--linie);
}
.kopf .rahmen{display:flex;align-items:center;gap:26px;height:70px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none}
.marke .wort{font-family:var(--anzeige);font-weight:800;font-size:21px;letter-spacing:-.5px}
.marke .wort i{font-style:normal;color:var(--jade)}
.wege{margin-left:auto;display:flex;align-items:center;gap:6px}
.wege a{color:var(--stahl);text-decoration:none;font-size:15px;padding:8px 13px;border-radius:7px}
.wege a:hover{color:var(--tinte);background:var(--papier-tief)}
.taste{
  display:inline-block;background:var(--tinte);color:var(--papier);
  padding:10px 20px;border-radius:8px;text-decoration:none;
  font-weight:600;font-size:15px;border:1px solid var(--tinte);cursor:pointer;
  font-family:var(--text);
}
.taste:hover{background:var(--jade);border-color:var(--jade);color:#fff}
.taste.offen{background:transparent;color:var(--tinte);border-color:var(--linie)}
.taste.offen:hover{background:var(--papier-tief);color:var(--tinte);border-color:var(--stahl-hell)}
@media(max-width:800px){.wege .weg{display:none}}

/* -------------------------------------------------------------------- Held */
.held{padding:84px 0 72px;border-bottom:1px solid var(--linie)}
.held .rahmen{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center}
@media(max-width:900px){.held .rahmen{grid-template-columns:1fr;gap:44px}}
.marker{
  display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);
  font-size:12.5px;letter-spacing:.04em;text-transform:uppercase;
  color:var(--jade);background:var(--jade-weich);
  padding:7px 13px;border-radius:6px;margin-bottom:24px;
}
.led{width:7px;height:7px;border-radius:50%;background:var(--jade)}
@media (prefers-reduced-motion:no-preference){
  .led{animation:puls 2.6s ease-in-out infinite}
  @keyframes puls{0%,100%{opacity:1}50%{opacity:.35}}
}
.held h1{
  font-size:clamp(38px,5.6vw,64px);line-height:1.02;letter-spacing:-2px;
  font-weight:800;margin-bottom:22px;
}
.held h1 em{font-style:normal;color:var(--jade)}
.held .fuehrung{font-size:19.5px;color:var(--stahl);max-width:33em;margin:0 0 32px}
.tasten{display:flex;gap:12px;flex-wrap:wrap}

.raster{
  display:grid;grid-template-columns:repeat(12,1fr);gap:6px;
  padding:22px;background:var(--karte);border:1px solid var(--linie);border-radius:14px;
}
.block{aspect-ratio:1;border-radius:2.5px;background:var(--block-aus)}
.block.an{background:var(--block-an)}
.raster-fuss{
  display:flex;justify-content:space-between;font-family:var(--mono);
  font-size:12.5px;color:var(--stahl-hell);margin-top:12px;padding:0 4px;
}

/* -------------------------------------------------------------- Messwerte */
.messung{border-bottom:1px solid var(--linie);background:var(--papier-tief)}
.messung .rahmen{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
@media(max-width:820px){.messung .rahmen{grid-template-columns:repeat(2,1fr)}}
.wert{padding:30px 26px 30px 0}
.wert + .wert{padding-left:26px;border-left:1px solid var(--linie)}
@media(max-width:820px){
  .wert{padding:24px 20px}
  .wert:nth-child(odd){padding-left:0}
  .wert:nth-child(3),.wert:nth-child(4){border-top:1px solid var(--linie)}
  .wert:nth-child(3){border-left:0}
}
.wert b{display:block;font-family:var(--mono);font-size:30px;font-weight:500;
  letter-spacing:-1px;font-variant-numeric:tabular-nums}
.wert span{display:block;color:var(--stahl);font-size:14.5px;margin-top:5px;max-width:20em}

/* ------------------------------------------------------------- Abschnitte */
section{padding:84px 0}
section + section{border-top:1px solid var(--linie)}
.auge{
  font-family:var(--mono);font-size:12.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--kupfer);margin-bottom:14px;
}
section h2{font-size:clamp(29px,3.6vw,40px);letter-spacing:-1.1px;font-weight:700;line-height:1.12}
.einleitung{color:var(--stahl);font-size:18.5px;max-width:36em;margin:14px 0 0}
.kopfzeile{margin-bottom:52px}

.faehig{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;background:var(--linie);
  border:1px solid var(--linie);border-radius:14px;overflow:hidden}
@media(max-width:820px){.faehig{grid-template-columns:1fr}}
.punkt{background:var(--karte);padding:30px 28px}
.punkt .marke-klein{display:flex;gap:3px;margin-bottom:16px}
.punkt .marke-klein i{width:8px;height:8px;border-radius:2px;background:var(--block-aus);display:block}
.punkt .marke-klein i.an{background:var(--jade)}
.punkt h3{font-size:19px;font-weight:700;letter-spacing:-.3px;margin-bottom:8px}
.punkt p{margin:0;color:var(--stahl);font-size:15.5px;line-height:1.62}

.folge{display:grid;gap:0;border-left:2px solid var(--linie);margin-left:9px}
.stufe{position:relative;padding:0 0 40px 34px}
.stufe:last-child{padding-bottom:0}
.stufe::before{
  content:"";position:absolute;left:-11px;top:5px;width:20px;height:20px;border-radius:5px;
  background:var(--jade);box-shadow:0 0 0 5px var(--papier);
}
.stufe .nr{font-family:var(--mono);font-size:12.5px;color:var(--stahl-hell);letter-spacing:.06em}
.stufe h3{font-size:20px;font-weight:700;letter-spacing:-.3px;margin:4px 0 7px}
.stufe p{margin:0;color:var(--stahl);font-size:16px;max-width:44em}

.datenblatt{background:var(--karte);border:1px solid var(--linie);border-radius:14px;overflow:hidden}
.zeile{display:grid;grid-template-columns:230px 1fr;gap:24px;padding:18px 26px;
  border-bottom:1px solid var(--linie);align-items:baseline}
.zeile:last-child{border-bottom:0}
@media(max-width:720px){.zeile{grid-template-columns:1fr;gap:5px}}
.zeile dt{font-family:var(--mono);font-size:13px;color:var(--kupfer);letter-spacing:.03em;
  text-transform:uppercase}
.zeile dd{margin:0;font-size:16px;color:var(--tinte)}
.zeile dd small{display:block;color:var(--stahl);font-size:14.5px;margin-top:3px}

/* --------------------------------------------------------------- Kontakt */
.kontakt{background:var(--papier-tief)}
.kontakt .rahmen{display:grid;grid-template-columns:1fr 1.1fr;gap:56px;align-items:start}
@media(max-width:860px){.kontakt .rahmen{grid-template-columns:1fr;gap:36px}}
.formular{background:var(--karte);border:1px solid var(--linie);border-radius:14px;padding:28px}
.feld{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.feld label{font-size:13.5px;color:var(--stahl);font-weight:500}
.feld select{
  /* Ohne eigenen Stil malt der Browser einen grauen Systemknopf zwischen die
     gerahmten Felder — das fiel auf der Anfrageseite sofort auf (08.09.2026). */
  appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--stahl) 50%),
                   linear-gradient(135deg,var(--stahl) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
  padding-right:38px;cursor:pointer;
}
.feld input,.feld select,.feld textarea{
  font-family:var(--text);font-size:16px;padding:11px 13px;
  border:1px solid var(--linie);border-radius:9px;
  background:var(--papier);color:var(--tinte);width:100%;
}
.feld textarea{min-height:130px;resize:vertical}
.feld input:focus,.feld select:focus,.feld textarea:focus{outline:2px solid var(--jade);outline-offset:1px;border-color:var(--jade)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:520px){.zwei{grid-template-columns:1fr}}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.meldung{border-radius:10px;padding:13px 16px;margin-bottom:16px;font-size:15px;display:none}
.meldung.gut{background:var(--jade-weich);color:var(--jade);display:block}
.meldung.schlecht{background:color-mix(in srgb,var(--kupfer) 14%,transparent);color:var(--kupfer);display:block}
.kontaktdaten{list-style:none;padding:0;margin:22px 0 0}
.kontaktdaten li{display:flex;gap:12px;margin-bottom:12px;color:var(--stahl);font-size:16px}
.kontaktdaten b{color:var(--tinte);font-weight:600;min-width:105px}

/* ----------------------------------------------------------------- Recht */
.recht{padding:56px 0 84px}
.recht h1{font-size:clamp(30px,4vw,42px);letter-spacing:-1.2px;margin-bottom:10px}
.recht .stand{color:var(--stahl-hell);font-family:var(--mono);font-size:13px;margin-bottom:36px}
.recht h2{font-size:21px;letter-spacing:-.4px;margin:36px 0 10px}
.recht h3{font-size:17px;margin:24px 0 6px}
.recht p,.recht li{color:var(--stahl);font-size:16.5px}
.recht li{margin-bottom:6px}
.recht .kasten{background:var(--karte);border:1px solid var(--linie);border-radius:12px;
  padding:22px 26px;margin:20px 0}
.recht .kasten p{margin:0;color:var(--tinte)}
.recht .kasten p + p{margin-top:4px}

.preise{background:var(--papier-tief);border-top:1px solid var(--linie)}
.tarife{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch}
/* Drei Karten (NASBox): gleich breit über die volle Breite, nicht drei Viertel
   einer Vierer-Reihe, und mit Luft zu dem, was darunter kommt. */
.tarife.drei{grid-template-columns:repeat(3,1fr);margin-bottom:36px}
@media(max-width:1000px){.tarife{grid-template-columns:repeat(2,1fr)}
  .tarife.drei{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.tarife.drei{grid-template-columns:1fr}}
@media(max-width:620px){.tarife{grid-template-columns:1fr}}
.tarif{
  position:relative;background:var(--karte);border:1px solid var(--linie);
  border-radius:18px;padding:26px 24px 24px;display:flex;flex-direction:column;
  transition:border-color .15s, box-shadow .15s, transform .15s;
}
.tarif:hover{border-color:var(--stahl-hell);box-shadow:0 8px 26px rgba(18,22,27,.07)}
.tarif.gewaehlt{border-color:var(--jade);box-shadow:0 12px 34px rgba(15,138,95,.13)}
.tarif.offen{background:linear-gradient(180deg,var(--papier) 0%,var(--karte) 60%)}
.marker-klein{
  position:absolute;top:-11px;left:24px;background:var(--jade);color:#fff;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 12px;border-radius:20px;white-space:nowrap;
}
.tarif-kopf{display:flex;flex-direction:column;gap:2px;min-height:46px}
.tarif-kopf .menge{
  font-family:var(--anzeige);font-size:21px;font-weight:800;letter-spacing:-.4px;
  color:var(--tinte);
}
.tarif-kopf .je{color:var(--stahl-hell);font-size:13px}
.betrag{display:flex;align-items:baseline;gap:4px;margin:16px 0 18px;
  padding-bottom:18px;border-bottom:1px solid var(--linie)}
.betrag b{
  font-family:var(--mono);font-size:44px;font-weight:500;letter-spacing:-2px;
  line-height:1;color:var(--tinte);
}
.tarif.offen .betrag b{font-family:var(--anzeige);font-size:26px;font-weight:700;
  letter-spacing:-.6px;color:var(--kupfer)}
.betrag span{font-family:var(--mono);font-size:22px;color:var(--stahl)}
.enthalten{list-style:none;padding:0;margin:0 0 18px;display:flex;flex-direction:column;gap:10px}
.enthalten li{position:relative;padding-left:22px;color:var(--tinte);font-size:15px;
  line-height:1.5;overflow-wrap:break-word}
.enthalten li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;
  border-radius:2px;background:var(--jade)}
.tarif .passt{margin:auto 0 0;color:var(--stahl);font-size:14px;padding-top:14px;
  border-top:1px solid var(--linie)}
.tarif .taste{margin-top:16px;align-self:start}

.preisfuss{
  margin-top:22px;background:var(--karte);border:1px solid var(--linie);
  border-radius:18px;padding:32px 34px;display:grid;
  grid-template-columns:1fr 1fr;gap:44px;
}
@media(max-width:860px){.preisfuss{grid-template-columns:1fr;gap:26px}}
.preisfuss h3{font-family:var(--anzeige);font-size:17px;font-weight:700;
  letter-spacing:-.2px;margin:0 0 12px}
.preisfuss p{color:var(--tinte);font-size:16px;margin:0 0 12px;max-width:40em}
.preisfuss p.klein{color:var(--stahl);font-size:14.5px}
.haken{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:9px}
.haken li{position:relative;padding-left:26px;color:var(--tinte);font-size:15.5px}
.haken li::before{
  content:"";position:absolute;left:2px;top:6px;width:11px;height:6px;
  border-left:2px solid var(--jade);border-bottom:2px solid var(--jade);
  transform:rotate(-45deg);
}

/* -------------------------------------------------------------------- Fuß */
.fuss{border-top:1px solid var(--linie);padding:40px 0;color:var(--stahl);font-size:14.5px}
.fuss .rahmen{display:flex;gap:22px;flex-wrap:wrap;align-items:center}
.fuss a{color:var(--stahl);text-decoration:none}
.fuss a:hover{color:var(--tinte)}
.fuss .rechts{margin-left:auto;display:flex;gap:20px;flex-wrap:wrap}
:focus-visible{outline:2.5px solid var(--jade);outline-offset:2px;border-radius:4px}