/* ==========================================================================
   TUTORIAL DESIGN SYSTEM - SEITENRAHMEN
   ==========================================================================
   Sidebar, Inhaltsverzeichnis und Wrapper-Kette, zusammengefasst aus
   account/1_responsive-sidebar.css, account/2_side-navigation-v4.css,
   noauth/1_expandable-side-navigation.css, help/1_smooth-scrolling.css,
   help/2_table-of-contents.css, help/3_faq-v3.css und den zwei
   Wrapper-Regeln aus global/container.css (2849 -> 800 Zeilen).

   Die Klassennamen im Markup bleiben (sr4-, ey9-, fk1-). Umbenennen auf
   tut- ist ein eigener Schritt.
   ========================================================================== */


/* RESET - stand in allen sechs Quelldateien wortgleich. Setzt auch die
   Schriftgroessen von body und h1-h4 (offener Punkt: Typografie-Besitz). */
*, *::after, *::before {
    box-sizing: border-box;
}

* {
    font: inherit;
    margin: 0;
    padding: 0;
    border: 0;
}

body {
    background-color: hsl(0, 0%, 100%);
    font-family: system-ui, sans-serif;
    color: hsl(230, 7%, 23%);
    font-size: 1rem;
}

h1, h2, h3, h4 {
    line-height: 1.2;
    color: hsl(230, 13%, 9%);
    font-weight: 700;
}

h1 { font-size: 2.0736rem; }
h2 { font-size: 1.728rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.2rem; }

ol, ul, menu {
    list-style: none;
}

button, input, textarea, select {
    background-color: transparent;
    border-radius: 0;
    color: inherit;
    line-height: inherit;
    appearance: none;
}

textarea {
    resize: vertical;
    overflow: auto;
    vertical-align: top;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img, video, svg {
    display: block;
    max-width: 100%;
}

@media (min-width: 64rem) {
    body { font-size: 1.25rem; }
    h1 { font-size: 3.051rem; }
    h2 { font-size: 2.44rem; }
    h3 { font-size: 1.75rem; }
    h4 { font-size: 1.5625rem; }
}

html {
    scroll-behavior: smooth;
}


/* TOKENS - ein Satz statt fuenf, Werte aus den Quelldateien uebernommen. */
:root {
    /* Farben */
    --tf-color-bg-hsl: 0, 0%, 100%;
    --tf-color-black-hsl: 230, 13%, 9%;
    --tf-color-contrast-high-hsl: 230, 7%, 23%;
    --tf-color-contrast-medium-hsl: 225, 4%, 47%;
    --tf-color-contrast-low-hsl: 240, 4%, 65%;
    --tf-color-contrast-lower-hsl: 240, 4%, 85%;

    /* Abstaende */
    --tf-space-4xs: 0.125rem;
    --tf-space-3xs: 0.25rem;
    --tf-space-2xs: 0.375rem;
    --tf-space-xs: 0.5rem;
    --tf-space-sm: 0.75rem;
    --tf-space-md: 1.25rem;

    /* Schriftgroessen */
    --tf-text-xs: 0.694rem;
    --tf-text-sm: 0.833rem;
    --tf-text-md: 1.2rem;
}

@media (min-width: 64rem) {
    :root {
        --tf-space-4xs: 0.1875rem;
        --tf-space-3xs: 0.375rem;
        --tf-space-2xs: 0.5625rem;
        --tf-space-xs: 0.75rem;
        --tf-space-sm: 1.125rem;
        --tf-space-md: 2rem;

        --tf-text-xs: 0.8rem;
        --tf-text-sm: 1rem;
        --tf-text-md: 1.5625rem;
    }
}


/* ICONS - vier gleiche Regeln aus vier Dateien. */
.sr4-icon,
.ey9-icon,
.fk1-icon {
    height: var(--tf-size, 1em);
    width: var(--tf-size, 1em);
    display: inline-block;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
}

.sr4-icon--xs,
.fk1-icon--xs {
    --tf-size: 16px;
}


/* ==========================================================================
   SEITENGERUEST
   ========================================================================== */

/* Spalten: Inhalt links, Inhaltsverzeichnis rechts. Aus global/container.css. */
.flex_acticle_content {
    display: flex;
    gap: var(--sp-x);
}

.documentation_container {
    width: calc(100.5 * 8px);
}

@media (max-width: 767px) {
    .flex_acticle_content {
        flex-direction: column-reverse;
    }

    .documentation_container {
        width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   FAQ-ZEILE IM 12-SPALTEN-RASTER (.tut-article-grid, .tut-article-head)
   --------------------------------------------------------------------------
   Stellt die Aufteilung wieder her, die die Hilfeseite vor dem Umbau auf
   dieses System hatte: help/3_faq-v3.css, .fk1-grid mit .fk1-col-3@md und
   .fk1-col-9@md in .fk1-max-width-adaptive-md.

   Drei Dinge machen sie aus:

     1. Das Inhaltsverzeichnis steht LINKS, die Fragen rechts. Im Markup
        steht es deshalb vor dem documentation_container.
     2. Beide teilen sich einen auf 64rem gedeckelten Kasten im Verhaeltnis
        3:9 - 219px fuer das Verzeichnis, 756px fuer die Fragen. Der Kasten
        steht linksbuendig; .fk1-max-width-adaptive-md setzte auch vorher
        keine automatischen Aussenabstaende.
     3. Kopf und Kacheln darueber (.tut-article-head) laufen auf denselben
        Deckel, damit die Kacheln buendig ueber der Zeile stehen und nicht
        rechts darueber hinaus.

   Rasterabstand 3.125rem, aus der Quelldatei uebernommen (--fk1-space-lg
   ab 64rem).

   UNTER 64rem eine Spalte, Verzeichnis oben. Frueher war es dort ganz
   ausgeblendet (.fk1-col-3@md stand bis 1024px auf display:none); dieses
   System zeigt stattdessen den aufklappbaren Knopf, und der gehoert nach
   oben. Das column-reverse aus .flex_acticle_content waere hier falsch
   herum, weil das Verzeichnis jetzt zuerst im Markup steht.

   Die feste Breite des documentation_container ist in dieser Zeile
   aufgehoben. Zwischen 768px und 1024px stand sie ungedeckt auf 804px und
   lief damit breiter als der Hauptbereich an dieser Stelle ueberhaupt ist.
   -------------------------------------------------------------------------- */
.tut-article-grid {
    flex-direction: column;
}

.tut-article-grid > .documentation_container {
    width: auto;
    min-width: 0;
}

/* Abstand zu der Zeile darunter. Ohne ihn traegt der Block nur den eigenen
   Aussenabstand der Kacheln (1rem aus .tut-linkcards), und die Fragen ruecken
   dicht an die Kacheln heran. Die beiden Abstaende fallen zusammen, es
   bleiben also 3rem, nicht 4rem. */
.tut-article-head {
    margin-bottom: var(--sp-xxx);
}

@media (min-width: 64rem) {
    .tut-article-head {
        max-width: 64rem;
    }

    .tut-article-grid {
        display: grid;
        grid-template-columns: repeat(12, 1fr);
        gap: 3.125rem;
        max-width: 64rem;
    }

    /* align-self gehoert zur Wiederherstellung, nicht zum Feinschliff. Als
       gestrecktes Rasterfeld waere das Verzeichnis so hoch wie die ganze
       Fragenliste, und die Linie an .toc--static (box-shadow inset) liefe
       als langer Strich daneben herunter. Vorher sass das Verzeichnis als
       Block in einem gestreckten col-3-Feld und war nur so hoch wie seine
       Eintraege. */
    .tut-article-grid > .toc {
        grid-column: span 3;
        align-self: start;
        min-width: 0;
    }

    .tut-article-grid > .documentation_container {
        grid-column: span 9;
    }
}

/* Innenabstand des Inhaltsbereichs. */
.sr10-padding-md {
    padding: 4rem;
    position: relative;
}

@media (max-width: 767px) {
    .sr10-padding-md {
        padding: 0.5rem;
    }
}

/* ==========================================================================
   SEITENKOPF MIT ICON (.info-heading)
   ==========================================================================
   Der Kopf der Hilfeseite: quadratische Icon-Plakette links, Ueberschrift
   rechts. Uebernommen aus help/fancy.css, damit /hilfe-und-anleitungen das
   Buendel nicht mehr laden muss. Die Klassennamen bleiben, weil derselbe
   Kopf auf zwoelf weiteren Seiten steht (dashboard, agb, impressum,
   tickets, testdisplay ...) und dort weiter aus fancy.css bedient wird.

   ER STEHT ABSICHTLICH HIER UND NICHT IN 1_components.css (Fabio,
   01.09.2026). Seine Ueberschrift ist seit dem 01.09.2026 ein h1 statt
   eines h2 - die Hilfeseite begann vorher ohne erste Ueberschriftenebene.

   DIE GROESSE NENNT DER KOPF SELBST (Fabio, 01.09.2026). Ein erster Versuch
   liess sie beim Element-Reset oben in dieser Datei (h1: 2.0736rem, ab 64rem
   3.051rem). Das Ergebnis war ein Titel von fast 49px, groesser als jede
   Ueberschrift sonst im System und deutlich groesser als vorher, wo der
   Kopf ein h2 war. Jetzt traegt das h1 die eigene Klasse
   .info-heading__title und laeuft auf --text-size-500, derselben Stufe wie
   .tut-page-title auf den Anleitungsseiten. Der Kopf steht damit auch nicht
   mehr davon ab, ob .tut-content ihn umschliesst oder nicht.

   Neu ist ausserdem die Schrift: --tut-font statt der system-ui aus dem
   body-Reset.

   ZWEITSCHRIFT IN help/fancy.css. Fuenf weitere Seiten haben denselben Kopf
   am 01.09.2026 mitbekommen: Support, Testverzeichnis, AGB, Datenschutz und
   Impressum. Sie laufen nicht auf diesem System, sondern weiter auf
   help/fancy.css; .info-heading__title steht dort noch einmal, mit den
   Tokenwerten ausgeschrieben (Open Sans, 1.3, #1e293b), weil
   0_tutorial_base.css dort nicht laedt. Wer hier die Groesse aendert, muss
   sie dort mitaendern. Die uebrigen Seiten mit .info-heading (dashboard,
   avv, Vorschlaege, onboarding_v4) tragen weiter ein h2 ohne Klasse.
   ========================================================================== */
.info-heading {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    position: relative;
    font-family: var(--tut-font);
}

.info-heading__title {
    font-family: var(--tut-font);
    font-size: var(--text-size-500);
    font-weight: 700;
    line-height: var(--tut-lh-tight);
    color: var(--tut-text-strong);
    margin: 0;
}

.info-icon-title {
    flex-shrink: 0;
    width: 50px;
    height: 50px;
    margin-right: 1rem;
    background-color: var(--tut-blue-tint);
    border-radius: var(--tut-radius-s);
    display: flex;
    align-items: center;
    justify-content: center;
}

.info-icon-title svg {
    width: 30px;
    height: 30px;
    color: var(--tut-blue-dark);
}

@media (max-width: 767px) {
    .info-heading {
        flex-direction: column;
        gap: var(--sp-xxs);
        text-align: center;
    }

    .info-icon-title {
        margin-right: 0;
    }
}



/* ==========================================================================
   SIDEBAR - HUELLE
   Mobil ein einblendbares Panel, ab 64rem eine feste Spalte. Umschaltpunkt
   ist der ::before-Inhalt, den _1_responsive-sidebar.js ausliest.
   ========================================================================== */

/* mobil */
.sidebar:not(.sidebar--static) {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    visibility: hidden;
    transition: visibility 0s 0.3s;
}

.sidebar:not(.sidebar--static)::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: hsla(var(--tf-color-black-hsl), 0);
    transition: background-color 0.3s;
    z-index: 1;
}

.sidebar:not(.sidebar--static) .sidebar__panel {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    max-width: 380px;
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    background-color: hsl(var(--tf-color-bg-hsl));
    transform: translateX(-100%);
    transition: box-shadow 0.3s, transform 0.3s;
}

.sidebar:not(.sidebar--static).sidebar--is-visible {
    visibility: visible;
    transition: none;
}

.sidebar:not(.sidebar--static).sidebar--is-visible::after {
    background-color: hsla(var(--tf-color-black-hsl), 0.85);
}

.sidebar:not(.sidebar--static).sidebar--is-visible .sidebar__panel {
    transform: translateX(0);
    box-shadow:
        0 0.9px 1.5px rgba(0, 0, 0, 0.03),
        0 3.1px 5.5px rgba(0, 0, 0, 0.08),
        0 14px 25px rgba(0, 0, 0, 0.12);
}

/* Kopfzeile des Panels - nur mobil sichtbar */
.sidebar__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: sticky;
    top: 0;
}

.sidebar__close-btn {
    --tf-size: 32px;
    width: var(--tf-size);
    height: var(--tf-size);
    display: flex;
    border-radius: 50%;
    background-color: hsl(var(--tf-color-bg-hsl));
    box-shadow:
        inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
        0 0.3px 0.4px rgba(0, 0, 0, 0.025),
        0 0.9px 1.5px rgba(0, 0, 0, 0.05),
        0 3.5px 6px rgba(0, 0, 0, 0.1);
    transition: 0.2s;
    flex-shrink: 0;
}

.sidebar__close-btn svg {
    display: block;
    margin: auto;
}

.sidebar__close-btn:hover {
    box-shadow:
        inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
        0 0.9px 1.5px rgba(0, 0, 0, 0.03),
        0 3.1px 5.5px rgba(0, 0, 0, 0.08),
        0 14px 25px rgba(0, 0, 0, 0.12);
}

/* Desktop */
.sidebar--static {
    flex-shrink: 0;
    flex-grow: 1;
}

.sidebar--static .sidebar__header {
    display: none;
}

/* Bis das JS die Sidebar initialisiert hat, bleibt sie unsichtbar. */
.sidebar,
.sidebar-loaded\:show {
    opacity: 0;
}

.sidebar--loaded {
    opacity: 1;
}

/* Umschaltpunkt, den das JS ausliest. */
[class*=sidebar--static]::before {
    display: none;
}

.sidebar--static::before {
    content: "static";
}

.sidebar--static\@md::before {
    content: "mobile";
}

@media (min-width: 64rem) {
    .sidebar--static\@md::before {
        content: "static";
    }
}

/* Aufklapp-Knopf ueber dem Inhalt, nur mobil. */
.side_nav_btn {
    display: none;
}

@media (max-width: 767px) {
    .side_nav_btn {
        display: block;
        margin-top: 5px;
        margin-left: 5px;
        padding: var(--sp-s) var(--sp-m);
        background-color: white;
        box-shadow:
            inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
            0 0.3px 0.4px rgba(0, 0, 0, 0.025),
            0 0.9px 1.5px rgba(0, 0, 0, 0.05),
            0 3.5px 6px rgba(0, 0, 0, 0.1);
        border-radius: 0.5em;
    }
}


/* ==========================================================================
   SIDEBAR - NAVIGATION (.exsidenav)
   Aufklappbare Unterlisten plus die Leiste "Hilfe & Kontakt" darunter.
   ========================================================================== */
.exsidenav {
    padding: var(--sp-m);
}

.exsidenav__pop-nav {
    margin-bottom: var(--tf-space-md);
}

.exsidenav__pop-link,
.exsidenav__link,
.exsidenav__control {
    display: flex;
    align-items: center;
    width: 100%;
    color: hsl(var(--tf-color-contrast-high-hsl));
    text-decoration: none;
    line-height: 1;
    padding: var(--tf-space-2xs);
    cursor: pointer;
    transition: 0.2s;
}

.exsidenav__pop-link:hover,
.exsidenav__link:hover,
.exsidenav__control:hover {
    color: #4279BC;
}

@media (min-width: 64rem) {
    .exsidenav__pop-link,
    .exsidenav__link,
    .exsidenav__control {
        font-size: var(--tf-text-sm);
    }
}

/* Leiste "Hilfe & Kontakt" */
.exsidenav__pop-link .exsidenav__icon {
    --tf-size: 16px;
    margin-right: var(--tf-space-2xs);
    opacity: 0.5;
    transition: opacity 0.2s;
}

.exsidenav__pop-link:hover .exsidenav__icon,
.exsidenav__pop-link[aria-current=page] .exsidenav__icon {
    opacity: 1;
}

.exsidenav__pop-link[aria-current=page] {
    color: #4279BC;
    background-color: #4279bc26;
    border-radius: 0.25em;
}

/* Hauptlinks */
.exsidenav__link {
    position: relative;
}

.exsidenav__list .exsidenav__list .exsidenav__link::before {
    content: "";
    position: absolute;
    left: -1px;
    top: 0;
    height: 100%;
    width: 1px;
}

.exsidenav__link[aria-current=page] {
    color: #4279BC;
}

.exsidenav__link[aria-current=page]::before {
    background-color: #4279BC;
}

/* Zwischenueberschriften */
.exsidenav__label-wrapper {
    margin: var(--tf-space-md) 0 var(--tf-space-2xs) var(--tf-space-2xs);
}

.exsidenav__list .exsidenav__list .exsidenav__label-wrapper {
    margin: var(--tf-space-xs) 0 var(--tf-space-3xs) var(--tf-space-2xs);
}

.exsidenav__label {
    color: hsl(var(--tf-color-contrast-low-hsl));
    font-size: var(--tf-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* Knopf, der eine Unterliste auf- und zuklappt */
.exsidenav__control {
    font-weight: 600;
}

.exsidenav__control .exsidenav__icon {
    --tf-size: 16px;
    display: block;
    margin-left: auto;
}

.exsidenav__control .icon__group {
    will-change: transform;
    transform-origin: 8px 8px;
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.exsidenav__control .icon__group > * {
    transform-origin: 8px 8px;
    stroke-dasharray: 17;
    stroke-dashoffset: 10;
    transform: translateY(3px);
    transition: transform 0.3s, stroke-dashoffset 0.3s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.exsidenav__control[aria-expanded=true] + .exsidenav__list {
    display: block;
}

.exsidenav__control[aria-expanded=true] + .exsidenav__list > * {
    animation: exsidenav-entry-animation 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.exsidenav__control[aria-expanded=true] .icon__group {
    transform: rotate(-90deg);
}

.exsidenav__control[aria-expanded=true] .icon__group > * {
    stroke-dashoffset: 0;
    transform: translateY(0px);
}

.exsidenav__list .exsidenav__list {
    display: none;
    border-left: 1px solid hsl(var(--tf-color-contrast-lower-hsl));
    margin: var(--tf-space-4xs) 0 0 var(--tf-space-2xs);
}

@keyframes exsidenav-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}


/* ==========================================================================
   INHALTSVERZEICHNIS (.toc)
   Mobil ein zusammengeklappter Knopf, ab 64rem eine mitlaufende Spalte.
   ========================================================================== */
:root {
    --toc-border-width: 1px;
}

.toc {
    --space-unit: 1rem;
    transform: translateY(25px);
}

@media (max-width: 767px) {
    .toc {
        transform: translateY(0px);
    }
}

.toc__list {
    position: relative;
}

.toc__list .toc__list .toc__link {
    padding-left: calc(var(--tf-space-sm) * 2);
}

.toc__link,
.toc__label {
    padding: var(--tf-space-3xs) var(--tf-space-sm);
}

.toc__link {
    position: relative;
    color: hsl(var(--tf-color-contrast-medium-hsl));
    text-decoration: none;
}

.toc__link::before {
    content: "";
    width: var(--toc-border-width);
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}

.toc__link:hover {
    color: hsl(var(--tf-color-contrast-high-hsl));
}

.toc__link--selected {
    color: #163C6B;
}

.toc__link--selected:hover {
    color: #0d2f58;
}

.toc__label {
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: var(--tf-text-sm);
}

/* Knopf, der das Verzeichnis mobil auf- und zuklappt */
.toc__control {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.toc__control-text {
    position: relative;
}

.toc__control-text > * {
    display: inline-block;
    transition: opacity 0.4s, transform 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.toc__control-text > *:last-child {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-10px);
}

.toc__icon-arrow .icon__group {
    will-change: transform;
    transform-origin: 8px 8px;
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.toc__icon-arrow .icon__group > * {
    transform-origin: 8px 8px;
    stroke-dasharray: 17;
    stroke-dashoffset: 10;
    transform: translateY(3px);
    transition: transform 0.3s, stroke-dashoffset 0.3s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.toc-content__target {
    scroll-margin-top: var(--tf-space-4xs);
}

/* nur zusammengeklappt (mobil) */
.toc:not(.toc--static) {
    border-radius: 0.25em;
    background-color: hsl(var(--tf-color-bg-hsl));
    box-shadow:
        inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
        0 0.3px 0.4px rgba(0, 0, 0, 0.025),
        0 0.9px 1.5px rgba(0, 0, 0, 0.05),
        0 3.5px 6px rgba(0, 0, 0, 0.1);
    transition: 0.3s;
}

.toc:not(.toc--static):hover {
    box-shadow:
        inset 0 0 0.5px 1px hsla(0, 0%, 100%, 0.075),
        0 0.9px 1.5px rgba(0, 0, 0, 0.03),
        0 3.1px 5.5px rgba(0, 0, 0, 0.08),
        0 14px 25px rgba(0, 0, 0, 0.12);
}

.toc:not(.toc--static) .toc__nav {
    display: none;
    margin: var(--tf-space-2xs) 0;
}

.toc:not(.toc--static) .toc__list {
    padding-bottom: var(--tf-space-xs);
}

.toc:not(.toc--static) .toc__label {
    display: none;
}

.toc:not(.toc--static) .toc__link {
    display: flex;
}

.toc:not(.toc--static).toc--expanded .toc__control-text > *:first-child {
    transform: translateY(10px);
    opacity: 0;
    pointer-events: none;
}

.toc:not(.toc--static).toc--expanded .toc__control-text > *:last-child {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.toc:not(.toc--static).toc--expanded .toc__nav {
    display: block;
    animation: toc-entry-animation 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group {
    transform: rotate(-90deg);
}

.toc:not(.toc--static).toc--expanded .toc__icon-arrow .icon__group > * {
    stroke-dashoffset: 0;
    transform: translateY(0px);
}

/* nur aufgeklappt (Desktop) */
.toc--static {
    box-shadow: inset var(--toc-border-width) 0 0 hsl(var(--tf-color-contrast-lower-hsl));
}

.toc--static[class*=position-sticky] {
    top: 4rem;
    max-height: calc(100vh - var(--tf-space-md) * 2);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.toc--static .toc__label {
    font-size: var(--tf-text-xs);
}

.toc--static .toc__link {
    display: inline-flex;
    font-size: var(--text-size-95);
}

.toc--static .toc__link--selected::before {
    background-color: #163C6B;
}

.toc--static .toc__control {
    display: none;
}

@keyframes toc-entry-animation {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0px);
    }
}

/* Umschaltpunkt, den _2_table-of-contents.js ausliest. */
[class*=toc--static]::before {
    display: none;
    content: "collapsed";
}

@media (min-width: 64rem) {
    .toc--static\@md::before {
        content: "static";
    }
}


/* ==========================================================================
   UTILITY-KLASSEN
   Nur die, die im Markup tatsaechlich vorkommen.
   ========================================================================== */
.sr4-text-component :where(p, blockquote, ul li, ol li) {
    line-height: 1.4;
}

.sr4-text-component :where(ul, ol) {
    padding-left: 0px;
}

.sr4-text-component ul :where(ul, ol),
.sr4-text-component ol :where(ul, ol) {
    padding-left: 1em;
    margin-bottom: 0;
}

.sr4-text-component ul {
    list-style-type: none;
}

/* :not(.tut-list) ist noetig, nicht kosmetisch (01.09.2026).
   `ol.tut-list { list-style: none }` in 1_components.css hat dieselbe
   Spezifitaet (0,1,1) wie diese Regel, und 2_frame.css laedt danach - ohne
   die Ausnahme gewinnt hier das decimal. Auf dem Bildschirm stand dann jede
   geordnete tut-Liste doppelt nummeriert: der native Zaehler plus das
   ::before mit counter(tut-list-items). Erst aufgefallen, als das Skalen-
   Teilstueck von .list--ol (dort gescopet auf .tut-content, also (0,2,1))
   auf .tut-list--ol umgestellt wurde. */
.sr4-text-component ol:not(.tut-list) {
    list-style-type: decimal;
}

.sr4-text-component img {
    display: block;
    margin: 0 auto;
}

.sr4-text-component figcaption {
    margin-top: var(--tf-space-xs);
    font-size: var(--tf-text-sm);
    text-align: center;
}

.sr4-text-component mark {
    background-color: hsla(342, 89%, 48%, 0.2);
    color: inherit;
}

.sr4-text-component em { font-style: italic; }
.sr4-text-component strong { font-weight: bold; }
.sr4-text-component s { text-decoration: line-through; }
.sr4-text-component u { text-decoration: underline; }

.sr4-text-component blockquote {
    padding-left: 1em;
    border-left: 4px solid hsl(var(--tf-color-contrast-lower-hsl));
    font-style: italic;
}

.sr4-text-component hr {
    margin: var(--tf-space-md) auto;
    background: hsl(var(--tf-color-contrast-lower-hsl));
    height: 1px;
}

.sr4-text-component > *:first-child { margin-top: 0; }
.sr4-text-component > *:last-child { margin-bottom: 0; }

/* Einzelne Helfer */
.sr4-position-relative { position: relative; }
.sr4-z-index-2 { z-index: 2; }
.sr4-width-100\% { width: 100%; }
.sr4-max-width-4xs { max-width: 21rem; }
.sr4-text-md { font-size: var(--tf-text-md); }

.sr4-text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sr4-bg {
    background-color: hsl(var(--tf-color-bg-hsl));
}

.sr4-shadow-sm {
    box-shadow:
        0 0.1px 0.3px rgba(0, 0, 0, 0.06),
        0 1px 2px rgba(0, 0, 0, 0.12);
}

.sr4-border-bottom {
    border-bottom: 1px solid hsl(var(--tf-color-contrast-lower-hsl));
}

.sr4-padding-y-sm {
    padding-top: var(--tf-space-sm);
    padding-bottom: var(--tf-space-sm);
}

.sr4-padding-left-md { padding-left: var(--tf-space-md); }
.sr4-padding-right-sm { padding-right: var(--tf-space-sm); }

.fk1-padding-sm { padding: var(--tf-space-sm); }
.fk1-margin-left-3xs { margin-left: var(--tf-space-3xs); }

.fk1-sr-only {
    position: absolute;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    width: 1px;
    height: 1px;
    overflow: hidden;
    padding: 0;
    border: 0;
    white-space: nowrap;
}

@media (min-width: 64rem) {
    .sr4-flex\@md { display: flex; }
    .sr4-hide\@md { display: none !important; }
    .fk1-position-sticky\@md { position: sticky; }
}