/* ============================================================
       Design-System „Tinte & Siegel" — Anbindung des Bestands (Phase 5b)
       ------------------------------------------------------------
       Die Bestandsnamen (--primary, --bg, --text, …) bleiben erhalten und
       zeigen jetzt auf die Tokens aus design-system/bk-tokens.css. Dadurch
       zieht das gesamte gewachsene CSS auf die Marke um, ohne dass 3100
       Zeilen Regeln angefasst werden müssen.

       WICHTIG: bk-tokens.css muss VOR dieser Datei geladen werden
       (siehe <head> in index.html / admin.html). Die Fallback-Werte hinter
       jedem Token sind der alte Bestandswert — fehlt die Token-Datei, sieht
       die Seite aus wie vorher statt kaputt.
       ============================================================ */
    :root {
      /* Marke — Tinte (Blau) */
      --primary:        var(--bk-primary, #1d3a72);
      --primary-hover:  var(--bk-primary-hover, #172d59);
      --primary-soft:   rgba(58, 100, 174, 0.28);   /* nur Fokus-Ring */
      --primary-muted:  var(--bk-primary-soft, #eef3fb);

      /* Marke — Siegel (Orange). Akzent, NIE Warnung. */
      --accent:         var(--bk-accent, #e4611d);
      --accent-hover:   var(--bk-accent-hover, #c74e12);
      --accent-soft:    var(--bk-accent-soft, #fef3ec);
      --accent-border:  var(--bk-accent-border, #fac5a4);
      --accent-text:    var(--bk-accent-text, #a03e10);   /* Orange als Text */
      --on-accent:      var(--bk-text-on-accent, #0c1830); /* Text auf Orange */

      /* Flächen — warmes Papier statt kaltem Slate */
      --bg:             var(--bk-bg, #fbf9f6);
      --bg-deep:        var(--bk-bg-deep, #f4f1eb);
      --surface:        var(--bk-surface, #ffffff);
      --surface-sunken: var(--bk-surface-sunken, #f4f1eb);
      --ink-panel:      var(--bk-ink-panel, #122341);
      --ink-panel-text: var(--bk-ink-panel-text, #f2efe9);

      /* Text */
      --text:                  var(--bk-text, #1a2433);
      --text-mild:             var(--bk-text-mild, #333c4e);
      --muted:                 var(--bk-text-muted, #5b6474);
      --color-text-secondary:  var(--bk-text-muted, #5b6474);
      --text-faint:            var(--bk-text-faint, #9aa3b5);

      /* Linien */
      --border:        var(--bk-border, #e7e2d8);
      --border-strong: var(--bk-border-strong, #d3ccbe);
      --border-input:  var(--bk-border-input, #c9c3b4);

      /* Status — Rot bleibt Fristen/Fehlern vorbehalten */
      --danger:        var(--bk-danger, #c0392b);
      --danger-strong: var(--bk-danger-strong, #96271c);
      --danger-soft:   var(--bk-danger-soft, #fcefed);
      --danger-border: var(--bk-danger-border, #f8dbd6);
      --success:        var(--bk-success, #1e7f4f);
      --success-strong: var(--bk-success-strong, #14603a);
      --success-soft:   var(--bk-success-soft, #ebf6ef);
      --success-border: var(--bk-success-border, #d3eddd);
      --notice-soft:   var(--bk-notice-soft, #fdf6e3);
      --notice-border: var(--bk-notice-border, #faebc2);
      --notice-text:   var(--bk-notice-text, #8a6100);

      /* Geometrie */
      --radius:     var(--bk-radius-lg, 20px);
      --radius-sm:  var(--bk-radius-md, 14px);
      --radius-xs:  var(--bk-radius-xs, 6px);
      --radius-pill: var(--bk-radius-pill, 999px);

      /* Schatten — warm & tintig, nie hartes Schwarz */
      --shadow:    var(--bk-shadow-md, 0 1px 2px rgba(23, 45, 89, 0.05), 0 6px 24px -6px rgba(23, 45, 89, 0.1));
      --shadow-lg: var(--bk-shadow-lg, 0 2px 4px rgba(23, 45, 89, 0.05), 0 18px 48px -12px rgba(23, 45, 89, 0.18));
      --scrim:     var(--bk-scrim, rgba(12, 24, 48, 0.55));
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
      background: var(--bg);
      color: var(--text);
      line-height: 1.55;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      letter-spacing: -0.01em;
    }

    .container {
      width: 100%;
      max-width: 1120px;
      margin: 0 auto;
      padding: 0 1.25rem;
    }

    /* —— Top navigation —— */
    .app-nav {
      background: var(--surface);
      border-bottom: 1px solid rgba(23, 45, 89, 0.06);
      box-shadow: 0 1px 3px rgba(23, 45, 89, 0.06);
      position: sticky;
      top: 0;
      z-index: 200;
    }

    .app-nav-inner {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem 1rem;
      min-height: 4rem;
      padding-top: 0.6rem;
      padding-bottom: 0.6rem;
    }

    .brand {
      display: inline-flex;
      align-items: center;
      text-decoration: none;
      color: inherit;
      border-radius: var(--radius-sm);
      transition: transform 0.15s ease, opacity 0.15s ease;
    }

    .brand:hover {
      opacity: 0.96;
    }

    .brand:active {
      transform: scale(0.99);
    }

    .brand:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 3px;
    }

    .brand-chip {
      display: inline-flex;
      align-items: center;
      gap: 0.65rem;
      padding: 0.25rem 0;
      background: transparent;
      border-radius: 0;
      box-shadow: none;
    }

    .brand-icon-svg {
      display: block;
      width: 36px;
      height: 36px;
      flex-shrink: 0;
      border-radius: 10px;
      filter: drop-shadow(0 2px 6px rgba(29, 58, 114, 0.22));
    }

    .brand-wordmark {
      display: inline-flex;
      align-items: baseline;
      font-size: 1.06rem;
      font-weight: 800;
      letter-spacing: -0.035em;
      line-height: 1;
      white-space: nowrap;
      /* Der Markenname ist ein Eigenname und läuft immer links nach rechts. In den
         rechtsläufigen Sprachen (Arabisch, Farsi, Urdu, Hebräisch …) drehte der
         Browser die beiden Wortteile sonst um: aus „BehördenKlar" wurde
         „KlarBehörden" – der Markenname stand in jeder RTL-Sprache falsch da. */
      direction: ltr;
      unicode-bidi: isolate;
    }

    .brand-behorden {
      color: var(--text);
    }

    .brand-klar {
      color: var(--primary);
    }

    .hero-nav-lang-trigger {
      width: auto;
      max-width: min(100%, 22rem);
      flex-shrink: 1;
      min-width: 0;
      display: inline-flex;
      white-space: nowrap;
      margin-left: auto;
    }

    /* —— Hero —— */
    .hero {
      background: transparent;
      border-bottom: none;
      padding: 2rem 0 2.75rem;
      box-shadow: none;
    }

    .hero-inner {
      display: flex;
      flex-direction: column;
      gap: 1.75rem;
    }

    .hero-welcome {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: stretch;
      gap: 0;
    }

    .hero-text {
      width: 100%;
      max-width: 40rem;
    }

    .hero-text .hero-flags-emojis {
      margin-top: 0.55rem;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      gap: 0.2rem 0.28rem;
      font-size: clamp(0.92rem, 2.1vw, 1.12rem);
      line-height: 1;
      user-select: none;
    }

    .hero-text .hero-flag {
      display: inline-block;
      line-height: 1;
    }

    /* Flaggen als SVG (assets/flags/, siehe scripts/fetch-flags.mjs). Emoji-Flaggen haben
       auf Windows keine Glyphe – dort stand vorher nur das Buchstabenpaar des Ländercodes.
       Die Größe folgt der Schriftgröße (em), damit die Flagge in jeder Umgebung – Chip,
       Fließtext, Onboarding-Kachel – zum Text daneben passt und beim Zoom mitwächst. */
    img.lang-flag {
      display: inline-block;
      width: 1.15em;
      height: 1.15em;
      /* Optisch auf die Grundlinie ziehen: ein Bild sitzt sonst auf der Baseline und
         wirkt gegenüber dem Text daneben nach oben versetzt. */
      vertical-align: -0.2em;
      border-radius: 50%;
      flex: none;
      object-fit: contain;
    }

    .lang-flag-globe {
      display: inline-block;
      line-height: 1;
    }

    .hero-text img.lang-flag {
      width: 1.25em;
      height: 1.25em;
    }

    .hero-text h1 {
      margin: 0 0 0.5rem;
      font-size: clamp(1.65rem, 4vw, 2.25rem);
      font-weight: 800;
      letter-spacing: -0.04em;
      color: var(--text);
      line-height: 1.15;
    }

    .hero-text p {
      margin: 0;
      color: var(--muted);
      font-size: 1.0625rem;
      max-width: 38rem;
      line-height: 1.6;
    }

    .hero-card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 1.65rem 1.65rem 1.85rem;
      box-shadow: var(--shadow-lg);
      border: 1px solid var(--border);
    }

    .mode-toggle {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 1.25rem;
    }

    .mode-toggle label {
      position: relative;
      cursor: pointer;
      margin: 0;
    }

    .mode-toggle input {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }

    .mode-pill {
      display: inline-block;
      padding: 0.55rem 1.1rem;
      border-radius: 999px;
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--muted);
      background: var(--bg);
      border: 2px solid transparent;
      transition: color 0.15s, background 0.15s, border-color 0.15s, box-shadow 0.15s;
    }

    .mode-toggle input:focus-visible + .mode-pill {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    .mode-toggle input:checked + .mode-pill {
      color: #fff;
      background: var(--primary);
      border-color: var(--primary);
      box-shadow: 0 4px 12px rgba(29, 58, 114, 0.35);
    }

    .mode-toggle label:hover .mode-pill {
      border-color: rgba(29, 58, 114, 0.35);
    }

    .panel {
      display: none;
    }

    .panel.active {
      display: block;
    }

    .field-label {
      display: block;
      font-size: 0.8125rem;
      font-weight: 700;
      margin-bottom: 0.55rem;
      color: var(--text);
      letter-spacing: -0.02em;
    }

    .textarea-hero {
      width: 100%;
      min-height: 200px;
      padding: 1rem 1.15rem;
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font: inherit;
      font-size: 0.95rem;
      color: var(--text);
      background: var(--surface-sunken);
      resize: vertical;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .textarea-hero:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 4px var(--primary-soft);
      background: var(--surface);
    }

    /* Drop zone */
    .drop-zone-wrap {
      position: relative;
    }

    .drop-zone {
      position: relative;
      min-height: 220px;
      border: 2px dashed var(--border-strong);
      border-radius: var(--radius-sm);
      background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface) 100%);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 1.65rem 1.25rem;
      text-align: center;
      transition: border-color 0.2s, background 0.2s, transform 0.15s, box-shadow 0.2s;
    }

    .drop-zone.is-dragover {
      border-color: var(--primary);
      border-style: solid;
      background: rgba(29, 58, 114, 0.06);
      box-shadow: 0 0 0 4px var(--primary-soft);
      transform: scale(1.005);
    }

    .drop-zone-input {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer;
      z-index: 2;
    }

    .drop-zone-icon {
      font-size: 2.5rem;
      line-height: 1;
      margin-bottom: 0.65rem;
      opacity: 0.88;
    }

    .drop-zone-title {
      margin: 0 0 0.35rem;
      font-size: 1.08rem;
      font-weight: 700;
      color: var(--text);
      letter-spacing: -0.02em;
    }

    .drop-zone-hint {
      margin: 0;
      font-size: 0.9rem;
      color: var(--muted);
      max-width: 300px;
      line-height: 1.45;
    }

    .drop-file-name {
      margin-top: 0.75rem;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--text);
      word-break: break-all;
      max-width: 100%;
    }

    .btn-pick-files-mobile {
      display: none;
    }

    .btn-take-photo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.4rem;
      width: 100%;
      margin-top: 0.85rem;
      padding: 0.7rem 1rem;
      font: inherit;
      font-size: 0.92rem;
      font-weight: 600;
      color: var(--primary);
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(23, 45, 89, 0.06);
      transition: background 0.15s, border-color 0.15s, transform 0.12s;
    }

    .btn-take-photo:hover {
      background: var(--surface-sunken);
      border-color: rgba(29, 58, 114, 0.45);
    }

    .btn-take-photo:active {
      transform: scale(0.99);
    }

    .btn-take-photo:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 3px;
    }

    .btn-take-photo.btn-upload-cap-reached {
      pointer-events: none;
      cursor: not-allowed;
      opacity: 0.72;
      color: var(--muted);
      background: var(--surface-sunken);
      border-color: var(--border);
      box-shadow: none;
    }

    .btn-take-photo.btn-upload-cap-reached:hover {
      background: var(--surface-sunken);
    }

    #panelFile.panel.active .btn-take-photo.btn-upload-cap-reached {
      background: var(--surface-sunken) !important;
      color: var(--muted) !important;
      border: 2px solid var(--border) !important;
      box-shadow: none !important;
      filter: none !important;
    }

    .preview-strip-wrap {
      margin-top: 1rem;
    }

    .preview-strip-wrap[hidden] {
      display: none !important;
    }

    .preview-strip {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 0.65rem;
      overflow-x: auto;
      padding: 0.2rem 0 0.35rem;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: thin;
    }

    .preview-thumb {
      position: relative;
      flex: 0 0 auto;
      width: 5.5rem;
      height: 5.5rem;
      border-radius: var(--radius-sm);
      overflow: hidden;
      border: 1px solid var(--border);
      box-shadow: var(--shadow);
      background: var(--bg-deep);
    }

    .preview-thumb img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .preview-thumb--pdf {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 0.2rem;
      padding: 0.35rem;
      background: linear-gradient(180deg, var(--danger-soft) 0%, #fff 55%);
    }

    .preview-thumb-pdf-icon {
      font-size: 0.68rem;
      font-weight: 800;
      color: var(--danger-strong);
      letter-spacing: 0.04em;
    }

    .preview-thumb-name {
      font-size: 0.62rem;
      font-weight: 600;
      color: var(--text);
      text-align: center;
      line-height: 1.2;
      max-width: 100%;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
      word-break: break-word;
    }

    .preview-thumb-remove {
      position: absolute;
      top: 2px;
      right: 2px;
      z-index: 3;
      width: 1.45rem;
      height: 1.45rem;
      padding: 0;
      border-radius: 50%;
      border: 2px solid #fff;
      background: var(--danger);
      color: #fff;
      font-size: 0.95rem;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
      transition: transform 0.12s, filter 0.15s;
    }

    .preview-thumb-remove:hover {
      filter: brightness(1.08);
    }

    .preview-thumb-remove:active {
      transform: scale(0.94);
    }

    .preview-thumb-remove:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 1px;
    }

    .preview-thumb--image {
      cursor: zoom-in;
    }

    .preview-thumb--image .preview-thumb-open-hint {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      padding: 0.2rem 0.25rem;
      font-size: 0.58rem;
      font-weight: 700;
      text-align: center;
      color: #fff;
      background: linear-gradient(transparent, rgba(23, 45, 89, 0.72));
      pointer-events: none;
    }

    .preview-lightbox {
      position: fixed;
      inset: 0;
      z-index: 1400;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
    }

    .preview-lightbox[hidden] {
      display: none !important;
    }

    .preview-lightbox-backdrop {
      position: absolute;
      inset: 0;
      border: none;
      padding: 0;
      margin: 0;
      background: rgba(12, 24, 48, 0.82);
      backdrop-filter: blur(3px);
      cursor: pointer;
    }

    .preview-lightbox-panel {
      position: relative;
      z-index: 1;
      max-width: min(96vw, 1100px);
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 0.65rem;
      pointer-events: none;
    }

    .preview-lightbox-close {
      position: absolute;
      top: -0.35rem;
      right: -0.35rem;
      z-index: 2;
      pointer-events: auto;
      width: 2.5rem;
      height: 2.5rem;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.95);
      color: var(--text);
      font-size: 1.45rem;
      font-weight: 700;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .preview-lightbox-close:hover {
      filter: brightness(1.05);
    }

    .preview-lightbox-close:focus-visible {
      outline: 2px solid #fff;
      outline-offset: 2px;
    }

    .preview-lightbox-img {
      pointer-events: auto;
      display: block;
      max-width: min(96vw, 1100px);
      max-height: calc(92vh - 2.5rem);
      width: auto;
      height: auto;
      object-fit: contain;
      border-radius: var(--radius-sm);
      box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
      background: var(--text);
    }

    .preview-lightbox-caption {
      pointer-events: none;
      margin: 0;
      max-width: min(96vw, 1100px);
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--ink-panel-text);
      text-align: center;
      word-break: break-word;
    }

    body.preview-lightbox-open {
      overflow: hidden;
    }

    .hint {
      font-size: 0.8rem;
      color: var(--muted);
      margin-top: 0.65rem;
    }

    /* Language buttons */
    .lang-section {
      margin-top: 1.65rem;
      padding-top: 1.65rem;
      border-top: 1px solid var(--border);
    }

    .lang-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
    }

    .ui-lang-mobile-trigger,
    .target-lang-mobile-trigger {
      width: 100%;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      font: inherit;
      font-size: 0.9375rem;
      font-weight: 600;
      padding: 0.72rem 1.1rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      color: var(--text);
      background: var(--surface);
      box-shadow: 0 1px 2px rgba(23, 45, 89, 0.05);
      cursor: pointer;
      transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    }

    .ui-lang-mobile-trigger:hover,
    .target-lang-mobile-trigger:hover {
      border-color: rgba(29, 58, 114, 0.35);
      background: var(--surface-sunken);
    }

    .target-lang-mobile-trigger {
      display: none;
    }

    .ui-lang-mobile-trigger:focus-visible,
    .target-lang-mobile-trigger:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 3px;
    }

    .ui-lang-modal {
      position: fixed;
      inset: 0;
      z-index: 1300;
      align-items: center;
      justify-content: center;
      background: rgba(12, 24, 48, 0.45);
      backdrop-filter: blur(2px);
      padding: 1rem;
    }

    .ui-lang-modal:not(.visible) {
      display: none !important;
    }

    .ui-lang-modal.visible {
      display: flex !important;
    }

    .ui-lang-modal-card {
      width: min(100%, 520px);
      max-height: 85vh;
      overflow-y: auto;
      background: var(--surface);
      border-radius: var(--radius);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-lg);
      padding: 1rem;
    }

    .ui-lang-modal-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      margin-bottom: 0.85rem;
    }

    .ui-lang-modal-title {
      margin: 0;
      font-size: 1rem;
      font-weight: 700;
      color: var(--text);
    }

    .ui-lang-modal-close {
      border: none;
      background: transparent;
      color: var(--muted);
      font-size: 1.25rem;
      line-height: 1;
      cursor: pointer;
      padding: 0.2rem 0.3rem;
      border-radius: 8px;
    }

    .ui-lang-modal-grid {
      display: flex;
      flex-wrap: wrap;
      gap: 0.45rem;
    }

    .lang-btn {
      appearance: none;
      font: inherit;
      font-size: 0.8125rem;
      font-weight: 600;
      padding: 0.52rem 0.95rem;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface-sunken);
      color: var(--text);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, color 0.15s, box-shadow 0.15s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.35rem;
    }

    .lang-btn:hover {
      border-color: rgba(29, 58, 114, 0.35);
      background: var(--surface);
    }

    .lang-btn:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    .lang-btn.is-active {
      border-color: var(--primary);
      background: var(--primary);
      color: #fff;
      box-shadow: 0 4px 14px rgba(29, 58, 114, 0.28);
    }

    .btn-analyze {
      margin-top: 1.35rem;
      width: 100%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 1rem 1.5rem;
      font: inherit;
      font-size: 1.02rem;
      font-weight: 800;
      letter-spacing: -0.02em;
      color: #fff;
      background: linear-gradient(135deg, var(--bk-tinte-500, #3a64ae) 0%, var(--primary) 42%, var(--primary-hover) 100%);
      border: none;
      border-radius: var(--radius-sm);
      cursor: pointer;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      box-shadow:
        0 4px 16px rgba(29, 58, 114, 0.38),
        inset 0 1px 0 rgba(255, 255, 255, 0.18);
      transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
    }

    .btn-analyze:hover:not(:disabled) {
      filter: brightness(1.04);
      box-shadow:
        0 8px 28px rgba(29, 58, 114, 0.42),
        inset 0 1px 0 rgba(255, 255, 255, 0.22);
    }

    .btn-analyze:active:not(:disabled) {
      transform: scale(0.99);
    }

    .btn-analyze:disabled {
      opacity: 0.55;
      cursor: not-allowed;
      box-shadow: none;
    }

    .spinner {
      width: 1.15rem;
      height: 1.15rem;
      border: 2px solid rgba(255, 255, 255, 0.35);
      border-top-color: #fff;
      border-radius: 50%;
      animation: spin 0.7s linear infinite;
      display: none;
    }

    .btn-analyze.loading .spinner {
      display: block;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    /* Main content below hero */
    .main {
      flex: 1;
      padding: 1.75rem 0 2rem;
    }

    .card-api {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 1.35rem 1.5rem;
      margin-bottom: 1.5rem;
      box-shadow: var(--shadow);
      border: 1px solid var(--border);
    }

    .card-api h2 {
      margin: 0 0 1rem;
      font-size: 0.95rem;
      font-weight: 800;
      letter-spacing: 0.06em;
      color: var(--primary);
      text-transform: uppercase;
    }

    .key-row {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: flex-end;
    }

    .key-row .field {
      flex: 1 1 220px;
    }

    .key-row label {
      display: block;
      font-size: 0.85rem;
      font-weight: 600;
      margin-bottom: 0.4rem;
    }

    .key-row input[type="password"],
    .key-row input[type="text"] {
      width: 100%;
      padding: 0.7rem 0.9rem;
      border: 2px solid var(--border);
      border-radius: 10px;
      font: inherit;
      transition: border-color 0.15s, box-shadow 0.15s;
    }

    .key-row input:focus {
      outline: none;
      border-color: var(--primary);
      box-shadow: 0 0 0 3px var(--primary-soft);
    }

    .toggle-key {
      font-size: 0.88rem;
      color: var(--primary);
      background: none;
      border: none;
      cursor: pointer;
      padding: 0.6rem 0;
      font-weight: 600;
      text-decoration: underline;
    }

    .toggle-key:hover {
      color: var(--primary-hover);
    }

    .error {
      background: var(--danger-soft);
      border: 1px solid var(--danger-border);
      color: var(--danger);
      padding: 1rem 1.1rem;
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
      margin-bottom: 1.25rem;
      display: none;
      box-shadow: var(--shadow);
      white-space: pre-wrap;
      word-break: break-word;
      overflow-wrap: anywhere;
      max-height: min(75vh, 32rem);
      overflow-y: auto;
    }

    .error.visible {
      display: block;
      /* Dezenter Übergang (Phase 5b): Die Box schaltet per `display` um und stand vorher
         schlagartig da. 160 ms Einblenden mit 4 px Versatz – genug, damit das Auge die
         Änderung bemerkt, zu wenig, um zu warten. Beim Ausblenden bewusst kein Übergang:
         das bräuchte JS mit Verzögerung und damit eine Verhaltensänderung.
         Bei „Bewegung reduzieren" macht die globale Regel weiter unten daraus 0,01 ms. */
      animation: bk-notice-in 160ms ease-out;
    }

    @keyframes bk-notice-in {
      from { opacity: 0; transform: translateY(-4px); }
      to   { opacity: 1; transform: none; }
    }

    .error.is-friendly {
      background: var(--primary-muted);
      border-color: rgba(29, 58, 114, 0.24);
      color: var(--primary);
    }

    /* Full-screen result view */
    #results {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 999;
      background: var(--bg);
      overflow-y: auto;
      /* Oben KEIN Padding: den Abstand bringt .results-topbar mit. Läge er hier,
         entstünde über der klebenden Kopfzeile ein 16px-Streifen, durch den der
         wegscrollende Inhalt sichtbar bliebe. */
      padding: 0 16px;
    }

    #results.visible {
      display: block;
      /* Der Sprung von der Eingabe ins Ergebnis war übergangslos – bei einer Ansicht, die
         den ganzen Bildschirm einnimmt, wirkt das wie ein Seitenwechsel ohne Zusammenhang.
         Bewusst NUR Opazität: ein transform auf diesem position:fixed-Element würde für
         seine Kinder einen neuen Bezugsrahmen aufspannen (die klebende Kopfzeile hängt
         daran). Ausblenden bleibt hart – dafür wäre JS mit Verzögerung nötig. */
      animation: bk-view-in 200ms ease-out;
    }

    @keyframes bk-view-in {
      from { opacity: 0; }
      to   { opacity: 1; }
    }

    body.results-open {
      overflow: hidden;
    }

    .results-view.results-shell {
      width: 100%;
      max-width: 680px;
      margin: 0 auto;
      padding-bottom: 2rem;
      font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    }

    /* Klebende Kopfzeile der Ergebnisansicht (Phase 5b).
       Scrollport ist #results; die Leiste deckt exakt die Breite der Ergebnis-Spalte ab,
       darum reicht der Flächenhintergrund. Höhe bewusst niedrig – auf 333px-Geräten
       darf sie nicht die halbe Ansicht fressen. */
    .results-topbar {
      position: sticky;
      top: 0;
      z-index: 5;
      display: flex;
      align-items: center;
      gap: 0.7rem;
      padding: 12px 0 10px;
      background: var(--bg);
      border-bottom: 1px solid var(--border);
      margin-bottom: 12px;
    }

    .results-topbar .results-page-title {
      margin: 0;
      /* Kleiner als die frühere Überschrift: sie steht jetzt dauerhaft im Bild. */
      font-size: clamp(1.05rem, 2.2vw, 1.35rem);
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .btn-back {
      appearance: none;
      border: none;
      background: var(--surface);
      color: var(--primary);
      font: inherit;
      font-size: 0.98rem;
      font-weight: 700;
      border-radius: var(--radius-sm);
      padding: 0.62rem 0.95rem;
      box-shadow: var(--shadow);
      cursor: pointer;
      margin: 0;
      flex: 0 0 auto;
      /* Touch-Ziel (WCAG 2.5.5): stand bei 39 px und fiel beim A11y-Pass durchs Raster,
         weil er damals nur ganz oben stand. Jetzt ist er dauerhaft sichtbar. */
      display: inline-flex;
      align-items: center;
      min-height: 44px;
    }

    .results-download-share-stack {
      margin-bottom: 1rem;
    }

    .results-download-share-stack .btn-antwort-print,
    .results-download-share-stack .btn-whatsapp-share {
      width: 100%;
      justify-content: center;
    }

    .results-download-share-stack .btn-antwort-print:not([hidden]) + .btn-whatsapp-share {
      margin-top: 0.75rem;
    }

    .results-download-share-stack .template-download-block:not([hidden]) ~ .btn-whatsapp-share {
      margin-top: 0.75rem;
    }

    .btn-whatsapp-share {
      appearance: none;
      border: none;
      background: #25d366;
      color: #fff;
      font: inherit;
      font-size: 0.98rem;
      font-weight: 700;
      border-radius: var(--radius-sm);
      padding: 0.62rem 1rem;
      box-shadow: var(--shadow);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      text-decoration: none;
    }

    .btn-whatsapp-share:hover {
      background: #20bd5a;
      color: #fff;
    }

    .btn-whatsapp-share:focus-visible {
      outline: 2px solid #128c7e;
      outline-offset: 2px;
    }

    .btn-whatsapp-share .btn-wa-icon {
      flex-shrink: 0;
      display: block;
    }

    .btn-antwort-print {
      appearance: none;
      border: none;
      background: var(--primary);
      color: #fff;
      font: inherit;
      font-size: 0.98rem;
      font-weight: 700;
      border-radius: var(--radius-sm);
      padding: 0.62rem 1rem;
      box-shadow: var(--shadow);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 0.45rem;
      text-decoration: none;
    }

    .btn-antwort-print:hover {
      background: var(--primary-hover);
      color: #fff;
    }

    .btn-antwort-print:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    .btn-antwort-print .btn-print-icon {
      flex-shrink: 0;
      display: block;
    }

    .result-feedback {
      margin-top: 1rem;
      padding: 0.85rem 1rem;
      border: 1px solid rgba(23, 45, 89, 0.08);
      border-radius: var(--radius-sm);
      background: rgba(255, 255, 255, 0.72);
      text-align: center;
    }

    .result-feedback[hidden] {
      display: none !important;
    }

    .result-feedback-question {
      margin: 0 0 0.65rem;
      color: var(--muted);
      font-size: 0.92rem;
      font-weight: 700;
    }

    .result-feedback-actions {
      display: inline-flex;
      justify-content: center;
      gap: 0.65rem;
    }

    .result-feedback-actions[hidden] {
      display: none !important;
    }

    .result-feedback-btn {
      appearance: none;
      width: 2.75rem;    /* 44 px Touch-Ziel (Mobil-Pass 26.07.26: waren 40 px) */
      height: 2.75rem;
      border: 1px solid rgba(23, 45, 89, 0.12);
      border-radius: 999px;
      background: var(--surface);
      box-shadow: 0 1px 2px rgba(23, 45, 89, 0.05);
      cursor: pointer;
      font: inherit;
      font-size: 1.15rem;
      line-height: 1;
      transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
      /* Seit dem Wechsel von Emoji auf SVG (28.07.): Icon mittig im runden Knopf. */
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: var(--text-mild);
    }

    .result-feedback-btn:hover .result-feedback-icon,
    .result-feedback-btn:focus-visible .result-feedback-icon {
      color: var(--primary);
    }

    /* „Nicht hilfreich" ist dieselbe Form um 180° gedreht (siehe Kommentar im Markup).
       Statische Transformation, keine Bewegung – von prefers-reduced-motion unberührt. */
    .result-feedback-icon--down {
      transform: rotate(180deg);
    }

    .result-feedback-btn:hover {
      transform: translateY(-1px);
      border-color: rgba(29, 58, 114, 0.35);
      box-shadow: var(--shadow);
    }

    .result-feedback-btn:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    .result-feedback-thanks {
      margin: 0;
      color: var(--primary);
      font-size: 0.92rem;
      font-weight: 700;
    }

    .results-page-title {
      margin: 0 0 1rem;
      font-size: clamp(1.35rem, 2.9vw, 2rem);
      font-weight: 800;
      letter-spacing: -0.035em;
    }

    /* RDG-Hinweis oben in der Ergebnisansicht (stand bis 01.10.26 als style-Attribut im
       Markup – dort konnte ihn kein Stylesheet erreichen). Bildschirmfassung: app-ergebnis.css. */
    .results-disclaimer {
      margin: 0 0 14px;
      padding: 8px 12px;
      font-size: 13px;
      line-height: 1.4;
      color: var(--notice-text);
      background: var(--notice-soft);
      border: 1px solid var(--notice-border);
      border-radius: 8px;
    }

    .rs-card {
      background: var(--surface);
      border-radius: 12px;
      border: 0.5px solid rgba(23, 45, 89, 0.18);
      padding: 1rem 1.1rem;
      margin-bottom: 1rem;
      box-shadow: var(--shadow);
    }

    .rs-label {
      margin: 0 0 0.65rem;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
    }

    .rs-label--inner {
      margin-top: 0.85rem;
    }

    .rs-brief-type {
      margin: 0 0 0.35rem;
      font-size: clamp(1.35rem, 4vw, 1.75rem);
      font-weight: 800;
      letter-spacing: -0.03em;
      color: var(--text);
      line-height: 1.25;
    }

    .rs-sender {
      margin: 0 0 1rem;
      font-size: 1rem;
      line-height: 1.55;
      color: var(--text);
    }

    .rs-body {
      font-size: 1rem;
      line-height: 1.65;
      color: var(--text-mild);
      word-break: break-word;
    }

    .rs-body p {
      margin: 0 0 0.65rem;
    }

    .rs-body p:last-child {
      margin-bottom: 0;
    }

    .rs-subcard {
      margin-top: 1rem;
      padding-top: 0.85rem;
      border-top: 0.5px solid rgba(23, 45, 89, 0.12);
    }

    .rs-warn-box {
      background: var(--danger-soft);
      border-color: var(--danger-border) !important;
    }

    .rs-warn-box-neutral {
      background: var(--surface-sunken);
      border-color: rgba(23, 45, 89, 0.18) !important;
    }

    .rs-warn-box-neutral .rs-warn-title {
      color: var(--text-mild);
    }

    .rs-warn-box-neutral .rs-warn-highlight:empty {
      display: none;
    }

    .rs-warn-title {
      margin: 0 0 0.35rem;
      font-size: 1rem;
      font-weight: 800;
      color: var(--danger-strong);
    }

    .rs-warn-highlight {
      margin: 0 0 0.45rem;
      font-size: clamp(1.35rem, 4vw, 1.65rem);
      font-weight: 800;
      color: var(--danger);
      line-height: 1.2;
    }

    .rs-info-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    @media (max-width: 520px) {
      .rs-info-grid {
        grid-template-columns: 1fr;
      }
    }

    .rs-info-cell {
      background: var(--surface-sunken);
      border-radius: 10px;
      border: 0.5px solid rgba(23, 45, 89, 0.12);
      padding: 12px 12px;
      min-height: 4.5rem;
    }

    .rs-info-key {
      display: block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 6px;
    }

    .rs-info-val {
      font-size: 0.98rem;
      line-height: 1.45;
      color: var(--text);
      word-break: break-word;
    }

    .rs-red,
    .rs-info-val--fine {
      color: var(--danger);
      font-weight: 700;
    }

    .rs-steps {
      list-style: none;
      margin: 0;
      padding: 0;
    }

    .rs-steps > li {
      display: flex;
      gap: 12px;
      align-items: flex-start;
      margin-bottom: 1rem;
    }

    .rs-steps > li:last-child {
      margin-bottom: 0;
    }

    .rs-step-num {
      flex-shrink: 0;
      width: 28px;
      height: 28px;
      border-radius: 999px;
      background: var(--primary);
      color: #fff;
      font-weight: 800;
      font-size: 0.9rem;
      line-height: 28px;
      text-align: center;
    }

    .rs-step-body {
      flex: 1;
      min-width: 0;
      font-size: 1rem;
      line-height: 1.6;
      color: var(--text-mild);
    }

    .rs-step2-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-top: 4px;
    }

    @media (max-width: 520px) {
      .rs-step2-row {
        grid-template-columns: 1fr;
      }
    }

    .rs-opt {
      border-radius: 10px;
      padding: 10px 12px;
      border: 0.5px solid rgba(23, 45, 89, 0.18);
      background: var(--surface);
      font-size: 0.95rem;
      line-height: 1.5;
      color: var(--text-mild);
    }

    .rs-opt-b {
      border: 1px solid var(--danger-border);
      box-shadow: inset 0 0 0 1px rgba(248, 219, 214, 0.35);
    }

    /* Die Regeln für .rs-tab-bar/.rs-tab/.rs-tab-panel sind am 28.07. entfallen:
       Zu diesen Klassen gab es im Markup nichts mehr (die Ansicht hat keine Reiter),
       samt der zugehörigen JS-Delegation. Wer sie sucht: Commit-Historie. */

    .rs-envelope {
      position: relative;
      border: 0.5px solid rgba(23, 45, 89, 0.22);
      border-radius: 12px;
      background: linear-gradient(180deg, var(--surface-sunken) 0%, var(--surface) 40%);
      min-height: 220px;
      padding: 18px 18px 52px;
    }

    .rs-env-sender {
      font-size: 0.92rem;
      line-height: 1.45;
      color: var(--text-mild);
      max-width: 72%;
    }

    .rs-env-label {
      font-size: 13px;
      color: var(--muted);
      font-weight: 600;
    }

    .rs-env-line-indent {
      padding-left: 2.75em;
    }

    .rs-env-plz {
      max-width: 5.5ch;
      min-width: 5ch;
    }

    .rs-address-hint {
      margin: 8px 0 0;
      max-width: 72%;
      padding: 8px 12px;
      border-radius: 8px;
      background: var(--notice-soft);
      border: 1px solid var(--notice-border);
      font-size: 13px;
      line-height: 1.4;
      color: var(--notice-text);
    }

    .rs-env-country {
      margin-top: 2px;
      font-weight: 600;
      color: var(--text-mild);
    }

    .rs-env-recipient-block {
      margin-top: 36px;
      margin-left: auto;
      margin-right: 0;
      max-width: 68%;
      text-align: right;
      font-size: 0.95rem;
      line-height: 1.45;
      color: var(--text);
    }

    .rs-env-recipient-heading {
      font-size: 13px;
      color: var(--muted);
      font-weight: 600;
      margin-bottom: 4px;
    }

    .rs-env-recipient-line {
      display: block;
    }

    .rs-env-country-bold {
      font-weight: 700;
      margin-top: 2px;
    }

    .rs-env-name-fixed {
      font-weight: 700;
      color: var(--text);
      font-size: 15px;
    }

    .rs-env-name-fixed.rs-env-name-missing {
      font-weight: 600;
      color: var(--muted);
      font-size: 0.92rem;
    }

    .rs-brief-datum {
      text-align: right;
      display: block;
      margin-bottom: 24px;
    }

    .rs-brief-datum-input {
      text-align: right;
      display: block;
      margin-left: auto;
      margin-bottom: 0;
      width: auto;
      min-width: 9ch;
    }

    .rs-env-stamp-wrap {
      position: absolute;
      top: 14px;
      right: 14px;
      width: 56px;
      text-align: center;
    }

    .rs-env-stamp {
      height: 72px;
      border: 1px dashed rgba(91, 100, 116, 0.55);
      border-radius: 6px;
      background: rgba(251, 249, 246, 0.9);
    }

    .rs-env-stamp-note {
      margin: 6px 0 0;
      font-size: 11px;
      color: var(--color-text-secondary);
      line-height: 1.25;
      text-align: center;
    }

    .antwort-block {
      box-sizing: border-box;
      border: 1px solid var(--border);
      background: var(--surface-sunken);
      padding: 20px;
      border-radius: 8px;
      margin-bottom: 16px;
    }

    .antwort-block--briefkopf {
      margin-bottom: 16px;
    }

    .antwort-block--compose {
      margin-top: 0;
    }

    .antwort-block--closing {
      margin-top: 0;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 11pt;
      line-height: 1.45;
      color: var(--text);
    }

    .din-briefkopf {
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 11pt;
      line-height: 1.45;
      color: var(--text);
    }

    .din-briefkopf-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      align-items: start;
    }

    .din-briefkopf-row--empfaenger {
      margin-top: 2.8rem;
    }

    .din-briefkopf-col--left {
      min-width: 0;
    }

    .din-briefkopf-col--right {
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      text-align: right;
    }

    .din-absender {
      font-size: 9pt;
      line-height: 1.4;
      color: var(--text-mild);
      text-align: left;
    }

    .din-absender-line {
      display: block;
      margin: 0;
    }

    .din-stamp {
      width: 88px;
      text-align: center;
      flex-shrink: 0;
    }

    .din-stamp-box {
      height: 72px;
      border: 1px dashed rgba(91, 100, 116, 0.55);
      border-radius: 4px;
      background: rgba(251, 249, 246, 0.6);
    }

    .din-stamp-label {
      display: block;
      margin-top: 5px;
      font-size: 8pt;
      line-height: 1.25;
      color: var(--muted);
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    }

    .din-empfaenger {
      font-size: 11pt;
      line-height: 1.45;
      text-align: right;
      width: 100%;
    }

    .din-empfaenger-line {
      display: block;
      margin: 0;
    }

    .letter-reference-lines {
      margin: 0 0 1rem;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 11pt;
      line-height: 1.45;
      color: var(--text);
    }

    .letter-reference-lines[hidden] {
      display: none !important;
    }

    .letter-reference-line {
      display: block;
      margin: 0;
    }

    .antwort-compose-grid {
      display: flex;
      flex-direction: column;
      gap: 1.25rem;
    }

    .antwort-compose-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      align-items: start;
    }

    .antwort-compose-cell {
      min-width: 0;
    }

    .antwort-de-readonly {
      display: block;
      width: 100%;
      min-height: 2.5rem;
      padding: 8px 10px;
      border: 1px solid rgba(23, 45, 89, 0.12);
      border-radius: 8px;
      background: var(--surface);
      font-size: 0.95rem;
      line-height: 1.5;
      color: var(--text);
      white-space: pre-wrap;
      word-break: break-word;
    }

    .antwort-de-readonly.rs-live-de-body {
      min-height: 8rem;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 0.95rem;
      line-height: 1.55;
    }

    .antwort-de-readonly.is-translating {
      color: var(--text-faint);
      font-style: italic;
    }

    .din-briefkopf-field {
      display: inline-block;
      min-width: 4ch;
      max-width: 100%;
      padding: 0 2px;
      margin: 0;
      border: none;
      border-bottom: 1px solid transparent;
      border-radius: 0;
      background: transparent;
      font: inherit;
      color: inherit;
      vertical-align: baseline;
    }

    .din-briefkopf-field.is-missing {
      border-bottom-color: rgba(91, 100, 116, 0.35);
      letter-spacing: 0.05em;
    }

    .din-briefkopf-field:focus {
      outline: none;
      border-bottom-color: rgba(29, 58, 114, 0.45);
      background: rgba(220, 231, 247, 0.35);
    }

    .din-briefkopf-field.din-plz {
      min-width: 5ch;
      max-width: 7ch;
    }

    .din-briefkopf-field.din-betreff-input {
      display: block;
      width: 100%;
      font-weight: 700;
    }

    .din-briefkopf-readonly .din-readonly-line {
      display: block;
      margin: 0;
    }

    @media (max-width: 600px) {
      #rsDinBriefkopf.antwort-block {
        padding: 12px;
      }

      .din-briefkopf-row {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
      }

      .din-briefkopf-col--right {
        align-items: flex-end;
        text-align: right;
      }

      .din-briefkopf {
        font-size: 12px;
      }

      .din-absender {
        font-size: 12px;
        line-height: 1.35;
      }

      .din-absender-line,
      .din-empfaenger-line {
        word-break: break-word;
        overflow-wrap: anywhere;
      }

      .din-empfaenger {
        font-size: 12px;
      }

      .din-stamp {
        width: 68px;
      }

      .din-stamp-box {
        height: 56px;
      }

      .din-stamp-label {
        font-size: 7pt;
      }
    }

    .rs-letter-field-block {
      margin-bottom: 1.25rem;
    }

    .rs-letter-field-label {
      display: block;
      margin: 0 0 6px;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--text-mild);
      text-transform: uppercase;
      letter-spacing: 0.04em;
    }

    .rs-letter-input {
      display: block;
      width: 100%;
      min-height: 44px;   /* Touch-Ziel (Mobil-Pass 26.07.26: war 39 px) */
      padding: 8px 10px;
      border: 1px solid rgba(23, 45, 89, 0.14);
      border-radius: 8px;
      font-size: 0.95rem;
      font-family: inherit;
      line-height: 1.45;
      color: var(--text);
      background: var(--surface);
    }

    .rs-letter-input:focus {
      outline: 2px solid rgba(29, 58, 114, 0.35);
      outline-offset: 1px;
    }

    .rs-letter-body-input {
      background: var(--primary-muted);
      border-color: rgba(29, 58, 114, 0.28);
    }

    .rs-letter-body-input:focus {
      outline: 2px solid rgba(29, 58, 114, 0.35);
      outline-offset: 1px;
      background: var(--primary-muted);
    }

    .rs-live-de-preview.is-translating {
      color: var(--text-faint);
      font-style: italic;
    }

    .rs-letter-closing {
      margin-top: 0.5rem;
      padding-top: 0.25rem;
      font-family: Georgia, "Times New Roman", Times, serif;
      font-size: 11pt;
      line-height: 1.55;
      color: var(--text);
    }

    .rs-letter-closing .rs-letter-closing-name {
      display: block;
      margin-top: 0.35rem;
      min-width: 12ch;
      max-width: 100%;
    }

    .rs-letter-empty-hint {
      margin: 0 0 10px;
      font-size: 0.92rem;
      line-height: 1.5;
      color: var(--muted);
      font-style: italic;
    }

    .rs-letter-user-body {
      display: block;
      width: 100%;
      min-height: 140px;
      margin: 0;
    }

    .rs-letter-pre {
      white-space: pre-wrap;
      word-break: break-word;
      font-size: 0.95rem;
      line-height: 1.55;
      color: var(--text);
      margin: 0;
    }

    .rs-letter-block-target {
      margin-bottom: 18px;
      padding-bottom: 16px;
      border-bottom: 0.5px solid rgba(23, 45, 89, 0.16);
    }

    .rs-letter-block-german {
      margin-bottom: 18px;
    }

    .rs-letter-block-actions {
      margin-top: 4px;
    }

    .rs-letter-block-actions .template-download-block {
      margin-top: 1rem;
    }

    .rs-brief-freitext-input {
      margin-top: 12px;
    }

    .rs-letter-grund-live {
      display: inline;
      white-space: pre-wrap;
      word-break: break-word;
      background: rgba(220, 231, 247, 0.85);
      padding: 1px 4px;
      border-radius: 4px;
      font-weight: 600;
      min-width: 4ch;
    }

    .rs-letter-grund-live.is-empty .rs-ph {
      font-weight: 600;
    }

    .rs-letter-grund-live.is-translating {
      background: transparent;
    }

    .rs-letter-grund-translating {
      color: var(--muted);
      font-style: italic;
      font-weight: 400;
    }

    .rs-letter-german-title {
      margin: 0 0 10px;
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--text-mild);
    }

    .rs-letter-translation-box {
      margin-top: 10px;
      padding: 14px 16px;
      border-radius: 10px;
      background: var(--surface-sunken);
      border: 0.5px solid rgba(23, 45, 89, 0.1);
      font-size: 14px;
      line-height: 1.55;
      color: var(--text-mild);
    }

    .rs-letter-translation-title {
      margin: 0;
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--text-mild);
    }

    .sepa-toggle-btn {
      width: 100%;
      border: 0;
      border-radius: 12px;
      background: var(--accent-soft);
      color: var(--bk-siegel-700, #a03e10);
      font-weight: 800;
      padding: 0.9rem 1rem;
      cursor: pointer;
      box-shadow: var(--shadow);
      border: 0.5px solid rgba(228, 97, 29, 0.28);
      margin-top: 12px;
    }

    .sepa-section {
      margin: 1rem 0;
      padding: 1rem;
      border-radius: 14px;
      background: var(--surface);
      border: 0.5px solid rgba(228, 97, 29, 0.28);
      box-shadow: var(--shadow);
    }

    /* Schein klappt in der Karte unter dem Knopf auf (13.10.26): keine zweite Karte mit Schatten. */
    #rsStepsSection .sepa-section {
      margin: 12px 0 0;
      padding: 0;
      border: 0;
      box-shadow: none;
      background: transparent;
    }

    .sepa-hint {
      margin: 0 0 0.85rem;
      color: var(--text-mild);
      font-size: 0.95rem;
      line-height: 1.45;
    }

    .sepa-slip {
      background: var(--surface);
      border: 2px solid var(--accent);
      color: var(--text);
      padding: 0;
      max-width: 600px;
      margin: 0 auto;
      overflow: hidden;
    }

    .sepa-slip-head {
      padding: 18px 20px 14px;
    }

    .sepa-slip-title {
      margin: 0 0 4px;
      color: var(--text);
      font-weight: 800;
      font-size: 1.05rem;
    }

    .sepa-slip-subtitle {
      margin: 0;
      color: var(--muted);
      font-size: 0.86rem;
      line-height: 1.35;
    }

    .sepa-slip-section {
      border-top: 1px solid var(--accent);
      padding: 16px 20px;
    }

    .sepa-label {
      display: block;
      color: var(--accent-text);
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.08em;
      line-height: 1.2;
      margin-bottom: 7px;
      text-transform: uppercase;
    }

    .sepa-field {
      background: var(--surface);
      border: 1px solid var(--border);
      border-radius: 6px;
      color: var(--text);
      font-size: 15px;
      font-weight: 500;
      line-height: 1.35;
      min-height: 42px;
      padding: 10px 14px;
      word-break: break-word;
    }

    .sepa-field-mono {
      font-family: "Courier New", Courier, monospace;
      letter-spacing: 0.01em;
    }

    .sepa-field-amount {
      color: var(--text);
      font-size: 20px;
      font-weight: 700;
    }

    .sepa-empty {
      color: var(--text-faint);
      border-bottom: 1px dashed var(--border-strong);
      display: inline-block;
      font-size: 14px;
      font-weight: 400;
      min-width: 190px;
      padding-bottom: 2px;
    }

    .sepa-two-col {
      display: grid;
      gap: 16px;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    .sepa-self-data {
      display: grid;
      gap: 10px;
    }

    .sepa-warning {
      margin: 0.85rem auto 0;
      color: var(--danger-strong);
      font-weight: 700;
      font-size: 0.92rem;
      line-height: 1.45;
      max-width: 600px;
    }

    .sepa-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      margin-top: 0.9rem;
    }

    .sepa-action-btn {
      border: 0;
      border-radius: 10px;
      padding: 0.72rem 1rem;
      background: var(--accent);
      color: var(--on-accent);
      font-weight: 800;
      cursor: pointer;
    }

    .sepa-action-btn.secondary {
      background: var(--text-mild);
    }

    @media (max-width: 520px) {
      .sepa-two-col {
        grid-template-columns: 1fr;
      }
    }

    .rs-ph {
      background: rgba(220, 231, 247, 0.85);
      padding: 1px 4px;
      border-radius: 4px;
      font-weight: 600;
    }

    .rs-letter-field {
      display: inline-block;
      min-width: 6ch;
      max-width: 100%;
      padding: 1px 4px;
      margin: 0 1px;
      border: none;
      border-radius: 4px;
      background: rgba(220, 231, 247, 0.85);
      font-weight: 600;
      font-size: inherit;
      font-family: inherit;
      line-height: inherit;
      color: var(--text);
      vertical-align: baseline;
    }

    .rs-letter-field.rs-letter-plz {
      min-width: 4ch;
      max-width: 8ch;
    }

    .rs-letter-field:focus,
    .rs-letter-textarea:focus {
      outline: 2px solid rgba(29, 58, 114, 0.35);
      outline-offset: 1px;
    }

    .rs-letter-textarea {
      display: block;
      width: 100%;
      min-height: 120px;
      margin: 8px 0;
      padding: 8px 10px;
      border: none;
      border-radius: 8px;
      background: rgba(220, 231, 247, 0.85);
      font-size: inherit;
      font-family: inherit;
      line-height: 1.55;
      color: var(--text);
      resize: vertical;
    }

    .rs-brief-rechtshinweis {
      display: block;
      margin: 12px 0 8px;
      padding: 12px 14px;
      background: var(--notice-soft);
      border: 1px solid var(--notice-border);
      border-radius: 10px;
      font-size: 0.9rem;
      line-height: 1.5;
      color: var(--notice-text);
      white-space: normal;
    }

    .rs-yellow-box {
      background: var(--notice-soft);
      border: 0.5px solid var(--notice-border);
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 1rem;
      font-size: 0.95rem;
      line-height: 1.5;
      color: var(--notice-text);
    }

    .rs-yellow-box p {
      margin: 0;
    }

    .rs-muted {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 0.5px solid rgba(23, 45, 89, 0.12);
      font-size: 0.95rem;
      color: var(--text-mild);
      line-height: 1.55;
    }

    @media (max-width: 600px) {
      .hero {
        padding: 1.5rem 0 2rem;
      }

      .lang-btn {
        font-size: 0.78rem;
        padding: 0.45rem 0.6rem;
      }
    }

    @media print {
      body.sepa-printing .app-header,
      body.sepa-printing .bk-footer,
      body.sepa-printing .btn-back,
      body.sepa-printing #errorBoxResults,
      body.sepa-printing .rs-card,
      body.sepa-printing .results-download-share-stack,
      body.sepa-printing .rs-yellow-box {
        display: none !important;
      }

      body.sepa-printing #results,
      body.sepa-printing .results-view,
      body.sepa-printing #sepaSection {
        display: block !important;
        visibility: visible !important;
      }

      body.sepa-printing #sepaSection {
        box-shadow: none;
        border: 0;
      }

      /* Der Schein liegt seit 13.10.26 in der Schritte-Karte: Karte sichtbar lassen, ihren
         übrigen Inhalt ausblenden (die Regel oben blendet sonst alle .rs-card aus). */
      body.sepa-printing #rsStepsSection {
        display: block !important;
        border: 0;
        box-shadow: none;
        padding: 0;
        background: none;
      }
      body.sepa-printing #rsStepsSection > :not(#sepaSection) {
        display: none !important;
      }

      body.sepa-printing .sepa-actions,
      body.sepa-printing .sepa-toggle-btn,
      body.sepa-printing .sepa-hint {
        display: none !important;
      }

      /* Notweg ohne PDF-Dienst (13.10.26): Im Druck standen die Leiste und die Scrollleiste des
         Ergebnis-Overlays (#results ist position:fixed mit overflow:auto) mit auf dem Blatt.
         Overlay auflösen, alles außer dem Schein unsichtbar machen und den Schein nach oben. */
      body.sepa-printing .bk-nav,
      body.sepa-printing #navPanel,
      body.sepa-printing .results-topbar {
        display: none !important;
      }
      body.sepa-printing #results {
        position: static !important;
        inset: auto !important;
        overflow: visible !important;
        height: auto !important;
        padding: 0 !important;
        visibility: hidden;
      }
      body.sepa-printing #sepaSection,
      body.sepa-printing #sepaSection * {
        visibility: visible;
      }
      body.sepa-printing #sepaSection {
        position: absolute !important;
        top: 0;
        left: 0;
        right: 0;
        margin: 0 !important;
      }

      /* Klebende Kopfzeile: im Zahlschein-Druck ein normaler Block (die Überschrift
         bleibt wie bisher stehen, der Zurück-Knopf darin ist oben ausgeblendet). */
      body.sepa-printing .results-topbar {
        position: static !important;
        padding: 0 !important;
        border: 0 !important;
        background: none !important;
      }
    }

    .print-pdf-header {
      display: none;
    }

    .print-pdf-header-bar,
    .print-pdf-header-left {
      display: none;
    }

    @media print {
      @page {
        margin: 15mm;
      }

      body.results-printing {
        overflow: visible !important;
        background: var(--surface) !important;
      }

      /* Nur #results drucken: gesamte Eingabe-Seite und App-Shell ausblenden */
      body.results-printing > *:not(main),
      body.results-printing > header,
      body.results-printing > nav,
      body.results-printing > footer,
      body.results-printing #inputSection,
      body.results-printing .hero-section,
      body.results-printing .language-flags,
      body.results-printing .hero-flags-emojis,
      body.results-printing .app-nav,
      body.results-printing .hero,
      body.results-printing .hero-card,
      body.results-printing .hero-welcome,
      body.results-printing .drop-zone,
      body.results-printing .drop-zone-wrap,
      body.results-printing .mode-toggle,
      body.results-printing #panelFile,
      body.results-printing #panelText,
      body.results-printing #analyzeBtn,
      body.results-printing .btn-analyze,
      body.results-printing .lang-section,
      body.results-printing .bk-footer,
      body.results-printing #errorBox,
      body.results-printing main .container > *:not(#results) {
        display: none !important;
      }

      body.results-printing .btn-back,
      /* Fehlerbox der Ergebnisansicht: liegt INNERHALB von #results und würde sonst
         mitgedruckt (die Box im Hauptbereich fällt schon unter die Regel darüber). */
      body.results-printing #errorBoxResults,
      body.results-printing .results-download-share-stack,
      body.results-printing .sepa-toggle-btn,
      body.results-printing .sepa-actions,
      body.results-printing .template-download-block,
      body.results-printing .result-feedback,
      body.results-printing #results button {
        display: none !important;
      }

      body.results-printing .print-pdf-header {
        display: block !important;
        position: static !important;
        width: 100%;
        margin: 0 0 16px !important;
        padding: 0;
        background: var(--primary);
        box-sizing: border-box;
        break-inside: avoid;
        page-break-inside: avoid;
        page-break-after: avoid;
        break-after: avoid-page;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }

      body.results-printing .print-pdf-header-bar {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        padding: 16px 12mm;
        color: #fff;
      }

      body.results-printing .print-pdf-header-left {
        display: inline-flex !important;
        align-items: center;
        gap: 0.65rem;
        min-width: 0;
      }

      body.results-printing .print-pdf-logo {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 30px;
        height: 30px;
        border-radius: 8px;
        background: var(--surface);
        color: var(--primary);
        font-size: 1.05rem;
        font-weight: 800;
        line-height: 1;
        flex-shrink: 0;
      }

      body.results-printing .print-pdf-brand {
        display: inline !important;
        font-size: 1.08rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
        white-space: nowrap;
      }

      body.results-printing .print-pdf-date {
        display: block !important;
        font-size: 0.92rem;
        font-weight: 600;
        line-height: 1.2;
        white-space: nowrap;
        flex-shrink: 0;
      }

      body.results-printing .print-pdf-header-rule {
        display: block !important;
        height: 2px;
        width: 100%;
        background: var(--primary-hover);
      }

      body.results-printing #results {
        display: block !important;
        position: static !important;
        inset: auto !important;
        z-index: auto !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        padding: 0 !important;
        margin: 0 !important;
        background: var(--surface) !important;
      }

      body.results-printing #results .results-view {
        display: block !important;
        visibility: visible !important;
        max-width: none !important;
        padding: 0 !important;
        margin: 0 !important;
      }

      /* Klebende Kopfzeile: im Druck ein normaler Block ohne Rahmen/Fläche.
         Der Zurück-Knopf darin ist über `#results button` bereits ausgeblendet,
         die Überschrift bleibt sichtbar. */
      body.results-printing .results-topbar {
        position: static !important;
        display: block !important;
        padding: 0 !important;
        margin: 0 !important;
        border: 0 !important;
        background: none !important;
      }

      /* Im Druck wieder die frühere Überschriftgröße – die Verkleinerung gilt nur,
         weil die Leiste am Bildschirm dauerhaft mitläuft. */
      body.results-printing .results-topbar .results-page-title {
        font-size: 1.6rem !important;
      }

      body.results-printing #results h1,
      body.results-printing #results h2.results-page-title,
      body.results-printing #results .results-title,
      body.results-printing #results .results-page-title,
      body.results-printing #results #resultsHeading {
        margin: 0 0 16px !important;
        padding: 0 !important;
        page-break-after: avoid !important;
        break-after: avoid-page !important;
      }

      body.results-printing #results h1 + .rs-card,
      body.results-printing #results .results-title + .rs-card,
      body.results-printing #results .results-page-title + .rs-card,
      body.results-printing #results #resultsHeading + .rs-card {
        margin-top: 0 !important;
        page-break-before: avoid !important;
        break-before: avoid-page !important;
      }

      body.results-printing #results .rs-card,
      body.results-printing #results .rs-yellow-box,
      body.results-printing #results .sepa-section:not([hidden]),
      body.results-printing #results #rsTemplateSection:not([hidden]) {
        display: block !important;
        visibility: visible !important;
        box-shadow: none !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
      }

      body.results-printing #rsTemplateSection:not([hidden]) .antwort-block,
      body.results-printing #rsTemplateSection:not([hidden]) .antwort-compose-grid {
        display: block !important;
        visibility: visible !important;
      }

      body.results-printing .antwort-compose-cell--source,
      body.results-printing #rsBriefBetreffInput,
      body.results-printing #rsBriefBodyInput,
      body.results-printing #rsBriefBetreffLabel,
      body.results-printing #rsBriefBodyLabel,
      body.results-printing #rsBriefBetreffDeLabel,
      body.results-printing #rsBriefBodyDeLabel,
      body.results-printing #rsBriefRechtshinweisBox {
        display: none !important;
      }

      body.results-printing .antwort-compose-row {
        display: block !important;
      }

      body.results-printing .antwort-de-readonly {
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
        min-height: 0 !important;
        font-style: normal !important;
        color: #000 !important;
      }

      body.results-printing .rs-envelope {
        break-inside: avoid !important;
        page-break-inside: avoid !important;
      }

      body.results-printing #rsDinBriefkopf,
      body.results-printing #rsLetterBody,
      body.results-printing #rsLetterReferenceLines,
      body.results-printing #rsLetterClosingBlock,
      body.results-printing .din-briefkopf {
        display: block !important;
        visibility: visible !important;
        break-inside: avoid !important;
        page-break-inside: avoid !important;
        border: none !important;
        background: transparent !important;
        padding: 0 !important;
      }

      body.results-printing .din-stamp-box {
        border-color: var(--text-faint) !important;
      }
    }

    @media (min-width: 769px) {
      #btnPickFilesMobile,
      #btnTakePhoto {
        display: none !important;
      }
    }

    @media (max-width: 768px) {
      .antwort-compose-row {
        grid-template-columns: 1fr;
      }

      .app-nav-inner {
        gap: 0.5rem 0.75rem;
      }

      .brand-chip {
        padding: 0.2rem 0;
        gap: 0.45rem;
      }

      .brand-icon-svg {
        width: 32px;
        height: 32px;
        border-radius: 9px;
      }

      .brand-wordmark {
        font-size: 0.92rem;
      }

      .hero-nav-lang-trigger {
        max-width: min(100%, 11.5rem);
        padding: 0.52rem 0.62rem;
        font-size: 0.78rem;
        gap: 0.28rem;
      }

      .hero-nav-lang-trigger span {
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .hero-text .hero-flags-emojis {
        justify-content: center;
      }

      .hero-card {
        display: flex;
        flex-direction: column;
      }

      .hero-card .mode-toggle {
        order: 1;
      }

      .hero-card #panelFile.panel,
      .hero-card #panelText.panel {
        order: 1;
      }

      .hero-card .lang-section-target {
        order: 2;
      }

      /*
       * BEFUND 28.07.: Diese Liste war unvollständig. Flex gibt jedem Kind ohne `order`
       * implizit die 0 – und damit einen Platz VOR allem anderen. Auf schmalen Geräten
       * standen deshalb ganz oben in der Karte, noch vor der Eingabe:
       *   - die Einwilligungs-Häkchen (gehören unmittelbar vor den Analysieren-Knopf), und
       *   - der Hinweis „Orientierungshilfe – keine Rechtsberatung", der laut RDG-Vorgabe
       *     direkt am auslösenden Knopf stehen soll und dort seine Wirkung verliert.
       * Beide bekommen jetzt ihren Platz; die Reihenfolge entspricht wieder dem Markup.
       */
      .hero-card .art9-consent {
        order: 3;
      }

      .hero-card .btn-analyze {
        order: 4;
      }

      .hero-card .analyze-disclaimer {
        order: 5;
      }

      #targetLangGrid {
        display: none;
      }

      #targetLangLabel {
        display: none;
      }

      .target-lang-mobile-trigger {
        display: inline-flex;
      }

      #panelFile.panel.active {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
      }

      #panelFile.panel.active .drop-zone-wrap {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
      }

      .drop-zone-wrap .drop-zone {
        display: none !important;
      }

      .drop-zone-wrap .btn-pick-files-mobile {
        display: flex;
      }

      #panelFile.panel.active .btn-take-photo {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 0.5rem;
        padding: 1rem 1.5rem;
        font-size: 1rem;
        font-weight: 700;
        color: #fff;
        background: linear-gradient(180deg, var(--primary) 0%, var(--primary-hover) 100%);
        border: none;
        border-radius: var(--radius-sm);
        box-shadow: 0 4px 14px rgba(29, 58, 114, 0.4);
        transition: transform 0.1s, box-shadow 0.15s, filter 0.15s;
      }

      #panelFile.panel.active .btn-take-photo:hover {
        filter: brightness(1.05);
        box-shadow: 0 6px 20px rgba(29, 58, 114, 0.45);
      }

      #panelFile.panel.active .btn-take-photo:active {
        transform: scale(0.99);
      }

      #panelFile.panel.active .drop-zone-wrap .btn-take-photo.btn-pick-files-mobile {
        margin-top: 0;
      }

      #panelFile.panel.active .drop-zone-wrap .drop-file-name:not([hidden]) + .btn-take-photo.btn-pick-files-mobile {
        margin-top: 0.65rem;
      }

      #panelFile.panel.active > .btn-take-photo:not(.btn-pick-files-mobile) {
        margin-top: 0.65rem;
      }

      #panelFile.panel.active .btn-take-photo:focus-visible {
        outline: 2px solid #fff;
        outline-offset: 2px;
      }
    }

    /* Fußzeile = die der Startseite (Stile in assets/css/bk-nav.css, 30.09.26). Hier nur,
       dass sie unten sitzt, wenn die Seite kürzer als der Bildschirm ist. */
    .bk-footer {
      margin-top: auto;
    }

    .loading-screen {
      position: fixed;
      inset: 0;
      z-index: 1200;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(251, 249, 246, 0.92);
      backdrop-filter: blur(6px);
      padding: 1.25rem;
    }

    .loading-brand {
      position: absolute;
      top: 1rem;
      left: 1rem;
      opacity: 0.95;
      pointer-events: none;
    }

    .loading-brand .brand-chip {
      padding: 0.15rem 0;
      gap: 0.45rem;
    }

    .loading-brand .brand-icon-svg {
      width: 28px;
      height: 28px;
      border-radius: 8px;
    }

    .loading-brand .brand-wordmark {
      font-size: 0.88rem;
    }

    .loading-screen.visible {
      display: flex;
      /* Gleiche Handschrift wie beim Ergebnis (bk-view-in), nur schneller: Der Ladeschirm
         kommt unmittelbar nach dem Klick, da darf nichts bremsen. */
      animation: bk-view-in 140ms ease-out;
    }

    .loading-card {
      width: min(100%, 420px);
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: var(--shadow-lg);
      border-radius: var(--radius);
      text-align: center;
      padding: 1.6rem 1.3rem;
    }

    .loading-spinner {
      width: 3rem;
      height: 3rem;
      margin: 0 auto 1rem;
      border-radius: 50%;
      border: 4px solid rgba(29, 58, 114, 0.22);
      border-top-color: var(--primary);
      animation: spin 0.9s linear infinite;
    }

    .loading-title {
      margin: 0 0 0.45rem;
      font-size: 1.12rem;
      color: var(--text);
      font-weight: 800;
      letter-spacing: -0.03em;
    }

    .loading-message {
      margin: 0;
      min-height: 1.5em;
      font-size: 0.98rem;
      color: var(--text);
      line-height: 1.45;
      font-weight: 600;
    }

    .template-download-block {
      margin-top: 1rem;
    }

    .template-download-disclaimer {
      background: var(--notice-soft);
      border: 1px solid var(--notice-border);
      border-radius: var(--radius-sm);
      padding: 0.75rem 1rem;
      font-size: 0.92rem;
      color: var(--text);
      line-height: 1.45;
      margin: 0 0 1rem;
    }

    .template-download-buttons {
      display: flex;
      flex-wrap: wrap;
      gap: 0.75rem;
      align-items: stretch;
    }

    .btn-template-download {
      appearance: none;
      flex: 1 1 200px;
      font: inherit;
      font-size: 0.95rem;
      font-weight: 600;
      padding: 0.75rem 1rem;
      border-radius: var(--radius-sm);
      border: 2px solid var(--border);
      background: var(--surface);
      color: var(--text);
      cursor: pointer;
      transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
      text-align: center;
    }

    .btn-template-download:hover {
      border-color: rgba(29, 58, 114, 0.45);
      background: var(--surface-sunken);
    }

    .btn-template-download:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    .cookie-consent-bar {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 99999;
      padding: 14px 16px;
      padding-bottom: max(14px, env(safe-area-inset-bottom));
      background: var(--surface);
      border-top: 1px solid var(--border);
      box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
    }

    .cookie-consent-inner {
      max-width: 960px;
      margin: 0 auto;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 12px 16px;
    }

    .cookie-consent-msg {
      margin: 0;
      flex: 1 1 280px;
      font-size: 0.9rem;
      color: var(--text);
      line-height: 1.45;
    }

    /* flex-shrink: 0 stand hier bis 26.07.26 und hat den Knopf-Block auf seiner
       Inhaltsbreite (448 px) festgenagelt: bei 400 px Viewport lag „Einstellungen"
       komplett außerhalb des Bildschirms – die Auswahl war am Handy nicht mehr
       gleichwertig erreichbar (mobil gemessen, nicht geschätzt). Der innere
       flex-wrap konnte nicht greifen, weil der Block gar nicht erst schmaler wurde. */
    .cookie-consent-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      min-width: 0;
    }

    .cookie-consent-actions > button {
      flex: 1 1 auto;
      min-height: 44px;
    }

    /* Dauerhafter Zugang zu den Cookie-Einstellungen, sobald das Banner weg ist.
       Unten LINKS, weil unten rechts erfahrungsgemäß Support-/Chat-Widgets sitzen und
       die Ergebnisseite dort ihre Aktionsknöpfe hat. Bewusst zurückhaltend: es ist ein
       Zugang, keine Aufforderung. */
    .cookie-reopen-btn {
      position: fixed;
      left: 16px;
      bottom: max(16px, env(safe-area-inset-bottom));
      z-index: 9998;
      width: 44px;
      height: 44px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--surface);
      color: var(--text);
      font-size: 20px;
      line-height: 1;
      cursor: pointer;
      box-shadow: 0 2px 10px rgba(23, 45, 89, 0.14);
      opacity: 0.75;
      transition: opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    }

    .cookie-reopen-btn[hidden] {
      display: none !important;
    }

    /* Bei geöffneter Ergebnisansicht ausblenden (Befund 28.07.): Der Knopf liegt mit
       z-index 9998 über dem Ergebnis-Overlay (999) und verdeckte auf schmalen Geräten
       Inhalt – bei 400 px gemessen die Fristangabe, also ausgerechnet die wichtigste
       Zeile der Seite. Sobald das Ergebnis geschlossen ist, ist er wieder da; die
       Cookie-Einstellungen bleiben zusätzlich über den Fußzeilen-Link erreichbar.
       Die Consent-Leiste selbst (noch keine Entscheidung getroffen) ist NICHT betroffen. */
    body.results-open .cookie-reopen-btn {
      display: none;
    }

    .cookie-reopen-btn:hover,
    .cookie-reopen-btn:focus-visible {
      opacity: 1;
      box-shadow: 0 4px 16px rgba(23, 45, 89, 0.2);
    }

    @media (prefers-reduced-motion: reduce) {
      .cookie-reopen-btn {
        transition: none;
      }
    }

    @media print {
      .cookie-reopen-btn {
        display: none !important;
      }
    }

    .btn-cookie-accept {
      padding: 10px 18px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      background: var(--primary);
      color: #fff;
      font-family: inherit;
      font-size: 0.9rem;
    }

    .btn-cookie-accept:hover {
      background: var(--primary-hover);
    }

    .btn-cookie-reject {
      padding: 10px 18px;
      border: 1px solid var(--border);
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      background: var(--bg-deep);
      color: var(--text);
      font-family: inherit;
      font-size: 0.9rem;
    }

    .btn-cookie-reject:hover {
      background: var(--border-strong);
    }

    .btn-cookie-accept:focus-visible,
    .btn-cookie-reject:focus-visible,
    .btn-cookie-settings:focus-visible,
    .btn-cookie-save:focus-visible,
    .cookie-settings-close:focus-visible,
    .cookie-settings-toggle:focus-visible {
      outline: 2px solid var(--primary);
      outline-offset: 2px;
    }

    .btn-cookie-settings {
      padding: 10px 18px;
      border: 1px solid var(--primary);
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      background: transparent;
      color: var(--primary);
      font-family: inherit;
      font-size: 0.9rem;
    }

    .btn-cookie-settings:hover {
      background: rgba(29, 58, 114, 0.06);
    }

    .cookie-settings-modal {
      position: fixed;
      inset: 0;
      z-index: 100000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: max(16px, env(safe-area-inset-top))
        max(16px, env(safe-area-inset-right))
        max(16px, env(safe-area-inset-bottom))
        max(16px, env(safe-area-inset-left));
      box-sizing: border-box;
    }

    html.bk-cookie-settings-open,
    html.bk-cookie-settings-open body {
      overflow: hidden;
    }

    .cookie-settings-modal[hidden] {
      display: none !important;
    }

    .cookie-settings-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(12, 24, 48, 0.45);
      backdrop-filter: blur(2px);
    }

    .cookie-settings-dialog {
      position: relative;
      width: 100%;
      max-width: 440px;
      max-height: min(90vh, 560px, calc(100dvh - 32px));
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      margin: 0;
      padding: 22px 22px 18px;
      border-radius: 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
      z-index: 1;
    }

    .cookie-settings-close {
      position: absolute;
      top: 12px;
      right: 12px;
      width: 36px;
      height: 36px;
      border: none;
      border-radius: 8px;
      background: transparent;
      color: var(--text);
      font-size: 1.5rem;
      line-height: 1;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
    }

    .cookie-settings-close:hover {
      background: rgba(0, 0, 0, 0.06);
    }

    .cookie-settings-dialog-title {
      margin: 0 40px 8px 0;
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--text);
      line-height: 1.3;
    }

    .cookie-settings-intro {
      margin: 0 0 18px;
      font-size: 0.88rem;
      color: var(--text);
      opacity: 0.88;
      line-height: 1.45;
    }

    .cookie-settings-section {
      padding: 14px 0;
      border-top: 1px solid var(--border);
    }

    .cookie-settings-section:first-of-type {
      border-top: none;
      padding-top: 0;
    }

    .cookie-settings-row {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 14px;
    }

    .cookie-settings-row-text {
      flex: 1;
      min-width: 0;
    }

    .cookie-settings-cat {
      display: block;
      font-size: 0.95rem;
      margin-bottom: 6px;
    }

    .cookie-settings-desc {
      margin: 0;
      font-size: 0.85rem;
      color: var(--text);
      opacity: 0.9;
      line-height: 1.45;
    }

    .cookie-settings-badge {
      flex-shrink: 0;
      align-self: center;
      padding: 6px 10px;
      border-radius: 6px;
      font-size: 0.75rem;
      font-weight: 600;
      background: var(--primary-muted);
      color: var(--primary);
      white-space: nowrap;
    }

    .cookie-settings-toggle {
      width: 48px;
      height: 28px;
      border-radius: 14px;
      border: 1px solid var(--border);
      background: var(--border-strong);
      cursor: pointer;
      position: relative;
      flex-shrink: 0;
      padding: 0;
      transition: background 0.2s, border-color 0.2s;
    }

    .cookie-settings-toggle.is-on {
      background: var(--primary);
      border-color: var(--primary);
    }

    .cookie-settings-toggle::after {
      content: "";
      position: absolute;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--surface);
      top: 2px;
      left: 3px;
      transition: transform 0.2s;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    }

    .cookie-settings-toggle.is-on::after {
      transform: translateX(20px);
    }

    .cookie-settings-footer {
      margin-top: 20px;
      padding-top: 16px;
      border-top: 1px solid var(--border);
      display: flex;
      justify-content: flex-end;
    }

    .btn-cookie-save {
      padding: 10px 22px;
      border: none;
      border-radius: 8px;
      font-weight: 600;
      cursor: pointer;
      background: var(--primary);
      color: #fff;
      font-family: inherit;
      font-size: 0.9rem;
    }

    .btn-cookie-save:hover {
      background: var(--primary-hover);
    }

    /* =====================================================================
       Barrierefreiheits-Pass (Phase 5b, 23.07.2026)
       Grundlage: docs/a11y-audit.md + Messung im Browser (nicht geraten):
       Kontraste waren bereits AA-konform, die drei Lücken hier waren es nicht.
       Bewusst KEINE optische Neugestaltung – das ist der separate 5b-Punkt
       „Visuelles Re-Design" und braucht eine Freigabe.
       ===================================================================== */

    /* 1) Bewegung reduzieren (WCAG 2.3.3). Es gab 16 Regeln mit Transitions/
          Animationen und KEINE einzige prefers-reduced-motion-Abfrage. Für
          Menschen mit vestibulären Beschwerden ist das kein Komfortthema. */
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
      }

      /* AUSNAHME – Fortschrittsanzeigen (Nachtrag 28.07.). Die Regel darüber traf auch
         den Lade-Spinner: Er stand still, während die Analyse bis zu 60 Sekunden läuft.
         Ausgerechnet für die Gruppe, die „Bewegung reduzieren" eingeschaltet hat, sah die
         App damit aus, als hinge sie. WCAG 2.3.3 meint nicht-essenzielle Bewegung – die
         Rückmeldung „es läuft noch" ist essenziell.
         Statt Rotation ein ruhiges Auf- und Abblenden: kein Bewegungsreiz, aber sichtbar
         lebendig. Gilt für beide Anzeigen (Vollbild-Ladeschirm und Knopf-Spinner). */
      .loading-spinner,
      .btn-analyze.loading .spinner {
        animation-name: bk-progress-pulse !important;
        animation-duration: 1.6s !important;
        animation-iteration-count: infinite !important;
        animation-timing-function: ease-in-out !important;
      }
    }

    @keyframes bk-progress-pulse {
      0%, 100% { opacity: 1; }
      50% { opacity: 0.4; }
    }

    /* 2) Sichtbarer Tastatur-Fokus als GRUNDREGEL. Es gab 15 :focus-visible-
          Regeln, aber alle elementspezifisch – alles andere (Kontoknopf,
          Aktenkoffer, Formularfelder, neue Knöpfe) hatte nur den schwachen
          Browser-Default. Spezifischere Regeln oben gewinnen weiterhin. */
    :focus-visible {
      outline: 3px solid var(--primary);
      outline-offset: 2px;
      border-radius: 4px;
    }

    /* 3) Touch-Ziele. Gemessen: Sprach-Chips 38 px, „Anmelden" 33 px,
          Footer-Links 17 px. Die Zielgruppe bedient das Produkt überwiegend
          am Handy. 44 px = Apple HIG / WCAG 2.5.5; für die Footer-Zeile wäre
          das unverhältnismäßig, dort gilt die AA-Grenze von 24 px (WCAG 2.5.8). */
    .lang-btn {
      min-height: 44px;
    }

    /* Nachtrag 26.07.26 (Mobil-Pass bei 400 px): Die Regel oben deckte nur .lang-btn ab.
       Der mobile Sprach-Umschalter im Kopf – für diese Zielgruppe das erste und
       wichtigste Bedienelement überhaupt – blieb bei 37 px. */
    .ui-lang-mobile-trigger,
    .target-lang-mobile-trigger {
      min-height: 44px;
    }

    .bk-footer__link {
      display: inline-block;
      min-height: 24px;
    }

    /* Nachtrag 28.07. (Messlauf über alle Ansichten bei 400 px): Zwei Ziele waren noch
       zu klein und lagen außerhalb der bisher geprüften Bereiche.
       Der Schließen-Knopf der Sprachdialoge mit 21x26 px ist der schlimmste Fall –
       das Sprachmenü ist für die Zielgruppe das wichtigste Bedienelement überhaupt. */
    .ui-lang-modal-close {
      min-width: 44px;
      min-height: 44px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }

    /* Das Markenlogo im Kopf ist zugleich der Link zur Startseite (38 px). */
    .brand {
      min-height: 44px;
    }

    /* Zahlschein: Feldbezeichnung in der Zielsprache unter der deutschen. Kleiner und
       gedämpft – die deutsche Bezeichnung ist die maßgebliche (der Schein geht an eine
       deutsche Bank), die Zielsprache ist die Verständnishilfe. */
    .sepa-label-ziel {
      display: block;
      font-weight: 500;
      font-size: 0.78rem;
      line-height: 1.35;
      color: var(--text-mild);
      text-transform: none;
      letter-spacing: normal;
    }

    .sepa-label-ziel:empty {
      display: none;
    }

    /* Fristen-Erinnerung: sitzt in der Fristbox, unter dem Datum, auf das sie sich bezieht.
       Optisch zurückhaltend – die Warnung selbst soll weiter die Hauptrolle spielen. */
    .bk-reminder-box {
      margin-top: 0.9rem;
      padding-top: 0.75rem;
      border-top: 1px solid var(--border);
    }

    .bk-reminder-label {
      display: flex;
      align-items: flex-start;
      gap: 0.55rem;
      cursor: pointer;
      font-weight: 600;
      line-height: 1.45;
      min-height: 44px;   /* Touch-Ziel, wie die übrigen Bedienelemente */
    }

    .bk-reminder-label input {
      margin-top: 0.75rem;
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
    }

    .bk-reminder-hint {
      margin: 0.2rem 0 0;
      font-size: 0.82rem;
      line-height: 1.45;
      color: var(--text-mild);
    }

    .bk-reminder-msg {
      margin: 0.5rem 0 0;
      font-size: 0.85rem;
      font-weight: 600;
      color: var(--danger);
    }

    .bk-reminder-msg.is-ok {
      color: var(--success-text, var(--primary));
    }

    /* Verwaltung im Konto: eine Zeile je gemerkter Frist. */
    .bk-reminder-list {
      list-style: none;
      margin: 0.4rem 0 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }

    .bk-reminder-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.6rem;
      padding: 0.5rem 0.7rem;
      background: var(--surface-sunken);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 0.9rem;
    }

    .bk-reminder-item button {
      appearance: none;
      border: 1px solid var(--border-strong);
      background: var(--surface);
      color: var(--text);
      font: inherit;
      font-size: 0.82rem;
      border-radius: var(--radius-sm);
      padding: 0.35rem 0.7rem;
      min-height: 44px;
      cursor: pointer;
      flex: 0 0 auto;
    }

    /*
     * Cookie-Einstellungen (Nachtrag 28.07., zweiter Messlauf): Schließen 36 px,
     * Speichern 38 px – und der Schalter für die Analyse-Einwilligung nur 28 px hoch.
     * Gerade der ist heikel: Wer schlecht trifft, schaltet ungewollt zu oder gar nicht ab.
     * Die Schalter-OPTIK (48 × 28 mit dem Knubbel darin) bleibt unverändert; sie steckt in
     * einem ::after, das an der Höhe des Elements hängt. Vergrößert wird deshalb nur die
     * TREFFERFLÄCHE über einen unsichtbaren Rahmen (::before), der über das Element
     * hinausragt – das ist die übliche „hit slop"-Technik.
     */
    .cookie-settings-close {
      min-width: 44px;
      min-height: 44px;
    }

    .btn-cookie-save {
      min-height: 44px;
    }

    .cookie-settings-toggle::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: max(100%, 44px);
      height: 44px;
    }

    /* Rückmeldung beim Drücken (Phase 5b). Es gab sie für vier Elemente – der
       Analysieren-Knopf, das Logo, „Kamera öffnen", das Entfernen-Kreuz an der Vorschau.
       Alle Aktionen im Ergebnis reagierten beim Antippen gar nicht: Auf dem Handy fehlt
       der Hover-Zustand, das Drücken ist dort die einzige Rückmeldung, dass ein Tippen
       angekommen ist. Bewusst nur diese Auswahl statt einer Regel für alle Knöpfe –
       Elemente mit eigenem transform (z. B. der Passwort-Schalter, der per translateY
       zentriert wird) würden sonst verrutschen. */
    .btn-back:active,
    .btn-archive-save:active,
    .btn-antwort-print:active,
    .btn-whatsapp-share:active,
    .result-feedback-btn:active:not(:disabled),
    .sepa-action-btn:active,
    .sepa-toggle-btn:active,
    .rs-brief-generate-btn:active:not(:disabled),
    .btn-template-download:active {
      transform: translateY(1px);
    }

/* Originalschreiben (original-ansicht.js, 14.10.26): nur am Bildschirm – Druck und PDF-Export zeigen die Analyse. */
@media print {
  .bk-orig, .bk-ansicht, .bk-orig-vollbild { display: none !important; }
}