/* ============================================================
   VORSORGE-COCKPIT — Design-System
   Anmutung: ruhiges, vertrauenswürdiges Aktenregister.
   Typo: Source Serif 4 (Aktentitel) + Inter (Formulare/Fließtext) + IBM Plex Mono (Aktenzeichen/Daten)
   ============================================================ */

/* Schriften liegen lokal in assets/fonts/ – kein externer Request, offline nutzbar. */
@import url('fonts.css');

:root{
  --paper:        #F7F3EC;
  --paper-card:   #FFFEFB;
  --ink:          #262A2E;
  --ink-soft:     #565F63;
  --line:         #DDD5C7;
  --line-soft:    #E9E3D8;
  --petrol:       #2F5D62;
  --petrol-dark:  #1F4448;
  --petrol-tint:  #E4EEEE;
  --ochre:        #A9803F;
  --ochre-tint:   #F4E9D6;
  --danger:       #9A4A3C;
  --danger-tint:  #F3E1DC;
  --ok:           #3E6B4F;
  --ok-tint:      #E4EEE6;
  --radius:       8px;
  --radius-card:  14px;
  --shadow:       0 1px 2px rgba(38,42,46,.06), 0 4px 14px rgba(38,42,46,.05);
  /* Farbliche Kennzeichnung der fünf Bereiche. Gedeckt gehalten, damit das
     Register ruhig bleibt – die Farbe soll orientieren, nicht dekorieren. */
  --g-notfall:         #9A4A3C;
  --g-notfall-tint:    #F3E1DC;
  --g-medizin:         #2F5D62;
  --g-medizin-tint:    #E4EEEE;
  --g-finanzen:        #A9803F;
  --g-finanzen-tint:   #F4E9D6;
  --g-todesfall:       #6B5570;
  --g-todesfall-tint:  #EDE6EE;
  --g-uebersicht:      #3E6B4F;
  --g-uebersicht-tint: #E4EEE6;
  --serif: 'Source Serif 4', Georgia, serif;
  --sans:  'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --mono:  'IBM Plex Mono', ui-monospace, monospace;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
/* Bedienungshilfe Textgröße (assets/bedienungshilfen.js): da fast das
   gesamte Stylesheet in rem rechnet, skaliert die Root-Schriftgröße
   praktisch die ganze Oberfläche mit, nicht nur den Fließtext. */
html[data-textgroesse="gross"]{font-size:112.5%;}
html[data-textgroesse="sehr-gross"]{font-size:125%;}
body{
  margin:0;
  background:var(--paper);
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px);
  background-size: 100% 2.2rem;
  background-attachment: local;
  color:var(--ink);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

a{color:var(--petrol);}
a:hover{color:var(--petrol-dark);}

.skiplink{position:absolute;left:-999px;top:0;background:var(--petrol);color:#fff;padding:.6rem 1rem;z-index:100;}
.skiplink:focus{left:0;}

/* ---------- Aktenkopf / Header ---------- */
.aktenkopf{
  position:sticky; top:0; z-index:50;
  background:var(--petrol);
  color:#EFEFE9;
  padding: 1.1rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
/* .kopf-links bündelt Logo/Marke und den Zurück-Link links im Kopf –
   Nutzertest zeigte: Ein Rückweg wird instinktiv oben LINKS gesucht,
   nicht oben rechts. Der frühere Rückweg saß rechts in <nav> neben
   "Text vergrößern" und wurde dort verlässlich übersehen. */
.aktenkopf .kopf-links{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.aktenkopf .marke{
  display:flex;align-items:baseline;gap:.65rem;
  font-family:var(--serif);
  font-weight:600;
  font-size:1.25rem;
  letter-spacing:.01em;
  color:#fff;
  text-decoration:none;
}
.aktenkopf .marke small{
  font-family:var(--mono);
  font-size:.68rem;
  color:#B9CCCC;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.aktenkopf .marke img{
  width:28px; height:28px; flex:none;
  align-self:center; /* .marke richtet an der Textbaseline aus – das Logo gehört mittig */
}
.aktenkopf nav{display:flex;align-items:center;gap:1.2rem;font-size:.86rem;}
.aktenkopf nav a{color:#D8E3E2;text-decoration:none;border-bottom:1px solid transparent;padding-bottom:2px;}
.aktenkopf nav a:hover{color:#fff;border-color:#fff;}
/* Der wichtigste Rückweg auf jeder Modulseite – erkennbar als eigener
   Knopf, aber bewusst dezent (dünner Rahmen statt Füllung, gedämpfte
   statt reinweiße Schrift): Neben Logo und Marke soll er nicht lauter
   wirken als der Rest des Kopfes. text-decoration:none hier explizit
   gesetzt, weil der Link seit dem Umzug aus <nav> heraus (in
   .kopf-links) nicht mehr automatisch von der Link-Reset-Regel
   ".aktenkopf nav a" miterfasst wird. */
.aktenkopf a.nav-home{
  color:#D8E3E2; text-decoration:none; border:1px solid rgba(255,255,255,.35); border-radius:999px;
  padding:.32rem .8rem; font-size:.82rem; font-weight:500; background:transparent;
  white-space:nowrap;
}
.aktenkopf a.nav-home:hover{color:#fff; border-color:#fff; background:rgba(255,255,255,.1);}
/* Bedienungshilfe Textgröße – im Kopf jeder Seite, damit sie unabhängig
   davon erreichbar ist, wo man gerade liest. Eigener Button statt Link,
   weil sie nichts navigiert, sondern die Anzeige umschaltet. */
.btn-textgroesse{
  font-family:var(--sans); font-size:.8rem; color:#D8E3E2; background:transparent;
  border:1px solid rgba(255,255,255,.4); border-radius:999px; padding:.35rem .8rem; cursor:pointer;
}
.btn-textgroesse:hover{color:#fff; border-color:#fff; background:rgba(255,255,255,.1);}

/* ---------- Layout ---------- */
.leaf{max-width:920px;margin:0 auto;padding:2.4rem 1.5rem 5rem;}
.leaf--wide{max-width:1180px;}

/* ---------- Deckblatt / Hero (Startseite) ---------- */
.deckblatt{
  max-width:1180px;margin:0 auto;padding:3.2rem 1.5rem 1rem;
  display:grid;grid-template-columns: 1.15fr .85fr; gap:2.5rem; align-items:end;
}
@media (max-width:820px){ .deckblatt{grid-template-columns:1fr;} }
.deckblatt .az{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ochre); margin-bottom:.9rem; display:block;
}
.deckblatt h1{
  font-family:var(--serif); font-weight:700; font-size:clamp(2.1rem,4.4vw,3.1rem);
  line-height:1.08; margin:0 0 .9rem; color:var(--ink);
}
.begruessung{
  font-family:var(--serif); font-size:1.15rem; color:var(--petrol-dark);
  margin:0 0 .4rem;
}
.begruessung:empty{display:none;}
.deckblatt .sub{color:var(--ink-soft); font-size:1.08rem; max-width:52ch; margin:0; font-family:var(--serif);}
.deckblatt-side{
  background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-card);
  padding:1.3rem 1.4rem; box-shadow:var(--shadow);
}
.deckblatt-side .ringstat{display:flex;align-items:center;gap:1rem;}
.ring{position:relative;width:74px;height:74px;flex:none;}
.ring svg{transform:rotate(-90deg);}
.ring circle{fill:none;stroke-width:7;}
.ring .track{stroke:var(--line-soft);}
.ring .val{stroke:var(--petrol); stroke-linecap:round; transition:stroke-dashoffset .4s ease;}
.ring .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:.95rem;font-weight:600;color:var(--petrol-dark);}
.deckblatt-side .ringstat p{margin:0;font-size:.86rem;color:var(--ink-soft);}
.deckblatt-side .ringstat strong{display:block;font-family:var(--serif);font-size:1.05rem;color:var(--ink);}
/* Sanfter Vorschlag, wo es weitergehen könnte – befüllt von renderCockpit()
   in cockpit.js, bleibt leer und unsichtbar, wenn schon alles fertig ist. */
.naechster-schritt{margin:.9rem 0 0; font-size:.84rem; color:var(--ink-soft); padding-top:.8rem; border-top:1px solid var(--line-soft);}
.naechster-schritt:empty{display:none;}
.naechster-schritt a{font-weight:600;}

/* "X Kacheln ausgeblendet" – füllt sich in renderCockpit()/cockpit.js */
.ausgeblendet-hinweis{margin:.9rem 0 0; font-size:.84rem; color:var(--ink-soft);}
.ausgeblendet-hinweis:empty{display:none; margin:0;}
.ausgeblendet-hinweis a{font-weight:600; color:var(--petrol-dark);}

/* ---------- Register / Modul-Karten ---------- */
.register{max-width:1180px;margin:2.8rem auto 0;padding:0 1.5rem 3rem;}
.register h2{font-family:var(--serif);font-size:1.5rem;margin:0 0 .3rem;}
.register .lead{color:var(--ink-soft);margin:0 0 1.6rem;max-width:65ch;font-family:var(--serif);}
.kapitelgruppe{margin-bottom:2.2rem;}
.kapitelgruppe > h4{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gruppe,var(--ink-soft));margin:0 0 .7rem;padding-bottom:.5rem;
  border-bottom:2px solid var(--gruppe,var(--line));
}
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:1rem;}
/* .karte ist bewusst ein <div>, kein Link mehr: der Ausblenden-Schalter
   darf laut HTML-Spec nicht in einem <a> verschachtelt sein. Die eigentliche
   Navigation übernimmt .karte-flaeche innen, siehe dort. */
.karte{
  position:relative; overflow:hidden;
  background:var(--paper-card);border:1px solid var(--line);border-radius:var(--radius-card);
  box-shadow:var(--shadow); transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease, opacity .25s ease, filter .25s ease;
  display:flex; flex-direction:column;
}
.karte:hover{transform:translateY(-3px); border-color:var(--gruppe,var(--petrol)); box-shadow:0 10px 26px rgba(47,93,98,.16);}
.karte-flaeche{text-decoration:none; color:var(--ink); display:flex; flex-direction:column; flex:1; min-width:0;}
/* Kachel ausgeschaltet: bleibt erreichbar, tritt aber optisch zurück –
   das eigentliche Ein-/Ausblenden übernimmt der Schalter in .tabnr-stack. */
.karte.aus{opacity:.5; filter:grayscale(60%); box-shadow:none;}
.karte.aus:hover{opacity:.8; transform:none; box-shadow:none;}
.tabnr-stack{
  position:absolute; top:.65rem; right:.65rem; z-index:2;
  display:flex; flex-direction:column; align-items:flex-end; gap:.3rem;
}
.karte .tabnr{
  background:rgba(255,255,255,.88); color:var(--gruppe,var(--petrol)); font-family:var(--mono); font-size:.68rem; font-weight:700;
  padding:.22rem .55rem; border-radius:999px; letter-spacing:.04em; box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.schalter-a-huelle{display:flex; cursor:pointer;}
.schalter-a{
  appearance:none; -webkit-appearance:none; width:20px; height:12px; border-radius:999px;
  background:rgba(255,255,255,.85); border:1px solid var(--line); position:relative; cursor:pointer; margin:0;
  transition:background-color .18s ease, border-color .18s ease; flex:none;
}
.schalter-a::after{
  content:""; position:absolute; top:1px; left:1px; width:9px; height:9px; border-radius:50%;
  background:#fff; border:1px solid var(--line); box-shadow:0 1px 2px rgba(0,0,0,.2); transition:transform .18s ease;
}
.schalter-a:checked{background:var(--gruppe,var(--petrol)); border-color:var(--gruppe,var(--petrol));}
.schalter-a:checked::after{transform:translateX(9px); border-color:transparent;}
.schalter-a:focus-visible{outline:2px solid var(--petrol-dark); outline-offset:2px;}
.karte-kopf{
  background:linear-gradient(135deg, var(--gruppe-tint,var(--petrol-tint)) 0%, var(--paper-card) 120%);
  padding:1.1rem 1.1rem .8rem; display:flex; align-items:center; gap:.7rem;
}
.karte-icon{
  width:38px; height:38px; flex:0 0 auto; border-radius:50%;
  background:var(--gruppe,var(--petrol)); /* Fallback für Browser ohne color-mix() */
  background:color-mix(in srgb, var(--gruppe,var(--petrol)) 65%, white);
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.10);
}
.karte-icon svg{width:19px;height:19px;stroke:#fff;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.karte h3{margin:0; font-size:1rem; font-family:var(--sans); font-weight:600; padding-right:2rem; overflow-wrap:break-word; -webkit-hyphens:auto; hyphens:auto; min-width:0;}
.karte-body{padding:.2rem 1.1rem 1.05rem; display:flex; flex-direction:column; gap:.6rem; flex:1;}

/* Bereichsfarben, gesetzt über data-farbe auf der Kapitelgruppe bzw. dem Body */
[data-farbe="notfall"]{    --gruppe:var(--g-notfall);    --gruppe-tint:var(--g-notfall-tint); }
[data-farbe="medizin"]{    --gruppe:var(--g-medizin);    --gruppe-tint:var(--g-medizin-tint); }
[data-farbe="finanzen"]{   --gruppe:var(--g-finanzen);   --gruppe-tint:var(--g-finanzen-tint); }
[data-farbe="todesfall"]{  --gruppe:var(--g-todesfall);  --gruppe-tint:var(--g-todesfall-tint); }
[data-farbe="uebersicht"]{ --gruppe:var(--g-uebersicht); --gruppe-tint:var(--g-uebersicht-tint); }
.karte p{margin:0;font-size:.82rem;color:var(--ink-soft);flex:1;}

/* Sonderkachel "Ist gerade ein Mensch verstorben?" (siehe cockpit.js,
   buildSonderkachel): volltonig statt nur angedeutet eingefärbt, damit sie
   sich auch innerhalb der ohnehin rötlichen Gruppe "Sofort im Ernstfall"
   klar von den normalen Modul-Kacheln abhebt. */
.karte-sonder{ background:var(--danger-tint); border:1.5px solid var(--danger); }
.karte-sonder .karte-kopf{ background:transparent; }
.karte-sonder h3, .karte-sonder p{ color:#6E3327; }
.karte-sonder-link{ font-weight:700; color:var(--danger); font-size:.86rem; }
.karte-fortschritt{height:4px;background:var(--line-soft);border-radius:4px;overflow:hidden;}
.karte-fortschritt-fuellung{height:100%;background:var(--gruppe,var(--petrol));border-radius:4px;transition:width .4s ease;}
.karte[data-status="leer"] .karte-fortschritt-fuellung{background:var(--line);}
.karte .status{display:flex;align-items:center;gap:.4rem;font-size:.74rem;font-weight:600;}
.karte .status .dot{width:7px;height:7px;border-radius:50%;background:var(--line);}
.karte[data-status="leer"] .status{color:var(--ink-soft);}
.karte[data-status="teilweise"] .status .dot{background:var(--ochre);}
.karte[data-status="teilweise"] .status{color:var(--ochre);}
.karte[data-status="fertig"] .status .dot{background:var(--ok);}
.karte[data-status="fertig"] .status{color:var(--ok);}

/* ---------- "Zum Weiterlesen" – unabhängige externe Anlaufstellen ---------- */
/* Eingeklappt per Default (natives <details>, kein JS nötig) – acht Kacheln
   sind auf einer ohnehin langen Startseite ein optionaler Zusatz, kein Teil
   des Kernwegs durchs Ausfüllen. */
.wissen-einklappbar summary{
  cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:.55rem;
  font-family:var(--sans); font-weight:600; font-size:.9rem; color:var(--petrol-dark);
  padding:.65rem 1.2rem; margin-top:.3rem;
  background:var(--petrol-tint); border:1px solid var(--petrol); border-radius:999px;
  transition:background-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
}
.wissen-einklappbar summary::-webkit-details-marker{display:none;}
.wissen-einklappbar summary::before{content:"▸"; color:currentColor; transition:transform .15s ease; display:inline-block;}
.wissen-einklappbar[open] summary::before{transform:rotate(90deg);}
.wissen-einklappbar summary:hover{background:var(--petrol); color:#fff; transform:translateY(-1px); box-shadow:0 4px 12px rgba(47,93,98,.28);}
.wissen-einklappbar .wissenskarten{margin-top:1.2rem;}
/* Bewusst wärmer und runder als die Modul-Kacheln: hier geht es ums Stöbern,
   nicht ums Ausfüllen – das darf man dem Design ansehen. */
.wissenskarten{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.1rem;}
[data-wk="pflege"]   {--wk:var(--g-medizin);    --wk-tint:var(--g-medizin-tint);}
[data-wk="rechtlich"]{--wk:var(--g-uebersicht); --wk-tint:var(--g-uebersicht-tint);}
[data-wk="erben"]    {--wk:var(--g-finanzen);   --wk-tint:var(--g-finanzen-tint);}
[data-wk="bestattung"]{--wk:var(--g-todesfall); --wk-tint:var(--g-todesfall-tint);}
[data-wk="digital"]{--wk:var(--g-todesfall); --wk-tint:var(--g-todesfall-tint);}
[data-wk="pflegende"]{--wk:var(--g-finanzen); --wk-tint:var(--g-finanzen-tint);}
[data-wk="schwerbehinderung"]{--wk:var(--g-medizin); --wk-tint:var(--g-medizin-tint);}
[data-wk="unternehmen"]{--wk:var(--g-notfall); --wk-tint:var(--g-notfall-tint);}
.wissenskarte{
  position:relative; overflow:hidden;
  background:var(--paper-card); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.wissenskarte:hover{transform:translateY(-4px); box-shadow:0 14px 32px rgba(38,42,46,.15); border-color:var(--wk);}
/* .wk-kopf/.wk-icon/.wk-body: gemeinsamer Kopf/Icon-Aufbau, den sich
   .wissenskarte und .datenkarte teilen (nicht auf .wissenskarte beschränkt). */
.wk-kopf{
  background:linear-gradient(135deg, var(--wk-tint) 0%, var(--paper-card) 115%);
  padding:1.15rem 1.25rem .85rem; display:flex; align-items:center; gap:.8rem;
}
.wk-icon{
  width:44px; height:44px; flex:0 0 auto; border-radius:50%;
  background:var(--wk); /* Fallback für Browser ohne color-mix() */
  background:color-mix(in srgb, var(--wk) 65%, white);
  display:flex; align-items:center; justify-content:center; box-shadow:0 2px 6px rgba(0,0,0,.10);
}
.wk-icon svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;}
.wk-kopf h3{margin:0; font-family:var(--serif); font-size:1.12rem; font-weight:600; color:var(--ink); line-height:1.25;}
.wk-body{padding:.2rem 1.25rem 1.2rem;}
.wissenskarte p{margin:0 0 .8rem; font-size:.86rem; color:var(--ink-soft); line-height:1.55; font-family:var(--serif);}
.wissenskarte .quellen{list-style:none; margin:0 0 .85rem; padding:0; display:flex; flex-direction:column; gap:.5rem;}
.wissenskarte .quellen a{
  font-size:.83rem; color:var(--ink); text-decoration:none; display:flex; align-items:baseline; gap:.45rem;
  padding-bottom:.3rem; border-bottom:1px dotted var(--line); transition:color .15s ease, border-color .15s ease;
}
.wissenskarte .quellen a:hover{color:var(--wk); border-color:var(--wk);}
.wissenskarte .quellen a::before{content:"↗"; font-size:.72rem; color:var(--wk); flex:0 0 auto; transform:translateY(1px);}
.wissenskarte .stand{
  margin:0; font-size:.72rem; color:var(--ink-soft); background:var(--wk-tint);
  display:inline-block; padding:.28rem .6rem; border-radius:20px;
}

/* "Daten & Export" nutzt denselben Kopf/Icon-Aufbau wie die Wissenskarten,
   damit der wichtige Abschluss der Seite nicht als bloßer Fließtext wirkt,
   sondern erkennbar gerahmt ist. Eigene, etwas kräftigere Farbe (petrol),
   weil es hier nicht um ein Thema unter vielen, sondern um die zentrale
   Sicherheitsfrage der ganzen Mappe geht. */
.datenkarte{
  --wk:var(--petrol); --wk-tint:var(--petrol-tint);
  max-width:820px; overflow:hidden;
  background:var(--paper-card); border:1px solid var(--line); border-radius:18px;
  box-shadow:var(--shadow);
}
.datenkarte .wk-kopf{border-bottom:1px solid var(--line-soft);}
.datenkarte .wk-kopf h3{font-size:1.2rem;}

/* ---------- Formular-Seiten ---------- */
.leaf--mit-toc{display:grid; grid-template-columns:180px minmax(0,1fr); gap:2.4rem; align-items:start;}
@media (max-width:1000px){ .leaf--mit-toc{display:block;} }
/* Bei kurzen Modulen bleibt #modul-toc leer und damit per :empty ausgeblendet
   (siehe unten) – ohne feste Spaltenzuweisung würde die Formularspalte dann
   durch die automatische Grid-Platzierung in die schmale erste (TOC-)Spalte
   rutschen, statt die volle Breite zu nutzen. */
.formular-spalte{grid-column:2;}

/* Inhaltsverzeichnis am Rand – nur bei längeren Formularen befüllt
   (siehe renderToc in engine.js), bleibt sonst leer und unsichtbar. */
.modul-toc{
  position:sticky; top:5.5rem;
  display:flex; flex-direction:column; gap:.15rem;
  font-size:.8rem; max-height:calc(100vh - 7rem); overflow-y:auto;
}
.modul-toc:empty{display:none;}
.modul-toc a{
  color:var(--ink-soft); text-decoration:none; padding:.35rem .7rem;
  border-left:2px solid var(--line); line-height:1.35;
}
.modul-toc a:hover{color:var(--ink);}
.modul-toc a.aktiv{color:var(--gruppe,var(--petrol)); border-color:var(--gruppe,var(--petrol)); font-weight:600;}
@media (max-width:1000px){ .modul-toc{display:none;} }
@media print{ .modul-toc{display:none;} }

.formkopf{border-bottom:2px solid var(--gruppe,var(--petrol)); padding-bottom:1.1rem; margin-bottom:1.8rem;}
.formkopf .az{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gruppe,var(--ochre));}
.formkopf h1{font-family:var(--serif);font-size:1.9rem;margin:.35rem 0 .5rem;}
.formkopf .lead{color:var(--ink-soft);max-width:70ch;margin:0 0 1rem;font-family:var(--serif);}

/* Fortschrittsbalken im Formularkopf – sichtbares Feedback beim Ausfüllen,
   nicht erst am Ende auf der Startseite. */
.kopf-fortschritt{height:5px; background:var(--line-soft); border-radius:4px; overflow:hidden;}
.kopf-fortschritt-fuellung{
  height:100%; width:0%; background:var(--gruppe,var(--petrol)); border-radius:4px;
  transition:width .4s ease;
}

.hinweis{
  border-left:3px solid var(--petrol); background:var(--petrol-tint);
  padding:.85rem 1rem; border-radius:0 var(--radius) var(--radius) 0; margin:1.3rem 0;
  font-size:.9rem; color:var(--petrol-dark);
}
.hinweis.warnung{border-color:var(--danger); background:var(--danger-tint); color:#6E3327;}
.hinweis.gut{border-color:var(--ok); background:var(--ok-tint); color:#2C4E38;}
.hinweis a{color:inherit;text-decoration:underline;}
/* Nur das erste <strong> ist die Überschrift des Hinweises – Hervorhebungen
   im Fließtext bleiben normale Auszeichnungen und brechen nicht die Zeile. */
.hinweis > strong:first-child{display:block; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; margin-bottom:.25rem; font-family:var(--mono);}

.abschnitt{margin-bottom:2.2rem;}
.abschnitt > h2{
  font-family:var(--serif); font-size:1.18rem; margin:0 0 .2rem; color:var(--ink);
  display:flex; align-items:baseline; gap:.5rem;
}
.abschnitt > h2 .snr{font-family:var(--mono); font-size:.78rem; color:var(--gruppe,var(--ochre)); font-weight:600;}
.abschnitt > .desc{font-size:.86rem; color:var(--ink-soft); margin:0 0 1rem; font-family:var(--serif);}

/* Kleiner Erfolgsmoment: taucht auf, sobald ein Abschnitt vollständig
   ausgefüllt ist (siehe sectionComplete()/updateFortschritt() in engine.js).
   Kein Konfetti, aber ein spürbares "das sitzt". */
.abschnitt-check{
  display:inline-flex; align-items:center; justify-content:center;
  width:19px; height:19px; border-radius:50%; background:var(--ok); color:#fff;
  font-size:.66rem; margin-left:.5rem; vertical-align:middle;
  opacity:0; transform:scale(.4);
  transition:opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
}
.abschnitt-check.sichtbar{opacity:1; transform:scale(1);}

.feldgruppe{background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-card); padding:1.2rem 1.3rem; margin-bottom:.9rem;}
.reihe{display:grid; grid-template-columns:repeat(var(--cols,2),1fr); gap:1rem;}
@media (max-width:640px){.reihe{grid-template-columns:1fr;}}

.feld{margin-bottom:1rem;}
.feld:last-child{margin-bottom:0;}
.feld label{display:block; font-size:.83rem; font-weight:600; margin-bottom:.32rem; color:var(--ink);}
.feld .hilfe{display:block; font-size:.76rem; color:var(--ink-soft); font-weight:400; margin-top:.2rem;}
.feld input[type=text], .feld input[type=date], .feld input[type=tel], .feld input[type=email], .feld textarea, .feld select{
  width:100%; font-family:var(--sans); font-size:.92rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  padding:.55rem .7rem; transition:border-color .12s ease, box-shadow .12s ease;
}
.feld input:focus, .feld textarea:focus, .feld select:focus{
  outline:none; border-color:var(--petrol); box-shadow:0 0 0 3px var(--petrol-tint);
}
.feld textarea{resize:vertical; min-height:5.2em;}
.feld .radiogroup, .feld .checkgroup{display:flex; flex-wrap:wrap; gap:.5rem .9rem; padding-top:.15rem;}
.feld .radiogroup label, .feld .checkgroup label{
  display:flex; align-items:center; gap:.4rem; font-weight:400; font-size:.88rem; margin:0; cursor:pointer;
}
.feld .radiogroup input, .feld .checkgroup input{accent-color:var(--petrol); width:15px;height:15px;}

.wiederholbar{border:1px dashed var(--line); border-radius:var(--radius); padding:.9rem; margin-bottom:.8rem; position:relative; background:#FFFEFC;}
.wiederholbar .entfernen{position:absolute; top:.5rem; right:.5rem; background:none; border:none; color:var(--danger); cursor:pointer; font-size:.78rem; font-family:var(--sans);}
.hinzufuegen{background:var(--petrol-tint); color:var(--petrol-dark); border:1px dashed var(--petrol); border-radius:var(--radius); padding:.55rem 1rem; font-size:.84rem; font-weight:600; cursor:pointer; width:100%;}
.hinzufuegen:hover{background:var(--petrol); color:#fff;}

/* ---------- Datei-Anhänge (Wiederholblöcke mit "anhaenge": true) ---------- */
.anhaenge-block{margin-top:.9rem; padding-top:.8rem; border-top:1px dashed var(--line);}
.anhaenge-titel{margin:0 0 .5rem; font-size:.76rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-soft);}
.anhaenge-liste{display:flex; flex-direction:column; gap:.4rem; margin-bottom:.6rem;}
.anhang-zeile{display:flex; align-items:center; gap:.6rem; font-size:.82rem; background:var(--paper); border:1px solid var(--line); border-radius:6px; padding:.4rem .6rem;}
.anhang-name{flex:1; min-width:0; overflow-wrap:break-word;}
.anhang-groesse{color:var(--ink-soft); font-family:var(--mono); font-size:.72rem; white-space:nowrap;}
.anhang-herunterladen, .anhang-entfernen{background:none; border:none; cursor:pointer; font-family:var(--sans); font-size:.78rem; color:var(--petrol); padding:.1rem .2rem;}
.anhang-herunterladen:hover{text-decoration:underline;}
.anhang-entfernen{color:var(--danger); font-size:.9rem;}
.anhaenge-leer{margin:0 0 .6rem; color:var(--ink-soft); font-style:italic; font-size:.82rem;}
.anhaenge-hinzufuegen{font-size:.78rem; padding:.45rem .85rem;}
.anhaenge-hinweis{margin:.55rem 0 0; font-size:.72rem; color:var(--ink-soft);}
@media print{
  .anhaenge-hinzufuegen, .anhang-herunterladen, .anhang-entfernen, .anhaenge-hinweis{display:none;}
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.45rem; font-family:var(--sans); font-weight:600; font-size:.86rem;
  padding:.6rem 1.15rem; border-radius:10px; border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease;
}
.btn-primary{background:var(--petrol); color:#fff; box-shadow:0 2px 8px rgba(47,93,98,.28);}
.btn-primary:hover{background:var(--petrol-dark); transform:translateY(-1px); box-shadow:0 4px 12px rgba(47,93,98,.34);}
.btn-outline{background:var(--paper-card); border-color:var(--line); color:var(--ink);}
.btn-outline:hover{border-color:var(--petrol); color:var(--petrol-dark); background:var(--petrol-tint); transform:translateY(-1px);}
.btn-ghost{background:transparent; color:var(--ink-soft); border-color:transparent; padding:.6rem .3rem;}
.btn-ghost:hover{color:var(--ink);}

/* Rückwege (Zurück / Zur Übersicht) sollen auffindbar sein, nicht nur "irgendein Outline-Button" */
.btn-zurueck{background:var(--petrol-tint); border-color:var(--petrol-tint); color:var(--petrol-dark); font-weight:700;}
.btn-zurueck:hover{background:var(--petrol); border-color:var(--petrol); color:#fff; transform:translateY(-1px);}

.formfuss{
  position:sticky; bottom:0; margin-top:2.4rem; padding:1rem 1.3rem; background:var(--paper-card);
  border:1px solid var(--line); border-radius:var(--radius-card);
  /* Schatten bewusst nach oben statt nach unten: Die Leiste bleibt beim Scrollen
     am unteren Rand stehen und liegt dabei über dem Formularinhalt darüber –
     ein Schatten nach unten wäre dort unsichtbar und die Leiste wirkte wie ein
     Darstellungsfehler statt wie eine schwebende Werkzeugleiste. */
  box-shadow:0 -14px 24px -10px rgba(38,42,46,.16), 0 -2px 6px rgba(38,42,46,.09);
  display:flex; align-items:center; justify-content:space-between; gap:1rem; flex-wrap:wrap;
}
.formfuss .autosave{font-size:.78rem; color:var(--ink-soft); display:flex; align-items:center; gap:.4rem;}
.formfuss .autosave .dotpuls{width:7px;height:7px;border-radius:50%;background:var(--ok);}
.formfuss .knoepfe{display:flex; gap:.55rem; flex-wrap:wrap;}

/* ---------- Fußzeile ---------- */
.aktenfuss{max-width:1180px;margin:0 auto;padding:2rem 1.5rem 3rem;color:var(--ink-soft);font-size:.8rem;border-top:1px solid var(--line);}

/* ---------- Zurück nach oben (nur Startseite, sehr lange Seite) ---------- */
.btn-nach-oben{
  position:fixed; right:1.3rem; bottom:1.3rem; z-index:60;
  width:42px; height:42px; border-radius:50%; border:none;
  background:var(--petrol); color:#fff; font-size:1.15rem; line-height:1; cursor:pointer;
  box-shadow:0 4px 14px rgba(38,42,46,.25);
  opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, background-color .12s ease;
}
.btn-nach-oben.sichtbar{opacity:1; pointer-events:auto; transform:translateY(0);}
.btn-nach-oben:hover{background:var(--petrol-dark);}

/* ---------- Toast ---------- */
.toast{position:fixed; left:50%; bottom:1.4rem; transform:translate(-50%,10px); background:var(--ink); color:#fff;
  padding:.65rem 1.1rem; border-radius:var(--radius); font-size:.85rem; opacity:0; pointer-events:none; transition:all .25s ease; z-index:200;}
.toast.zeig{opacity:1; transform:translate(-50%,0);}

/* ---------- Druckansicht ---------- */
/* ---------- Mappenleiste (mehrere Personen) ---------- */
.mappen-leiste{
  max-width:1180px; margin:1.6rem auto 0; padding:.9rem 1.5rem;
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
}
.mappen-leiste:empty{ display:none; }
.mappen-leiste label{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft);
}
.mappen-leiste select{
  padding:.4rem .6rem; font-family:inherit; font-size:.9rem;
  border:1px solid var(--line); border-radius:var(--radius);
  background:var(--paper-card); color:var(--ink); min-width:180px;
}
.btn-klein{ padding:.35rem .7rem; font-size:.8rem; }
.mappen-hinweis{
  flex-basis:100%; margin:.2rem 0 0; font-size:.8rem; color:var(--ink-soft);
}
/* Hinweis in der Kopfzeile der Modulseiten, welche Mappe aktiv ist */
.mappen-anzeige{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.06em;
  padding:.2rem .55rem; border-radius:999px;
  background:rgba(255,255,255,.14); color:#EFEFE9; border:1px solid rgba(255,255,255,.25);
  align-self:center; white-space:nowrap;
}
.btn-gefahr{
  background:var(--danger); color:#fff; border:1px solid var(--danger);
}
.btn-gefahr:hover{ filter:brightness(.93); }

/* ---------- Passwort-Dialog ---------- */
.dialog-overlay{
  position:fixed; inset:0; z-index:100;
  background:rgba(38,42,46,.55);
  display:flex; align-items:center; justify-content:center;
  padding:1.5rem;
}
.dialog{
  background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:0 8px 40px rgba(38,42,46,.22);
  padding:1.6rem 1.7rem 1.4rem; max-width:520px; width:100%;
}
.dialog h3{
  font-family:var(--serif); font-size:1.15rem; margin:0 0 .6rem; color:var(--ink);
}
.dialog .dialog-text{
  font-size:.88rem; line-height:1.55; color:var(--ink-soft); margin:0 0 1.1rem;
}
.dialog label{
  display:block; font-size:.8rem; font-weight:500; color:var(--ink); margin:.7rem 0 .3rem;
}
.dialog input[type=password]{
  width:100%; padding:.55rem .7rem; font-size:.95rem; font-family:inherit;
  border:1px solid var(--line); border-radius:var(--radius); background:#fff; color:var(--ink);
}
.dialog input[type=password]:focus{ outline:2px solid var(--petrol); outline-offset:1px; border-color:var(--petrol); }
.dialog-fehler{
  margin:.8rem 0 0; padding:.5rem .7rem; font-size:.83rem;
  background:var(--danger-tint); color:var(--danger); border-radius:var(--radius);
}
.dialog-aktionen{
  display:flex; gap:.6rem; justify-content:flex-end; flex-wrap:wrap; margin-top:1.3rem;
}
@media (max-width:520px){
  .dialog-aktionen{ flex-direction:column-reverse; }
  .dialog-aktionen .btn{ width:100%; }
}

/* ---------- Entwurf / Urkundenansicht (z. B. Patientenverfügung) ---------- */
body.modus-urkunde #formular-root{display:none;}
/* Die sticky Speichern-Leiste gehört zum Formular, nicht zum Entwurf – sie
   blieb bisher unten eingeblendet und deckte dort die "Zurück"/"Zur
   Übersicht"-Aktionen des Entwurfs optisch ab. Der Entwurf hat eine eigene
   Aktionsleiste (.urkunde-aktionen), die braucht keine Konkurrenz. */
body.modus-urkunde .formfuss{display:none;}
.urkunde{
  background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius);
  padding:2rem 2.2rem; margin:1.6rem 0 3rem; font-family:var(--serif); color:var(--ink); line-height:1.65;
}
.urkunde h3{font-size:1.5rem; margin:0 0 1.2rem;}
.urkunde h4{font-size:1.05rem; margin:1.7rem 0 .5rem; font-family:var(--sans); font-weight:700; color:var(--gruppe,var(--petrol));}
.urkunde p{margin:.6rem 0;}
.urkunde-kopf{margin-bottom:1.3rem; padding-bottom:1rem; border-bottom:1px solid var(--line);}
.urkunde-kopf p{margin:.15rem 0; font-family:var(--sans); font-size:.92rem;}
.urkunde-leer{color:var(--ink-soft); font-style:italic; font-family:var(--sans); font-size:.88rem;}
.urkunde-liste{margin:.4rem 0 .9rem 1.3rem; padding:0;}
.urkunde-liste li{margin:.35rem 0;}
.urkunde-anhang-label{margin-top:1rem; margin-bottom:.2rem;}
.urkunde-unterschrift{margin-top:2.4rem;}
.urkunde-signaturen{display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2.2rem;}
.urkunde-linie{border-top:1px solid var(--ink); margin-bottom:.3rem; height:2.2rem;}
.urkunde-signaturen span{font-family:var(--sans); font-size:.78rem; color:var(--ink-soft);}
.urkunde-arzt{margin-top:2rem;}
.urkunde-rechtshinweis{margin-top:1.8rem;}
.urkunde-aktionen{
  position:sticky; bottom:0; z-index:10; margin-top:1.8rem;
  display:flex; gap:.7rem; flex-wrap:wrap; padding:1rem 1.3rem;
  background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-card); box-shadow:var(--shadow);
}
/* Beim Scrollen durch einen längeren Entwurf klebt die Leiste am unteren
   Bildschirmrand und würde die letzte, gerade durchlaufene Textzeile hart
   abschneiden. Ein Verlauf direkt darüber lässt den Text stattdessen
   ausblenden – betrifft nur die Bildschirmvorschau, die Leiste trägt
   ohnehin "no-print" und erscheint im Ausdruck nicht. */
.urkunde-aktionen::before{
  content:""; position:absolute; left:0; right:0; bottom:100%; height:1.6rem;
  background:linear-gradient(to bottom, transparent, var(--paper-card));
  pointer-events:none;
}
@media (max-width:640px){
  .urkunde{padding:1.4rem 1.2rem;}
  .urkunde-signaturen{grid-template-columns:1fr;}
}

/* ---------- Deckblatt (druckbares Titelblatt + Inhaltsverzeichnis) ---------- */
.deckblatt-titelblatt{
  text-align:center; padding:1.6rem 0 2.4rem; border-bottom:2px solid var(--petrol); margin-bottom:2.2rem;
}
.deckblatt-titelblatt .az{display:block; margin-bottom:1.1rem;}
.deckblatt-titelblatt h1{font-family:var(--serif); font-size:2.4rem; margin:0 0 .8rem;}
.deckblatt-name{font-family:var(--serif); font-size:1.25rem; color:var(--petrol-dark); margin:0 0 .35rem;}
.deckblatt-datum{font-size:.86rem; color:var(--ink-soft); margin:0;}
.deckblatt-toc{display:flex; flex-direction:column; gap:1.7rem;}
.deckblatt-gruppe h3{
  font-family:var(--mono); font-size:.76rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gruppe,var(--ink-soft)); margin:0 0 .6rem; padding-bottom:.4rem; border-bottom:2px solid var(--gruppe,var(--line));
}
.deckblatt-gruppe ul{list-style:none; margin:0; padding:0;}
.deckblatt-gruppe li{
  display:flex; align-items:baseline; gap:.7rem; padding:.42rem 0; border-bottom:1px dotted var(--line-soft); font-size:.92rem;
}
.deckblatt-symbol{width:1.1em; flex:none; text-align:center; font-weight:700;}
.deckblatt-symbol.fertig{color:var(--ok);}
.deckblatt-symbol.teilweise{color:var(--ochre);}
.deckblatt-symbol.leer{color:var(--ink-soft); font-weight:400;}
.deckblatt-symbol.ausgeblendet{color:var(--line); font-weight:400;}
.deckblatt-gruppe li:has(.deckblatt-symbol.ausgeblendet){opacity:.6;}
.deckblatt-titel{flex:1; font-weight:600;}
.deckblatt-status{color:var(--ink-soft); font-size:.84rem;}
@media print{
  .deckblatt-titelblatt{padding-top:1cm;}
  .deckblatt-gruppe{page-break-inside:avoid;}
}

/* ---------- Notfallkarte (kompakte Karte fürs Portemonnaie) ---------- */
.nur-print{display:none;}
.notfallkarte-blatt{display:flex; flex-direction:column; align-items:center; gap:.8rem; padding:1.6rem 0 3rem;}
.notfallkarte-karte{
  width:100%; max-width:340px; background:var(--paper-card); border:1px solid var(--line); border-radius:var(--radius-card);
  box-shadow:var(--shadow); padding:1.3rem 1.4rem; font-family:var(--sans);
}
.notfallkarte-kopf{
  font-family:var(--serif); font-weight:700; font-size:1.05rem; color:var(--danger);
  margin:0 0 .7rem; padding-bottom:.4rem; border-bottom:2px solid var(--danger);
}
.notfallkarte-karte p{margin:.32rem 0; font-size:.86rem; line-height:1.4; color:var(--ink);}
.notfallkarte-karte strong{color:var(--ink);}
.notfallkarte-label{
  margin-top:.7rem !important; font-weight:600; font-size:.7rem; text-transform:uppercase;
  letter-spacing:.05em; color:var(--ink-soft);
}
.notfallkarte-fuss{margin-top:.8rem !important; font-size:.7rem; color:var(--ink-soft); font-style:italic;}
.notfallkarte-hinweis{margin:0; font-size:.78rem; color:var(--ink-soft);}

@page{ size: A4 portrait; margin: 2cm 1.8cm; }

@media print{
  .aktenkopf, .formfuss, .no-print{display:none !important;}
  .nur-print{display:block;}
  body{background:#fff;}
  .leaf{max-width:none; padding:0;}
  .feld input, .feld textarea, .feld select{border:none; padding:.1rem 0; background:transparent;}
  .feldgruppe{border:none; box-shadow:none; padding:0;}
  a{color:inherit; text-decoration:none;}
  body.modus-urkunde .formkopf{display:none;}
  .urkunde{border:none; box-shadow:none; padding:0; margin:0;}

  /* Notfallkarte: bewusst klein und mit Schnittkante, statt die ganze
     A4-Seite zu füllen – gedacht zum Ausschneiden fürs Portemonnaie. */
  .notfallkarte-blatt{align-items:flex-start; padding:0;}
  .notfallkarte-karte{
    width:9.2cm; max-width:none; box-shadow:none; border:1px dashed var(--ink-soft); padding:.9cm;
    page-break-inside:avoid;
  }

  /* Notausgang: Bei Modulen mit Entwurfsfunktion darf niemals das rohe
     Formular (mit Ausfüllhilfen, Erklärungen, Ankreuzfeldern) gedruckt
     werden – auch nicht per Strg+P am Formular vorbei am Button.
     Das einzige druckbare Ziel ist der Entwurf (.urkunde). */
  body[data-hat-vorlage]:not(.modus-urkunde) #formular-root,
  body[data-hat-vorlage]:not(.modus-urkunde) .formkopf{display:none !important;}

  /* Keine abgeschnittenen Unterschriftenblöcke oder Übergangsseiten mitten im Satz */
  .urkunde h3, .urkunde h4{page-break-after:avoid;}
  .urkunde-kopf, .urkunde-unterschrift, .urkunde-arzt, .urkunde-rechtshinweis{page-break-inside:avoid;}
  .urkunde-signaturen{page-break-inside:avoid;}
}