/* Kalibrat – Bausteine der oeffentlichen Seite.
 *
 * Ergaenzt start.css. Bewusst nur eine Lichtfassung: die Bildschirmfotos
 * zeigen eine helle Oberflaeche, und eine dunkle Seite drumherum liesse sie
 * wie Fremdkoerper wirken. Eine Entscheidung, keine Auslassung.
 */

/* ---------- Kopf mit Untermenue ---------- */
.kopf nav a.jetzt{
  background:var(--akzent); color:#fff; padding:.42rem .9rem; border-radius:7px;
  font-weight:600;
}
.kopf nav a.jetzt:hover{background:var(--akzent-dunkel); color:#fff}

/* ---------- Held mit Bild ---------- */
.held-zwei{
  display:grid; gap:2.5rem; align-items:center;
  grid-template-columns:minmax(0,1fr);
}
@media(min-width:1000px){
  .held-zwei{grid-template-columns:minmax(0,46%) minmax(0,54%)}
}
.held-marken{
  display:flex; flex-wrap:wrap; gap:.4rem .55rem; margin:1.6rem 0 0; padding:0;
  list-style:none;
}
.held-marken li{
  font-size:.78rem; color:var(--tinte-2); background:#fff;
  border:1px solid var(--linie); border-radius:20px; padding:.22rem .7rem;
}

/* ---------- Bildschirmfoto im Rahmen ---------- */
/* Der Rahmen soll nicht nach Spielzeug aussehen: eine feine Leiste, drei
   Punkte, sonst nichts. Er sagt "das ist ein Bildschirm", ohne selbst
   aufzufallen. */
.schirm{
  border:1px solid var(--linie); border-radius:12px; overflow:hidden;
  background:#fff; box-shadow:0 18px 50px #0e5a6e1f, 0 2px 6px #0e5a6e14;
}
.schirm-leiste{
  display:flex; align-items:center; gap:.4rem;
  padding:.55rem .8rem; background:var(--grund-2);
  border-bottom:1px solid var(--linie);
}
.schirm-leiste i{
  width:9px; height:9px; border-radius:50%; background:#cdd8de; display:block;
}
.schirm-leiste span{
  margin-left:.6rem; font-size:.74rem; color:var(--tinte-3);
  font-family:ui-monospace,"Cascadia Mono",Consolas,monospace;
}
.schirm img{display:block; width:100%; height:auto}
.schirm.beschnitt img{
  /* Manche Aufnahmen haben unten Luft. Statt sie zu strecken, wird der
     untere Rand abgeschnitten - das Bild bleibt scharf. */
  object-fit:cover; object-position:top; max-height:520px;
}

/* ---------- Funktionsblock: Text und Bild im Wechsel ---------- */
.zug{
  display:grid; gap:2rem; align-items:center; padding:2.6rem 0;
  grid-template-columns:minmax(0,1fr);
  border-top:1px solid var(--linie);
}
@media(min-width:900px){
  .zug{grid-template-columns:minmax(0,42%) minmax(0,58%); gap:3rem}
  .zug.gedreht .zug-text{order:2}
  .zug.gedreht .zug-bild{order:1}
}
.zug:first-of-type{border-top:0}
.zug-text h3{font-size:1.42rem; letter-spacing:-.01em; margin-bottom:.5rem}
.zug-text p{color:var(--tinte-2)}
.zug-punkte{list-style:none; padding:0; margin:1rem 0 0; font-size:.93rem}
.zug-punkte li{padding:.28rem 0 .28rem 1.5rem; position:relative; color:var(--tinte-2)}
.zug-punkte li::before{
  content:""; position:absolute; left:0; top:.72em; width:7px; height:7px;
  border-radius:50%; background:var(--akzent-leuchte);
}

/* ---------- Zahlenband ---------- */
.zahlen{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:1.4rem; text-align:center;
}
.zahlen b{
  display:block; font-size:2.1rem; font-weight:800; letter-spacing:-.02em;
  color:var(--akzent); font-variant-numeric:tabular-nums;
}
.zahlen span{font-size:.9rem; color:var(--tinte-2)}

/* ---------- Video ---------- */
.film{
  border:1px solid var(--linie); border-radius:12px; overflow:hidden;
  background:#0b1418; box-shadow:0 18px 50px #0e5a6e22;
}
.film video{display:block; width:100%; height:auto}
.film-unter{
  font-size:.85rem; color:var(--tinte-3); text-align:center; margin-top:.7rem;
}

/* ---------- Haeufige Fragen ---------- */
.fragen{margin-top:1.8rem; display:grid; gap:.7rem}
.frage{
  border:1px solid var(--linie); border-radius:var(--radius); background:#fff;
  padding:0 1.2rem;
}
.frage summary{
  cursor:pointer; font-weight:600; padding:1rem 0; list-style:none;
  display:flex; align-items:center; gap:.7rem;
}
.frage summary::-webkit-details-marker{display:none}
.frage summary::before{
  content:"+"; color:var(--akzent); font-weight:700; font-size:1.2rem;
  width:1rem; flex:none;
}
.frage[open] summary::before{content:"−"}
.frage p{color:var(--tinte-2); font-size:.95rem; margin:0 0 1rem 1.7rem}
.frage p:last-child{margin-bottom:1.1rem}

/* ---------- Wissensseiten ---------- */
.brotkrumen{
  font-size:.82rem; color:var(--tinte-3); padding:1.1rem 0 0;
}
.brotkrumen a{color:var(--tinte-3); text-decoration:none}
.brotkrumen a:hover{color:var(--akzent); text-decoration:underline}

.beitrag{max-width:720px; margin:0 auto; padding:1.2rem 0 3.5rem}
.beitrag h1{font-size:clamp(1.75rem,4vw,2.45rem); margin-bottom:.7rem}
.beitrag .vorspann{
  font-size:1.08rem; color:var(--tinte-2); border-left:3px solid var(--akzent);
  padding-left:1rem; margin:1.2rem 0 2rem;
}
.beitrag h2{font-size:1.35rem; margin:2.4rem 0 .7rem}
.beitrag h3{font-size:1.08rem; margin:1.7rem 0 .4rem}
.beitrag p,.beitrag li{color:#38454f}
.beitrag ul,.beitrag ol{padding-left:1.3rem}
.beitrag li{margin:.35rem 0}
.beitrag table{
  width:100%; border-collapse:collapse; margin:1.3rem 0; font-size:.92rem;
}
.beitrag th,.beitrag td{
  border:1px solid var(--linie); padding:.55rem .7rem; text-align:left;
  vertical-align:top;
}
.beitrag th{background:var(--grund-2); font-size:.85rem; letter-spacing:.02em}
.beitrag td.zahl{font-variant-numeric:tabular-nums; white-space:nowrap}
.tabellenhuelle{overflow-x:auto}

.quelle{
  font-size:.86rem; color:var(--tinte-3); border-top:1px solid var(--linie);
  padding-top:1rem; margin-top:2.5rem;
}
.merk{
  background:var(--akzent-hell); border-left:3px solid var(--akzent);
  padding:1rem 1.2rem; border-radius:6px; margin:1.6rem 0;
}
.merk p{margin:0; font-size:.95rem; color:#1d3f48}
.merk p + p{margin-top:.6rem}

/* Ein Hinweis in eigener Sache mitten im Text. Als solcher erkennbar -
   wer einen Fachtext liest, soll nicht raten muessen, wo die Werbung
   anfaengt. */
.eigen{
  border:1px solid var(--linie); border-radius:var(--radius); background:#fff;
  padding:1.3rem 1.4rem; margin:2.2rem 0; display:grid; gap:.7rem;
}
.eigen b{color:var(--akzent)}
.eigen p{margin:0; font-size:.95rem; color:var(--tinte-2)}
.eigen .knopf{justify-self:start; padding:.6rem 1.15rem; font-size:.94rem}

/* ---------- Weiterlesen ---------- */
.weiter{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:1rem; margin-top:1.6rem;
}
.weiter a{
  display:block; border:1px solid var(--linie); border-radius:var(--radius);
  padding:1.1rem 1.2rem; text-decoration:none; background:#fff;
}
.weiter a:hover{border-color:var(--akzent)}
.weiter b{display:block; color:var(--akzent); margin-bottom:.25rem}
.weiter span{font-size:.9rem; color:var(--tinte-2)}

/* ---------- Abschluss-Aufruf ---------- */
.abschluss{
  background:var(--akzent); color:#fff; padding:3.2rem 0; text-align:center;
}
.abschluss h2{color:#fff}
.abschluss p{color:#cfe3e9; max-width:56ch; margin-left:auto; margin-right:auto}
.abschluss .knopf-haupt{background:#fff; color:var(--akzent)}
.abschluss .knopf-haupt:hover{background:var(--akzent-hell)}
.abschluss .klein{color:#a8ccd6}

/* ---------- Nicht gefunden ---------- */
.leerseite{text-align:center; padding:5rem 1.4rem}
.leerseite .zahl{
  font-size:4.5rem; font-weight:800; color:var(--akzent-hell);
  letter-spacing:-.03em; line-height:1;
}

@media(max-width:640px){
  .zug{padding:2rem 0}
  .schirm.beschnitt img{max-height:340px}
}

/* ---------- Hilfsklassen ----------
 * Die Inhaltssicherheitsrichtlinie erlaubt keine Stilangaben im Element
 * (style-src deckt auch style-src-attr ab). Ein style="..." wird nicht etwa
 * gemeldet, sondern still verworfen - das Bild stand dann in voller
 * Originalgroesse auf der Seite. Deshalb hier Klassen statt Attribute.
 */
.o0{margin:0}
.ot-s{margin-top:.9rem}
.ot-m{margin-top:1.6rem}
.ot-l{margin-top:2rem}
.ot-xl{margin-top:2.5rem}
.pt-k{padding-top:1rem}
.eng{max-width:760px; margin-left:auto; margin-right:auto}
.mitte-flex{display:flex; justify-content:center}

/* Das Telefon in der Halle */
.telefon{
  max-width:270px; width:100%; height:auto;
  border:1px solid var(--linie); border-radius:22px;
  box-shadow:0 18px 46px #0e5a6e22;
}

/* Vergleichs- und Aufbautabellen. Sie stehen in .tabellenhuelle und laufen
   dort seitlich - auf dem Telefon ist die Preistabelle breiter als der
   Schirm, und das ist in Ordnung, solange die Seite darunter stehen bleibt. */
.raster-tab{width:100%; border-collapse:collapse; font-size:.93rem}
.raster-tab td,.raster-tab th{
  border:1px solid var(--linie); padding:.55rem .8rem; text-align:left;
  vertical-align:top;
}
.raster-tab th{background:var(--grund-2)}
.raster-tab td.name{white-space:nowrap}

/* Bildunterschrift ueber der Tabelle */
.tab-titel{text-align:left; padding-bottom:.5rem}

/* Die Verweiskarten auf der Fehlerseite stehen linksbuendig, auch wenn die
   Seite sonst mittig ist. */
.weiter.links{max-width:780px; margin:2.5rem auto 0; text-align:left}

/* ---------- Zentrale Anmeldung ---------- */
.tor{
  min-height:60vh; display:flex; flex-direction:column; align-items:center;
  justify-content:center; padding:3.5rem 1.4rem 4rem; gap:1.2rem;
}
.tor-box{
  width:100%; max-width:420px; background:#fff; border:1px solid var(--linie);
  border-radius:var(--radius); padding:2rem 1.9rem;
  box-shadow:0 10px 34px #0e5a6e14;
}
.tor-box h1{font-size:1.5rem; margin-bottom:.5rem}
.tor-box label{
  display:block; font-size:.88rem; font-weight:600; color:#33414f;
  margin-top:1.2rem;
}
.tor-box input{
  width:100%; margin-top:.3rem; padding:.7rem .8rem; border:1px solid #b9c4d0;
  border-radius:7px; font:inherit; font-weight:400;
}
.tor-box input:focus{outline:2px solid var(--akzent); border-color:var(--akzent)}
.tor-box .kennung-zeile input{margin-top:0}
.tor-box .knopf{margin-top:1.4rem}
.tor-box .hinweis-klein{
  margin:1rem 0 0; font-size:.86rem; text-align:center; color:var(--tinte-3);
}
.tor-fuss{font-size:.9rem; color:var(--tinte-2); text-align:center; margin:0}

/* ---------- Zahlungstakt ---------- */
.takt-schalter{
  display:flex; gap:.4rem; justify-content:center; margin:1.8rem auto 0;
  background:var(--grund-2); border:1px solid var(--linie);
  border-radius:10px; padding:.3rem; width:fit-content; max-width:100%;
  flex-wrap:wrap;
}
.takt{
  border:1px solid transparent; background:transparent; cursor:pointer;
  font:inherit; font-size:.94rem; font-weight:600; color:var(--tinte-2);
  padding:.55rem 1.1rem; border-radius:8px;
}
.takt.gewaehlt{background:#fff; color:var(--akzent); border-color:var(--linie);
  box-shadow:0 1px 3px #0e5a6e1a}

/* Beide Preise stehen im Quelltext; sichtbar ist der gewaehlte Takt. */
.takt-jahr .p-monat, .takt-monat .p-jahr{display:none}
.takt-monat .sparen{display:none}
.preis-unter{margin-top:.2rem}
.sparen{
  margin:.5rem 0 0; font-size:.85rem; font-weight:600; color:var(--gruen);
}

/* ---------- Geld-zurueck-Zusage ---------- */
.garantie{
  display:grid; gap:.4rem; margin:2.2rem auto 0; max-width:760px;
  background:var(--akzent-hell); border-left:3px solid var(--akzent);
  border-radius:6px; padding:1.2rem 1.4rem;
}
.garantie b{color:var(--akzent); font-size:1.02rem}
.garantie span{font-size:.93rem; color:#1d3f48}

.mitte-block{text-align:center}
.mitte-block .knopf{margin:.4rem .3rem 0}

/* Das Telefon als Bild: schmal, mittig, nicht ueber die ganze Spalte. */
.schirm.schirm-telefon{max-width:320px; margin:1.2rem auto}