/* Gestaltung der Ratgeber- und Vergleichsseiten. Gleiche Handschrift wie die Startseite
   (Nunito, Koralle, Creme), aber schlanker: diese Seiten sollen schnell lesbar sein und
   eine Tabelle tragen. */
:root{
  --navy:#14213D; --nacht:#101B2F; --koralle:#FF5A36; --koralle-d:#E8431F; --koralle-h:#FF8A6B;
  --creme:#FFF4EE; --weiss:#FFFFFF; --text:#14213D; --grau:#5B6780; --linie:#E9DDD5;
  --gut:#1B8A5A; --neutral:#8A93A6;
  /* 760 statt 880: bei 880 standen ueber 100 Zeichen in einer Zeile, und ab etwa 90
     verliert das Auge beim Zeilensprung die Spur. */
  --r:18px; --max:760px;
}
@font-face{font-family:Nunito;src:url(fonts/nunito-regular.woff) format('woff');font-weight:400;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-bold.woff) format('woff');font-weight:700;font-display:swap}
@font-face{font-family:Nunito;src:url(fonts/nunito-black.woff) format('woff');font-weight:900;font-display:swap}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Nunito,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--text);
  background:var(--creme);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:var(--koralle)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}

header{background:var(--nacht);padding:.85rem 0}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:.8rem}
header img{height:30px;width:auto}
header a.btn{font-size:.88rem;padding:.48rem .9rem;white-space:nowrap}
/* Zwei Fassungen desselben Knopfes: am Handy die kurze, sonst drueckt der Knopf das Logo
   an den Rand und der ganze Kopf wirkt gequetscht. */
.nur-schmal{display:none}
@media(max-width:520px){
  .nur-breit{display:none}.nur-schmal{display:inline}header img{height:26px}
  /* Am Handy steht der grosse Korallenknopf gleich darunter im Seitenkopf. Zweimal
     dasselbe Signal untereinander wirkt wie ein Werbebanner - oben reicht ein Umriss. */
  header a.btn-k{background:transparent;border-color:rgba(255,255,255,.3);color:#fff}
}

/* ---- Seitenkopf ----------------------------------------------------------------
   Vorher begann die Seite direkt unter der schwarzen Leiste mit einer grossen
   Ueberschrift auf Creme - das sah aus wie ein Textdokument, nicht wie eine Seite, die
   etwas anbietet. Jetzt traegt ein dunkler Kopf Einordnung, Ueberschrift, Kernsatz und
   das Angebot; erst danach beginnt der helle Lesebereich. */
.seitenkopf{background:var(--nacht);color:#fff;padding:2.2rem 0 2.5rem;
  background-image:radial-gradient(900px 320px at 12% -10%, rgba(255,90,54,.22), transparent 60%);
  border-bottom:1px solid rgba(255,255,255,.07)}
.seitenkopf h1{color:#fff;margin-bottom:.7rem}
.seitenkopf .lead{color:#C4CEE0;margin:0}
.kicker{display:inline-block;background:rgba(255,90,54,.16);color:var(--koralle-h);
  border:1px solid rgba(255,90,54,.38);padding:.28rem .8rem;border-radius:999px;
  font-size:.8rem;font-weight:800;letter-spacing:.03em;margin-bottom:.95rem}
.kopfknoepfe{display:flex;flex-wrap:wrap;gap:.65rem;margin-top:1.35rem}
/* Am Handy beide gleich breit ueber die volle Zeile. Nebeneinander passen sie nicht, und
   zwei verschieden breite Knoepfe untereinander sehen nach Versehen aus. */
@media(max-width:520px){.kopfknoepfe{flex-direction:column;gap:.55rem}.kopfknoepfe .btn{width:100%}}
.haken{list-style:none;margin:1.15rem 0 0;padding:0;display:flex;flex-wrap:wrap;
  gap:.35rem 1.1rem;font-size:.88rem;color:#93A4BE}
.haken li{margin:0;display:flex;align-items:center;gap:.4rem}
.haken li::before{content:"\2713";color:#4FD1A5;font-weight:900;font-size:.95rem;line-height:1}

main{padding:2.2rem 0 3.5rem}
h1{font-weight:900;font-size:clamp(1.75rem,5.2vw,2.6rem);line-height:1.14;letter-spacing:-.02em;margin-bottom:.9rem}
h2{font-weight:900;font-size:clamp(1.28rem,3vw,1.7rem);line-height:1.22;letter-spacing:-.01em;margin:2.5rem 0 .7rem}
/* Kleiner Strich vor jeder Zwischenueberschrift: gliedert eine lange Seite, ohne zu laermen. */
main > h2::before{content:"";display:block;width:36px;height:3px;border-radius:2px;
  background:var(--koralle);margin-bottom:.7rem}
h3{font-weight:800;font-size:1.06rem;margin:1.6rem 0 .35rem}
p{margin:.7rem 0}
.lead{font-size:1.1rem;color:#3C4763;margin-bottom:1.5rem}
ul{margin:.7rem 0 .7rem 1.15rem}
li{margin:.35rem 0}
main li::marker{color:var(--koralle)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;padding:.85rem 1.35rem;
  border-radius:13px;font-weight:800;text-decoration:none;border:2px solid transparent;cursor:pointer}
.btn-k{background:var(--koralle);color:#fff}
.btn-k:hover{background:var(--koralle-d)}
.btn-geist{border-color:rgba(255,255,255,.32);color:#fff}
.btn-geist:hover{border-color:#fff;background:rgba(255,255,255,.08)}

/* ---- Die Gegenueberstellung -----------------------------------------------------
   Am Schreibtisch eine Tabelle. Am Handy lag sie bisher in einem Kasten, den man
   seitlich schieben musste: die zweite Spalte war angeschnitten, und nichts sagte einem,
   dass da noch etwas kommt. Darum wird ab hier jede Zeile zu einer Karte - erste Zelle
   als Ueberschrift, die uebrigen mit ihrer Spaltenbeschriftung davor.
   Dafuer braucht JEDE Zelle ein data-l mit dem Text ihrer Spalte; build-deploy.mjs
   bricht ab, wenn eines fehlt. */
.tabellerahmen{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:1.2rem 0;
  border:1px solid var(--linie);border-radius:var(--r);background:var(--weiss)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:.94rem}
th,td{padding:.75rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie)}
thead th{background:#FBF1EA;font-weight:800;position:sticky;top:0}
tbody tr:last-child td{border-bottom:none}
td.ja{color:var(--gut);font-weight:700}
td.nein{color:var(--neutral)}
th.wir,td.wir{background:#FFF7F4}

@media(max-width:640px){
  .tabellerahmen{overflow:visible;border:none;background:none;border-radius:0;margin:1rem 0}
  table{min-width:0;display:block;font-size:1rem}
  thead{display:none}
  tbody,tr,td{display:block}
  tr{background:var(--weiss);border:1px solid var(--linie);border-radius:14px;
    padding:.9rem 1.05rem;margin-bottom:.7rem}
  tbody tr:last-child{margin-bottom:0}
  td{border:none;padding:0}
  td + td{margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--linie)}
  td::before{content:attr(data-l);display:block;font-size:.72rem;font-weight:800;
    color:var(--grau);text-transform:uppercase;letter-spacing:.06em;margin-bottom:.15rem}
  /* Die erste Zelle ist der Titel der Karte - eine Beschriftung darueber waere doppelt. */
  td:first-child{font-weight:800;font-size:1.06rem;line-height:1.3}
  td:first-child::before{display:none}
  th.wir,td.wir{background:transparent}
  /* Hat die Tabelle nur zwei Spalten (Stichwort + Begruendung), stuende ueber jeder
     zweiten Zelle dieselbe Beschriftung - bei neun Zeilen neunmal. Dann lieber nur der
     Text, etwas zurueckgenommen: dass es die Erklaerung zum Titel ist, sieht man. */
  .paare td + td::before{display:none}
  .paare td + td{color:var(--grau);border-top:none;padding-top:.15rem;margin-top:.3rem}
}

.kasten{background:var(--weiss);border:1px solid var(--linie);border-left:3px solid var(--koralle);
  border-radius:12px;padding:1.05rem 1.2rem;margin:1.4rem 0;box-shadow:0 1px 2px rgba(20,33,61,.04)}
/* Nur die Ueberschrift des Kastens ist ein eigener Block - Hervorhebungen im Fliesstext
   sollen inline bleiben (sonst rutscht ein einzelnes fettes Wort auf eine eigene Zeile). */
.kasten > b{display:block;margin-bottom:.2rem}

/* Hinweis auf Stand und Herkunft der Angaben - gehoert bei einem Vergleich sichtbar dazu. */
.quellen{margin-top:2.6rem;padding-top:1.2rem;border-top:1px solid var(--linie);color:var(--grau);font-size:.86rem}
.quellen a{color:var(--grau)}
.quellen li{margin:.3rem 0}

.abschluss{background:var(--nacht);color:#fff;border-radius:var(--r);padding:1.9rem 1.5rem;margin:2.8rem 0 0;
  text-align:center;background-image:radial-gradient(600px 240px at 50% 0%, rgba(255,90,54,.2), transparent 65%)}
.abschluss h2{color:#fff;margin:0 0 .5rem}
.abschluss p{color:#C9D2E3;margin-bottom:1.2rem}

footer{background:var(--nacht);color:#93A1B8;padding:1.6rem 0;font-size:.9rem}
footer a{color:#C9D2E3;text-decoration:none}
footer .wrap{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between}
/* Umbrechen statt ueber den Rand laufen - bei 320 px Breite ragte die Fusszeile sonst
   neun Pixel hinaus und die ganze Seite liess sich seitlich schieben. */
footer nav{display:flex;flex-wrap:wrap;gap:.3rem 1rem;justify-content:center}
@media(max-width:600px){footer .wrap{flex-direction:column;text-align:center}}