/* Die Schriftgroesse aus den Gestaltungseinstellungen muss hier stehen, nicht
   auf <body>: rem-Angaben richten sich nach der Wurzel. Lag die Skalierung auf
   dem Koerper, blieb die Wurzel bei 16px und saemtliche rem-Groessen - also
   fast die gesamte Oberflaeche - ignorierten die Vorgabe. */
html {
  font-size: calc(16px * var(--font-scale, 1));
}

:root {
  color-scheme: light;
  --ink: #1c2333;
  --muted: #647084;
  --line: #dfe5ee;
  --panel: #ffffff;
  --page: #f5f7fb;
  --nav: #16202f;
  --nav-soft: #243144;
  --accent: #e77408;
  --accent-dark: #c46206;
  --focus: #ffb84d;
  --icon-color: #ffb84d;
  /* Kraeftiges Branding-Orange fuer Text und Ziffern. --icon-color ist auf
     Weiss zu blass zum Lesen; dieser Ton wird auch sonst fuer Text verwendet
     (z. B. Fortschrittsanzeige im Prompt-Labor). */
  --brand-orange: #e87500;
  --ki-chat-bg: #f7f9fc;
  --ki-chat-text: #223044;
  --green: #2d8a63;
  --rose: #b44d62;
  --custom-page: #f5f7fb;
  --font-scale: 1;
  --tutor-path-width: 28%;
  --tutor-editor-width: 36%;
  --tutor-content-width: 36%;
  --student-learning-width: 55%;
  --student-chat-width: 45%;
  --group-list-width: 25%;
  --group-chat-width: 55%;
  --group-moderation-width: 20%;
  --shadow: 0 18px 55px rgba(24, 37, 56, 0.12);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* {
  box-sizing: border-box;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.icon,
.inline-icon {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
}

.inline-icon {
  width: 15px;
  height: 15px;
  margin-right: 6px;
}

.custom-symbol {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  object-fit: contain;
}

body {
  margin: 0;
  min-height: 100vh;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.62)),
    url("data:image/svg+xml,%3Csvg width='1600' height='900' viewBox='0 0 1600 900' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='1600' height='900' fill='%23eaf1f4'/%3E%3Cpath d='M0 610c180-60 330-42 455 18s263 118 439 80 291-137 453-122c103 10 188 52 253 89v225H0Z' fill='%23d1e4de'/%3E%3Cpath d='M135 194h420v242H135z' fill='%23ffffff' opacity='.78'/%3E%3Cpath d='M188 252h313M188 302h235M188 352h278' stroke='%23176b87' stroke-width='12' stroke-linecap='round' opacity='.7'/%3E%3Cpath d='M705 130h540v330H705z' fill='%23ffffff' opacity='.72'/%3E%3Ccircle cx='805' cy='242' r='62' fill='%23ffb84d' opacity='.95'/%3E%3Cpath d='M915 215h225M915 270h170M915 325h235' stroke='%231c2333' stroke-width='14' stroke-linecap='round' opacity='.42'/%3E%3Cpath d='M1035 558c-16-70 42-124 109-106 51 14 88 61 143 57 37-2 61-27 82-51' fill='none' stroke='%232d8a63' stroke-width='18' stroke-linecap='round' opacity='.45'/%3E%3C/svg%3E");
  background-size: cover;
  color: var(--ink);
  font-size: 1rem;
}

body.plain-background {
  background: var(--custom-page);
}

body.logged-out .app-shell {
  filter: blur(2px);
  pointer-events: none;
  user-select: none;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.login-overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  place-items: center;
  padding: 24px;
  overflow-y: auto;
  background: rgba(22, 32, 47, 0.72);
}

.logged-out-screen {
  position: fixed;
  inset: 0;
  z-index: 19;
  display: none;
  place-items: center;
  padding: 24px;
  background: rgba(22, 32, 47, 0.72);
}

.logged-out-screen.active {
  display: grid;
}

.login-overlay.active {
  display: flex;
  /* "safe center" faellt auf Start-Ausrichtung zurueck, sobald der Inhalt
     hoeher als der Viewport ist - ohne "safe" wuerde reines "center" den
     oberen ueberlaufenden Teil des Panels beim Scrollen unerreichbar
     abschneiden (bekannte Flexbox-Eigenheit), genau das Problem auf kleinen
     Handybildschirmen. */
  align-items: safe center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
}

.login-panel {
  display: grid;
  width: min(420px, 100%);
  gap: 16px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
}

.state-load-error-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(22, 32, 47, 0.85);
}

.state-load-error-panel {
  display: grid;
  width: min(420px, 100%);
  gap: 14px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow);
  text-align: center;
}

@media (max-width: 480px) {
  .login-overlay {
    padding: 12px;
  }

  .login-panel {
    gap: 10px;
    padding: 18px;
  }

  .login-panel h1 {
    font-size: 1.32rem;
  }

  .login-panel .goal-text {
    margin: 2px 0;
    font-size: 0.82rem;
  }

  .login-panel label {
    gap: 4px;
    font-size: 0.84rem;
  }

  .login-panel input,
  .login-panel select {
    min-height: 38px;
  }

  .login-panel .primary-action,
  .login-panel .secondary-action,
  .login-panel .small-action {
    min-height: 38px;
  }
}

.register-panel {
  border-color: #d6e5ec;
}

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
}

.password-reset-box {
  display: grid;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7fbfd;
}

/* Frueher ein festes Raster aus zwei Spalten. Seit "Registrieren" nur noch
   beim Kauflink erscheint, stand "Anmelden" allein in der linken Haelfte -
   also neben dem Personensymbol statt darunter. Als Flexverteilung nimmt ein
   einzelner Knopf die volle Breite und steht mittig unter dem Symbol; sind
   zwei da, teilen sie sich die Zeile wie zuvor. */
.entry-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

.entry-actions > button {
  flex: 1 1 150px;
}

.entry-actions .secondary-action {
  min-height: 42px;
}

.admin-panel {
  grid-column: 1 / -1;
  grid-row: 1;
}

.admin-panel + .layout-toolbar {
  margin-top: 0;
}

.user-list {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

/* Eine Kontozeile: links Name und Adresse, rechts die Knoepfe.
   Frueher ein Raster mit "auto" fuer die Knopfspalte. Die nahm sich so viel
   Breite, wie alle Knoepfe nebeneinander brauchen, und die Textspalte
   schrumpfte auf fast nichts - die Adresse brach nach jedem Buchstaben um.
   Fuer die Lernweg-Auswahl war das einzeln geflickt worden, bei vier Knoepfen
   in "Tutoren verwalten" trat es wieder auf.
   Jetzt umbrechend: Der Text bekommt immer mindestens 16rem. Reicht die
   Breite nicht fuer Text und Knoepfe nebeneinander, rutschen die Knoepfe in
   die naechste Zeile - statt dem Text den Platz wegzunehmen. */
.user-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.user-row > :first-child {
  flex: 1 1 16rem;
  min-width: 0;
}

.user-row > :not(:first-child) {
  flex: 0 1 auto;
}

.user-row strong,
.user-row span {
  display: block;
  overflow-wrap: anywhere;
}

.user-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.user-actions select {
  max-width: 180px;
  min-height: 34px;
}

.admin-dashboard {
  display: grid;
  grid-template-columns: minmax(0, var(--admin-user-width, 50%)) minmax(0, var(--admin-mail-width, 50%));
  gap: 18px;
  align-items: start;
}

.admin-column {
  min-height: 100%;
}

#adminUserColumn {
  display: grid;
  gap: 10px;
}

#adminUserColumn > .admin-panel {
  padding: 0 0 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

#adminUserColumn > .admin-panel .panel-header {
  display: none;
}

#adminProfileForm,
#adminTutorRegisterForm {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px 8px;
}

#adminProfileForm label,
#adminTutorRegisterForm label {
  gap: 3px;
  font-size: 0.78rem;
}

#adminProfileForm input,
#adminTutorRegisterForm input {
  min-height: 34px;
  padding: 7px 9px;
}

#adminProfileForm button,
#adminProfileForm .status-line,
#adminTutorRegisterForm button,
#adminTutorRegisterForm .status-line {
  grid-column: 1 / -1;
}

.admin-tutor-management {
  display: grid;
  gap: 8px;
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.admin-design-row {
  grid-column: 1 / -1;
}

.admin-design-row .design-panel {
  display: block;
}

.admin-design-row .design-form {
  grid-template-columns: repeat(5, minmax(120px, 1fr));
}

.mail-status-panel {
  display: grid;
  gap: 8px;
  margin-top: 0;
}

.smtp-settings-form,
.rechnungsangaben-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.smtp-settings-form .secondary-action,
.rechnungsangaben-form .secondary-action,
.rechnungsangaben-form h3 {
  grid-column: 1 / -1;
}

.rechnungsangaben-form h3 {
  margin: 10px 0 0;
}

.mail-outbox {
  display: grid;
  gap: 8px;
}

.mail-row {
  display: grid;
  gap: 3px;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 0.86rem;
}

.login-panel h1 {
  margin: 0;
  font-size: 1.7rem;
  letter-spacing: 0;
}

.login-panel.waiting #loginNameField,
.login-panel.waiting #submitLogin {
  display: none;
}

#chooseStudentLogin,
#loginNameField,
#submitLogin {
  display: none;
}

body.student-session #logoutPortal {
  display: none;
}

.login-panel:not(.waiting) #loggedOutMessage,
.login-panel:not(.waiting) #startLogin {
  display: none;
}

.tutor-locked,
.tutor-inline-lock {
  display: none;
}

.tutor-locked.active {
  display: block;
}

.tutor-inline-lock.active {
  display: grid;
  gap: 10px;
}

#tutorWorkspace.locked,
#groupForm.locked {
  display: none;
}

.app-shell {
  display: grid;
  grid-template-columns: 300px minmax(0, 1fr);
  min-height: 100vh;
}

body.sidebar-collapsed .app-shell {
  grid-template-columns: minmax(0, 1fr);
}

body.sidebar-collapsed .sidebar {
  display: none;
}

body.student-session .tab[data-view="tutor"],
body.student-session #adminNavTab {
  display: none;
}

.sidebar {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: 28px 22px;
  background: var(--nav);
  color: #f8fbff;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
}

.brand strong,
.brand span {
  display: block;
}

.brand span {
  color: #a8b6c8;
}

.brand-description {
  max-width: 210px;
  margin: 6px 0 0;
  color: #c3cfdd;
  font-size: 0.82rem;
  line-height: 1.35;
}

.brand-mark {
  display: grid;
  width: 48px;
  height: 48px;
  place-items: center;
  border-radius: 8px;
  background: #f6fbff;
}

.brand-logo {
  width: 42px;
  height: 42px;
  object-fit: contain;
}

.brand-logo:not(.is-hidden) + svg {
  display: none;
}

.brand-mark svg {
  width: 34px;
  height: 34px;
}

.brand-mark path:first-child {
  fill: var(--accent);
}

.brand-mark path:last-child {
  fill: none;
  stroke: #fff;
  stroke-width: 3;
  stroke-linecap: round;
}

.tabs {
  display: grid;
  gap: 8px;
}

.tab {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  min-height: 46px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: #dbe5f2;
  text-align: left;
}

.tab .icon {
  color: var(--icon-color);
}

.tab.active,
.tab:hover {
  background: var(--nav-soft);
  border-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.progress-card {
  margin-top: auto;
  padding: 18px;
  border-radius: 8px;
  background: var(--nav-soft);
}

.progress-card h2 {
  margin: 7px 0 14px;
  font-size: 1rem;
}

.progress-card p {
  margin: 10px 0 0;
  color: #bac7d8;
}

.sidebar-collapse-action {
  width: 100%;
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.08);
  color: #f8fbff;
}

.meter {
  height: 10px;
  overflow: hidden;
  border-radius: 99px;
  background: #334155;
}

.meter span {
  display: block;
  width: 25%;
  height: 100%;
  background: var(--icon-color);
  transition: width 180ms ease;
}

.workspace {
  min-width: 0;
  padding: 28px 28px 92px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 22px;
}

.layout-toolbar-dock {
  min-width: 0;
  flex: 1 1 360px;
}

.topbar-title-block {
  display: grid;
  gap: 7px;
  min-width: 0;
}

.page-title-row {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.learning-path-tutorials {
  display: none;
  min-width: 0;
}

.student-view-active .learning-path-tutorials {
  display: block;
}

.learning-path-tutorials:empty {
  display: none;
}

.learning-path-tutorials .tutorial-compact {
  margin: 4px 0 12px;
  padding: 5px;
}

.learning-path-tutorials .tutorial-compact-open {
  padding: 5px 8px;
}

.page-title-row .student-identity-line {
  margin: 0 0 0 auto;
  text-align: right;
}

.workspace-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
}

.workspace-brand-logo {
  width: 28px;
  max-height: 28px;
  object-fit: contain;
}

.workspace-copyright {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.2;
}

.topbar h1 {
  margin: 4px 0 0;
  font-size: 2rem;
  letter-spacing: 0;
}

.content-provenance {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: min(620px, calc(100vw - 28px));
  padding: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 700;
  line-height: 1.25;
}

.bottom-brand-bar {
  position: fixed;
  right: 14px;
  bottom: 7px;
  left: max(14px, calc(var(--sidebar-visible-width, 0px) + 14px));
  z-index: 48;
  display: grid;
  /* Links der Hilfeknopf, dann die Schieberegler, rechts mit viel Platz Logo,
     Copyright und die Herkunftsangabe. Der Hilfeknopf stand frueher als
     blosses "?" oben zwischen den Werkzeugknoepfen und ging dort unter; die
     Marke stand zwischen beiden und wurde beschnitten. */
  grid-template-columns: auto minmax(280px, 1fr) auto minmax(420px, auto);
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 7px 12px;
  border: 1px solid rgba(203, 213, 225, 0.82);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 6px 22px rgba(15, 23, 42, 0.1);
  backdrop-filter: blur(8px);
}

.bottom-brand-bar .workspace-brand,
.bottom-brand-bar .content-provenance {
  min-width: 0;
}

.bottom-brand-bar .workspace-brand {
  justify-content: flex-start;
}

.bottom-brand-bar .layout-toolbar-dock {
  width: 100%;
  min-width: 0;
  justify-self: center;
}

.bottom-brand-bar .content-provenance {
  justify-content: flex-end;
  text-align: right;
}

.bottom-brand-bar .layout-toolbar {
  margin: 0;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  width: 100%;
}

.bottom-brand-bar .layout-toolbar .split-control {
  flex: 0 1 auto;
}

.bottom-brand-bar .layout-toolbar input[type="range"] {
  width: clamp(62px, 5vw, 92px);
}

.content-provenance .ai-generated-symbol {
  width: 28px;
  height: 28px;
  object-fit: contain;
  flex: 0 0 auto;
}

.content-provenance strong {
  color: var(--text);
  font-size: 0.72rem;
  font-weight: 900;
}

.ai-modified-mark {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}

.ai-modified-text {
  color: var(--text);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.02em;
}

.bottom-brand-bar .app-version {
  font-size: 0.68rem;
  white-space: nowrap;
}

@media (max-width: 1380px) {
  .bottom-brand-bar {
    grid-template-columns: auto minmax(220px, 1fr) auto minmax(360px, auto);
    gap: 9px;
  }

  .bottom-brand-bar .content-provenance strong {
    max-width: 280px;
  }
}

@media (max-width: 720px) {
  .content-provenance {
    max-width: none;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
    flex-wrap: nowrap;
    gap: 4px;
    overflow: hidden;
    padding: 0;
    font-size: 0.52rem;
  }

  .content-provenance .ai-generated-symbol {
    width: 14px;
    height: 14px;
  }

  .content-provenance strong {
    min-width: 0;
    overflow: hidden;
    font-size: 0.54rem;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .ai-modified-mark {
    gap: 3px;
  }

  .ai-modified-text,
  .bottom-brand-bar .app-version {
    font-size: 0.5rem;
  }

  .bottom-brand-bar .workspace-brand-logo {
    width: 18px;
    max-height: 18px;
  }

  .bottom-brand-bar .workspace-copyright {
    max-width: none;
    overflow: visible;
    font-size: 0.52rem;
    text-overflow: clip;
    white-space: nowrap;
  }

  .bottom-brand-bar {
    position: fixed;
    right: 4px;
    bottom: 0;
    left: 4px;
    display: flex;
    flex-direction: column;
    width: auto;
    margin: 0;
    gap: 1px;
    min-height: 50px;
    padding: 4px 6px;
    overflow: hidden;
    white-space: nowrap;
  }

  /* Schmal steht der Hilfeknopf zuoberst in der Fusszeile - dort sieht man
     ihn, ohne zu suchen. */
  .bottom-brand-bar .hilfe-knopf {
    order: 0;
    align-self: center;
    padding: 2px 10px;
  }

  .bottom-brand-bar .content-provenance {
    order: 1;
    width: 100%;
  }

  .bottom-brand-bar .workspace-brand {
    order: 2;
    justify-content: center;
    width: 100%;
    min-height: 20px;
  }

  .bottom-brand-bar .workspace-brand-logo,
  .bottom-brand-bar .workspace-copyright {
    flex-shrink: 0;
  }

  .workspace {
    padding-bottom: calc(72px + env(safe-area-inset-bottom));
  }

  .bottom-brand-bar .layout-toolbar-dock {
    min-width: 330px;
  }
}

.section-kicker {
  display: flex;
  align-items: center;
  margin: 0;
  color: var(--accent);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.role-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.9);
}

body.student-session .topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

@media (min-width: 641px) {
  body.student-session .workspace {
    padding-top: 14px;
  }

  body.student-session .topbar-title-block,
  body.student-session .page-title-row {
    display: contents;
  }

  body.student-session .topbar h1 {
    order: 1;
    flex: 0 1 auto;
    margin-top: 0;
    white-space: nowrap;
  }

  body.student-session .role-switch {
    order: 2;
    /* "flex: 0 0 auto" liess die Leiste bei allen sichtbaren Knoepfen
       (Navigation, App installieren, Textfeld, Lernstand senden, EXIT) nicht
       schrumpfen - zusammen mit Auswahlfeld und Anmeldetext lief die
       Kopfzeile dann waagerecht ueber. Sie darf schrumpfen; die Knoepfe
       brechen dank flex-wrap sauber um. */
    flex: 0 1 auto;
    min-width: 0;
  }

  /* Gehoert optisch zur Ueberschrift (order 1) und muss deshalb direkt
     dahinter stehen - .page-title-row ist hier "display: contents", das Feld
     wird also selbst zum Flex-Kind der Kopfzeile. */
  body.student-session #studentAssignedPathWrap {
    order: 1;
    /* Kein "min-width: 0" hier - das wuerde die Mindestbreite aus
       .assigned-path-select wieder aufheben (hoehere Spezifitaet) und der
       Lernwegname waere erneut abgeschnitten. */
    flex: 0 1 auto;
  }

  /* .student-identity-row ist absichtlich "display: contents" (siehe dort),
     wodurch dieser Button hier direkt zum Flex-Kind von .topbar wird und
     ohne eigenes "order" auf den Default 0 zurueckfaellt - das hat ihn vor
     die Ueberschrift (order 1) springen lassen. Order 2 setzt ihn an dieselbe
     Stelle wie .role-switch, direkt vor den nachfolgenden Identitaetstext
     (order 3); die DOM-Reihenfolge (nach .role-switch) entscheidet bei
     gleichem order-Wert, wer zuerst steht.
     "margin-left: auto" steht jetzt hier statt beim Text: Bei
     "justify-content: space-between" zieht ein Element mit auto-Margin den
     gesamten uebrigen Platz vor sich selbst zusammen - stand das auto-Margin
     beim Text, klaffte eine grosse Luecke zwischen Symbol und Text, obwohl
     beide zusammengehoeren sollen. */
  body.student-session #myStudentAccountButton {
    order: 2;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
  }

  /* Restlaufzeit links vor dem Avatar. Sie steht im DOM direkt davor und hat
     dasselbe order - ist sie sichtbar, uebernimmt sie das auto-Margin, und
     der Avatar rueckt mit kleinem Abstand an sie heran. */
  body.student-session #studentPathRuntime {
    order: 2;
    flex: 0 0 auto;
    margin: 0 0 0 auto;
  }

  body.student-session #studentPathRuntime:not(.is-hidden) + #myStudentAccountButton {
    margin-left: 0.5rem;
  }

  body.student-session .student-identity-line {
    order: 3;
    /* "min-width: max-content" verhinderte jedes Schrumpfen und liess die
       Kopfzeile waagerecht ueberlaufen, sobald das Lernweg-Auswahlfeld seine
       Mindestbreite beansprucht. Der Text darf schrumpfen - er wird ohnehin
       mit "…" gekuerzt (text-overflow unten). */
    flex: 0 1 auto;
    min-width: 0;
    max-width: min(32vw, 620px);
    margin: 0;
    overflow: hidden;
    text-align: right;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

body.student-session .role-switch {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 6px;
  padding: 6px;
}

body.student-session .layout-toolbar-dock {
  width: auto;
  flex: 1 1 360px;
}

body.student-session .bottom-brand-bar .layout-toolbar-dock {
  width: 100%;
}

body.student-session .role-switch label[for="learnerSelect"],
body.student-session .role-switch #learnerSelect,
body.student-session .role-switch #logoutPortal {
  display: none;
}

/* Eigenstaendige Schueler-Konten haben nur eine Identitaet (kein
   Demo-Teilnehmer-Umschalter) und keinen Easy2-Rueckkehrpfad - die
   Namensauswahl wird ausgeblendet, "Abmelden" bleibt aber sichtbar. */
body.account-session .role-switch label[for="learnerSelect"],
body.account-session .role-switch #learnerSelect {
  display: none;
}

/* Admin/Tutor haben keinen Demo-Teilnehmer aktiv - die Auswahl zeigt dort
   ohnehin nur "Nicht angemeldet" und ist reine Unordnung in der Kopfzeile. */
body.management-session .role-switch label[for="learnerSelect"],
body.management-session .role-switch #learnerSelect {
  display: none;
}

body.student-session .role-switch .small-action {
  min-height: 32px;
  padding: 5px 9px;
  font-size: 0.76rem;
}

body.student-session #toggleNotesPanel {
  order: 1;
}

body.student-session #learningStatusMailButton {
  order: 2;
}

body.student-session #learningReturnButton {
  order: 3;
}

body.student-session #sidebarToggle {
  order: 4;
}

body.student-session #learningStatusMailStatus {
  order: 5;
  flex: 1 0 100%;
  min-height: 0;
  margin: 0;
  font-size: 0.76rem;
}

.role-switch select {
  min-width: 130px;
}

.role-switch label {
  color: var(--muted);
  font-size: 0.9rem;
}

select,
input,
textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

select,
input {
  min-height: 42px;
  padding: 0 12px;
}

select {
  appearance: auto;
  padding-right: 34px;
  cursor: pointer;
}

#contentType {
  min-height: 46px;
  border-width: 2px;
  border-color: color-mix(in srgb, var(--accent) 34%, #ffffff);
  background:
    linear-gradient(45deg, transparent 50%, var(--accent-dark) 50%) right 18px center / 7px 7px no-repeat,
    linear-gradient(135deg, var(--accent-dark) 50%, transparent 50%) right 12px center / 7px 7px no-repeat,
    #fff;
}

textarea {
  resize: vertical;
  padding: 12px;
  line-height: 1.45;
}

label {
  display: grid;
  gap: 7px;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.checkbox-row {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
}

.checkbox-row input {
  width: 18px;
  min-height: 18px;
}

.view {
  display: none;
}

.view.active {
  display: block;
}

.grid {
  display: grid;
  gap: 18px;
}

.layout-toolbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 5px 8px;
  min-height: 0;
  margin: 0;
  padding: 5px 8px;
  border: 1px solid #d7e4e4;
  border-radius: 8px;
  background: rgba(246, 250, 249, 0.96);
}

.layout-toolbar .split-control {
  display: flex;
  align-items: center;
  gap: 5px;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 900;
  white-space: nowrap;
}

.layout-toolbar input[type="range"] {
  width: 76px;
  height: 12px;
  accent-color: var(--accent);
}

.layout-toolbar .moderation-layout-toggle {
  display: flex;
  min-height: 24px;
  padding: 0 4px;
  font-size: 0.74rem;
}

.is-hidden {
  display: none !important;
}

.form-hint {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-size: 0.82rem;
}

.cockpit-details {
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fbfd;
}

.cockpit-details > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding: 8px 11px;
  color: var(--accent-dark);
  cursor: pointer;
  font-weight: 900;
  list-style: none;
}

.cockpit-details > summary::-webkit-details-marker {
  display: none;
}

.cockpit-details > summary::before {
  content: "+";
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 99px;
  background: #deedf1;
  color: var(--accent-dark);
  font-size: 0.9rem;
  line-height: 1;
}

.cockpit-details[open] > summary {
  border-bottom: 1px solid var(--line);
  background: #f1f7f9;
}

.cockpit-details[open] > summary::before {
  content: "-";
}

.details-body {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 11px;
}

.details-body .status-line {
  margin: 0;
}

.design-group-title {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--accent-dark);
  font-weight: 900;
}

.design-group-title:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.two-columns {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.tutor-layout {
  display: grid;
  grid-template-columns: minmax(0, var(--tutor-path-width)) minmax(0, var(--tutor-editor-width)) minmax(0, var(--tutor-content-width));
  gap: 18px;
  align-items: start;
}

.path-sidebar {
  grid-column: 1;
  grid-row: 2;
}

.tutor-main {
  display: contents;
}

.tutor-main > .two-columns {
  display: contents;
}

.path-editor-panel {
  grid-column: 2;
  grid-row: 2;
}

.content-panel {
  grid-column: 3;
  grid-row: 2;
}

.path-sidebar.is-sticky,
.path-editor-panel.is-sticky,
.content-panel.is-sticky {
  position: sticky;
  top: 18px;
  max-height: calc(100vh - 36px);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.sticky-panel-toggle {
  width: auto;
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--accent-dark);
  font-weight: 900;
  white-space: nowrap;
}

.design-panel {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 12px 14px;
}

.design-panel .panel-header {
  margin-bottom: 8px;
}

.design-panel .panel-header h2 {
  font-size: 1.04rem;
}

.design-form label {
  gap: 4px;
  font-size: 0.76rem;
}

.design-form input,
.design-form select,
.design-form textarea {
  min-height: 32px;
  padding: 6px 8px;
}

.design-form input[type="color"] {
  min-height: 32px;
  padding: 3px;
}

.design-form input[type="file"] {
  padding: 6px;
}

.design-form textarea {
  height: 32px;
  min-height: 32px;
}

.design-system-prompt-field {
  display: grid;
  gap: 4px;
  font-size: 0.76rem;
}

.design-system-prompt-field textarea {
  height: 160px;
  min-height: 120px;
  padding: 8px 10px;
  resize: vertical;
}

.design-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 8px 10px;
}

.design-form .design-wide-field {
  grid-column: 1 / -1;
}

.design-grid .design-details {
  align-self: stretch;
  grid-column: 1 / -1;
}

.design-grid .design-details > summary {
  min-height: 32px;
  padding: 6px 8px;
  font-size: 0.76rem;
}

.design-grid .design-details .details-body {
  padding: 8px;
}

.design-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: end;
  gap: 8px;
}

.design-detail-grid .design-wide-field {
  grid-column: 1 / -1;
}

.design-grid .checkbox-row {
  grid-column: 1 / -1;
  align-self: center;
  min-height: 32px;
  font-size: 0.76rem;
}

.design-form .secondary-action {
  min-height: 32px;
  padding: 0 8px;
  font-size: 0.78rem;
}

.design-form .form-hint {
  margin-top: 2px;
  font-size: 0.74rem;
}

.design-group-title {
  grid-column: 1 / -1;
  align-self: center;
  margin: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f6f9fb;
  color: var(--accent-dark);
  font-size: 0.76rem;
  font-weight: 900;
}

.library-panel {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 0;
}

/* Suche in der Wissensbasis. Steht ueber der Liste, weil sie bei ueber
   siebzig Quellen der einzige brauchbare Weg zu einer bestimmten ist. */
.library-search {
  display: grid;
  gap: 4px;
  margin: 0 0 10px;
  font-weight: 700;
}

.library-search-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 1.1rem;
}

/* Bewusst gross: Die Suche ist bei ueber siebzig Quellen der einzige
   brauchbare Weg zu einer bestimmten - sie soll ins Auge fallen. */
.library-search-icon {
  width: 30px;
  height: 30px;
  color: var(--icon-color, currentColor);
  stroke-width: 2.4;
}

.library-search input {
  width: 100%;
  min-height: 46px;
  font-size: 1.02rem;
}

.library-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 12px;
}

.library-tools label {
  display: grid;
  gap: 4px;
  min-width: 190px;
  font-weight: 700;
}

/* Eine Zeile je Quelle. Geschlossen zeigt sie nur, was zum Wiederfinden
   noetig ist; die Felder zum Bearbeiten entstehen erst beim Aufklappen. */
.quelle-zeile {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}

.quelle-zeile.ist-wissen {
  border-left: 4px solid var(--accent-soft, #7fb5a3);
}

.quelle-zeile.is-offen {
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.1);
}

.quelle-kopf {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 12px;
  border: 0;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.quelle-kopf:hover,
.quelle-kopf:focus-visible {
  background: var(--page);
}

/* Der Pfeil sagt, dass sich die Zeile oeffnen laesst. Vorher stand links nur
   ein kleines Symbol fuer die Art - das hielt niemand fuer eine Schaltflaeche. */
.quelle-pfeil {
  flex: 0 0 auto;
  width: 22px;
  color: var(--accent, #d2691e);
  font-size: 1.25rem;
  line-height: 1;
  text-align: center;
}

.quelle-zeile.is-offen .quelle-kopf {
  background: var(--page);
}

.quelle-text {
  display: grid;
  gap: 1px;
  flex: 1 1 auto;
  min-width: 0;
}

.quelle-titel {
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quelle-adresse {
  color: var(--muted);
  font-size: 0.82rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.quelle-marken {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  max-width: 46%;
}

.quelle-nummer {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

/* Die aufgeklappte Quelle laesst sich in der Groesse ziehen - wer einen
   langen Fachtext bearbeitet, braucht mehr Platz als fuer eine Adresse. */
.quelle-zeile.is-offen .content-card {
  margin: 0 12px 12px;
  resize: vertical;
  overflow: auto;
  min-height: 220px;
  max-height: 85vh;
}

.keyword-exclusions {
  margin-bottom: 14px;
}

.path-list {
  display: grid;
  gap: 9px;
}

.path-list-item {
  display: grid;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.path-select-button {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.path-list-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
  justify-content: flex-start;
}

.path-list-item.active {
  border-color: var(--accent);
  background: #eef8f5;
}

.path-list-item span,
.path-select-button span {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.path-assignment-select {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.path-assignment-select select {
  min-height: 76px;
  padding: 6px;
  font-size: 0.86rem;
}

.active-path-assignment {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.assignment-panel {
  display: grid;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.cockpit-details.assignment-panel {
  gap: 0;
  padding-top: 0;
}

.assignment-add-form {
  display: grid;
  gap: 8px;
}

.assignment-path-list {
  display: grid;
  gap: 8px;
}

.assignment-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  padding: 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 0.86rem;
}

.assignment-row input {
  width: 18px;
  min-height: 18px;
}

.assignment-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.student-grid {
  grid-template-columns: minmax(0, var(--student-learning-width)) minmax(0, var(--student-chat-width));
  align-items: start;
}

body.has-floating-ki .student-grid {
  grid-template-columns: minmax(0, var(--student-learning-width)) minmax(0, var(--student-chat-width));
}

body.has-floating-ki .student-grid .search-panel {
  display: none;
}

.learning-panel,
.search-panel {
  align-self: start;
}

.student-grid .search-panel {
  display: grid;
  grid-template-rows: auto auto minmax(220px, 1fr) auto auto;
  height: var(--learning-panel-height, auto);
  min-height: 0;
  overflow: hidden;
}

.student-grid .search-panel .panel-header {
  justify-content: flex-end;
}

.ki-bold-window-header {
  justify-content: flex-end;
}

.ki-bold-reset-button {
  min-height: 28px;
  padding: 4px 8px;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: 7px;
  background: #fff;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0;
}

.ki-bold-reset-button:hover,
.ki-bold-reset-button:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, #fff);
}

.student-grid .search-panel .panel-header > div:first-child {
  display: none;
}

.student-grid .search-panel .ki-chat-log {
  height: 100%;
  max-height: none;
  min-height: 0;
}

.notes-panel {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 48;
  display: none;
  width: min(420px, calc(100vw - 44px));
  max-height: min(560px, calc(100vh - 44px));
  overflow: auto;
  border: 1px solid var(--line);
  box-shadow: 0 22px 70px rgba(17, 31, 48, 0.24);
}

body.has-floating-ki .notes-panel {
  right: min(522px, calc(100vw - 440px));
}

body.notes-panel-open .notes-panel {
  display: grid;
}

.notes-panel.notes-bounce-in {
  animation: notes-panel-float-in 620ms cubic-bezier(0.2, 1.02, 0.25, 1);
  transform-origin: 88% 100%;
}

.notes-panel textarea {
  min-height: 220px;
  max-height: min(380px, calc(100vh - 190px));
}

.knowledge-zip-metadata-grid,
.student-document-collection {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.knowledge-zip-metadata-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.student-document-collection {
  width: 100%;
  padding-top: 10px;
}

.student-document-open {
  display: flex;
  gap: 10px;
  align-items: center;
  min-width: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.student-document-open:hover,
.student-document-open:focus-visible {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 5%, #fff);
}

.student-document-open span:last-child {
  min-width: 0;
}

.student-document-open strong,
.student-document-open small {
  display: block;
  overflow-wrap: anywhere;
}

.student-document-open small {
  margin-top: 3px;
  color: var(--muted);
}

.imported-document-metadata {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--surface-soft);
}

.imported-document-metadata div {
  display: flex;
  gap: 6px;
}

.imported-document-metadata dt {
  font-weight: 800;
}

.imported-document-metadata dd {
  margin: 0;
}

@media (max-width: 720px) {
  .knowledge-zip-metadata-grid,
  .student-document-collection {
    grid-template-columns: 1fr;
  }
}

.group-grid {
  grid-template-columns: minmax(0, var(--group-list-width)) minmax(0, var(--group-chat-width)) minmax(0, var(--group-moderation-width));
}

body.hide-moderation .group-grid {
  grid-template-columns: minmax(0, var(--group-list-width)) minmax(0, calc(100% - var(--group-list-width)));
}

body.hide-moderation .moderation-panel {
  display: none;
}

.panel {
  min-width: 0;
  padding: 22px;
  border: 1px solid rgba(223, 229, 238, 0.9);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: var(--shadow);
}

.full-width {
  margin-top: 18px;
}

.panel-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 18px;
}

.panel-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.panel-header h2 {
  margin: 4px 0 0;
  font-size: 1.16rem;
}

.stack {
  display: grid;
  gap: 14px;
}

.compact {
  gap: 12px;
}

.primary-action,
.secondary-action,
.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 42px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-weight: 800;
}

.primary-action {
  background: var(--accent);
  color: #fff;
}

.primary-action:hover {
  background: var(--accent-dark);
}

.secondary-action {
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
  color: var(--accent-dark);
  border-color: color-mix(in srgb, var(--accent) 34%, #ffffff);
}

.secondary-action:hover {
  background: color-mix(in srgb, var(--accent) 16%, #ffffff);
  border-color: var(--accent);
}

.primary-action .icon,
.secondary-action .icon,
.small-action .icon,
.icon-button .icon {
  color: var(--icon-color);
}

.icon-button {
  width: 42px;
  min-width: 42px;
  background: color-mix(in srgb, var(--accent) 12%, #ffffff);
  color: var(--accent-dark);
  border-color: color-mix(in srgb, var(--accent) 38%, #ffffff);
}

.step-status-action {
  display: none;
  align-items: center;
  gap: 10px;
}

.student-identity-row {
  /* Bleibt layouttechnisch unsichtbar, damit alle bestehenden Regeln fuer
     .student-identity-line (order, margin, Media-Queries) unveraendert
     greifen - der Avatar-Button wird nur optisch direkt danebengesetzt. */
  display: contents;
}

.student-identity-line {
  display: none;
  margin: 4px 2px 8px;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 800;
  overflow-wrap: anywhere;
}

.avatar-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, #ffffff);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 12%, #ffffff);
  color: var(--accent-dark);
}

.avatar-button:hover {
  background: color-mix(in srgb, var(--accent) 20%, #ffffff);
}

.avatar-button .icon {
  width: 28px;
  height: 28px;
}

.student-view-active .student-identity-line {
  display: block;
}

.step-done-status {
  color: #9a3412;
  font-size: 0.92rem;
  font-weight: 900;
  text-transform: uppercase;
}

.step-done-status.is-done {
  color: #08754c;
}

#completeStep {
  position: relative;
  width: 48px;
  min-width: 48px;
  min-height: 48px;
  border-width: 2px;
  background: #fff3d7;
  box-shadow: 0 8px 18px rgba(122, 74, 0, 0.14);
}

#completeStep.is-pending {
  animation: pending-check-bounce 1.9s ease-in-out infinite;
}

#completeStep .icon {
  width: 24px;
  height: 24px;
  stroke-width: 3;
}

#completeStep.is-done {
  background: #12a36a;
  border-color: #08754c;
  color: #fff;
  box-shadow: 0 10px 22px rgba(18, 163, 106, 0.25);
}

#completeStep.is-done .icon {
  color: #fff;
}

#completeStep.just-completed {
  animation: progress-check-bounce 520ms cubic-bezier(0.2, 0.9, 0.25, 1.25);
}

@keyframes progress-check-bounce {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.22);
  }
  60% {
    transform: scale(0.94);
  }
  82% {
    transform: scale(1.07);
  }
  100% {
    transform: scale(1);
  }
}

@keyframes pending-check-bounce {
  0%,
  70%,
  100% {
    transform: translateY(0) scale(1);
  }
  80% {
    transform: translateY(-3px) scale(1.06);
  }
  90% {
    transform: translateY(0) scale(0.98);
  }
}

.content-type-tag {
  padding: 7px 11px;
  font-size: 0.92rem;
}

.content-type-chooser {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.content-type-chooser button {
  min-height: 32px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 34%, #ffffff);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 850;
  cursor: pointer;
}

.content-type-chooser button:hover,
.content-type-chooser button:focus-visible {
  border-color: var(--accent);
  background: #f8fcfd;
}

.content-type-chooser button.active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.count-pill {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 10px;
  border-radius: 999px;
  background: #edf7f2;
  color: var(--green);
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
}

.library-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

.content-library-section {
  display: grid;
  gap: 12px;
}

.content-library-section + .content-library-section {
  margin-top: 18px;
}

.content-library-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.content-library-section-header h3,
.content-library-section-header p {
  margin: 0;
}

.content-library-section-header h3 {
  font-size: 0.98rem;
}

.content-library-section-header p {
  color: var(--muted);
  font-size: 0.82rem;
}

.global-knowledge-section {
  padding: 10px;
  border: 1px solid rgba(231, 116, 8, 0.28);
  border-radius: 8px;
  background: #fff8ed;
}

.content-card {
  display: grid;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.content-card-highlight {
  animation: content-card-highlight 1.4s ease;
}

@keyframes content-card-highlight {
  0% {
    border-color: var(--focus);
    box-shadow: 0 0 0 4px rgba(255, 184, 77, 0.32);
  }
  100% {
    border-color: var(--line);
    box-shadow: none;
  }
}

.content-card.knowledge-card {
  background: #fffaf0;
  border-color: #f1d7a8;
  border-left: 5px solid #e77408;
  color: #803a00;
}

.content-card.knowledge-card h3,
.content-card.knowledge-card p,
.content-card.knowledge-card strong {
  color: #803a00;
}

.content-card.knowledge-card .tag {
  background: #ffe3b7;
  color: #7a3500;
}

.content-card.active-path-source-card {
  border: 2px solid #3f9969;
  box-shadow: 0 0 0 2px rgba(63, 153, 105, 0.1);
}

.content-card.knowledge-card.active-path-source-card {
  border-left: 6px solid #2f875a;
}

.active-path-steps-section,
.active-path-knowledge-section {
  padding: 10px;
  border: 1px solid rgba(63, 153, 105, 0.3);
  border-radius: 8px;
  background: #f5fbf7;
}

.quiz-runner,
.quiz-question {
  display: grid;
  gap: 10px;
}

.quiz-dialog,
.content-dialog,
.ki-bold-dialog {
  position: fixed;
  width: min(900px, calc(100vw - 32px));
  max-height: calc(100vh - 24px);
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 24px 80px rgba(17, 28, 46, 0.32);
}

.dialog-resize-dragbar {
  position: relative;
  z-index: 25;
  display: none;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  border-top: 2px solid rgba(23, 107, 135, 0.52);
  background:
    repeating-linear-gradient(135deg, rgba(23, 107, 135, 0.16) 0 8px, rgba(23, 107, 135, 0.36) 8px 10px),
    #eaf7fa;
  color: var(--accent);
  cursor: nwse-resize;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0;
  padding: 8px 12px;
  touch-action: none;
  user-select: none;
}

.dialog-resize-dragbar::after {
  content: "";
  width: 44px;
  height: 10px;
  margin-left: 10px;
  border-top: 3px solid rgba(23, 107, 135, 0.85);
  border-bottom: 3px solid rgba(23, 107, 135, 0.85);
}

.dialog-resize-dragbar:hover {
  background:
    repeating-linear-gradient(135deg, rgba(23, 107, 135, 0.12) 0 8px, rgba(23, 107, 135, 0.26) 8px 10px),
    #eef8fb;
}

.dialog-corner-resize {
  position: absolute;
  z-index: 35;
  display: block;
  pointer-events: auto;
  touch-action: none;
}

.dialog-corner-resize-n,
.dialog-corner-resize-s {
  left: 18px;
  right: 18px;
  height: 14px;
  cursor: ns-resize;
}

.dialog-corner-resize-e,
.dialog-corner-resize-w {
  top: 18px;
  bottom: 18px;
  width: 14px;
  cursor: ew-resize;
}

.dialog-corner-resize-n {
  top: 0;
}

.dialog-corner-resize-s {
  bottom: 0;
}

.dialog-corner-resize-e {
  right: 0;
}

.dialog-corner-resize-w {
  left: 0;
}

.dialog-corner-resize-ne,
.dialog-corner-resize-nw,
.dialog-corner-resize-se,
.dialog-corner-resize-sw {
  width: 24px;
  height: 24px;
}

.dialog-corner-resize-ne::after,
.dialog-corner-resize-nw::after,
.dialog-corner-resize-se::after,
.dialog-corner-resize-sw::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-color: rgba(23, 107, 135, 0.68);
  pointer-events: none;
}

.dialog-corner-resize-ne {
  top: 0;
  right: 0;
  cursor: nesw-resize;
}

.dialog-corner-resize-ne::after {
  top: 5px;
  right: 5px;
  border-top: 2px solid;
  border-right: 2px solid;
}

.dialog-corner-resize-nw {
  top: 0;
  left: 0;
  cursor: nwse-resize;
}

.dialog-corner-resize-nw::after {
  top: 5px;
  left: 5px;
  border-top: 2px solid;
  border-left: 2px solid;
}

.dialog-corner-resize-se {
  right: 0;
  bottom: 0;
  cursor: nwse-resize;
}

.dialog-corner-resize-se::after {
  right: 5px;
  bottom: 5px;
  border-right: 2px solid;
  border-bottom: 2px solid;
}

.dialog-corner-resize-sw {
  bottom: 0;
  left: 0;
  cursor: nesw-resize;
}

.dialog-corner-resize-sw::after {
  bottom: 5px;
  left: 5px;
  border-bottom: 2px solid;
  border-left: 2px solid;
}

.ki-message-text {
  white-space: normal;
  line-height: 1.5;
}

.ki-structured-answer {
  display: grid;
  gap: 6px;
}

.ki-structured-answer h4 {
  margin: 0 0 2px;
  color: var(--accent-dark);
  font-size: 0.98rem;
  font-weight: 900;
  line-height: 1.25;
}

.ki-structured-answer ul {
  display: grid;
  gap: 5px;
  margin: 0;
  padding-left: 1.15rem;
}

.ki-structured-answer li {
  margin: 0;
  padding-left: 0.12rem;
  line-height: 1.42;
}

.ki-structured-answer li::marker {
  color: var(--accent);
}

.quiz-window,
.content-window,
.ki-bold-window {
  position: relative;
  z-index: 1;
  display: grid;
  height: 100%;
  min-height: 100%;
  max-height: calc(100vh - 24px);
  grid-template-rows: auto minmax(0, 1fr) auto;
  background: #fff;
}

.quiz-window::before,
.content-window::before,
.ki-bold-window::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(135deg, var(--accent) 0 16px, transparent 16px) top left / 32px 32px no-repeat,
    linear-gradient(225deg, var(--accent) 0 16px, transparent 16px) top right / 32px 32px no-repeat,
    linear-gradient(45deg, var(--accent) 0 16px, transparent 16px) bottom left / 32px 32px no-repeat,
    linear-gradient(315deg, var(--accent) 0 16px, transparent 16px) bottom right / 32px 32px no-repeat;
  opacity: 0.34;
}

.quiz-window-header,
.content-window-header {
  margin: 0;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: #f7fbfd;
}

.quiz-window-header .icon-button,
.content-window-header .icon-button {
  align-self: start;
}

.quiz-dialog-body,
.content-dialog-body {
  min-height: 0;
  overflow: auto;
  padding: 18px;
}

.content-dialog-body {
  display: grid;
  gap: 12px;
}

.content-dialog {
  position: fixed;
  inset: 18px auto auto 18px;
  width: min(900px, calc(100vw - 540px));
  min-width: min(620px, calc(100vw - 36px));
  height: min(760px, calc(100vh - 36px));
  min-height: 420px;
  margin: 0;
  z-index: 45;
}

.content-dialog.is-email-analysis {
  inset: 8px;
  width: min(1180px, calc(100vw - 420px));
  max-width: calc(100vw - 420px);
  min-width: min(760px, calc(100vw - 32px));
  height: calc(100vh - 16px);
  max-height: calc(100vh - 16px);
}

.content-dialog.is-email-analysis .content-window {
  grid-template-rows: auto minmax(0, 1fr);
}

.content-dialog.is-email-analysis .content-dialog-notes,
.content-dialog.is-web-content .content-dialog-notes {
  display: none;
}

.content-dialog.is-web-content .content-window {
  grid-template-rows: auto minmax(0, 1fr);
}

.quiz-dialog {
  position: fixed;
  inset: 24px auto auto 24px;
  width: min(860px, calc(100vw - 48px));
  min-width: min(520px, calc(100vw - 32px));
  height: min(720px, calc(100vh - 48px));
  min-height: 420px;
  margin: 0;
  z-index: 44;
}

.quiz-dialog::backdrop,
.content-dialog::backdrop {
  background: transparent;
}

.ki-bold-dialog {
  width: min(480px, calc(100vw - 32px));
  position: fixed;
  inset: auto 18px 18px auto;
  min-width: min(360px, calc(100vw - 32px));
  height: min(720px, calc(100vh - 36px));
  min-height: 420px;
  margin: 0;
  z-index: 50;
}

.quiz-dialog.is-front,
.content-dialog.is-front,
.ki-bold-dialog.is-front {
  z-index: 80;
}

.ki-bold-dialog.ki-bold-bounce-in .ki-bold-window {
  animation: ki-bold-window-bounce-in 720ms cubic-bezier(0.2, 1.12, 0.28, 1);
  transform-origin: 92% 92%;
}

.ki-bold-dialog::backdrop {
  background: transparent;
}

.ki-bold-window {
  grid-template-rows: auto auto minmax(260px, 1fr) auto auto;
}

.quiz-window-header,
.content-window-header,
.ki-bold-window-header {
  cursor: move;
  user-select: none;
}

.block-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  margin-bottom: 18px;
}

.block-tile {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 12px 8px;
  border: 2px solid var(--block-color, var(--accent));
  border-radius: 8px;
  background: var(--panel);
  box-shadow: var(--shadow);
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.block-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 22px 60px rgba(24, 37, 56, 0.18);
}

.block-tile-open {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
  padding: 4px;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  text-align: left;
}

.block-tile-open:focus-visible {
  outline: 2px solid var(--block-color, var(--accent));
  outline-offset: 2px;
  border-radius: 6px;
}

.block-tile-open strong {
  color: var(--ink);
  font-size: 1.02em;
}

.block-tile-open span {
  color: var(--muted);
  font-size: 0.88em;
}

.block-tile-move {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
}

.block-tile-move .icon-button {
  width: 30px;
  min-height: 30px;
  height: 30px;
  padding: 0;
  font-size: 1.1em;
  line-height: 1;
}

.block-dialog {
  position: fixed;
  inset: 32px auto auto 32px;
  width: min(640px, calc(100vw - 48px));
  min-width: min(420px, calc(100vw - 32px));
  /* Hoehe bewusst vorgegeben und am Bildschirm ausgerichtet. "height: auto"
     funktioniert hier nicht: Das Fenster darin ist ein Flexlayout mit
     "height: 100%", wodurch beide aufeinander warten und alles auf null
     Pixel zusammenfaellt - Fenster, Ueberschriften und Tabelle verschwinden. */
  height: min(640px, calc(100vh - 48px));
  min-height: 320px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: transparent;
  box-shadow: 0 24px 80px rgba(17, 28, 46, 0.32);
  z-index: 46;
}

.block-dialog::backdrop {
  background: transparent;
}

#smallTalkDialog { inset: 56px auto auto 56px; }
#importSecurityDialog { inset: 80px auto auto 80px; }
#securityDashboardDialog { inset: 104px auto auto 104px; }
#mailDialog { inset: 128px auto auto 128px; }
#designDialog { inset: 152px auto auto 152px; }
#studentSessionsDialog { inset: 32px auto auto 32px; }

.mail-check-dashboard-dialog {
  inset: 24px auto auto 24px;
  width: min(1100px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
}

.mail-check-dashboard-dialog .block-window {
  padding: 0;
  gap: 0;
}

.mail-check-dashboard-dialog .block-window-header {
  margin: 0;
}

.mail-check-dashboard-frame {
  flex: 1;
  width: 100%;
  border: 0;
}

.block-dialog.is-front {
  z-index: 80;
}

.block-window {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  max-height: calc(100vh - 24px);
  overflow: auto;
  padding: 0 18px 18px;
  background: #fff;
}

.block-window-header {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 0 -18px 0;
  padding: 18px;
  border-bottom: 1px solid var(--line);
  background: #f7fbfd;
  cursor: move;
  user-select: none;
}

.block-window-header .icon-button {
  align-self: start;
}

.ki-bold-window .ki-bold-presence,
.ki-bold-window .model-select-row,
.ki-bold-window .status-line,
.ki-bold-window .ki-chat-form {
  margin-inline: 18px;
}

.ki-bold-window .ki-chat-log {
  min-height: 260px;
  max-height: none;
  margin: 0 18px 10px;
}

.web-content-preview {
  display: grid;
  gap: 10px;
}

.web-content-preview .mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.web-content-preview iframe {
  width: 100%;
  min-height: min(56vh, 620px);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.content-window-summary {
  margin: 0;
  color: var(--muted);
  line-height: 1.55;
}

.content-dialog-notes {
  display: grid;
  gap: 8px;
  padding: 14px 18px 16px;
  border-top: 1px solid var(--line);
  background: #f7fbfd;
}

.content-dialog-notes .mini-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.content-dialog-notes textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
}

.content-dialog-notes .status-line {
  min-height: 16px;
}

.quiz-runner {
  margin-top: 12px;
}

.quiz-question {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.quiz-question legend {
  padding: 0 4px;
  font-weight: 800;
}

.quiz-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.92rem;
}

.quiz-coach-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-top: 2px;
}

.quiz-coach-actions .small-action {
  min-height: 32px;
  background: #eef8f5;
  border-color: #c8e2dd;
}

.quiz-feedback {
  display: grid;
  gap: 10px;
  margin: 12px 0 0;
  color: #30465d;
}

.quiz-feedback-heading {
  margin: 0;
  color: #9a5300;
  font-weight: 900;
}

.quiz-feedback.is-correct .quiz-feedback-heading {
  color: var(--green);
}

.quiz-feedback-introduction,
.quiz-feedback-option-detail,
.quiz-feedback-summary-text {
  margin: 0;
  line-height: 1.5;
}

.quiz-feedback-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 10px;
}

.quiz-feedback-option {
  display: grid;
  gap: 5px;
  padding: 12px;
  border: 1px solid #f0c583;
  border-radius: 10px;
  background: #fffaf1;
}

.quiz-feedback-option.is-correct-option {
  border-color: #99cfa9;
  background: #f0fbf3;
}

.quiz-feedback-option.is-wrong-option {
  border-color: #efb6b6;
  background: #fff4f4;
}

.quiz-feedback-option-label {
  font-weight: 900;
}

.quiz-feedback-option.is-correct-option .quiz-feedback-option-label {
  color: var(--green);
}

.quiz-feedback-option.is-wrong-option .quiz-feedback-option-label {
  color: #a64242;
}

.quiz-feedback-summary {
  padding: 10px 12px;
  border-left: 4px solid var(--orange);
  border-radius: 4px 10px 10px 4px;
  background: #fff5e8;
}

.quiz-feedback-summary-title {
  display: block;
  margin-bottom: 3px;
  color: #9a5300;
  font-weight: 900;
}

.quiz-runner [data-quiz-result] {
  padding: 10px 12px;
  border: 1px solid #c8e2dd;
  border-radius: 8px;
  background: #eef8f5;
  color: var(--accent-dark);
  font-weight: 900;
}

.quiz-runner [data-quiz-result]:empty {
  display: none;
}

.quiz-template-edit textarea {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
}

.content-card > div:first-child {
  display: flex;
  align-items: center;
  gap: 6px;
}

.content-card h3 {
  margin: 0;
  font-size: 1rem;
}

.content-card p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.content-summary-preview {
  display: none;
}

.content-thumbnail {
  display: block;
  width: 100%;
  max-height: 180px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #eef2f6;
}

.video-preview {
  overflow: hidden;
  margin: 12px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #111827;
  aspect-ratio: 16 / 9;
}

.video-preview iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.content-edit {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 10px;
}

.content-edit label,
.content-summary-edit {
  font-size: 0.82rem;
}

.content-summary-edit {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, #ffffff);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 5%, #ffffff);
  color: var(--accent-dark);
  font-weight: 900;
}

.content-summary-edit textarea {
  width: 100%;
  min-height: 92px;
  resize: vertical;
  border-color: #b8d4de;
  background: #fff;
}

.content-path-assignment {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #d7e5ea;
  border-radius: 8px;
  background: #fff;
  color: var(--accent-dark);
  font-size: 0.82rem;
  font-weight: 900;
}

.content-path-assignment select {
  width: 100%;
  min-height: 96px;
  border-color: #b8d4de;
  background: #fff;
}

.path-panel-highlight {
  animation: path-panel-highlight 1.2s ease;
}

@keyframes path-panel-highlight {
  0% {
    border-color: var(--focus);
    box-shadow: 0 0 0 4px rgba(255, 184, 77, 0.28);
  }
  100% {
    border-color: rgba(223, 229, 238, 0.9);
    box-shadow: var(--shadow);
  }
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag {
  padding: 5px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 800;
}

.tag-offer-education {
  background: #e8f3ff;
  color: #14538f;
  border: 1px solid #b7d9ff;
}

.card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.small-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, #ffffff);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 8%, #ffffff);
  color: var(--accent-dark);
  font-weight: 800;
  white-space: nowrap;
}

.small-action:hover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, #ffffff);
}

.small-action.danger {
  color: var(--rose);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.path-builder {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.new-path-form {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.mini-header {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  color: var(--muted);
  font-size: 0.9rem;
}

.mini-header strong {
  color: var(--ink);
}

.step-list {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding-left: 24px;
}

.step-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.tutorial-step-details {
  flex: 1 0 100%;
  width: 100%;
  margin-top: 4px;
}

.path-step-tutorial-details {
  padding-top: 4px;
  border-top: 1px solid var(--line);
}

.path-step-tutorial-details > summary {
  color: var(--accent-dark);
  font-weight: 900;
}

.tutorial-path-details .tutorial-inline-editor,
.tutorial-step-details .tutorial-inline-editor {
  display: grid;
  gap: 12px;
}

.step-actions {
  display: inline-flex;
  gap: 6px;
}

.step-actions .icon-button {
  width: 34px;
  min-width: 34px;
  min-height: 34px;
  border-radius: 7px;
}

.step-actions .icon-button.danger {
  color: var(--rose);
  border-color: color-mix(in srgb, var(--rose) 28%, #ffffff);
  background: color-mix(in srgb, var(--rose) 8%, #ffffff);
}

.step-actions {
  flex-wrap: wrap;
}

/* Zwei klar getrennte Knoepfe (1.1.481): herausnehmen neutral, loeschen rot. */
.step-actions .step-remove-button {
  white-space: nowrap;
}

.step-actions .step-delete-button {
  color: #ffffff;
  border-color: var(--rose);
  background: var(--rose);
  white-space: nowrap;
}

.step-actions .step-delete-button .icon {
  color: #ffffff;
}

.step-actions .step-delete-button:hover,
.step-actions .step-delete-button:focus-visible {
  border-color: color-mix(in srgb, var(--rose) 80%, #000000);
  background: color-mix(in srgb, var(--rose) 80%, #000000);
}

.path-undo-row {
  justify-content: flex-end;
  background: color-mix(in srgb, var(--accent) 6%, #ffffff);
}

.jump-source-action {
  border-color: var(--accent);
  background: #eef8f5;
  color: var(--accent-dark);
}

.knowledge-step-row {
  border-color: #f1d7a8;
  background: #fffaf0;
}

.goal-text {
  margin: 0 0 14px;
  color: var(--muted);
  line-height: 1.5;
}

/* Steht seit Version 1.1.162 direkt neben der Seitenueberschrift (statt oben
   im Lernraum-Panel) - der Lernwegname ist dadurch aus dem Titel verschwunden
   und im Panel bleibt mehr Platz fuer die Inhalte. */
.assigned-path-select {
  display: inline-flex;
  /* Mindestbreite gehoert auf den aeusseren Rahmen: Auf dem <select> wuerde
     sich "100%" auf diesen bereits geschrumpften Rahmen beziehen und damit
     wirkungslos bleiben - die Kopfzeile (flex, kein Umbruch) quetschte den
     Lernwegnamen sonst auf "IT-Secur…" zusammen. Hier bezieht sich die
     Prozentangabe dagegen auf die Kopfzeile selbst. */
  min-width: min(300px, 100%);
  max-width: min(520px, 46vw);
  margin: 0;
}

/* Ersetzt bei einem einzigen Lernweg das Auswahlfeld. Schriftgroesse und
   -staerke bewusst identisch mit dem <select>, damit die Kopfzeile nicht je
   nach Anzahl der Lernwege unterschiedlich aussieht. */
/* Herkunftsangabe am Fuss des Zugangsbildschirms: Logo, Copyrightzeile und
   das AI-MODIFIED-Zeichen. Bewusst klein und zurueckhaltend - es soll die
   Anmeldeknoepfe nicht ueberdecken. */
/* Uebernimmt Aufbau und Klassen der Fusszeile im Lernstudio, damit beide
   gleich aussehen. Nur die Ausrichtung ist anders: im Panel untereinander
   und mittig statt nebeneinander ueber die volle Breite. */
.login-brand {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.login-brand .content-provenance {
  justify-content: center;
  flex-wrap: wrap;
  max-width: 100%;
  text-align: center;
}

/* Herkunftssatz allein in der ersten Zeile, AI-MODIFIED und Version in der
   zweiten. Gilt auch schmal - dort kuerzt die Fusszeile sonst ab. */
.login-brand .content-provenance strong {
  flex: 0 0 100%;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
}

/* Hilfe und Datenschutz nebeneinander direkt unter dem Anmeldeknopf. */
.login-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

/* Personensymbol anstelle der Ueberschrift im Zugangsbildschirm. Deutlich
   groesser als das Symbol auf den Knoepfen, weil es hier die Ueberschrift
   ersetzt und nicht bloss einen Knopf begleitet. */
.login-title-icon {
  width: 3.5rem;
  height: 3.5rem;
  display: block;
  margin: 0 auto;
  fill: none;
  /* Orange aus dem Branding, dieselbe Variable wie bei den Knopf-Symbolen. */
  stroke: var(--icon-color);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Schrittanzeige der Registrierung. Die drei Markierungen stehen einzeln im
   Formular an der Stelle, wo der jeweilige Schritt passiert - nicht als Block
   oben. Die Ziffer traegt die Brandingfarbe, der Text bleibt Fliesstext. */
.register-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 1.1rem 0 0.35rem;
  font-size: 0.95rem;
  font-weight: 700;
  /* Ziffer und Text im kraeftigen Branding-Orange. Kein Abdunkeln ueber
     opacity mehr - das machte die Beschriftung schlecht lesbar. */
  color: var(--brand-orange);
}

.register-step span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  border: 2px solid currentColor;
  font-size: 0.85rem;
  font-weight: 800;
  flex: 0 0 auto;
}

/* Erledigte Schritte zeigen ein Haekchen statt der Ziffer: Die Ziffer wird
   ausgeblendet (font-size: 0), das Haekchen kommt in normaler Groesse dazu. */
.register-step.is-done span {
  font-size: 0;
  background: var(--brand-orange);
  color: #fff;
}

.register-step.is-done span::after {
  content: "✓";
  font-size: 0.95rem;
}

/* Zwei Felder nebeneinander (Vorname/Nachname, die beiden Kennwoerter).
   Bricht auf schmalen Geraeten von selbst um. */
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: 0.75rem;
  align-items: end;
}

.form-row label {
  margin: 0;
}

/* Restlaufzeit neben dem Lernwegnamen in der Kopfzeile. Zurueckhaltend, damit
   sie den Namen nicht ueberlagert - in den letzten Tagen wird sie deutlich. */
.path-runtime {
  align-self: center;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
}

.path-runtime.is-ending {
  background: color-mix(in srgb, var(--brand-orange) 16%, #ffffff);
  color: var(--brand-orange);
}

/* Freigeschaltete Lernwege eines Kontos in der Schuelerverwaltung: je Zeile
   Name, Restlaufzeit und der Knopf zum Entziehen. */
.assigned-path-list {
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.25rem;
}

.assigned-path-list li {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.88rem;
}

.assigned-path-runtime {
  color: var(--muted);
  font-size: 0.8rem;
}

/* Einstufung eines Sicherheitsvorfalls. Protokolliert wird alles - die Farbe
   sorgt dafuer, dass echte Zugriffsversuche zwischen den erwartbaren
   Ablehnungen sofort ins Auge fallen. */
.security-event-art {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
  white-space: nowrap;
  background: var(--line);
  color: inherit;
}

.security-event-verdaechtig .security-event-art,
.security-event-Unbekanntes-Vorgehen .security-event-art,
.security-event-KI-Angriff .security-event-art {
  background: var(--rose);
  color: #fff;
}

/* Angriffe, die aus einem Inhalt stammen (E-Mail, Lernquelle, Verlauf), sind
   nicht der Person zuzurechnen, die gerade fragt - deshalb abgesetzt. */
.security-event-KI-Angriff-im-Inhalt .security-event-art {
  background: var(--brand-orange);
  color: #fff;
}

.security-event-abgewiesen .security-event-art {
  background: var(--brand-orange);
  color: #fff;
}

.security-event-verdaechtig td,
.security-event-KI-Angriff td {
  font-weight: 700;
}

/* Bestaetigung vor dem Loeschen des Kontos. Rot umrandet, damit sie sich vom
   uebrigen Formular abhebt - hier geht es um einen endgueltigen Schritt. */
.delete-account-confirm {
  margin-top: 0.75rem;
  padding: 0.9rem 1rem;
  border: 2px solid var(--rose);
  border-radius: 12px;
  background: #fff7f8;
  font-size: 0.9rem;
}

.delete-account-confirm ul {
  margin: 0.4rem 0 0.6rem;
  padding-left: 1.1rem;
}

.delete-account-confirm li {
  margin: 0.15rem 0;
}

.delete-account-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.6rem;
}

/* Anmeldedaten im Erfolgsbildschirm: Beschriftung klein darueber, Wert
   hervorgehoben - man soll ihn auf einen Blick erfassen und abschreiben
   koennen. */
.account-summary {
  display: grid;
  gap: 0.6rem;
  margin: 0.5rem 0 1rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.account-summary dt {
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.7;
}

.account-summary dd {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  overflow-wrap: anywhere;
}


/* Das Registrierungsformular hat mehr Felder als die uebrigen Panels und
   nutzt die zweispaltigen Zeilen - es darf deshalb breiter werden. */
.login-panel-wide {
  max-width: 34rem;
  width: min(34rem, 100%);
}

.assigned-path-label {
  font-size: 1.35rem;
  font-weight: 800;
  align-self: center;
  max-width: min(520px, 46vw);
  /* "anywhere" zerlegte den Lernwegnamen mitten im Wort ("E-Mailanaly se").
     "break-word" bricht zuerst zwischen Woertern und am Bindestrich und nur
     dann im Wort, wenn ein einzelnes Wort wirklich nicht passt. Die
     Mindestbreite sorgt dafuer, dass der Name Platz behaelt, wenn die
     Knoepfe daneben viel Raum nehmen. */
  min-width: 14ch;
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: manual;
}

.assigned-path-select select {
  width: 100%;
  min-height: 50px;
  /* Ohne Seitenueberschrift ist das Auswahlfeld das Hauptelement der
     Kopfzeile - die Schrift orientiert sich deshalb an der frueheren
     Ueberschrift, nicht an einem normalen Formularfeld. */
  font-size: 1.35rem;
  font-weight: 800;
}

.current-step {
  min-height: auto;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, #ffffff);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 5%, #ffffff);
}

.student-step-list {
  display: grid;
  gap: 8px;
}

.empty-step-message h3,
.empty-step-message p {
  margin: 0;
}

.empty-step-message p {
  margin-top: 6px;
  color: var(--muted);
  line-height: 1.55;
}

.student-step-page-status {
  margin: 10px 2px 0;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.student-step-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 48px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  text-align: left;
}

.student-step-open {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
}

.student-step-item.active {
  grid-template-columns: minmax(0, 1fr) auto;
  border-color: var(--accent);
  background: #eef8f5;
  box-shadow: 0 8px 18px rgba(23, 107, 135, 0.12);
}

.step-complete-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid #9fd8bd;
  border-radius: 8px;
  background: #f0fdf4;
  color: #08754c;
  font-size: 0.82rem;
  font-weight: 900;
  white-space: nowrap;
}

.step-complete-box input {
  width: 18px;
  min-height: 18px;
  accent-color: #12a36a;
}

.student-step-kind {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  border: 1px solid color-mix(in srgb, var(--accent) 30%, #ffffff);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 9%, #ffffff);
  color: var(--accent-dark);
}

.student-step-kind.is-done {
  border-color: #78caa4;
  background: #eaf8f1;
  color: #08754c;
}

.student-step-kind.is-done::after {
  position: absolute;
  right: -5px;
  bottom: -5px;
  display: grid;
  width: 16px;
  height: 16px;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 999px;
  background: #12a36a;
  color: #fff;
  content: "✓";
  font-size: 0.7rem;
  font-weight: 900;
}

.student-step-kind .content-kind-icon {
  display: block;
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
  color: currentColor;
  overflow: visible;
  stroke: currentColor;
}

.student-step-copy {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.student-step-title {
  overflow-wrap: anywhere;
  font-weight: 900;
}

.student-step-summary {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

.student-step-active-summary {
  grid-column: 1 / -1;
  margin: 0;
  padding: 8px 10px 3px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 650;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.interactive-case,
.interactive-checklist,
.interactive-roleplay,
.prompt-lab {
  display: grid;
  gap: 10px;
}

.interactive-case article,
.interactive-glossary div {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.interactive-case strong,
.interactive-glossary dt {
  display: block;
  margin-bottom: 5px;
  color: var(--accent-dark);
  font-weight: 900;
}

.interactive-case p,
.interactive-glossary dd,
.interactive-roleplay p {
  margin: 0;
  line-height: 1.5;
}

.interactive-glossary {
  display: grid;
  gap: 9px;
  margin: 0;
}

.interactive-glossary dd {
  margin-left: 0;
}

.interactive-checklist label {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
  font-weight: 750;
}

.interactive-checklist input {
  width: 18px;
  min-height: 18px;
  accent-color: #12a36a;
}

.prompt-lab textarea {
  width: 100%;
  resize: vertical;
}

.knowledge-zip-import {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #f7fafc;
}

.knowledge-zip-import progress {
  width: 100%;
  height: 12px;
  accent-color: var(--accent);
}

.prompt-lab-scenario { display: grid; gap: 14px; }
.prompt-lab-summary { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.prompt-lab-summary h3 { margin: 2px 0 0; }
.prompt-lab-progress { height: 10px; overflow: hidden; border-radius: 999px; background: #dbe4ee; }
.prompt-lab-progress i { display: block; height: 100%; border-radius: inherit; background: #e87500; transition: width .25s ease; }
.prompt-lab-stations { display: grid; gap: 14px; }
.prompt-lab-station { display: grid; gap: 12px; padding: 16px; border: 1px solid #d7e0ea; border-radius: 16px; background: #fff; }
.prompt-lab-station > header { display: flex; align-items: center; gap: 12px; }
.prompt-lab-station h4 { margin: 0; }
.prompt-lab-station small { color: #e87500; font-weight: 800; }
.prompt-lab-number { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #fff2e5; color: #c95f00; font-weight: 900; }
.prompt-lab-state { margin-left: auto; padding: 6px 10px; border-radius: 999px; background: #eef2f6; font-weight: 800; }
.prompt-lab-station[data-result="passed"] { border-color: #72bf8b; background: #f2fbf5; }
.prompt-lab-station[data-result="passed"] .prompt-lab-state { background: #dff4e5; color: #18743a; }
.prompt-lab-station[data-result="failed"] { border-color: #df7b7b; background: #fff4f4; }
.prompt-lab-station[data-result="failed"] .prompt-lab-state { background: #f8dddd; color: #a22b2b; }
.prompt-lab-station details pre { white-space: pre-wrap; overflow-wrap: anywhere; font: inherit; color: #52657a; }
.prompt-lab-station label { display: grid; gap: 7px; font-weight: 800; }
.prompt-lab-station textarea { width: 100%; resize: vertical; }
.prompt-lab-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.prompt-lab-expectation { display: grid; grid-template-columns: minmax(120px, .35fr) 1fr; gap: 8px 14px; padding: 12px; border-radius: 12px; background: #f5f8fb; }
.prompt-lab-expectation p { margin: 0; white-space: pre-wrap; }

@media (max-width: 720px) {
  .prompt-lab-summary { align-items: start; flex-direction: column; }
  .prompt-lab-expectation { grid-template-columns: 1fr; }
}

.email-analysis-tool {
  display: grid;
  gap: 10px;
}

.email-upload-row {
  display: grid;
  gap: 12px;
  align-items: start;
  width: 100%;
  max-width: none;
}

.email-upload-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 8px 14px;
  align-items: start;
  width: 100%;
}

.email-upload-help {
  display: contents;
}

.email-upload-description {
  grid-column: 1;
  grid-row: 1;
}

.email-drop-zone,
.email-upload-option > .secondary-action {
  grid-column: 1;
  grid-row: 2;
  max-width: 380px;
}

.email-upload-option .explain-video {
  grid-column: 2;
  grid-row: 1 / span 2;
  align-self: stretch;
}

.email-upload-option .secondary-action,
.email-upload-option .email-file-pick {
  width: 100%;
  min-height: 34px;
  justify-content: center;
  font-size: 0.84rem !important;
  font-weight: 850;
  line-height: 1.1;
}

.email-drop-zone {
  padding: 0;
  border: 2px dashed #9bc9d1;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}

.email-upload-description {
  display: grid;
  gap: 2px;
  align-content: center;
  min-height: 0;
}

.email-upload-description strong {
  color: var(--accent-dark);
  font-size: 0.88rem;
  line-height: 1.15;
}

.email-upload-description small {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.2;
}

.explain-video {
  display: block;
  min-width: 0;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, #ffffff);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 4%, #ffffff);
  overflow: hidden;
}

.explain-video summary {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  padding: 6px 8px;
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 900;
  cursor: pointer;
}

.explain-video-frame {
  aspect-ratio: 16 / 9;
  background: #111827;
}

.explain-video-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.email-drop-zone input[type="file"] {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}

.email-file-pick {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 0;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 10%, #ffffff);
  color: var(--accent-dark) !important;
}

.email-drop-zone.is-dragover {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 7%, #ffffff);
}

.email-alternative-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  align-items: stretch;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.email-alternative-actions strong {
  color: #52616f;
  font-size: 0.84rem;
  text-transform: uppercase;
}

.email-alternative-actions .secondary-action {
  width: 100%;
  min-height: 100%;
  padding: 6px 10px;
  background: #f0f7ff;
  justify-content: center;
  font-size: 0.84rem;
}

.email-analysis-tool textarea {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 0.86rem;
  resize: vertical;
}

.email-raw-details {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafb;
}

.email-raw-details summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 800;
}

.email-simple-summary {
  display: grid;
  gap: 8px;
  padding: 14px;
  border: 1px solid #c9dde5;
  border-radius: 8px;
  background: #eef7fa;
}

.email-risk-verdict {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.email-risk-symbol {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.12);
  font-size: 1.7rem;
  line-height: 1;
}

.email-qr-alert {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 3px solid #7c3aed;
  border-radius: 8px;
  background: #fff7ed;
  box-shadow: inset 0 0 0 2px #fed7aa;
}

.email-qr-alert strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #6d28d9;
  font-size: 1rem;
}

.email-qr-alert strong span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #7c3aed;
  color: #fff;
  font-weight: 900;
}

.email-qr-alert p {
  color: #7c2d12;
  font-weight: 800;
}

.email-qr-alert .email-purple-token {
  width: fit-content;
  max-width: 100%;
  padding: 6px 8px;
  border: 2px solid #7c3aed;
  border-radius: 7px;
  background: #ede9fe;
  font-weight: 900;
}

.email-immediate-evidence {
  display: grid;
  gap: 7px;
  padding: 10px;
  border: 1px solid #c9b5f5;
  border-radius: 8px;
  background: #faf8ff;
}

.email-immediate-evidence p,
.email-immediate-evidence ul {
  margin: 0;
}

.email-immediate-evidence .email-purple-token {
  display: inline-block;
  margin: 2px 4px 2px 0;
  color: #6d28d9;
  font-weight: 850;
  text-decoration: underline;
  overflow-wrap: anywhere;
}

.email-ai-caution {
  padding: 9px 10px;
  border-left: 4px solid #e07500;
  background: #fff7ed;
  color: #7c2d12;
}

.email-risk-hoch {
  border-color: #f3b0b0;
  background: #fff1f1;
}

.email-risk-mittel {
  border-color: #f5d28a;
  background: #fff8e8;
}

.email-risk-niedrig {
  border-color: #a9d9bd;
  background: #f0fbf4;
}

.email-simple-summary strong {
  color: var(--accent-dark);
  font-size: 1rem;
}

.email-simple-summary span {
  color: var(--muted);
  font-weight: 800;
}

.email-simple-summary ul {
  margin: 0;
  padding-left: 20px;
}

.email-simple-summary p {
  margin: 0;
}

.email-sender-recipient-line {
  color: var(--muted);
  font-size: 0.88rem;
  font-weight: 700;
}

.email-why-line {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.45;
}

.email-check-points-empty {
  color: var(--green);
  font-weight: 700;
}

.email-check-points {
  display: grid;
  gap: 8px;
  list-style: none;
  padding-left: 0;
}

.email-check-point {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-weight: 500;
}

.email-check-point-icon {
  flex: 0 0 auto;
  line-height: 1.3;
}

.email-check-point span:last-child {
  color: var(--ink);
  font-size: 0.9rem;
  line-height: 1.4;
}

.email-check-point-high {
  border-color: rgba(180, 77, 98, 0.4);
  background: #fdf1f3;
}

.email-check-point-medium {
  border-color: rgba(230, 150, 30, 0.4);
  background: #fdf6ea;
}

.email-check-point-neutral {
  border-color: rgba(230, 190, 30, 0.4);
  background: #fdfae0;
}

.email-danger-link-alert {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 3px solid #b91c1c;
  border-radius: 8px;
  background: #fef2f2;
  box-shadow: inset 0 0 0 2px #fecaca;
}

.email-danger-link-alert strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #991b1b;
  font-size: 1.05rem;
}

.email-danger-link-alert strong span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #b91c1c;
  color: #fff;
  font-weight: 900;
}

.email-danger-link-alert p {
  margin: 0;
  color: #7f1d1d;
  font-weight: 700;
}

.email-danger-link-token {
  display: block;
  width: fit-content;
  max-width: 100%;
  padding: 8px 10px;
  border: 2px solid #b91c1c;
  border-radius: 7px;
  background: #fee2e2;
  color: #7f1d1d;
  font-weight: 900;
  overflow-wrap: anywhere;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
}

.email-danger-link-hint {
  color: #7f1d1d;
  font-weight: 500 !important;
  font-size: 0.86rem;
}

.email-girocode-alert {
  display: grid;
  gap: 8px;
  margin-bottom: 8px;
  padding: 12px;
  border: 3px solid #0f766e;
  border-radius: 8px;
  background: #f0fdfa;
  box-shadow: inset 0 0 0 2px #99f6e4;
}

.email-girocode-alert strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #115e59;
  font-size: 1.05rem;
}

.email-girocode-alert strong span {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #0f766e;
  color: #fff;
  font-weight: 900;
}

.email-girocode-alert > p {
  margin: 0;
  color: #134e4a;
  font-weight: 700;
}

.email-girocode-fields {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 10px;
  border: 1px solid #99f6e4;
  border-radius: 7px;
  background: #fff;
}

.email-girocode-fields div {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr);
  gap: 8px;
  align-items: baseline;
}

.email-girocode-fields dt {
  margin: 0;
  color: #0f766e;
  font-weight: 800;
  font-size: 0.82rem;
}

.email-girocode-fields dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-weight: 800;
}

.email-girocode-hint {
  color: #134e4a;
  font-weight: 500 !important;
  font-size: 0.86rem;
}

.email-expert-panel {
  display: grid;
  gap: 8px;
}

.email-expert-panel[hidden] {
  display: none;
}

.email-preview-panel {
  display: grid;
  gap: 8px;
  min-width: 0;
  padding: 12px;
  border: 1px solid #c9dde5;
  border-radius: 8px;
  background: #f7fbfc;
}

.email-preview-panel[hidden] {
  display: none;
}

.email-preview-title {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 6px 12px;
}

.email-preview-title strong {
  color: var(--accent-dark);
  grid-column: 1;
}

.email-preview-title span {
  color: var(--muted);
  font-size: 0.84rem;
  grid-column: 1;
}

.email-preview-title button {
  grid-row: 1 / span 2;
  align-self: center;
}

.email-preview-title button[data-email-preview-open] {
  grid-column: 2;
}

.email-preview-title button[data-email-preview-close] {
  grid-column: 3;
  background: #fff0f0;
  border-color: #e6b6b6;
}

.email-preview-panel iframe {
  width: 100%;
  height: min(680px, calc(100vh - 170px));
  min-height: 430px;
  max-height: 760px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
}

.content-dialog.is-email-analysis .content-dialog-body {
  max-height: calc(100vh - 130px);
  overflow: auto;
  align-content: start;
  gap: 8px;
  padding: 10px;
}

.content-dialog.is-email-analysis .content-window-summary {
  font-size: 0.92rem;
  line-height: 1.3;
  margin: 0;
}

.content-dialog.is-email-analysis .phishing-email-preview {
  height: min(500px, calc(100vh - 300px));
  min-height: 300px;
  overflow: auto;
}

.email-purple-token {
  color: #6d28d9;
  background: #f5edff;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  font-weight: 900;
}

.email-preview-bottom-close {
  justify-self: end;
  background: #fff0f0;
  border-color: #e6b6b6;
}

.email-risk-summary {
  display: grid;
  gap: 3px;
  padding: 12px;
  border: 1px solid #c9dde5;
  border-radius: 8px;
  background: #eef7fa;
}

.email-risk-summary strong {
  color: var(--accent-dark);
}

.email-sender-domain {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.email-sender-domain.is-hit {
  border-color: #f0b45c;
  background: #fff8eb;
}

.email-sender-domain strong {
  color: var(--accent-dark);
}

.email-sender-domain p {
  margin: 0;
  overflow-wrap: anywhere;
}

.email-evidence-panel {
  display: grid;
  gap: 8px;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #ded1f5;
  border-radius: 8px;
  background: #fbf8ff;
}

.email-evidence-panel > strong {
  color: #6f2dbd;
}

.email-evidence-panel div {
  display: grid;
  gap: 4px;
}

.email-evidence-panel div > span:first-child {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 900;
}

.email-evidence-panel p {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 0;
  overflow-wrap: anywhere;
}

.email-purple-token {
  display: inline-flex;
  max-width: 100%;
  color: #7b2cbf;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  margin: 2px 3px 2px 0;
  padding: 3px 6px;
  border-radius: 6px;
  background: #f4e8ff;
  border: 0;
  box-shadow: none;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.email-button-link-token {
  display: inline-flex;
  max-width: 100%;
  margin: 2px 3px 2px 0;
  padding: 5px 8px;
  border: 2px solid #7c3aed;
  border-radius: 8px;
  color: #6d28d9;
  background: #eadcff;
  font-weight: 900;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.email-plain-token {
  display: inline-flex;
  max-width: 100%;
  margin: 2px 3px 2px 0;
  padding: 3px 6px;
  border-radius: 6px;
  background: #f4f7fa;
  color: #31414f;
  font-weight: 700;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.email-empty-token {
  color: var(--muted);
  font-style: italic;
}

.email-domain-warning {
  padding: 8px;
  border: 1px solid #c77dff;
  border-radius: 8px;
  background: #f6edff;
}

.email-header-list,
.email-check-grid {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
}

.email-header-list div,
.email-check-grid article {
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.email-header-list dt,
.email-check-grid strong {
  font-weight: 900;
}

.email-header-list dd,
.email-check-grid p {
  margin: 4px 0 0;
  overflow-wrap: anywhere;
}

.email-check-grid article.is-hit {
  border-color: #f0b45c;
  background: #fff8eb;
}

.email-check-grid article.is-neutral {
  border-color: rgba(230, 190, 30, 0.4);
  background: #fdfae0;
}

.email-analysis-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid #d7e4e8;
  border-radius: 8px;
  background: #f2f7f8;
  box-shadow: none;
}

.email-analysis-actions .secondary-action {
  min-height: 34px;
  padding: 5px 9px;
  border: 2px solid #7c3aed;
  color: #4c1d95;
  font-size: 0.82rem;
  text-decoration: none;
  border-bottom: 0;
  box-shadow: inset 0 0 0 1px rgba(124, 58, 237, 0.2), 0 3px 8px rgba(76, 29, 149, 0.08);
}

.email-analysis-actions .secondary-action * {
  text-decoration: none;
  border-bottom: 0;
}

.email-analysis-actions .secondary-action[data-email-coach] {
  background: #e9ddff;
}

.email-analysis-actions .secondary-action[data-email-preview-open] {
  background: #ede5ff;
}

.email-analysis-actions .secondary-action[data-email-expert-toggle] {
  background: #f0e7ff;
  border-color: #7c3aed;
}

.email-analysis-actions .secondary-action:hover:not(:disabled),
.email-analysis-actions .secondary-action.active {
  filter: saturate(1.08);
  box-shadow: inset 0 0 0 2px rgba(23, 107, 135, 0.32), 0 4px 10px rgba(15, 23, 42, 0.08);
}

.email-analysis-actions .secondary-action:disabled {
  background: #edf1f3;
  color: #87949b;
  box-shadow: none;
}

.learning-return-action,
.learning-status-mail-action,
.notes-toggle-action {
  min-height: 34px;
  padding: 5px 10px;
  border: 1px solid color-mix(in srgb, var(--accent) 48%, #ffffff);
  background: color-mix(in srgb, var(--accent) 14%, #ffffff);
  color: var(--accent-dark);
  font-size: 0.78rem;
  font-weight: 850;
  white-space: nowrap;
}

.learning-status-mail-action {
  min-width: 142px;
}

.learning-return-action {
  min-width: 72px;
}

.notes-toggle-action {
  min-width: 96px;
}

.student-step-mail-row,
.quiz-runner-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}

/* Pruefungssimulation (1.1.487) */
.quiz-simulation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 6%, #ffffff);
}

.quiz-simulation-wahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.quiz-simulation-wahl input {
  width: 5.5em;
  min-height: 36px;
  padding: 4px 8px;
}

.quiz-simulation-hinweis {
  margin: 0;
  font-weight: 700;
}

/* Urteil der Quizauswertung, "Bestanden" gruen mit Siegel (1.1.499) */
.quiz-urteil {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  vertical-align: middle;
}

.quiz-urteil.is-bestanden {
  color: #1f7a3f;
}

.quiz-siegel {
  flex: 0 0 auto;
}

/* Quizuhr (1.1.498): bleibt beim Blaettern oben sichtbar */
.quiz-uhr {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: 10px 0;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #ffffff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: 0 2px 8px rgba(23, 34, 56, 0.08);
}

.quiz-uhr.is-knapp {
  border-color: #c92a2a;
  color: #c92a2a;
}

/* Vollstaendige Beschreibung oben im Quiz (1.1.497) */
.quiz-beschreibung {
  margin: 0 0 10px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 8px;
  background: #ffffff;
  line-height: 1.5;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* Bisherige Quizergebnisse des Schuelers (1.1.488) */
.quiz-verlauf-liste {
  margin-top: 10px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.quiz-verlauf-liste summary {
  cursor: pointer;
  font-weight: 700;
}

.quiz-verlauf-liste ol {
  display: grid;
  gap: 6px;
  margin: 8px 0 0;
  padding-left: 1.4em;
}

.quiz-verlauf-liste li {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
}

.quiz-verlauf-liste time {
  color: var(--muted);
  white-space: nowrap;
}

.quiz-verlauf-falsch {
  color: var(--muted);
  font-size: 0.9em;
}

.quiz-pool-nummer {
  color: var(--muted);
  font-size: 0.85em;
  font-weight: 400;
  white-space: nowrap;
}

.phishing-analysis-actions {
  position: static;
  align-items: flex-start;
  padding: 10px;
  box-shadow: none;
}

.phishing-simulation,
.phishing-editor {
  display: grid;
  gap: 12px;
}

.phishing-simulation-header,
.phishing-actions,
.phishing-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.phishing-simulation-header {
  padding: 12px;
  border: 1px solid #d7e4e8;
  border-radius: 8px;
  background: #f6fbfc;
}

.phishing-progress {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid #d7e4e8;
  border-radius: 8px;
  background: #fffaf0;
}

.phishing-progress strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #7c3aed;
  font-size: 1rem;
}

.phishing-progress strong::before {
  content: "✉";
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  background: #7c3aed;
  color: #ffffff;
  font-size: 0.78rem;
}

.phishing-progress span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 800;
}

.phishing-simulation-header span,
.phishing-task-feedback {
  color: var(--muted);
  font-size: 0.9rem;
}

.phishing-task,
.phishing-editor-item {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e4e8;
  border-radius: 8px;
  background: #ffffff;
}

.phishing-task-list .phishing-task {
  display: none;
}

.phishing-task-list .phishing-task.is-active {
  display: grid;
}

.phishing-task.is-correct {
  border-color: #74b98a;
  background: #f0fbf4;
}

.phishing-task.is-wrong {
  border-color: #e19080;
  background: #fff4f1;
}

.phishing-email-preview {
  width: 100%;
  min-height: 280px;
  border: 1px solid #d7e4e8;
  border-radius: 8px;
  background: #ffffff;
}

.phishing-analysis-aid {
  display: grid;
  gap: 12px;
  border: 2px solid #7c3aed;
  border-radius: 8px;
  background: #ede5ff;
  box-shadow: 0 3px 8px rgba(76, 29, 149, 0.08);
}

.phishing-analysis-aid[hidden] {
  display: none;
}

.phishing-analysis-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  padding: 12px;
}

.phishing-analysis-grid section {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 10px;
  border-radius: 8px;
  background: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(15, 23, 42, 0.06);
}

.phishing-analysis-grid p,
.phishing-analysis-grid ul {
  margin: 0;
}

.phishing-analysis-grid ul {
  padding-left: 18px;
}

.phishing-expert-panel {
  display: grid;
  gap: 10px;
  padding: 0 12px 12px;
}

.phishing-decision-row,
.phishing-editor-list {
  display: grid;
  gap: 8px;
}

.phishing-editor-list {
  grid-template-columns: repeat(5, minmax(150px, 1fr));
  align-items: start;
  gap: 12px;
}

.phishing-editor-list > .status-line {
  grid-column: 1 / -1;
}

.phishing-decision-row {
  grid-template-columns: minmax(100px, 140px) minmax(100px, 150px) minmax(100px, 150px) minmax(100px, 140px);
  justify-content: end;
}

.phishing-decision-row .secondary-action {
  justify-content: center;
  min-height: 38px;
  padding: 8px 12px;
  font-size: 0.86rem;
  font-weight: 900;
}

.phishing-decision-row .phishing-choice {
  border-width: 2px;
  font-size: 0.9rem;
}

.phishing-step-button {
  background: #eef6f8;
  color: #176b87;
}

.phishing-choice-real {
  border-color: #77b98a;
  background: #edf9f1;
  color: #14532d;
}

.phishing-choice-phish {
  border-color: #e19080;
  background: #fff1ed;
  color: #8a1f11;
}

.phishing-decision-row .phishing-choice.active {
  transform: translateY(-1px);
  box-shadow: inset 0 0 0 2px rgba(23, 107, 135, 0.25), 0 8px 18px rgba(15, 23, 42, 0.14);
}

.phishing-result {
  display: grid;
  gap: 12px;
  min-height: 48px;
  padding: 12px;
  border: 1px solid #d7e4e8;
  border-radius: 8px;
  background: #f2f7f8;
}

.phishing-result:empty {
  display: none;
}

.phishing-simulation.is-completed .phishing-task-list {
  opacity: 0.72;
}

.phishing-final-review {
  display: grid;
  gap: 12px;
}

.phishing-final-review h3 {
  margin: 6px 0 0;
  color: var(--accent-dark);
}

.phishing-review-card {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 1px solid #d7e4e8;
  border-radius: 8px;
  background: #ffffff;
}

.phishing-review-card.is-correct {
  border-color: #74b98a;
  background: #f4fbf6;
}

.phishing-review-card.is-wrong {
  border-color: #e19080;
  background: #fff7f4;
}

.phishing-review-card > header {
  display: grid;
  gap: 3px;
}

.phishing-review-card > header span,
.phishing-review-explanation {
  color: var(--muted);
  font-weight: 800;
}

.phishing-editor-item {
  min-width: 0;
}

.phishing-editor-file {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  min-height: 66px;
  padding: 10px;
  border-radius: 8px;
  background: #f6fbfc;
  color: #10202a;
  box-shadow: inset 0 0 0 1px #d7e4e8;
}

.phishing-editor-file strong {
  color: #176b87;
  font-size: 0.88rem;
}

.phishing-file-icon {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #176b87;
  color: #ffffff;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0;
  line-height: 1;
}

.phishing-editor-file span {
  overflow-wrap: anywhere;
  font-size: 0.84rem;
  font-weight: 800;
  line-height: 1.25;
}

.phishing-editor-field,
.phishing-editor-item .content-summary-edit {
  display: grid;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 800;
}

.phishing-editor input,
.phishing-editor select,
.phishing-editor textarea {
  width: 100%;
}

.phishing-editor textarea {
  min-height: 86px;
}

@media (max-width: 720px) {
  .email-upload-row,
  .phishing-decision-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .email-upload-option,
  .email-upload-option:has(.explain-video) {
    grid-template-columns: 1fr;
  }

  .email-upload-option:has(.explain-video) .email-upload-help {
    display: grid;
  }

  .email-upload-option:has(.explain-video) .email-upload-description,
  .email-upload-option:has(.explain-video) .email-drop-zone,
  .email-upload-option:has(.explain-video) > .secondary-action,
  .email-upload-option:has(.explain-video) .explain-video {
    grid-column: auto;
    grid-row: auto;
  }

  .email-alternative-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .email-alternative-actions .secondary-action {
    width: 100%;
    min-height: 34px;
    padding: 6px 10px;
    justify-content: center;
    font-size: 0.84rem;
  }

  .email-analysis-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    padding: 7px;
  }

  .email-analysis-actions .secondary-action {
    width: 100%;
    min-height: 32px;
    padding: 4px 6px;
    justify-content: center;
    font-size: 0.76rem;
  }

  .email-analysis-actions .secondary-action .icon {
    width: 16px;
    height: 16px;
  }

  /* Die schwebende KIRonni-Figur ist fuer breite Bildschirme mit
     "left: calc(55vw + 69px)" positioniert - auf einem Handy landet dieser
     Wert mitten auf den Werkzeug-Buttons statt daneben. Auf schmalen
     Bildschirmen deshalb kleiner, an der rechten Kante verankert und tiefer
     (teils ueber den unteren Bildschirmrand hinaus) positioniert, damit sie
     die Buttons nicht mehr verdeckt. */
  body.ki-bold-in-learning-room #kiBoldPresence .ki-bold-stage,
  body.ki-bold-in-learning-room #kiBoldDialogPresence .ki-bold-stage,
  body.ki-bold-is-busy #kiBoldPresence .ki-bold-stage,
  body.ki-bold-is-busy #kiBoldDialogPresence .ki-bold-stage,
  body.ki-bold-is-explaining #kiBoldPresence .ki-bold-stage,
  body.ki-bold-is-explaining #kiBoldDialogPresence .ki-bold-stage,
  body.sidebar-collapsed.ki-bold-is-busy #kiBoldPresence .ki-bold-stage,
  body.sidebar-collapsed.ki-bold-is-busy #kiBoldDialogPresence .ki-bold-stage,
  body.sidebar-collapsed.ki-bold-is-explaining #kiBoldPresence .ki-bold-stage,
  body.sidebar-collapsed.ki-bold-is-explaining #kiBoldDialogPresence .ki-bold-stage {
    left: auto;
    right: 4px;
    bottom: -34px;
    width: 170px;
    height: 110px;
  }

  .email-drop-zone {
    padding: 14px;
  }

  .phishing-editor-list {
    grid-template-columns: 1fr;
  }

  .phishing-analysis-grid {
    grid-template-columns: 1fr;
  }

  .email-preview-title {
    grid-template-columns: 1fr;
  }

  .email-preview-panel {
    padding: 8px;
  }

  .email-preview-panel iframe {
    height: calc(100svh - 250px);
    min-height: 460px;
    max-height: none;
  }

  .email-preview-title button,
  .email-preview-title button[data-email-preview-open],
  .email-preview-title button[data-email-preview-close],
  .email-preview-bottom-close {
    grid-column: 1;
    grid-row: auto;
    width: 100%;
    justify-content: center;
  }
}

.student-step-type {
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
}

.resource-link {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-top: 8px;
  padding: 0 12px;
  border-radius: 8px;
  background: #fff;
  color: var(--accent-dark);
  font-weight: 800;
  text-decoration: none;
}

.resource-link-button {
  border: 0;
  cursor: pointer;
  font: inherit;
}

.worksheet-preview {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  padding: 14px;
  border: 1px solid #bfd9e2;
  border-radius: 8px;
  background: #fff;
}

.worksheet-file-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  min-height: 42px;
  border-radius: 8px;
  background: #eef8f5;
  color: var(--accent-dark);
}

.worksheet-file-icon .icon {
  width: 22px;
  height: 22px;
}

.worksheet-file-meta {
  display: grid;
  gap: 3px;
  min-width: 0;
}

.worksheet-file-meta strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 1rem;
}

.worksheet-file-meta span:last-child {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.worksheet-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.worksheet-inline-preview {
  grid-column: 1 / -1;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f8fafc;
}

.worksheet-pdf-frame,
.worksheet-text-frame,
.worksheet-document-frame {
  height: min(72vh, 780px);
  min-height: 520px;
}

.worksheet-image-frame {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 12px;
}

.worksheet-image-frame img {
  display: block;
  max-width: 100%;
  max-height: 72vh;
  border-radius: 6px;
  object-fit: contain;
}

.worksheet-media-frame {
  max-height: 72vh;
  background: #101828;
}

.worksheet-audio-frame {
  padding: 10px;
}

.step-controls {
  display: flex;
  gap: 10px;
  margin: 10px 0 0;
}

.search-box {
  position: relative;
  display: block;
}

.search-box span {
  position: absolute;
  left: 12px;
  top: 50%;
  color: var(--muted);
  transform: translateY(-50%);
}

.search-box input {
  padding-left: 38px;
}

.search-results {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.ki-chat-log {
  display: grid;
  align-content: start;
  gap: 10px;
  min-height: 76px;
  max-height: 420px;
  overflow: auto;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--ki-chat-bg);
  color: var(--ki-chat-text);
}

.model-select-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 10px;
  margin-bottom: 0;
  font-size: 0.84rem;
  font-weight: 800;
}

#kiBoldModelStatus,
#kiBoldDialogModelStatus {
  display: none;
}

.install-app-action,
.learning-return-action {
  width: 132px;
  min-width: 132px;
  min-height: 34px;
  box-sizing: border-box;
  justify-content: center;
  border-color: #1d4ed8;
  background: #2563eb;
  color: #ffffff;
  font-weight: 850;
}

.install-app-action:hover,
.learning-return-action:hover {
  border-color: #1e40af;
  background: #1d4ed8;
  color: #ffffff;
}

.ki-bold-presence {
  position: relative;
  min-height: 150px;
  height: 150px;
  margin-top: 0;
  margin-bottom: 0;
  padding: 0;
  border: 0;
  background: transparent;
  overflow: visible;
  cursor: pointer;
  touch-action: manipulation;
}

.ki-bold-presence:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 8px;
}

.ki-bold-presence > strong,
.ki-bold-presence > span {
  display: none;
}

.ki-bold-presence .ki-bold-motion {
  display: none !important;
}

.ki-bold-presence strong {
  font-size: 0.98rem;
}

.ki-bold-presence span {
  color: var(--muted);
  font-size: 0.82rem;
}

.ki-bold-stage {
  position: absolute;
  left: 50%;
  top: -38px;
  margin-left: -150px;
  width: 300px;
  height: 154px;
  overflow: visible;
  pointer-events: none;
  z-index: 2;
}

.ki-bold-status {
  position: absolute;
  top: 120px;
  left: 0;
  right: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  white-space: nowrap;
}

.ki-bold-presence .ki-bold-status strong,
.ki-bold-presence .ki-bold-status span {
  display: inline;
}

.ki-bold-status strong {
  color: var(--heading);
  font-size: 0.98rem;
}

.ki-bold-status span {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.88rem;
  text-overflow: ellipsis;
}

.ki-bold-presence.is-busy .ki-bold-status {
  visibility: hidden;
}

.ki-bold-portrait {
  position: absolute;
  left: 0;
  bottom: 0;
}

.ki-bold-portrait .chat-avatar,
.chat-avatar.ai.ki-bold-mascot-avatar {
  position: relative;
  width: 126px;
  height: 154px;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  overflow: visible;
}

.ki-bold-pose {
  display: block;
  width: 300px;
  height: 169px;
  object-fit: contain;
  object-position: center bottom;
  user-select: none;
}

.ki-bold-presence:not(.is-busy) .ki-bold-portrait {
  animation: ki-bold-stage-window-walk 18s ease-in-out infinite;
}

.ki-bold-presence:not(.is-busy) .ki-bold-portrait .chat-avatar {
  animation: none;
}

.ki-bold-presence.is-busy .ki-bold-portrait {
  animation: none;
}

.ki-bold-presence.is-explaining .ki-bold-portrait {
  animation: none;
}

body.ki-bold-is-busy #kiBoldPresence .ki-bold-stage,
body.ki-bold-is-busy #kiBoldDialogPresence .ki-bold-stage,
body.ki-bold-is-explaining #kiBoldPresence .ki-bold-stage,
body.ki-bold-is-explaining #kiBoldDialogPresence .ki-bold-stage {
  position: fixed;
  left: calc(55vw + 69px);
  top: auto;
  bottom: 18px;
  margin-left: 0;
  width: 300px;
  height: 194px;
  z-index: 2147482500;
  filter: drop-shadow(0 18px 28px rgba(17, 31, 48, 0.18));
  animation: ki-bold-stage-screen-entry 0.95s cubic-bezier(0.18, 0.88, 0.24, 1.02) both;
}

body.ki-bold-in-learning-room #kiBoldPresence .ki-bold-stage,
body.ki-bold-in-learning-room #kiBoldDialogPresence .ki-bold-stage {
  position: fixed;
  left: calc(55vw + 69px);
  top: auto;
  bottom: 18px;
  margin-left: 0;
  width: 300px;
  height: 194px;
  z-index: 2147482500;
  filter: drop-shadow(0 18px 28px rgba(17, 31, 48, 0.18));
}

body.ki-bold-is-busy #kiBoldPresence .ki-bold-mascot,
body.ki-bold-is-busy #kiBoldDialogPresence .ki-bold-mascot {
  animation: none;
}

body.sidebar-collapsed.ki-bold-is-busy #kiBoldPresence .ki-bold-stage,
body.sidebar-collapsed.ki-bold-is-busy #kiBoldDialogPresence .ki-bold-stage,
body.sidebar-collapsed.ki-bold-is-explaining #kiBoldPresence .ki-bold-stage,
body.sidebar-collapsed.ki-bold-is-explaining #kiBoldDialogPresence .ki-bold-stage {
  left: calc(55vw - 66px);
}

.ki-bold-thought {
  position: absolute;
  top: 2px;
  right: 4px;
  display: flex !important;
  align-items: center;
  gap: 4px;
  opacity: 0;
  pointer-events: none;
}

.ki-bold-thought i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #d9f0f2;
  border: 1px solid #9bc9d1;
}

.ki-bold-thought i:nth-child(2) {
  width: 9px;
  height: 9px;
}

.ki-bold-thought i:nth-child(3) {
  width: 7px;
  height: 7px;
}

.ki-bold-presence.is-busy .ki-bold-thought {
  animation: ki-bold-thought-pop 1.5s ease-in-out infinite;
}

.ki-bold-motion {
  display: flex !important;
  align-items: end;
  gap: 3px;
  height: 24px;
}

.ki-bold-motion i {
  display: block;
  width: 4px;
  height: 9px;
  border-radius: 4px;
  background: var(--accent);
  opacity: 0.35;
}

.ki-bold-presence.is-busy .ki-bold-motion i {
  animation: ki-bold-signal 0.85s ease-in-out infinite;
}

.ki-bold-presence.is-busy .ki-bold-motion i:nth-child(2) {
  animation-delay: 120ms;
}

.ki-bold-presence.is-busy .ki-bold-motion i:nth-child(3) {
  animation-delay: 240ms;
}

.ki-bold-presence:not(.is-busy) .ki-bold-motion i {
  animation: ki-bold-idle-yawn 3.8s ease-in-out infinite;
}

.ki-bold-presence:not(.is-busy) .ki-bold-motion i:nth-child(2) {
  animation-delay: 240ms;
}

.ki-bold-presence:not(.is-busy) .ki-bold-motion i:nth-child(3) {
  animation-delay: 480ms;
}

.ki-chat-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 96px;
  gap: 10px;
  margin-top: 12px;
}

.ki-message {
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ki-chat-text);
}

.ki-message.user {
  background: #eaf6f4;
  border-color: #c8e2dd;
}

.ki-message strong {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
  font-size: 0.86rem;
}

.chat-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  color: #fff;
  background: var(--icon-color);
}

.chat-avatar.ai {
  background: var(--icon-color);
}

.chat-avatar.image-avatar {
  overflow: hidden;
  padding: 0;
  background: #fff;
}

.chat-avatar.image-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.chat-avatar.student {
  background: var(--icon-color);
}

.chat-avatar.tutor {
  background: var(--icon-color);
}

.chat-avatar .icon {
  width: 16px;
  height: 16px;
}

.ki-bold-mascot-avatar {
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
  color: inherit;
}

.ki-bold-mascot {
  position: absolute;
  inset: 0;
  display: block;
  width: 126px;
  height: 154px;
  overflow: visible;
  object-fit: contain;
  object-position: center bottom;
  transform: translate(0, 0) scale(1);
  transform-origin: 50% 78%;
  transition: opacity 180ms ease;
}

.ki-bold-mascot-pointing {
  opacity: 0;
}

.ki-bold-presence.is-busy .ki-bold-mascot-rest {
  opacity: 0;
}

.ki-bold-presence.is-busy .ki-bold-mascot-pointing {
  opacity: 1;
}

.ki-bold-mascot-shadow {
  fill: rgba(17, 31, 48, 0.1);
}

.ki-bold-mascot-face,
.ki-bold-mascot-torso,
.ki-bold-mascot-hand {
  fill: #f97316;
  stroke: #d95c00;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ki-bold-mascot-arm-left,
.ki-bold-mascot-arm-right,
.ki-bold-mascot-leg,
.ki-bold-mascot-foot,
.ki-bold-mascot-point {
  fill: none;
  stroke: #d95c00;
  stroke-width: 6.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ki-bold-mascot-arm-left,
.ki-bold-mascot-arm-right {
  stroke-width: 8.5;
}

.ki-bold-mascot-foot {
  stroke-width: 8;
}

.ki-bold-mascot-point {
  stroke-width: 4;
}

.ki-bold-mascot-shorts {
  fill: #20242a;
  stroke: #20242a;
  stroke-width: 2;
  stroke-linejoin: round;
}

.ki-bold-mascot-hair {
  fill: none;
  stroke: #0ea5d8;
  stroke-width: 9;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform-origin: 52% 24%;
  animation: ki-bold-mascot-hair 2.8s ease-in-out infinite;
}

.ki-bold-mascot-eye {
  fill: #e8fbff;
  stroke: #0f172a;
  stroke-width: 2.2;
  transform-origin: center;
  animation: ki-bold-mascot-blink 4.7s ease-in-out infinite;
}

.ki-bold-mascot-pupil {
  fill: #0ea5d8;
}

.ki-bold-mascot-nose,
.ki-bold-mascot-smile {
  fill: none;
  stroke: #7c2d12;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ki-bold-mascot-arm-right {
  transform-origin: 68px 48px;
  animation: ki-bold-mascot-point 2.9s ease-in-out infinite;
}

.ki-bold-mascot-arm-left {
  transform-origin: 38px 50px;
  animation: ki-bold-mascot-left-arm 4.4s ease-in-out infinite;
}

.ki-bold-mascot-point,
.ki-bold-mascot-hand.right {
  animation: ki-bold-mascot-finger 2.9s ease-in-out infinite;
}

.ki-bold-presence:not(.is-busy) .ki-bold-mascot {
  animation: ki-bold-mascot-human-idle 22s ease-in-out infinite;
}

.ki-bold-presence.is-busy .ki-bold-mascot {
  animation: none;
}

.ki-message .ki-bold-mascot {
  transform: translate(-12px, -24px) scale(0.58);
}

body.muted-chat-icons .chat-avatar {
  color: currentColor;
  background: transparent;
}

body.muted-chat-icons .ki-bold-mascot-avatar {
  background: transparent !important;
}

@keyframes ki-bold-mascot-idle {
  0%,
  100% {
    transform: translate(-9px, -13px) scale(0.7) rotate(0);
  }
  45% {
    transform: translate(-8px, -17px) scale(0.72) rotate(-2deg);
  }
  70% {
    transform: translate(-10px, -12px) scale(0.69) rotate(2deg);
  }
}

@keyframes ki-bold-mascot-human-idle {
  0% {
    transform: translate(-8px, 0) scale(1) rotate(0);
  }
  18% {
    transform: translate(-6px, -3px) scale(1.01) rotate(0.5deg);
  }
  32% {
    transform: translate(-8px, 0) scale(1) rotate(0);
  }
  48% {
    transform: translate(-3px, -1px) scale(1) rotate(-0.5deg);
  }
  66% {
    transform: translate(-8px, 0) scale(1) rotate(0);
  }
  100% {
    transform: translate(-8px, 0) scale(1) rotate(0);
  }
}

@keyframes ki-bold-mascot-active-point {
  0%,
  100% {
    transform: translate(-8px, 0) scale(1) rotate(0);
  }
  35% {
    transform: translate(-5px, -2px) scale(1.005) rotate(-0.25deg);
  }
  65% {
    transform: translate(-2px, 0) scale(1) rotate(0.25deg);
  }
}

@keyframes ki-bold-stage-window-walk {
  0% {
    transform: translate(0, 0) scale(1);
  }
  24% {
    transform: translate(44px, -2px) scale(1);
  }
  49% {
    transform: translate(92px, 0) scale(1);
  }
  50% {
    transform: translate(92px, 0) scaleX(-1);
  }
  74% {
    transform: translate(44px, -2px) scaleX(-1);
  }
  99% {
    transform: translate(0, 0) scaleX(-1);
  }
  100% {
    transform: translate(0, 0) scale(1);
  }
}

@keyframes ki-bold-stage-active-jump {
  0%,
  100% {
    transform: translate(0, 0);
  }
  30% {
    transform: translate(8px, -1px);
  }
  55% {
    transform: translate(18px, 0);
  }
  76% {
    transform: translate(9px, -1px);
  }
}

@keyframes ki-bold-stage-explaining {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(2px, -1px, 0); }
}

@media (max-width: 1080px) {
  body.ki-bold-is-busy #kiBoldPresence .ki-bold-stage,
  body.ki-bold-is-busy #kiBoldDialogPresence .ki-bold-stage,
  body.sidebar-collapsed.ki-bold-is-busy #kiBoldPresence .ki-bold-stage,
  body.sidebar-collapsed.ki-bold-is-busy #kiBoldDialogPresence .ki-bold-stage,
  body.ki-bold-is-explaining #kiBoldPresence .ki-bold-stage,
  body.ki-bold-is-explaining #kiBoldDialogPresence .ki-bold-stage,
  body.sidebar-collapsed.ki-bold-is-explaining #kiBoldPresence .ki-bold-stage,
  body.sidebar-collapsed.ki-bold-is-explaining #kiBoldDialogPresence .ki-bold-stage {
    left: calc(50vw - 63px);
  }
}

@keyframes ki-bold-stage-screen-entry {
  0% {
    opacity: 0;
    transform: translate(-80px, 22px) scale(0.82);
  }
  64% {
    opacity: 1;
    transform: translate(12px, -5px) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes ki-bold-mascot-ready {
  0%,
  100% {
    transform: translate(-9px, -13px) scale(0.72) rotate(0);
  }
  35% {
    transform: translate(-7px, -23px) scale(0.78) rotate(-5deg);
  }
  65% {
    transform: translate(-10px, -12px) scale(0.72) rotate(4deg);
  }
}

@keyframes ki-bold-mascot-mobile-idle {
  0%,
  100% {
    transform: translate(-7px, -17px) scale(0.76) rotate(0);
  }
  45% {
    transform: translate(-6px, -21px) scale(0.78) rotate(-2deg);
  }
  70% {
    transform: translate(-8px, -16px) scale(0.75) rotate(2deg);
  }
}

@keyframes ki-bold-mascot-mobile-ready {
  0%,
  100% {
    transform: translate(-7px, -17px) scale(0.78) rotate(0);
  }
  35% {
    transform: translate(-5px, -25px) scale(0.84) rotate(-5deg);
  }
  65% {
    transform: translate(-8px, -16px) scale(0.78) rotate(4deg);
  }
}

@keyframes ki-bold-mascot-hair {
  0%,
  100% {
    transform: rotate(0) translateY(0);
  }
  42% {
    transform: rotate(-3deg) translateY(-1px);
  }
  72% {
    transform: rotate(2deg) translateY(1px);
  }
}

@keyframes ki-bold-mascot-blink {
  0%,
  90%,
  100% {
    transform: scaleY(1);
  }
  94% {
    transform: scaleY(0.12);
  }
}

@keyframes ki-bold-mascot-point {
  0%,
  100% {
    transform: rotate(0);
  }
  50% {
    transform: rotate(-7deg);
  }
}

@keyframes ki-bold-mascot-finger {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(2px, -2px);
  }
}

@keyframes ki-bold-mascot-left-arm {
  0%,
  100% {
    transform: rotate(0);
  }
  36% {
    transform: rotate(8deg);
  }
  58% {
    transform: rotate(-5deg);
  }
}

@keyframes ki-bold-hop-walk {
  0%,
  100% {
    transform: translate(0, 0) rotate(0) scale(1);
  }
  18% {
    transform: translate(10px, -9px) rotate(7deg) scale(1.05);
  }
  36% {
    transform: translate(24px, 0) rotate(-4deg) scale(0.98);
  }
  54% {
    transform: translate(34px, -11px) rotate(-8deg) scale(1.08);
  }
  74% {
    transform: translate(22px, 1px) rotate(5deg) scale(1);
  }
  88% {
    transform: translate(8px, -5px) rotate(-3deg) scale(1.03);
  }
}

@keyframes ki-bold-window-bounce-in {
  0% {
    opacity: 0;
    transform: translate(74px, 52px) scale(0.86) rotate(2deg);
  }
  44% {
    opacity: 1;
    transform: translate(-10px, -8px) scale(1.035) rotate(-1.2deg);
  }
  68% {
    transform: translate(5px, 3px) scale(0.99) rotate(0.4deg);
  }
  86% {
    transform: translate(-2px, -1px) scale(1.006) rotate(-0.1deg);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1) rotate(0);
  }
}

@keyframes notes-panel-float-in {
  0% {
    opacity: 0;
    transform: translate(42px, 36px) scale(0.86);
  }
  68% {
    opacity: 1;
    transform: translate(-4px, -3px) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes ki-bold-idle-bored-walk {
  0%,
  3% {
    transform: translate(0, 0) rotate(0) scale(1);
  }
  12% {
    transform: translate(12px, -2px) rotate(2deg) scale(1);
  }
  23% {
    transform: translate(34px, 0) rotate(-2deg) scale(1);
  }
  27% {
    transform: translate(34px, 0) rotate(0) scaleX(-1);
  }
  38% {
    transform: translate(18px, -2px) rotate(2deg) scaleX(-1);
  }
  48% {
    transform: translate(0, 0) rotate(-2deg) scaleX(-1);
  }
  52% {
    transform: translate(0, 0) rotate(0) scale(1);
  }
  62% {
    transform: translate(13px, -2px) rotate(2deg) scale(1);
  }
  71% {
    transform: translate(34px, 0) rotate(-2deg) scale(1);
  }
  75% {
    transform: translate(34px, 0) rotate(0) scaleX(-1);
  }
  84% {
    transform: translate(15px, -2px) rotate(2deg) scaleX(-1);
  }
  90% {
    transform: translate(4px, 1px) rotate(-8deg) scaleX(-1);
  }
  94%,
  100% {
    transform: translate(7px, 11px) rotate(-88deg) scale(0.98);
  }
}

@keyframes ki-bold-idle-bored-sway {
  0%,
  78%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  18% {
    transform: translate(0, -1px) rotate(-2deg);
  }
  40% {
    transform: translate(0, 1px) rotate(2deg);
  }
  92% {
    transform: translate(1px, 0) rotate(1deg);
  }
}

@keyframes ki-bold-thought-pop {
  0%,
  14%,
  100% {
    opacity: 0;
    transform: translateY(7px) scale(0.82);
  }
  32%,
  76% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes ki-bold-idle-yawn {
  0%,
  100% {
    height: 7px;
    opacity: 0.16;
    transform: translateY(0);
  }
  28% {
    height: 10px;
    opacity: 0.3;
    transform: translateY(1px);
  }
  78% {
    height: 6px;
    opacity: 0.12;
    transform: translateY(2px);
  }
}

@keyframes ki-bold-signal {
  0%,
  100% {
    height: 9px;
    opacity: 0.35;
  }
  50% {
    height: 22px;
    opacity: 1;
  }
}

@keyframes ki-bold-bubble {
  0%,
  100% {
    opacity: 0.35;
    transform: translateY(2px) scale(0.82);
  }
  48% {
    opacity: 1;
    transform: translateY(-4px) scale(1.12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .ki-bold-presence:not(.is-busy) .ki-bold-portrait,
  .ki-bold-presence:not(.is-busy) .ki-bold-portrait .chat-avatar,
  .ki-bold-presence:not(.is-busy) .ki-bold-motion i,
  .ki-bold-presence.is-busy .ki-bold-portrait,
  .ki-bold-presence.is-busy .ki-bold-thought,
  .ki-bold-presence.is-busy .ki-bold-motion i,
  .ki-thinking-bubbles i {
    animation: none;
  }
}

@media (max-width: 980px) {
  .quiz-dialog,
  .content-dialog,
  .ki-bold-dialog {
    inset: 12px;
    width: calc(100vw - 24px);
    height: calc(100vh - 24px);
    min-width: 0;
  }
}

.ki-message p {
  margin: 0;
  color: inherit;
  line-height: 1.45;
}

.ki-thinking-text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 800;
}

.ki-thinking-bubbles {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 18px;
}

.ki-thinking-bubbles i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--accent);
  animation: ki-bold-bubble 0.9s ease-in-out infinite;
}

.ki-thinking-bubbles i:nth-child(2) {
  animation-delay: 120ms;
}

.ki-thinking-bubbles i:nth-child(3) {
  animation-delay: 240ms;
}

.email-loading-bubbles {
  min-height: 28px;
  padding: 7px 0;
}

.email-loading-bubbles i {
  width: 10px;
  height: 10px;
  background: color-mix(in srgb, var(--accent) 50%, #ffffff);
  border: 1px solid color-mix(in srgb, var(--accent) 58%, #ffffff);
}

.email-analysis-thinking {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
  min-height: 184px;
  padding-right: clamp(12px, 5vw, 90px);
  box-sizing: border-box;
  animation: email-thinking-swoosh-in 0.92s cubic-bezier(0.2, 0.72, 0.28, 1) both;
}

.email-thinking-pose {
  display: block;
  width: 300px;
  height: 184px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 12px 18px rgba(17, 31, 48, 0.17));
}

body.ki-bold-is-email-loading #kiBoldPresence .ki-bold-stage,
body.ki-bold-is-email-loading #kiBoldDialogPresence .ki-bold-stage {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease;
}

@keyframes email-thinking-swoosh-in {
  0% {
    opacity: 0;
    transform: translateX(68px) scale(0.96);
    filter: blur(1.5px);
  }
  72% {
    opacity: 0.96;
    transform: translateX(3px) scale(0.995);
    filter: blur(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: blur(0);
  }
}

@media (max-width: 720px) {
  .email-analysis-thinking {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 190px;
    gap: 0;
    padding-right: 0;
  }

  .email-thinking-pose {
    width: 210px;
    height: 155px;
  }
}

.follow-up-list {
  position: relative;
  z-index: 8;
  display: grid;
  gap: 5px;
  margin-top: 8px;
  pointer-events: auto;
}

.follow-up-button {
  position: relative;
  z-index: 9;
  min-height: 30px;
  padding: 5px 8px;
  border: 1px solid #d7e5e8;
  border-radius: 8px;
  background: #f7fbfb;
  color: #45606b;
  font-size: 0.84rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}

.follow-up-button:hover {
  border-color: #b8d4de;
  background: #edf7f8;
  color: var(--accent-dark);
}

.result-item {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.result-item h3,
.activity-feed h3 {
  margin: 0 0 7px;
  font-size: 1rem;
}

.result-item p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.status-line {
  min-height: 22px;
  margin: 8px 0 0;
  color: var(--green);
  font-weight: 800;
}

.passkey-benefits {
  margin: 0 0 6px;
  padding-left: 20px;
  color: var(--muted);
  font-weight: 700;
  line-height: 1.45;
}

.passkey-benefits li + li {
  margin-top: 6px;
}

.passkey-thinking {
  display: flex;
  align-items: center;
  gap: 10px;
}

.passkey-thinking-avatar {
  width: 34px;
  height: 34px;
  object-fit: contain;
  flex: 0 0 auto;
  animation: passkey-thinking-bob 1.1s ease-in-out infinite;
}

.passkey-thinking-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, #ffffff);
  color: var(--accent-dark);
  font-weight: 800;
}

.passkey-thinking-dots span {
  display: inline-block;
  width: 5px;
  height: 5px;
  margin-left: 2px;
  border-radius: 50%;
  background: currentColor;
  animation: passkey-thinking-dot 1.2s ease-in-out infinite;
}

.passkey-thinking-dots span:nth-child(2) { animation-delay: 0.15s; }
.passkey-thinking-dots span:nth-child(3) { animation-delay: 0.3s; }

@keyframes passkey-thinking-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

@keyframes passkey-thinking-dot {
  0%, 80%, 100% { opacity: 0.25; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

.management-lock-banner {
  margin: 0 18px 14px;
  padding: 10px 12px;
  border: 1px solid #f3c96a;
  border-radius: 8px;
  background: #fff7df;
  color: #725200;
  font-size: 0.9rem;
  font-weight: 800;
}

.management-lock-banner.is-hidden {
  display: none;
}

.chat-panel {
  min-height: 620px;
}

.group-list-wrap {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.group-tutor-tools.is-hidden + .group-list-wrap {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.group-list {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.group-card {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.group-card.active {
  border-color: #8bc5d6;
  background: #f2fafc;
}

.group-card h3 {
  margin: 0;
  font-size: 1rem;
}

.group-card p,
.group-task p {
  margin: 0;
  color: var(--muted);
  line-height: 1.45;
}

.group-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.group-task {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 28%, #ffffff);
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent) 5%, #ffffff);
}

.chat-log {
  display: grid;
  align-content: start;
  gap: 12px;
  height: 440px;
  overflow: auto;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fc;
}

.message {
  max-width: 78%;
  padding: 12px 14px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--line);
}

.message.own {
  justify-self: end;
  background: #eaf6f4;
  border-color: #c8e2dd;
}

.message strong {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 0.86rem;
}

.message p {
  margin: 0;
  line-height: 1.42;
}

.chat-form {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr) 100px;
  gap: 10px;
  margin-top: 14px;
}

.upload-native-row {
  display: grid;
  gap: 8px;
  margin-top: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.upload-native-row label {
  color: var(--ink);
  font-weight: 800;
}

.upload-native-row input[type="file"] {
  display: block;
  position: static;
  width: 100%;
  height: auto;
  min-height: 42px;
  opacity: 1;
  pointer-events: auto;
}

.attachment-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  margin-top: 8px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--accent-dark);
  font-weight: 800;
  text-decoration: none;
}

.group-board {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.board-form {
  display: grid;
  grid-template-columns: 110px minmax(0, 1fr);
  gap: 10px;
  margin-top: 12px;
}

.board-area-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.board-area-tabs button {
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
}

.board-area-tabs button.active {
  border-color: #8bc5d6;
  background: #eef7fa;
  color: var(--accent-dark);
}

.board-form textarea,
.board-form button,
.board-form input[type="file"] {
  grid-column: 1 / -1;
}

.board-items {
  display: grid;
  gap: 10px;
  margin-top: 14px;
}

.board-item {
  padding: 13px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fbfcfe;
}

.board-item h3 {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 7px;
  font-size: 1rem;
}

.board-item p {
  margin: 0 0 8px;
  color: var(--muted);
  line-height: 1.45;
}

.board-item img,
.board-item video {
  display: block;
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  border-radius: 8px;
  background: #eef2f6;
}

.board-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.prompt-list {
  display: grid;
  gap: 10px;
}

.prompt-list button {
  min-height: 42px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-weight: 800;
  text-align: left;
  padding: 0 12px;
}

.activity-feed {
  margin-top: 22px;
}

.activity-feed ul {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.activity-feed li {
  padding: 11px 12px;
  border-left: 4px solid var(--focus);
  background: #fff8eb;
  border-radius: 0 8px 8px 0;
  color: #644711;
}

@media (max-width: 980px) {
  .layout-toolbar {
    display: none;
  }

  .layout-toolbar-dock {
    display: none;
  }

  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
    gap: 18px;
  }

  .tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .progress-card {
    margin-top: 0;
  }

  .tutor-layout,
  .two-columns,
  .student-grid,
  .group-grid,
  .admin-dashboard {
    grid-template-columns: 1fr;
  }

  .path-sidebar,
  .path-editor-panel,
  .content-panel {
    position: static;
    max-height: none;
    overflow: visible;
  }

  .student-grid .search-panel {
    height: auto;
    overflow: visible;
  }

  .student-grid .search-panel .ki-chat-log {
    max-height: 420px;
  }

  .notes-panel,
  body.has-floating-ki .notes-panel {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
    max-height: calc(100vh - 24px);
  }

  .design-panel,
  .library-panel {
    grid-column: auto;
    grid-row: auto;
  }

  .design-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .block-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .student-grid .search-panel {
    position: fixed;
    left: 8px;
    right: 8px;
    bottom: 50px;
    z-index: 82;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 154px;
    max-height: 168px;
    padding: 8px 8px calc(10px + env(safe-area-inset-bottom, 0px));
    border-color: transparent;
    border-style: solid;
    border-radius: 14px 14px 0 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
    pointer-events: none;
  }

  .student-grid .search-panel .panel-header {
    display: none;
  }

  .student-grid .search-panel .panel-header > div:first-child h2,
  .student-grid .search-panel .panel-header > div:first-child .section-kicker {
    display: none;
  }

  .student-grid .search-panel .panel-actions {
    display: none;
  }

  .student-grid .search-panel #openKiBoldDialog {
    display: none;
  }

  .student-grid .search-panel #openKiBoldDialog .icon {
    width: 28px;
    height: 28px;
  }

  .student-grid .search-panel #copyKiBoldChat,
  .student-grid .search-panel .model-select-row,
  .student-grid .search-panel #kiBoldModelStatus,
  .student-grid .search-panel #kiBoldChatLog,
  .student-grid .search-panel #kiBoldForm {
    display: none;
  }

  .student-grid .search-panel #kiBoldPresence {
    display: block;
    min-width: 0;
    min-height: 148px;
    height: 148px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    pointer-events: none;
  }

  .student-grid .search-panel #kiBoldPresence .ki-bold-stage {
    left: 50%;
    top: 0;
    width: 230px;
    min-height: 142px;
    height: 142px;
    margin-left: -115px;
    padding: 0;
    background: transparent;
    pointer-events: auto;
  }

  .student-grid .search-panel #kiBoldPresence .ki-bold-portrait {
    bottom: 0;
  }

  .student-grid .search-panel #kiBoldPresence .ki-bold-portrait .chat-avatar {
    width: 64px;
    height: 88px;
    overflow: visible;
  }

  .student-grid .search-panel #kiBoldPresence .ki-bold-pose {
    width: 230px;
    height: 142px;
    object-fit: contain;
  }

  .student-grid .search-panel #kiBoldPresence .ki-bold-mascot {
    transform: translate(-8px, 0) scale(0.98);
  }

  .student-grid .search-panel #kiBoldPresence .ki-bold-status {
    display: none;
  }

  .student-grid .search-panel #kiBoldPresence:not(.is-busy) .ki-bold-mascot {
    animation-name: ki-bold-mascot-human-idle;
  }

  .student-grid .search-panel #kiBoldPresence.is-busy .ki-bold-mascot {
    animation: none;
  }

  .student-grid .search-panel #kiBoldPresence .ki-bold-thought,
  .student-grid .search-panel #kiBoldPresence .ki-thinking-text,
  .student-grid .search-panel #kiBoldPresence > strong,
  .student-grid .search-panel #kiBoldPresence > span,
  .student-grid .search-panel #kiBoldPresence .ki-bold-motion {
    display: none;
  }

  .student-grid .search-panel .panel-header::after {
    content: none;
  }

  body.ki-bold-is-busy .student-grid .search-panel #kiBoldPresence .ki-bold-stage {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: auto;
    width: 230px;
    height: 142px;
    margin-left: -115px;
    filter: none;
    animation: none;
  }

  body.ki-bold-is-busy .student-grid .search-panel #kiBoldPresence .ki-bold-mascot {
    animation: none;
  }

  .student-grid {
    padding-bottom: 178px;
  }

  .quiz-dialog,
  .content-dialog,
  .ki-bold-dialog {
    inset: 0 0 0 0 !important;
    width: 100vw !important;
    width: 100svw !important;
    height: 100vh !important;
    height: 100svh !important;
    height: 100dvh !important;
    max-width: 100vw !important;
    max-width: 100svw !important;
    max-height: 100vh !important;
    max-height: 100svh !important;
    max-height: 100dvh !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 0;
    transform: none !important;
  }

  .quiz-dialog,
  .content-dialog {
    z-index: 70;
  }

  .quiz-dialog.is-front,
  .content-dialog.is-front {
    z-index: 78;
  }

  .ki-bold-dialog,
  .ki-bold-dialog.is-front {
    z-index: 90;
  }

  .quiz-window,
  .content-window,
  .ki-bold-window {
    width: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100svh;
    max-height: 100dvh;
    border-radius: 0;
  }

  .content-dialog.is-email-analysis .content-dialog-body {
    max-height: none;
    overflow: auto;
    padding: 6px 6px 104px;
  }

  .content-dialog.is-email-analysis .email-preview-panel {
    padding: 4px;
    border-radius: 4px;
  }

  .content-dialog.is-email-analysis .email-preview-panel iframe {
    border-radius: 2px;
  }

  .quiz-dialog-body,
  .content-dialog-body {
    padding-bottom: 104px;
  }

  .ki-bold-window {
    grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  }

  .ki-bold-window .ki-chat-log {
    min-height: 0;
    max-height: none;
  }

  #kiBoldDialogPresence {
    min-height: 166px;
    height: 166px;
    margin: 0 12px;
    overflow: visible;
  }

  #kiBoldDialogPresence .ki-bold-stage,
  body.ki-bold-is-busy #kiBoldDialogPresence .ki-bold-stage,
  body.ki-bold-is-explaining #kiBoldDialogPresence .ki-bold-stage {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: auto;
    width: 280px;
    height: 164px;
    margin-left: -140px;
    filter: none;
    animation: ki-bold-stage-screen-entry 0.7s cubic-bezier(0.18, 0.88, 0.24, 1.02) both;
  }

  #kiBoldDialogPresence .ki-bold-pose {
    width: 280px;
    height: 164px;
    object-fit: contain;
    object-position: center bottom;
  }

  #kiBoldDialogPresence .ki-bold-status {
    display: none;
  }

  .ki-bold-window .ki-chat-log {
    min-height: 0;
    max-height: none;
  }
}

@media (max-width: 640px) {
  .workspace,
  .sidebar {
    padding: 18px;
  }

  /* Auf dem Handy stapelt die Kopfzeile senkrecht - Profilsymbol und
     Anmeldetext belegten dadurch drei eigene Zeilen, bevor ueberhaupt Inhalt
     kam. Beide bilden hier wieder eine gemeinsame, kompakte Zeile. */
  body.student-session .workspace {
    padding: 10px 12px;
  }

  body.student-session .topbar {
    gap: 8px;
    margin-bottom: 8px;
  }

  body.student-session .student-identity-row {
    display: flex;
    align-items: center;
    gap: 8px;
  }

  body.student-session .student-identity-line {
    margin: 0;
    min-width: 0;
    font-size: 0.76rem;
    line-height: 1.25;
    text-align: left;
  }

  body.student-session #myStudentAccountButton {
    width: 38px;
    height: 38px;
  }

  body.student-session #myStudentAccountButton .icon {
    width: 22px;
    height: 22px;
  }

  body.student-session .assigned-path-select {
    /* "46vw" sind auf einem 375px-Bildschirm nur 172px - der Lernwegname war
       dadurch abgeschnitten. Senkrecht gestapelt ist ohnehin die ganze
       Breite frei. */
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  body.student-session .assigned-path-select select {
    min-height: 44px;
    font-size: 1.1rem;
  }

  /* Feste Anordnung der Werkzeugknoepfe auf dem Handy (sonst brechen sie
     beliebig um und der wichtige EXIT-Knopf rutscht irgendwohin):
     Zeile 1  Navigation anzeigen ......... EXIT (rechtsbuendig)
     Zeile 2  Textfeld | Lernstand senden
     Zeile 3  App installieren (entfaellt nach der Installation)
     "Navigation anzeigen" waechst dabei ueber den freien Platz - dadurch
     sitzt EXIT am rechten Rand UND die Zeile ist voll, sodass die
     nachfolgenden Knoepfe sauber umbrechen. */
  body.student-session .role-switch {
    gap: 8px;
  }

  body.student-session .role-switch > * {
    margin: 0;
  }

  body.student-session #sidebarToggle {
    order: 1;
    flex: 1 1 auto;
  }

  body.student-session #learningReturnButton {
    order: 2;
    flex: 0 0 auto;
  }

  body.student-session #toggleNotesPanel {
    order: 3;
    flex: 1 1 40%;
  }

  body.student-session #learningStatusMailButton {
    order: 4;
    flex: 1 1 40%;
  }

  body.student-session #installAppButton,
  body.student-session #createOwnAccountButton,
  body.student-session #logoutPortal {
    order: 5;
    flex: 1 1 100%;
  }

  .topbar,
  .panel-header,
  .mini-header {
    align-items: stretch;
    flex-direction: column;
  }

  .tabs {
    grid-template-columns: 1fr;
  }

  .design-grid {
    grid-template-columns: 1fr;
  }

  .block-grid {
    grid-template-columns: 1fr;
  }

  .design-detail-grid {
    grid-template-columns: 1fr;
  }

  #adminProfileForm,
  #adminTutorRegisterForm {
    grid-template-columns: 1fr;
  }

  .student-step-item {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .student-step-item.active {
    grid-template-columns: 1fr;
  }

  .page-title-row {
    align-items: stretch;
    flex-direction: column;
  }

  .learning-path-tutorials .tutorial-compact {
    min-width: 0;
  }

  .page-title-row .student-identity-line {
    margin-left: 0;
    text-align: left;
  }

  .student-step-open {
    grid-template-columns: 42px minmax(0, 1fr);
  }

  .student-step-type {
    grid-column: 2;
  }

  .worksheet-preview {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .worksheet-actions {
    justify-content: stretch;
  }

  .worksheet-actions .resource-link {
    justify-content: center;
    width: 100%;
  }

  .worksheet-pdf-frame,
  .worksheet-text-frame,
  .worksheet-document-frame {
    height: 68vh;
    min-height: 420px;
  }

  .chat-form {
    grid-template-columns: 1fr;
  }

  .ki-chat-form {
    grid-template-columns: 1fr;
  }

  .content-edit {
    grid-template-columns: 1fr;
  }

  .message {
    max-width: 100%;
  }

  .topbar h1 {
    font-size: 1.6rem;
  }
}
.email-phone-analysis {
  margin: 12px 0;
  padding: 12px;
  border: 2px solid #f59e0b;
  border-radius: 12px;
  background: #fffbeb;
}

.email-phone-analysis > article {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #fcd34d;
}

.email-phone-analysis p {
  margin: 5px 0;
}

.email-phone-search-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.email-phone-search-actions .secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.email-qr-route {
  display: grid;
  gap: 0.35rem;
  margin-top: 0.55rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(98, 55, 180, 0.2);
}

.email-qr-route:first-of-type {
  margin-top: 0.25rem;
}

.analysis-report-list {
  display: grid;
  gap: 0.8rem;
}

.analysis-report-card {
  display: grid;
  gap: 0.55rem;
  padding: 1rem;
  border: 1px solid #d8e1eb;
  border-radius: 0.85rem;
  background: #fff;
}
.analysis-report-card.analysis-risk-hoch,
.analysis-report-card.analysis-risk-gefaehrlich,
.analysis-report-card.analysis-risk-kritisch { border-top: 6px solid #c92a2a; }
.analysis-report-card.analysis-risk-mittel { border-top: 6px solid #e87500; }
.analysis-report-card.analysis-risk-niedrig { border-top: 6px solid #21844a; }
.analysis-check-grid { display: grid; gap: 9px; margin-top: 10px; }
.analysis-check-grid article { display: grid; gap: 5px; padding: 10px 12px; border: 1px solid; border-radius: 10px; }
.analysis-check-grid .is-hit { border-color: #e7a3a3; background: #fff0f0; color: #7d1717; }
.analysis-check-grid .is-clear { border-color: #9bd2af; background: #effaf3; color: #145f35; }
.analysis-check-grid span { color: var(--ink); }
.analysis-preview-details { padding: 10px 12px; border: 1px solid #cab7f5; border-radius: 12px; background: #f7f3ff; }
.analysis-preview-details iframe { width: 100%; height: min(760px, 75vh); margin-top: 10px; border: 1px solid #b9c7d8; border-radius: 10px; background: white; }

.analysis-report-card header,
.analysis-report-card footer {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}

.analysis-report-card header div {
  display: grid;
  gap: 0.2rem;
}

.analysis-report-card p {
  margin: 0;
}

.analysis-report-details pre {
  max-height: 22rem;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .analysis-report-card header,
  .analysis-report-card footer {
    flex-direction: column;
  }
}
.app-version {
  color: #718096;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.tutorial-form-grid {
  gap: 12px;
}

.tutorial-admin-list,
.tutorial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 18px;
}

.tutorial-admin-card,
.tutorial-card,
.tutorial-section {
  border: 1px solid #d8e1eb;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(30, 50, 70, 0.06);
}

.tutorial-compact {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, 230px);
  align-items: end;
  gap: 10px;
  width: 100%;
  margin-top: 8px;
  padding: 8px;
  border: 1px solid #d8e1eb;
  border-radius: 11px;
  background: #f8fafc;
}

.tutorial-compact.without-platform-select {
  grid-template-columns: minmax(0, 1fr);
}

.tutorial-compact-open {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 7px 10px;
  border: 0;
  border-radius: 9px;
  color: #24364b;
  background: #fff;
  text-align: left;
  cursor: pointer;
}

.tutorial-compact-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-width: 0;
}

.tutorial-compact-list .tutorial-compact-open {
  flex: 1 1 190px;
  max-width: 320px;
}

.tutorial-compact-open:hover {
  background: #eef4f8;
}

.tutorial-compact-open span:last-child {
  display: grid;
  min-width: 0;
}

.tutorial-compact-thumbnail {
  width: 96px;
  aspect-ratio: 16 / 9;
  flex: 0 0 96px;
  border-radius: 7px;
  object-fit: cover;
  background: #111827;
}

.tutorial-compact-thumbnail-mobile {
  width: 50px;
  aspect-ratio: 9 / 16;
  flex-basis: 50px;
  object-position: center;
}

.tutorial-compact-open small {
  color: #718096;
  font-weight: 700;
}

.tutorial-compact-open strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tutorial-compact-play {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
  font-size: 0.72rem;
}

.tutorial-compact-select {
  margin: 0;
  color: #64748b;
  font-size: 0.75rem;
}

.tutorial-compact-select select {
  min-height: 36px;
  margin-top: 3px;
}

.student-step-item .tutorial-compact {
  grid-column: 1 / -1;
  margin-top: 0;
}

.student-step-item .tutorial-compact-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}

.student-step-item .tutorial-compact-list .tutorial-compact-open {
  width: 100%;
  max-width: none;
}

.tutorial-compact-open small {
  font-size: 0.66rem;
  line-height: 1.15;
}

.tutorial-compact-open strong {
  font-size: 0.78rem;
  line-height: 1.2;
}

.tutorial-compact-select {
  font-size: 0.68rem;
}

.tutorial-admin-card {
  display: grid;
  gap: 10px;
  padding: 14px;
}

.tutorial-admin-preview {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 92px;
  padding: 14px;
  border: 1px solid #d8e1eb;
  border-radius: 12px;
  color: #24364b;
  background: linear-gradient(135deg, #f8fafc, #eef4f8);
  text-align: left;
  cursor: pointer;
}

.tutorial-admin-preview img {
  width: 128px;
  aspect-ratio: 16 / 9;
  flex: 0 0 128px;
  border-radius: 8px;
  object-fit: cover;
  background: #111827;
}

.tutorial-admin-preview span:last-child {
  display: grid;
  gap: 4px;
}

.tutorial-admin-preview small {
  color: #64748b;
}

.tutorial-admin-preview-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border-radius: 50%;
  color: #fff;
  background: var(--accent);
}

.tutorial-upload-progress-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  color: #526174;
  font-weight: 800;
}

.tutorial-upload-progress-wrap[hidden] {
  display: none;
}

.tutorial-upload-progress {
  width: 100%;
  height: 16px;
  accent-color: var(--accent);
}

.tutorial-link-warning {
  display: grid;
  place-content: center;
  gap: 8px;
  width: 100%;
  height: 100%;
  padding: 24px;
  color: #713f12;
  background: #fff7df;
  text-align: center;
}

.tutorial-admin-meta,
.tutorial-platform,
.tutorial-kicker {
  color: #64748b;
  font-size: 0.82rem;
  font-weight: 700;
}

.tutorial-section {
  margin-top: 20px;
  padding: 18px;
  background: #f8fafc;
}

.tutorial-section-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.tutorial-section-header h3,
.tutorial-copy h4 {
  margin: 3px 0 0;
}

.tutorial-section-header label {
  width: min(220px, 100%);
}

.tutorial-card {
  overflow: hidden;
}

.tutorial-copy {
  padding: 14px;
}

.tutorial-copy p {
  color: #526174;
  line-height: 1.55;
}

.tutorial-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #111827;
}

.tutorial-frame video,
.tutorial-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: contain;
}

.tutorial-external-link {
  position: absolute;
  inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
}

.tutorial-dialog {
  position: fixed;
  inset: auto 24px 24px auto;
  width: min(660px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  max-width: none;
  margin: 0;
  border: 0;
  border-radius: 18px;
  padding: 0;
  box-shadow: 0 24px 80px rgba(15, 23, 42, 0.28);
  overflow: auto;
  z-index: 90;
}

.tutorial-dialog::backdrop {
  background: rgba(15, 23, 42, 0.68);
}

.tutorial-window {
  position: relative;
  padding: 20px;
  background: #f8fafc;
}

.tutorial-window-header {
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.tutorial-dialog.is-dragging .tutorial-window-header {
  cursor: grabbing;
}

.tutorial-window-header button {
  cursor: pointer;
}

.tutorial-frame-expanded {
  border-radius: 12px;
}

.tutorial-frame-expanded.is-portrait-video {
  width: min(100%, 38vh);
  margin-inline: auto;
  aspect-ratio: var(--tutorial-video-ratio, 0.5625);
}

.tutorial-frame-expanded.is-portrait-video video {
  object-fit: contain;
}

.tutorial-window-actions {
  display: flex;
  justify-content: flex-end;
  padding-top: 10px;
}

.tutorial-dialog.is-fullscreen {
  inset: 0;
  width: 100vw;
  height: 100vh;
  max-height: none;
  border-radius: 0;
}

.tutorial-dialog.is-fullscreen .tutorial-window {
  min-height: 100vh;
}

.tutorial-dialog.is-fullscreen .tutorial-frame-expanded {
  height: calc(100vh - 150px);
  aspect-ratio: auto;
}

.tutorial-dialog.is-fullscreen .tutorial-frame-expanded.is-portrait-video {
  width: min(100%, 56vh);
  margin-inline: auto;
}

@media (max-width: 720px) {
  .tutorial-form-grid,
  .tutorial-grid,
  .tutorial-admin-list {
    grid-template-columns: 1fr;
  }

  .tutorial-section-header {
    align-items: stretch;
    flex-direction: column;
  }

  .tutorial-compact {
    grid-template-columns: 1fr;
  }

  .tutorial-dialog {
    inset: auto 8px 8px;
    width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }

  .tutorial-window-header {
    cursor: default;
  }
}
.security-dashboard-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.security-dashboard-summary article {
  display: grid;
  gap: 0.2rem;
  padding: 0.8rem;
  border: 1px solid #f1c99d;
  border-radius: 0.8rem;
  background: #fff8ef;
}

.security-dashboard-summary strong {
  color: #b84c16;
  font-size: 1.55rem;
}

.security-ranking {
  display: grid;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.security-ranking-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.75rem;
  padding: 0.55rem 0.7rem;
  border-radius: 0.55rem;
  background: #f4f7fb;
}

.security-ranking-row span {
  overflow-wrap: anywhere;
}

.security-event-table-wrap {
  max-width: 100%;
  /* "flex: 0 0 auto" ist hier entscheidend: Das Fenster (.block-window) ist
     ein Spalten-Flexlayout, und ein Kind mit "overflow" bekommt darin
     automatisch die Mindesthoehe 0. Ohne diese Zeile wurde der Rahmen auf
     null Pixel zusammengedrueckt - die Zeilen standen im Dokument, waren aber
     unsichtbar, und das Dashboard wirkte leer.
     Die feste Hoehe haelt zugleich die Ranglisten darunter erreichbar: Bei
     ueber hundert Vorfaellen waeren sie sonst mehrere Bildschirmhoehen
     entfernt. Die Tabelle rollt in sich selbst. */
  flex: 0 0 auto;
  /* Hoehe am Bildschirm ausgerichtet, nicht an einer festen Pixelzahl - auf
     einem grossen Monitor sieht man dadurch mehr Zeilen, auf dem Handy
     bleibt der Rest des Fensters trotzdem erreichbar. */
  max-height: 55vh;
  overflow: auto;
}

/* Die Kopfzeile bleibt beim Rollen stehen, sonst weiss man nach ein paar
   Zeilen nicht mehr, welche Spalte was bedeutet. */
.security-event-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #fff;
}

.security-event-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}

.security-event-table th,
.security-event-table td {
  padding: 0.55rem;
  border-bottom: 1px solid #d9e1ec;
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
}

/* Der vollstaendige User-Agent ist sehr lang und wuerde die Tabelle sonst
   dominieren - gekuerzt anzeigen, kompletter Text im Tooltip. */
.security-event-agent {
  max-width: 260px;
  color: var(--muted);
  font-size: 0.8rem;
}

@media (max-width: 700px) {
  .security-dashboard-summary {
    grid-template-columns: 1fr;
  }
}

/* Datenschutzfenster: ein Lesetext, kein Formular. Deshalb breiter als die
   Anmeldepanels und linksbuendig - zentrierter Fliesstext liest sich schlecht.
   Gescrollt wird das Overlay selbst (overflow-y: auto), NICHT das Panel: Ein
   Kind mit overflow in einem Spalten-Flexcontainer klappt auf Hoehe 0
   zusammen, solange min-height nicht gesetzt ist. */
.privacy-panel {
  width: min(680px, 100%);
  gap: 12px;
  text-align: left;
}

.privacy-panel h2 {
  margin: 10px 0 0;
  font-size: 1.05rem;
}

.privacy-panel p {
  margin: 0;
  line-height: 1.55;
  color: var(--ink);
}

/* Fuenf Zeilen mal drei Spalten passen auf dem Handy nicht nebeneinander -
   die Tabelle bekommt ihren eigenen waagerechten Bildlauf, damit die Seite
   selbst nicht seitlich wandert. */
.privacy-table-wrap {
  flex: 0 0 auto;
  overflow-x: auto;
}

.privacy-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.privacy-table th,
.privacy-table td {
  padding: 8px 10px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.privacy-table th {
  background: var(--page);
  font-weight: 600;
}

.privacy-link {
  justify-self: start;
}


/* Kurze Erlaeuterung unter einem Eingabefeld. */
.field-hint {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.4;
}

/* Ein gesperrtes Feld muss auch so aussehen - sonst tippt man hinein und
   wundert sich, dass nichts passiert. */
input[readonly] {
  background: var(--page);
  color: var(--muted);
  cursor: not-allowed;
}

/* Eine gescheiterte Anmeldung darf nicht gruen aussehen - Gruen heisst
   Erfolg. Betrifft nur Meldungen, die ausdruecklich als Fehler gesetzt
   werden; die uebrigen Statuszeilen bleiben, wie sie sind. */
.status-line.is-error {
  color: var(--rose);
}

/* Kundenuebersicht im Adminbereich. Bewusst als Karten und nicht als Tabelle:
   Zu jedem Kunden gehoeren mehrere Lernwege mit eigenen Laufzeiten und
   mehrere Bestellungen - in Tabellenzeilen gepresst wird das unleserlich,
   sobald jemand mehr als einen Zugang hat. */
.customer-dashboard-dialog {
  inset: 24px auto auto 24px;
  width: min(1100px, calc(100vw - 48px));
  height: min(820px, calc(100vh - 48px));
}

.customer-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}

.customer-toolbar label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--muted);
}

.customer-search {
  flex: 1 1 260px;
}

.customer-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
}

.customer-card {
  border: 1px solid var(--line);
  border-left: 4px solid var(--muted);
  border-radius: 10px;
  padding: 12px 14px;
  background: var(--panel);
}

/* Der farbige Streifen links macht die Dringlichkeit auf einen Blick
   sichtbar - beim Durchscrollen zaehlt das mehr als die Beschriftung. */
.customer-state-green { border-left-color: var(--green); }
.customer-state-amber { border-left-color: var(--accent); }
.customer-state-rose { border-left-color: var(--rose); }
.customer-state-grau { border-left-color: var(--muted); }

.customer-card header {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: 6px 12px;
  margin-bottom: 8px;
}

/* Ohne min-width:0 schrumpft ein Flex-Element nie unter seinen laengsten
   Inhalt - ein Benutzername ohne Trennstelle sprengte damit die Karte. */
.customer-card header > div {
  min-width: 0;
  overflow-wrap: anywhere;
}

.customer-card header .count-pill {
  flex: 0 0 auto;
}

.customer-card header span {
  display: block;
  font-size: 0.85rem;
  color: var(--muted);
  /* E-Mailadressen sind lange Woerter ohne Trennstelle. */
  overflow-wrap: anywhere;
}

.customer-columns {
  display: grid;
  /* min(280px, 100%): Ohne die Begrenzung erzwingt die Mindestbreite bei
     schmalem Fenster eine Karte, die seitlich hinauslaeuft. */
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  gap: 12px 24px;
}

.customer-columns strong {
  display: block;
  font-size: 0.85rem;
  margin-bottom: 4px;
}

.customer-columns ul {
  margin: 0 0 10px;
  padding-left: 18px;
  font-size: 0.9rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* Auswahl beim Entfernen eines Kunden - eingeblendet in der Karte, damit
   sichtbar bleibt, wen es betrifft. */
.customer-remove,
.customer-edit {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  padding: 10px 12px;
  border: 1px solid var(--rose);
  border-radius: 8px;
  background: var(--surface, var(--panel));
}

/* Dieselbe Box zum Bearbeiten, ohne den Warnrahmen des Entfernens. */
.customer-edit {
  border-color: var(--line);
}

.customer-remove-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.9rem;
}

.customer-remove-option:has(input:disabled) {
  color: var(--muted);
}

.customer-card header > .small-action {
  flex: 0 0 auto;
}

.customer-columns li button {
  margin-left: 6px;
}

/* Die beiden Wege zum Passkey nebeneinander. Untereinander wirkten sie wie
   Haupt- und Nebenweg - es sind aber zwei gleichwertige Moeglichkeiten. */
.passkey-choice {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.passkey-choice button {
  flex: 1 1 180px;
}

/* Der Fragezeichen-Knopf zur Hilfe. Als Verweis und nicht als Schaltflaeche,
   damit die Seite in einem neuen Tab geoeffnet werden kann - wer die Anleitung
   liest, soll die Lernplattform daneben offen behalten. */
.hilfe-knopf {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}

/* Irrefuehrend aufgebaute Adressen. Bewusst eine eigene Box neben der roten
   Linkwarnung: Dort geht es um das Ziel eines Links, hier um den Aufbau des
   Namens selbst. Der Lernmoment steckt in der Zerlegung - wer einmal gesehen
   hat, dass bei "commerz.de-erneuern.cc" die Adresse "de-erneuern.cc" lautet,
   erkennt die Masche danach ueberall wieder. Deshalb steht der entscheidende
   Teil gross und farbig, der frei waehlbare Vorspann blass daneben. */
/* Absenderadressen: sachlich, nicht als Warnung gestaltet - sie stehen auch
   dann da, wenn nichts zu beanstanden ist. Nur die auffaellige Zeile bekommt
   eine Farbe. */
/* Unsichtbare Zeichen: als Warnung gestaltet, aber mit dem Gegenueberstellen
   als Kern - der Unterschied zwischen "du liest" und "im Text steht" ist die
   ganze Erklaerung. */
.email-hidden-chars {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 3px solid #b45309;
  border-radius: 8px;
  background: #fffbeb;
  box-shadow: inset 0 0 0 2px #fde68a;
}

.email-hidden-chars strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #92400e;
  font-size: 1.05rem;
}

.email-hidden-chars p {
  margin: 0;
  font-size: 0.94rem;
}

.email-hidden-chars-table {
  width: auto;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.email-hidden-chars-table th,
.email-hidden-chars-table td {
  padding: 5px 12px 5px 0;
  text-align: left;
  vertical-align: baseline;
}

.email-hidden-chars-table th {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  opacity: 0.7;
}

.email-hidden-chars-zerlegt {
  color: #92400e;
  font-weight: 600;
}

.email-hidden-chars-legende,
.email-hidden-chars-arten {
  font-size: 0.85rem;
  opacity: 0.8;
}

/* Angezeigter Name und wirkliche Adresse, immer nebeneinander. Sie stehen
   ganz oben im Absenderblock, weil sie die Frage beantworten, die zuerst
   kommt: Ist der, der draufsteht, auch der, der geschrieben hat? */
.email-sender-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  gap: 6px 14px;
  margin: 8px 0 12px;
  padding: 10px 12px;
  border-left: 4px solid #2d8a63;
  border-radius: 0 6px 6px 0;
  background: #f2f7f5;
}

.email-sender-pair.is-warning {
  border-left-color: #b91c1c;
  background: #fdf1f1;
}

.email-sender-pair > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.email-sender-pair span {
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  opacity: 0.75;
}

.email-sender-pair code {
  font-size: 0.86rem;
  overflow-wrap: anywhere;
}

.email-sender-pair p {
  grid-column: 1 / -1;
  margin: 2px 0 0;
  font-size: 0.82rem;
}

.email-sender-check {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--border, #d5dbe6);
  border-radius: 8px;
  background: var(--surface-muted, #f7f9fc);
}

.email-sender-check strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
}

.email-sender-check > p {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.85;
}

.email-sender-row {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 6px;
  border-left: 4px solid #2d8a63;
  background: var(--surface, #ffffff);
}

.email-sender-row.is-warning {
  border-left-color: #b45309;
  background: #fffbeb;
}

.email-sender-row dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.email-sender-row dl > div {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.email-sender-row dt {
  min-width: 15rem;
  font-weight: 600;
  opacity: 0.75;
  font-size: 0.88rem;
}

.email-sender-row dd {
  margin: 0;
  overflow-wrap: anywhere;
}

.email-sender-grund,
.email-sender-echt {
  margin: 0;
  font-size: 0.9rem;
}

.email-sender-echt {
  opacity: 0.85;
}

/* Weg der Nachricht: eine Kette, keine Tabelle - sie soll von oben nach unten
   gelesen werden wie die Nachricht gelaufen ist. */
/* Der Weg steht auch dann da, wenn er sich nicht feststellen laesst -
   dann aber ohne Warnfarbe: Fehlende Kopfzeilen sind kein Verdachtsmoment. */
.email-route.is-leer {
  opacity: 0.9;
}

.email-route {
  display: grid;
  gap: 8px;
  padding: 12px;
  border: 2px solid var(--border, #d5dbe6);
  border-radius: 8px;
  background: var(--surface-muted, #f7f9fc);
}

.email-route strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.05rem;
}

.email-route > p {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.85;
}

.email-route-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding-left: 22px;
}

.email-route-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  padding: 6px 8px;
  border-radius: 6px;
  background: var(--surface, #ffffff);
}

.email-route-host {
  font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
  font-size: 0.88rem;
  overflow-wrap: anywhere;
}

.email-route-pfeil {
  opacity: 0.6;
}

/* Der Hinweis, dass eine lange Kette normal ist - er soll die Liste
   einordnen, nicht mit ihr konkurrieren. */
.email-route-hinweis {
  margin: 0;
  font-size: 0.88rem;
  opacity: 0.8;
}

.email-route-ip,
.email-route-zeit {
  font-size: 0.82rem;
  opacity: 0.75;
}

.email-domain-alert {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 3px solid #b45309;
  border-radius: 8px;
  background: #fffbeb;
  box-shadow: inset 0 0 0 2px #fde68a;
}

.email-domain-alert strong {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #92400e;
  font-size: 1.05rem;
}

.email-domain-split {
  display: grid;
  gap: 6px;
  padding: 10px;
  border-radius: 6px;
  background: #fff;
  border: 1px solid #fcd34d;
}

.email-domain-full {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 1.15rem;
  word-break: break-all;
}

/* Blass und durchgestrichen: Der Vorspann sieht vertraut aus, entscheidet aber
   nichts. Genau diese Erwartung nutzt der Betrug aus. */
.email-domain-vorspann {
  color: #a16207;
  opacity: 0.7;
  text-decoration: line-through;
}

.email-domain-kern {
  color: #991b1b;
  font-weight: 800;
  background: #fee2e2;
  padding: 1px 4px;
  border-radius: 4px;
}

.email-domain-split dl {
  display: grid;
  gap: 4px;
  margin: 0;
}

.email-domain-split dl div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.9rem;
}

.email-domain-split dt {
  color: #57534e;
  min-width: 160px;
}

.email-domain-split dd {
  margin: 0;
  font-weight: 700;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
}

.email-domain-grund {
  margin: 0;
  font-size: 0.9rem;
  color: #57534e;
}

/* Ordnerpruefung in der E-Mailanalyse. Eine Liste zum Durchsehen, keine
   Galerie: dicht, sortiert nach Verdachtsgrad, jede Zeile anklickbar. */
.email-batch-panel {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--border, #d5dbe6);
  border-radius: 8px;
  background: var(--surface-muted, #f7f9fc);
}

.email-batch-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.email-batch-head strong {
  font-size: 1.02rem;
}

.email-batch-head span {
  flex: 1 1 12rem;
  font-size: 0.9rem;
  opacity: 0.85;
  overflow-wrap: anywhere;
}

[data-email-batch-list] {
  display: grid;
  gap: 4px;
  max-height: 24rem;
  overflow-y: auto;
}

/* Abbrechen gibt es nur, solange ein Durchgang laeuft. Ist er durch, bleibt
   nur noch Schliessen - ein Knopf, der nichts mehr abbrechen kann, stellt
   eine Frage, die sich nicht mehr stellt. */
/* Ohne diese Regel bleibt die Liste stehen, auch wenn sie versteckt wird:
   Das display:grid oben ueberschreibt das hidden-Attribut des Browsers.
   Das Vorschaufeld daneben hat dieselbe Regel - hier fehlte sie. */
.email-batch-panel[hidden] {
  display: none;
}

.email-batch-panel:not([data-laeuft]) [data-email-batch-stop] {
  display: none;
}

.email-batch-row {
  /* Bewusst kein Raster: Mit zwei Spalten wurde der Dateiname auf wenige
     Zeichen zusammengedrueckt und brach buchstabenweise um. Untereinander ist
     hier auch das Richtige - der Name ist lang, der Befund auch. */
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border, #d5dbe6);
  border-left-width: 5px;
  border-radius: 6px;
  background: var(--surface, #fff);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.email-batch-row:hover {
  border-color: #7a879b;
}

.email-batch-hoch { border-left-color: #b91c1c; }
.email-batch-mittel { border-left-color: #b45309; }
.email-batch-niedrig { border-left-color: #2d8a63; }
.email-batch-unauffaellig,
.email-batch-vertrauenswuerdig { border-left-color: #2d8a63; }
.email-batch-fehler { border-left-color: #6b7280; }

.email-batch-name {
  display: inline;
  margin-right: 8px;
  font-weight: 600;
  font-size: 0.9rem;
  overflow-wrap: anywhere;
}

.email-batch-risiko {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #eef2f7;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
}

.email-batch-hoch .email-batch-risiko { background: #fde8e8; color: #9b1c1c; }
.email-batch-mittel .email-batch-risiko { background: #fef3c7; color: #92400e; }
.email-batch-niedrig .email-batch-risiko,
.email-batch-unauffaellig .email-batch-risiko,
.email-batch-vertrauenswuerdig .email-batch-risiko { background: #e6f6ee; color: #1c6b47; }

/* Die Kategorie neben dem Verdachtsgrad in der Ordnerliste. Der Grad traegt
   die Farbe, die Kategorie nur ihr Zeichen - zwei farbige Plaketten
   nebeneinander wuerden um dieselbe Aufmerksamkeit ringen. */
.email-batch-kategorie {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  background: #f1f4f9;
  color: #3b4759;
  font-size: 0.72rem;
  font-weight: 600;
  white-space: nowrap;
}

.email-batch-treffer {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  opacity: 0.75;
  overflow-wrap: anywhere;
}

/* Hinweis auf die automatische Einordnung in der Phishing-Simulation.
   Bewusst auffaellig: Sie ist eine Vorbelegung, kein Urteil, und muss
   durchgesehen werden, bevor Schueler damit arbeiten. */
.phishing-auto-hinweis {
  margin: 0;
  padding: 6px 10px;
  border-left: 4px solid #b45309;
  border-radius: 0 6px 6px 0;
  background: #fffbeb;
  color: #92400e;
  font-size: 0.86rem;
}

.phishing-upload small {
  display: block;
  margin-top: 4px;
  font-size: 0.84rem;
  opacity: 0.85;
}

/* Die Ergaenzungen zur Ordnerpruefung. Sie fehlten: Eine Befehlskette war
   abgebrochen, bevor sie angehaengt wurden. */
.email-batch-adresse,
.email-batch-befunde {
  display: block;
  margin-top: 3px;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.email-batch-adresse code {
  padding: 1px 5px;
  border-radius: 4px;
  background: #fef3c7;
  color: #92400e;
  font-size: 0.95em;
}

.email-batch-befunde em {
  font-style: normal;
  opacity: 0.85;
}

/* Die Lernbilanz am Ende einer Ordnerpruefung. Sie ist der eigentliche Zweck
   der Uebung: nicht "welche Mail war boese", sondern "woran war es zu sehen". */
.email-batch-lernen {
  display: grid;
  gap: 8px;
  padding: 12px 14px;
  border-left: 4px solid #e77408;
  border-radius: 0 8px 8px 0;
  background: var(--surface, #fff);
}

.email-batch-lernen:empty {
  display: none;
}

.email-batch-lernen strong {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1.02rem;
}

.email-batch-lernen p {
  margin: 0;
  font-size: 0.9rem;
}

.email-batch-lernen ol {
  display: grid;
  gap: 4px;
  margin: 0;
  padding-left: 20px;
  font-size: 0.92rem;
}

.email-batch-lernzahl {
  display: inline-block;
  min-width: 2.4rem;
  font-weight: 700;
}

.email-batch-lernhinweis {
  opacity: 0.8;
}

/* Waehrend eine Ordnerpruefung laeuft, treten die drei Auswahlfelder zurueck.
   Ihre Erklaertexte brauchten mehr als die halbe Hoehe des Fensters - man sah
   die Liste kaum, um die es gerade geht. Die Knoepfe bleiben, die Erklaerung
   kommt wieder, sobald die Liste geschlossen ist. */
.email-analysis-tool.is-batch-open .email-upload-description,
.email-analysis-tool.is-batch-open .email-upload-help .explanation-video {
  display: none;
}

.email-analysis-tool.is-batch-open .email-upload-option {
  gap: 4px 14px;
}

.email-analysis-tool.is-batch-open .email-drop-zone {
  padding-top: 8px;
  padding-bottom: 8px;
}

/* Die Kopfzeile bleibt beim Blaettern stehen, ohne die erste Zeile zu
   verdecken. */
.email-batch-head {
  position: sticky;
  top: 0;
  z-index: 1;
  padding-bottom: 6px;
  background: var(--surface-muted, #f7f9fc);
}

[data-email-batch-list] {
  max-height: 40vh;
}

/* Die Auswahlleiste der E-Mailanalyse: drei Wege in einer Reihe, alle
   gleich gebaut - Beschreibung oben, Knopf darunter. Beide Texte stellt
   der Tutor ein; laesst er die Beschreibung leer, entsteht kein leerer
   Kasten und die Spalte wird von selbst schmal.

   Die urspruengliche Regel stellte jede Ablageflaeche fest auf Spalte 1,
   Zeile 2 eines zweispaltigen Rasters. Dabei landeten zwei Flaechen
   nebeneinander in derselben Zelle, uebereinandergelegt. Statt weitere
   Ausnahmen zu stapeln, bekommt dieses Werkzeug eine eigene, einfache
   Anordnung. */
.email-analysis-tool .email-upload-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  /* Gleich hohe Spalten - die Voraussetzung dafuer, dass die Knoepfe
     darunter auf einer Linie stehen koennen. */
  align-items: stretch;
}

.email-analysis-tool .email-upload-option {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: auto;
  min-width: 0;
  flex: 1 1 14rem;
}


.email-analysis-tool .email-drop-zone,
.email-analysis-tool .email-upload-option > .secondary-action {
  grid-column: auto;
  grid-row: auto;
  /* Nicht wachsen: In der Spalte waere das die Hoehe, nicht die Breite. */
  flex: 0 0 auto;
  width: 100%;
  max-width: none;
  /* Oben auto: Das druckt den Knopf ans untere Ende seiner Spalte, damit
     alle drei auf einer Linie stehen. Ein schlichtes margin: 0 stand hier
     frueher und setzte genau das wieder zurueck. */
  margin: auto 0 0;
  /* Gleiche Hoehe fuer alle drei. Die Ablageflaechen tragen einen 2 px
     gestrichelten Rahmen und waren dadurch vier Pixel hoeher als der Knopf
     der Zwischenablage - die Unterkanten lagen auf einer Linie, die
     Oberkanten nicht. */
  min-height: 38px;
}

/* Ein Weg mit Beschreibung darf breiter werden als einer ohne - sonst
   bricht der Text auf zwei Zeichen Breite um. Die feste Spalte verhindert,
   dass ein langes Wort die Reihe auseinanderzieht. */
.email-analysis-tool .email-upload-option:has(.email-upload-help) {
  flex: 1 1 20rem;
}

.email-analysis-tool .email-upload-help {
  display: block;
}

/* Ein Text je Knopf, ein Format fuer alle drei. Die frueheren Regeln fuer
   strong und small stammen aus der Zeit, als der Block aus Ueberschrift
   und Beschreibung bestand; hier gilt nur noch diese eine. */
.email-analysis-tool .email-upload-description {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Die Kategorie neben dem Verdachtsgrad. Der Grad sagt, wie gefaehrlich die
   Nachricht ist - die Kategorie, was sie ist. Farben bleiben dem Grad
   vorbehalten; die Kategorie traegt nur ihr Zeichen. */
.email-kategorie {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.65);
  font-size: 0.85rem;
  font-weight: 600;
  width: fit-content;
}

/* Kennzeichnung einer Auswertung aus einer Ordnerpruefung. Sie steht ueber
   dem Ergebnis, weil sie die Lesart aendert: Diese Nachricht kam nicht,
   weil sie verdaechtig war, sondern weil sie im Ordner lag. */
.email-stapel-marke {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  padding: 6px 12px;
  border-left: 4px solid var(--accent, #e77408);
  border-radius: 0 6px 6px 0;
  background: var(--surface-muted, #f7f9fc);
  font-size: 0.88rem;
}

.email-stapel-marke strong {
  font-size: 0.92rem;
}

.email-stapel-marke span:last-child {
  opacity: 0.85;
}

/* Warum das Urteil so ausfaellt: jeder Teil der Sendung mit seiner Stufe. */
.email-urteilsgrund {
  display: grid;
  gap: 8px;
  margin: 10px 0 0;
  padding: 12px;
  border: 2px solid #cbd5f5;
  border-radius: 8px;
  background: #f8fafc;
}

.email-urteilsgrund strong {
  font-size: 1rem;
}

.email-urteilsgrund p {
  margin: 0;
  font-size: 0.94rem;
}

.email-urteilsgrund ul {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.email-urteilsgrund li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-size: 0.94rem;
}

.email-urteilsgrund-befunde {
  width: 100%;
  padding-left: 26px;
  font-size: 0.88rem;
  opacity: 0.85;
}

/* Jeder Anhang noch einmal fuer sich, mit dem vollstaendigen Bericht. */
.email-anhang-auswertungen {
  display: grid;
  gap: 12px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 3px solid #cbd5f5;
}

.email-anhang-auswertungen > h4 {
  margin: 0;
  font-size: 1.05rem;
}

.email-anhang-auswertungen > p {
  margin: 0;
  font-size: 0.92rem;
  opacity: 0.85;
}

.email-anhang-auswertung {
  display: grid;
  gap: 10px;
  padding: 12px;
  border: 2px solid #cbd5f5;
  border-radius: 8px;
  background: #ffffff;
}

.email-anhang-auswertung > h5 {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0;
  font-size: 1rem;
}

.email-anhang-urteil {
  padding: 2px 8px;
  border-radius: 999px;
  background: #eef2ff;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Ein Anhang ist keine Nachricht - der Hinweis steht an der Stelle, wo sonst der Absender stuende. */
.email-datei-hinweis {
  display: grid;
  gap: 6px;
  padding: 10px 12px;
  border-left: 4px solid #94a3b8;
  border-radius: 6px;
  background: #f8fafc;
}

.email-datei-hinweis p {
  margin: 0;
  font-size: 0.92rem;
}

/* Die Pruefpunkte, nach Teilen der Sendung getrennt. */
.email-pruefteil {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.email-pruefteil > h4 {
  margin: 0;
  padding-bottom: 4px;
  border-bottom: 2px solid #cbd5f5;
  font-size: 0.98rem;
}

/* Woher ein einzelner Befund stammt. */
.email-befund-herkunft {
  margin: 6px 0 0;
  font-size: 0.9rem;
  font-weight: 600;
}

/* Wem die Einstufung gilt - steht direkt unter dem Urteil. */
.email-risk-quelle {
  font-weight: 600;
}

/* Sammelentfernen unter der Suche: Der Knopf nennt die Zahl der Treffer und
   bleibt ohne Suchbegriff gesperrt. */
.library-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}

.library-bulk .status-line {
  margin: 0;
}


/* Zum Weiterlesen unter einer Antwort von KIRonni (1.1.465). */
.ki-weiterlesen {
  margin-top: 10px;
  padding: 8px 12px;
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  background: var(--page);
  font-size: 0.92em;
}
.ki-weiterlesen ul { margin: 4px 0 0; padding-left: 18px; }
.ki-weiterlesen a { color: var(--accent-dark, var(--accent)); word-break: break-word; }

/* Website-KIRonni (1.1.466): wie die Rechnungsangaben, der Einbaucode in Festbreitenschrift. */
.website-kironni-form textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }
.website-kironni-code { display: grid; gap: 6px; margin-top: 12px; }
.website-kironni-code textarea { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.85em; background: var(--page); }
.website-kironni-freigabe { margin-top: 10px; font-size: 0.92em; }
.website-kironni-freigabe ul { margin: 4px 0 10px; padding-left: 18px; max-height: 220px; overflow: auto; }

/* Verdaechtige Eingaben im Sicherheitsdashboard (1.1.479). */
.verdaechtig-text { max-width: 420px; white-space: pre-wrap; word-break: break-word; font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 0.88em; }
.verdaechtig-eingearbeitet { opacity: 0.55; }