/*
 * Neue Testinfoseite (/details/{slug}, Status published oder Vorschau),
 * resources/views/test_directory/entry/. Entstanden aus den Musterseiten unter
 * design_overview, die am 2026-10-15 entfernt wurden.
 */

/* ── Seitenrahmen: größere Abstände (Änderung 2) ──────────── */
.tiorig-page.test_details_outer {
    gap: var(--sp-xx);
}

/* Gedämpftes Plattform-Blau (45 % Deckkraft) für den Rahmen ums Kürzel */
.tiorig-page {
    --tinfo-akzent: #4279bc73;
}

.tihead {
    display: flex;
    flex-direction: column;
}

/* Zurück-Knopf mit größerem Abstand zu den Titeln (Änderung 5), Titel zu Knöpfen wie bisher */
.tihead__back {
    margin-bottom: var(--sp-xxx);
}

.tihead__titles {
    margin-bottom: var(--sp-m);
}

.tihead .test-preview-actions {
    margin-top: 0;
}

/* ── Testvorschau bei zwei Fassungen: geteilter Knopf ──────
   Drei aneinanderstoßende Felder, jedes mit eigenem Rahmen in der Optik
   von .continue_btn_arrow (weiß, grauer Rahmen, 8 px Rundung an den
   Außenecken): Name der Vorschau, dann je Fassung ein Link mit Symbol der
   Fassung und rundem Play-Feld rechts. Die Felder überlappen sich um 1 px,
   damit zwischen ihnen nur eine Linie steht. Der Hover entspricht dem des
   einzelnen Knopfs ohne die Verschiebung auf der X-Achse und gilt nur für
   das überfahrene Feld; es liegt dabei über den Nachbarn (z-index). Das
   Namensfeld ist kein Link und reagiert nicht. */
.tihead-split {
    display: inline-flex;
    align-items: stretch;
    min-height: 50px;
}

.tihead-split__name,
.tihead-split__opt {
    box-sizing: border-box;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.tihead-split__name {
    display: inline-flex;
    align-items: center;
    padding: 10px 16px;
    background-color: #f8f9fa;
    border-radius: 8px 0 0 8px;
}

.tihead-split__opt {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    margin-left: -1px;
    font-size: var(--text-size-100);
    font-weight: 500;
    color: #4279bc;
    text-decoration: none;
}

.tihead-split__opt:last-of-type {
    border-radius: 0 8px 8px 0;
}

.tihead-split__opt svg {
    width: 18px;
    height: 18px;
}

.tihead-split__opt .arrow_arrow {
    margin-left: 2px;
}

.tihead-split__opt:hover {
    z-index: 1;
    background-color: #f8f9fa;
    border-color: #4279bc;
    box-shadow: 0 4px 8px rgba(66, 121, 188, 0.15);
    cursor: pointer;
}

/* Handy: Name über den beiden Fassungsfeldern */
@media (max-width: 40rem) {
    .tihead .test-preview-actions > .continue_btn_arrow,
    .tihead .test-preview-actions > .tihead-split {
        width: 100%;
    }

    .tihead-split {
        flex-wrap: wrap;
    }

    .tihead-split__name {
        flex: 1 0 100%;
        border-radius: 8px 8px 0 0;
    }

    .tihead-split__opt {
        flex: 1;
        justify-content: center;
        margin-top: -1px;
    }

    .tihead-split__opt:first-of-type {
        margin-left: 0;
        border-radius: 0 0 0 8px;
    }

    .tihead-split__opt:last-of-type {
        border-radius: 0 0 8px 0;
    }
}

/* ── Titel (Änderung 1) ───────────────────────────────────── */
.tihead-title {
    font-family: 'Roboto', sans-serif;
    font-size: var(--text-size-600);
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

/* Dunkles Blau wie das Kürzel (Änderung 11) */
.tihead-initial {
    color: #163C6B;
    font-weight: 700;
}

/* ── Abschnitte als Accordion (Änderung 3) ─────────────────
   Kopie von .xrev-secn aus public/css/extraction/extraction-review.css,
   ohne Rahmen und Kartenfläche. Progressive Enhancement wie dort:
   ohne Skript bleibt der Chevron aus und der Inhalt offen. */
.tisec-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xl);
}

/* Der Seitenabstand (--sp-xx) plus dieser Rest ergibt über dem ersten Abschnitt ebenfalls --sp-xl. */
.tiorig-page .tisec-list {
    margin-top: calc(var(--sp-xl) - var(--sp-xx));
}

.tisec__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-s);
    margin-bottom: var(--sp-mm);
}

.tisec__head-main {
    display: flex;
    align-items: center;
    gap: var(--sp-s);
    min-width: 0;
}

.tisec__title {
    margin: 0;
    font-family: 'Roboto', sans-serif;
    font-weight: 600;
    font-size: var(--text-size-500);
    line-height: 1.25;
    position: relative;
    display: inline-block;
}

.tisec__title::after {
    content: "";
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 48px;
    height: 3px;
    border-radius: 2px;
    background: #4279BC;
}

.tisec__chevron {
    display: none;
    align-items: center;
    justify-content: center;
    flex: none;
    color: #6b7178;
    transition: transform 0.3s ease;
    transform: rotate(90deg);
}

.tisec__chevron svg {
    width: 25px;
    height: 25px;
    stroke-width: 2;
}

/* Inhalt beginnt auf Höhe des Titeltexts (Änderung 6): Pfeilbreite plus Abstand im Kopf.
   Nur im Accordion-Zustand; ohne Skript fehlt der Pfeil und der Titel steht links. */
.tisec {
    --tisec-indent: calc(25px + var(--sp-s));
}

.tisec.is-accordion .tisec__collapse > .tisec__body {
    padding-left: var(--tisec-indent);
}

.tisec__collapse {
    display: block;
}

.tisec.is-accordion .tisec__chevron {
    display: inline-flex;
}

.tisec.is-accordion .tisec__head {
    cursor: pointer;
    margin-bottom: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.tisec.is-accordion .tisec__head:focus-visible {
    outline: 2px solid #4279BC;
    outline-offset: 3px;
    border-radius: 6px;
}

.tisec.is-accordion .tisec__collapse {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.32s ease;
}

.tisec.is-accordion .tisec__collapse > .tisec__body {
    overflow: hidden;
    min-height: 0;
    box-sizing: border-box;
    padding-top: var(--sp-mm);
}

.tisec.is-accordion.is-collapsed .tisec__chevron {
    transform: rotate(0deg);
}

.tisec.is-accordion.is-collapsed .tisec__collapse {
    grid-template-rows: 0fr;
}

@media (prefers-reduced-motion: reduce) {
    .tisec.is-accordion .tisec__collapse,
    .tisec__chevron {
        transition: none;
    }
}

/* Unterabschnitte in "Dateien" (bisher h5) */
.tisec-files {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
    max-width: 500px;
}

.tisec-subtitle {
    font-size: var(--text-size-200);
    font-weight: 600;
    margin: 0;
}

.tisec-placeholder {
    color: grey;
    font-size: var(--text-size-95);
}

/* Unterabschnitte mit h3 (Änderungen 24 und 26: Testkonzept, Gütekriterien).
   Überschrift fett im dunklen Blau in --text-size-300, --sp-xx zwischen den
   Unterabschnitten. Über der ersten Überschrift ergibt --sp-m zusammen mit
   dem Innenabstand des Abschnitts (--sp-mm) ebenfalls --sp-xx. */
.tisec-subs {
    display: flex;
    flex-direction: column;
    gap: var(--sp-xx);
}

.tisec-sub {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
    max-width: 75ch;
}

.tisec-sub:first-child {
    margin-top: var(--sp-m);
}

.tisec-sub .tisec-subtitle {
    font-size: var(--text-size-300);
    font-weight: 700;
    line-height: 1.3;
    color: #163C6B;
}

/* Dateien (Änderung 27): Die Hüllen der Überschriften bringen eigene
   Abstände mit (1_accordion.css); hier gelten die der Unterabschnitte. */
.tisec-sub > .manual_header_container,
.tisec-sub > .link_header_container {
    margin: 0;
    padding: 0;
}

.tisec-text {
    line-height: 1.6;
    max-width: 75ch;
}

/* ── Kürzel mit zwei Strichen (Änderungen 12 bis 15) ────────
   Zwei feststehende Striche in gedämpftem Blau (--tinfo-akzent), je 20px
   lang und 2px stark, direkt an den Buchstaben: oben über dem
   Anfangsbuchstaben, bündig links; unten unter dem Endbuchstaben, bündig
   rechts. --tb-gap ist der Abstand Strich zu Buchstabe.
   Wo der Browser text-box kann, wird der Kasten auf Oberkante der
   Großbuchstaben und Grundlinie beschnitten; die Striche sitzen dann
   schriftunabhängig genau --tb-gap daneben. Sonst gelten Werte, die an
   der tatsächlich verwendeten Schrift gemessen sind: system-ui (Segoe UI),
   weil testdisplay/1_breadcrumbs.css die Schrift global zurücksetzt;
   bei line-height 1.15 liegt die Oberkante der Großbuchstaben bei 0.23em,
   die Grundlinie bei 0.99em unter der Zeilenoberkante. */
.tihead-short {
    --tb-cap: 0.23em;
    --tb-base: 0.99em;
    --tb-gap: 7px;
    position: relative;
    display: inline-block;
    font-size: var(--text-size-400);
    font-weight: 700;
    line-height: 1.15;
    color: #163C6B;
    margin-bottom: var(--sp-xs);
}

.tihead-short::before,
.tihead-short::after {
    content: "";
    position: absolute;
    width: 20px;
    height: 2px;
    background-color: var(--tinfo-akzent, #4279bc73);
}

.tihead-short::before {
    left: 0;
    top: calc(var(--tb-cap) - var(--tb-gap) - 2px);
}

.tihead-short::after {
    right: 0;
    top: calc(var(--tb-base) + var(--tb-gap));
}

/* Beschnitt auf Großbuchstaben und Grundlinie; die Außenabstände halten
   Platz für die Striche frei, die dann außerhalb des Kastens liegen. */
@supports (text-box: trim-both cap alphabetic) {
    .tihead-short {
        text-box: trim-both cap alphabetic;
        margin-top: calc(var(--tb-gap) + 2px);
        margin-bottom: calc(var(--sp-xs) + var(--tb-gap) + 2px);
    }

    .tihead-short::before {
        top: calc(-1 * (var(--tb-gap) + 2px));
    }

    .tihead-short::after {
        top: calc(100% + var(--tb-gap));
    }
}

/* ── Detailkarte als Überblick (Änderungen 16 bis 19) ──────
   Eine Liste untereinander: je Zeile links die Beschriftung, rechts der
   Wert; schmal steht die Beschriftung über dem Wert. Lange Werte (etwa
   zehn Sprachen) brechen nur innerhalb ihrer Zeile um.
   Einzelwerte sind Text, Listen sind Chips (Themen, Sprachen), Verweise
   sind Kacheln mit Pfeil (verwandte Verfahren).
   Punktlinie (Änderung 19): Eine gepunktete Linie füllt den Rest der
   Beschriftungsspalte und führt zum Wert, wie in einem
   Inhaltsverzeichnis; keine Trennstriche zwischen den Zeilen. Auf dem
   Handy entfällt die Linie. */
.tiover-list {
    display: flex;
    flex-direction: column;
}

/* Durchführung (Änderungen 20 und 21): Digital und Papier oben rechts,
   zur Hälfte über den oberen Kartenrand. Jede Pille mit Symbol für die
   Form (Laptop, Blatt) und einem runden Abzeichen an der Ecke:
   verfügbar = blaue Pille, blaues Abzeichen mit Häkchen; nicht
   verfügbar = graue Pille, graues Abzeichen mit Kreuz. Verfügbar sieht
   immer blau aus, auch bei Papier (paper_table_d wäre grau und kaum von
   "nicht verfügbar" zu unterscheiden). */
.tiover-card {
    position: relative;
    max-width: 1100px;
    margin-top: var(--sp-x);
}

.tiover-modes {
    position: absolute;
    top: 0;
    right: 2rem;
    display: flex;
    gap: calc(var(--sp-xs) + 6px);
    list-style: none;
    transform: translateY(-50%);
}

/* Deckende Hintergründe: Die Pillen liegen halb auf der Seite, halb auf
   der Karte; ein durchscheinender Hintergrund zeigte die Kartenkante.
   #f4f7fb entspricht digital_table_d (#4279bc0f) auf Weiß. */
.tiover-mode {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    background-color: #fff;
}

.tiover-mode.is-on {
    background-color: #f4f7fb;
}

/* Ausgegraut über Farbe statt Deckkraft, aus demselben Grund. */
.tiover-mode.is-off {
    color: #b3b3b3;
    border: 1px solid #e6e6e6;
    box-shadow: none;
}

.tiover-mode__ico {
    display: inline-flex;
}

.tiover-mode__ico svg {
    width: 18px;
    height: 18px;
}

.tiover-mode__badge {
    position: absolute;
    top: -6px;
    right: -6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: #4279bc;
    color: #fff;
}

.tiover-mode.is-off .tiover-mode__badge {
    background-color: #c4c4c4;
}

.tiover-mode__badge svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.5;
}

.tiover-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.tiover-row {
    display: grid;
    grid-template-columns: 15rem minmax(0, 1fr);
    gap: var(--sp-xs) var(--sp-s);
    align-items: start;
    padding: var(--sp-m) 0;
}

.tiover-row:first-child {
    padding-top: 0;
}

.tiover-row:last-child {
    padding-bottom: 0;
}

@media (max-width: 40rem) {
    .tiover-row {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Beschriftung, Text und Chips haben dieselbe Zeilenhöhe (26.7px), damit
   alles in einer Zeile auf derselben Linie steht. */
.tiover-label {
    --tiover-dots-shift: 0.15em;
    display: flex;
    align-items: center;
    font-size: var(--text-size-100);
    line-height: 1.67;
    color: gray;
}

/* align-items: center legt die Linie in die Mitte der Zeile;
   --tiover-dots-shift schiebt sie von dort auf halbe Höhe der
   Kleinbuchstaben: gemessen an system-ui 16px liegt diese 2.5px unter
   der Zeilenmitte, 0.15em wächst mit der Schrift. Weil Chips genauso
   hoch sind wie die Zeile, trifft die Linie auch deren Mitte. */
.tiover-label::after {
    content: "";
    flex: 1;
    min-width: var(--sp-m);
    margin-left: var(--sp-s);
    border-bottom: 2px dotted #b8c9e0;
    transform: translateY(var(--tiover-dots-shift));
}

@media (max-width: 40rem) {
    .tiover-label::after {
        display: none;
    }
}

.tiover-text {
    font-size: var(--text-size-100);
    line-height: 1.67;
    color: hsl(230, 7%, 23%);
}

.tiover-text--strong {
    font-weight: 600;
    color: #163C6B;
}

.tiover-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-xs);
    list-style: none;
}

/* Chips und Kacheln gleich hoch: gleiche Zeilenhöhe, die Kachel hat 1px
   weniger Innenabstand als der Chip, dafür 1px Rahmen. */
.tiover-tags > li {
    display: flex;
}

.tiover-tags .static_chip_pill,
.tiover-tile {
    line-height: 1.4;
}

/* Kachel für ein verwandtes Verfahren: wie ein Chip gebaut, aber mit
   Rahmen und Pfeil, weil sie verlinkt. */
.tiover-tile {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 6px 3px 8px;
    border: 1px solid #c6d9f1;
    border-radius: 4px;
    background-color: #fff;
    color: #163C6B;
    font-size: var(--text-size-90);
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.tiover-tile svg {
    width: 14px;
    height: 14px;
    color: #4279bc;
    transition: transform 0.15s ease;
}

.tiover-tile:hover,
.tiover-tile:focus-visible {
    background-color: #4279bc0f;
    border-color: #4279bc;
}

.tiover-tile:hover svg,
.tiover-tile:focus-visible svg {
    transform: translateX(2px);
}

@media (prefers-reduced-motion: reduce) {
    .tiover-tile,
    .tiover-tile svg { transition: none; }
}

/* ── Zusammenfassung (Änderungen 17 und 18) ────────────────────────────
   Offen, ohne Accordion. Eingerückt wie der Titeltext der Abschnitte,
   damit alle h2 auf einer Linie stehen. */
.tiintro {
    padding-left: calc(25px + var(--sp-s));
}

.tiintro__body {
    margin-top: var(--sp-mm);
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
    max-width: 70ch;
    line-height: 1.65;
}
/* ── Tabellen, Schritte, Listen, Kleingedrucktes (Präfix tientry-) ── */
.tisec-sub.tientry-breit {
    max-width: 52rem;
}

.tientry-text {
    font-size: var(--text-size-100);
    line-height: 1.6;
    max-width: 75ch;
}

.tientry-table-wrap {
    overflow-x: auto;
    margin: var(--sp-xs) 0;
}

.tientry-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-size-95);
    line-height: 1.45;
}

.tientry-table caption {
    text-align: left;
    font-size: var(--text-size-90);
    color: grey;
    padding-bottom: var(--sp-xs);
}

.tientry-table th,
.tientry-table td {
    text-align: left;
    vertical-align: top;
    padding: var(--sp-xs) var(--sp-s);
    border-bottom: 1px solid #e0e0e0;
}

.tientry-table thead th {
    font-weight: 600;
    background-color: #f8f9fa;
    border-bottom: 1px solid #d6d6d6;
}

.tientry-num {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tientry-list {
    padding-left: 1.4em;
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    max-width: 75ch;
    font-size: var(--text-size-100);
    line-height: 1.55;
    list-style: disc;
}

ol.tientry-list {
    list-style: decimal;
}

.tientry-list > li {
    display: list-item;
}

.tientry-literatur {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
}

.tientry-literatur li {
    font-size: var(--text-size-100);
    line-height: 1.55;
    max-width: 75ch;
    overflow-wrap: anywhere;
}

/* ── Hinweis für den Testmanager: Entwurf in der Vorschau ── */
.tientry-preview-banner {
    background-color: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 8px;
    padding: var(--sp-xs) var(--sp-m);
    font-size: var(--text-size-90);
    color: #92400e;
}

.tientry-preview-banner a {
    color: #92400e;
    text-decoration: underline;
}

.tientry-empty {
    color: grey;
}

/* ── Seitentext aus Markdown (App\Services\Tests\TestInfoMarkdown) ──
   Gleiche Gestaltung wie die tientry-Klassen der Vorlage, nur über die
   Elemente innerhalb von .tientry-md, weil Markdown keine Klassen setzt. */
.tientry-md {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
    font-size: var(--text-size-100);
    line-height: 1.6;
}

.tientry-md p,
.tientry-md li,
.tientry-md dd,
.tientry-md blockquote {
    max-width: 75ch;
}

.tientry-md ul,
.tientry-md ol {
    padding-left: 1.4em;
    display: flex;
    flex-direction: column;
    gap: var(--sp-xs);
    line-height: 1.55;
}

.tientry-md ul {
    list-style: disc;
}

.tientry-md ol {
    list-style: decimal;
}

.tientry-md li {
    display: list-item;
}

.tientry-md a {
    color: #275996;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.tientry-md strong,
.tientry-md b {
    font-weight: 600;
}

.tientry-md em,
.tientry-md i {
    font-style: italic;
}

.tientry-md h4 {
    font-size: var(--text-size-100);
    font-weight: 600;
    margin-top: var(--sp-xs);
}

.tientry-md blockquote {
    border-left: 3px solid #d6d6d6;
    padding-left: var(--sp-s);
    color: hsl(230, 7%, 35%);
}

.tientry-md dl {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: var(--sp-xs) var(--sp-m);
}

.tientry-md dt {
    font-weight: 600;
}

.tientry-md dd {
    margin: 0;
}

.tientry-md table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-size-95);
    line-height: 1.45;
}

.tientry-md caption {
    text-align: left;
    font-size: var(--text-size-90);
    color: grey;
    padding-bottom: var(--sp-xs);
}

.tientry-md th,
.tientry-md td {
    text-align: left;
    vertical-align: top;
    padding: var(--sp-xs) var(--sp-s);
    border-bottom: 1px solid #e0e0e0;
}

.tientry-md thead th {
    font-weight: 600;
    background-color: #f8f9fa;
    border-bottom: 1px solid #d6d6d6;
}

.tientry-md .tientry-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tientry-md .tientry-center {
    text-align: center;
}

.tientry-md .tientry-footnotes {
    font-size: var(--text-size-90);
    color: hsl(230, 7%, 35%);
}

.tientry-md sup a {
    text-decoration: none;
}

/* Kopfzellen von Zahlenspalten dürfen umbrechen, sonst werden lange Stufennamen sehr breit */
.tientry-md th.tientry-num {
    white-space: normal;
}