/* theme.css — adaptives Dark-Theme (Default System, manuell via data-theme).
   Wird auf allen Mitglieder-Tools eingereiht, NICHT beim Embed-Widget. */

/* System-Dunkel (kein data-theme gesetzt) */
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:#EEF1F4; --ink-weich:#AAB4C0; --papier:#0E1116; --karte:#171C23;
    --linie:#2A313B; --linie-satt:#3A424E; --blau:#4C8DE0; --blau-tief:#2E6FC0;
    --blau-hell:#16233A; --gelb:#F7B500; --gelb-tief:#F7B500;
    --rot-hell:#3A1B18;
    --auf-blau:#14181F; --text-blau:#7FB0E6;
    --schatten:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
    --querlauf-schatten:rgba(255,255,255,.28);
    /* Sagt dem Browser, dass er seine EIGENEN Bedienelemente dunkel zeichnen soll:
       Kalender-Symbol im Datumsfeld, Auswahlpfeile, Bildlaufleisten. Ohne das bleibt
       etwa das Kalender-Symbol dunkelgrau auf dunklem Grund. */
    color-scheme: dark;
  }
}
/* Manuell dunkel */
:root[data-theme="dark"] {
  --ink:#EEF1F4; --ink-weich:#AAB4C0; --papier:#0E1116; --karte:#171C23;
  --linie:#2A313B; --linie-satt:#3A424E; --blau:#4C8DE0; --blau-tief:#2E6FC0;
  --blau-hell:#16233A; --gelb:#F7B500; --gelb-tief:#F7B500;
  --rot-hell:#3A1B18;
  --auf-blau:#14181F; --text-blau:#7FB0E6;
  --schatten:0 1px 2px rgba(0,0,0,.4), 0 6px 20px rgba(0,0,0,.35);
    --querlauf-schatten:rgba(255,255,255,.28);
  color-scheme: dark;
}
/* Manuell hell (überstimmt System-Dunkel) */
:root[data-theme="light"] {
  --ink:#14181F; --ink-weich:#4A525E; --papier:#EEF1F4; --karte:#FFFFFF;
  --linie:#D3DAE2; --linie-satt:#B7C1CC; --blau:#0B4DA2; --blau-tief:#08346D;
  --blau-hell:#E7EFF9; --gelb:#F7B500; --gelb-tief:#C88E00; --rot-hell:#FBEDEB;
  --auf-blau:#FFFFFF; --text-blau:#08346D;
  --querlauf-schatten:rgba(20,24,31,.30);
  color-scheme: light;
}

/**
 * Das Kopfband bleibt in BEIDEN Designs dunkelblau.
 *
 * Vorher nahm es --blau/--blau-tief, und die drehen im dunklen Design ins Helle
 * (#4C8DE0 statt #0B4DA2). Weisse Schrift auf hellem Blau kam damit auf 2,6:1 beim
 * Untertitel und 3,05:1 beim Abmelden-Knopf - beides unter der Lesbarkeitsgrenze von
 * 4,5:1. Am 20.08.2026 im Browser nachgemessen, nachdem der Nutzer schwer lesbare
 * Ueberschriften im Kopf gemeldet hatte.
 *
 * Ein dunkles Band traegt weisse Schrift in beiden Designs, und die Marke bleibt
 * dieselbe - genau dafuer sind eigene Band-Farben da statt der allgemeinen Blautoene.
 */
:root,
:root[data-theme="dark"],
:root[data-theme="light"] {
  --band-von:#08346D;
  --band-bis:#0B4DA2;
}

/* Chrome faerbt automatisch ausgefuellte Felder eigenmaechtig um (heller Grund,
   dunkle Schrift) — im dunklen Design liest man dann kaum, was man tippt. Der
   Innenschatten uebermalt die Autofill-Flaeche, -webkit-text-fill-color die Schrift. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--ink);
  -webkit-box-shadow: 0 0 0 1000px var(--karte) inset;
  box-shadow: 0 0 0 1000px var(--karte) inset;
  caret-color: var(--ink);
}

/* Toggle-Button (von theme.js erzeugt) */
.fp-theme-toggle{
  position:fixed; top:14px; right:14px; z-index:9999;
  /* Befund B125: er mass 40 x 40 px - auf JEDER der dreizehn Werkzeugseiten, obwohl
     die Regel fuer den eingehaengten Schalter weiter unten laengst 44 px nennt. Die
     beiden Regeln wiegen gleich schwer (je eine Klasse), und Astra bringt eine
     dritte mit; gemessen kam 40 heraus, gelesen haette man 44 erwartet. Deshalb steht
     die Zahl jetzt an EINER Stelle, in beiden Regeln derselbe Name. */
  width:var(--tippziel-hand,44px); height:var(--tippziel-hand,44px); display:grid; place-items:center;
  border-radius:999px; cursor:pointer;
  box-shadow:var(--schatten); transition:transform .15s var(--ease-out,ease), background-color .15s;
  /* Härtung gegen durchbleibende Theme-Styles. Astra stylt ALLE <button> global:
     padding:12px 24px + eigene line-height verzerren den Kreis (~50x40) und schieben
     das Icon aus der Mitte; background/color/border kommen aus Astras Button-Regel
     (var(--ast-global-color-0), ein Blau) und auch aus deren :hover. Daher setzen wir
     Fläche/Text/Rand mit !important (Astra selbst nutzt kein !important). */
  padding:0; margin:0; min-width:0; min-height:0; line-height:1; font:inherit;
  -webkit-appearance:none; appearance:none;
  background-color:var(--karte) !important; color:var(--ink) !important;
  border:1px solid var(--linie) !important;
}
.fp-theme-toggle:hover{ transform:translateY(-1px); background-color:var(--karte) !important; }
.fp-theme-toggle:focus-visible{ outline:2px solid var(--blau); outline-offset:2px; }
.fp-theme-toggle svg{ display:block; width:20px; height:20px; }

/* Unter die WP-Adminbar rücken (auf Seiten ohne Adminbar bleibt die Basis top:14px). */
.admin-bar .fp-theme-toggle{ top:44px; } /* Desktop-Adminbar 32px + 12px Abstand */
@media screen and (max-width:782px){
  .admin-bar .fp-theme-toggle{ top:58px; } /* Mobile-Adminbar 46px + 12px Abstand */
}

/* Im Kopf eingehängt (neben dem Menü-Button): schwebt nicht mehr, sondern läuft
   im Fluss der Kopfleiste mit — sonst läge er über dem Menü-Button. */
.fp-theme-toggle-im-kopf,
.admin-bar .fp-theme-toggle-im-kopf{
  position:static; top:auto; right:auto; z-index:auto;
  margin-inline-end:6px; align-self:center; box-shadow:none;
  /* 44px ist die Untergrenze fuer ein Tippziel. Schwebend am Rand hatte der Schalter
     viel Platz um sich, im Kopf steht er direkt neben dem Menue-Knopf - dort zaehlt
     seine eigene Flaeche. Am 20.08.2026 nachgemessen: er kam auf 40px. */
  width:var(--tippziel-hand,44px); height:var(--tippziel-hand,44px);
  /* Auf dem blauen Band sieht ein weisser Kreis wie ein Fremdkoerper aus. Der Schalter
     traegt hier dieselbe Form und dieselbe Kante wie der Menue-Knopf direkt daneben:
     durchsichtig, weisser Rand, 10px Radius. Das !important muss sein - die Regel
     oben setzt Flaeche und Rand selbst mit !important, um Astra abzuwehren. */
  border-radius:10px;
  background-color:transparent !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.45) !important;
}
.fp-theme-toggle-im-kopf:hover{ background-color:rgba(255,255,255,.12) !important; border-color:#fff !important; }
.fp-theme-toggle-im-kopf:focus-visible{ outline:2px solid var(--gelb); outline-offset:3px; }

/* Druck immer hell, Toggle ausblenden */
@media print{
  :root, :root[data-theme="dark"]{
    --ink:#14181F; --ink-weich:#4A525E; --papier:#FFFFFF; --karte:#FFFFFF;
    --linie:#D3DAE2; --blau:#0B4DA2; --blau-tief:#08346D; --blau-hell:#E7EFF9;
    --gelb-tief:#C88E00; --rot-hell:#FBEDEB;
    --auf-blau:#FFFFFF; --text-blau:#08346D;
  }
  .fp-theme-toggle{ display:none !important; }
  /* Theme-/WP-Chrome beim Drucken ausblenden. Site-Kopfzeile (Astra #masthead) und
     Footer (#colophon) liegen AUSSERHALB des Plugin-Markups, daher hier site-weit
     (theme.css wird auf allen Tool-Seiten geladen) statt je Tool. Behebt das
     Mitdrucken von Header/Footer in allen Druckvorschauen (Feedback R6). */
  #wpadminbar,
  #masthead, .site-header, .ast-above-header, .ast-below-header, .ast-mobile-header-wrap,
  #colophon, .site-footer, .ast-small-footer, #ast-scroll-top,
  .ast-sticky-header-active #masthead { display: none !important; }
}

/* WP-Seitentitel (Astra .entry-title) auf allen Tool-Seiten ausblenden — die
   Tools tragen ihren Kopf im blauen Band; der doppelte h1 war nur beim
   Online-Preisrechner (Seite 325) sichtbar geblieben. */
.entry-title{display:none!important}

/* ================= Demo-Konto: Wasserzeichen ================= */
/* Der Hinweis steht als Text im Markup (siehe _wasserzeichen.php und die Begruendung
   dort). Diese Regeln geben ihm nur seine Gestalt - faellt das Stylesheet aus, bleibt
   der Satz lesbar, und genau darum geht es. */

.fk-wasserzeichen {
    margin: 0 0 1rem;
    padding: .5rem .8rem;
    border: 2px solid var(--gelb-tief, #c99a00);
    border-radius: .4rem;
    background: color-mix(in srgb, var(--gelb, #f6c500) 18%, transparent);
    color: var(--ink, #14181f);
    font-family: var(--display, sans-serif);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    text-align: center;
}

@media print {
    /* Im Ausdruck oben auf jedem Blatt, und der Rahmen bleibt sichtbar, auch wenn der
       Browser Hintergruende weglaesst - deshalb ein Rahmen und keine Flaeche allein. */
    .fk-wasserzeichen {
        break-after: avoid;
        page-break-after: avoid;
        background: transparent;
        border-width: 2px;
    }
}