/**
 * GGA Kursberater - Phase 7 - Chat UI Styles
 *
 * Vollstaendig unter dem Namespace .gga-advisor-* gehalten - keine
 * globalen button/input/p/h2-Regeln, damit die bestehende Website
 * unveraendert bleibt. Nutzt die bereits bestehenden GGA-CI-Variablen aus
 * assets/css/gga.css (--blau/--rot/--text/--bg/--line/--radius-*), die
 * dort global auf :root definiert sind - keine neue Farbdefinition, keine
 * neue externe Schriftart.
 */
.gga-advisor-root {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 99990;
  font-family: 'ibm-plex-sans', sans-serif;
  color: var(--text, #05253B);
}

.gga-advisor-launcher {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  background: var(--blau, #00548E);
  color: #fff;
  border: none;
  border-radius: var(--radius-pill, 980px);
  font-size: 15px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(5, 37, 59, 0.18);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gga-advisor-launcher:hover { box-shadow: 0 8px 24px rgba(5, 37, 59, 0.24); }
.gga-advisor-launcher:focus-visible { outline: 3px solid var(--rot, #EE1D25); outline-offset: 2px; }
.gga-advisor-root--open .gga-advisor-launcher { display: none; }

.gga-advisor-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 420px;
  max-width: calc(100vw - 32px);
  height: min(640px, calc(100vh - 48px));
  background: var(--bg, #fff);
  border-radius: var(--radius-m, 14px);
  box-shadow: 0 20px 60px rgba(5, 37, 59, 0.28);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line, rgba(5,37,59,.10));
}
.gga-advisor-panel[hidden] { display: none; }

.gga-advisor-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  background: var(--blau, #00548E);
  color: #fff;
  flex-shrink: 0;
}
/* UI Refinement (Profilfoto & Welcome Design): linke Headerzone = Foto + Titelblock */
.gga-advisor-header-left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 auto; }
.gga-advisor-header-avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; object-position: center; flex-shrink: 0; border: 1.5px solid rgba(255,255,255,.35); display: block; }
.gga-advisor-header-text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
/* Header (Final Visual Mobile PDF): Produkt dominant, Herkunft klein, Utilities als eine Zone. */
.gga-advisor-header-text strong { font-size: 15px; font-weight: 700; letter-spacing: -.005em; }
.gga-advisor-header-text span { font-size: 11px; opacity: .85; letter-spacing: .01em; }
.gga-advisor-header-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.gga-advisor-close {
  background: transparent; border: none; color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; position: relative;
}
/* Sichtbar 32 px, Touch-Fläche 44 px (unsichtbare Erweiterung, Touch Target ≠ sichtbare Höhe) */
.gga-advisor-close::after { content: ''; position: absolute; inset: -6px; }
.gga-advisor-close:hover { background: rgba(255,255,255,.15); }
.gga-advisor-close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
/* "Verlauf leeren" (Auftrag "User-Test UX & Content Fix" Abschnitt 15):
   Textaktion statt Muelleimer-Icon - wirkte im User-Test optisch
   unruhig/schief und war nicht eindeutig genug. Kompakt gehalten (kleine
   Schrift, schmales Padding) und mit white-space:nowrap, damit sie auf
   375px-Breite nicht umbricht und nicht mit dem Schliessen-Icon
   ueberlappt (s. .gga-advisor-header, das bereits flex-wrap:nowrap/
   gap nutzt). */
.gga-advisor-clear {
  /* kompakter (UI Refinement Abschnitt 8): weniger Schrift/Padding, bleibt Utility Action */
  background: transparent; border: 1px solid rgba(255,255,255,.4); color: #fff; cursor: pointer;
  font-family: inherit; font-size: 10.5px; font-weight: 600; white-space: nowrap;
  padding: 3px 8px; border-radius: var(--radius-pill, 980px); flex-shrink: 0;
  opacity: .9; position: relative;
}
.gga-advisor-clear::after { content: ''; position: absolute; inset: -13px -6px; }
.gga-advisor-clear:hover, .gga-advisor-clear:focus-visible { opacity: 1; background: rgba(255,255,255,.15); }
.gga-advisor-clear:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

.gga-advisor-messages {
  position: relative;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--bg-2, #f5f5f7);
}

.gga-advisor-msg { max-width: 86%; font-size: calc(14.5px * var(--gga-adv-scale, 1)); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.gga-advisor-msg--user {
  align-self: flex-end;
  background: var(--blau, #00548E);
  color: #fff;
  padding: 10px 14px;
  border-radius: 14px 14px 4px 14px;
}
.gga-advisor-msg--bot {
  align-self: flex-start;
  background: #fff;
  color: var(--text, #05253B);
  padding: 10px 14px;
  border-radius: 4px 14px 14px 14px;
  border: 1px solid var(--line, rgba(5,37,59,.10));
}
.gga-advisor-msg--notice {
  background: #fff7ed;
  border-color: #f3cfa0;
}

/* Strukturierte Antwortbloecke (Auftrag "User-Test UX & Content Fix"
   Abschnitt 14): Kurstitel/Abschnittstitel fett, echte Absaetze/Listen,
   kompakte Fact-Zeilen statt eines einzelnen Fliesstext-Blocks. Rein
   semantisches HTML (div/p/ul/li/strong), kein Markdown-Rohtext. */
.gga-advisor-msg--rich { white-space: normal; }
.gga-advisor-block-heading { font-weight: 700; font-size: calc(15px * var(--gga-adv-scale, 1)); margin: 0 0 6px; color: var(--text, #05253B); }
.gga-advisor-block-subheading { font-weight: 700; font-size: calc(14px * var(--gga-adv-scale, 1)); margin: 10px 0 4px; color: var(--text, #05253B); }
.gga-advisor-block-heading:first-child, .gga-advisor-block-subheading:first-child { margin-top: 0; }
.gga-advisor-block-para { margin: 0 0 8px; }
.gga-advisor-block-para:last-child { margin-bottom: 0; }
.gga-advisor-block-list { margin: 0 0 8px; padding-left: 20px; }
.gga-advisor-block-list li { margin-bottom: 3px; }
.gga-advisor-fact-row { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: calc(14px * var(--gga-adv-scale, 1)); margin-bottom: 4px; }
.gga-advisor-fact-label { font-weight: 700; flex-shrink: 0; }
.gga-advisor-fact-value { color: var(--text, #05253B); }
.gga-advisor-block-link-wrap { margin-top: 8px; }
.gga-advisor-block-link-wrap:first-child { margin-top: 0; }

/* CI-konsistente Text-Links (Auftrag 7.2 Abschnitt 19/21): GGA-Blau statt
   Browser-Standardfarbe, fuer JEDEN im Chat gerenderten Link gleich -
   Knowledge-Links (Google Maps etc.) UND klickbare Kurstitel. */
.gga-advisor-inline-link {
  color: var(--blau, #00548E);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.gga-advisor-inline-link:hover { color: var(--rot, #EE1D25); }
.gga-advisor-inline-link:focus-visible { outline: 2px solid var(--blau, #00548E); outline-offset: 2px; }

.gga-advisor-chip-row, .gga-advisor-quick-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px 10px;
}
.gga-advisor-quick-actions { padding-top: 4px; border-top: 1px solid var(--line, rgba(5,37,59,.10)); background: var(--bg, #fff); }
.gga-advisor-chip {
  font-family: inherit;
  font-size: calc(13.5px * var(--gga-adv-scale, 1));
  font-weight: 600;
  padding: 9px 14px;
  min-height: 44px;
  border-radius: var(--radius-pill, 980px);
  border: 1.5px solid var(--line, rgba(5,37,59,.10));
  background: #fff;
  color: var(--text-2, #3a5570);
  cursor: pointer;
  transition: border-color .15s, color .15s;
}
.gga-advisor-chip:hover { border-color: var(--blau, #00548E); color: var(--blau, #00548E); }
.gga-advisor-chip:focus-visible { outline: 2px solid var(--blau, #00548E); outline-offset: 1px; }
.gga-advisor-chip--action { background: var(--bg-2, #f5f5f7); }

.gga-advisor-cards { display: flex; flex-direction: column; gap: 10px; }

/* "Frage zu einem Kurs"-Kursauswahl (Auftrag "User-Test UX & Content Fix"
   Abschnitt 7): responsives Grid statt starrer Spaltenzahl - auto-fit/
   minmax passt sich der tatsaechlich verfuegbaren Breite an, kein
   hartkodiertes 4x4-Raster. Innerhalb des bestehenden, schmalen
   Chat-Panels (420px fix, s. .gga-advisor-panel) ergibt das praktisch
   1-2 Spalten; wuerde der Container breiter werden (z.B. ein breiteres
   Embed), erscheinen automatisch mehr Spalten, ohne Code-Aenderung. Unter
   640px (Mobile-Vollbild-Panel) ausdruecklich auf 1 Spalte fixiert, damit
   Kurskarten auf kleinen Screens nicht gequetscht werden. */
.gga-advisor-course-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}
.gga-advisor-course-grid .gga-advisor-card { display: flex; flex-direction: column; }
.gga-advisor-course-grid .gga-advisor-card-actions { margin-top: auto; }
.gga-advisor-card {
  background: #fff;
  border: 1px solid var(--line, rgba(5,37,59,.10));
  border-radius: var(--radius-m, 14px);
  padding: 14px;
}
.gga-advisor-card-title { font-weight: 700; font-size: calc(15px * var(--gga-adv-scale, 1)); margin-bottom: 6px; color: var(--text, #05253B); overflow-wrap: anywhere; }
.gga-advisor-card-title--link {
  display: inline-block;
  color: var(--blau, #00548E);
  text-decoration: none;
  cursor: pointer;
}
.gga-advisor-card-title--link:hover { text-decoration: underline; color: var(--rot, #EE1D25); }
.gga-advisor-card-title--link:focus-visible { outline: 2px solid var(--blau, #00548E); outline-offset: 2px; }
.gga-advisor-card-meta { display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; font-size: calc(13px * var(--gga-adv-scale, 1)); color: var(--text-2, #3a5570); margin: 0 0 8px; }
.gga-advisor-card-meta dt { font-weight: 600; }
.gga-advisor-card-meta dd { margin: 0; }
.gga-advisor-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.gga-advisor-card-actions--standalone { padding: 0 2px; }

.gga-advisor-btn {
  font-family: inherit;
  font-size: calc(13.5px * var(--gga-adv-scale, 1));
  font-weight: 700;
  padding: 10px 18px;
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  border-radius: var(--radius-pill, 980px);
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1.5px solid transparent;
}
/* Button-System (Release Fix 2): genau vier Varianten, keine Sonderfaelle.
   primary   = dominant, Start- und Hauptaktionen (GGA-Blau gefuellt, staerkere Schrift)
   secondary = normale Navigation/Folgeaktionen (weiss, blaue Umrandung)
   card      = Karten-Aktionen (kleiner, blauer Hintergrund, weisse Schrift, in die Karte integriert)
   utility   = zurueckhaltend (transparent, dezente Umrandung), z. B. Textgroesse, Verlauf */
.gga-advisor-btn--primary { background: var(--blau, #00548E); color: #fff; border-color: var(--blau, #00548E); font-weight: 800; }
.gga-advisor-btn--primary:hover { background: var(--blau-dark, #05253B); border-color: var(--blau-dark, #05253B); }
.gga-advisor-btn--secondary { background: #fff; color: var(--blau, #00548E); border-color: var(--blau, #00548E); }
.gga-advisor-btn--secondary:hover { background: var(--bg-2, #f5f5f7); }
.gga-advisor-btn--card { background: var(--blau, #00548E); color: #fff; border-color: var(--blau, #00548E); font-size: calc(13px * var(--gga-adv-scale, 1)); font-weight: 600; padding: 8px 14px; min-height: 44px; border-radius: var(--radius-s, 10px); }
.gga-advisor-btn--card:hover { background: var(--blau-dark, #05253B); border-color: var(--blau-dark, #05253B); }
.gga-advisor-btn--utility { background: transparent; color: var(--blau, #00548E); border: 1px solid var(--line, rgba(5,37,59,.18)); font-size: calc(12.5px * var(--gga-adv-scale, 1)); font-weight: 600; padding: 6px 12px; min-height: 44px; }
.gga-advisor-btn--utility:hover { background: var(--bg-2, #f5f5f7); }
.gga-advisor-btn:focus-visible { outline: 2px solid var(--rot, #EE1D25); outline-offset: 2px; }

/* Texteingabefeld/Send-Button entfernt ("V0.1 Release Fix - Remove Free
   Text Input", Abschnitt 3) - .gga-advisor-input-form/.gga-advisor-input/
   .gga-advisor-send existieren im Markup nicht mehr, daher hier ebenfalls
   entfernt statt verwaister Regeln. */
.gga-advisor-footer {
  padding: 8px 16px 12px;
  font-size: calc(11px * var(--gga-adv-scale, 1));
  color: var(--text-3, #6b8099);
  text-align: center;
  flex-shrink: 0;
  background: #fff;
}

/* ===== Mobile: nahezu/vollstaendig viewportfuellend (Auftrag Abschnitt 6) ===== */
@media (max-width: 640px) {
  .gga-advisor-root { right: 12px; bottom: 12px; }
  .gga-advisor-panel {
    right: 8px; left: 8px; bottom: 8px; top: 8px;
    width: auto; max-width: none; height: auto;
  }
  .gga-advisor-course-grid { grid-template-columns: 1fr; }
}

/* ===== Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
  .gga-advisor-launcher, .gga-advisor-close, .gga-advisor-clear, .gga-advisor-chip, .gga-advisor-btn {
    transition: none;
  }
}

/* ===== User-Test Release Fix: Unterleiste (Breadcrumb + Textgröße) ===== */
.gga-advisor-panel { --gga-adv-scale: 1; }
.gga-advisor-subbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 12px; border-bottom: 1px solid var(--line, rgba(5,37,59,.10)); background: #fff; flex-shrink: 0; min-width: 0; }
.gga-advisor-breadcrumb { min-width: 0; flex: 1 1 auto; }
.gga-advisor-crumbs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; font-size: calc(12px * var(--gga-adv-scale, 1)); color: var(--text-3, #6b8099); line-height: 1.4; }
.gga-advisor-crumb { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.gga-advisor-crumb-btn { background: none; border: 0; padding: 6px 2px; min-height: 36px; max-width: 100%; color: var(--blau, #00548E); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gga-advisor-crumb-btn:hover { color: var(--rot, #EE1D25); }
.gga-advisor-crumb-btn:focus-visible { outline: 2px solid var(--blau, #00548E); outline-offset: 2px; }
.gga-advisor-crumb-current { color: var(--text, #05253B); font-weight: 600; padding: 6px 2px; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gga-advisor-crumb-sep { color: var(--text-3, #6b8099); padding: 0 4px; flex-shrink: 0; }
/* Zurueck-Pfeil (User-Test Release Fix 2): 44x44 Touch-Ziel, Chevron,
   fokussierbar; wird nur angezeigt, wenn ein vorheriger Schritt existiert. */
.gga-advisor-back { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 44px; height: 44px; padding: 0; margin-left: -8px; border: 0; border-radius: 50%; background: transparent; color: var(--blau, #00548E); cursor: pointer; }
.gga-advisor-back:hover { background: rgba(0,84,142,.08); }
.gga-advisor-back:focus-visible { outline: 2px solid var(--blau, #00548E); outline-offset: 2px; }
.gga-advisor-back:active { background: rgba(0,84,142,.16); }

/* Textgroesse A-/A+ als Segmented-Control oben rechts im Header
   (User-Test Release Fix 2). Auf dunklem Header: weisse Umrandung. */
.gga-advisor-seg { display: inline-flex; align-items: stretch; flex-shrink: 0; border: 1px solid rgba(255,255,255,.45); border-radius: var(--radius-pill, 980px); }
/* kompakter (UI Refinement Abschnitt 7): sichtbar kleiner, Touch-Flaeche via ::after weiterhin >=44px */
.gga-advisor-seg-btn { min-width: 30px; min-height: 26px; padding: 0 6px; border: 0; background: transparent; color: #fff; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer; position: relative; border-radius: var(--radius-pill, 980px); }
.gga-advisor-seg-btn::after { content: ''; position: absolute; inset: -9px -7px; }
.gga-advisor-seg-btn + .gga-advisor-seg-btn { border-left: 1px solid rgba(255,255,255,.5); }
.gga-advisor-seg-btn:hover { background: rgba(255,255,255,.15); }
.gga-advisor-seg-btn:focus-visible { outline: 2px solid #fff; outline-offset: -2px; }
.gga-advisor-seg-btn:disabled { opacity: .4; cursor: default; }

/* Mobil: Header-Aktionen duerfen umbrechen (Text-Segment bleibt zusammen). */
@media (max-width: 480px) {
  .gga-advisor-header { flex-wrap: wrap; row-gap: 8px; }
  .gga-advisor-header-actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* ===== Startansicht: Hauptwege direkt unter dem Einführungstext ===== */
.gga-advisor-start-row { display: flex; flex-direction: column; gap: 8px; padding: 0; align-self: stretch; max-width: 100%; }
/* Startbuttons (Final Visual Mobile PDF): Variante secondary, fett, kompakte Höhe,
   weniger massive Fläche; klar als Hauptnavigation durch Position, Schrift und Pfeil. */
.gga-advisor-start-btn { font-size: calc(14px * var(--gga-adv-scale, 1)); font-weight: 700; min-height: 44px; padding: 9px 14px; text-align: left; justify-content: space-between; border-radius: var(--radius-m, 12px); background: #fff; color: var(--blau, #00548E); border: 1.5px solid rgba(0,84,142,.35); box-shadow: none; cursor: pointer; transition: background .15s, border-color .15s; }
.gga-advisor-start-btn::after { content: '\203A'; font-size: 18px; line-height: 1; margin-left: 8px; color: var(--blau, #00548E); }
.gga-advisor-start-btn:hover { background: rgba(0,84,142,.06); border-color: var(--blau, #00548E); }
.gga-advisor-start-btn:active { background: rgba(0,84,142,.12); }
.gga-advisor-start-btn:focus-visible { outline: 2px solid var(--rot, #EE1D25); outline-offset: 2px; }
.gga-advisor-panel--start .gga-advisor-quick-actions { display: none; }

/* ===== Antwortbausteine: Adresse und Aktions-Buttons ===== */
.gga-advisor-block-address { margin: 0 0 8px; line-height: 1.55; color: var(--text, #05253B); }
.gga-advisor-block-action { margin: 8px 0 4px; }
.gga-advisor-block-action .gga-advisor-btn { width: auto; }
.gga-advisor-btn--secondary:focus-visible, .gga-advisor-btn--primary:focus-visible { outline: 2px solid var(--blau, #00548E); outline-offset: 2px; }
.gga-advisor-btn:hover { text-decoration: none; }

/* ===== Kompaktes Kurs-Raster (Kurs finden / Nach Datum / Fragen zu einem Kurs) ===== */
.gga-advisor-course-grid .gga-advisor-card { padding: 12px; }
.gga-advisor-course-grid .gga-advisor-card-title { font-size: calc(14px * var(--gga-adv-scale, 1)); margin-bottom: 4px; }
.gga-advisor-course-grid .gga-advisor-card-meta { font-size: calc(12px * var(--gga-adv-scale, 1)); margin-bottom: 6px; }
.gga-advisor-course-grid .gga-advisor-card-actions .gga-advisor-btn { width: 100%; }

/* Auf kleinen Breiten: lange Pfadstufen werden gekürzt (Titel steht im title-Attribut),
   die Unterleiste bleibt einzeilig - A−/A+ rutschen nicht in eine zweite Zeile. */
@media (max-width: 640px) {
  .gga-advisor-crumb-current, .gga-advisor-crumb-btn { max-width: 13em; }
}

/* ===== PDF-Export-Button (Utility, Subbar) ===== */
.gga-advisor-pdf { display: inline-flex; align-items: center; gap: 5px; min-height: 44px; padding: 0 12px; flex-shrink: 0; border: 1px solid var(--line, rgba(5,37,59,.18)); background: #fff; color: var(--blau, #00548E); border-radius: var(--radius-pill, 980px); font: inherit; font-size: calc(12.5px * var(--gga-adv-scale, 1)); font-weight: 600; cursor: pointer; }
.gga-advisor-pdf:hover { background: #f2f7fb; }
.gga-advisor-pdf:focus-visible { outline: 2px solid var(--blau, #00548E); outline-offset: 2px; }

/* ===== Druck: nur die PDF-Ausgabe des Kursberaters (body.gga-advisor-printing) ===== */
#gga-advisor-print-doc { display: none; }
@media print {
  @page { size: A4 portrait; margin: 16mm 14mm 14mm; }
  html, body.gga-advisor-printing { height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; background: #fff !important; }
  body.gga-advisor-printing::after { content: none !important; display: none !important; }
  .gga-advisor-pdf__foot { margin-top: 14pt; padding-top: 6pt; border-top: 0.5pt solid #ccc; font-size: 8pt; color: #6b8099; text-align: center; }
  body.gga-advisor-printing > *:not(#gga-advisor-print-doc) { display: none !important; }
  #gga-advisor-print-doc { display: block !important; height: auto !important; overflow: visible !important; color: #05253B; font-family: 'ibm-plex-sans', sans-serif; font-size: 10pt; line-height: 1.45; }
  .gga-advisor-pdf__head { border-bottom: 1.5pt solid #EE1D25; padding-bottom: 8pt; margin-bottom: 12pt; }
  .gga-advisor-pdf__brand { font-size: 8.5pt; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #00548E; }
  .gga-advisor-pdf__title { font-size: 18pt; font-weight: 700; margin: 4pt 0 2pt; color: #05253B; line-height: 1.2; }
  .gga-advisor-pdf__subtitle { font-size: 11pt; margin: 0 0 2pt; color: #05253B; }
  .gga-advisor-pdf__meta { font-size: 8pt; color: #4a6378; margin: 0; }
  .gga-advisor-pdf__course { display: grid; grid-template-columns: 1fr 30mm; gap: 8pt; align-items: center; border: 0.75pt solid #d7e0ea; border-left: 3pt solid #00548E; border-radius: 3pt; padding: 9pt 11pt; margin-bottom: 9pt; break-inside: avoid; page-break-inside: avoid; }
  .gga-advisor-pdf__badge { display: inline-block; font-size: 7.5pt; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #00548E; background: #e8f1f8; padding: 1.5pt 6pt; border-radius: 8pt; margin-bottom: 4pt; }
  .gga-advisor-pdf__course-title, .gga-advisor-pdf__course-body h2 { font-size: 12pt; font-weight: 700; margin: 0 0 4pt; line-height: 1.3; overflow-wrap: break-word; hyphens: manual; }
  .gga-advisor-pdf__meta-list { display: grid; grid-template-columns: auto 1fr; column-gap: 8pt; row-gap: 2pt; margin: 0; font-size: 9pt; }
  .gga-advisor-pdf__meta-list dt { color: #4a6378; }
  .gga-advisor-pdf__meta-list dd { margin: 0; overflow-wrap: break-word; }
  .gga-advisor-pdf__qr { width: 28mm; justify-self: end; text-align: center; break-inside: avoid; }
  .gga-advisor-pdf__qr svg { display: block; width: 28mm; height: 28mm; }
  .gga-advisor-pdf__qr-caption { display: block; font-size: 7.5pt; color: #05253B; margin-top: 2pt; }
  .gga-advisor-pdf__h2 { font-size: 11pt; font-weight: 700; color: #00548E; margin: 10pt 0 3pt; border-bottom: 0.5pt solid #d7e0ea; padding-bottom: 2pt; break-after: avoid; }
  .gga-advisor-pdf__h3, .gga-advisor-pdf__h4 { font-size: 9.5pt; font-weight: 700; margin: 5pt 0 2pt; break-after: avoid; }
  .gga-advisor-pdf__p, .gga-advisor-pdf__list li { font-size: 9.5pt; margin: 0 0 3pt; overflow-wrap: break-word; }
  .gga-advisor-pdf__list { margin: 0 0 3pt; padding-left: 14pt; }
  .gga-advisor-pdf__fact { display: flex; gap: 8pt; font-size: 9.5pt; margin-bottom: 2pt; }
  .gga-advisor-pdf__fact-label { color: #4a6378; min-width: 70pt; }
  .gga-advisor-pdf__course-footer { display: flex; align-items: center; justify-content: space-between; gap: 10pt; margin-top: 12pt; border-top: 0.75pt solid #d7e0ea; padding-top: 10pt; break-inside: avoid; }
  .gga-advisor-pdf__course-footer .gga-advisor-pdf__p { margin: 0; font-size: 10pt; }
}

/* ===== Mobil: Schließen-X oben rechts in der Ecke (Magazin/Close Fix) =====
   Das X sitzt absolut in der rechten oberen Ecke des Headers; die Utility-Zone bekommt
   rechts Platz, damit sich nichts überlagert. Desktop bleibt unverändert. */
@media (max-width: 480px) {
  .gga-advisor-header { position: relative; padding-right: 14px; }
  .gga-advisor-header-actions { padding-right: 40px; }
  .gga-advisor-close { position: absolute; top: 6px; right: 6px; margin: 0; }
}


/* ===== Willkommenstext: zwei Absaetze (UI Refinement Abschnitt 11-13) =====
   Gleiche weisse Karte wie jede Bot-Nachricht (.gga-advisor-msg--bot), nur
   dieser eine Nachrichtentyp bekommt die zweigeteilte Typografie. */
.gga-advisor-msg--welcome { display: flex; flex-direction: column; gap: 6px; padding: 12px 16px; }
.gga-advisor-welcome-lead { margin: 0; font-weight: 600; font-size: calc(15.5px * var(--gga-adv-scale, 1)); line-height: 1.35; color: var(--blau, #00548E); }
.gga-advisor-welcome-text { margin: 0; font-size: calc(14.5px * var(--gga-adv-scale, 1)); line-height: 1.55; color: var(--text, #05253B); }