/* ============================================================
   BCR · Designsystem — Bianka Claus-Riedel Buchhaltungsbüro
   Geteilte Tokens & Komponenten für Webseite, Dashboard, Portal
   ============================================================ */

/* Lokal gehostete Schriften (DSGVO: keine Google-Fonts-CDN, kein IP-Transfer) */
/* Geist latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/Geist-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist latin */
/* IBM Plex Sans (SIL OFL, lokal ausgeliefert): die Arbeitsschrift -
   Fliesstext, Bedienelemente, Dashboard und Portal. Variable Schrift
   (wght 100-700), rational und leicht schmal laufend; die Grotesk der
   Systeme-Rationalitaet der Sechziger. Vorgabe 11.08.2026. */
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(fonts/IBMPlexSans-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 100 700;
  font-display: swap;
  src: url(fonts/IBMPlexSans-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/Geist-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Geist Mono latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/GeistMono-latin-ext.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Geist Mono latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(fonts/GeistMono-latin.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* — Akzent (Marineblau, abgeleitet vom BBI-Logo) — als ein Block, leicht austauschbar — */
  --accent:        oklch(0.40 0.085 256);
  --accent-deep:   oklch(0.32 0.072 256);
  --accent-hover:  oklch(0.36 0.082 256);
  --accent-soft:   oklch(0.95 0.022 256);
  --accent-tint:   oklch(0.975 0.013 256);
  --accent-ring:   oklch(0.40 0.085 256 / 0.30);
  /* Silber (für „I" im Monogramm & feine Akzente) */
  --silver-1:      oklch(0.93 0.003 256);
  --silver-2:      oklch(0.78 0.006 256);
  --silver-3:      oklch(0.62 0.008 256);

  /* — Neutrale, warme Tonleiter — */
  --bg:        oklch(0.975 0.004 95);
  --bg-2:      oklch(0.962 0.005 95);
  --surface:   #ffffff;
  --surface-2: oklch(0.99 0.003 95);

  --ink:    oklch(0.255 0.008 165);
  --ink-2:  oklch(0.46 0.008 165);
  --ink-3:  oklch(0.62 0.007 160);
  --ink-4:  oklch(0.74 0.006 155);

  --line:     oklch(0.92 0.004 150);
  --line-2:   oklch(0.95 0.004 150);
  --line-strong: oklch(0.88 0.005 150);

  /* — Statusfarben (gedeckt) — */
  --success:      oklch(0.58 0.07 155);
  --success-soft: oklch(0.95 0.03 155);
  --warning:      oklch(0.68 0.10 75);
  --warning-soft: oklch(0.95 0.04 80);
  --danger:       oklch(0.58 0.11 28);
  --danger-soft:  oklch(0.95 0.035 30);
  --info:         oklch(0.58 0.07 245);
  --info-soft:    oklch(0.95 0.03 245);

  /* — Radien (großzügig) — */
  --r-xs: 8px;
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 28px;
  --r-2xl: 36px;
  --r-3xl: 48px;
  --r-pill: 999px;

  /* — Schatten (sehr weich, mehrschichtig) — */
  --shadow-xs: 0 1px 2px oklch(0.4 0.02 160 / 0.04), 0 1px 1px oklch(0.4 0.02 160 / 0.03);
  --shadow-sm: 0 1px 2px oklch(0.4 0.02 160 / 0.04), 0 4px 12px oklch(0.4 0.02 160 / 0.05);
  --shadow-md: 0 2px 4px oklch(0.4 0.02 160 / 0.04), 0 8px 24px oklch(0.4 0.02 160 / 0.07);
  --shadow-lg: 0 4px 8px oklch(0.4 0.02 160 / 0.04), 0 18px 48px oklch(0.4 0.02 160 / 0.10);
  --shadow-xl: 0 8px 16px oklch(0.4 0.02 160 / 0.05), 0 32px 80px oklch(0.4 0.02 160 / 0.13);
  --shadow-float: 0 24px 70px -20px oklch(0.4 0.03 160 / 0.22);

  /* — Glas — */
  --glass-bg: oklch(1 0 0 / 0.72);
  --glass-border: oklch(1 0 0 / 0.6);
  --glass-blur: blur(24px) saturate(180%);

  /* — Typografie — */
  /* Helvetica Neue zuerst. Sie ist auf macOS und iOS vorhanden, auf
     Windows und Android nicht - dort greift das mitgelieferte Geist,
     damit die Seite überall dieselbe Anmutung behält. Arial ist die
     letzte Rückfallebene mit sehr ähnlicher Breite. */
  --font: 'IBM Plex Sans', 'Helvetica Neue', Helvetica, 'Geist', Arial, sans-serif;
  --mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* — Layout — */
  --maxw: 1200px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.4, 0, 0.2, 1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  font-size: 1.0625rem;
  line-height: 1.65;
  font-weight: 400;
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5 {
  margin: 0;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
img { max-width: 100%; display: block; }

.mono { font-family: var(--mono); font-feature-settings: 'tnum' 1; letter-spacing: -0.02em; }
.tnum { font-variant-numeric: tabular-nums; }

/* — Eyebrow / Label — */
.eyebrow {
  font-size: 0.7812rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-deep);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-size: 0.9688rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding: 13px 24px;
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  white-space: nowrap;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease),
              background .25s var(--ease-soft), border-color .25s var(--ease-soft),
              color .25s var(--ease-soft);
  will-change: transform;
}
.btn:active { transform: scale(0.975); }
.btn svg { width: 17px; height: 17px; }

.btn-primary {
  background: var(--ink);
  color: var(--surface);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: oklch(0.32 0.01 165); transform: translateY(-1.5px); box-shadow: var(--shadow-md); }

.btn-accent {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 6px 18px -6px var(--accent-ring);
}
.btn-accent:hover { background: var(--accent-hover); transform: translateY(-1.5px); box-shadow: 0 12px 28px -8px var(--accent-ring); }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: var(--surface); border-color: var(--ink-3); transform: translateY(-1.5px); box-shadow: var(--shadow-sm); }

.btn-soft {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line);
  box-shadow: var(--shadow-xs);
}
.btn-soft:hover { border-color: var(--ink-4); transform: translateY(-1.5px); box-shadow: var(--shadow-sm); }

.btn-lg { padding: 16px 30px; font-size: 1.0312rem; }
.btn-sm { padding: 9px 16px; font-size: 0.875rem; }
.btn-block { width: 100%; }

/* Icon-Button */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border-radius: var(--r-pill);
  background: var(--surface);
  border: 1px solid var(--line);
  color: var(--ink-2);
  transition: color .2s var(--ease-soft), border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft);
}
.icon-btn:hover { color: var(--ink); border-color: var(--ink-4); box-shadow: var(--shadow-sm); }
.icon-btn svg { width: 19px; height: 19px; }

/* ============================================================
   Cards
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
}
.card-pad { padding: 32px; }

.card-hover {
  transition: transform .18s var(--ease), box-shadow .18s var(--ease), border-color .18s var(--ease-soft);
}
.card-hover:hover { box-shadow: var(--shadow-lg); border-color: var(--line-2); }

.glass {
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
}

/* ============================================================
   Badges / Status
   ============================================================ */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.7812rem; font-weight: 500; letter-spacing: -0.005em;
  padding: 5px 11px; border-radius: var(--r-pill);
  background: var(--bg-2); color: var(--ink-2);
  border: 1px solid var(--line);
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge-success { background: var(--success-soft); color: var(--success); border-color: transparent; }
.badge-warning { background: var(--warning-soft); color: oklch(0.5 0.1 70); border-color: transparent; }
.badge-danger  { background: var(--danger-soft);  color: var(--danger);  border-color: transparent; }
.badge-info    { background: var(--info-soft);    color: var(--info);    border-color: transparent; }
.badge-accent  { background: var(--accent-soft);  color: var(--accent-deep); border-color: transparent; }

/* ============================================================
   Form-Felder
   ============================================================ */
.field { display: flex; flex-direction: column; gap: 8px; }
.field label { font-size: 0.875rem; font-weight: 500; color: var(--ink-2); letter-spacing: -0.005em; }
.input, .textarea, .select {
  font-family: inherit; font-size: 0.9688rem; color: var(--ink);
  background: var(--surface-2);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  width: 100%;
  transition: border-color .2s var(--ease-soft), box-shadow .2s var(--ease-soft), background .2s var(--ease-soft);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-4); }
.input:focus, .textarea:focus, .select:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--accent-ring);
}
.textarea { resize: vertical; min-height: 120px; line-height: 1.6; }
.field.invalid .input, .field.invalid .textarea, .field.invalid .select { border-color: var(--danger); }
.field-error { font-size: 0.8125rem; color: var(--danger); min-height: 0; }

/* Checkbox */
.checkbox { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: 0.9062rem; color: var(--ink-2); line-height: 1.5; }
.checkbox input { position: absolute; opacity: 0; }
.checkbox .box {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  display: grid; place-items: center; transition: background .2s var(--ease-soft), border-color .2s var(--ease-soft); margin-top: 1px;
}
.checkbox .box svg { width: 13px; height: 13px; color: #fff; opacity: 0; transform: scale(0.9); transition: opacity .16s var(--ease), transform .16s var(--ease); }
.checkbox input:checked + .box { background: var(--accent); border-color: var(--accent); }
.checkbox input:checked + .box svg { opacity: 1; transform: scale(1); }
.checkbox input:focus-visible + .box { box-shadow: 0 0 0 4px var(--accent-ring); }

/* ============================================================
   Utility
   ============================================================ */
.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 28px; }
/* Oben und unten nicht gleich: die Ueberschrift bringt oben ihren eigenen
   Abstand mit, dadurch wirkt ein symmetrisch gepolsterter Abschnitt
   kopflastig. Rund acht Prozent mehr unten gleichen das aus. */
.section { padding: clamp(72px, 11vw, 140px) 0 clamp(78px, 11.9vw, 152px); }
.divider { height: 1px; background: var(--line); border: 0; margin: 0; }
.muted { color: var(--ink-2); }
.center { text-align: center; }

/* Bild-Platzhalter */
.ph {
  position: relative; overflow: hidden;
  background:
    repeating-linear-gradient(135deg, oklch(0.95 0.004 150) 0 11px, oklch(0.93 0.005 150) 11px 22px);
  display: grid; place-items: center;
  color: var(--ink-3);
}
.ph span {
  font-family: var(--mono); font-size: 0.7188rem; letter-spacing: 0.04em;
  text-transform: uppercase; padding: 6px 12px;
  background: oklch(1 0 0 / 0.7); border-radius: var(--r-pill);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Scroll-Reveal */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
@media print { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } }

::selection { background: var(--accent-soft); color: var(--accent-deep); }

/* Schmale Scrollbar */
.scroll-thin::-webkit-scrollbar { width: 8px; height: 8px; }
.scroll-thin::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 99px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }

/* ===== Barrierefreiheit (BFSG · BITV 2.0 · WCAG 2.1 AA) ===== */
.skip-link {
  position: fixed; top: 10px; left: 10px; z-index: 100001;
  background: var(--accent); color: #fff; padding: 12px 20px;
  border-radius: 12px; font-weight: 600; font-size: 0.9375rem; text-decoration: none;
  box-shadow: 0 10px 28px -8px var(--accent-ring);
  transform: translateY(-180%); transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translateY(0); outline: 3px solid #fff; outline-offset: 2px; }
/* Sichtbarer Tastatur-Fokus auf der gesamten Seite */
:focus-visible { outline: 3px solid var(--accent-ring); outline-offset: 2px; }
a:focus-visible, button:focus-visible { outline-offset: 3px; }
main:focus { outline: none; }
/* Reduzierte Bewegung respektieren (ganze Seite) */
/* Reduzierte Bewegung heisst sanfter, nicht aus: Ortswechsel und
   Dauerschleifen entfallen, Deckkraft und Farbe bleiben - sie tragen
   Bedeutung (Fokus, Zustand, Ein- und Ausblenden). */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
  /* Dauerschleifen ganz abschalten */
  .float-a, .float-c, .aurora .a1, .aurora .a2, .aurora .a3,
  .brand-logo, .hero-video-frame::after, .call-fab .call-btn svg,
  .pc-progress-bar i, .mini-chart .bar {
    animation: none !important;
  }
  /* Bewegung raus, Ueberblendung bleibt */
  .reveal { transform: none !important; transition: opacity .2s ease !important; }
  .btn:hover, .btn:active, .card-hover:hover { transform: none !important; }
}

/* ============================================================================
   Gestaltungsebene nach Apples Entwurfsgrundsätzen
   ----------------------------------------------------------------------------
   Diese Datei liegt unter allen drei Oberflächen — Website, E-Akte (Dashboard)
   und Mandantenportal. Was hier steht, gilt daher überall gleich; es gibt
   bewusst keine drei Einzellösungen.

   Vier Bereiche:
     1. Bewegung  — Kurven und Zeiten, abgeleitet aus Dämpfung und Ansprechzeit
     2. Schrift   — Laufweite und Zeilenabstand hängen an der Größe, nicht fest
     3. Material  — Glasflächen in drei Stärken, Gewicht zeigt Rangordnung
     4. Zugang    — weniger Bewegung, weniger Transparenz, mehr Kontrast
   ============================================================================ */

:root {
  /* ---- 1. Bewegung ----------------------------------------------------
     Apple beschreibt Federn über Dämpfung und Ansprechzeit statt über
     Masse und Steifigkeit. Auf CSS übertragen:

       Dämpfung 1,0 (kein Überschwingen) -> --ease-standard
       Dämpfung 0,8 (leichtes Überschwingen, nur nach einer Wischgeste
                     mit Schwung) -> --ease-momentum

     Die Zeiten entsprechen der Ansprechzeit, nicht einer Laufzeit. */
  --ease-standard: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-momentum: cubic-bezier(0.34, 1.32, 0.64, 1);
  --t-press:    100ms;   /* Druck-Rückmeldung */
  --t-quick:    180ms;   /* Hinweisfähnchen, kleine Aufklapper */
  --t-standard: 240ms;   /* Auswahllisten, Umschalter */
  --t-sheet:    340ms;   /* Schubladen, Blätter, Dialoge */

  /* ---- 2. Schrift -----------------------------------------------------
     Laufweite ist größenabhängig: große Schrift wirkt zu locker und wird
     enger gestellt, kleine Schrift braucht etwas Luft. Ein fester Wert
     für alle Größen ist an irgendeiner Stelle immer falsch. */
  --track-display: -0.03em;   /* ab etwa 40px */
  --track-title:   -0.02em;   /* 24-40px      */
  --track-head:    -0.01em;   /* 18-24px      */
  --track-body:     0em;      /* Fließtext    */
  --track-small:    0.005em;  /* unter 13px   */
  --track-label:    0.08em;   /* Versalien-Beschriftungen */

  --leading-display: 1.05;
  --leading-title:   1.2;
  --leading-body:    1.6;
  --leading-dense:   1.4;     /* Tabellen, Listen in der E-Akte */

  /* ---- 3. Material ----------------------------------------------------
     Größere Flächen wirken dicker: mehr Unschärfe, tieferer Schatten.
     Dunkler und schwerer trennt Bereiche, leichter hebt Bedienelemente. */
  --mat-structural-bg:    oklch(1 0 0 / 0.78);   /* Kopf- und Seitenleisten */
  --mat-structural-blur:  blur(18px) saturate(160%);
  --mat-floating-bg:      oklch(1 0 0 / 0.72);   /* Blätter, Aufklapper     */
  --mat-floating-blur:    blur(28px) saturate(180%);
  --mat-control-bg:       oklch(1 0 0 / 0.86);   /* Chips, Knöpfe           */
  --mat-control-blur:     blur(10px) saturate(140%);
  --mat-edge:             oklch(1 0 0 / 0.7);    /* Lichtkante oben         */
}

/* ---- 1. Bewegung: Druck-Rückmeldung auf allen drei Oberflächen ----------
   Rückmeldung gehört auf das Drücken, nicht auf das Loslassen. Ohne sie
   wirkt eine Oberfläche tot. 0,97 ist spürbar, ohne zu wackeln. */
.btn:active,
.chip:active, .tb-btn:active, .qa:active, .ra-btn:active,
.nav-item:active, .side-link:active, .dk-x:active,
.pt-chip:active, .pt-tile:active, .pt-nav a:active,
.wz-dot:active, .topic-chip:active, .icon-btn:active {
  transform: scale(0.97);
  transition: transform var(--t-press) var(--ease-standard);
}

/* ---- 2. Schrift: Vorgaben je Ebene -------------------------------------
   Die Seiten setzen ihre Größen weiterhin selbst. Diese Regeln greifen
   dort, wo keine eigene Angabe steht — und binden Laufweite und
   Zeilenabstand an die Größe, statt beides frei zu lassen. */
h1 { line-height: var(--leading-display); letter-spacing: var(--track-display); }
h2 { line-height: var(--leading-title);   letter-spacing: var(--track-title); }
h3 { line-height: var(--leading-title);   letter-spacing: var(--track-head); }
h4, h5, h6 { line-height: var(--leading-dense); letter-spacing: var(--track-head); }
p, li, td { letter-spacing: var(--track-body); }
small, .muted small, figcaption { letter-spacing: var(--track-small); }

/* Versalien-Beschriftungen brauchen deutlich mehr Laufweite, sonst
   verkleben die Buchstaben. */
.eyebrow, .tb-label, .pt-label, .kpi-label, .bl-bar-title, .bl-toc-title {
  letter-spacing: var(--track-label);
}

/* Ziffern in Tabellen und Beträgen laufen sonst unterschiedlich breit und
   die Spalten zappeln beim Aktualisieren. */
.tbl td, .tbl th, .kpi-value, .inv-total, .pt-amount, .mono, [class*="-betrag"] {
  font-variant-numeric: tabular-nums;
}

/* ---- 3. Material: drei Stärken ----------------------------------------- */
.mat-structural {
  background: var(--mat-structural-bg);
  -webkit-backdrop-filter: var(--mat-structural-blur);
  backdrop-filter: var(--mat-structural-blur);
}
.mat-floating {
  background: var(--mat-floating-bg);
  -webkit-backdrop-filter: var(--mat-floating-blur);
  backdrop-filter: var(--mat-floating-blur);
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--mat-edge);
}
/* Helles Glas auf hellem Glas ist unlesbar. Die innere Fläche wird
   deshalb deckend. */
.glass .glass, .mat-floating .mat-floating, .mat-structural .mat-floating {
  background: var(--surface);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---- 3b. Scroll-Kante statt harter Trennlinie --------------------------
   Unter schwebender Bedienleiste keine 1px-Linie, sondern ein weicher
   Verlauf — sichtbar nur dort, wo Inhalt tatsächlich darunterläuft. */
.scroll-edge { position: relative; }
.scroll-edge::after {
  content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px;
  background: linear-gradient(to bottom, oklch(0.4 0.02 160 / 0.055), transparent);
  pointer-events: none;
}

/* ---- 4. Zugang --------------------------------------------------------- */

/* Weniger Transparenz: Glas wird deckend, Unschärfe entfällt. Ohne diese
   Regel bleibt eine Kopfleiste durchscheinend, obwohl das System das
   Gegenteil verlangt. */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --glass-bg: var(--surface);
    --mat-structural-bg: var(--surface);
    --mat-floating-bg: var(--surface);
    --mat-control-bg: var(--surface);
  }
  .glass, .mat-structural, .mat-floating,
  .ios-nav-inner, .mobile-menu, .cookie-banner, .topbar, .pt-top, .modal, .ai-panel {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--surface) !important;
  }
}

/* Mehr Kontrast: fast deckende Flächen mit klarer Umrandung, kräftigere
   Trennlinien, deutlicherer Tastaturfokus. */
@media (prefers-contrast: more) {
  :root {
    --ink-2: oklch(0.34 0.010 165);
    --ink-3: oklch(0.44 0.009 160);
    --line: oklch(0.72 0.010 150);
    --line-2: oklch(0.78 0.008 150);
    --line-strong: oklch(0.60 0.012 150);
    --glass-bg: oklch(1 0 0 / 0.97);
    --mat-structural-bg: oklch(1 0 0 / 0.97);
    --mat-floating-bg: oklch(1 0 0 / 0.98);
  }
  .glass, .mat-structural, .mat-floating, .card, .ios-nav-inner, .topbar, .pt-top {
    border: 1px solid var(--line-strong);
  }
  :focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
  .scroll-edge::after { display: none; }
}


/* ============================================================
   Telefon: Zoom, Tippziele, sichere Bereiche
   ------------------------------------------------------------
   Diese Datei liegt unter Website, E-Akte und Portal. Die Regeln
   standen zuerst in site.css - die laedt aber nur die oeffentliche
   Seite, sodass Dashboard und Mandantenportal leer ausgingen.
   ============================================================ */

/* iOS Safari zoomt beim Antippen in ein Eingabefeld hinein, sobald dessen
   Schrift kleiner als 16px ist. Danach steht die Seite verschoben und
   muss von Hand zurueckgezogen werden. */
@media (pointer: coarse) {
  .call-when .input, .call-cb-row .input,
  .input, .textarea, .select,
  input[type="text"], input[type="email"], input[type="tel"],
  input[type="number"], input[type="date"], input[type="search"],
  input[type="password"], textarea, select {
    font-size: max(1rem, 16px);
  }
}

/* Tippziele: eigenstaendige Bedienelemente mindestens 44 x 44 Punkte.
   Verweise im Fliesstext sind ausgenommen - dort gilt die Regel nicht
   und grosse Klickflaechen im Satz stoeren mehr, als sie helfen. */
@media (pointer: coarse) {
  .btn, .menu-toggle, .topic-chip, .slot, .day-card, .icon-btn,
  .call-btn, .cookie-actions .btn, .map-consent .btn,
  .chip, .tb-btn, .ra-btn, .qa, .pt-chip, .pt-nav-i, .side-link, .nav-item {
    min-height: 44px;
  }
  .menu-toggle { width: 44px; }
  /* Kaestchen mit Beschriftung: die ganze Zeile wird zur Flaeche. */
  .checkbox { min-height: 44px; align-items: center; }
}

/* Sichere Bereiche seitlich (Querformat auf Geraeten mit Notch). */
@supports (padding: max(0px)) {
  .container { padding-left: max(28px, env(safe-area-inset-left));
               padding-right: max(28px, env(safe-area-inset-right)); }
}

/* ---------- Abzeichen und Etiketten brechen nie um ----------------------
   Ein Abzeichen ist eine Marke, keine Textspalte. "+18 %" enthaelt ein
   Leerzeichen und brach im schmalen Kennzahlenfeld auf drei Zeilen -
   das Symbol stand dann allein ueber der Zahl. flex: none verhindert
   zusaetzlich, dass ein Abzeichen von seinem Nachbarn zusammengedrueckt
   wird. */
.kpi-trend, .badge, .chip, .bl-tag, .za-chip, .pt-nav-b, .pill,
.status, [class*="-badge"], [class*="-pill"] {
  white-space: nowrap;
  flex: none;
}