/* Gemeinsame Styles fuer die Dashboard-Seiten (App-Shell mit linker
   Navigationsleiste + Hauptbereich). Baut auf style.css auf, nutzt aber
   das kontraststarke #c75000 fuer Text und Links — seit 08.08.2026 ist das
   auch die globale Akzentfarbe in style.css. */

.dash-skip { position:absolute; left:-999px; top:auto; background:#fff; color:#1b2a4a; padding:.6rem 1rem; z-index:100; border-radius:0 0 6px 0; font-weight:600; }
.dash-skip:focus { left:0; top:0; }

/* App-Shell: Navigationsleiste links, Inhalt rechts */
.app-shell { display:flex; min-height:100vh; }
.app-sidebar { width:260px; flex-shrink:0; background:var(--primary); color:#fff; display:flex; flex-direction:column; }
.app-brand { display:block; padding:1.1rem 1.25rem; font-size:1.35rem; font-weight:700; color:#fff; text-decoration:none; border-bottom:1px solid rgba(255,255,255,.15); }
.app-sidebar nav { display:flex; flex-direction:column; flex:1; }
.app-nav { list-style:none; padding:.5rem 0; margin:0; flex:1; display:flex; flex-direction:column; }
.app-nav li { margin:0; }
.app-nav a { display:block; padding:.7rem 1.25rem; color:#fff; text-decoration:none; border-left:4px solid transparent; }
.app-nav a:hover { background:rgba(255,255,255,.10); }
.app-nav a[aria-current="page"] { background:rgba(255,255,255,.16); border-left-color:var(--accent); font-weight:700; }
.app-nav button { display:block; width:100%; text-align:left; background:transparent; color:#fff; border:none; border-left:4px solid transparent; padding:.7rem 1.25rem; font-size:1rem; font-family:inherit; cursor:pointer; }
.app-nav button:hover { background:rgba(255,255,255,.10); }
.app-nav-logout { margin-top:auto; border-top:1px solid rgba(255,255,255,.15); padding-top:.4rem; }
.app-content { flex:1; min-width:0; }

/* Auf schmalen Bildschirmen: Leiste nach oben, Navigation umbrechend (immer sichtbar) */
@media (max-width:768px) {
  .app-shell { flex-direction:column; }
  .app-sidebar { width:auto; }
  .app-sidebar nav { flex:none; }
  .app-nav { flex-direction:row; flex-wrap:wrap; padding:.25rem; }
  .app-nav a, .app-nav button { border-left:none; border-bottom:4px solid transparent; }
  .app-nav a[aria-current="page"] { border-left:none; border-bottom-color:var(--accent); }
  .app-nav-logout { margin-top:0; border-top:none; }
}

.dash-main { max-width:880px; margin:0; padding:1.5rem 1.5rem 3rem; }
/* Michael 12.07.2026 (Optik 4): Trennstrich unter der Topueberschrift der
   Dashboard-Seiten — wirkt sonst gequetscht. Gilt nur fuer die H1 direkt in
   der Hauptflaeche (Seitentitel), nicht fuer H1 in Karten/Dialogen. */
.dash-main > h1:not(.dash-greeting) { padding-bottom:.5rem; border-bottom:1px solid var(--border); margin-bottom:1.2rem; }
/* Ueberschriften-Groessen (Michael, 26.08.2026): H1 auf 75 % des
   Browser-Standards (2rem -> 1.5rem), H2 etwas kleiner (1.5rem -> 1.25rem).
   NUR Darstellung — die Ebenen bleiben (H1 = Seitenthema, H2 = Abschnitt).
   Gilt auch fuer die Projektseite (app.html): dort war die H1 (Projektname,
   .card-name 1.05rem) KLEINER als die H2-Abschnitte; jetzt H1 1.5rem, alle
   Abschnitte einheitlich 1.25rem. Steht VOR .dash-item h2 (1.1rem), damit die
   Listen-Titel bei gleicher Spezifitaet ihre kleinere Groesse behalten. */
.dash-main h1 { font-size:1.5rem; }
.dash-main h2 { font-size:1.25rem; }
/* Links im Knopf-Look (Michael, 26.08.2026): "Alle Projekte anzeigen" und
   alle Zurueck-Links der Unterseiten. Bleiben semantisch LINKS (Navigation),
   nur die Optik ist die des Sekundaer-Knopfs. */
.dash-main a.btn { display:inline-block; text-decoration:none; }
.dash-main a.btn-secondary { color:var(--text); }
.dash-main a.btn:hover, .dash-main a.btn:focus { text-decoration:underline; }
.dash-greeting { margin:.5rem 0 .25rem; }
.dash-sub { color:var(--text-muted); margin:0 0 2rem; }
/* Info-Kasten ueber der Prompt-Liste (Karbe-Wunsch 07.07.2026): Text in
   einem Feld, Schriftgroesse wie .dash-meta (Prompt-Beschreibung).
   Kontrast text-muted auf card-bg = 8,9:1 (WCAG AAA). */
.dash-intro-box { max-width:640px; background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:1rem 1.25rem; margin:0 0 1.5rem; font-size:.9rem; line-height:1.6; color:var(--text-muted); }
.dash-section { margin-bottom:2.5rem; }

/* Karten-Block (Einstellungen) */
.dash-card { background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:1.25rem 1.5rem; margin-bottom:1.25rem; max-width:640px; }
.dash-card h2 { margin-top:0; }
/* Einstellungen (Michael Karbe, Mail 14.09.2026): Kartentitel ist der Link zur Unterseite — orange wie die
   Projekttitel auf „Meine Projekte“ (.dash-item h2 a), die frühere Link-Zeile darunter entfällt. */
.dash-card h2 a { color:#c75000; text-decoration:none; }
.dash-card h2 a:hover, .dash-card h2 a:focus { text-decoration:underline; }
/* Fliesstext-Karten (Ueber uns): Schrift wie die Prompt-Beschreibungen
   (Michael, 25.08.2026) — .9rem, gedaempft, Zeilenabstand 1.6.
   Kontrast text-muted auf card-bg = 8,9:1 (wie .dash-intro-box). */
.dash-card.dash-prosa p { font-size:.9rem; line-height:1.6; color:var(--text-muted); }
.dash-card.dash-prosa p + p { margin-top:.75rem; }
.dash-card.dash-prosa p:last-child { margin-bottom:0; }
/* Listen in Prosa-Karten (Preise, 04.09.2026, Michael): gleiche Schrift und Groesse
   wie der Fliesstext auf "Ueber uns". */
.dash-card.dash-prosa ul, .dash-card.dash-prosa ol { margin:.35rem 0 0; padding-left:1.25rem; }
.dash-card.dash-prosa li { font-size:.9rem; line-height:1.6; color:var(--text-muted); }
.dash-card.dash-prosa li + li { margin-top:.35rem; }
.dash-card.dash-prosa p + ul, .dash-card.dash-prosa p + ol { margin-top:.6rem; }

/* Formularfelder */
.dash-field { margin-bottom:1.25rem; }
.dash-field label { display:block; font-weight:600; margin-bottom:.3rem; }
.dash-hint { display:block; color:var(--text-muted); font-size:.9rem; margin-bottom:.4rem; }
.dash-input, .dash-select { width:100%; max-width:480px; padding:.6rem; border:1px solid var(--border); border-radius:6px; font-size:1rem; background:#fff; color:var(--text); }

/* Listen (Projekte, Benutzer) */
.dash-list { list-style:none; padding:0; margin:0; display:grid; gap:.75rem; }
.dash-item { background:var(--card-bg); border:1px solid var(--border); border-radius:8px; padding:1rem 1.25rem; }
.dash-item h2, .dash-item h3 { margin:0 0 .2rem; font-size:1.1rem; }
.dash-item a { color:#c75000; text-decoration:underline; }
/* Links im Knopf-Look (z. B. Report in der Benutzerliste, 11.08.2026):
   die Listen-Linkfarbe #c75000 schafft auf dem Knopf-Hintergrund kein AA —
   Links mit .btn uebernehmen deshalb die normale Knopf-Textfarbe. */
.dash-item a.btn { color:var(--text); text-decoration:none; }
.dash-item a.btn:hover, .dash-item a.btn:focus { text-decoration:underline; }
/* Report-Seite (11.08.2026): Wertzeilen "Begriff: Wert" als ruhige,
   eng gesetzte Absaetze — bewusst keine <dl> (VoiceOver-Zaehlerei). */
.dash-report-zeile { margin:.25rem 0; }
/* Michael 17.07.2026 (Optik A1): Projekttitel fett, OHNE Dauer-Unterstrich.
   Erkennbarkeit als Link bleibt ueber Farbe + Unterstrich bei Hover/Fokus. */
.dash-item h2 a, .dash-item h3 a { font-weight:700; text-decoration:none; }
.dash-item h2 a:hover, .dash-item h3 a:hover,
.dash-item h2 a:focus, .dash-item h3 a:focus { text-decoration:underline; }
.dash-meta { color:var(--text-muted); font-size:.9rem; margin:.2rem 0 0; }
/* Kontaktformular: Luft zwischen Einleitung und erstem Feld sowie zwischen
   Datenschutz-Hinweis und Senden-Knopf (Steve, 26.08.2026). Nach .dash-meta,
   weil gleiche Spezifitaet – die Reihenfolge entscheidet. */
.dash-form-intro { margin-bottom:1rem; }
.dash-form-hinweis { margin-bottom:1rem; }
.dash-actions { margin-top:.7rem; display:flex; gap:.4rem; flex-wrap:wrap; }
.dash-empty { color:var(--text-muted); background:var(--card-bg); border:1px dashed var(--border); border-radius:8px; padding:1.5rem; }

.dash-limit { margin:.25rem 0 1.25rem; font-weight:600; color:var(--text); background:var(--card-bg); border:1px solid var(--border); border-left:4px solid #c75000; border-radius:6px; padding:.6rem .9rem; } /* max-width 520px entfernt (Michael 26.08.2026): so breit wie die Projektkarten */

.dash-footer { padding:1.5rem; border-top:1px solid var(--border); color:var(--text-muted); }
/* 10.06.2026: #c75000 ergibt auf dem App-Hintergrund #f5f7fa nur 4,27:1 (knapp
   unter WCAG 2.2 AA). #b84a00 ist minimal dunkler (4,87:1 auf #f5f7fa, 5,23:1 auf
   Weiss), bleibt dieselbe Markenfarbe und erfuellt AA. Gilt fuer Footer-Links und
   den Spenden-Link. */
.dash-footer a { color:#b84a00; }
.dash-support { margin-top:1rem; padding-top:1rem; border-top:1px solid var(--border); max-width:640px; }
.dash-support-text { margin:0 0 .5rem; font-size:.9rem; }
.dash-support-link { color:#b84a00; font-weight:600; text-decoration:underline; }
.dash-support-note { margin:.4rem 0 0; font-size:.8rem; color:var(--text-muted); }

a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible { outline:3px solid #c75000; outline-offset:2px; }
.app-sidebar a:focus-visible, .app-nav button:focus-visible { outline:3px solid #fff; outline-offset:-3px; }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Neuigkeiten: Knopf + barrierefreier Dialog auf dem Dashboard (04.06.2026) */
.dash-news-btn { display:inline-block; background:var(--card-bg); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:.5rem 1rem; font-size:.95rem; font-weight:600; cursor:pointer; margin:0 0 2rem; }
.dash-news-btn.has-unread { background:#c75000; color:#fff; border-color:#c75000; }
.dash-news-btn:focus-visible { outline:2px solid #c75000; outline-offset:2px; }
.dash-news-panel { position:fixed; inset:0; background:rgba(0,0,0,.5); display:flex; align-items:center; justify-content:center; z-index:200; padding:1rem; }
.dash-news-panel[hidden] { display:none; }
.dash-news-panel-content { background:var(--card-bg); border-radius:12px; padding:1.5rem; width:100%; max-width:560px; max-height:80vh; overflow-y:auto; box-shadow:0 20px 60px rgba(0,0,0,.25); }
.dash-news-panel-header { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1rem; padding-bottom:.75rem; border-bottom:2px solid var(--border); }
.dash-news-panel-header h2 { margin:0; font-size:1.2rem; }
.dash-news-close { background:var(--bg); border:1px solid var(--border); color:var(--text); border-radius:6px; padding:.4rem .9rem; font-weight:600; cursor:pointer; }
.dash-news-close:focus-visible { outline:2px solid #c75000; outline-offset:2px; }
.dash-news-list { list-style:none; padding:0; margin:0; display:grid; gap:.6rem; }
.dash-news-item { background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:.75rem 1rem; font-size:.95rem; line-height:1.5; }
/* 31.08.2026: Das Datum sitzt auf .dash-news-item mit dem grauen App-Grund
   #f5f7fa — dort schafft #c75000 nur 4,27:1. Dieselbe Loesung wie in der
   Fusszeile (10.06.2026): #b84a00, 4,87:1, gleiche Markenfarbe. Die Klappe
   „Frühere Neuigkeiten“ liegt auf dem weissen Karten-Grund und bleibt. */
.dash-news-date { font-weight:700; color:#b84a00; margin-right:.4rem; white-space:nowrap; }
.dash-news-more { margin-top:.75rem; }
.dash-news-more summary { cursor:pointer; color:#c75000; font-weight:600; padding:.3rem 0; }
.dash-news-more summary:focus-visible { outline:2px solid #c75000; outline-offset:2px; }
.dash-news-more .dash-news-list { margin-top:.6rem; }


/* Sprach-Auswahl in den Einstellungen (01.07.2026) - natives Link-Menue.
   Aktiver Zustand + Fokus in AA-tauglichem Orange #c75000 (4.59:1 auf Weiss). */
.lang-choice ul { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.lang-choice li { margin: 0; }
.lang-option { display: inline-block; padding: .5rem .9rem; border: 2px solid var(--border, #ccc); border-radius: 8px; text-decoration: none; color: var(--text, #1a1a1a); background: #fff; line-height: 1.2; }
.lang-option:hover { border-color: #c75000; }
.lang-option:focus-visible { outline: 3px solid #c75000; outline-offset: 2px; }
.lang-option.is-current { border-color: #c75000; background: #c75000; color: #fff; font-weight: 700; }

/* Rechtstexte in der App-Ansicht (08.08.2026): Der nachgeladene
   .legal-container lag direkt auf dem grauen Seitenhintergrund (#f5f7fa).
   Dort schafft die Akzentfarbe #c75000 nur 4,27:1 — knapp unter AA, obwohl
   sie auf Weiss 4,59:1 erreicht. Statt die Markenfarbe ein zweites Mal zu
   aendern, bekommt der Textblock den weissen Kartengrund, auf dem sie
   passt. Nebenbei sieht es aus wie die uebrigen Karten der App.
   Betrifft /nutzungsbedingungen-app, /datensicherheit, /widerruf-app. */
#legalContent,
#datensicherheitContent {
  background: var(--card-bg, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  max-width: 60rem;
}
#legalContent > .legal-container,
#datensicherheitContent > .legal-container { max-width: none; margin: 0; padding: 0; background: none; }

/* Oeffentliches Seitengeruest (base_oeffentlich.html, 25.08.2026): Die
   Formulare von Kontakt/Kuendigen/Widerrufen nutzen die generische
   .error-message aus style.css, die fuer die zentrierten Login-Karten
   gedacht ist. In der linksbuendigen Hauptflaeche soll die Meldung unter
   dem Knopf stehen, nicht in der Mitte. Textarea/Select in .dash-input
   bekommen dieselbe Breite wie die Eingabefelder. */
.dash-main .error-message { text-align: left; }
.dash-main textarea.dash-input { max-width: 480px; }

/* Meine Ausgaben (11.09.2026): Reiter im Projektkopf + Karten auf der Ausgaben-Seite */
.proj-tabs ul { list-style:none; display:flex; gap:.5rem; padding:0; margin:.6rem 0 .2rem; flex-wrap:wrap; }
.proj-tabs a { display:inline-block; padding:.35rem .9rem; border:1px solid var(--border); border-radius:6px; text-decoration:none; color:var(--text); font-weight:600; background:var(--card-bg); }
.proj-tabs a[aria-current="page"] { background:#c75000; color:#fff; border-color:#c75000; }
.proj-tabs a:hover, .proj-tabs a:focus { text-decoration:underline; }
.proj-tabs a:focus-visible { outline:2px solid #c75000; outline-offset:2px; }
.ausgabe-karte { display:flex; gap:1rem; flex-wrap:wrap; align-items:flex-start; }
.ausgabe-karte .ausgabe-text { flex:1 1 18rem; min-width:0; }
.ausgabe-vorschau { max-width:150px; height:auto; border:1px solid var(--border); border-radius:4px; display:block; background:#fff; }
.ausgabe-aktionen { display:flex; gap:.5rem; flex-wrap:wrap; align-items:center; margin-top:.6rem; }
/* Primaer-Knopf als Link in einer Karte: .dash-item a.btn setzt sonst die dunkle Textfarbe auf Orange (axe color-contrast, Klicktest 11.09.) */
.dash-item a.btn.btn-primary { color:#fff; }
.dash-item a.btn.btn-primary:hover, .dash-item a.btn.btn-primary:focus { color:#fff; }
.ausgabe-details { margin:.5rem 0 0; }
.ausgabe-details summary { cursor:pointer; font-weight:600; }
/* Pruefbericht und Hoerprobe in Infotext-Groesse (Michael Karbe, Mail 14.09.2026, Punkt 4 — wie im Word-Dialog). */
.ausgabe-details > div { font-size:.9rem; }
.ausgabe-details ul { margin:.3rem 0 .4rem; padding-left:1.2rem; }
.ausgabe-hoerprobe { max-height:22rem; overflow:auto; padding:.4rem .6rem; border:1px solid var(--border); border-radius:6px; }
.ausgabe-hoerprobe p { margin:.15rem 0; }
.ausgaben-filter { display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; margin:0 0 1.2rem; }
.ausgaben-filter select { padding:.4rem; border:1px solid var(--border); border-radius:4px; font-size:.95rem; }