/* Robot-Versicherung, gemeinsames Stilblatt. Erzeugt fuer alle Seiten von tools/bauen.py.
   Schriften kommen aus assets/schriften/ und werden nicht von Google geladen. */

@import url("schriften/schriften.css");

:root{
  --papier:#EEF1F1; --karte:#FBFCFC; --senke:#E4E9E9;
  --tinte:#0E1F24; --tinte2:#4A5E63; --tinte3:#7B8D91;
  --linie:#C9D4D5; --linie-fein:#DDE4E4;
  --tief:#0E3B44; --tief-tinte:#0E3B44; --akzent:#B57C05;
  --warn-grund:#FBF3E2; --warn-linie:#E3C97E;
  --serif:"Source Serif 4",Charter,Georgia,serif;
  --grotesk:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --bahn:46rem;
}
@media (prefers-color-scheme:dark){
  :root{
    --papier:#0A1316; --karte:#101E22; --senke:#16272B;
    --tinte:#E5ECEC; --tinte2:#9BADB0; --tinte3:#71868A;
    --linie:#24393E; --linie-fein:#1B2E33;
    --tief:#6FB6C0; --tief-tinte:#8CC9D2; --akzent:#E4AC2E;
    --warn-grund:#221B0C; --warn-linie:#5C4A18;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--tinte);
  font-family:var(--serif);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
.bahn{max-width:var(--bahn);margin:0 auto;padding:0 1.5rem}
.weit{max-width:64rem}

/* Sprungmarke fuer Tastaturbedienung */
.sprung{position:absolute;left:-9999px}
.sprung:focus{left:1rem;top:1rem;z-index:10;background:var(--karte);
  border:2px solid var(--tief);padding:.6rem 1rem;font-family:var(--grotesk)}

/* Kopf */
.kopf{border-bottom:1px solid var(--linie);background:var(--karte)}
.kopf .bahn{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.4rem;padding-top:1rem;padding-bottom:1rem}
.marke{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--akzent);text-decoration:none;font-weight:500;white-space:nowrap;
}
.marke:hover{color:var(--tief-tinte)}
.kopf nav{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;margin-left:auto}
.kopf nav a{
  font-family:var(--grotesk);font-size:.86rem;color:var(--tinte2);
  text-decoration:none;padding:.2rem 0;border-bottom:2px solid transparent;
}
.kopf nav a:hover{color:var(--tinte)}
.kopf nav a[aria-current]{color:var(--tinte);border-bottom-color:var(--tief)}

/* Brotkrumen */
.brotkrumen{font-family:var(--mono);font-size:.72rem;color:var(--tinte3);
  padding:1.2rem 0 0;letter-spacing:.02em}
.brotkrumen a{color:var(--tinte3)}
.brotkrumen span{padding:0 .4rem}

/* Textkoerper */
main{padding-bottom:4rem}
h1{
  font-family:var(--grotesk);font-weight:800;
  font-size:clamp(1.9rem,5.5vw,2.7rem);line-height:1.06;letter-spacing:-.026em;
  margin:1.6rem 0 .7rem;text-wrap:balance;
}
h1 em{font-style:normal;color:var(--tief-tinte)}
.dach{font-size:1.08rem;color:var(--tinte2);margin:0 0 1.4rem;max-width:44ch}
h2{font-family:var(--grotesk);font-weight:600;font-size:1.32rem;letter-spacing:-.012em;
  margin:2.4rem 0 .5rem;text-wrap:balance}
h3{font-family:var(--grotesk);font-weight:600;font-size:1.06rem;margin:1.7rem 0 .35rem}
p{margin:0 0 1.05rem;max-width:64ch}
a{color:var(--tief-tinte);text-underline-offset:.16em}
ul,ol{margin:0 0 1.05rem;padding-left:1.3rem;max-width:64ch}
li{margin-bottom:.35rem}
strong{font-weight:600}
hr{border:0;border-top:1px solid var(--linie-fein);margin:2.2rem 0}
code{font-family:var(--mono);font-size:.86em;background:var(--senke);padding:.1em .35em;border-radius:2px}
blockquote{
  margin:1.3rem 0;padding:.1rem 0 .1rem 1.1rem;border-left:3px solid var(--tief);
  color:var(--tinte2);font-size:.97rem;
}
blockquote p:last-child{margin-bottom:0}

/* Tabellen, scrollen bei Bedarf statt die Seite zu sprengen */
.tabelle{overflow-x:auto;margin:0 0 1.3rem}
table{border-collapse:collapse;width:100%;font-size:.9rem;font-family:var(--grotesk)}
th,td{text-align:left;padding:.55rem .7rem;border-bottom:1px solid var(--linie-fein);vertical-align:top}
th{font-weight:600;color:var(--tinte2);border-bottom:1px solid var(--linie);
  font-size:.78rem;letter-spacing:.03em;text-transform:uppercase;white-space:nowrap}
tbody tr:hover{background:var(--karte)}

/* Kaesten */
.kasten{background:var(--karte);border:1px solid var(--linie);
  border-left:3px solid var(--tief);padding:1rem 1.1rem;margin:1.4rem 0}
.kasten>:last-child{margin-bottom:0}
.kasten .titel{font-family:var(--grotesk);font-weight:600;font-size:.95rem;
  margin-bottom:.35rem;display:block}
.kasten.warnung{background:var(--warn-grund);border-color:var(--warn-linie);border-left-color:var(--akzent)}

/* Karten-Raster */
.karten{display:grid;gap:1.1rem;margin:1.5rem 0}
@media(min-width:44rem){.karten.drei{grid-template-columns:repeat(3,1fr)}
  .karten.zwei{grid-template-columns:repeat(2,1fr)}}
.karte{background:var(--karte);border:1px solid var(--linie);
  border-left:3px solid var(--tief);padding:1rem 1.1rem}
.karte .nr{font-family:var(--mono);font-size:.64rem;letter-spacing:.11em;
  text-transform:uppercase;color:var(--akzent);display:block;margin-bottom:.45rem}
.karte h3{margin:0 0 .3rem;font-size:1rem}
.karte p{font-size:.92rem;color:var(--tinte2);margin:0}
.karte a{text-decoration:none}
.karte a:hover h3{color:var(--tief-tinte)}

/* Belege */
.beleg{font-family:var(--mono);font-size:.68em;vertical-align:super;
  text-decoration:none;color:var(--akzent);padding:0 .1em}
.quellen{border-top:1px solid var(--linie);margin-top:2.8rem;padding-top:1.2rem}
.quellen h2{font-size:1rem;margin:0 0 .6rem}
.quellen ol{font-size:.84rem;color:var(--tinte2);line-height:1.5;max-width:none}
.quellen li{margin-bottom:.5rem}
.quellen .abruf{font-family:var(--mono);font-size:.85em;color:var(--tinte3)}

/* Merkmale */
.merkmal{font-family:var(--mono);font-size:.66rem;letter-spacing:.07em;text-transform:uppercase;
  border:1px solid var(--linie);padding:.14rem .45rem;color:var(--tinte2);
  white-space:nowrap;display:inline-block}
.merkmal.belegt{border-color:var(--tief);color:var(--tief-tinte)}
.merkmal.offen{border-color:var(--akzent);color:var(--akzent)}

/* Stand und Fuss */
.stand{font-family:var(--mono);font-size:.76rem;color:var(--tinte3);
  border-top:1px solid var(--linie-fein);padding-top:1rem;margin-top:2.5rem;line-height:1.65}
.fuss{border-top:1px solid var(--linie);background:var(--karte);
  font-size:.84rem;color:var(--tinte2);padding:1.8rem 0}
.fuss .bahn{display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;align-items:baseline}
.fuss nav{display:flex;flex-wrap:wrap;gap:.6rem 1.2rem}
.fuss a{color:var(--tinte2)}
.fuss .rand{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:var(--tinte3)}

/* Register: Suche und Filter */
.werkzeugleiste{display:flex;flex-wrap:wrap;gap:.6rem;margin:1.4rem 0 1rem;align-items:center}
.werkzeugleiste input,.werkzeugleiste select{
  font-family:var(--grotesk);font-size:.9rem;padding:.45rem .6rem;
  border:1px solid var(--linie);background:var(--karte);color:var(--tinte);border-radius:2px;
}
.werkzeugleiste input{flex:1 1 14rem;min-width:0}
.werkzeugleiste input:focus,.werkzeugleiste select:focus{outline:2px solid var(--tief);outline-offset:1px}
.treffer{font-family:var(--mono);font-size:.76rem;color:var(--tinte3);margin-left:auto}
.leer{color:var(--tinte3);font-style:italic;padding:1.5rem 0}

/* ---------- Buehne: die Startseite oeffnet mit der These, nicht mit Text ---------- */
:root{--buehne:#0E3B44;--buehne-text:#EEF1F1;--buehne-dim:rgba(238,241,241,.72);--buehne-linie:rgba(238,241,241,.22)}
@media (prefers-color-scheme:dark){
  :root{--buehne:#0C262C;--buehne-text:#DCE8EA;--buehne-dim:rgba(220,232,234,.72);--buehne-linie:rgba(220,232,234,.18)}
}
.buehne{background:var(--buehne);color:var(--buehne-text);padding:3.4rem 0 3rem}
.buehne .bahn{display:grid;gap:2.4rem;align-items:center}
@media(min-width:56rem){.buehne .bahn{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:3.5rem}}
.buehne .zeile{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--buehne-dim);display:flex;flex-wrap:wrap;gap:.3rem 1.3rem;margin-bottom:1.4rem;
}
.buehne h1{margin:0 0 .9rem;font-size:clamp(2.3rem,6vw,3.7rem);color:var(--buehne-text)}
.buehne h1 em{color:var(--akzent)}
.buehne .dach{color:var(--buehne-dim);font-size:1.12rem;max-width:40ch;margin-bottom:1.6rem}
.buehne .hinweis{
  font-family:var(--grotesk);font-size:.9rem;color:var(--buehne-text);
  border-left:2px solid var(--akzent);padding-left:.9rem;max-width:44ch;margin:0;
}
.buehne .hinweis a{color:var(--buehne-text);font-weight:600}
.luecke{width:100%;height:auto;display:block}
.luecke text{font-family:var(--mono);font-size:10.5px;fill:var(--buehne-dim);letter-spacing:.04em}
.luecke text.stark{fill:var(--buehne-text);font-weight:500}
.luecke text.ak{fill:var(--akzent);font-weight:500}
.luecke .linie{stroke:var(--buehne-text);fill:none;stroke-width:1.4}
.luecke .grenze{stroke:var(--buehne-dim);fill:none;stroke-width:1.2;stroke-dasharray:5 5}
.luecke .flaeche{fill:var(--buehne-text);fill-opacity:.09}
.luecke .haus{fill:var(--buehne-text);fill-opacity:.16}
.luecke .robot{fill:var(--akzent)}
.luecke .robot-rad{fill:var(--buehne)}
.luecke .ak-linie{stroke:var(--akzent);fill:none;stroke-width:1.4}

/* Kennzahlen als geregelte Zeile, keine Kacheln */
.kennzeile{display:grid;gap:0;border-bottom:1px solid var(--linie);margin:0 0 2.6rem;grid-template-columns:repeat(2,1fr)}
@media(min-width:44rem){.kennzeile{grid-template-columns:repeat(4,1fr)}}
.kennzeile div{padding:1.15rem 1rem 1.15rem 0;border-top:1px solid var(--linie)}
.kennzeile .zahl{
  font-family:var(--grotesk);font-weight:600;font-size:1.7rem;letter-spacing:-.02em;
  line-height:1.05;display:block;font-variant-numeric:tabular-nums;color:var(--tief-tinte);
}
.kennzeile .was{font-family:var(--mono);font-size:.66rem;letter-spacing:.11em;text-transform:uppercase;color:var(--tinte3);display:block;margin-top:.4rem}

/* Die drei Bereiche: Nummer, weil es die Struktur der Seite ist */
.saeulen{display:grid;gap:1.6rem 2.2rem;margin:1.6rem 0 2.4rem}
@media(min-width:48rem){.saeulen{grid-template-columns:repeat(3,1fr)}}
.saeule{border-top:2px solid var(--tief);padding-top:1rem}
.saeule .nr{font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--akzent);display:block;margin-bottom:.5rem}
.saeule h3{margin:0 0 .45rem;font-size:1.08rem;line-height:1.25}
.saeule h3 a{text-decoration:none;color:var(--tinte)}
.saeule h3 a:hover{color:var(--tief-tinte)}
.saeule p{font-size:.93rem;color:var(--tinte2);margin:0 0 .7rem}
.saeule .weiter{font-family:var(--grotesk);font-size:.86rem;font-weight:600;text-decoration:none}
.saeule .weiter:after{content:" \2192"}

/* Arbeitsweise als zwei Spalten */
.zweispaltig{display:grid;gap:1.4rem 3rem;margin:.6rem 0 1.6rem}
@media(min-width:52rem){.zweispaltig{grid-template-columns:1.2fr 1fr}}
.pruefkette{list-style:none;padding:0;margin:0;border-top:1px solid var(--linie)}
.pruefkette li{display:grid;grid-template-columns:2rem 1fr;gap:.6rem;padding:.6rem 0;border-bottom:1px solid var(--linie-fein);font-size:.9rem;margin:0}
.pruefkette .s{font-family:var(--mono);font-size:.7rem;color:var(--akzent);padding-top:.15rem}

/* Fuss mit drei Spalten */
.fuss .bahn.weit{display:grid;gap:1.6rem 2.5rem;align-items:start}
@media(min-width:52rem){.fuss .bahn.weit{grid-template-columns:1.4fr .8fr .9fr}}
.fuss-marke p{font-size:.86rem;color:var(--tinte2);margin:.6rem 0 0;max-width:40ch}
.fuss nav{flex-direction:column;gap:.35rem}
.fuss-daten{display:flex;flex-direction:column;gap:.35rem}
.fuss .klein{font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;color:var(--tinte3);margin-bottom:.2rem}
/* Auf dem Handy skaliert die Grafik auf ein Drittel; die Schrift muss mit. */
@media(max-width:44rem){.luecke text{font-size:15px}}
/* FAQ */
.faq{margin-top:2.6rem;border-top:1px solid var(--linie);padding-top:.4rem}
.faq h3{font-size:1rem;margin:1.4rem 0 .3rem}
.faq p{font-size:.97rem}