/* Gestaltung Johannes Mairhofer (podcast-nerdcafe.masdemas.de)
   Farben, Schrift und Kopfleiste aus seinem WordPress-Audit-Werkzeug
   (Tools/19_wordpress-audit/prototyp/audit-seite.css): helle Flaeche, Text #2D3748,
   Lila als Akzent, Koralle fuer den Hauptknopf, Systemschrift, Logo oben links.
   Wird nach stil.css und overlay-hell.css geladen und ueberschreibt nur die Gestaltung.
   Anmeldemaske ebenfalls in seinem Auftritt (Entscheidung User 20.10.2026), Aufbau der
   Standardmaske (IDs, Anordnung) bleibt. */

:root {
  --seite: #F7FAFC;
  --karte: #ffffff;
  --karte-2: #EDF2F7;
  --linie: #dfe6ee;
  --linie-2: #c5d2df;
  --text: #2D3748;
  --akzent: #fe665d;
  --akzent-hell: #ffe9e7;
  --lila: #f2e6f6;
  --marke: #69227b;
  --hellblau: #f2e6f6;
  --gruen: #13612e;
  --hellgruen: #e2f3e8;
  --rot: #9b1c1c;
  --hellgrau: #e2e8f0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  color: var(--text); line-height: 1.65;
}
input, select, textarea, .btn-leise, .pw-link { color: var(--text); }
.btn:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible, summary:focus-visible {
  outline: 2px solid var(--marke);
}

/* Knoepfe wie im Audit-Werkzeug */
.btn { border-radius: 10px; font-weight: 750; }
.btn-primaer { background: var(--akzent); color: #1a1a1a; }
.btn-primaer:hover { background: #ff7f77; }

/* Kopfleiste statt dunkler Seitenleiste */
.app { display: block; }
.seitenleiste {
  position: sticky; top: 0; z-index: 50; flex-direction: row; align-items: center; flex-wrap: wrap;
  gap: .65rem 1rem; padding: .7rem max(1.5rem, calc((100vw - 1080px) / 2 + 1.5rem));
  background: var(--seite); color: var(--text); border-bottom: 1px solid var(--linie);
}
.seitenleiste-logo { height: 30px; }
.seitenleiste-titel { margin: 0; padding-left: .65rem; border-left: 1px solid var(--linie-2);
                      font-size: .85rem; font-weight: 650; line-height: 1.12; }
.seitenleiste-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.seitenleiste select { width: auto; margin: 0; padding: .35rem .7rem; font-size: .85rem; }
.navigation { flex-direction: row; gap: 4px; }
.navigation button { color: var(--text); padding: .35rem .8rem; font-size: .9rem; }
.navigation button:hover { background: var(--karte-2); }
.navigation button[aria-current="page"] { background: var(--lila); color: var(--marke); }
.seitenleiste-fuss { margin: 0 0 0 auto; padding: 0; display: flex; align-items: center; gap: .65rem; }
/* Sonst bricht die Kopfleiste um. Wer angemeldet ist, steht im Hinweis am Abmelden-Knopf. */
.angemeldet { display: none; }
.btn-dunkel { width: auto; min-height: 0; padding: .35rem .9rem; border-color: var(--linie-2); color: var(--text);
              font-weight: 400; font-size: .85rem; }
.btn-dunkel:hover { background: var(--karte-2); }

.inhalt { margin: 0 auto; max-width: 1080px; padding: 2.5rem 1.5rem 80px; }
.kopf h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); line-height: 1.05; letter-spacing: -.035em; }
.karte, .gruppe, .zeilen-karte, .tabelle { border-radius: 16px; }
.gruppe-kopf { background: var(--karte-2); }

/* Etiketten in seinen Farben, Schrift dunkel */
.etikett-art-entwurf { background: var(--lila); color: var(--marke); }
.etikett-art-hintergrund { background: var(--karte-2); border: 1px solid var(--linie-2); }
.weg-nr { border-color: var(--linie-2); }
.schritt-erledigt > summary .weg-nr, .schritt-freigegeben > summary .weg-nr { background: var(--marke); border-color: var(--marke); color: #fff; }

/* Anmeldemaske in seinem Auftritt */
#pw-overlay { background: var(--seite); }
#pw-box { border-color: var(--linie); }
#pw-logo img { height: 34px; }
#pw-tagline { color: #4a5568; }
#pw-box h2 { color: var(--text); }
#pw-box p { color: #4a5568; }
#pw-input { background: var(--karte-2); border-color: var(--linie-2); color: var(--text); }
#pw-input:focus { border-color: var(--marke); }
#pw-btn { background: var(--akzent); color: #1a1a1a; border-radius: 10px; }

@media (max-width: 760px) {
  .seitenleiste { padding: .7rem 16px; }
  .seitenleiste-fuss { margin-left: 0; width: 100%; justify-content: space-between; }
  .inhalt { padding: 1.5rem 16px 80px; }
}