/* notaily Grundlage (Session 18, Fassung 2 nach einer Referenzseite, nicht übernommen, nur Prinzipien:
   kräftige geometrische Schrift, große runde Farbflächen, Pillen-Knöpfe mit Pfeil, weiße Karten auf getönten Flächen).
   Gemeinsam für Startseite, Testseite, Bestätigung, Impressum, Datenschutz.
   Farben, Abstände und Schrift als Variablen, damit B7 darauf aufbauen kann. Kein Designsystem.
   Dunkles Design seit Session 22m: html[data-thema=dunkel] (gesetzt im Kopf jeder Seite, Schalter aus /thema.js).
   Der Brief bleibt Papier: .blatt und weitere helle Inseln behalten die hellen Farben (Abschnitt "Inseln"). */

@font-face{font-family:"Figtree";src:url("/fonts/figtree-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/fonts/figtree-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("/fonts/figtree-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}

:root{
  /* Farben */
  --papier:#F3F4F7;        /* Seitengrund */
  --blatt:#FFFFFF;         /* Karten, Nachricht, Formulargruppen */
  --flaeche:#E8EBF2;       /* getönte Abschnittsfläche */
  --flaeche-marke:#E7E4FB; /* Fläche in Markenfarbe, Einstieg */
  --tinte:#1A2340;         /* Text */
  --tinte-2:#4E5774;       /* Nebentext */
  --titel:#141F4A;         /* Überschriften */
  --nacht:#141F4A;         /* dunkle Fläche am Seitenende */
  --linie:#DCE0E8;
  --feldrand:#B9BFCC;
  --marke:#3F31B5;         /* notaily Violett */
  --marke-dunkel:#32269A;
  --marke-hell:#ECEAFB;
  --marker:#FFE07A;        /* Textmarker: Werte aus dem Formular */
  --ok:#17704D;  --ok-grund:#E7F4EE;
  --achtung:#7A5200; --achtung-grund:#FFF5D6; --achtung-rand:#E9C766;
  --fehler:#A32015; --fehler-grund:#FDECEA;
  /* Session 22m: Rollen, die im dunklen Design anders aussehen. Hell gleich den bisherigen Werten. */
  --marke-schrift:#3F31B5;        /* Links und violetter Text */
  --marke-schrift-stark:#32269A;  /* Links beim Darüberfahren, gewählter heller Schalter */
  --marke-hell-2:#DCD8F8;         /* helle Markenfläche beim Darüberfahren */
  --marker-grund:#FFE07A;         /* Textmarker hinter Text außerhalb des Briefs */
  --platzhalter:#737A8C;
  --gefahr:#A32015; --gefahr-dunkel:#861A11;
  --ok-flaeche:#17704D;           /* gefüllte Fläche mit weißer Schrift */
  --fokus:#3F31B5;                /* Fokusrahmen */
  /* Lücken und Marker im Brief (Session 22n) */
  --luecke-grund:#FFF1B8; --luecke-voll:#FFE07A; --luecke-rand:#D9AE00; --luecke-text:#141F4A; --luecke-leer-text:#6B6340;
  --frei-rand:#9C95D9; --frei-text:#5E5A86; --anmerkung-grund:#FFFBEA; --achtung-strich:#E9A600; --luecke-fokus:rgba(63,49,181,.28); --leuchten:none;

  /* Schrift */
  --schrift:"Figtree",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --schrift-mono:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;

  /* Abstände und Formen */
  --a1:4px; --a2:8px; --a3:12px; --a4:16px; --a5:24px; --a6:32px; --a7:48px; --a8:64px;
  --rund-klein:10px; --rund:16px; --rund-gross:28px; --pille:999px;
  --breite:1080px; --breite-schmal:640px;
  --rand:max(16px,env(safe-area-inset-left,0px));
  --rand-r:max(16px,env(safe-area-inset-right,0px));

  color-scheme:light;
}

/* Dunkles Design (Session 22m): Nacht in Marineblau, Marke heller für Schrift, Brief bleibt Papier */
:root[data-thema=dunkel]{
  --papier:#0B1020;
  --blatt:#151B2F;
  --flaeche:#141B33;
  --flaeche-marke:#1D1948;
  --tinte:#DCE0EC;
  --tinte-2:#A1A9C3;
  --titel:#F3F4FA;
  --nacht:#251D66;
  --linie:#273050;
  --feldrand:#4B5577;
  --marke:#4F41D8;
  --marke-dunkel:#6A5DF0;
  --marke-hell:#252156;
  --marke-schrift:#ABA4FF;
  --marke-schrift-stark:#CBC6FF;
  --marke-hell-2:#322C70;
  --platzhalter:#8C94AE;
  --ok:#5BCB95; --ok-grund:#0F2A21; --ok-flaeche:#17704D;
  --achtung:#F1C45A; --achtung-grund:#2A2311; --achtung-rand:#6E561B;
  --fehler:#FF9585; --fehler-grund:#2F1513;
  --gefahr:#B8291C; --gefahr-dunkel:#D23A2C;
  --fokus:#ABA4FF;
  /* Leuchtmarker bei Nacht: was von dir kommt, leuchtet bernsteingelb */
  --luecke-grund:rgba(255,196,64,.07); --luecke-voll:rgba(255,196,64,.13); --luecke-rand:#E8B931; --luecke-text:#FFE38A; --luecke-leer-text:#D2C69A;
  --frei-rand:#8F86F0; --frei-text:#BDB7F5; --anmerkung-grund:rgba(255,214,90,.06); --achtung-strich:#F0A92B; --luecke-fokus:rgba(171,164,255,.6);
  --leuchten:drop-shadow(0 0 12px rgba(255,200,70,.40));
  --marker-grund:rgba(255,196,64,.34);
  color-scheme:dark;
}
/* Inseln: behalten im dunklen Design die hellen Farben (nur noch der Testmodus-Balken) */
:root[data-thema=dunkel] :where(.insel-hell,.testmodus){
  --papier:#F3F4F7; --blatt:#FFFFFF; --flaeche:#E8EBF2; --flaeche-marke:#E7E4FB;
  --tinte:#1A2340; --tinte-2:#4E5774; --titel:#141F4A; --nacht:#141F4A; --linie:#DCE0E8; --feldrand:#B9BFCC;
  --marke:#3F31B5; --marke-dunkel:#32269A; --marke-hell:#ECEAFB;
  --marke-schrift:#3F31B5; --marke-schrift-stark:#32269A; --marke-hell-2:#DCD8F8; --marker-grund:#FFE07A; --platzhalter:#737A8C;
  --ok:#17704D; --ok-grund:#E7F4EE; --achtung:#7A5200; --achtung-grund:#FFF5D6; --achtung-rand:#E9C766;
  --fehler:#A32015; --fehler-grund:#FDECEA; --gefahr:#A32015; --gefahr-dunkel:#861A11; --fokus:#3F31B5;
  --luecke-grund:#FFF1B8; --luecke-voll:#FFE07A; --luecke-rand:#D9AE00; --luecke-text:#141F4A; --luecke-leer-text:#6B6340;
  --frei-rand:#9C95D9; --frei-text:#5E5A86; --anmerkung-grund:#FFFBEA; --achtung-strich:#E9A600; --luecke-fokus:rgba(63,49,181,.28); --leuchten:none;
  color:var(--tinte);color-scheme:light
}
/* Ziffern in gelben Kreisen leuchten im Dunkeln wie die Marker (Session 22o) */
:root[data-thema=dunkel] .schritte li::before,:root[data-thema=dunkel] .ablauf li::before{background:var(--luecke-voll);color:var(--luecke-text);box-shadow:inset 0 0 0 1.5px var(--luecke-rand);filter:var(--leuchten)}
/* Nachtpapier (Session 22n): der Brief eine Spur heller als die Seite, feine Lichtkante oben, tiefer Schatten */
:root[data-thema=dunkel] .blatt{--blatt:#182039;--linie:#2A3456;border-color:rgba(255,255,255,.07);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 28px 64px -28px rgba(0,0,0,.85)}
:root[data-thema=dunkel] mark,:root[data-thema=dunkel] .f{color:var(--luecke-text);text-shadow:0 0 12px rgba(255,214,90,.35)}
/* Hauptknopf auf der Nachtfläche (Session 22o): dunkel mit Lichtkante, Pfeil bleibt gelb */
:root[data-thema=dunkel] .schluss .knopf{background:var(--papier);color:var(--titel);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),0 12px 32px -14px rgba(0,0,0,.7)}
:root[data-thema=dunkel] .schluss .knopf:hover{background:var(--blatt);color:var(--titel);box-shadow:inset 0 0 0 1px rgba(171,164,255,.45),0 0 24px -6px rgba(171,164,255,.35)}
:root[data-thema=dunkel] .randnotiz .probe{background:var(--luecke-voll);box-shadow:inset 0 -2px 0 var(--luecke-rand);filter:var(--leuchten)}
:root[data-thema=dunkel] input[type=date]{color-scheme:dark}
:root[data-thema=dunkel] .insel-hell input[type=date]{color-scheme:light}
/* Fokus auf dunklen Feldern sichtbar (außer Lücken im Brief, die haben ihren eigenen Rand) */
:root[data-thema=dunkel] :is(input,select,textarea):not(.luecke):focus{border-color:var(--fokus)}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--schrift);font-size:16.5px;line-height:1.6;
  background:var(--papier);color:var(--tinte);
  -webkit-font-smoothing:antialiased;min-height:100vh;
}
a{color:var(--marke-schrift);text-underline-offset:2px}
a:hover{color:var(--marke-schrift-stark)}
:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
h1,h2,h3{text-wrap:balance;letter-spacing:-.02em;line-height:1.15;color:var(--titel);font-weight:800}
[hidden]{display:none!important}

/* Behälter: nur seitlicher Rand, nie padding-Kurzschreibweise */
.wrap{width:100%;max-width:calc(var(--breite) + 2*16px);margin-inline:auto;padding-left:var(--rand);padding-right:var(--rand-r)}
.wrap.schmal{max-width:calc(var(--breite-schmal) + 2*16px)}

/* Kopf mit Bildmarke */
.kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--a3);min-height:68px}
.logo{display:inline-flex;align-items:center;gap:0;font-size:1.35rem;font-weight:800;letter-spacing:-.03em;color:var(--titel);text-decoration:none;line-height:1}
.logo::before{content:"";width:30px;height:30px;flex:none;margin-right:10px;background:url("/favicon.svg") center/contain no-repeat}
.logo span{color:var(--marke-schrift)}
.logo:hover{color:var(--titel)}
.kopf small,.kopf .neben{font-size:.9rem;color:var(--tinte-2)}
.kopf a.neben{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border:1.5px solid var(--marke);border-radius:var(--pille);font-weight:600;color:var(--marke-schrift);text-decoration:none;background:var(--blatt)}
.kopf a.neben:hover{background:var(--marke-hell)}

/* Fuß */
.fuss{display:flex;flex-wrap:wrap;gap:var(--a2) var(--a5);padding-block:var(--a5) var(--a6);margin-top:var(--a7);border-top:1px solid var(--linie);font-size:.9rem;color:var(--tinte-2)}
.fuss a{color:var(--tinte-2);text-decoration:none}
.fuss a:hover{color:var(--tinte);text-decoration:underline}
/* Link zur Vorschau Pro im Fuß (Session 22p): violett und halbfett, damit Pro auffindbar ist, ohne zweiten Hauptknopf */
.fuss a.pro-link{color:var(--marke-schrift);font-weight:600}
.fuss a.pro-link:hover{color:var(--marke-schrift-stark)}

/* Knöpfe: Pille, Hauptknopf mit Pfeil im Kreis */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:12px;
  min-height:54px;padding:0 10px 0 26px;border:0;border-radius:var(--pille);
  background:var(--marke);color:#fff;font:inherit;font-weight:700;font-size:1.04rem;
  text-decoration:none;cursor:pointer;transition:background .15s;white-space:nowrap
}
.knopf::after{
  content:"";width:34px;height:34px;flex:none;border-radius:50%;
  background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M4 10h11m-4.5-4.5L15 10l-4.5 4.5' fill='none' stroke='%233F31B5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/18px no-repeat
}
.knopf:hover{background:var(--marke-dunkel);color:#fff}
.knopf:focus-visible{outline:3px solid var(--marker);outline-offset:2px;box-shadow:0 0 0 2px var(--tinte)}
.knopf.laeuft::after,.knopf:disabled::after{display:none}
.knopf:disabled,.knopf.laeuft{padding-right:26px}
.knopf.zweit{background:transparent;color:var(--marke-schrift);border:1.5px solid var(--marke)}
.knopf.zweit{padding:0 26px}
.knopf.zweit::after{display:none}
.knopf.zweit:hover{background:var(--marke-hell);color:var(--marke-schrift-stark)}

/* Blatt: die Nachricht als Schriftstück */
.blatt{background:var(--blatt);border:1px solid var(--linie);border-radius:var(--rund);box-shadow:0 1px 0 var(--linie),0 18px 36px -24px rgba(20,31,74,.40)}

/* Textmarker für Werte aus dem Formular, ohne Umbruch innerhalb eines Werts */
mark,.f{background:linear-gradient(transparent 55%,var(--marker-grund) 55%);color:inherit;padding:0 1px;white-space:nowrap}

@media (max-width:400px){.knopf{font-size:.98rem;padding-left:20px;gap:10px}}
@media (max-width:359px){.kopf{gap:var(--a2)}.kopf a.neben{padding:0 12px;font-size:.85rem;white-space:nowrap}}

/* Schalter hell und dunkel (Session 22m): Sonne wird Mond, der Wechsel breitet sich als Kreis vom Schalter aus (/thema.js) */
.kopf .logo{margin-right:auto}
.thema{flex:none;position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1.5px solid var(--linie);border-radius:50%;
  background:var(--blatt);color:var(--titel);cursor:pointer;transition:border-color .2s,background-color .2s,transform .2s;-webkit-tap-highlight-color:transparent}
.thema:hover{border-color:var(--marke)}
.thema:active{transform:scale(.92)}
.thema svg{width:22px;height:22px;overflow:visible}
.thema .sonne,.thema .mond{transform-origin:12px 12px;transition:transform .55s cubic-bezier(.34,1.4,.64,1),opacity .3s ease}
.thema .strahlen{transform-origin:12px 12px;transition:transform .55s cubic-bezier(.65,0,.35,1)}
.thema .mond{transform:rotate(-70deg) scale(.4);opacity:0}
[data-thema=dunkel] .thema .sonne{transform:rotate(90deg) scale(.4);opacity:0}
[data-thema=dunkel] .thema .strahlen{transform:scale(.3)}
[data-thema=dunkel] .thema .mond{transform:none;opacity:1}
[data-thema=dunkel] .thema{box-shadow:0 0 0 4px rgba(171,164,255,.08),0 0 24px -6px rgba(171,164,255,.45)}
/* Kreis-Übergang mit View Transitions, ohne Unterstützung sanftes Überblenden */
::view-transition-old(root),::view-transition-new(root){animation:none;mix-blend-mode:normal}
::view-transition-old(root){z-index:1}
::view-transition-new(root){z-index:2}
.thema-blende,.thema-blende :not(.thema):not(.thema *),.thema-blende :not(.thema *)::before,.thema-blende :not(.thema *)::after{transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease!important}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:2s!important}.thema-blende *{transition:none!important}}

/* Nur für Bildschirmleser */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}