/* =============================================================================
   privatinso.com - Richtung "Begleitung" (Konzeptphase 2026-09)
   chrome.css: Tokens und Seitenrahmen (Akut-Leiste, Kopf, Navigation unten).

   Diese Datei laden ALLE Seiten, auch die noch nicht umgestellten Marketing-Seiten
   (Ratgeber, Rechtsseiten), die ihr eigenes Inline-CSS mit eigenen :root-Werten tragen.
   Deshalb setzen die Rahmen-Bausteine ihre Tokens noch einmal an sich selbst: So sehen
   Kopf und Leiste ueberall gleich aus, egal welche Werte die Seite darunter definiert.

   MOBIL ZUERST: Die Grundregeln gelten fuer 375 px. Der Desktop ist eine Ableitung
   ab 768 px (min-width). Kein JavaScript entscheidet ueber das Layout.

   Was gilt und warum: docs/design/konzept/begleitung/system.md.
   Waechter: apps/common/tests/test_designsystem.py.
   ========================================================================== */

:root,.akut,.site-head,.bottom-nav,.pi-feedback-ui{
  /* Palette: warmes Papier, tiefes Kieferngruen, das Gelb der Marke nur als Marker.
     Grosse Flaechen hell und wenig gesaettigt (Valdez & Mehrabian 1994; Seckler 2015). */
  --paper:#FBF7F0;
  --white:#FFFFFF;
  --sage:#E6EEE6;
  --ink:#1B2B24;
  --ink-900:#174534;
  --body-ink:#33413A;
  --grey:#5F6B64;
  --grey-dark:#768178;
  --body-dark:#DCE5DE;
  --pine:#1F5A44;
  --signal:#EDE88D;
  --line:#D8D1C2;
  --hair:rgba(27,43,36,.14);
  --hair-dark:#2B5A47;
  --hair-dark-2:#3A6B57;

  /* Status: nie Farbe allein (Form + Wort + Farbe). Gruen und Rot sind in der Helligkeit
     getrennt (mindestens 1,7:1 auch bei Rot-Gruen-Schwaeche). */
  --green:#338E6B;
  --amber:#8A6412;
  --red:#8C2F22;
  --green-ink:#1D5C45;
  --amber-ink:#6B4F0D;
  --red-ink:#8C2F22;

  /* Schrift: Sprechen und Bedienen = Hanken Grotesk (humanistisch, kontrastarm),
     Titel = Newsreader (die Stimme eines Briefs). Keine Mono: Zahlen in Hanken, tabellarisch. */
  --display:'Hanken Grotesk', system-ui, sans-serif;
  --serif:'Newsreader', Georgia, 'Times New Roman', serif;
  --body:var(--display);
}
:root{
  /* Schriftstufen, mobil. Nichts Lesbares unter 16 px, nichts ueberhaupt unter 14 px. */
  --fs-h1:34px;
  --fs-h2:26px;
  --fs-h3:21px;
  --fs-read:19px;
  --fs-body:18px;
  --fs-small:16px;
  --fs-label:17px;
  --fs-btn:18px;
  --fs-eyebrow:15px;

  /* Abstands-Skala - die EINZIGE Quelle fuer Abstaende. */
  --sp-1:4px;
  --sp-2:8px;
  --sp-3:16px;
  --sp-4:24px;
  --sp-5:32px;
  --sp-6:48px;
  --sp-7:72px;

  /* Vertikaler Rhythmus: je Ueberschriften-Ebene GENAU EIN Abstand nach unten. */
  --gap-h1:var(--sp-3);
  --gap-h2:var(--sp-3);
  --gap-h3:var(--sp-2);
  --gap-h4:var(--sp-2);
  --gap-section:var(--sp-6);
  --gap-eyebrow:var(--sp-2);
  --gap-text:var(--sp-3);
  --gap-card:var(--sp-3);

  /* Form: weiche Ecken. Rund liest sich als zugewandt, eckig als hart (Jiang et al. 2016). */
  --r:16px;
  --r-s:12px;
  --r-pill:999px;

  /* Raster und Touch */
  --content:1160px;
  --edge:20px;
  --tap:48px;
  --tap-primary:56px;
  --nav-h:64px;

  --ease:cubic-bezier(.2,.7,.2,1);
}
@media (min-width:768px){
  :root{
    --fs-h1:clamp(40px, 4.2vw, 58px);
    --fs-h2:clamp(30px, 3.2vw, 42px);
    --fs-h3:24px;
    --fs-read:20px;
    --edge:clamp(28px, 4vw, 56px);
    --gap-h1:var(--sp-4);
    --gap-section:var(--sp-7);
    --gap-card:var(--sp-4);
  }
}

/* ------------------------------------------------------------ Akut-Leiste
   Wer mit gepfaendetem Konto kommt, braucht einen anderen ersten Schritt. Mobil eine
   Zeile, die ganze Leiste ist das Ziel (44 px); am Desktop der volle Satz. Ruhig in
   Salbei statt alarmierend: Furcht ohne Ausweg hilft nicht (Tannenbaum 2015). */
.akut{background:var(--sage);color:var(--ink);}
.akut a{box-sizing:border-box;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  max-width:var(--content);margin:0 auto;min-height:44px;padding:6px var(--edge);
  font-family:var(--display);font-weight:500;font-size:16px;line-height:1.3;color:var(--ink);text-decoration:none;}
.akut b{flex:0 0 auto;font-weight:700;color:var(--pine);white-space:nowrap;
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;}
.akut a:hover b,.akut a:active b{color:var(--ink);}
.akut a:focus-visible{outline:3px solid var(--pine);outline-offset:-4px;}
.akut .ak-lang{display:none;}
@media (min-width:768px){
  .akut a{justify-content:flex-start;min-height:40px;}
  .akut .ak-lang{display:inline;}
  .akut .ak-kurz{display:none;}
}

/* ------------------------------------------------------------------ Kopf
   Logo links, Anmelden rechts, Navigation am Desktop oben, mobil unten: prototypische
   Positionen (Roth 2010). Abgrenzung gehoert in Farbe, Schrift und Ton, nicht hierhin. */
.site-head{background:var(--paper);border-bottom:1px solid var(--line);}
.site-head .sh-row{box-sizing:border-box;max-width:var(--content);margin:0 auto;padding:0 var(--edge);
  min-height:56px;display:flex;align-items:center;gap:var(--sp-3);}
.sh-logo,.brand{display:inline-flex;align-items:center;gap:10px;min-height:44px;flex:0 0 auto;
  color:var(--ink);text-decoration:none;}
/* Logo-Satz 24.09.2026: logo-light.svg bringt Bildmarke UND Wortmarke mit (371 x 64).
   34 px hoch sind mobil rund 197 px breit - Platz genug neben "Anmelden" auch bei 320 px. */
.brand-logo{height:34px;width:auto;display:block;flex:0 0 auto;}
.site-head .sh-links{display:none;}
.site-head .sh-cta{margin-inline-start:auto;display:flex;align-items:center;gap:var(--sp-3);}
.site-head .sh-signin{display:inline-flex;align-items:center;min-height:44px;padding:0 2px;
  font-family:var(--display);font-weight:600;font-size:17px;color:var(--pine);
  text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px;}
.site-head .sh-signin:hover,.site-head .sh-signin:active,.site-head .sh-signin.on{color:var(--ink);}
.site-head .sh-btn{display:none;}
.site-head a:focus-visible{outline:3px solid var(--pine);outline-offset:3px;border-radius:6px;}

@media (min-width:768px){
  .site-head{position:sticky;top:0;z-index:50;}
  .site-head .sh-row{min-height:72px;gap:var(--sp-5);flex-wrap:wrap;}
  .brand-logo{height:40px;}
  .site-head .sh-links{display:flex;flex-wrap:wrap;gap:var(--sp-1) var(--sp-4);}
  .site-head .sh-links a{display:inline-flex;align-items:center;min-height:44px;
    font-family:var(--display);font-weight:500;font-size:17px;line-height:1.2;color:var(--body-ink);
    text-decoration:none;border-bottom:2px solid transparent;}
  .site-head .sh-links a:hover,.site-head .sh-links a.on{color:var(--ink);border-bottom-color:var(--pine);}
  .site-head .sh-btn{display:inline-flex;align-items:center;gap:var(--sp-2);min-height:46px;padding:0 20px;
    background:var(--pine);color:var(--white);border-radius:var(--r-s);
    font-family:var(--display);font-weight:600;font-size:17px;line-height:1;text-decoration:none;}
  .site-head .sh-btn:hover,.site-head .sh-btn:active{background:var(--ink-900);}
  /* Aufklappmenue unter "FAQs": Hover UND Tastatur-Fokus, kein JavaScript (CSP). */
  .site-head .sh-drop{position:relative;display:inline-flex;}
  .site-head .sh-menu{position:absolute;top:100%;left:-12px;z-index:60;display:none;min-width:290px;
    flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-s);padding:var(--sp-2);}
  /* Wie .app-drop (#84): Tastatur-Fokus haelt das Menue offen, ein Mausklick nicht. */
  .site-head .sh-drop:hover .sh-menu,.site-head .sh-drop:has(:focus-visible) .sh-menu{display:flex;}
  .site-head .sh-menu a{min-height:44px;padding:0 12px;border-bottom:0;border-radius:8px;font-size:16px;}
  .site-head .sh-menu a:hover,.site-head .sh-menu a:focus{background:var(--sage);border-bottom:0;}
}

/* ------------------------------------------------ Navigation unten (mobil)
   Daumenreichweite, vier Wortziele: Aeltere finden Woerter schneller als Icons (Yu 2022).
   Hell statt dunkel: dunkel auf hell liest sich besser, gerade klein (Piepenbrock 2013). */
.bottom-nav{position:fixed;left:0;right:0;bottom:0;z-index:70;display:flex;gap:4px;background:var(--white);
  border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom));}
.bottom-nav-spacer{display:block;height:calc(var(--nav-h) + 24px);}
.bottom-nav a,.bottom-nav button{box-sizing:border-box;flex:1 1 0;min-width:0;min-height:52px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:4px;
  background:transparent;border:0;border-radius:var(--r-s);cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:15px;line-height:1.15;letter-spacing:0;text-transform:none;
  color:var(--body-ink);text-decoration:none;hyphens:auto;-webkit-hyphens:auto;}
/* Aktiv: Flaeche + fetter + Unterstrich, also nie Farbe allein. */
.bottom-nav a.active{background:var(--sage);color:var(--ink);font-weight:700;
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;}
.bottom-nav a:active,.bottom-nav button:active{background:var(--sage);}
.bottom-nav a:focus-visible,.bottom-nav button:focus-visible{outline:3px solid var(--pine);outline-offset:-3px;}
.bottom-nav form{flex:1 1 0;min-width:0;display:flex;margin:0;}
.bottom-nav form button{flex:1 1 auto;}
@media (min-width:768px){
  .bottom-nav,.bottom-nav-spacer{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .site-head *,.bottom-nav *{transition:none !important;}
}

/* ------------------------------------------------------- Feedback-Widget
   Werkzeug der Fehlerjagd, kein Teil des Produkts - aber es steht auf JEDER Seite und
   darf deshalb nicht aus dem System fallen. Es stand bis zum Rollout A2 (18.09.2026) als
   eigener <style>-Block im Partial, weil die Marketing-Seiten app.css nicht laden. Sie
   laden aber alle chrome.css, also steht es jetzt hier: EIN Ort, eine Palette.

   Wie der uebrige Rahmen setzt es seine Tokens an sich selbst (Selektor .pi-feedback-ui
   oben), damit es auch auf den noch nicht umgestellten Seiten stimmt, die eigene
   :root-Werte mitbringen (Ratgeber, Kanzleien).

   Mobil zuerst: Der Grundzustand haelt Abstand zur Navigationsleiste unten; am Desktop
   faellt die Leiste weg, und der Knopf rueckt nach unten. Kein data-viewport, kein
   JavaScript entscheidet das. */
.pi-feedback-ui{font-family:var(--display);}
/* Feedback #70: z-index ueber jedem Overlay (.doc-modal 80, .foto-lupe 90) und der Leiste (70).
   Waechter: apps/feedback/tests/test_feedback.py test_feedback_liegt_ueber_jedem_overlay. */
#pi-feedback-fab{position:fixed;right:var(--sp-3);z-index:96;
  /* ueber der Navigationsleiste: sie ist --nav-h hoch, dazu ein Abstand */
  bottom:calc(var(--nav-h) + var(--sp-3) + env(safe-area-inset-bottom, 0px));
  min-height:var(--tap);padding:0 var(--sp-3);border:0;border-radius:var(--r-s);
  background:var(--pine);color:var(--white);cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:16px;line-height:1;
  letter-spacing:0;text-transform:none;}
#pi-feedback-fab:hover{background:var(--ink-900);}
#pi-feedback-fab:active{background:var(--ink-900);}
#pi-feedback-fab:focus-visible{outline:3px solid var(--pine);outline-offset:3px;}

#pi-feedback-panel{position:fixed;right:var(--sp-3);z-index:96;box-sizing:border-box;
  bottom:calc(var(--nav-h) + var(--tap) + var(--sp-4) + env(safe-area-inset-bottom, 0px));
  width:min(380px,calc(100vw - 2 * var(--sp-3)));max-height:70vh;overflow-y:auto;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:var(--sp-3);color:var(--body-ink);font-size:16px;line-height:1.5;}
.pi-feedback-head{display:flex;justify-content:space-between;align-items:center;
  gap:var(--sp-2);margin-bottom:var(--sp-1);}
.pi-feedback-head strong{font-family:var(--serif);font-weight:600;font-size:21px;
  line-height:1.2;color:var(--ink);}
#pi-feedback-close,#pi-feedback-chip-x{display:inline-flex;align-items:center;
  justify-content:center;min-width:44px;min-height:44px;border:0;background:none;
  border-radius:var(--r-s);font-size:22px;line-height:1;cursor:pointer;color:var(--body-ink);}
#pi-feedback-close:hover,#pi-feedback-chip-x:hover{background:var(--sage);}
#pi-feedback-close:focus-visible,#pi-feedback-chip-x:focus-visible{outline:3px solid var(--pine);
  outline-offset:-3px;}
#pi-feedback-chip-x{min-width:32px;min-height:32px;font-size:18px;}

/* Feld: Label darueber, Hilfetext darunter, nie ein Platzhalter (system.md § 7). */
.pi-feedback-label{display:block;font-family:var(--display);font-weight:600;font-size:17px;
  line-height:1.3;color:var(--ink);margin-bottom:var(--sp-1);}
.pi-feedback-hint{margin:0 0 var(--sp-2);font-size:16px;line-height:1.45;color:var(--grey);}
#pi-feedback-text{width:100%;box-sizing:border-box;resize:vertical;
  border:2px solid var(--grey-dark);border-radius:var(--r-s);background:var(--white);
  padding:10px 12px;font-family:var(--display);font-weight:400;font-size:16px;line-height:1.5;
  color:var(--body-ink);}
#pi-feedback-text:focus-visible{border-color:var(--pine);outline:3px solid var(--pine);
  outline-offset:1px;}

.pi-feedback-tools{display:flex;align-items:center;gap:var(--sp-2);margin:var(--sp-2) 0;
  flex-wrap:wrap;}
#pi-feedback-pick{min-height:var(--tap);padding:0 var(--sp-3);border:2px solid var(--pine);
  border-radius:var(--r-s);background:var(--white);color:var(--pine);cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:16px;line-height:1;
  letter-spacing:0;text-transform:none;}
#pi-feedback-pick:hover,#pi-feedback-pick:active{background:var(--sage);}
#pi-feedback-pick:focus-visible{outline:3px solid var(--pine);outline-offset:2px;}
#pi-feedback-chip{display:inline-flex;align-items:center;gap:var(--sp-1);
  background:var(--sage);border:1px solid var(--grey-dark);border-radius:var(--r-pill);
  padding:3px 4px 3px 12px;font-size:15px;line-height:1.3;color:var(--ink);max-width:100%;}
/* Der ID-Selektor oben schlaegt die [hidden]-Regel des Browsers - ohne diese
   Zeile blieb die Pille stehen, obwohl widget.js sie ausblendet (Feedback #18). */
#pi-feedback-chip[hidden]{display:none;}
#pi-feedback-chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px;}

/* Status: nie Farbe allein. widget.js setzt nur die Klasse ok oder err, das Zeichen
   davor kommt aus dem CSS - so bleibt die Meldung auch ohne Farbsehen eindeutig. */
#pi-feedback-status{min-height:1em;margin:var(--sp-1) 0 var(--sp-2);font-size:16px;
  line-height:1.45;color:var(--body-ink);}
#pi-feedback-status.ok,#pi-feedback-status.err{display:block;font-weight:600;
  border-left:3px solid currentColor;padding:4px 0 4px 10px;}
#pi-feedback-status.ok{color:var(--green-ink);}
#pi-feedback-status.err{color:var(--red-ink);}
#pi-feedback-status.ok::before{content:"\2713\00a0";}
#pi-feedback-status.err::before{content:"\0021\00a0";}

#pi-feedback-send{width:100%;min-height:var(--tap-primary);padding:0 var(--sp-3);border:0;
  border-radius:var(--r-s);background:var(--pine);color:var(--white);cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:18px;line-height:1;
  letter-spacing:0;text-transform:none;}
#pi-feedback-send:hover,#pi-feedback-send:active{background:var(--ink-900);}
#pi-feedback-send:focus-visible{outline:3px solid var(--pine);outline-offset:2px;}
/* Deaktiviert: grau statt durchscheinend, bleibt lesbar. */
#pi-feedback-send:disabled{background:var(--paper);color:var(--grey);
  box-shadow:inset 0 0 0 2px var(--line);cursor:default;}

/* Markierte Stelle: hier ist Gelb richtig, es ist genau ein Markierstift. */
#pi-feedback-hl{position:fixed;z-index:95;pointer-events:none;
  border:2px solid var(--pine);border-radius:var(--r-s);background:rgba(237,232,141,.35);}

.pi-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
  white-space:nowrap;}

@media (min-width:768px){
  /* Am Desktop gibt es die Navigationsleiste unten nicht, der Knopf rueckt nach unten. */
  #pi-feedback-fab{bottom:var(--sp-3);}
  #pi-feedback-panel{bottom:calc(var(--tap) + var(--sp-4));}
}
@media print{
  #pi-feedback,#pi-feedback-hl{display:none;}
}