:root {
  --st-primary: #087f8c;
  --st-primary-dark: #065f69;
  --st-accent: #f4b942;
  --st-bg: #f3f7f8;
  --st-border: #d9e5e8;
  --st-text: #263238;
  --bs-primary: #087f8c;
  --bs-primary-rgb: 8, 127, 140;
  --bs-link-color: #087f8c;
  --bs-link-hover-color: #065f69;
}

html, body { min-height: 100%; }
body {
  background: var(--st-bg);
  color: var(--st-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
body > main { flex: 1 0 auto; width: 100%; }
body > footer { flex-shrink: 0; margin-top: auto; width: 100%; }
.app-navbar {
  background: linear-gradient(120deg, color-mix(in srgb, var(--st-primary) 96%, transparent), color-mix(in srgb, var(--st-primary-light-solid) 96%, transparent));
  box-shadow: 0 4px 20px color-mix(in srgb, var(--st-primary-dark) 18%, transparent);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.brand-mark { width: 2rem; height: 2rem; display: inline-grid; place-items: center; border-radius: .65rem; background: rgba(255,255,255,.16); }
.navbar .nav-link { border-radius: .65rem; padding-inline: .85rem !important; }
.navbar .nav-icon-link {
  display: inline-grid;
  place-items: center;
  width: 2.55rem;
  height: 2.55rem;
  padding: 0 !important;
  color: rgba(255,255,255,.78);
  background: transparent;
  font-size: 1.18rem;
  line-height: 1;
  transition: color .18s ease, background-color .18s ease, transform .18s ease;
}
.navbar .nav-link.active, .navbar .nav-link:hover, .navbar .nav-icon-link:focus-visible {
  color: #fff;
  background: rgba(255,255,255,.15);
}
.navbar .nav-icon-link:hover { transform: translateY(-1px); }
.navbar .nav-icon-link:focus-visible { outline: 2px solid rgba(255,255,255,.85); outline-offset: 2px; }
.hero-card, .app-card { background: #fff; border: 1px solid var(--st-border); border-radius: 1.25rem; box-shadow: 0 .75rem 2rem rgba(35,64,72,.08); }
.hero-card { overflow: hidden; }
.hero-accent { background: linear-gradient(145deg, var(--st-primary), var(--st-primary-light-solid)); color: #fff; }
.icon-tile { width: 3rem; height: 3rem; border-radius: .9rem; display: grid; place-items: center; background: color-mix(in srgb, var(--st-primary) 10%, transparent); color: var(--st-primary); font-size: 1.35rem; }
.btn-primary { --bs-btn-bg: var(--st-primary); --bs-btn-border-color: var(--st-primary); --bs-btn-hover-bg: var(--st-primary-dark); --bs-btn-hover-border-color: var(--st-primary-dark); }
.form-control:focus, .form-select:focus { border-color: color-mix(in srgb, var(--st-primary) 55%, transparent); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--st-primary) 12%, transparent); }
.badge-soft { background: color-mix(in srgb, var(--st-primary) 10%, transparent); color: var(--st-primary-dark); }
.text-preview { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; line-height: 1.75; }
.trainer-shell { max-width: 1180px; margin-inline: auto; }
.trainer-panel { background: #fff; border: 1px solid var(--st-border); border-radius: 1.15rem; box-shadow: 0 .65rem 1.7rem rgba(35,64,72,.07); }
.trainer-text { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-size: clamp(1rem, 1.3vw, 1.2rem); line-height: 1.85; white-space: pre-wrap; overflow-wrap: anywhere; }
.template-window { min-height: 250px; max-height: 42vh; overflow-y: auto; padding: 1.4rem; background: #fbfdfd; border-radius: .9rem; border: 1px solid var(--st-border); }
.template-char.current { background: color-mix(in srgb, var(--st-accent) 32%, #fff); color: #111; border-bottom: 3px solid var(--st-accent); border-radius: .2rem; scroll-margin: 7rem; }
.template-char.done { color: #87979c; }
.typing-area { min-height: 235px; resize: vertical; padding: 1.4rem; border-radius: .9rem; }
.metric { min-width: 120px; background: #fff; border: 1px solid var(--st-border); border-radius: .9rem; padding: .75rem 1rem; }
.metric-label { color: #718087; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; }
.metric-value { font-size: 1.35rem; font-weight: 700; }
.timer-warning { color: #b45309; }
.timer-danger { color: #b91c1c; }
.result-text { white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; line-height: 1.8; }
.error-char, .error-extra { text-decoration: underline wavy #dc3545 2px; text-underline-offset: 3px; background: rgba(220,53,69,.07); }
.error-extra { text-decoration-style: double; }
.error-missing { color: #dc3545; font-weight: 800; border-bottom: 2px solid #dc3545; margin-inline: 1px; }
.table > :not(caption) > * > * { padding-top: .85rem; padding-bottom: .85rem; }
.drop-zone { border: 2px dashed #b8cdd2; background: #f9fcfc; border-radius: 1rem; padding: 1.5rem; transition: .2s ease; }
.drop-zone:hover { border-color: var(--st-primary); background: #f4fbfb; }
@media print {
  .no-print, nav, footer { display: none !important; }
  body { background: #fff; }
  main.container-xl { max-width: none; padding: 0 !important; }
  .app-card, .trainer-panel { box-shadow: none; border: none; }
  .result-text { font-size: 10.5pt; }
}

/* Schreibansicht */
.writing-page main.container-xl { max-width: none; padding: .65rem 1rem 1rem !important; }
.writing-page .navbar-compact { min-height: 44px; }
.writing-page .navbar-compact .navbar-brand { font-size: .95rem; padding-block: .25rem; }
.writing-page .navbar-compact .brand-mark { width: 1.65rem; height: 1.65rem; border-radius: .5rem; }
.writing-page .navbar-compact .nav-link { padding-block: .25rem !important; font-size: .9rem; }
.writing-page footer { display: none; }
.trainer-shell { max-width: 1600px; }
.trainer-topbar .metric { min-width: 112px; padding: .45rem .75rem; }
.trainer-topbar .metric-label { font-size: .68rem; }
.trainer-topbar .metric-value { font-size: 1.08rem; }
.template-window { min-height: 34vh; max-height: 39vh; padding: 1.2rem; }
.typing-area { min-height: 35vh; max-height: 42vh; padding: 1.2rem; resize: none; }
.writing-page .trainer-panel { border-radius: .85rem; }
.writing-page .trainer-panel > .d-flex { margin-bottom: .5rem !important; }

/* Deutlichere Fehlerdarstellung */
.error-char, .error-extra {
  color: #c1121f;
  font-weight: 700;
  background: rgba(220, 53, 69, .14);
  border-radius: .15rem;
  padding-inline: .03rem;
}
.error-missing { color: #c1121f; background: rgba(220, 53, 69, .12); padding-inline: .15rem; }
.error-number { color: #c1121f !important; }
.print-result-header { display: none; }

@media (max-width: 900px) {
  .template-window, .typing-area { min-height: 30vh; }
  .trainer-title { width: 100%; }
}

@media print {
  @page { size: A4; margin: 10mm 12mm; }
  html, body { margin: 0 !important; padding: 0 !important; }
  .screen-result-header { display: none !important; }
  .print-result-header { display: block !important; margin: 0 0 5mm; padding: 0 0 3mm; border-bottom: 1px solid #999; }
  .print-result-header h1 { font-size: 15pt; margin: 0; }
  .print-result-header .small { font-size: 9pt; }
  .result-metrics { margin-bottom: 4mm !important; gap: 0 !important; }
  .result-metrics > div { width: 20% !important; flex: 0 0 20% !important; padding: 1mm !important; }
  .result-metrics .app-card { padding: 2mm !important; border: 1px solid #ccc !important; border-radius: 0 !important; }
  .result-metrics .h3 { font-size: 12pt; }
  .result-metrics .metric-label { font-size: 7.5pt; }
  .result-layout > .col-xl-8 { width: 72% !important; }
  .result-layout > .col-xl-4 { width: 28% !important; }
  .result-layout { --bs-gutter-x: 4mm; }
  .result-layout .app-card { padding: 3mm !important; }
  .result-text { font-size: 9.5pt; line-height: 1.5; }
  .result-layout h2 { font-size: 11pt; margin-bottom: 2mm !important; }
  .result-layout .badge { display: none; }
}

.progress-bar { background: var(--st-primary); }
.preview-window { max-height: 58vh; overflow: auto; background: #fbfdfd; border: 1px solid var(--st-border); border-radius: .9rem; padding: 1.25rem; }

/* Kompakte Auswertung */
.print-only { display: none; }
.result-toolbar { max-width: 1500px; margin-inline: auto; }
.compact-data-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  font-size: .9rem;
  border: 1px solid #9eaaae;
}
.compact-data-table th,
.compact-data-table td {
  border: 1px solid #c4cdd0;
  padding: .38rem .55rem;
  vertical-align: top;
}
.compact-data-table th {
  background: #edf3f4;
  font-weight: 700;
  text-align: left;
}
.compact-data-table .number { text-align: right; font-variant-numeric: tabular-nums; }
.result-summary { table-layout: fixed; text-align: center; }
.result-summary th { text-align: center; font-size: .78rem; text-transform: uppercase; letter-spacing: .025em; }
.result-summary td { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.result-text-card { border-radius: .55rem; }
.section-caption { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; font-weight: 700; margin-bottom: 2mm; }

@media print {
  @page { size: A4 portrait; margin: 7mm 8mm; }
  .print-only { display: block !important; }
  .compact-print-title {
    margin: 0 0 2.5mm;
    padding: 0 0 1.5mm;
    border-bottom: 1px solid #444;
    font: 8.5pt/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }
  .result-toolbar { display: none !important; }
  .result-summary { margin-bottom: 2.5mm !important; }
  .compact-data-table { font-size: 7.8pt; border-color: #444; }
  .compact-data-table th,
  .compact-data-table td { padding: 1.1mm 1.5mm; border-color: #777; }
  .compact-data-table th { background: #eee !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .result-summary td { font-size: 9.5pt; }
  .result-layout { --bs-gutter-x: 3mm; display: flex !important; flex-wrap: nowrap !important; }
  .result-layout > .col-xl-9 { width: 76% !important; flex: 0 0 76% !important; }
  .result-layout > .col-xl-3 { width: 24% !important; flex: 0 0 24% !important; }
  .result-text-card { padding: 2mm !important; border: 1px solid #777 !important; border-radius: 0 !important; }
  .result-text { font-size: 8.6pt; line-height: 1.38; }
  .section-caption { font-size: 8pt; }
  .error-char, .error-extra, .error-missing, .error-number {
    color: #c1121f !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Version 1.3 */
:root { --trainer-font-size: 1.12rem; }
.writing-page .trainer-text { font-size: var(--trainer-font-size); }
.font-controls { display:flex; align-items:center; gap:.25rem; }
.normalization-change { background:#fff1a8; color:inherit; padding:0 .04em; border-radius:.15rem; }
.normalization-preview mark { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
.ascii-print-head { font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; white-space:normal; }

/* Bildschirm-Auswertung wieder als Kartenansicht wie 1.2.0 */
.result-metrics .app-card { height:100%; }
.result-layout .table > :not(caption) > * > * { padding:.55rem .15rem; }
.result-layout .table tr:last-child td { border-bottom:0; }

@media print {
  @page { size:A4 portrait; margin:6mm 8mm; }
  .ascii-print-head { display:block !important; margin:0 0 2mm; padding:1.2mm 0; border-top:1px solid #222; border-bottom:1px solid #222; font-size:7.8pt; line-height:1.35; }
  .result-metrics { display:table !important; width:100%; table-layout:fixed; margin:0 0 2mm !important; border-collapse:collapse; }
  .result-metrics > div { display:table-cell !important; width:20% !important; padding:0 !important; }
  .result-metrics .app-card { border:1px solid #777 !important; border-radius:0 !important; padding:1mm 1.4mm !important; box-shadow:none !important; }
  .result-metrics .metric-label { font-size:6.5pt; }
  .result-metrics .h3 { font-size:9pt; }
  .result-layout { display:flex !important; flex-wrap:nowrap !important; --bs-gutter-x:2mm; }
  .result-layout > .col-xl-8 { width:74% !important; flex:0 0 74% !important; }
  .result-layout > .col-xl-4 { width:26% !important; flex:0 0 26% !important; }
  .result-layout .app-card { padding:2mm !important; border:1px solid #777 !important; border-radius:0 !important; box-shadow:none !important; margin-bottom:2mm !important; }
  .result-layout h2 { font-size:8pt; margin-bottom:1mm !important; }
  .result-layout .table { font:6.8pt/1.15 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace; margin:0; }
  .result-layout .table td { padding:.6mm .3mm; }
  .result-text { font-size:8.3pt; line-height:1.35; }
  .result-layout .badge { display:none !important; }
}

.unfinished-word{background:#fff3cd;border-bottom:2px dotted #b58105;padding:0 .08em;}

/* Version 1.3.6: eigene Korrekturlogik und kompakte Druckanordnung */
.error-transposition {
  color: #b00020;
  background: #ffd9de;
  font-weight: 800;
  text-decoration-line: underline;
  text-decoration-style: double;
  text-decoration-color: #b00020;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  border-radius: .15rem;
  padding-inline: .04rem;
}
.print-student-line,
.print-details-row { display: none; }

@media print {
  .ascii-print-head { margin-bottom: 1.2mm !important; }
  .print-head-main { display: flex; justify-content: space-between; gap: 8mm; }
  .print-student-line {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #555;
    border-bottom: 0;
    padding: 1.2mm 1.6mm;
    font: 8pt/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }
  .result-metrics { margin-bottom: 2mm !important; }
  .result-layout { display: block !important; }
  .result-layout > .result-text-column { width: 100% !important; max-width: none !important; flex: 0 0 100% !important; padding: 0 !important; }
  .screen-result-details { display: none !important; }
  .result-text-card { min-height: 0 !important; margin: 0 0 2mm !important; }
  .print-details-row {
    display: grid !important;
    grid-template-columns: 25% 1fr;
    gap: 3mm;
    align-items: start;
    break-inside: avoid;
  }
  .print-details-row section {
    padding: 1.5mm 2mm;
  }
  .print-details-row .print-settings {
    border: 0;
    background: transparent !important;
    padding-left: 0;
  }
  .print-details-row .print-errors {
    border: 1px solid #777;
  }
  .print-details-row h2 {
    margin: 0 0 1mm;
    font: 700 8pt/1.2 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }
  .print-error-columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4mm;
  }
  .print-details-row .table {
    margin: 0;
    width: 100%;
    font: 6.8pt/1.15 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  }
  .print-details-row .table td { padding: .45mm .3mm; vertical-align: top; }
  .print-details-row .table td:first-child { padding-right: 1.5mm; }
  .print-details-row small { font-size: 85%; }
  .error-transposition {
    color: #b00020 !important;
    background: #ffd9de !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}


/* Version 1.3.8: Wort- und satzweise Wiederanknuepfung ohne Kettenfehler */
.error-omitted-word,
.error-omitted-sentence {
  color: #b00020;
  background: #ffe1e5;
  font-weight: 800;
  border-bottom: 2px dashed #b00020;
  border-radius: .15rem;
  padding-inline: .12rem;
}
.error-additional-word,
.error-additional-sentence {
  color: #8a1c00;
  background: #ffe7d6;
  font-weight: 800;
  text-decoration: line-through 2px;
  border-radius: .15rem;
  padding-inline: .08rem;
}
@media print {
  .error-omitted-word, .error-additional-word,
.error-additional-sentence {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* Version 1.5.2: mehrstufiges Startfenster */
.wizard-progress { display:grid; grid-template-columns:repeat(4,1fr); gap:.75rem; }
.wizard-step-indicator { position:relative; display:flex; align-items:center; gap:.6rem; color:var(--bs-secondary-color); font-weight:700; }
.wizard-step-indicator::after { content:""; position:absolute; left:2.2rem; right:-.4rem; top:1rem; height:2px; background:var(--bs-border-color); z-index:0; }
.wizard-step-indicator:last-child::after { display:none; }
.wizard-step-indicator span { width:2rem; height:2rem; border-radius:50%; display:grid; place-items:center; border:2px solid var(--bs-border-color); background:var(--bs-body-bg); position:relative; z-index:1; }
.wizard-step-indicator small { position:relative; z-index:1; background:var(--bs-body-bg); padding-right:.4rem; }
.wizard-step-indicator.active { color:var(--st-primary); }
.wizard-step-indicator.active span { border-color:var(--st-primary); box-shadow:0 0 0 .2rem color-mix(in srgb, var(--st-primary) 12%, transparent); }
.wizard-step-indicator.done span { color:#fff; border-color:var(--st-primary); background:var(--st-primary); }
.wizard-step-indicator.done::after { background:var(--st-primary); }
.mode-choice-grid .btn { min-height:11rem; }
@media (max-width: 575.98px) { .wizard-step-indicator { display:block; text-align:center; font-size:.75rem; } .wizard-step-indicator span { margin:0 auto .35rem; } .wizard-step-indicator::after { left:58%; right:-42%; } .wizard-step-indicator small { padding:0; } }


/* Version 1.5.4 */
:root { --st-primary-light: color-mix(in srgb, var(--st-primary) 11%, transparent); }
.wizard-step-indicator { color: var(--st-primary-dark); }
.wizard-step-indicator span { border-color: var(--st-primary); color: var(--st-primary-dark); }
.wizard-step-indicator.active span, .wizard-step-indicator.done span { background: var(--st-primary); border-color: var(--st-primary); color:#fff; }
.mode-choice { background: var(--st-primary); border-color: var(--st-primary); color:#fff; }
.mode-choice:hover { background: var(--st-primary-dark); border-color: var(--st-primary-dark); color:#fff; }
.btn-check:checked + .mode-choice { background: var(--st-primary-dark); border-color: var(--st-primary-dark); color:#fff; box-shadow:0 0 0 .25rem color-mix(in srgb, var(--st-primary) 20%, transparent); }
.form-switch .form-check-input:checked { background-color: var(--st-primary); border-color: var(--st-primary); }
.alert-primary-light { background: var(--st-primary-light); border-color: color-mix(in srgb, var(--st-primary) 25%, transparent); color: var(--st-primary-dark); }
.setting-option { border:1px solid var(--st-border); border-radius:.9rem; padding:1rem; background:#fbfdfd; }


/* Version 1.5.5 */
.mode-choice:hover, .mode-choice:focus-visible { background: var(--st-primary-dark) !important; border-color: var(--st-primary-dark) !important; color:#fff !important; }
.enter-marker { color:var(--st-primary); font-weight:800; user-select:none; -webkit-user-select:none; }
.enter-marker.current { color:#111; }
.download-example-box { padding:1rem; border:1px solid var(--st-border); border-radius:.9rem; background:var(--st-primary-light); }

/* Version 1.5.6 */
.app-navbar { z-index: 1030; }
.landing-hero .display-4 { letter-spacing: -.04em; }
.landing-keyboard { width: 5rem; height: 5rem; display:grid; place-items:center; border-radius:1.4rem; background:rgba(255,255,255,.16); font-size:2.5rem; }
.enter-marker { color: var(--st-primary); font-weight: 800; opacity: .9; }
.mode-choice:hover, .mode-choice:focus-visible { background: var(--st-primary-dark) !important; border-color: var(--st-primary-dark) !important; color:#fff !important; }


/* Version 1.5.7 */
.btn-outline-primary {
  --bs-btn-color: var(--st-primary);
  --bs-btn-border-color: var(--st-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--st-primary-dark);
  --bs-btn-hover-border-color: var(--st-primary-dark);
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--st-primary-dark);
  --bs-btn-active-border-color: var(--st-primary-dark);
}
.btn-primary-light {
  color: var(--st-primary-dark);
  background: var(--st-primary-light);
  border: 1px solid color-mix(in srgb, var(--st-primary) 34%, transparent);
}
.btn-primary-light:hover, .btn-primary-light:focus-visible {
  color: #fff;
  background: var(--st-primary-dark);
  border-color: var(--st-primary-dark);
}
.txt-rule-example {
  white-space: pre-wrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
  background: #f7fbfb;
  border: 1px solid var(--st-border);
  border-radius: .75rem;
  padding: 1rem;
}

/* Version 1.5.8: kompakte Icon-Navigation mit Bootstrap-Tooltips */

/* Sichtbare Steuerzeichen in der Korrektur */
.correction-enter,
.correction-tab {
  display: inline-block;
  min-width: 1.05em;
  font-weight: 800;
  color: var(--st-primary);
  user-select: none;
}
.error-extra .correction-enter,
.error-char .correction-enter {
  color: #dc3545;
  background: rgba(220,53,69,.14);
  border-radius: .2rem;
  text-decoration: underline double #dc3545 2px;
  text-underline-offset: 2px;
}

/* Version 1.6.0: Zeitzuschlag */
.time-bonus-input { width: 8.5rem; }
.easytast-range { accent-color: var(--st-primary); }
.easytast-range::-webkit-slider-thumb { background: var(--st-primary); }
.easytast-range::-moz-range-thumb { background: var(--st-primary); border-color: var(--st-primary); }
@media (max-width: 575.98px) { .wizard-progress { grid-template-columns: repeat(2,1fr); } }

/* Admin navigation, introduced in easyTAST 2.1 */
.admin-side-nav .nav-link{display:block;border-radius:.75rem;padding:.85rem 1rem;color:var(--bs-body-color);font-weight:600}
.admin-side-nav .nav-link:hover{background:rgba(var(--bs-primary-rgb),.08);color:var(--bs-primary)}
.admin-side-nav .nav-link.active{background:var(--bs-primary);color:#fff}


/* Tastonaut Multi-Tenant MT2: konsistentes Branding und optimiertes Frontend */
a { color: var(--st-primary); }
a:hover, a:focus { color: var(--st-primary-dark); }
.app-navbar { background: linear-gradient(120deg, var(--st-primary), var(--st-primary-light-solid)); }
.hero-accent { background: linear-gradient(145deg, var(--st-primary), var(--st-primary-light-solid)); }
.icon-tile, .badge-soft { background: color-mix(in srgb, var(--st-primary) 11%, transparent); }
.icon-tile { color: var(--st-primary); }
.badge-soft { color: color-mix(in srgb, var(--st-primary) 76%, #000); }
.btn-primary {
  --bs-btn-bg: var(--st-primary);
  --bs-btn-border-color: var(--st-primary);
  --bs-btn-hover-bg: color-mix(in srgb, var(--st-primary) 78%, #000);
  --bs-btn-hover-border-color: color-mix(in srgb, var(--st-primary) 78%, #000);
  --bs-btn-active-bg: color-mix(in srgb, var(--st-primary) 70%, #000);
  --bs-btn-active-border-color: color-mix(in srgb, var(--st-primary) 70%, #000);
}
.btn-outline-primary {
  --bs-btn-color: var(--st-primary);
  --bs-btn-border-color: var(--st-primary);
  --bs-btn-hover-bg: var(--st-primary);
  --bs-btn-hover-border-color: var(--st-primary);
  --bs-btn-active-bg: var(--st-primary);
  --bs-btn-active-border-color: var(--st-primary);
}
.form-control:focus, .form-select:focus { border-color: var(--st-primary); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--st-primary) 16%, transparent); }
.form-switch .form-check-input:checked, .form-check-input:checked { background-color: var(--st-primary); border-color: var(--st-primary); }
.progress-bar { background-color: var(--st-primary); }
.public-nav .nav-link { color: rgba(255,255,255,.86); font-weight: 600; }
.public-nav .nav-link:hover, .public-nav .nav-link:focus { color:#fff; background:rgba(255,255,255,.12); }
.public-mobile-nav a { text-decoration:none; color:var(--st-text); font-weight:700; padding:.9rem 1rem; border-radius:.8rem; border:1px solid var(--st-border); background:#fff; }
.public-mobile-nav a:hover { color:var(--st-primary); border-color:var(--st-primary); background:color-mix(in srgb,var(--st-primary) 6%,#fff); }
.demo-text-panel, .participant-panel, .prepared-settings-panel { border:1px solid var(--st-border); border-radius:1rem; background:#fbfdfd; }
.demo-text-panel { padding:1.25rem; }
.prepared-code-icon { width:4rem; height:4rem; border-radius:1.15rem; display:grid; place-items:center; background:color-mix(in srgb,var(--st-primary) 12%,transparent); color:var(--st-primary); font-size:2rem; }
.code-box { width:clamp(3.6rem,12vw,5rem); height:clamp(4rem,13vw,5.6rem); font-size:clamp(1.8rem,5vw,2.5rem); font-weight:800; border-radius:1rem; border:2px solid var(--st-border); }
.code-box:focus { border-color:var(--st-primary); }
.letter-spacing-code { letter-spacing:.18em; color:var(--st-primary); }
.prepared-success { border-color:color-mix(in srgb,var(--st-primary) 35%,var(--st-border)); }
@media (max-width: 991.98px) { .landing-hero .hero-accent, .prepared-hero .hero-accent { min-height:14rem; } }

/* Tastonaut MT3 */
.public-nav-icons .nav-icon-link{width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;border-radius:12px;font-size:1.2rem;color:#fff;text-decoration:none}
.public-nav-icons .nav-icon-link:hover{background:rgba(255,255,255,.14);color:#fff}
.prepared-success .letter-spacing-code{font-size:clamp(4.5rem,14vw,9rem);letter-spacing:.18em;line-height:1;font-variant-numeric:tabular-nums;color:var(--st-primary);text-shadow:0 2px 0 rgba(0,0,0,.04)}
@media (max-width:575.98px){.prepared-success .letter-spacing-code{font-size:3.6rem;letter-spacing:.1em}}

/* MT4.1: saubere, symmetrische Tenant-Kennung in der Navigation */
.tenant-brand-school {
  align-items: baseline;
  gap: .5rem;
  margin-left: .15rem;
  white-space: nowrap;
}
.tenant-brand-separator {
  opacity: .65;
  line-height: 1;
}


/* MT4.2: Tenant-Branding durchgaengig */
.text-primary { color: var(--st-primary) !important; }
.bg-primary { background-color: var(--st-primary) !important; }
.border-primary { border-color: var(--st-primary) !important; }
.link-primary { color: var(--st-primary) !important; }
.link-primary:hover, .link-primary:focus { color: var(--st-primary-dark) !important; }
.dropdown-item.active, .dropdown-item:active { background-color: var(--st-primary); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--st-primary); }
.pagination { --bs-pagination-active-bg: var(--st-primary); --bs-pagination-active-border-color: var(--st-primary); --bs-pagination-color: var(--st-primary); --bs-pagination-hover-color: var(--st-primary-dark); }
.form-range { accent-color: var(--st-primary); }
.form-range::-webkit-slider-thumb { background: var(--st-primary); }
.form-range::-moz-range-thumb { background: var(--st-primary); border-color: var(--st-primary); }
.form-check-input:focus { border-color: var(--st-primary); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--st-primary) 18%, transparent); }
.hero-accent .badge-soft { background: color-mix(in srgb, #fff 18%, transparent); color: #fff; }
.prepared-success { border-color: color-mix(in srgb, var(--st-accent) 42%, var(--st-border)); }


/* MT4.2 Hotfix: Noten- und Druckdarstellung */
.grade-number { color: var(--st-primary) !important; font-weight: 800; }
.grade-explanation { margin-top: -.35rem; line-height: 1.35; }
.print-license-notice { margin: 0 0 3mm; padding: 1.5mm 2mm; border: 1px solid #bbb; font-size: 8.5pt; }
@media print {
  .result-metrics { display: flex !important; flex-wrap: nowrap !important; }
  .result-metrics > div { width: auto !important; flex: 1 1 0 !important; min-width: 0 !important; }
  .result-metrics .h3 { font-size: 11pt; }
  .result-metrics .metric-label { font-size: 6.8pt; }
  .grade-explanation { font-size: 8pt !important; margin-bottom: 3mm !important; }
}

/* MT4.3: Notenfarben nach Endnote */
.grade-number.grade-good { color: var(--bs-success, #198754) !important; }
.grade-number.grade-bad { color: var(--bs-danger, #dc3545) !important; }
.grade-number.grade-neutral { color: var(--st-primary) !important; }
@media print {
  .grade-number.grade-good { color: #198754 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .grade-number.grade-bad { color: #dc3545 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
}

/* MT4.4: Endnoten eindeutig und branding-unabhängig */
.grade-metric .metric-label{font-weight:700}
.grade-metric.grade-good{border-color:#198754 !important;background:color-mix(in srgb,#198754 7%,#fff) !important}
.grade-metric.grade-bad{border-color:#dc3545 !important;background:color-mix(in srgb,#dc3545 7%,#fff) !important}
.grade-metric.grade-neutral{border-color:var(--st-border) !important;background:#fff !important}
.grade-metric.grade-good .grade-number,.grade-number.grade-good{color:#198754 !important}
.grade-metric.grade-bad .grade-number,.grade-number.grade-bad{color:#dc3545 !important}
.grade-metric.grade-neutral .grade-number,.grade-number.grade-neutral{color:#495057 !important}
.grade-explanation strong{color:#495057}
.print-license-notice{margin:4mm 0 0;padding-top:2mm;border:0;border-top:1px solid #bbb;text-align:center;color:#666;font-size:8pt}
@media print{
  .grade-metric.grade-good .grade-number,.grade-number.grade-good{color:#198754 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .grade-metric.grade-bad .grade-number,.grade-number.grade-bad{color:#dc3545 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .grade-metric.grade-neutral .grade-number,.grade-number.grade-neutral{color:#495057 !important}
  .grade-metric{background:#fff !important}
}


/* MT4.5: Endnote eindeutig, rechts und branding-unabhaengig */
.grade-metric{border-width:2px !important;text-align:center !important}
.grade-metric .metric-label{font-weight:800 !important;letter-spacing:.02em}
.grade-metric .grade-value{font-size:2.15rem;line-height:1;font-weight:900 !important;margin-top:.2rem}
.grade-metric.grade-good{border-color:#198754 !important;background:#eef8f2 !important}
.grade-metric.grade-good .metric-label,.grade-metric.grade-good .grade-value{color:#146c43 !important}
.grade-metric.grade-bad{border-color:#dc3545 !important;background:#fff1f2 !important}
.grade-metric.grade-bad .metric-label,.grade-metric.grade-bad .grade-value{color:#b02a37 !important}
.grade-metric.grade-neutral{border-color:#6c757d !important;background:#f8f9fa !important}
.grade-metric.grade-neutral .metric-label,.grade-metric.grade-neutral .grade-value{color:#343a40 !important}
.grade-explanation{font-size:.79rem !important;line-height:1.35;color:#6c757d;margin-top:0;padding:.45rem .65rem;border-left:3px solid #ced4da;background:#f8f9fa;border-radius:.25rem}
.grade-explanation-label{font-weight:700;color:#495057}
.print-license-notice{margin:4mm 0 0 !important;padding-top:2mm !important;border:0 !important;border-top:1px solid #bbb !important;text-align:center !important;color:#666 !important;font-size:8pt !important}
@media print{
  .grade-metric{background:#fff !important;text-align:center !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .grade-metric.grade-good{border-color:#198754 !important}
  .grade-metric.grade-good .metric-label,.grade-metric.grade-good .grade-value{color:#146c43 !important}
  .grade-metric.grade-bad{border-color:#dc3545 !important}
  .grade-metric.grade-bad .metric-label,.grade-metric.grade-bad .grade-value{color:#b02a37 !important}
  .grade-metric.grade-neutral{border-color:#6c757d !important}
  .grade-metric.grade-neutral .metric-label,.grade-metric.grade-neutral .grade-value{color:#343a40 !important}
  .grade-metric .grade-value{font-size:13pt !important}
  .grade-explanation{font-size:7.5pt !important;padding:1mm 1.5mm !important;margin:0 0 2.5mm !important;background:#fff !important;border-left:1.5pt solid #aaa !important}
}