/* Gemeinsame Gestaltung fuer Impressum und Datenschutz.
   Dieselben Merkmale wie die Startseite, aber nur die, die zwei reine
   Textseiten brauchen. Bewusst keine Kopie der 250 Zeilen aus index.html:
   was dort an Kacheln, Rastern und Formular haengt, kommt hier nicht vor,
   und jede Zeile, die zweimal liegt, driftet irgendwann auseinander. */

:root{
  --papier:#FFFFFF; --papier-2:#FFFFFF; --papier-alt:#F6F7F9;
  --tinte:#101418; --tinte-2:#2C333A; --tinte-leise:#5C646D;
  --rot:#A01C28; --rot-hell:#C23642;
  --blei:#6B737C; --blei-hell:#9BA3AC;
  --linie:#E6E8EC; --linie-stark:#CBD0D6;
  --serif:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --sans:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;
  --wrap:1080px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --papier:#0E1113; --papier-2:#15181B; --papier-alt:#15181B;
    --tinte:#F0F2F4; --tinte-2:#CBD1D7; --tinte-leise:#99A1A9;
    --rot:#EF8F99; --rot-hell:#F6B2BA;
    --blei:#99A1A9; --blei-hell:#747B83;
    --linie:#23272B; --linie-stark:#343A3F;
  }
}
:root[data-theme="dark"]{
  --papier:#0E1113; --papier-2:#15181B; --papier-alt:#15181B;
  --tinte:#F0F2F4; --tinte-2:#CBD1D7; --tinte-leise:#99A1A9;
  --rot:#EF8F99; --rot-hell:#F6B2BA;
  --blei:#99A1A9; --blei-hell:#747B83;
  --linie:#23272B; --linie-stark:#343A3F;
}

*{box-sizing:border-box}
body{margin:0; background:var(--papier); color:var(--tinte);
     font-family:var(--serif); font-size:17px; line-height:1.62; font-weight:400;
     -webkit-font-smoothing:antialiased; font-variant-numeric:tabular-nums}
.wrap{width:min(var(--wrap),calc(100% - 44px)); margin:0 auto}
p{margin:0}
h1,h2,h3{margin:0; font-family:var(--serif); text-wrap:balance; color:var(--tinte)}
h1{font-size:clamp(2.15rem,4.6vw,3.3rem); font-weight:300; line-height:1.08; letter-spacing:-.028em}
h2{font-size:clamp(1.3rem,2.2vw,1.62rem); font-weight:300; line-height:1.2; letter-spacing:-.018em}
h3{font-size:1.02rem; font-weight:600; line-height:1.34; letter-spacing:-.012em}

a{color:var(--tinte); text-decoration:none; border-bottom:1px solid var(--linie-stark)}
a:hover{border-bottom-color:var(--rot)}
a:focus-visible{outline:2px solid var(--rot); outline-offset:3px}

/* Roter Akzentstreifen ueber jeder Abschnittsmarke, wie auf der Startseite. */
.label{position:relative; padding-top:1.1rem;
       font-family:var(--sans); font-size:.7rem; letter-spacing:.15em;
       text-transform:uppercase; color:var(--tinte-leise)}
.label::before{content:''; position:absolute; top:0; left:0;
               width:34px; height:2px; background:var(--rot)}

.kopf{padding-block:clamp(3rem,6vw,4.6rem); border-bottom:1px solid var(--linie)}
.lead{font-size:1.09rem; color:var(--tinte-leise); max-width:62ch; margin-top:1.2rem}
.stand{font-family:var(--mono); font-size:.74rem; color:var(--blei); margin-top:1.6rem}

main{padding-block:clamp(2.6rem,5vw,4rem)}

/* Randnummern. Das ist kein Schmuck: eine Datenschutzerklaerung wird
   abschnittsweise zitiert und nachgefragt, und mit Randnummer laesst sich
   eine Stelle benennen, ohne sie abzuschreiben. */
.abs{display:grid; grid-template-columns:3.4rem minmax(0,1fr); gap:0 1.1rem;
     margin-top:2.3rem; align-items:start}
.rn{font-family:var(--mono); font-size:.72rem; color:var(--rot);
    font-weight:500; white-space:nowrap; padding-top:.42rem}
.abs > div > * + *{margin-top:.8rem}
.abs p, .abs li{max-width:68ch; color:var(--tinte-2)}

ul{margin:0; padding-left:1.15rem}
li{margin-top:.42rem}
li::marker{color:var(--blei-hell)}

dl{margin:0; display:grid; grid-template-columns:auto minmax(0,1fr);
   gap:.3rem 1.4rem; max-width:68ch}
dt{color:var(--tinte-leise); font-family:var(--sans); font-size:.88rem}
dd{margin:0; color:var(--tinte-2)}
@media (max-width:620px){
  dl{grid-template-columns:1fr; gap:0}
  dd{margin-bottom:.7rem}
}

table{border-collapse:collapse; width:100%; font-size:.95rem; margin-top:.3rem}
th,td{text-align:left; vertical-align:top; padding:.6rem .9rem .6rem 0;
      border-bottom:1px solid var(--linie); color:var(--tinte-2)}
th{font-family:var(--sans); font-size:.78rem; letter-spacing:.06em;
   text-transform:uppercase; color:var(--tinte-leise); font-weight:500}
.tabelle{overflow-x:auto}

.notiz{background:var(--papier-2); border:1px solid var(--linie);
       border-left:3px solid var(--rot); padding:1rem 1.35rem;
       font-family:var(--sans); font-size:.88rem; color:var(--tinte-leise)}
.notiz b{color:var(--tinte)}

.adresse{font-style:normal; color:var(--tinte-2)}
.nolink{border-bottom:none; color:var(--tinte-2)}

footer{border-top:1px solid var(--linie); background:var(--papier-2); padding:2rem 0;
       font-family:var(--sans); font-size:.85rem; color:var(--blei); margin-top:3rem}
.foot-in{display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap}
footer a{color:var(--blei); border-bottom-color:var(--linie)}

@media (max-width:700px){
  .abs{grid-template-columns:1fr; gap:.3rem}
  .rn{padding-top:0}
}
@media (prefers-reduced-motion:reduce){*{transition:none !important}}

/* Anbieterblock im Impressum.
   Die Angaben stehen genau so untereinander, wie Julius sie vorgegeben hat -
   eine Zeile je Zeile, kein Fliesstext, keine Beschriftungen davor. Was dort
   nicht steht, steht auch hier nicht. */
.anbieter{font-style:normal; display:flex; flex-direction:column;
          color:var(--tinte-2); font-size:1.05rem; line-height:1.75}
.anbieter b{color:var(--tinte); font-weight:600}
.anbieter .abstand{margin-top:1.5rem}
.ki{color:var(--rot)}


/* Anbieterangaben als Bild - nahtlos, ohne Rahmen und ohne Flaeche.
   Zwei Fassungen, weil ein Bild mit festen Schriftfarben nur in einer
   Darstellung stimmt. Die Umschaltung folgt demselben Dreischritt wie die
   Farbtoken: blanke Wurzel = hell, Systemeinstellung, ausdrueckliche Wahl.
   Angezeigt mit halber Pixelbreite, damit es auf hochaufloesenden Anzeigen
   scharf bleibt. */
.anbieter-bild{display:block; max-width:min(368px,100%); height:auto;
               margin-bottom:2.4rem}
.anbieter-dunkel{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .anbieter-hell{display:none}
  :root:not([data-theme="light"]) .anbieter-dunkel{display:block}
}
:root[data-theme="dark"] .anbieter-hell{display:none}
:root[data-theme="dark"] .anbieter-dunkel{display:block}

/* Die Adresse in der Fusszeile ebenfalls als Bild, aus demselben Grund wie
   im Impressum: als Text waere sie die Stelle, an der die ganze Uebung
   auffliegt. Hoehe an die Zeile der Fusszeile gebunden, Breite ergibt sich -
   so bleibt sie scharf und waechst nicht aus der Zeile. */
.mail-bild img{height:1.15em; width:auto; vertical-align:-.2em}
.nur-dunkel{display:none}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .nur-hell{display:none}
  :root:not([data-theme="light"]) .nur-dunkel{display:inline}
}
:root[data-theme="dark"] .nur-hell{display:none}
:root[data-theme="dark"] .nur-dunkel{display:inline}