/* Kompass — Farbe, Schrift, Bewegung.

   SECHS HAUSFARBEN, EINE REGEL
   Jede Seite gehört einer Farbe: Heute Bernstein, Schleuse Teal,
   Gedanken-Check Indigo, Journal Mauve, Muster Himmel, Leitsätze Ankergrün.
   Jede Seite setzt beim Betreten genau ein Merkmal — --modul — und alle
   Akzente darauf (Kartenkante, Knopf, Reglerfüllung, Fokusring, Kurve) lesen
   dieses eine Merkmal.

   🧨 Farbe markiert TÄTIGKEIT, nie ERGEBNIS. Kein Regler wird rot, weil ein
   Wert „schlecht" ist. Rot gehört ausschliesslich der Krise.

   Alle Farbpaare sind gegen die WCAG-Grenzwerte gerechnet, hell und dunkel.
   Farbpsychologie taugt ausdrücklich NICHT als Begründung (Jonauskaite & Mohr
   2025) — das hier ist eine Gestaltungsentscheidung, keine Behandlung.
*/

/* ------------------------------------------------- Farben: helle Fassung */

:root {
  --grund: #F5F3EF;          /* warmes Papier statt kaltem Blaugrau */
  --karte: #FFFFFF;
  --karte-hoch: #FAF7F2;
  --linie: #E6E3DE;          /* NUR dekorative Haarlinien */
  --kontur: #75808F;         /* funktionale Ränder: Eingabefeld, Reglerbahn */
  --text: #1A222C;
  --text-leise: #56616F;

  --bernstein: #8A5300;
  --teal: #00706A;
  --indigo: #3B4FC4;
  --mauve: #8A3E9C;
  --himmel: #04628C;
  --anker-gruen: #166E48;
  --krise-rot: #B3261E;

  --knopf-schrift: #FFFFFF;

  --flaeche-dringend: #FBF0DB;
  --flaeche-schleuse: #DFF2F0;
  --flaeche-krise: #FBE7E4;
  --flaeche-anker: #E1F2E8;
  --flaeche-hinweis: #E7EBFB;

  --modul: var(--bernstein);
  --modul-flaeche: var(--flaeche-dringend);

  --rundung: 14px;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --schrift-titel: ui-rounded, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --schrift-dokument: ui-serif, Georgia, "Times New Roman", serif;
}

/* ------------------------------------------------ Farben: dunkle Fassung */
/* Bewusst zweimal aufgeführt: einmal für die Geräteeinstellung, einmal für
   die ausdrückliche Wahl in der App. Die Werte müssen gleich bleiben. */

@media (prefers-color-scheme: dark) {
  :root:not([data-thema='hell']) {
    --grund: #0E141B;
    --karte: #172029;
    --karte-hoch: #1F2A35;
    --linie: #263140;
    --kontur: #68788A;
    --text: #E9EDF3;
    --text-leise: #A6B2C2;

    --bernstein: #F0B357;
    --teal: #3FC8BE;
    --indigo: #9DAEFF;
    --mauve: #DA9EEA;
    --himmel: #5FC2F0;
    --anker-gruen: #7FD6A0;
    --krise-rot: #F2807C;

    --knopf-schrift: #0B1117;

    --flaeche-dringend: #2A2116;
    --flaeche-schleuse: #14262A;
    --flaeche-krise: #2B1A19;
    --flaeche-anker: #16261D;
    --flaeche-hinweis: #1A2333;
  }
}

:root[data-thema='dunkel'] {
  --grund: #0E141B;
  --karte: #172029;
  --karte-hoch: #1F2A35;
  --linie: #263140;
  --kontur: #68788A;
  --text: #E9EDF3;
  --text-leise: #A6B2C2;

  --bernstein: #F0B357;
  --teal: #3FC8BE;
  --indigo: #9DAEFF;
  --mauve: #DA9EEA;
  --himmel: #5FC2F0;
  --anker-gruen: #7FD6A0;
  --krise-rot: #F2807C;

  --knopf-schrift: #0B1117;

  --flaeche-dringend: #2A2116;
  --flaeche-schleuse: #14262A;
  --flaeche-krise: #2B1A19;
  --flaeche-anker: #16261D;
  --flaeche-hinweis: #1A2333;
}

/* --------------------------------------------------------- Hausfarben */

body.modul-heute    { --modul: var(--bernstein);   --modul-flaeche: var(--flaeche-dringend); }
body.modul-schleuse { --modul: var(--teal);        --modul-flaeche: var(--flaeche-schleuse); }
body.modul-check    { --modul: var(--indigo);      --modul-flaeche: var(--flaeche-hinweis); }
body.modul-journal  { --modul: var(--mauve);       --modul-flaeche: var(--flaeche-hinweis); }
body.modul-muster   { --modul: var(--himmel);      --modul-flaeche: var(--flaeche-hinweis); }
body.modul-anker    { --modul: var(--anker-gruen); --modul-flaeche: var(--flaeche-anker); }
body.modul-krise    { --modul: var(--krise-rot);   --modul-flaeche: var(--flaeche-krise); }

/* „ernst" — Krisenkarte, Vorstellungs-Seite, Therapie-Brücke.
   Kein Farbverlauf, keine Bewegung, Dokumenten-Optik. */
body.ernst .karte { animation: none; }
body.ernst { --modul-flaeche: transparent; }

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 88px;
  background: var(--grund);
  color: var(--text);
  font: 17px/1.55 var(--schrift);
  -webkit-text-size-adjust: 100%;
}

/* ---------------------------------------------------------------- Gerüst */

.kopf {
  display: flex; align-items: center; justify-content: space-between;
  padding: max(12px, env(safe-area-inset-top)) 16px 12px;
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--grund) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linie);
}
.marke {
  font-family: var(--schrift-titel);
  font-weight: 600; letter-spacing: .01em; color: var(--text); text-decoration: none;
}
.kopf-rechts { display: flex; align-items: center; gap: 10px; }

.knopf-krise {
  background: var(--flaeche-krise); color: var(--krise-rot);
  border: 1px solid var(--krise-rot); border-radius: 999px;
  padding: 7px 16px; font-size: 15px; font-weight: 600; text-decoration: none;
}

.menue summary {
  list-style: none; cursor: pointer; font-size: 24px; line-height: 1;
  padding: 4px 10px; border-radius: 10px; background: var(--karte);
  border: 1px solid var(--linie); color: var(--text);
}
.menue summary::-webkit-details-marker { display: none; }
.menue nav {
  position: absolute; right: 12px; margin-top: 8px;
  background: var(--karte-hoch); border: 1px solid var(--kontur);
  border-radius: var(--rundung); padding: 6px; min-width: 208px;
  display: flex; flex-direction: column; z-index: 30;
  box-shadow: 0 10px 30px rgb(0 0 0 / .18);
}
.menue nav a { padding: 12px 14px; color: var(--text); text-decoration: none; border-radius: 10px; }
.menue nav a:hover { background: var(--karte); }

.inhalt { padding: 14px 14px 24px; max-width: 640px; margin: 0 auto; }

.fussleiste {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, 1fr);
  background: color-mix(in srgb, var(--grund) 94%, transparent);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--linie);
  padding-bottom: env(safe-area-inset-bottom);
}
.fussleiste a {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 9px 0 8px; font-size: 11px;
  color: var(--text-leise); text-decoration: none;
}
.fussleiste a.aktiv { color: var(--modul); font-weight: 600; }
.fussleiste .zeichen { font-size: 19px; line-height: 1; }

/* ---------------------------------------------------------------- Karten */

.karte {
  background: var(--karte);
  border: 1px solid var(--linie);
  border-radius: var(--rundung);
  padding: 16px;
  margin-bottom: 12px;
  display: block;
  color: inherit;
  text-decoration: none;
  animation: anlanden .3s cubic-bezier(.22,.7,.3,1) both;
}
.karte.haupt {
  background: var(--karte-hoch);
  border-top: 3px solid var(--modul);
}

.karte.dringend {
  border-color: var(--modul);
  background: var(--flaeche-dringend);
}
.karte.jetzt {
  border: 1px solid var(--teal);
  background: var(--flaeche-schleuse);
}
.karte.jetzt .gross { color: var(--teal); font-family: var(--schrift-titel); }
.karte.hinweis { border-left: 3px solid var(--himmel); }
.karte.anker { border-left: 3px solid var(--anker-gruen); background: var(--flaeche-anker); }
.karte.rueckblick { border-left: 3px solid var(--text-leise); }
.karte.auffordern { border: 1px dashed var(--kontur); }
.karte.krisenkarte { background: var(--flaeche-krise); border-color: var(--krise-rot); }

@keyframes anlanden {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
.inhalt > *:nth-child(1) { animation-delay: 0ms; }
.inhalt > *:nth-child(2) { animation-delay: 30ms; }
.inhalt > *:nth-child(3) { animation-delay: 60ms; }
.inhalt > *:nth-child(4) { animation-delay: 90ms; }
.inhalt > *:nth-child(5) { animation-delay: 120ms; }
.inhalt > *:nth-child(6) { animation-delay: 150ms; }
.inhalt > *:nth-child(n+7) { animation-delay: 170ms; }

h1 { font-size: 25px; margin: 0 0 10px; line-height: 1.25; font-weight: 650;
     font-family: var(--schrift-titel); }
h2 { font-size: 18px; margin: 0 0 10px; font-weight: 600;
     font-family: var(--schrift-titel); }
h2 small { font-weight: 400; color: var(--text-leise); font-size: 14px;
           font-family: var(--schrift); }

.gross { font-size: 21px; line-height: 1.35; margin: 4px 0; }
.klein { font-size: 13px; color: var(--text-leise); margin: 0 0 6px; }
.leise { color: var(--text-leise); font-size: 15px; }
.zahl { font-size: 20px; color: var(--modul); font-weight: 600; }

.karte-fuss { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.abstand-oben { margin-top: 22px; }
.karte.dokument ul, .karte.dokument ol { padding-left: 20px; }
.karte.dokument li { margin-bottom: 8px; }

/* --------------------------------------------------------------- Formular */

.feld { margin-bottom: 18px; }
label { display: block; font-size: 15px; margin-bottom: 6px; font-weight: 500; }
.hilfe { font-size: 13px; color: var(--text-leise); margin: 0 0 6px; }

input[type=text], input[type=password], input[type=number], input[type=date],
input[type=time], textarea, select {
  width: 100%; padding: 13px 14px; font-size: 17px; font-family: inherit;
  color: var(--text); background: var(--karte);
  border: 1px solid var(--kontur); border-radius: 11px;
}
textarea { resize: vertical; min-height: 52px; }
input:focus, textarea:focus, select:focus, button:focus-visible, a:focus-visible {
  outline: 3px solid var(--modul); outline-offset: 2px; border-color: transparent;
}

/* Regler: die Bahn füllt sich links vom Griff in der Hausfarbe. */
input[type=range].regler {
  width: 100%; height: 34px; -webkit-appearance: none; appearance: none;
  background: transparent; margin: 4px 0;
  --fuellung: 0%;
}
input[type=range].regler::-webkit-slider-runnable-track {
  height: 10px; border-radius: 5px;
  border: 1px solid var(--kontur);
  background: linear-gradient(to right,
    var(--modul) 0 var(--fuellung), transparent var(--fuellung) 100%);
}
input[type=range].regler::-webkit-slider-thumb {
  -webkit-appearance: none; width: 30px; height: 30px; margin-top: -11px;
  border-radius: 50%; background: var(--modul); border: 3px solid var(--grund);
  box-shadow: 0 1px 4px rgb(0 0 0 / .3);
}
input[type=range].regler::-moz-range-track {
  height: 10px; border-radius: 5px; border: 1px solid var(--kontur);
  background: transparent;
}
input[type=range].regler::-moz-range-progress {
  height: 10px; border-radius: 5px; background: var(--modul);
}
input[type=range].regler::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--modul); border: 3px solid var(--grund);
}
.regler-wert {
  display: inline-block; min-width: 2.2em; text-align: center;
  font-size: 19px; color: var(--modul); font-weight: 700;
}

.schalter { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.schalter label { margin: 0; }
input[type=checkbox] { width: 24px; height: 24px; accent-color: var(--modul); }

/* ---------------------------------------------------------------- Knöpfe */

.knopf-haupt, .knopf-zweit, .knopf-leise, button, .chip { font-family: inherit; cursor: pointer; }

.knopf-haupt {
  display: block; width: 100%; padding: 15px 18px; font-size: 17px; font-weight: 600;
  background: var(--modul); color: var(--knopf-schrift); border: none;
  border-radius: 12px; text-align: center; text-decoration: none;
  transition: transform .12s ease;
}
.knopf-haupt:active { transform: scale(.985); }
.knopf-zweit {
  display: block; width: 100%; padding: 15px 18px; font-size: 17px; font-weight: 600;
  background: var(--modul-flaeche); color: var(--text);
  border: 1px solid var(--kontur); border-radius: 12px; text-align: center; text-decoration: none;
}
.knopf-leise {
  display: inline-block; padding: 10px 16px; font-size: 15px;
  background: transparent; color: var(--modul);
  border: 1px solid var(--kontur); border-radius: 10px; text-decoration: none;
}
.knopf-haupt.breit { margin-bottom: 12px; }
.zwei-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zwei-knoepfe.abstand { margin-bottom: 14px; }

.chip {
  display: inline-block; padding: 8px 13px; margin: 0 6px 6px 0; font-size: 14px;
  background: var(--karte); color: var(--text-leise);
  border: 1px solid var(--kontur); border-radius: 999px; text-decoration: none;
}
.chip.an { background: var(--modul-flaeche); color: var(--modul); border-color: var(--modul); }
.starthilfen { margin: 10px 0 14px; }
.zeitraum { margin-top: 10px; }

/* ---------------------------------------------------------------- Zeilen */

.zeile {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--linie);
  color: inherit; text-decoration: none;
}
.zeile:last-child { border-bottom: none; }
.zeile.bereit .frist { color: var(--modul); font-weight: 600; }
.frist { color: var(--text-leise); font-size: 14px; white-space: nowrap; }
.zeile-karte { margin-bottom: 10px; }
.zeile-block { padding: 12px 0; border-bottom: 1px solid var(--linie); }
/* Kein Ausgrauen: Erledigtes wird zurückgenommen, nicht beschämt. */
.zeile-block.erledigt { border-left: 2px solid var(--linie); padding-left: 10px; }

.antworten { margin: 0; }
.antworten dt { font-size: 13px; color: var(--text-leise); margin-top: 12px; }
.antworten dd { margin: 3px 0 0; }

.anker-liste { margin: 6px 0 0; padding-left: 20px; }
.anker-liste li { margin-bottom: 4px; }

/* --------------------------------------------------------------- Schleuse */

.frist-anzeige {
  text-align: center; padding: 18px; margin: 14px 0;
  background: var(--flaeche-schleuse); border-radius: var(--rundung);
  border: 1px solid var(--teal);
}
.frist-anzeige .gross {
  font-size: 30px; font-variant-numeric: tabular-nums; color: var(--teal);
  font-weight: 700;
}
.frist-ring {
  width: 108px; height: 108px; margin: 0 auto 10px; border-radius: 50%;
  background: conic-gradient(var(--teal) calc(var(--anteil, 0) * 1%),
                             var(--linie) 0);
  display: grid; place-items: center;
}
.frist-ring::after {
  content: ''; width: 88px; height: 88px; border-radius: 50%;
  background: var(--flaeche-schleuse);
}
.freigabe { color: var(--anker-gruen); font-weight: 600; }
.bilanz-zeile { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--linie); }
.karte.bilanz b { color: var(--modul); }

/* --------------------------------------------------------------- Quittung */
/* Nach dem Absenden zeichnet sich einmal ein Haken. Eine Bestätigung,
   keine Belohnung — er verschwindet nicht wieder und zählt nichts. */

.quittung { display: inline-block; vertical-align: middle; margin-right: 8px; }
.quittung path {
  stroke: var(--anker-gruen); stroke-width: 3; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 26; stroke-dashoffset: 26;
  animation: haken .42s ease-out .05s forwards;
}
@keyframes haken { to { stroke-dashoffset: 0; } }

/* ---------------------------------------------------------------- Dialog */

.dialog { margin-bottom: 12px; }
.blase { padding: 13px 16px; border-radius: 16px; margin-bottom: 10px; max-width: 92%; }
.blase.frage { background: var(--flaeche-hinweis); border-bottom-left-radius: 5px; }
.blase.ich { background: var(--karte); border: 1px solid var(--linie); margin-left: auto; border-bottom-right-radius: 5px; }
.ki-frage {
  margin: 12px 0; padding: 13px 16px; border-left: 3px solid var(--modul);
  background: var(--modul-flaeche); border-radius: 0 11px 11px 0;
}
.fazit { color: var(--anker-gruen); font-size: 14px; }

/* ---------------------------------------------------------------- Kurven */
/* Jede Kurve steht in einer eigenen Karte mit eigener Überschrift — die
   Farbe ist Beiwerk, nicht Bedeutungsträger. Zusätzlich ein Strichmuster. */

.kurve { width: 100%; height: 60px; display: block; margin: 8px 0; }
.kurve .linie { fill: none; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.kurve .schlaf      { stroke: var(--indigo); }
.kurve .energie     { stroke: var(--bernstein); stroke-dasharray: 7 3; }
.kurve .anspannung  { stroke: var(--mauve); stroke-dasharray: 2 3; }
.kurve .stimmung    { stroke: var(--anker-gruen); stroke-dasharray: 10 3 2 3; }
.kurve .hilfslinie { stroke: var(--linie); stroke-width: 1; stroke-dasharray: 3 4; }

.regler-uebersicht { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 12px 0; }
.regler-uebersicht div { background: var(--grund); border-radius: 10px; padding: 10px 12px;
                         border: 1px solid var(--linie); }
.regler-uebersicht span { display: block; font-size: 12px; color: var(--text-leise); }
.regler-uebersicht b { font-size: 19px; }

/* ------------------------------------------------------------- Wochenbild */

.wochenbild { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin: 10px 0 4px; }
.wochentag {
  aspect-ratio: 1; border-radius: 10px; display: grid; place-items: center;
  font-size: 12px; font-weight: 600; border: 1px solid var(--kontur);
  color: var(--text-leise); background: transparent; text-decoration: none;
}
.wochentag.gefuellt { background: var(--modul); color: var(--knopf-schrift); border-color: var(--modul); }
.wochentag.ging-nicht {
  color: var(--text-leise);
  background: repeating-linear-gradient(45deg,
    transparent 0 4px, var(--linie) 4px 8px);
}
.wochentag.heute { outline: 2px solid var(--modul); outline-offset: 2px; }

/* ------------------------------------------------------------ Grundlagen */

.warum { margin: 10px 0 0; }
.warum summary {
  cursor: pointer; font-size: 14px; color: var(--modul);
  list-style: none; padding: 8px 0;
}
.warum summary::-webkit-details-marker { display: none; }
.warum summary::before { content: "ⓘ "; }
.warum-inhalt {
  font-size: 15px; color: var(--text-leise);
  border-left: 2px solid var(--linie); padding: 4px 0 4px 12px;
}
.verfahren { font-size: 14px; color: var(--text-leise); font-style: italic; }
.quellen { padding-left: 18px; margin: 8px 0 0; font-size: 14px; }
.quellen li { margin-bottom: 10px; color: var(--text-leise); }
.quellen a { color: var(--modul); }
.quellen .art { display: block; font-size: 12px; opacity: .8; }
.kurz { font-size: 16px; }
.grenze {
  border: 1px solid var(--bernstein);
  background: var(--flaeche-dringend);
  border-radius: 11px; padding: 12px 14px; font-size: 14px;
}
.bausteinliste li { margin-bottom: 12px; }
.bausteinliste .verfahren { display: block; }
.ablauf li { margin-bottom: 8px; }
.untertitel { font-size: 17px; color: var(--text-leise); }
.verweis { font-size: 12px; word-break: break-all; }

/* Dokumenten-Optik für das, was aus der Hand gegeben wird. */
body.ernst .karte.druckbar, body.ernst .karte.dokument {
  font-family: var(--schrift-dokument);
  line-height: 1.65;
}
body.ernst h1, body.ernst h2 { font-family: var(--schrift-dokument); }

/* --------------------------------------------------------------- Notruf */

.karte.notruf { border-color: var(--krise-rot); }
.notruf-knopf {
  display: block; padding: 16px; margin-bottom: 9px; text-align: center;
  background: var(--karte-hoch); color: var(--text); text-decoration: none;
  border: 1px solid var(--kontur); border-radius: 12px; font-size: 17px; font-weight: 600;
}
.notruf-knopf.dringend { background: var(--krise-rot); color: var(--knopf-schrift); border-color: var(--krise-rot); }

/* ------------------------------------------------------------- Meldungen */

.meldungen { padding: 10px 14px 0; max-width: 640px; margin: 0 auto; }
.meldung { padding: 11px 14px; border-radius: 11px; background: var(--karte-hoch);
           margin: 0 0 8px; font-size: 15px; border: 1px solid var(--linie); }
.meldung.error { background: var(--flaeche-krise); color: var(--krise-rot); border-color: var(--krise-rot); }
.meldung.success { border-left: 3px solid var(--anker-gruen); }
.hinweis-leise {
  font-size: 14px; color: var(--text-leise);
  background: var(--grund); border-radius: 10px; padding: 11px 13px;
  border: 1px solid var(--linie);
}
code { background: var(--grund); padding: 2px 6px; border-radius: 5px; font-size: 14px;
       border: 1px solid var(--linie); }

/* -------------------------------------------------------------- Anmelden */

.anmelden { max-width: 360px; margin: 12vh auto 0; text-align: center; }
.anmelden h1 { font-size: 32px; }
.anmelden form { text-align: left; margin-top: 26px; }
.anmelden label { margin-top: 14px; }
.anmelden button { margin-top: 22px; }

/* ------------------------------------------------------- Briefe und Anker */

.brief-text { font-family: var(--schrift-dokument); line-height: 1.7; font-size: 17px; }
.zustand {
  display: inline-block; font-size: 12px; padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--kontur); color: var(--text-leise);
}
.wenndann { border-left: 3px solid var(--modul); }
.wenndann .wenn { color: var(--text-leise); font-size: 14px; }
.wenndann .dann { font-size: 17px; margin-top: 4px; }

/* --------------------------------------------------- Bewegung reduzieren */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .quittung path { stroke-dashoffset: 0; }
}

/* ---------------------------------------------------------------- Drucken */

.nur-drucken { display: none; }

@media print {
  :root {
    --grund: #fff; --karte: #fff; --karte-hoch: #fff; --text: #000;
    --text-leise: #444; --linie: #bbb; --kontur: #999; --modul: #000;
    --modul-flaeche: transparent;
  }
  body { padding: 0; font-size: 11pt; font-family: var(--schrift-dokument); }
  .kopf, .fussleiste, .nicht-drucken, .meldungen, .warum { display: none !important; }
  .nur-drucken { display: block; }
  .karte { border: none; border-bottom: 1px solid #ddd; border-radius: 0;
           padding: 8px 0; margin: 0; page-break-inside: avoid; animation: none; }
  .waehler input { display: none; }
  .auswaehlbar:not(.mitnehmen) { display: none !important; }
  a { color: #000; text-decoration: none; }
  .druckkopf { margin-bottom: 14px; }
}