/* Ergänzungen für das Unterweisungsportal. Nur Tokens aus ehbs-web.css, keine neuen Farbwerte.
   Handy zuerst: große Klickflächen, eine Spalte, Tabellen scrollen waagerecht. */

body { background: var(--ehbs-bg-soft); display: flex; flex-direction: column; min-height: 100vh; }
.portal-main { flex: 1; padding: var(--space-6) 0 var(--space-12); }
.portal-schmal { max-width: 960px; background: var(--ehbs-white); padding-top: var(--space-6); padding-bottom: var(--space-8); border-radius: var(--radius); }
.portal-footer { padding-top: var(--space-4); }
.portal-footer .ehbs-footer__legal { margin-top: 0; border-top: 0; }
.portal-h2 { font-size: var(--fs-lg); margin-top: var(--space-8); }
.portal-h3 { font-size: var(--fs-h3); }
.portal-abstand { margin-top: var(--space-12); }

/* Kopfzeile: Sprachwahl und Rückfrage */
.portal-kopfaktionen { display: flex; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; align-items: center; }
.portal-kopfaktionen .ehbs-btn { padding: 0 var(--space-3); }
.portal-sprachwahl { display: flex; gap: var(--space-2); }
.portal-sprachwahl select { min-height: 44px; font: inherit; border: 2px solid var(--ehbs-primary); border-radius: var(--radius); background: var(--ehbs-white); padding: 0 var(--space-2); max-width: 11rem; }
.js .portal-nojs { display: none; }

/* Große Hauptknöpfe für Daumenbedienung */
.portal-gross { min-height: 52px; font-size: var(--fs-lg); width: 100%; margin-top: var(--space-4); }
@media (min-width: 640px) { .portal-gross { width: auto; } }
.portal-klein { min-height: 44px; padding: 0 var(--space-3); font-size: var(--fs-small); }
.portal-aktionen { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; margin-top: var(--space-6); }
.portal-aktionen .portal-gross { margin-top: 0; }

/* Sprachauswahl als Kacheln */
.portal-sprachen { list-style: none; padding: 0; margin: 0 0 var(--space-6); display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.portal-sprachen a { display: flex; align-items: center; justify-content: center; min-height: 52px; border: 2px solid var(--ehbs-line); border-radius: var(--radius); text-decoration: none; color: var(--ehbs-text); font-weight: 700; background: var(--ehbs-white); }
.portal-sprachen a:hover { border-color: var(--ehbs-primary); color: var(--ehbs-primary); }
.portal-sprachen a[aria-current="true"] { border-color: var(--ehbs-primary); background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); }

.portal-check { padding: var(--space-4); border: 2px solid var(--ehbs-line); border-radius: var(--radius); }
.portal-check input { width: 28px; height: 28px; flex: none; margin-top: 0; }
.portal-check label { font-weight: 700; }

.portal-link { word-break: break-all; font-family: var(--ehbs-font); }

/* Fortschritt */
.portal-fortschritt { height: 12px; background: var(--ehbs-bg-light); border-radius: 6px; overflow: hidden; }
.portal-fortschritt__balken { height: 100%; background: var(--ehbs-primary); }

/* Kapitelliste */
.portal-kapitel { list-style: none; padding: 0; margin: var(--space-6) 0; display: grid; gap: var(--space-3); }
.portal-kapitel__eintrag { display: flex; gap: var(--space-4); justify-content: space-between; align-items: center; flex-wrap: wrap; border: 1px solid var(--ehbs-line); border-inline-start: 6px solid var(--ehbs-line); border-radius: var(--radius); padding: var(--space-4); }
.portal-kapitel__eintrag.ist-offen { border-inline-start-color: var(--ehbs-primary); }
.portal-kapitel__eintrag.ist-fertig { border-inline-start-color: var(--ampel-green); }
.portal-kapitel__nr { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); font-weight: 700; margin-inline-end: var(--space-2); }
.ist-gesperrt .portal-kapitel__nr { background: var(--ehbs-grey); }

/* Video */
.portal-video { position: relative; aspect-ratio: 16 / 9; background: var(--ehbs-primary); border-radius: var(--radius); overflow: hidden; margin: var(--space-6) 0; }
.portal-video iframe, .portal-video video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.portal-video__zweiklick { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; padding: var(--space-6); color: var(--ehbs-text-on-dark); --ehbs-focus: var(--ehbs-yellow); }
.portal-video__zweiklick p { color: var(--ehbs-text-on-dark); max-width: 32rem; margin: 0 auto; }
.portal-video__zweiklick .portal-gross { width: auto; justify-self: center; }
.portal-video .ehbs-placeholder { position: absolute; inset: 0; min-height: 0; }
.portal-kernpunkte li { margin-bottom: var(--space-2); }
.portal-demo { margin-top: var(--space-6); }

/* Test */
.portal-frage { border: 1px solid var(--ehbs-line); border-radius: var(--radius); padding: var(--space-4); margin: 0 0 var(--space-6); }
.portal-frage legend { float: left; width: 100%; font-weight: 700; font-size: var(--fs-lg); padding: 0; margin-bottom: var(--space-3); }
.portal-frage legend + * { clear: both; }
.portal-frage__nr { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ehbs-primary); color: var(--ehbs-text-on-dark); font-size: var(--fs-base); }
.portal-antwort { display: flex; gap: var(--space-3); align-items: center; min-height: 52px; padding: var(--space-2) var(--space-3); border: 2px solid var(--ehbs-line); border-radius: var(--radius); margin-top: var(--space-2); cursor: pointer; }
.portal-antwort:hover { border-color: var(--ehbs-primary); }
.portal-antwort input { width: 24px; height: 24px; flex: none; accent-color: var(--ehbs-primary); }
.portal-antwort:has(input:checked) { border-color: var(--ehbs-primary); background: var(--ehbs-primary-tint); }
.portal-antwort:has(input:focus-visible) { outline: 3px solid var(--ehbs-focus); outline-offset: 2px; }

.portal-auswertung { list-style: none; padding: 0; display: grid; gap: var(--space-3); }
.portal-auswertung li { border: 1px solid var(--ehbs-line); border-inline-start: 6px solid var(--ampel-green); border-radius: var(--radius); padding: var(--space-4); }
.portal-auswertung li.ist-falsch { border-inline-start-color: var(--ampel-red); }
.portal-auswertung p:last-child { margin-bottom: 0; }

.portal-daten { display: grid; grid-template-columns: minmax(8rem, 14rem) 1fr; gap: var(--space-2) var(--space-4); margin: var(--space-6) 0; }
.portal-daten dt { font-weight: 700; }
.portal-daten dd { margin: 0; }
@media (max-width: 520px) { .portal-daten { grid-template-columns: 1fr; } .portal-daten dd { margin-bottom: var(--space-2); } }

.portal-qr { width: 220px; height: 220px; image-rendering: pixelated; border: 1px solid var(--ehbs-line); margin: var(--space-2) 0; }

/* Kopfzeile auf dem Handy: Logo kleiner, Knöpfe in eigener Zeile */
@media (max-width: 640px) {
  .ehbs-header { position: static; }
  .ehbs-header .ehbs-container { flex-wrap: wrap; min-height: 64px; padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .ehbs-logo img { height: 40px; }
  .portal-kopfaktionen { width: 100%; justify-content: flex-start; }
  .portal-schmal { border-radius: 0; }
  .portal-main { padding-top: 0; }
}

/* Sprunglink ohne -9999px: bei Arabisch (rechts nach links) erzeugte der weite Versatz eine leere Seitenbreite */
.ehbs-skip { left: var(--space-4); inset-inline-start: var(--space-4); transform: translateY(-150%); }
.ehbs-skip:focus { left: var(--space-4); transform: none; }
[dir="rtl"] .ehbs-skip, [dir="rtl"] .ehbs-skip:focus { left: auto; right: var(--space-4); }

/* KI-Fragenassistent: schlichtes Chatfenster */
.portal-ki { list-style: none; padding: 0; margin: var(--space-6) 0; display: grid; gap: var(--space-4); }
.portal-ki__paar { display: grid; gap: var(--space-2); }
.portal-ki__blase { border-radius: var(--radius); padding: var(--space-3) var(--space-4); max-width: 46rem; }
.portal-ki__blase p { margin: 0; }
.portal-ki__blase--frage { background: var(--ehbs-primary-tint); justify-self: end; margin-inline-start: var(--space-8); }
.portal-ki__blase--antwort { background: var(--ehbs-white); border: 1px solid var(--ehbs-line); border-inline-start: 6px solid var(--ehbs-primary); margin-inline-end: var(--space-8); }
.portal-ki__wer { font-size: var(--fs-small); font-weight: 700; color: var(--ehbs-text-sek); margin-bottom: var(--space-1) !important; }
.portal-ki__text { white-space: pre-line; }
.portal-ki__weiter, .portal-ki__mensch { margin-top: var(--space-3) !important; }
.portal-ki__mensch summary { cursor: pointer; font-weight: 700; color: var(--ehbs-primary); min-height: 44px; display: flex; align-items: center; }
.portal-ki__blase .ehbs-status { white-space: normal; }
.portal-ki__form textarea { min-height: 6rem; }
.portal-ki__knopf { margin-top: var(--space-6); }
@media (max-width: 520px) { .portal-ki__blase--frage { margin-inline-start: var(--space-4); } .portal-ki__blase--antwort { margin-inline-end: 0; } }

/* Sprachen ohne Video: ausgegraut, nicht wählbar */
.portal-sprache-aus { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 52px; border: 2px dashed var(--ehbs-line); border-radius: var(--radius); color: var(--ehbs-text-sek); background: var(--ehbs-bg-soft); cursor: not-allowed; text-align: center; }
.portal-sprache-aus small { font-size: var(--fs-small); font-weight: 400; }

/* Lead-Magnet /kostenlos */
.portal-lead__hero { padding: var(--space-12) 0; }
.portal-lead__hero .ehbs-container { max-width: 960px; }
.portal-lead .portal-schmal { margin-top: var(--space-6); }
.portal-video--frei { background: var(--ehbs-primary); }
.portal-abstand-klein { margin-top: var(--space-6); }
.portal-sprachchips { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.portal-sprachchips li { border: 1px solid var(--ehbs-primary); border-radius: var(--radius); padding: var(--space-1) var(--space-2); font-size: var(--fs-small); font-weight: 700; }
.portal-sprachchips li.ist-aus { border: 1px dashed var(--ehbs-line); color: var(--ehbs-text-sek); font-weight: 400; background: var(--ehbs-bg-soft); }
.portal-sprachchips li.ist-aus span { font-size: 0.75rem; }
.portal-lead__form { max-width: 46rem; }
.portal-lead__haken { margin-top: var(--space-4); padding: var(--space-3); border: 1px solid var(--ehbs-line); border-radius: var(--radius); }
.portal-lead__haken.ehbs-field--error { border: 2px solid var(--ampel-red); }
.portal-lead__haken input { width: 24px; height: 24px; flex: none; }
/* Honigtopf für Bots: unsichtbar, aber nicht display:none (manche Bots überspringen versteckte Felder) */
.portal-honig { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .portal-lead__hero { padding: var(--space-8) 0; } .portal-lead .portal-schmal { margin-top: 0; } }
.portal-lead__breit { grid-column: 1 / -1; }