/* ============================================================
   pflegedozi.org — gemeinsames Stylesheet
   Ein Blatt Papier in einem Aktenordner: oben die Register,
   darunter das Blatt. Keine externen Schriften, keine Skripte,
   keine Tracker. Alles liegt lokal auf dem Server.
   Lizenz: AGPLv3 (wie die Software)
   ============================================================ */

:root {
  /* Papier & Tinte */
  --papier:        #F3F2ED;
  --papier-tief:   #E4E3DA;
  --papier-rand:   #CFCEC2;
  --blatt:         #FBFBF8;
  --tinte:         #161B19;
  --tinte-weich:   #4C5450;

  /* Register: OP-Grün als Leitfarbe, Aktendeckel-Blau als zweite Stimme */
  --register:      #0E4A42;
  --register-hell: #1C6E60;
  --anker:         #2B4A6F;
  --ocker:         #8A6110;

  /* Maße */
  --spalte: 46rem;
  --breit:  74rem;

  /* Schriften — nur was lokal vorhanden ist */
  --serif: "Liberation Serif", Georgia, "Times New Roman", serif;
  --sans:  "Liberation Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono:  "DejaVu Sans Mono", ui-monospace, "Liberation Mono", Consolas, monospace;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
}

/* ---------- Sprungmarke ---------- */
.sprung {
  position: absolute; left: -9999px;
  background: var(--register); color: #fff;
  padding: .6rem 1rem; z-index: 50;
}
.sprung:focus { left: 1rem; top: 1rem; }

/* ---------- Kopf & Register ---------- */
.kopf {
  background: var(--papier-tief);
  border-bottom: 1px solid var(--papier-rand);
}
.kopf-zeile {
  max-width: var(--breit);
  margin: 0 auto;
  padding: 1.15rem 1.25rem .4rem;
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem;
  align-items: baseline; justify-content: space-between;
}
.marke { text-decoration: none; color: inherit; display: block; }
.marke-name {
  display: block;
  font-family: var(--mono);
  font-size: 1.15rem; font-weight: 700;
  letter-spacing: -.01em;
  color: var(--register);
}
.marke-zusatz {
  display: block;
  font-family: var(--sans);
  font-size: .82rem; color: var(--tinte-weich);
  letter-spacing: .02em;
}
.kopf-lizenz {
  margin: 0;
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tinte-weich);
}

.register {
  max-width: var(--breit);
  margin: 0 auto;
  padding: 0 1.25rem;
  overflow-x: auto;
  scrollbar-width: thin;
}
.register ul {
  display: flex; gap: .25rem;
  list-style: none; margin: 0; padding: .35rem 0 0;
  min-width: max-content;
}
.reiter {
  display: block;
  font-family: var(--sans);
  font-size: .9rem; font-weight: 600;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--tinte-weich);
  background: #DAD9CF;
  border: 1px solid var(--papier-rand);
  border-bottom: none;
  border-radius: .35rem .35rem 0 0;
  padding: .55rem .95rem .5rem;
  white-space: nowrap;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.05);
}
.reiter:hover { background: #E8E7DD; color: var(--tinte); }
.reiter[aria-current="page"] {
  background: var(--blatt);
  color: var(--register);
  box-shadow: inset 0 3px 0 var(--register);
  position: relative; top: 1px;
  border-bottom: 1px solid var(--blatt);
}
.reiter-still { opacity: .78; }

/* ---------- Blatt ---------- */
.blatt {
  max-width: var(--breit);
  margin: 0 auto;
  background: var(--blatt);
  border: 1px solid var(--papier-rand);
  border-top: none;
  padding: 0 1.25rem 3rem;
}

/* Heftrand: dünne Linie links, wie im Formular */
@media (min-width: 60rem) {
  .blatt { padding-left: 3.5rem; padding-right: 3.5rem; background-image: linear-gradient(to right, transparent 2.2rem, var(--papier-rand) 2.2rem, var(--papier-rand) calc(2.2rem + 1px), transparent calc(2.2rem + 1px)); }
}

/* ---------- Typografie ---------- */
h1, h2, h3, h4 {
  font-family: var(--sans);
  line-height: 1.18;
  letter-spacing: -.015em;
  color: var(--tinte);
  margin: 0 0 .6rem;
  text-wrap: balance;
}
h1 { font-size: clamp(1.9rem, 4.6vw, 2.9rem); font-weight: 700; }
h2 { font-size: clamp(1.4rem, 3vw, 1.95rem); font-weight: 700; margin-top: 0; }
h3 { font-size: 1.16rem; font-weight: 700; }
h4 { font-size: .96rem; font-weight: 700; }

p { margin: 0 0 1rem; max-width: var(--spalte); }
.weit p { max-width: none; }

a { color: var(--register); text-underline-offset: .18em; }
a:hover { color: var(--register-hell); }
:focus-visible { outline: 3px solid var(--anker); outline-offset: 2px; }

strong { font-weight: 700; }
hr { border: none; border-top: 1px solid var(--papier-rand); margin: 2.5rem 0; }

/* Augenbraue: sagt, in welchem Abschnitt man ist */
.augenbraue {
  font-family: var(--mono);
  font-size: .72rem; letter-spacing: .14em; text-transform: uppercase;
  color: var(--register); font-weight: 700;
  margin: 0 0 .5rem;
}
.augenbraue.blau { color: var(--anker); }
.augenbraue.ocker { color: var(--ocker); }

.vorspann {
  font-size: 1.18rem;
  color: var(--tinte-weich);
  max-width: 42rem;
}

/* ---------- Abschnitte ---------- */
.abschnitt { padding: 2.75rem 0; border-top: 1px solid var(--papier-rand); }
.abschnitt:first-of-type { border-top: none; }
.abschnitt > :last-child { margin-bottom: 0; }

/* ---------- Kopfbereich einer Seite ---------- */
.aufschlag { padding: 3rem 0 2.25rem; }
.aufschlag h1 { max-width: 24ch; }
.merkmale {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; margin: 1.4rem 0 0; padding: 0;
}
.merkmale li {
  font-family: var(--mono); font-size: .74rem;
  letter-spacing: .04em;
  border: 1px solid var(--papier-rand);
  background: var(--papier);
  border-radius: 999px;
  padding: .3rem .7rem;
  color: var(--tinte-weich);
}

/* ---------- Status-Marke ---------- */
.marke-status {
  display: inline-block;
  font-family: var(--mono); font-size: .72rem;
  letter-spacing: .1em; text-transform: uppercase; font-weight: 700;
  padding: .25rem .6rem; border-radius: .2rem;
  background: var(--register); color: #fff;
}
.marke-status.arbeit { background: var(--ocker); }
.marke-status.still  { background: var(--anker); }

/* ---------- Raster ---------- */
.raster {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  margin: 1.5rem 0 0; padding: 0; list-style: none;
}
.karte {
  background: var(--papier);
  border: 1px solid var(--papier-rand);
  border-left: 3px solid var(--register);
  border-radius: 0 .3rem .3rem 0;
  padding: 1rem 1.1rem;
}
.karte.blau  { border-left-color: var(--anker); }
.karte.ocker { border-left-color: var(--ocker); }
.karte h3 { margin-bottom: .35rem; }
.karte p:last-child { margin-bottom: 0; }
.karte p { font-size: .97rem; }

/* ---------- Modul-Eintrag (Detailliste) ---------- */
.modul {
  border-top: 1px solid var(--papier-rand);
  padding: 1.75rem 0;
}
.modul-kopf { display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem .9rem; }
.modul-nr {
  font-family: var(--mono); font-size: .8rem; font-weight: 700;
  color: var(--register); letter-spacing: .06em;
}
.modul-unter {
  font-family: var(--mono); font-size: .78rem;
  color: var(--tinte-weich); letter-spacing: .03em;
}
.spalten {
  display: grid; gap: 1rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  margin-top: 1rem;
}
.spalten h4 {
  font-family: var(--mono); font-size: .76rem;
  text-transform: uppercase; letter-spacing: .08em;
  color: var(--tinte-weich); font-weight: 700;
  margin-bottom: .4rem;
}
.spalten ul { margin: 0; padding-left: 1.1rem; }
.spalten li { margin-bottom: .3rem; font-size: .97rem; }

/* ---------- Hinweiskasten ---------- */
.hinweis {
  background: var(--papier);
  border: 1px solid var(--papier-rand);
  border-left: 3px solid var(--ocker);
  padding: 1rem 1.15rem;
  margin: 1.5rem 0;
  font-size: .99rem;
}
.hinweis > :last-child { margin-bottom: 0; }
.hinweis.gruen { border-left-color: var(--register); }
.hinweis.blau  { border-left-color: var(--anker); }

/* ---------- Zitat / Leitsatz ---------- */
.leitsatz {
  font-family: var(--sans);
  font-size: clamp(1.2rem, 2.6vw, 1.6rem);
  font-weight: 600; line-height: 1.35;
  border-left: 3px solid var(--register);
  padding-left: 1.1rem;
  margin: 2rem 0; max-width: 34rem;
}

/* ---------- Knöpfe ---------- */
.knopf-reihe { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0 0; }
.knopf {
  display: inline-block;
  font-family: var(--sans); font-size: .95rem; font-weight: 600;
  text-decoration: none;
  background: var(--register); color: #fff;
  padding: .7rem 1.2rem; border-radius: .3rem;
  border: 1px solid var(--register);
}
.knopf:hover { background: var(--register-hell); color: #fff; }
.knopf.still { background: transparent; color: var(--register); }
.knopf.still:hover { background: var(--papier); }

/* ---------- Download ---------- */
.paket {
  background: var(--papier);
  border: 1px solid var(--papier-rand);
  border-top: 3px solid var(--register);
  padding: 1.2rem 1.25rem;
}
.paket h3 { margin-bottom: .4rem; }
.paket p { font-size: .97rem; }
.paket-meta {
  font-family: var(--mono); font-size: .74rem;
  color: var(--tinte-weich); margin: .7rem 0 0;
}

/* ---------- Fragen ---------- */
.frage { border-top: 1px solid var(--papier-rand); padding: 1.1rem 0; }
.frage h3 { font-size: 1.02rem; margin-bottom: .3rem; }
.frage p { font-size: .99rem; margin-bottom: 0; }

/* ---------- Tabellarisch (Rechtstexte) ---------- */
.recht { max-width: var(--spalte); }
.recht h2 { margin-top: 2.2rem; font-size: 1.3rem; }
.recht h3 { margin-top: 1.5rem; font-size: 1.02rem; }
.recht address { font-style: normal; font-family: var(--mono); font-size: .95rem; line-height: 1.75; }

/* ---------- Fuß ---------- */
.fuss {
  max-width: var(--breit);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  font-family: var(--sans);
  font-size: .86rem;
  color: var(--tinte-weich);
}
.fuss-satz { font-family: var(--serif); font-size: 1rem; max-width: 40rem; }
.fuss-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; list-style: none; padding: 0; margin: 1rem 0; }
.fuss-fein { font-family: var(--mono); font-size: .72rem; line-height: 1.7; }

/* ---------- Druck ---------- */
@media print {
  .register, .sprung { display: none; }
  body { background: #fff; }
  .blatt { border: none; background: #fff; background-image: none; }
}

/* ---------- Bild mit Bildunterschrift ---------- */
.bild {
  margin: 2rem 0;
  max-width: 26rem;
  text-align: center;
}
.bild img,
.bild svg {
  display: block;
  width: 100%; height: auto;
  background: var(--papier);
  border: 1px solid var(--papier-rand);
  border-radius: .3rem;
  padding: 1rem;
}
.bild figcaption {
  font-family: var(--sans);
  font-size: .86rem;
  color: var(--tinte-weich);
  margin-top: .7rem;
  text-align: left;
}