/* ThingsALot — Website
   Stand 2026-09-06 · Farben, Schriften und Marke aus dem App-Design übernommen

   Eine Regel bestimmt diese Datei: **Es wird nichts nachgeladen.**
   Keine Schriften von fremden Servern, keine Symbolsammlungen, kein
   JavaScript von irgendwoher. Nur so bleibt der Satz in der
   Datenschutzerklärung wahr, dass beim Aufruf dieser Seite niemand
   außer unserem Hoster etwas erfährt. Die Schriften unten liegen deshalb
   als Dateien auf thingsalot.com selbst — dieselben, die in der App
   stecken (Public Sans und Bricolage Grotesque, beide Open Font License,
   Lizenztexte in schriften/). Ein fremder Server kommt nicht ins Spiel.

   Die Farbwerte sind die der App, nicht Annäherungen: gemessen und mit
   Kontrastwerten belegt in 03_design/06_gestaltung_uebergabe.md. Wer hier
   eine Farbe ändert, ändert sie dort zuerst. */

@font-face {
  font-family: "Public Sans";
  src: url("/schriften/PublicSans-Variable.woff") format("woff");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/schriften/BricolageGrotesque-SemiBold.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Bricolage Grotesque";
  src: url("/schriften/BricolageGrotesque-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  color-scheme: light dark;
  /* Hell — Rollen wie in der App: GROUND, INK, INK2, MUTED, BD, SURF, SURF2,
     ACC, ONACC, ACCSOFT, ACCBD, ACCTEXT */
  --grund:       #FBFAF7;
  --tinte:       #1C1B18;
  --tinte2:      #55524C;
  --gedaempft:   #6B6862;
  --linie:       #E3E0D8;
  --feld:        #FFFFFF;
  --flaeche2:    #EFEDE6;
  --akzent:      #1F6F5C;
  --auf-akzent:  #FFFFFF;
  --akzent-weich:#E8F2EE;
  --akzent-rand: #CFDDD7;
  --akzent-text: #175445;
}

@media (prefers-color-scheme: dark) {
  :root {
    --grund:       #121614;
    --tinte:       #E6EAE7;
    --tinte2:      #B4BEB9;
    --gedaempft:   #9AA5A0;
    --linie:       #2C3531;
    --feld:        #1A201D;
    --flaeche2:    #232B27;
    --akzent:      #3FB894;
    --auf-akzent:  #0E1512;   /* 7,49:1 auf dem Akzent — gemessen */
    --akzent-weich:#14332B;
    --akzent-rand: #2C4A40;
    --akzent-text: #7FD9BC;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--grund);
  color: var(--tinte);
  font: 400 17px/1.65 "Public Sans", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-text-size-adjust: 100%;
}

.huelle { max-width: 42rem; margin: 0 auto; padding: 2rem 1.25rem 4rem; }

/* Sprungmarke für Tastatur und Vorlesehilfen — sichtbar, sobald sie den
   Fokus bekommt, sonst außerhalb des Bildes. */
.sprung {
  position: absolute; left: -9999px;
  background: var(--akzent); color: var(--auf-akzent);
  padding: .6rem 1rem; border-radius: .4rem;
}
.sprung:focus { left: 1rem; top: 1rem; }

/* ---- Kopf mit der Wort-Bild-Marke ------------------------------------ */

header.kopf {
  display: flex; align-items: center; gap: .9rem;
  flex-wrap: wrap;
  padding-bottom: 1.5rem; margin-bottom: 2rem;
  border-bottom: 1px solid var(--linie);
}
/* Die Marke ist ein Bild aus Pfaden (keine Schrift), hell und dunkel als
   zwei Dateien — das <picture> im HTML wählt nach dem Farbschema. */
.wortmarke { display: inline-block; line-height: 0; text-decoration: none; }
.wortmarke img { height: 30px; width: auto; display: block; }
/* Zwei verschiedene Dinge, zwei Namen — bis zum 12.09.2026 hatten beide
   denselben. `seitenname` ist die Seitenbezeichnung neben dem Logo
   („Impressum", „Datenschutz"); `claim` ist der markenfeste Satz
   („Bibliothek deiner Dinge"). Sie sehen gleich aus und heißen verschieden,
   damit man das eine ändern kann, ohne das andere zu treffen. */
.seitenname { color: var(--tinte2); font-size: .95rem; }
.claim   { color: var(--tinte2); font-size: .95rem; letter-spacing: .02em; }

/* ---- Text --------------------------------------------------------------- */

h1, h2, h3 {
  font-family: "Bricolage Grotesque", "Public Sans", -apple-system,
               BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  letter-spacing: -.02em;
  color: var(--tinte);
}
h1 { font-size: 2.1rem; font-weight: 700; line-height: 1.15; margin: 0 0 1rem; }
h2 { font-size: 1.3rem; font-weight: 600; margin: 2.5rem 0 .6rem; }
h3 { font-size: 1.05rem; font-weight: 600; margin: 1.6rem 0 .4rem; }
p, li { max-width: 38rem; }
p  { margin: 0 0 1rem; }
ul { padding-left: 1.2rem; }
li { margin-bottom: .4rem; }

.vorspann { font-size: 1.12rem; color: var(--tinte2); }

a { color: var(--akzent); text-underline-offset: .18em; }
a:focus-visible, .sprung:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px; border-radius: .2rem;
}

dl.angaben { margin: 0 0 1.5rem; }
dl.angaben dt { color: var(--tinte2); font-size: .9rem; margin-top: 1rem; }
dl.angaben dd { margin: .1rem 0 0; }

table { border-collapse: collapse; width: 100%; margin: 1rem 0 1.5rem; }
th, td { text-align: left; padding: .55rem .6rem; border-bottom: 1px solid var(--linie); vertical-align: top; }
th { color: var(--tinte2); font-weight: 600; font-size: .9rem; }
.umbruch { overflow-x: auto; }

footer.fuss {
  margin-top: 4rem; padding-top: 1.5rem;
  border-top: 1px solid var(--linie);
  color: var(--tinte2); font-size: .92rem;
}
footer.fuss a { margin-right: 1.2rem; }

.stand { color: var(--tinte2); font-size: .9rem; }
.klein { font-size: .92rem; color: var(--tinte2); }

/* ---- Hinweiskasten (wie der ZusageKasten in der App) ------------------- */

.zusage {
  display: flex; gap: .75rem; align-items: flex-start;
  background: var(--akzent-weich); border: 1px solid var(--akzent-rand);
  color: var(--akzent-text);
  border-radius: .6rem; padding: .9rem 1rem; margin: 1.25rem 0 1.5rem;
  max-width: 38rem;
}
.zusage svg { flex: 0 0 auto; width: 20px; height: 20px; margin-top: .2rem; }
.zusage p { margin: 0; color: inherit; }

/* ---- Der Weg: die Ausbaustufen ------------------------------------------ */

ol.weg { list-style: none; padding: 0; margin: 1.25rem 0 0; max-width: 38rem; }
ol.weg > li {
  position: relative;
  padding: 0 0 1.5rem 1.6rem;
  border-left: 2px solid var(--linie);
  margin: 0 0 0 .5rem;
}
ol.weg > li:last-child { padding-bottom: .25rem; }
ol.weg > li::before {
  content: "";
  position: absolute; left: -.5rem; top: .4rem;
  width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--grund); border: 2px solid var(--gedaempft);
}
ol.weg > li.jetzt { border-left-color: var(--akzent); }
ol.weg > li.jetzt::before { background: var(--akzent); border-color: var(--akzent); }
ol.weg .stufe {
  display: block; font-size: .78rem; letter-spacing: .07em; text-transform: uppercase;
  color: var(--gedaempft); margin-bottom: .15rem;
}
ol.weg li.jetzt .stufe { color: var(--akzent-text); }
ol.weg h3 { margin: 0 0 .3rem; }
ol.weg p { margin: 0; color: var(--tinte2); }

/* ---- Warteliste ------------------------------------------------------- */

form.warteliste { margin: 1.5rem 0 .75rem; max-width: 30rem; }
form.warteliste label {
  display: block; margin-bottom: .35rem;
  color: var(--tinte2); font-size: .92rem;
}
form.warteliste input[type=email],
form.warteliste input[type=text] {
  width: 100%; padding: .7rem .8rem;
  font: inherit; color: var(--tinte); background: var(--feld);
  border: 1px solid var(--linie); border-radius: .45rem;
}
form.warteliste input[type=email]:focus-visible,
form.warteliste input[type=text]:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 1px;
}
/* Die Postleitzahl braucht keine 30rem — fünf Ziffern sind fünf Ziffern.
   Ein Feld, das breiter ist als sein Inhalt, sieht aus, als fehlte etwas. */
form.warteliste input#plz { max-width: 9rem; }
/* „freiwillig“ steht am Etikett, nicht darunter: Wer das Formular
   überfliegt, soll es sehen, bevor er das Feld überspringt oder ausfüllt. */
form.warteliste .freiwillig { font-weight: 400; color: var(--gedaempft); }
/* Der Grund steht beim Feld, nicht im Kleingedruckten. Ein freiwilliges
   Feld ohne Grund wird nicht ausgefüllt — und soll es auch nicht. */
form.warteliste .feldgrund {
  margin: .35rem 0 1.1rem; font-size: .92rem; color: var(--tinte2);
  max-width: 30rem;
}
form.warteliste label + input { margin-bottom: 0; }
form.warteliste label:not(:first-of-type) { margin-top: 1.1rem; }
form.warteliste button {
  margin-top: .7rem; padding: .7rem 1.2rem;
  font: inherit; font-weight: 600;
  color: var(--auf-akzent); background: var(--akzent);
  border: 0; border-radius: .45rem; cursor: pointer;
  min-height: 44px;
}
form.warteliste button:hover { filter: brightness(1.08); }
form.warteliste button:focus-visible {
  outline: 2px solid var(--tinte); outline-offset: 2px;
}

/* Die Falle: aus dem Bild geschoben, nicht versteckt — wer mit einer
   Vorlesehilfe unterwegs ist, soll trotzdem nicht darauf stoßen, deshalb
   zusätzlich aria-hidden im Formular. */
.falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---- Rechtstexte (recht/) ------------------------------------------------
   Diese Seiten sind nicht von Hand gebaut, sondern erzeugt
   (05_recht/erzeuge_rechtstexte.py). Deshalb stehen die Regeln am Element,
   nicht an Klassen: Was der Markdown-Wandler ausgibt, muss ohne Zutun
   sitzen — sonst wäre die nächste Erzeugung wieder Handarbeit. */

main.rechtstext h2 { margin-top: 2.8rem; }
main.rechtstext h3 { margin-top: 1.8rem; }

/* Der Entwurfshinweis und die Kästen im Text. Kein Ausrufezeichen, kein
   Warnrot — es sind Hinweise, keine Fehler. */
main.rechtstext blockquote {
  margin: 1.25rem 0 1.5rem;
  padding: .8rem 1rem;
  max-width: 38rem;
  background: var(--flaeche2);
  border-left: 3px solid var(--akzent-rand);
  border-radius: 0 .4rem .4rem 0;
  color: var(--tinte2);
}
main.rechtstext blockquote > :first-child { margin-top: 0; }
main.rechtstext blockquote > :last-child  { margin-bottom: 0; }

/* Verweise auf Gesetze, Fassungen, Kennungen — kein Quelltext, deshalb
   dieselbe Schrift, nur abgesetzt. */
main.rechtstext code {
  background: var(--flaeche2);
  border-radius: .25rem;
  padding: .08em .35em;
  font-size: .94em;
  overflow-wrap: anywhere;
}

main.rechtstext hr {
  border: 0; border-top: 1px solid var(--linie);
  margin: 2.5rem 0;
}

main.rechtstext table { font-size: .95rem; }
main.rechtstext td, main.rechtstext th { vertical-align: top; }

/* ---- Bestandsseite: die Dinge als Karten (bestand.php) ------------------ */

ul.dinge { list-style: none; padding: 0; margin: .75rem 0 0; display: grid; gap: .75rem; }
li.ding {
  background: var(--feld); border: 1px solid var(--linie);
  border-radius: .6rem; padding: .9rem 1rem; max-width: none;
}
li.ding h2 { font-size: 1.1rem; margin: 0 0 .3rem; }
li.ding p { margin: 0 0 .3rem; }
li.ding p:last-child { margin-bottom: 0; }
.leer { color: var(--tinte2); }