/* ============================================================
   MMKG Coaching Tool – Stylesheet
   Zugehörige Dateien:
     Coaching_Unterstutzung.html  → Hauptdatei / Struktur
     coaching_config.js           → API-Konfiguration
     coaching_api.js              → KI-Logik
   ============================================================ */


/* ── CSS-VARIABLEN / FARBSCHEMA ────────────────────────────────
   Alle Farben, die in der Anwendung verwendet werden, sind hier
   zentral definiert. Für den Dunkelmodus werden sie überschrieben.
   Das macht Theme-Wechsel einfach und konsistent.
────────────────────────────────────────────────────────────── */
:root {
  --magenta: #E20074;   /* Telekom-Magenta – Hauptakzentfarbe */
  --bg:      #f6f7f9;   /* Seitenhintergrund (Hell) */
  --surface: #ffffff;   /* Kartenhintergrund (Hell) */
  --text:    #0b0c0e;   /* Haupttextfarbe (Hell) */
  --muted:   #586174;   /* Dezenter Text / Hinweise (Hell) */
  --line:    #dfe3ea;   /* Rahmen und Trennlinien (Hell) */
}

/* Dunkelmodus: überschreibt alle Variablen */
:root.dark {
  --bg:      #0b0c0e;
  --surface: #13161a;
  --text:    #eaeaf0;
  --muted:   #a6adbb;
  --line:    #2b313a;
}

/* Datenschutz-Banner im Dunkelmodus angepasst */
:root.dark .privacy-banner {
  background: color-mix(in srgb, var(--magenta), transparent 88%);
  color: var(--text);
}
:root.dark .privacy-banner strong {
  color: var(--text);
}


/* ── RESET & BASIS ─────────────────────────────────────────────
   Grundlegendes Box-Modell und Seitenlayout.
────────────────────────────────────────────────────────────── */
* {
  box-sizing: border-box; /* Padding und Border werden in die Breite eingerechnet */
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}


/* ── BARRIEREFREIHEIT ──────────────────────────────────────────
   Elemente für Screenreader und Tastaturnavigation.
────────────────────────────────────────────────────────────── */

/* Versteckt Elemente visuell, macht sie aber für Screenreader zugänglich */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Sprunglink – nur sichtbar wenn er fokussiert ist (Tastaturnavigation) */
.skip-link {
  position: absolute;
  left: -9999px; top: auto;
  width: 1px; height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: static;
  width: auto; height: auto;
  padding: 8px 12px;
  background: #fff;
  border: 2px solid var(--magenta);
  border-radius: 8px;
}

/* Fokus-Ring für alle interaktiven Elemente (Tastaturnavigation) */
:focus-visible {
  outline: 3px solid var(--magenta);
  outline-offset: 3px;
}


/* ── LAYOUT ────────────────────────────────────────────────────
   Äußerer Rahmen, zentrierte Inhaltsbreite, Karten-Stil.
────────────────────────────────────────────────────────────── */

/* Zentrierter Inhaltsbereich mit maximaler Breite */
.wrap {
  max-width: 980px;
  margin: 28px auto;
  padding: 0 16px;
}

/* Weiße Karte mit Schatten – umschließt die gesamte Anwendung */
.box {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
}


/* ── KOPFBEREICH (HEADER) ──────────────────────────────────────
   Logo, Titel, Fortschrittsanzeige und Steuerelemente.
────────────────────────────────────────────────────────────── */
header.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  /* Leichter Magenta-Farbverlauf als Hintergrund */
  background: linear-gradient(180deg, color-mix(in srgb, var(--magenta), transparent 85%), transparent 100%);
}

/* Logo-Bereich: Emoji-Block + Titel + Abschnittsname */
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Magenta-Block mit Emoji-Icon links im Header */
.chip {
  display: inline-grid;
  place-items: center;
  width: 38px;
  height: 38px;
  background: var(--magenta);
  color: #fff;
  border-radius: 10px;
  font-size: 20px;
  flex-shrink: 0;
}

/* MMKG Coaching Tool – Titeltext in Magenta */
.mmkg-title {
  font-size: 18px;
  font-weight: 800;
  color: var(--magenta);
  letter-spacing: -0.3px;
  margin-right: 10px;
  white-space: nowrap;
}

/* Dynamischer Abschnittstitel (wird per JS befüllt) */
h1 {
  margin: 0;
  font-size: 18px;
}

/* Werkzeugbereich im Header: Fortschritt, Thema-Auswahl, Buttons */
.tools {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}


/* ── BUTTONS & FORMULARELEMENTE ────────────────────────────────
   Einheitliches Erscheinungsbild für alle interaktiven Elemente.
────────────────────────────────────────────────────────────── */
button, select {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 600;
}

/* Primär-Button: Magenta-Hintergrund (z. B. "Drucken / PDF") */
button.primary {
  background: var(--magenta);
  border-color: var(--magenta);
  color: #fff;
}

/* Ghost-Button: Transparenter Hintergrund (z. B. "Zurücksetzen") */
.ghost {
  opacity: .9;
}

/* Kleiner Button für Ausformulieren / Text übernehmen innerhalb von Karten */
.mini {
  padding: 6px 8px;
  font-size: 12px;
  border-radius: 8px;
}


/* ── FORTSCHRITTSBALKEN ────────────────────────────────────────
   Zeigt wie viele Aspekte der Checkliste bereits abgehakt wurden.
────────────────────────────────────────────────────────────── */
.progress {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
}

/* Äußerer Balkenrahmen */
.bar {
  flex: 1;
  height: 10px;
  background: color-mix(in srgb, var(--magenta), transparent 90%);
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid var(--line);
  min-width: 160px;
}

/* Innerer Füllbalken – Breite wird per JS aktualisiert */
.bar > span {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--magenta);
  transition: width .25s ease; /* Sanfte Animation beim Aktualisieren */
}


/* ── METADATEN-BEREICH ─────────────────────────────────────────
   Oberer Bereich mit Coachee, Coach, Datum und Hinweisen.
────────────────────────────────────────────────────────────── */
.meta {
  padding: 16px;
  display: grid;
  gap: 12px;
  border-bottom: 1px dashed var(--line);
}

/* Responsive Raster für Metadaten-Felder */
.grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

/* Einzelne Formularfelder */
.field, .group, .note {
  display: grid;
  gap: 6px;
}

/* Eingabefelder im Metadaten-Bereich */
.field input, .field textarea,
.group input, .group textarea,
.note input {
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text);
}

/* Dezenter Hinweistext unter Feldern */
.hint {
  color: var(--muted);
  font-size: 12px;
}


/* ── CHECKLISTEN-ABSCHNITTE ────────────────────────────────────
   Aufklappbare Bereiche mit den Coaching-Aspekten.
────────────────────────────────────────────────────────────── */
.sections {
  padding: 12px;
}

/* Einzelner aufklappbarer Abschnitt */
details.section {
  border: 1px solid var(--line);
  border-radius: 14px;
  margin: 10px 0;
  overflow: hidden;
}

/* Trennlinie wenn Abschnitt geöffnet ist */
details.section[open] summary {
  border-bottom: 1px solid var(--line);
}

/* Kopfzeile des Abschnitts (klickbar zum Auf-/Zuklappen) */
summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  list-style: none;
  cursor: pointer;
}

/* Standard-Pfeilmarkierung des <details>-Elements entfernen */
summary::-webkit-details-marker {
  display: none;
}

summary h2 {
  margin: 0;
  font-size: 16px;
}

/* Zähler / Status-Text in der Abschnitts-Kopfzeile */
.count {
  color: var(--muted);
  font-size: 12px;
}

/* Bereich für den "Alles erledigt"-Button */
.sec-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}


/* ── ASPEKT-KARTEN (ITEMS) ─────────────────────────────────────
   Einzelne Coaching-Aspekte mit Checkbox, Notiz und Buttons.
────────────────────────────────────────────────────────────── */
.items {
  display: grid;
  gap: 8px;
  padding: 12px;
}

/* Einzelne Aspekt-Karte: Checkbox links, Inhalt rechts */
.item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: start;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 10px;
}

/* Checkbox in Magenta-Farbe */
.item input[type="checkbox"] {
  transform: translateY(3px);
  accent-color: var(--magenta);
}

.item label {
  font-weight: 600;
}


/* ── "NÄCHSTE SCHRITTE VORMERKEN"-BEREICH ──────────────────────
   Zweite Checkbox unterhalb des Aspekt-Labels.
────────────────────────────────────────────────────────────── */
.action-pick {
  grid-column: 1 / -1; /* Gesamte Breite der Karte */
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 8px;
  align-items: start;
  padding-left: 26px;
  margin-top: -2px;
}

.action-pick label {
  font-weight: 500;
  font-size: 12px;
  color: var(--muted);
}

.action-pick .hint {
  grid-column: 2;
}


/* ── NOTIZ-BEREICH ─────────────────────────────────────────────
   Textfeld für gemeinsame Beobachtungen + Button-Leiste.
────────────────────────────────────────────────────────────── */
.note {
  grid-column: 1 / -1;
  padding-left: 26px;
}

/* Zeile mit "Ausformulieren" und "Text übernehmen"-Buttons */
.note-tools {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}


/* ── KI-AUSGABE (DRAFT-BOX) ────────────────────────────────────
   Bereich in dem der generierte / ausformulierte Text erscheint.
────────────────────────────────────────────────────────────── */

/* Standardmäßig versteckt – wird per JS eingeblendet */
.draft-box {
  display: none;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--magenta), transparent 95%); /* Leichter Magenta-Ton */
  font-size: 13px;
  white-space: pre-wrap; /* Zeilenumbrüche im Text beibehalten */
}

/* Eingeblendet wenn Text vorhanden */
.draft-box.show {
  display: block;
}

/* Ladezustand: Spinner-Animation und Labetext */
.draft-box.loading {
  display: flex !important;
  align-items: center;
  gap: 10px;
  color: var(--muted);
  font-style: italic;
  white-space: normal;
}

/* Drehender Ladekreis (via CSS-Animation) */
.draft-box.loading::before {
  content: '';
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  border: 2px solid var(--line);
  border-top-color: var(--magenta); /* Magenta-Segment des Spinners */
  border-radius: 50%;
  animation: dbspin .7s linear infinite;
}

/* Drehanimation für den Ladekreis */
@keyframes dbspin {
  to { transform: rotate(360deg); }
}

/* Mehrzeiliges Textfeld für Notizen */
.note textarea {
  width: 100%;
  min-height: 88px;
  resize: vertical; /* Nur vertikale Größenänderung erlaubt */
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  font: inherit;
  background: var(--surface);
  color: var(--text);
}


/* ── ZUSAMMENFASSUNGS-BEREICH ──────────────────────────────────
   Vier Reflexionsfragen und Termin-Schieberegler.
────────────────────────────────────────────────────────────── */
.summary {
  padding: 16px;
  border-top: 1px dashed var(--line);
}

/* Responsive Raster für die Zusammenfassungsfelder */
.summary .summary-grid {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.summary textarea {
  min-height: 84px;
}

/* Zeile mit dem Schieberegler für den nächsten Coaching-Termin */
.range-row {
  display: grid;
  gap: 6px;
}


/* ── FUßZEILE ──────────────────────────────────────────────────
   Zeitstempel und Organisationsangabe.
────────────────────────────────────────────────────────────── */
footer.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12px;
}


/* ── DATENSCHUTZ-BANNER ────────────────────────────────────────
   Hinweisbox mit Nutzungs- und Datenschutzhinweisen.
────────────────────────────────────────────────────────────── */
.privacy-banner {
  margin: 16px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-left: 5px solid var(--magenta); /* Magenta-Akzentlinie links */
  border-radius: 14px;
  background: color-mix(in srgb, var(--magenta), white 92%);
  color: var(--text);
}

.privacy-banner p {
  margin: 0 0 8px;
}

.privacy-banner p:last-child {
  margin-bottom: 0;
}


/* ── DRUCKPROTOKOLL ────────────────────────────────────────────
   Unsichtbarer Bereich der nur beim Drucken / PDF-Export
   eingeblendet wird. Enthält das strukturierte Coaching-Protokoll.
────────────────────────────────────────────────────────────── */

/* Im normalen Anzeigemodus komplett ausgeblendet */
.protocol {
  display: none;
}

.proto-head {
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}

.proto-head h1 {
  margin: 0;
  font-size: 20px;
}

/* Zwei-Spalten-Raster für Metadaten im Protokoll */
.proto-kv {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px 16px;
  margin: 8px 0 12px;
}

.proto-kv div {
  display: flex;
  gap: 6px;
}

.proto-kv span {
  color: #000;
}

/* Einzelne Protokollabschnitte (Stärken, Entwicklung, Schritte) */
.proto-section {
  margin: 14px 0;
}

.proto-section h2 {
  margin: 0 0 6px;
  font-size: 16px;
  border-bottom: 2px solid #000;
  padding-bottom: 4px;
}

/* Aufzählungslisten im Protokoll */
.proto-list {
  margin: 0 0 0 18px;
}

/* Textbereich mit Rahmen für mehrzeilige Protokolleinträge */
.proto-note {
  white-space: pre-wrap;
  border: 1px solid #000;
  border-radius: 8px;
  padding: 8px;
  background: #fff;
  color: #000;
}

/* Einspaltiges Raster für die Zusammenfassung im Protokoll */
.proto-grid {
  display: grid;
  gap: 8px;
  grid-template-columns: 1fr;
}


/* ── DRUCKMODUS-KLASSE ─────────────────────────────────────────
   Wird per JS auf <body> gesetzt wenn der Druckdialog geöffnet wird.
   Blendet das Formular aus und zeigt das Protokoll.
────────────────────────────────────────────────────────────── */
.printing .box {
  visibility: hidden !important; /* Formular verstecken */
}

.printing .protocol {
  display: block !important; /* Protokoll einblenden */
}


/* ── ABSCHNITTSFARBEN ──────────────────────────────────────────
   Farbliche Kennzeichnung der vier Checklisten-Abschnitte.
────────────────────────────────────────────────────────────── */
details.section:nth-of-type(1) summary h2 { color: #000000; } /* Begrüßung – Hell */
details.section:nth-of-type(2) summary h2 { color: #d97706; } /* Lösung */
details.section:nth-of-type(3) summary h2 { color: #d97706; } /* Verkauf */
details.section:nth-of-type(4) summary h2 { color: #1e3a8a; } /* Verabschiedung */

/* Im Dunkelmodus: Abschnitt 1 in Magenta damit Schwarz nicht auf dunklem Hintergrund verschwindet */
:root.dark details.section:nth-of-type(1) summary h2 { color: #E20074; }


/* ── RESPONSIVE ANPASSUNGEN ────────────────────────────────────
   Layout-Anpassungen für schmale Bildschirme (Smartphones).
────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  /* Aspekt-Karten: volle Breite ohne Einrückung */
  .item {
    grid-template-columns: auto 1fr;
  }
  .action-pick {
    padding-left: 0;
  }
  .note {
    padding-left: 0;
  }
  /* Protokoll: Metadaten einspaltiger */
  .proto-kv {
    grid-template-columns: 1fr;
  }
  /* Header: untereinander statt nebeneinander */
  header.head {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ── DRUCKMEDIUM ───────────────────────────────────────────────
   Stellt sicher, dass Farben und Layout beim Drucken korrekt sind.
────────────────────────────────────────────────────────────── */
@media print {
  /* Farben auch beim Schwarzweiß-Druck beibehalten */
  * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  /* Formular ausblenden, Protokoll einblenden */
  .box {
    display: none !important;
  }
  .protocol {
    display: block !important;
  }
}