/* ==========================================================================
   TUTORIAL DESIGN SYSTEM - BAUSTEINE
   ==========================================================================
   Eine Datei fuer alles, was aktuell auf den Anleitungsseiten
   (Route::group(['prefix' => 'anleitungen'])) an CSS gebraucht wird -
   ausser den Tokens, die stehen in 0_tutorial_base.css.

   WARUM DIESE DATEI EXISTIERT
   Die CSS-Regeln, die heute auf den Anleitungsseiten laufen, liegen verteilt
   in Dateien, die genauso von anderen Seiten benutzt werden: help/fancy.css
   und global/1_tutorial.css laden auch auf help.blade.php, contact.blade.php
   und den Tickets; global/container.css und global/1_list.css sitewide;
   surveyjs/paper_upload.css und surveyjs/calculations.css im Test-Upload.
   Wer dort fuer die Anleitungen etwas aendert, aendert es ueberall mit.
   Diese Datei loest das: alles Anleitungs-Eigene liegt jetzt hier, unter
   eigener Kontrolle.

   ZWEI TEILE
   TEIL A - Neue Bausteine, Praefix "tut-". Faehrten Portierung der
   heutigen Optik (siehe /design_overview/anleitungen), nur umbenannt und
   entkoppelt. Noch NICHT auf den echten Anleitungsseiten im Einsatz - das
   ist der naechste Schritt, Fall fuer Fall, gemeinsam mit Fabio.

   TEIL B - Bausteine, die schon vorher in einer eigenen, nur von den
   Anleitungen genutzten Datei standen (Rollenbaum) oder
   in einem <style>-Block mitten in einer Blade-Datei (Datenschutz-
   Diagramme, Entscheidungshilfen, Vergleichstabellen). Reine Verschiebung
   hierher, Klassennamen und Optik unveraendert.

   BEWUSST NICHT GEFORKT
   Diese Bausteine laufen auf den Anleitungsseiten mit, bleiben aber in
   ihrer bisherigen, sitewide geteilten Datei - kein Duplikat hier. Grund
   jeweils: es sind generische, aktiv auf vielen Nicht-Anleitungsseiten
   genutzte Systeme, kein Anleitungs-spezifisches Kopplungsrisiko. Wer
   hier etwas vermisst, findet es dort:

     Breadcrumbs        noauth/components/breadcrumbs.blade.php
                         + global/1_breadcrumbs.css
     Seitenrahmen        Sidebar, Inhaltsverzeichnis und Wrapper-Kette
                         stehen in tutorial/2_frame.css
     Tooltip             global/1_tooltip.css
     Kopieren-Button     global/2_copy-to-clipboard.css
     Video-Modal         noauth/components/modal-video-active.blade.php
                         + global/2_modal-video.css
     Info-Element        .infoelem, global/1_info-element.css
                         (aktiv auf 15+ Seiten ausserhalb der Anleitungen:
                         account, api, surveyjs, tests, seats, workers)

   NICHT MEHR GEBRAUCHT
   .accordion-v2 / .faq_question (help/2_accordion-v2.css + help/3_faq-v3.css)
   ist seit dem 01.09.2026 durch den Baustein .tut-faq ersetzt. Auf den acht
   Seiten der Gruppe Digitaltest steht keine einzige Stelle mehr darauf. Die
   Bestandsdateien bleiben, weil subscriptions, tests/create und onboarding_v4
   sie weiter benutzen.

   Stand 2026-09-01: Die acht Seiten der Gruppe Digitaltest laufen auf dieser
   Datei statt auf dem Buendel noauth.components.faq.css. Die uebrigen zehn
   Anleitungsseiten sind noch nicht nachgezogen, siehe
   docs/anleitungen-designsystem/seitenverzeichnis.md.
   ========================================================================== */


/* ==========================================================================
   TEIL A - NEUE BAUSTEINE (Praefix tut-)
   ========================================================================== */

/* --------------------------------------------------------------------------
   Seitentitel
   Ersetzt .help_main_header, das heute in drei Dateien mit drei
   unterschiedlichen Werten definiert ist (global/container.css,
   noauth/noauth.css, noauth/1_various.css). Auf den echten Anleitungsseiten
   lädt nur container.css mit, dessen Wert hier uebernommen ist.
   -------------------------------------------------------------------------- */
/* Ohne Zeilenbegrenzung (Fabio, 01.09.2026): die Linie unter dem Titel endete
   sonst bei 68ch, waehrend der Text darunter die volle Spalte nutzt. */
.tut-page-title {
    padding-bottom: var(--sp-x);
    border-bottom: 1px solid var(--tut-border);
    margin-bottom: var(--sp-x);
}

/* --------------------------------------------------------------------------
   Fliesstext-Rahmen
   Ersetzt .tutorial_wrapper (global/1_tutorial.css).
   -------------------------------------------------------------------------- */
.tut-content {
    font-family: var(--tut-font);
    font-size: var(--text-size-100);
    line-height: 1.6;
    color: var(--tut-text);
}

/* --------------------------------------------------------------------------
   Ueberschriften
   --------------------------------------------------------------------------
   Dieser Block existierte nicht. Das System definierte h4/h5/h6 und liess
   h1/h2/h3 offen - entschieden hat sie dann footer/1_main-footer.css, das
   als letztes der 27 Stylesheets mit unscoped Element-Reset laedt. Auf der
   Musterseite kam dabei heraus:

     .tut-page-title       39.04px    (2.44rem aus 1_main-footer.css:91)
     h2 "Haeufige Fragen"  39.04px    genauso gross wie der Seitentitel
     .tut-section__head h2 28px       eigene Regel
     blankes h3            28px       genauso gross wie ein Abschnitts-h2
     .tut-block__title     20px       selbes Tag, kleiner als seine Geschwister

   Fuenf Ebenen auf vier Groessen, zwei Kollisionen, eine Umkehrung. Dazu
   `margin: 0` aus `* {}` derselben Datei, weshalb drei Ueberschriften mit
   0px Abstand direkt auf dem Kasten ueber ihnen sassen.

   Die Skala kommt weiterhin aus fonts.css (--text-size-*, Faktor 1.2), dieses
   System erfindet keine eigenen Groessen - es sagt nur endlich, welche Ebene
   welche Stufe bekommt:

     h1  --text-size-500   Seitentitel, genau einer pro Seite
     h2  --text-size-400   Abschnitt (.tut-section__head, .tut-step-head)
     h3  --text-size-300   Block innerhalb eines Abschnitts (.tut-block__title)
     h4  --text-size-200   Zwischentitel innerhalb eines Blocks

   Abstaende: ueber einer Ueberschrift steht mehr Luft als darunter, damit sie
   zum Text gehoert, der ihr folgt, und nicht zu dem, der ihr vorausgeht.
   -------------------------------------------------------------------------- */
/* Alle Ebenen stehen in :where(), damit der ganze Block die Spezifitaet
   (0,1,0) von .tut-content behaelt: hoch genug, um die Element-Regeln des
   Buendels zu schlagen (h2 {} ist (0,0,1), * {} ist (0,0,0)), niedrig genug,
   dass eine Bausteinklasse wie .tut-block__title ihre eigene Ueberschrift
   weiterhin selbst bestimmt. Ohne :where() gewinnt .tut-content h3 (0,1,1)
   gegen .tut-block__title (0,1,0) und drueckt jede Kartenueberschrift um
   ihren Vorlauf nach unten. */
.tut-content :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--tut-font);
    color: var(--tut-text-strong);
    line-height: var(--tut-lh-tight);
    text-wrap: balance;
}

.tut-content :where(h1) {
    font-size: var(--text-size-500);
    font-weight: 700;
    margin: 0 0 var(--sp-x);
}

.tut-content :where(h2) {
    font-size: var(--text-size-400);
    font-weight: 600;
    margin: var(--sp-xx) 0 var(--sp-s);
}

.tut-content :where(h3) {
    font-size: var(--text-size-300);
    font-weight: 600;
    margin: var(--sp-x) 0 var(--sp-xs);
}

.tut-content :where(h4) {
    font-size: var(--text-size-200);
    font-weight: 600;
    margin: var(--sp-mm) 0 var(--sp-xs);
}

.tut-content :where(h5) {
    font-size: var(--text-size-100);
    font-weight: 600;
    margin: var(--sp-m) 0 var(--sp-xxs);
}

.tut-content :where(h6) {
    font-size: var(--text-size-100);
    font-weight: 600;
    color: var(--tut-text-muted);
    margin: var(--sp-m) 0 var(--sp-xxs);
}

/* Die erste Ueberschrift braucht ihren Vorlauf nicht: darueber steht nichts,
   von dem sie sich absetzen muesste. */
.tut-content > :first-child {
    margin-top: 0;
}

/* --------------------------------------------------------------------------
   Zeilenlaenge und Zeilenhoehe
   --------------------------------------------------------------------------
   KEINE ZEILENBEGRENZUNG IM FLIESSTEXT (Fabio, 01.09.2026). Vorher stand
   `max-width: var(--tut-measure)` an .tut-content > p/ul/ol und an den beiden
   Notizkaesten. Auf einer Anleitungsseite steht der Text in einer Spalte, die
   Sidebar und Inhaltsverzeichnis ohnehin schon schmal halten; eine zweite
   Grenze darin bricht die Zeile ein zweites Mal und laesst rechts einen
   Streifen stehen, der nach einem Fehler aussieht.

   --tut-measure bleibt fuer die Faelle, in denen ein Baustein seine Breite
   selbst bestimmt: Seitentitel, Quellenbox, Verweiskarten. Dort ist die
   Begrenzung Teil der Form, nicht eine Grenze im Lesefluss.

   ABSTAENDE (Fabio, 01.09.2026): Absaetze, Listen und Abschnitte standen zu
   eng beieinander. Ein Absatz hatte 0.5rem Vorlauf bei Zeilenhoehe 1.7 - der
   Abstand zwischen zwei Absaetzen war damit kleiner als der zwischen zwei
   Zeilen desselben Absatzes.
   -------------------------------------------------------------------------- */
.tut-content p {
    margin: var(--sp-m) 0;
    line-height: var(--tut-lh-text);
}

.tut-content li {
    line-height: var(--tut-lh-text);
}

.tut-content section {
    margin-bottom: var(--sp-m);
}

.tut-content ul,
.tut-content ol {
    margin: var(--sp-m) 0;
}

.tut-content figure {
    margin: var(--sp-mm) 0;
}

@media (max-width: 767px) {
    .tut-content {
        padding: 0 var(--sp-m);
    }
}

/* --------------------------------------------------------------------------
   Inline-Hervorhebung und Zwischentitel
   .tut-highlight ersetzt .step_highlight UND .text_highlight_default -
   die beiden waren zeilengleich dieselbe Regel in zwei Dateien
   (global/1_tutorial.css und global/0_base.css), hier einmal.
   .tut-subheading ersetzt .strong_hd.

   GROESSE UND ABSTAND ANGEHOBEN (Fabio, 01.09.2026): der Zwischentitel lief
   auf derselben Stufe wie der Text darunter und mit 0.8rem Abstand nach unten,
   ohne Vorlauf. Er war damit als eigene Ebene kaum zu erkennen. Jetzt
   --text-size-150 und ein Vorlauf, der groesser ist als der Abstand nach unten:
   der Titel gehoert zu dem, was ihm folgt.
   -------------------------------------------------------------------------- */
.tut-highlight {
    color: #2c5282;
    font-weight: 500;
    padding: 1px 4px;
    background-color: var(--tut-border);
    border-radius: 4px;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.tut-highlight svg {
    height: 18px;
}

.tut-subheading {
    display: block;
    font-size: var(--text-size-150);
    font-weight: 600;
    color: var(--tut-text-strong);
    margin: var(--sp-x) 0;
}

/* --------------------------------------------------------------------------
   Einleitungsblock
   Ersetzt .intro-container und Geschwister (help/fancy.css:165-260).
   .intro-illustration ist nicht mit uebernommen - im heutigen Markup
   0x benutzt (Fall C3).
   -------------------------------------------------------------------------- */
.tut-intro {
    background-color: var(--tut-page);
    border: 1px solid var(--tut-border);
    border-radius: 12px;
    padding: 2.5rem;
    margin: 2rem 0;
}

.tut-intro__title {
    color: var(--tut-blue-dark);
    /* Ebene h3 wie .tut-block__title: eine Kartenueberschrift, nicht der
       Seitentitel. Vorher 1.5rem und damit neben der Skala. */
    font-size: var(--text-size-300);
    font-weight: 600;
    margin: 0 0 var(--sp-mm);
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--tut-border);
    display: flex;
    align-items: center;
}

.tut-intro__title-icon {
    flex-shrink: 0;
    margin-right: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #4279bc21;
    width: 36px;
    height: 36px;
    border-radius: 0.3em;
}

/* color statt fill (01.09.2026): der Kopf trug im Bestand einen gefuellten
   Font-Awesome-Pfad, die Regel faerbte ihn ueber fill. Hugeicons zeichnen mit
   stroke="currentColor" und fill="none" - eine fill-Deklaration hier haette
   ihre Konturen zu Flaechen gefuellt, weil CSS das Attribut am svg schlaegt.
   color faerbt beides richtig und ist dieselbe Loesung wie an
   .tut-block__icon svg. */
.tut-intro__title-icon svg {
    width: 20px;
    height: 20px;
    color: var(--tut-blue-dark);
}

.tut-intro__content {
    display: flex;
    flex-wrap: wrap;
    gap: 2rem;
    align-items: center;
}

.tut-intro__text {
    flex: 1;
    min-width: 280px;
    line-height: 1.7;
    color: var(--tut-text);
    font-size: 1.0625rem;
}

.tut-intro__text p {
    margin: 0;
}

.tut-intro__text p + p {
    margin-top: 0.75rem;
}

.tut-intro__text strong {
    color: var(--tut-blue-dark);
    font-weight: 600;
}

.tut-intro__steps {
    display: flex;
    margin-top: 1.5rem;
    width: 100%;
    gap: 1.5rem;
}

.tut-intro__step {
    flex: 1;
    background-color: var(--tut-blue-faint);
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.tut-intro__step-num {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--tut-blue);
    font-variant-numeric: tabular-nums;
    margin-bottom: 0.375rem;
}

.tut-intro__step-icon {
    margin-bottom: 0.5rem;
}

.tut-intro__step-icon svg {
    width: 24px;
    height: 24px;
    color: #475569;
}

.tut-intro__step-text {
    font-size: 0.875rem;
    color: #475569;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 768px) {
    .tut-intro {
        padding: 1.5rem;
    }

    .tut-intro__steps {
        flex-direction: column;
        gap: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   Abschnitt und Inhaltsblock
   Ersetzt .info-section/.info-block und Geschwister (help/fancy.css:1-160).
   Die 72 leeren .info-divider-div zwischen Bloecken sind hier eine
   Randregel auf .tut-block + .tut-block; wo eine Linie ausserhalb dieser
   Abfolge gebraucht wird, steht .tut-divider als eigenstaendiges Element
   bereit (ersetzt .info-divider 1:1).

   .tut-block__icon--lg fasst die zweite Plakettengroesse (.info-icon-title,
   50 statt 32px) als Modifikator zusammen statt als komplett eigene Regel -
   das aendert nichts am Ergebnis, nur an der Schreibweise.
   -------------------------------------------------------------------------- */
.tut-section {
    padding: 1rem 0;
    background-color: var(--tut-page);
}

/* VORLAUF (Fabio, 01.09.2026): der Kopf sass mit 1rem aus .tut-section direkt
   unter dem, was vor ihm stand. Eine Abschnittsueberschrift ist die groesste
   Zaesur einer Seite und braucht davor mehr Luft als danach. Der erste
   Abschnitt einer Seite bekommt den Vorlauf nicht, dort steht der Seitentitel
   darueber, der seinen Abstand selbst mitbringt. */
.tut-section__head {
    margin-top: var(--sp-xx);
    margin-bottom: 2.5rem;
    border-bottom: 2px solid #f0f4f8;
    padding-bottom: 1rem;
}

.tut-section:first-of-type > .tut-section__head {
    margin-top: var(--sp-x);
}

.tut-section__head h2 {
    font-size: var(--text-size-400);
    color: var(--tut-text-strong);
    font-weight: 600;
    /* Der Kopf bringt seinen Abstand selbst mit (padding-bottom + margin-bottom),
       die Ueberschrift darf ihren Vorlauf nicht zusaetzlich addieren. */
    margin: 0 0 var(--sp-s);
}

.tut-section__head p {
    color: var(--tut-text-muted);
    font-size: var(--text-size-100);
}

/* Der Koerper beginnt mit einem Funktionsblock. Zwischen dem Absatz, der den
   Abschnitt einleitet, und dem ersten Block stand nichts - beides lief
   ineinander (Fabio, 01.09.2026). */
.tut-section__body {
    margin-top: var(--sp-xx);
    margin-bottom: 3rem;
}

.tut-block {
    margin-bottom: 2.5rem;
    position: relative;
}

.tut-block:last-child {
    margin-bottom: 0;
}

.tut-block + .tut-block {
    border-top: 1px solid var(--tut-border);
    padding-top: 2.5rem;
    margin-top: -1.5rem;
}

.tut-block__head {
    display: flex;
    align-items: center;
    margin-bottom: 1rem;
    position: relative;
}

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

.tut-block__icon svg {
    width: 20px;
    height: 20px;
    color: var(--tut-blue-dark);
}

.tut-block__icon--lg {
    width: 50px;
    height: 50px;
}

.tut-block__icon--lg svg {
    width: 30px;
    height: 30px;
}

.tut-block__title {
    /* Ebene h4: der Block sitzt unter dem Abschnitts-h2, ist aber selbst
       keine eigene Gliederungsebene der Seite.
       Groesse --text-size-250 (1.22rem): die Skala springt von 1.2 auf
       1.44rem, 1.44 war neben dem Abschnitts-h2 zu laut.
       Kein padding-top: .tut-block__head zentriert Plakette und Titel
       ueber align-items, ein Vorlauf am Titel verschiebt diese Achse. */
    font-size: var(--text-size-250);
    font-weight: 600;
    color: var(--tut-text-strong);
    margin: 0;
}

.tut-block__body {
    /* Muss der Plakettenbreite plus ihrem margin-right folgen, sonst steht
       der Text nicht mehr unter dem Titel. */
    padding-left: calc(36px + 1rem);
    color: #475569;
    line-height: 1.6;
}

.tut-block__body p {
    margin-bottom: 0.75rem;
}

.tut-block__body p:last-child {
    margin-bottom: 0;
}

.tut-divider {
    height: 1px;
    background-color: var(--tut-border);
    margin: 2rem 0;
}

@media (max-width: 768px) {
    /* Keine eigenen Schriftgroessen mehr: fonts.css:242-259 definiert die
       ganze --text-size-*-Skala unter 769px kleiner. Die frueheren Werte hier
       (1.5rem / 1.125rem) haben genau diese Verkleinerung ueberschrieben. */
    .tut-block__body {
        padding-left: 0;
        margin-top: 0.75rem;
    }

    .tut-block__head {
        flex-direction: column;
        gap: var(--sp-xxs);
        text-align: center;
    }

    .tut-block__icon {
        margin-bottom: 0.5rem;
    }

    .tut-block__icon--lg {
        margin-right: 0;
    }

    .tut-block + .tut-block {
        margin-top: 0;
        padding-top: 1.5rem;
    }
}

/* --------------------------------------------------------------------------
   Schritte
   .tut-step-head ersetzt .tutorial_step_header/.tutorial_step_number.
   .tut-chain ersetzt .step_chain und Geschwister.
   Beides 1:1 aus global/1_tutorial.css:63-140.
   -------------------------------------------------------------------------- */
/* 3rem Vorlauf, 1rem danach (Fabio, 01.09.2026). Vorher standen oben und
   unten dieselben 3rem: der Schritt-Kopf schwebte zwischen zwei Absaetzen,
   statt zu dem Text zu gehoeren, den er ankuendigt. */
.tut-step-head {
    display: flex;
    gap: var(--sp-m);
    align-items: center;
    margin: var(--sp-xxx) 0;
}

/* Der Kopf bringt seinen Abstand selbst mit. Die Ueberschrift darf ihre
   Raender nicht in die Flex-Zeile einbringen, sonst wird ihre Box hoeher als
   die Nummernflaeche und align-items zentriert die beiden gegeneinander
   versetzt - derselbe Fall wie beim padding-top an .tut-block__title. */
.tut-step-head :where(h2, h3) {
    margin: 0;
}

.tut-step-head__num {
    /* Feste Kantenlaenge statt padding + max-height: die alte Fassung
       (.tutorial_step_header) wurde bei zweistelligen Schritten breiter als
       hoch, und Anleitungen haben bis zu 23 Schritte. */
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--tut-blue);
    color: #ffffff;
    border-radius: var(--tut-radius-s);
    font-size: var(--text-size-400);
    font-weight: 600;
    line-height: 1;
}

.tut-chain {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
    margin: var(--sp-m) 0;
    padding: var(--sp-m);
    background-color: var(--tut-surface);
    border-radius: 0.25em;
    width: fit-content;
}

.tut-chain__item {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-s);
}

.tut-chain__num {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 28px;
    background-color: var(--tut-blue);
    color: white;
    border-radius: 50%;
    font-size: var(--text-size-100);
    font-weight: 600;
    flex-shrink: 0;
}

.tut-chain__text {
    flex: 1;
}

.tut-chain__connector {
    width: 2px;
    height: var(--sp-s);
    background-color: #cbd5e0;
    margin-left: 13px;
}

@media (max-width: 767px) {
    .tut-chain {
        padding: var(--sp-s);
    }
}

/* --------------------------------------------------------------------------
   Hinweis- und Merkkaesten (Gruppe F)
   Fuenf heutige Kastenarten, fuenf eigene tut-Klassen - bewusst noch NICHT
   zu einer Klasse mit Modifikatoren zusammengefasst. Ob und wie sie
   verschmelzen, ist eine Polier-Entscheidung fuer die naechste Runde, keine
   technische. Jede Klasse hier entspricht 1:1 einem bestehenden Kasten:

     .tut-callout     <- .info-callout            (help/fancy.css)
     .tut-noticebox   <- .info_box_outer + Kinder  (global/container.css)
     .tut-inlinenote  <- .scale-checkbox-info      (global/container.css)
     .tut-sourcebox   <- .dst-source-box           (data_safety_styles)
     .tut-examplebox  <- .dst-example-box          (data_safety_styles)
     Beide Vorlagen sind am 01.09.2026 geloescht, das Markup der
     Datenschutzseiten zeigt jetzt auf die tut-Fassung.
   -------------------------------------------------------------------------- */
.tut-callout {
    background-color: var(--tut-surface);
    border-left: 3px solid var(--tut-blue-dark);
    padding: 1rem 1.25rem;
    margin: 1rem 0;
    border-radius: 0 4px 4px 0;
}

.tut-callout p {
    margin: 0;
    color: var(--tut-text);
}

/* NACHGEZOGEN 01.09.2026 aus dem Durchgang auf
   /design_overview/anleitungen/varianten-hinweise. Vier Befunde, jeweils an
   der Komponente behoben und nicht ueber eine Sammelregel:

   1. Beide Icons liefen mit min-width 30px und ohne Hoehenangabe deutlich
      groesser als die Zeile daneben. Sie stehen jetzt auf 20px, also etwa auf
      Versalhoehe des Textes, den sie begleiten.
   2. Der Grund der Merkbox war #4279bc1f, Markenblau auf 12 Prozent Deckung
      und damit die dunkelste Flaeche des ganzen Systems. Er kommt jetzt aus
      der Palette: #eef5fd mit Kante #dbe8f5 statt Vollton-Markenblau. Der
      Schatten faellt weg, die Kante haelt den Kasten allein zusammen.
   3. .tut-inlinenote nannte keine Schriftgroesse und erbte deshalb ab 64rem
      die 1.25rem aus dem ungescopten body-Reset der Legacy-Stylesheets
      (global/1_list.css:82 und 26 weitere Dateien des Buendels): 20px, also
      groesser als der Fliesstext, in dem die Notiz steht. Jeder Kasten hier
      nennt seine Groesse jetzt selbst. Dieselbe Ursache steckt hinter den
      Listen weiter unten.
   4. Die Quellenbox lief auf --tut-text-muted bei 0.82rem. Auf --tut-surface
      war das der schwaechste Kontrast des Systems. Behoben ist die FARBE, nicht
      die Groesse: sie steht auf --tut-text bei --text-size-90. Die Groesse
      bleibt bewusst klein, eine Herkunftsangabe konkurriert nicht mit dem Text,
      zu dem sie gehoert. */
.tut-noticebox {
    display: flex;
    gap: var(--sp-s);
    background-color: #eef5fd;
    border: 1px solid #dbe8f5;
    padding: var(--sp-m);
    /* Der Kasten hat immer mindestens zwei Zeilen (Kernaussage plus Zusatz).
       Zentriert saesse das Icon zwischen ihnen; es gehoert an die erste. */
    align-items: flex-start;
    border-radius: var(--tut-radius-s);
    margin: var(--sp-mm) 0;
    font-size: var(--text-size-95);
    line-height: 1.4;
}

/* Der Querverweis am Fuss des Kastens. Der Inhalt ist eine Flex-Spalte: ohne
   align-self zieht sich der Link ueber die ganze Breite und seine
   Unterstreichung laeuft weit ueber den Text hinaus. Das Pfeil-Icon braucht
   ausserdem eine Groesse, sonst rutscht es in eine eigene Zeile. */
.tut-noticebox__content > .cd-link {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    gap: 0.25rem;
    margin-top: var(--sp-xs);
}

.tut-noticebox__content > .cd-link svg {
    width: 16px;
    height: 16px;
}

/* Die Liste muss die Groesse des Kastens ausdruecklich mitbekommen: .tut-list
   faellt sonst auf ihren eigenen Standardwert --text-size-100 zurueck und
   laeuft groesser als der Satz, zu dem sie gehoert. Derselbe Fall wie bei
   .tut-sourcebox weiter unten. */
.tut-noticebox .tut-list {
    --tut-list-size: var(--text-size-95);
}

.tut-noticebox__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    /* auf die optische Mitte der ersten Zeile */
    height: calc(var(--text-size-95) * 1.4);
}

/* color, NICHT fill. Der Bestand trug hier einen gefuellten FontAwesome-Pfad
   und wurde ueber fill eingefaerbt. Hugeicons sind Umrisse: sie kommen mit
   fill="none" und stroke="currentColor". Ein fill an dieser Stelle
   ueberschreibt das fill="none" des Icons und macht aus dem Umriss eine
   ausgefuellte blaue Flaeche - genau das ist beim ersten Umbau passiert.
   Ueber color faerbt sich der Strich, weil er currentColor erbt.
   Gleiche Regel wie bei .tut-inlinenote__icon svg. */
.tut-noticebox__icon svg {
    width: 20px;
    height: 20px;
    color: var(--tut-blue);
}

.tut-noticebox__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--text-size-95);
    align-items: flex-start;
}

.tut-noticebox__strong {
    font-weight: 700;
    color: var(--tut-blue-dark);
}

.tut-inlinenote {
    display: flex;
    gap: var(--sp-s);
    background: var(--tut-page);
    border: 1px solid var(--tut-border);
    border-radius: var(--tut-radius-s);
    padding: var(--sp-s) var(--sp-m);
    margin: var(--sp-mm) 0;
    position: relative;
    width: fit-content;
    align-items: center;
    font-size: var(--text-size-100);
    line-height: var(--tut-lh-text);
    color: var(--tut-text);
}

.tut-inlinenote__icon {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* Die Farbe stand vorher als inline color am Icon im Markup. Sie gehoert an
   die Komponente, damit beide Kaesten dieselbe Regel haben. */
.tut-inlinenote__icon svg {
    width: 20px;
    height: 20px;
    color: var(--tut-blue);
}

.tut-sourcebox {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-xs);
    margin: var(--sp-mm) 0 0;
    padding: var(--sp-s) var(--sp-m);
    background: var(--tut-surface);
    border: 1px solid var(--tut-border);
    border-radius: var(--tut-radius-s);
    max-width: var(--tut-measure);
    font-size: var(--text-size-90);
    color: var(--tut-text);
    line-height: 1.6;
}

.tut-sourcebox svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--tut-text-muted);
    margin-top: 3px;
}

.tut-sourcebox strong {
    color: var(--tut-text-strong);
}

/* Links in der Quellenbox tragen .cd-link, den Linkstandard der
   Anleitungsseiten (Eintrag "Interner Link" auf der Bausteine-Seite). Der
   eigene Linkstil der Quellenbox ist damit weg. Ueberschrieben wird nur die
   Groesse: .cd-link nennt --text-size-100, die Quellenbox laeuft eine Stufe
   darunter, und ein Link soll nicht groesser sein als der Satz, in dem er
   steht. */
.tut-sourcebox .cd-link {
    font-size: inherit;
}

/* Die Liste bringt ihren Einzug im li mit (padding-left neben dem Punkt). Das
   zusaetzliche padding-left an der ul schob sie deshalb doppelt nach rechts
   und riss sie von der Textkante des "Quellen:" darueber los.

   Die Groesse steht auf --text-size-90 statt auf --text-size-100. Damit laufen
   die Quellenzeilen gleich gross, egal ob sie als Liste oder als einzelne Zeile
   hinter dem Wort "Quelle:" stehen - der Kasten hat beide Formen, und in der
   einzelnen gibt es keine Liste, an der man die Groesse festmachen koennte.

   HIER STAND `--tut-list-size: inherit` UND DAS WAR FALSCH. Eine Custom
   Property erbt mit diesem Schluesselwort die VARIABLE vom Elternteil, nicht
   die Schriftgroesse des Kastens - und dort ist --tut-list-size nirgends
   gesetzt. Die Deklaration `font-size: var(--tut-list-size, ...)` an der Liste
   wurde dadurch ungueltig, font-size fiel auf unset zurueck und erbte die
   1.25rem des ungescopten body-Resets: 20px, also genau der Befund, gegen den
   die Regel gebaut ist. --tut-list-size braucht IMMER einen echten Wert aus der
   Skala, nie ein CSS-Schluesselwort. */
.tut-sourcebox .tut-list {
    --tut-list-size: var(--text-size-90);
    margin: var(--sp-xxs) 0 0;
    padding-left: 0;
}

.tut-sourcebox .tut-list > li {
    padding-bottom: 0;
    margin-bottom: 2px;
}

.tut-examplebox {
    margin: var(--sp-m) 0;
    padding: var(--sp-m);
    border: 1px solid var(--tut-border);
    border-radius: 8px;
    background-color: var(--tut-surface);
}

.tut-examplebox__title {
    font-weight: 600;
    color: var(--tut-blue-dark);
    margin-bottom: var(--sp-s);
    font-size: 0.95rem;
}

.tut-examplebox p {
    font-size: 0.9rem;
    line-height: 1.6;
    color: #475569;
}

/* --------------------------------------------------------------------------
   Listen
   Ersetzt .list.list--ul/.list--ol (global/1_list.css). Bewusst ohne den
   globalen Reset, den die Quelldatei mitbringt (Befund 2 auf der
   Referenzseite), und ohne !important - beides war nur noetig, um gegen
   fremde Regeln in derselben Datei zu gewinnen, hier gibt es die nicht.

   Der Punkt ist unveraendert: 7px, Hellgrau, mit --accent in Markenblau. Die
   Nummer nicht mehr - siehe den Block dazu weiter unten. Dazu nennt die Liste
   ihre Schriftgroesse jetzt selbst, aus dem Grund direkt darunter.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   SPEZIFITAET: warum hier ul./ol. vor der Klasse steht
   --------------------------------------------------------------------------
   `.tut-list { list-style: none }` hat die Spezifitaet (0,1,0) und verliert
   damit gegen `.sr4-text-component ol { list-style-type: decimal }` in
   account/2_side-navigation-v4.css:508 (0,1,1). `.sr4-text-component` steht
   auf der Musterseite und auf jeder echten Anleitungsseite im Wrapper.
   Ergebnis auf dem Bildschirm: jede geordnete Liste war doppelt nummeriert -
   der native Zaehler der Legacy-Regel plus das ::before mit
   counter(tut-list-items) aus diesem System. "1. (1) Pruefung der
   Pflichtfelder". Die Regel eine Zeile darueber nullt `ul`, deshalb fiel es
   nur bei ol auf.

   Merke fuer alle weiteren Faelle: der Kopf von 0_tutorial_base.css nimmt an,
   das einzige Risiko des tut--Praefix sei ein Namenskonflikt. Das stimmt
   nicht. Das Risiko ist Spezifitaet gegen die 25 Stylesheets, die
   noauth/components/faq/css.blade.php pauschal mitlaedt - 27 der 39 Dateien
   bringen einen ungescopten Element-Reset mit. Wo ein tut--Baustein ein
   Element neu definiert, das eine Legacy-Datei ueber eine Klasse plus
   Element anspricht, muss die Regel hier ebenfalls Element plus Klasse
   nennen. Gleiche Spezifitaet reicht, weil 1_components.css als eines der
   letzten Stylesheets laedt.
   -------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------
   SCHRIFTGROESSE: warum die Liste sie selbst nennt (01.09.2026)
   --------------------------------------------------------------------------
   Die Liste setzte keine und erbte damit von ihrem Elternteil. Innerhalb von
   .tut-content ging das gut, dort steht --text-size-100. Ueberall sonst nicht:
   ab 64rem setzt global/1_list.css:82 `body { font-size: 1.25rem }` ungescopt,
   und 26 weitere Dateien des Buendels bringen dieselbe Regel mit. Eine
   .tut-list neben einem Kasten, in einer Kachel oder direkt im Wrapper lief
   auf dem Desktop deshalb mit 20px, also groesser als der Fliesstext, auf den
   sie sich bezieht. Das war der haeufigste Befund der Bestandsaufnahme.

   --tut-list-size ist der Ausweg fuer die Faelle, in denen eine andere Stufe
   richtig ist: wer die Liste in einen Kasten mit eigener Groesse setzt, nennt
   dort eine Stufe der Skala, etwa `--tut-list-size: var(--text-size-90)` (so
   macht es .tut-sourcebox). Ohne Angabe steht die Liste auf --text-size-100,
   unabhaengig davon, was um sie herum passiert.

   IMMER EINEN ECHTEN WERT NENNEN, nie ein CSS-Schluesselwort. `inherit` an
   dieser Variable erbt die VARIABLE vom Elternteil (wo sie nicht gesetzt ist)
   und nicht die Schriftgroesse des Kastens. Die font-size-Deklaration unten
   wird dadurch ungueltig, faellt auf unset zurueck und erbt die 1.25rem des
   ungescopten body-Resets - 20px, also genau der Fehler, den diese Regel
   verhindern soll. Genau so ist es der Quellenbox einmal passiert.
   -------------------------------------------------------------------------- */
ul.tut-list,
ol.tut-list {
    list-style: none;
    padding-left: 0;
    margin: var(--sp-xs) 0;
    margin-bottom: var(--sp-xs)!important;
    font-size: var(--tut-list-size, var(--text-size-100));
}

.tut-list > li {
    position: relative;
    padding-left: 19px;
    padding-bottom: var(--sp-xxs);
    margin-bottom: var(--sp-xxs);
    line-height: 1.6;
}

.tut-list > li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.tut-list > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #cbd5e1;
}

.tut-list--accent > li::before {
    background-color: var(--tut-blue);
}

.tut-list--ol {
    counter-reset: tut-list-items;
}

/* NUMMER: getoentes Quadrat statt gefuelltem Kreis (01.09.2026)
   Der Kreis mass 26px und war damit fast so hoch wie zwei Textzeilen. Er zog
   mehr Aufmerksamkeit auf sich als die Schritte, die er zaehlt, und bei
   zweistelligen Nummern wurde es darin eng. Das Quadrat ist 1.7rem breit,
   traegt eine Toenung statt einer Fuellung und nimmt auch zweistellige Zahlen
   auf. Die Ziffern laufen tabellarisch, damit 9 und 10 gleich breit sind.
   Uebernommen aus der Entwurfsfassung G-B, die als einzige der vier auf
   /design_overview/anleitungen/varianten-listen bestehen geblieben ist - der
   Rest der Liste bleibt der heutige Baustein. */
.tut-list--ol > li {
    padding-left: 2.5rem;
    counter-increment: tut-list-items;
}

.tut-list--ol > li::before {
    content: counter(tut-list-items);
    position: absolute;
    left: 0;
    top: 0.12em;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 5px;
    background-color: var(--tut-blue-tint);
    border: 1px solid #dbe8f5;
    color: var(--tut-blue-dark);
    font-size: var(--text-size-90);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: grid;
    place-items: center;
}

/* --------------------------------------------------------------------------
   Bildschirmfotos
   Ersetzt .figure_img/.tutorial_img_basic (global/container.css). Der
   Original-Schatten haengt an zwei undefinierten Variablen
   (--mc4-color-white-hsl/--mc4-color-black-hsl) und faellt auf den
   Anleitungsseiten deshalb schon heute weg - hier stehen nur die vier
   Ebenen, die tatsaechlich sichtbar sind.
   -------------------------------------------------------------------------- */
.tut-figure {
    margin: var(--sp-m) 0;
    font-size: var(--text-size-90);
    color: grey;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tut-figure__img {
    min-width: auto;
    height: auto;
    max-width: 100%;
    border-radius: 0.25em;
    box-shadow:
        0 1px 3px -1px rgba(0, 0, 0, 0.2),
        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);
}

/* --------------------------------------------------------------------------
   Eingebettetes Video
   Verallgemeinert aus .copy_paste_video_embed/_frame
   (paper_creator_tutorial.blade.php, war dort inline). Bisher an genau
   einer Stelle im Einsatz, jetzt als generischer Baustein statt mit einem
   Namen, der nur diesen einen Anwendungsfall beschreibt.
   -------------------------------------------------------------------------- */
.tut-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
    border-radius: 0.25em;
    overflow: hidden;
}

.tut-video-frame__iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* --------------------------------------------------------------------------
   Tabelle
   Einzige Tabellenform des Systems - eine echte <table>, kein div-Raster.
   Sie hat am 01.09.2026 die frueher eigenstaendige .dst-legal-table
   abgeloest. Der Speichermodi-Vergleich .tut-modetable in Teil B ist
   weiterhin ein div-Raster und koennte spaeter ebenfalls hierher wandern
   (Fall I2).
   -------------------------------------------------------------------------- */
.tut-table {
    width: 100%;
    border-collapse: collapse;
    border: 1px solid var(--tut-border);
    border-radius: 8px;
    overflow: hidden;
    margin: 0.75rem 0;
    font-size: 0.92rem;
}

.tut-table th {
    background: var(--tut-blue-tint);
    color: var(--tut-blue-dark);
    font-weight: 600;
    text-align: left;
    padding: 0.7rem 1rem;
    border-bottom: 2px solid var(--tut-border);
}

.tut-table td {
    padding: 0.65rem 1rem;
    color: #475569;
    border-bottom: 1px solid var(--tut-border);
    line-height: 1.5;
    vertical-align: top;
}

.tut-table tr:last-child td {
    border-bottom: none;
}

.tut-table tr:hover td {
    background: var(--tut-surface);
}

@media (max-width: 767px) {
    .tut-table {
        font-size: 0.84rem;
    }

    .tut-table th,
    .tut-table td {
        padding: 0.5rem 0.7rem;
    }
}

/* --------------------------------------------------------------------------
   Marke
   Verallgemeinert aus .tut-modetable__badge - der einzige der drei heutigen
   Marken-Bausteine (tut-modetable__badge, zbtree_badge, sm_info_hlp), der schon
   sauber als Basis-plus-Modifikator gebaut war.
   -------------------------------------------------------------------------- */
.tut-badge {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    width: fit-content;
}

.tut-badge--blue {
    background: #eff6ff;
    color: var(--tut-blue-dark);
}

.tut-badge--green {
    background: #f0fdf4;
    color: #15803d;
}

.tut-badge--grey {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid var(--tut-border);
}

/* --------------------------------------------------------------------------
   Anweisungs- und Beispielbloecke (Gruppe M)
   Ersetzt Klassen aus surveyjs/paper_upload.css und
   surveyjs/calculations.css, die auf den Anleitungsseiten fuer
   Testupload-fremde Inhalte weiterverwendet wurden.
   -------------------------------------------------------------------------- */
.tut-notes {
    padding-top: var(--sp-s);
    border-top: 1px solid #e5e7eb;
}

.tut-notes > p {
    margin-bottom: 15px;
    color: #4b5563;
}

.tut-notes__group {
    padding: var(--sp-s) var(--sp-x);
}

.tut-compare {
    margin-top: 20px;
    display: flex;
    gap: 20px;
}

.tut-compare__title {
    font-weight: 600;
    margin-bottom: 8px;
    color: #374151;
}

.tut-compare__title--correct {
    color: var(--tut-blue);
}

.tut-compare__title--incorrect {
    color: #dc2626;
}

.tut-compare__list {
    list-style: none;
    padding: 0;
    margin: 0 0 15px 0;
    background: var(--tut-page);
    border-radius: 6px;
    border: 1px solid #e5e7eb;
    width: fit-content;
}

.tut-compare__list li {
    padding: 8px 12px;
    border-bottom: 1px solid #f3f4f6;
    font-size: var(--text-size-90);
    color: #6b7280;
}

.tut-compare__list li:last-child {
    border-bottom: none;
}

.tut-compare--correct .tut-compare__list {
    border-left: 4px solid var(--tut-blue);
}

.tut-compare--incorrect .tut-compare__list {
    border-left: 4px solid #ef4444;
}

.tut-formula {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
    margin-top: var(--sp-s);
}

/* Grund auf --tut-border gezogen (01.09.2026). Der Baustein kam mit
   #d9d9d9 aus .from_to_txt herueber, einem Grau, das in keiner Palette
   dieses Systems vorkommt. Es steht in derselben Rolle wie .tut-highlight
   und bekommt deshalb denselben Grund. */
.tut-formula__pill {
    background-color: var(--tut-border);
    padding: var(--sp-xxs);
    border-radius: 0.25em;
}

/* --------------------------------------------------------------------------
   Interner Link - GETESTET UND BLEIBT SO (01.09.2026)
   Aus global/container.css hierher geholt, Regel unveraendert. Kein JS noetig.
   Die sitewide Fassung bleibt dort fuer die uebrigen Seiten bestehen; hier
   gewinnt diese, weil 1_components.css spaeter geladen wird.
   -------------------------------------------------------------------------- */
.cd-link {
    text-decoration: none;
    background-image: linear-gradient(
        to right,
        hsl(213, 48%, 50%) 50%,
        hsla(250, 84%, 54%, 0.2) 50%
    );
    background-size: 200% 1px;
    background-repeat: no-repeat;
    background-position: 100% 100%;
    transition: background-position 0.2s;
    font-size: var(--text-size-100);
}

.cd-link:hover {
    background-position: 0% 100%;
}


/* --------------------------------------------------------------------------
   Verweiskacheln
   --------------------------------------------------------------------------
   Der Block "weiterfuehrende Anleitungen" am Ende einer Ueberblicksseite.
   Ersetzt die Startseiten-Kacheln aus welcome/1_masonry.css und
   welcome/1_card-v9.css (Fall J2 der Bestandsaufnahme, dort mit "ersetzen"
   markiert) samt der Wrapper-Kette an6-container / an6-max-width-adaptive-lg
   und dem Skript js/welcome/_1_masonry.js.

   Entschieden am 01.09.2026 auf /design_overview/anleitungen/varianten-kacheln
   (Variante A, "ohne Zutaten"). Ein erster Durchgang mit Ersatzformen
   (Kachel ohne Bild, Bildband, Verweisliste, Fortsetzungspfad) war zuvor
   verworfen worden: die Bildkachel bleibt, variiert wurde nur, was sie
   unruhig oder schwer lesbar macht.

   WAS AUS DEM ORIGINAL BLEIBT
   Bild im Hintergrund, Plakette "Anleitung" und Titel oben in der Kachel,
   schwarze Schrift, Radius 8px, Kachelhoehe 110px (mobil 130px). Die
   Titelbreite von 32rem kommt aus an6-max-width-2xs.

   WAS SICH GEAENDERT HAT
   - CSS-Grid statt masonry plus Skript. Damit faellt auch
     .masonry__list { opacity: 0 } weg, das die Kacheln bisher erst nach dem
     Laden des Skripts sichtbar machte.
   - Gleiche Kachelhoehe in einer Reihe, weil das Raster streckt.
   - Aus dem zweistufigen Verlauf (Weiss nach Hellblau) wird eine
     gleichmaessige Toenung. Der alte Verlauf war dort am hellsten, wo der
     Text steht, und am kraeftigsten dort, wo keiner steht.
   - Kein Schatten mehr. Eine 1px-Kante haelt die Kachel stattdessen
     zusammen und wird im Hover zum Markenblau.
   - Der Hover dunkelt die Kachel NICHT ab. Eine Zwischenfassung ging auf
     55% Markenblau und machte damit genau die Stelle schlechter, an der der
     schwarze Titel steht - der Ruhezustand war lesbarer als der Zustand
     unter dem Zeiger.
   - Der Titel ist eine Ueberschrift (h3), kein Absatz. Vorher tauchte er in
     keiner Gliederung auf.

   OFFEN GEBLIEBEN
   Die Bilder sind Farbverlaeufe aus /placeholder_img/ und tragen keine
   Aussage. Ob dort etwas Aussagekraeftiges hin soll, ist eine eigene Frage
   und beruehrt diese Regeln nicht.
   -------------------------------------------------------------------------- */

.tut-linkcards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
    gap: var(--sp-m);
    margin: var(--sp-m) 0;
}

.tut-linkcard {
    position: relative;
    display: block;
    border: 1px solid #dbe8f5;
    border-radius: 8px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    background-color: var(--tut-border);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    transition: border-color 0.2s ease;
}

.tut-linkcard:hover {
    border-color: var(--tut-blue);
}

.tut-linkcard::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: rgb(255 255 255 / 50%);
    transition: background 0.3s ease;
}

.tut-linkcard:hover::before {
    background: rgb(213 230 251 / 66%);
}

.tut-linkcard__content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 110px;
    padding: var(--sp-m);
}

.tut-linkcard__label {
    display: inline-block;
    width: max-content;
    margin: 0 0 var(--sp-xs);
    padding: 3px var(--sp-xs);
    border-radius: 1em;
    background-color: var(--tut-page);
    font-size: var(--text-size-90);
    color: #163c6b;
}

.tut-linkcard__title {
    margin: 0;
    max-width: 32rem;
    font-size: var(--text-size-100);
    font-weight: 700;
    line-height: 1.35;
    color: #000000;
}

@media (max-width: 767px) {
    .tut-linkcard__content {
        min-height: 130px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .tut-linkcard,
    .tut-linkcard::before {
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   Verweisliste mit Icon
   --------------------------------------------------------------------------
   Entschieden am 01.09.2026 auf /design_overview/anleitungen/bausteine.
   Loest .oct-guide ab (aus noauth/oct_overview.css, Datei war schon entfallen,
   die Regeln standen zuletzt in Teil B dieser Datei).

     .tut-guides        Die Liste. Optional mit .tut-guides__lead davor.
     .tut-guide         Die einzelne Karte, IMMER ein a-Element.

   ABGRENZUNG ZU .tut-linkcard
   Die Bildkachel steht am Seitenende und nennt nur ein Ziel. Die Verweiskarte
   hier nennt zusaetzlich, was einen dort erwartet, und kann deshalb auch
   mitten auf einer Ueberblicksseite stehen. Wo eine Beschreibung noetig ist,
   gewinnt diese Form; wo der Titel reicht, die Kachel.

   ENTSCHIEDEN WURDE
   Zwei Entwuerfe mit anderer Form (Zeilen in einem gemeinsamen Kasten,
   nummerierter Fortsetzungspfad) sind verworfen: der Verweis bleibt eine
   einzelne Karte. Ein dritter Durchgang ohne Schaltflaeche ist ebenfalls
   verworfen - die Karte soll sichtbar zum Klicken auffordern. Uebernommen ist
   der Bestand mit sechs Korrekturen und einer staerkeren Schaltflaeche:

   - Die GANZE KARTE ist der Link. Vorher war nur die kleine Pille unten links
     anklickbar; die Karte sah aus wie ein Ziel und verhielt sich wie Text.
     Die Schaltflaeche bleibt sichtbar, ist aber ein span im Link und kein
     zweites Ziel daneben - ein Verweis, eine Klickflaeche.
   - Die Schaltflaeche ist gefuellt (--tut-blue-dark, weisse Schrift) statt
     hell getoent mit blauer Schrift. Hellblau auf weiss liest sich als
     Beschriftung, nicht als Knopf.
   - Sichtbarer Tastaturfokus ueber :focus-visible. Vorher nur der
     Standardrahmen des Browsers an der Pille.
   - Kein Schatten. Der alte lag bei 3% Alpha unter einer 1px-Kante und war
     nicht sichtbar. Wie bei .tut-linkcard haelt eine Kante die Karte
     zusammen und geht im Hover auf Markenblau.
   - Alle Werte aus den Tokens. Der Bestand hielt neun feste Werte, darunter
     zweimal das in 0_tutorial_base.css abgeschaffte #475569.
   - Unter 768px bleibt die Plakette NEBEN dem Titel. Der Bestand brach auf
     flex-direction: column um und verschenkte eine ganze Zeile an ein 48px
     grosses Quadrat ohne Aussage.

   Der Titel bekommt im Hover ausdruecklich KEINE Unterstreichung. Die
   Rueckmeldung kommt von der Kante, von der aufhellenden Schaltflaeche und
   vom wandernden Pfeil; ein Kartentitel ist eine Ueberschrift und soll nicht
   zusaetzlich wie ein Textlink aussehen.

   Icons sind Hugeicons (stroke), nicht mehr flaechige SVG ueber fill.
   -------------------------------------------------------------------------- */

.tut-guides,
.tut-guides * {
    /* Ausdruecklich, statt sich auf den Reset eines der 25 Buendel-
       Stylesheets zu verlassen: overview_create_tests laedt sie noch alle,
       eine kuenftige Arbeitsfassung keine davon. */
    box-sizing: border-box;
}

.tut-guides {
    display: flex;
    flex-direction: column;
    gap: var(--sp-m);
    margin: var(--sp-mm) 0;
}

.tut-guides__lead {
    /* Der einleitende Satz ueber der Liste. Optional. */
    color: var(--tut-text);
    font-size: var(--text-size-100);
    line-height: var(--tut-lh-text);
    max-width: var(--tut-measure);
    margin: 0 0 var(--sp-mm);
}

.tut-guide {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-m);
    padding: var(--sp-mm);
    border: 1px solid var(--tut-border);
    border-radius: var(--tut-radius-l);
    background-color: var(--tut-page);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.18s ease;
}

.tut-guide:hover {
    border-color: var(--tut-blue);
}

.tut-guide:focus-visible {
    outline: 2px solid var(--tut-blue);
    outline-offset: 2px;
}

.tut-guide__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: var(--tut-radius-s);
    background-color: var(--tut-blue-tint);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tut-guide__icon svg {
    width: 22px;
    height: 22px;
    color: var(--tut-blue-dark);
}

.tut-guide__content {
    flex: 1;
    min-width: 0;
}

.tut-guide__title {
    /* Ebene h3: die Karte sitzt unter der Abschnittsueberschrift. */
    font-size: var(--text-size-200);
    font-weight: 600;
    color: var(--tut-blue-dark);
    line-height: var(--tut-lh-tight);
    text-wrap: balance;
    margin: 0 0 var(--sp-xxs);
}

.tut-guide__desc {
    color: var(--tut-text);
    font-size: var(--text-size-100);
    line-height: var(--tut-lh-text);
    max-width: var(--tut-measure);
    margin: 0 0 var(--sp-m);
}

.tut-guide__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    border-radius: var(--tut-radius-s);
    background-color: var(--tut-blue-dark);
    color: var(--tut-page);
    font-size: var(--text-size-95);
    font-weight: 600;
    line-height: 1;
    transition: background-color 0.18s ease;
}

.tut-guide:hover .tut-guide__cta {
    background-color: var(--tut-blue);
}

.tut-guide__cta svg {
    flex-shrink: 0;
    width: 15px;
    height: 15px;
    transition: transform 0.18s ease;
}

.tut-guide:hover .tut-guide__cta svg {
    transform: translateX(3px);
}

@media (prefers-reduced-motion: reduce) {

    .tut-guide,
    .tut-guide__cta,
    .tut-guide__cta svg {
        transition: none;
    }
}

@media (max-width: 767px) {
    .tut-guide {
        padding: var(--sp-m);
        gap: var(--sp-s);
    }

    .tut-guide__icon {
        width: var(--tut-icon-box);
        height: var(--tut-icon-box);
    }

    .tut-guide__icon svg {
        width: 18px;
        height: 18px;
    }

    .tut-guide__title {
        font-size: var(--text-size-150);
    }
}

/* --------------------------------------------------------------------------
   Aufklappbare Fragen
   --------------------------------------------------------------------------
   Entschieden am 01.09.2026 auf /design_overview/anleitungen/varianten-aufklappen
   (Gruppe K). Zwei Fassungen sind uebernommen, weil die Gruppe zwei Szenarien
   hat: die Fragensammlung als eigener Teil einer Seite, und die einzelne
   Nebenfrage mitten im Text.

     .tut-faq             Standard. Weisse Karte je Frage, Schatten, Frage in
                          --text-size-150. Die Fragensammlung.
     .tut-faq--small      Kleine Faelle. Kante statt Schatten, Zeichen in einer
                          Plakette, Frage in --text-size-95 ohne Fettdruck,
                          Antwort in --text-size-90.

   WAS AUS DEM BESTAND BLEIBT
   Die Standardfassung ist die Optik des FAQ-Akkordeons .accordion-v2 aus
   noauth/components/faq/*.blade.php: weisse Karte, Radius 0.25em, die
   vierstufige Schattenstaffel samt Hover-Stufe, die Abstaende 0.75/1.25rem und
   ab 64rem 1.125/2rem.

   WAS SICH GEAENDERT HAT
   - KEIN JAVASCRIPT MEHR. Statt .accordion-v2 mit js/help/_1_accordion.js
     steht hier details/summary. Tastaturbedienung, Vorlesesoftware und der
     Auf- und Zuklapp-Zustand kommen damit vom Browser. Das Skript setzte die
     aria-Attribute erst beim Laden nach, weil sie im Markup fehlten.
   - Es ist immer nur eine Frage offen, uebernommen aus dem Attribut name am
     details-Element. Browser ohne diese Unterstuetzung klappen mehrere
     gleichzeitig auf, was genau dem alten Verhalten entspricht - es faellt
     also nichts aus. Jede Liste auf einer Seite braucht dafuer einen eigenen
     Wert in name, sonst schliessen sich zwei Listen gegenseitig.
   - DER CHEVRON STEHT LINKS. Im Akkordeon sass das Zeichen am rechten Rand und
     damit je nach Fragelaenge irgendwo zwischen 30 und 900px vom Zeilenanfang
     entfernt. Links bilden die Zeichen eine Spalte, an der das Auge die Liste
     hinunterlaeuft. Er dreht sich um 180 Grad statt vom Kreuz zum Winkel: die
     Kreuz-Bewegung haengt am eigenen Skript.
   - Die Frage laeuft auf --text-size-150 statt --text-size-100. Vorher war die
     Zeile, die man anklickt, typografisch nicht von der Zeile zu
     unterscheiden, die man liest. Die Stufe ist dafuer neu in fonts.css.
   - Aus zwoelf Klassen je Frage (davon acht reine Abstandsklassen) werden vier.

   STAND 01.09.2026
   Alle 18 Anleitungsseiten stehen auf diesem Baustein. .tut-disclosure, die
   Aufklapp-Form der Datenschutzseiten, ist damit leer gelaufen und aus dieser
   Datei entfernt. Ausserhalb der Anleitungen laeuft .accordion-v2 weiter: die
   77 Fragen der Hilfeseiten, die Tarifseiten und das Onboarding. Sie folgen
   erst mit der jeweiligen Seite.
   -------------------------------------------------------------------------- */

/* ul. vor der Klasse aus demselben Grund wie bei .tut-list: die
   Legacy-Stylesheets sprechen Listen ueber Klasse plus Element an. */
ul.tut-faq {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.575rem;
    margin: var(--sp-mm) 0;
    padding: 0;
}

.tut-faq > li {
    margin: 0;
    padding: 0;
}

.tut-faq__item {
    background-color: var(--tut-page);
    border-radius: 0.25em;
    box-shadow:
        inset 0 1px 0.5px 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: box-shadow 0.3s;
}

.tut-faq__item:hover {
    box-shadow:
        inset 0 1px 0.5px 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);
}

.tut-faq__item > summary {
    display: flex;
    align-items: center;
    gap: var(--sp-s);
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    list-style: none;
}

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

/* KEIN FOKUSRAHMEN (Fabio, 01.09.2026). Chrome setzt den Fokus beim Klick auf
   ein summary und zeichnet dafuer seinen schwarzen Standardrahmen - auch mit
   der Maus, wo niemand ihn braucht. Die Rueckmeldung, dass die Frage offen
   ist, kommt vom gedrehten Chevron, der Farbe der Frage und dem Antworttext
   selbst. */
.tut-faq__item > summary:focus,
.tut-faq__item > summary:focus-visible {
    outline: none;
}

.tut-faq__chevron {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    color: #94a3b8;
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1), color 0.15s ease;
}

.tut-faq__item > summary:hover .tut-faq__chevron {
    color: var(--tut-blue);
}

.tut-faq__item[open] .tut-faq__chevron {
    transform: rotate(180deg);
    color: var(--tut-blue);
}

.tut-faq__title {
    flex: 1;
    font-size: var(--text-size-150);
    line-height: 1.4;
    color: var(--tut-text-strong);
}

.tut-faq__item[open] .tut-faq__title {
    color: var(--tut-blue-dark);
}

/* Die Antwort steht auf der Textkante der Frage: Chevronbreite plus Abstand
   plus das Innenmass der Karte. */
.tut-faq__body {
    padding: 0.25rem 1.25rem 1.25rem calc(20px + var(--sp-s) + 1.25rem);
    animation: tut-faq-reveal 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tut-faq__body p {
    margin: 0 0 var(--sp-xs);
    font-size: var(--text-size-100);
    line-height: var(--tut-lh-text);
    color: var(--tut-text);
}

.tut-faq__body p:last-child {
    margin-bottom: 0;
}

@keyframes tut-faq-reveal {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 64rem) {

    ul.tut-faq {
        gap: 0.375rem;
    }

    .tut-faq__item > summary {
        padding: 1.125rem 2rem;
    }

    .tut-faq__body {
        padding: 0.375rem 2rem 2rem calc(20px + var(--sp-s) + 2rem);
    }
}


/* KLEINE FASSUNG
   Fuer die einzelne Nebenfrage mitten im Text, nicht fuer die Fragensammlung.
   Sie soll den Absatz nicht unterbrechen, deshalb: eine feine Kante statt der
   Schattenstaffel, kein Groessensprung ueber den Fliesstext hinaus, und die
   Frage ohne Fettdruck. Erkennbar bleibt sie an der Plakette links, die sich
   beim Aufklappen fuellt und dreht - das Zeichen traegt hier die Aufgabe, die
   in der Standardfassung die Groesse uebernimmt.

   Das zusaetzliche span.tut-faq__mark um den Chevron gibt es NUR hier. Die
   Standardfassung setzt den Chevron blank in die Zeile. */
.tut-faq--small .tut-faq__item {
    border: 1px solid var(--tut-border);
    border-radius: var(--tut-radius-s);
    box-shadow: none;
    transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.tut-faq--small .tut-faq__item:hover {
    box-shadow: none;
}

.tut-faq--small .tut-faq__item[open] {
    border-color: #dbe8f5;
    box-shadow: 0 8px 20px -14px rgba(31, 76, 131, 0.65);
}

.tut-faq--small .tut-faq__item > summary {
    padding: 0.7rem var(--sp-m);
}

.tut-faq__mark {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--tut-surface);
    color: var(--tut-text-muted);
    display: grid;
    place-items: center;
    transition: background-color 0.18s ease, color 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.tut-faq__mark svg {
    width: 14px;
    height: 14px;
}

.tut-faq--small .tut-faq__item[open] .tut-faq__mark {
    background-color: var(--tut-blue);
    color: #ffffff;
    transform: rotate(180deg);
}

.tut-faq--small .tut-faq__title {
    font-size: var(--text-size-95);
    font-weight: 400;
    line-height: 1.45;
}

.tut-faq--small .tut-faq__body {
    padding: 0 var(--sp-m) var(--sp-m) calc(22px + var(--sp-s) + var(--sp-m));
}

.tut-faq--small .tut-faq__body p {
    font-size: var(--text-size-90);
}

@media (min-width: 64rem) {

    .tut-faq--small .tut-faq__item > summary {
        padding: 0.7rem var(--sp-m);
    }

    .tut-faq--small .tut-faq__body {
        padding: 0 var(--sp-m) var(--sp-m) calc(22px + var(--sp-s) + var(--sp-m));
    }
}

@media (prefers-reduced-motion: reduce) {

    .tut-faq__body {
        animation: none;
    }

    .tut-faq__item,
    .tut-faq__chevron,
    .tut-faq__mark {
        transition: none;
    }
}


/* ==========================================================================
   TEIL B - UNVERAENDERT UEBERNOMMENE BAUSTEINE
   ==========================================================================
   Diese Bloecke standen schon vorher in einer eigenen, nur von den
   Anleitungen genutzten Datei oder in einem <style>-Block einer einzelnen
   Blade-Datei. Klassennamen und Optik sind unveraendert - nur der Ort hat
   sich geaendert, damit nichts Anleitungs-Eigenes mehr verstreut liegt.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Umschalter mit wanderndem Grund (nur help.blade.php)
   Uebernommen aus public/css/global/1_morphing-background.css.
   Klassennamen unveraendert (Fabio, 01.09.2026): .demo-morph-bg-list und
   die Geschwister bleiben, wie sie sind.

   WARUM UEBERNOMMEN UND NICHT VERLINKT: die Quelldatei bringt denselben
   ungescopten Element-Reset mit wie das Buendel - body auf 1.125rem, h1 auf
   2.5rem, h2 auf 2.125rem. Sie laedt auf der Hilfeseite nach 2_frame.css und
   haette damit den Seitenkopf und den ganzen Fliesstext ueberschrieben.
   Hier stehen nur die Komponentenregeln, ohne Reset.

   Die Quelldatei bleibt bestehen, sie laeuft weiter auf dashboard, tests,
   surveyjs und den Filtern. Nicht mitgenommen sind die dort ebenfalls
   definierten, auf der Hilfeseite nicht benutzten Teile (.demo-morph-bg-link,
   .add_test_morph, .pill_morph, .morph_flex und die cd-margin-*-Helfer).

   Das JavaScript bleibt js/global/_1_morphing-background.js.
   -------------------------------------------------------------------------- */
.morph-bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 1px;
    width: 1px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s;
    transform-origin: left top;
    backface-visibility: hidden;
}

.morph-bg--visible {
    opacity: 1;
}

.morph-bg--has-transition {
    transition: 0.3s;
    will-change: transform, border-radius, height, width;
}

.morph-bg.demo-morph-bg-2 {
    background-color: #ffffff;
    box-shadow: 0px 9px 9px -6px rgba(206, 217, 232, 0.5);
}

.morph_welc_div {
    display: flex;
    margin-bottom: var(--sp-x);
}

.demo-morph-bg-list {
    display: inline-flex;
    flex-wrap: wrap;
}

.demo-morph-bg-button {
    border-radius: 50em;
    font-family: var(--tut-font);
    font-size: var(--text-size-100);
    cursor: pointer;
    color: grey;
    padding: 0.75rem 1rem;
    transition: color 0.3s;
}

.demo-morph-bg-button.active_morph {
    color: var(--tut-blue);
}

/* Helfer aus derselben Quelldatei, nur die drei benutzten. */
.cd-position-relative {
    position: relative;
}

.cd-z-index-1 {
    z-index: 1;
}

.cd-z-index-2 {
    z-index: 2;
}

.cd-bg {
    background-color: #ededed;
    padding: var(--sp-ss);
    border-radius: 50em;
}

@media (max-width: 767px) {
    .morph_welc_div {
        justify-content: center;
    }

    .demo-morph-bg-button {
        font-size: var(--text-size-95);
    }
}


/* --------------------------------------------------------------------------
   Rollenbaum (nur team_tutorial.blade.php)
   Umgezogen aus public/css/help/4_team-role-tree.css.
   Praefix zbtree_ (unveraendert).
   -------------------------------------------------------------------------- */
.zbtree_wrap {
    margin: var(--sp-mm) 0;
    padding: var(--sp-mm);
    background-color: #f7fafc;
    border: 1px solid #e0e0e0;
    border-radius: 0.25em;
}

.zbtree_legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-s) var(--sp-mm);
    margin-bottom: var(--sp-mm);
    padding-bottom: var(--sp-s);
    border-bottom: 1px solid #e0e0e0;
}

.zbtree_legend_item {
    display: flex;
    align-items: center;
    gap: var(--sp-xs);
    font-size: var(--text-size-90);
    line-height: 1.3;
    color: #222222;
}

.zbtree_dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.zbtree_dot--resp {
    background-color: #4279BC;
}

.zbtree_dot--comp {
    background-color: #B8D7FF;
    border: 1px solid #4279BC;
}

.zbtree_root {
    display: flex;
    justify-content: center;
}

.zbtree_person {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-xs);
    max-width: 320px;
    padding: var(--sp-s) var(--sp-mm);
    background-color: #FFFFFF;
    border: 1px solid #4279BC;
    border-radius: 0.25em;
    text-align: center;
}

.zbtree_person_icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #4279bc30;
    color: #4279BC;
}

.zbtree_person_icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 2;
}

.zbtree_person_title {
    font-weight: 600;
    line-height: 1.3;
}

.zbtree_badge {
    display: inline-block;
    padding: 1px var(--sp-xs);
    border-radius: 4px;
    font-size: var(--text-size-90);
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
}

.zbtree_badge--resp {
    background-color: #4279BC;
    color: #FFFFFF;
}

.zbtree_badge--comp {
    background-color: #B8D7FF;
    border: 1px solid #4279BC;
    color: #2c5282;
}

.zbtree_stem {
    width: 2px;
    height: var(--sp-mm);
    margin: 0 auto;
    background-color: #cbd5e0;
}

.zbtree_branches {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: var(--sp-s);
    margin: 0;
    padding: 0;
    list-style: none;
}

.zbtree_branch {
    position: relative;
    flex: 1 1 0;
    max-width: 220px;
    padding-top: var(--sp-mm);
    margin: 0;
}

.zbtree_branch::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: var(--sp-mm);
    background-color: #cbd5e0;
}

.zbtree_branch::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background-color: #cbd5e0;
}

.zbtree_branch:first-child::after {
    left: 50%;
}

.zbtree_branch:last-child::after {
    right: 50%;
}

.zbtree_branch:only-child::after {
    display: none;
}

.zbtree_test {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-xxs);
    height: 100%;
    padding: var(--sp-s);
    background-color: #FFFFFF;
    border: 1px solid #e0e0e0;
    border-radius: 0.25em;
    text-align: center;
}

.zbtree_test_title {
    font-weight: 600;
    line-height: 1.3;
}

.zbtree_caption {
    margin: var(--sp-mm) 0 0 0;
    font-size: var(--text-size-90);
    line-height: 1.5;
    color: #222222;
    text-align: center;
}

@media (max-width: 767px) {
    .zbtree_wrap {
        padding: var(--sp-s);
    }

    .zbtree_person {
        max-width: none;
        width: 100%;
    }

    .zbtree_branches {
        flex-direction: column;
        gap: var(--sp-s);
        padding-left: var(--sp-x);
    }

    .zbtree_branch {
        flex: 0 0 auto;
        max-width: none;
        padding-top: 0;
    }

    .zbtree_branch::before {
        top: 50%;
        left: calc(var(--sp-m) * -1);
        width: var(--sp-m);
        height: 2px;
    }

    .zbtree_branch::after,
    .zbtree_branch:first-child::after,
    .zbtree_branch:last-child::after {
        top: 0;
        bottom: calc(var(--sp-s) * -1);
        left: calc(var(--sp-m) * -1);
        right: auto;
        width: 2px;
        height: auto;
    }

    .zbtree_branch:last-child::after {
        bottom: 50%;
    }

    .zbtree_branch:only-child::after {
        display: block;
    }

    .zbtree_test {
        align-items: flex-start;
        text-align: left;
    }

    .zbtree_caption {
        text-align: left;
    }
}

/* --------------------------------------------------------------------------
   Datenschutz-Diagramme, Entscheidungshilfe, Tabellen, Aufklapp-Plan
   (nur data_safety_tutorial.blade.php + platform_security_tutorial.blade.php)
   Umgezogen aus dem <style>-Block in
   noauth/components/data_safety_styles.blade.php.
   KEIN FREMDER PRAEFIX MEHR (01.09.2026). Die Bloecke hier trugen dst-
   (data safety tutorial) und psg- (patient storage guide), also die
   Herkunftsnamen zweier Seiten. Beide sind auf tut- umbenannt:

     .tut-quiz        Entscheidungshilfe, von beiden Seiten benutzt
     .tut-plan        Ergebnisliste der Entscheidungshilfe
     .tut-modetable   Vergleich der Speichermodi
     .tut-sourcebox__row/__label/__item   Herkunftsangaben unter dem Text

   Diagramm, Karten, Quellenbox, Beispielkasten, Tabelle und Zwischentitel
   gab es doppelt, einmal unter dst- und einmal unter psg- beziehungsweise
   schon unter tut-. Die Kopien sind weg; es bleibt je eine Fassung.
   -------------------------------------------------------------------------- */
.toc__link--sub {
    padding-left: 1rem;
    font-size: 0.85em;
    opacity: 0.85;
}


.tut-quiz {
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    overflow: hidden;
    margin: 1rem 0 0.5rem 0;
}

.tut-quiz__step {
    display: none;
    padding: 1.5rem;
}

.tut-quiz__step.is-active {
    display: block;
    animation: tutQuizFadeIn 0.25s ease;
}

@keyframes tutQuizFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.tut-quiz__progress {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 1rem;
}

.tut-quiz__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #e2e8f0;
    transition: background 0.2s;
}

.tut-quiz__dot.is-done {
    background: #4279BC;
}

.tut-quiz__dot.is-current {
    background: #4279BC;
    box-shadow: 0 0 0 3px rgba(66, 121, 188, 0.2);
}

.tut-quiz__question {
    font-size: 0.95rem;
    font-weight: 500;
    color: #1e293b;
    line-height: 1.5;
    margin: 0 0 0.25rem 0;
}

.tut-quiz__hint {
    font-size: 0.84rem;
    color: #64748b;
    margin: 0 0 1.1rem 0;
}

.tut-quiz__buttons {
    display: flex;
    gap: 0.6rem;
}

.tut-quiz__btn {
    flex: 1;
    padding: 0.55rem 1rem;
    border: 1.5px solid #cbd5e1;
    border-radius: 8px;
    background: #f8fafc;
    color: #334155;
    font-size: 0.88rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}

.tut-quiz__btn:hover {
    border-color: #4279BC;
    background: #f0f7ff;
    color: #1f4c83;
}

.tut-quiz__result {
    text-align: left;
}

.tut-quiz__eyebrow {
    display: block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 4px;
}

.tut-quiz__result-title {
    font-size: var(--text-size-200);
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    margin: 0 0 0.5rem 0;
}

.tut-quiz__result-lead {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    margin: 0 0 1.1rem 0;
}

.tut-quiz__restart-wrap {
    text-align: center;
    margin-top: var(--sp-m);
}

.tut-plan {
    display: flex;
    flex-direction: column;
    gap: var(--sp-mm);
}

.tut-plan__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #0f172a;
    margin: 0 0 0.45rem 0;
}

.tut-plan__list {
    margin: 0;
    padding: 0;
    list-style: none;
    background: #ffffff;
    border: 1px solid #cddaea;
    border-radius: 10px;
    overflow: hidden;
}

.tut-plan__list--optional {
    border-color: #e2e8f0;
}

.tut-plan__list > li {
    margin: 0;
    padding: 0;
}

.tut-plan__list > li::before {
    content: none;
}

.tut-plan__list > li + li {
    border-top: 1px solid #e6ebf0;
}

.tut-plan__item > summary {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1rem;
    cursor: pointer;
    list-style: none;
    transition: background 0.12s ease;
}

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

.tut-plan__item > summary:hover {
    background: #f6f9fc;
}

.tut-plan__item-text {
    flex: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: #0f172a;
    line-height: 1.45;
}

.tut-plan__list--optional .tut-plan__item-text {
    color: #334155;
}

.tut-plan__sign {
    position: relative;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.tut-plan__sign::before,
.tut-plan__sign::after {
    content: '';
    position: absolute;
    background: #475569;
    border-radius: 1px;
}

.tut-plan__sign::before {
    top: 7px;
    left: 0;
    width: 16px;
    height: 2px;
}

.tut-plan__sign::after {
    left: 7px;
    top: 0;
    width: 2px;
    height: 16px;
    transition: transform 0.18s ease;
}

.tut-plan__item[open] .tut-plan__sign::after {
    transform: scaleY(0);
}

.tut-plan__body {
    padding: 0 1rem 0.9rem 1rem;
}

.tut-plan__body p {
    margin: 0 0 0.5rem 0;
    font-size: 0.875rem;
    color: #334155;
    line-height: 1.65;
}

.tut-plan__body p:last-child {
    margin-bottom: 0;
}

.tut-sourcebox__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: var(--sp-mm);
    padding-top: 0.7rem;
    border-top: 1px solid #e2e8f0;
}

.tut-sourcebox__label {
    font-size: 0.8rem;
    color: #64748b;
    flex: 0 0 auto;
}

.tut-sourcebox__item {
    display: inline-flex;
    align-items: center;
    padding: 3px 9px;
    border-radius: 999px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    color: #475569;
    font-size: 0.75rem;
}

.tut-quiz__restart {
    display: inline-block;
    font-size: 0.82rem;
    color: #4279BC;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tut-quiz__restart:hover {
    color: #1f4c83;
}


.tut-modetable {
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin: 1rem 0;
}

.tut-modetable__row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.tut-modetable__row + .tut-modetable__row {
    border-top: 1px solid #e2e8f0;
}

.tut-modetable__cell {
    padding: 16px 18px;
}

.tut-modetable__header {
    background: #f8fafc;
}

.tut-modetable__header .tut-modetable__cell--label {
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
}

.tut-modetable__header .tut-modetable__cell--mode {
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    display: flex;
    align-items: center;
    gap: 8px;
    border-left: 1px solid #e2e8f0;
}

.tut-modetable__header .tut-modetable__cell--mode svg {
    width: 20px;
    height: 20px;
    color: #4279BC;
    flex-shrink: 0;
}

.tut-modetable__cell--label {
    background: #fafbff;
    border-right: 1px solid #e2e8f0;
}

.tut-modetable__data-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.tut-modetable__data-label svg {
    width: 20px;
    height: 20px;
    color: #4279BC;
    flex-shrink: 0;
    margin-top: 1px;
}

.tut-modetable__data-label strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.3;
}

.tut-modetable__examples {
    display: block;
    font-size: 12px;
    color: #94a3b8;
    margin-top: 2px;
}

.tut-modetable__cell--value {
    display: flex;
    flex-direction: column;
    gap: 6px;
    border-left: 1px solid #e2e8f0;
}

.tut-modetable__desc {
    font-size: 12.5px;
    color: #64748b;
    line-height: 1.5;
}

.tut-modetable__badge {
    display: inline-flex;
    align-items: center;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    width: fit-content;
}

.tut-modetable__badge--server {
    background: #eff6ff;
    color: #1f4c83;
}

.tut-modetable__badge--local {
    background: #f0fdf4;
    color: #15803d;
}

.tut-modetable__badge--e2ee {
    background: #f0fdf4;
    color: #15803d;
}

@media (max-width: 767px) {
    .tut-modetable__row {
        grid-template-columns: 1fr;
    }

    .tut-modetable__header {
        display: none;
    }

    .tut-modetable__cell--label {
        border-right: none;
        border-bottom: 1px solid #f1f5f9;
        padding: 14px 16px;
    }

    .tut-modetable__cell--value {
        border-left: none;
        padding: 12px 16px;
        border-bottom: 1px solid #f1f5f9;
    }

    .tut-modetable__cell--value::before {
        font-size: 11px;
        font-weight: 600;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.3px;
    }

    .tut-modetable__row:not(.tut-modetable__header) .tut-modetable__cell--value:nth-child(2)::before {
        content: 'Server-Modus';
        display: block;
        margin-bottom: 4px;
    }

    .tut-modetable__row:not(.tut-modetable__header) .tut-modetable__cell--value:nth-child(3)::before {
        content: 'Lokaler Modus';
        display: block;
        margin-bottom: 4px;
    }
}

@media (max-width: 640px) {


    .tut-quiz__step {
        padding: 1.1rem;
    }

    .tut-quiz__buttons {
        flex-direction: column;
    }


    .tut-plan__item > summary {
        padding: 0.75rem 0.85rem;
        align-items: flex-start;
    }

    .tut-plan__body {
        padding: 0 0.85rem 0.85rem 0.85rem;
    }
}

/* --------------------------------------------------------------------------
   Speichermodus-Diagramm, -Vergleich und Entscheidungshilfe
   (nur patient-storage-parts/daten-uebersicht.blade.php)
   Umgezogen aus dem <style>-Block derselben Datei.
   Praefix am 01.09.2026 von psg- auf tut- umbenannt (der Herkunftsname
   der Seite gehoert nicht in einen Klassennamen dieses Systems):
   .tut-diagram, .tut-rowcompare, .tut-quiz.

   Die Entscheidungshilfe .tut-quiz steht weiter oben im dst-Block und
   wird von beiden Seiten benutzt. Die dst-Fassungen von Diagramm und
   Karten sind bis auf padding/margin am Rahmen regelgleich mit den
   hiesigen; ihr Zusammenlegen bleibt offen, bis die Datenschutzseiten
   nachgezogen sind.
   -------------------------------------------------------------------------- */
/* padding und margin kamen aus der frueheren dst-Fassung, gap aus der
   frueheren psg-Fassung. Beide waren sonst regelgleich und sind am
   01.09.2026 zu diesem einen Baustein zusammengelegt. */
.tut-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
    padding: 2rem 1rem;
    margin: 1.5rem 0 2rem 0;
}

.tut-diagram__hub {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    background: linear-gradient(135deg, #1f4c83, #4279BC);
    color: white;
    padding: 0.65rem 1.5rem;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.05rem;
    box-shadow: 0 4px 16px rgba(66, 121, 188, 0.25);
}

.tut-diagram__hub svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tut-diagram__connectors {
    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 700px;
    height: 40px;
    position: relative;
}

.tut-diagram__connectors::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 14px;
    background: #4279BC;
    transform: translateX(-50%);
}

.tut-diagram__connectors::after {
    content: '';
    position: absolute;
    top: 14px;
    left: calc(100% / 6);
    right: calc(100% / 6);
    height: 2px;
    background: #4279BC;
}

.tut-diagram__line {
    flex: 1;
    position: relative;
}

.tut-diagram__line::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    width: 2px;
    height: 26px;
    background: #4279BC;
    transform: translateX(-50%);
}

.tut-diagram__cards {
    display: flex;
    gap: 1rem;
    width: 100%;
    max-width: 700px;
}

.tut-diagram__card {
    flex: 1;
    background: white;
    border-radius: 12px;
    padding: 1.1rem 1rem;
    box-shadow: 0 2px 12px rgba(66, 121, 188, 0.08);
    text-align: center;
    border: 1px solid #e8eff7;
    transition: all 0.25s ease;
}

.tut-diagram__card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(66, 121, 188, 0.14);
}

.tut-diagram__card-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #4279bc12;
    padding: 10px;
    border-radius: 10px;
    margin-bottom: 0.6rem;
}

.tut-diagram__card-icon svg {
    width: 22px;
    height: 22px;
    color: #4279BC;
    stroke: #4279BC;
    fill: none;
}

.tut-diagram__card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #1a202c;
    margin: 0 0 0.35rem 0;
}

.tut-diagram__card-desc {
    font-size: 0.82rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.5;
}

.tut-rowcompare {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    overflow: hidden;
    margin: 0.75rem 0;
}

.tut-rowcompare__row {
    display: flex;
    align-items: stretch;
}

.tut-rowcompare__row + .tut-rowcompare__row {
    border-top: 1px solid #e2e8f0;
}

.tut-rowcompare__label {
    flex: 0 0 150px;
    display: flex;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: #1f4c83;
    background-color: #f0f7ff;
    border-right: 1px solid #e2e8f0;
}

.tut-rowcompare__text {
    flex: 1;
    padding: 0.75rem 1rem;
    color: #475569;
    line-height: 1.6;
    font-size: 0.95rem;
}

.tut-quiz__badge {
    display: inline-block;
    font-size: 0.92rem;
    font-weight: 600;
    padding: 0.4rem 1rem;
    border-radius: 6px;
    margin-bottom: 0.6rem;
}

.tut-quiz__badge--server {
    background: #f0f7ff;
    color: #1f4c83;
    border: 1px solid #b8d4f0;
}

.tut-quiz__badge--local {
    background: #f0fdf4;
    color: #14532d;
    border: 1px solid #b3e6c7;
}

.tut-quiz__result-text {
    font-size: 0.88rem;
    color: #475569;
    line-height: 1.55;
    margin: 0 0 1rem 0;
}

@media (max-width: 640px) {
    .tut-rowcompare__row {
        flex-direction: column;
    }

    .tut-rowcompare__label {
        flex: none;
        border-right: none;
        border-bottom: 1px solid #e2e8f0;
        padding: 0.6rem 1rem;
    }

    .tut-rowcompare__text {
        padding: 0.6rem 1rem;
    }

    .tut-diagram__connectors {
        display: none;
    }

    .tut-diagram {
        padding: 1.5rem 0;
        gap: var(--sp-m);
    }

    .tut-diagram__cards {
        flex-direction: column;
        gap: 0.5rem;
        max-width: 100%;
    }

    .tut-diagram__card {
        display: flex;
        align-items: center;
        text-align: left;
        gap: 0.75rem;
        padding: 0.9rem 1rem;
    }

    .tut-diagram__card-icon {
        margin-bottom: 0;
    }

    .tut-diagram__card-text {
        flex: 1;
    }

    .tut-quiz__step {
        padding: 1.1rem;
    }

    .tut-quiz__buttons {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   Variablen-Tabelle
   (nur parts/scales_tutorial_part.blade.php, eingebunden von
   digital_creator_tutorial.blade.php und paper_creator_tutorial.blade.php)
   Umgezogen aus dem <style>-Block derselben Datei.
   -------------------------------------------------------------------------- */
.tutorial_global_vars_table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--sp-x);
}

.tutorial_global_vars_table td {
    padding-bottom: var(--sp-xxs);
}

.tutorial_global_vars_table td:last-child {
    text-align: left;
}

.tutorial_global_vars_table td:first-child {
    max-width: 150px;
}

.tutorial_global_var_name {
    margin: 0 !important;
    line-height: 0 !important;
}

/* --------------------------------------------------------------------------
   Geteilte Bausteine aus resources/views/surveyjs/parts/tutorials/
   (question_types, test_structure, settings, variable_case, markdown)

   Diese Teilstuecke stehen auf digital_creator_tutorial UND im Test-Editor.
   Ihre Klassennamen duerfen deshalb nicht auf tut- umbenannt werden - der
   Editor benutzt dieselben Dateien und laedt seine eigenen Stylesheets.

   NACHBAU STATT EINBINDUNG: help/1_accordion.css und global/container.css
   bringen beide einen ungescopten Element-Reset mit (* { font: inherit },
   eigene h1 bis h4, ol/ul ohne list-style). Deshalb steht hier die Optik
   noch einmal, gescopet auf .tut-content, statt eines Links auf die
   Bestandsdateien.

   Was die Anleitungsseite braucht, ist nur ein Ausschnitt: das Aufklapp-
   Register (.accordion, JS aus js/help/_1_accordion.js laeuft weiter),
   die Bildschirmfotos und die Inline-Hervorhebung.
   -------------------------------------------------------------------------- */
.tut-content .accordion__item {
    border-bottom: 1px solid var(--tut-border);
}

.tut-content .accordion__item:first-child {
    border-top: 1px solid var(--tut-border);
}

.tut-content .accordion__header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    cursor: pointer;
    padding: 0.75rem 1.25rem;
    background: none;
    border: 0;
    color: var(--tut-text-strong);
}

.tut-content .accordion__header svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.tut-content .accordion__header svg .icon__group {
    stroke-width: 2;
}

/* Der Pfeil dreht sich um denselben Punkt wie im Bestand, sonst wandert er
   beim Aufklappen aus dem Feld. */
.tut-content .accordion__icon-arrow .icon__group {
    transform-origin: 50% 50%;
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.tut-content .accordion__icon-arrow .icon__group > * {
    transform-origin: 10px 14px;
    transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}

.tut-content .accordion__item--is-open > .accordion__header > .accordion__icon-arrow .icon__group > *:first-child {
    transform: translateY(-8px) rotate(-90deg);
}

.tut-content .accordion__item--is-open > .accordion__header > .accordion__icon-arrow .icon__group > *:last-child {
    transform: translateY(-8px) rotate(90deg);
}

.tut-content .accordion__panel {
    display: none;
    padding: 0.375rem 1.25rem 1.25rem;
}

.tut-content .accordion__item--is-open > .accordion__panel {
    display: block;
}

/* Die Frage steht auf derselben Stufe wie bei .tut-faq. */
.tut-content .acc_header_font {
    font-size: var(--text-size-150);
    font-weight: 600;
}

/* Die ak6-Abstandsklassen im Markup laufen ins Leere, die Abstaende stehen
   oben an .accordion__header und .accordion__panel. */
.tut-content .ak6-icon {
    display: inline-block;
    color: inherit;
}

@media (min-width: 64rem) {
    .tut-content .accordion__header {
        padding: 1.125rem 2rem;
    }

    .tut-content .accordion__panel {
        padding: 0.5625rem 2rem 2rem;
    }
}

/* Bildschirmfotos: gleiche Optik wie .tut-figure/.tut-figure__img, nur unter
   den Klassennamen, die der Editor ebenfalls benutzt. */
.tut-content .figure_img {
    margin: var(--sp-m) 0;
    font-size: var(--text-size-90);
    color: grey;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tut-content .figure_left_img {
    align-items: flex-start;
}

.tut-content .tutorial_img_basic {
    min-width: auto;
    height: auto;
    max-width: 100%;
    border-radius: 0.25em;
    box-shadow:
        0 1px 3px -1px rgba(0, 0, 0, 0.2),
        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);
}

/* .text__highlight hat im Bestand einen grauen Grund (#dbdbdb), der in
   keiner Palette des Systems vorkommt. Auf der Anleitungsseite steht es in
   derselben Rolle wie .tut-highlight - eine Beschriftung aus der Oberflaeche
   im Fliesstext - und bekommt deshalb hier dieselbe Optik. Im Editor bleibt
   es grau, dort greift diese Regel nicht. */
.tut-content .text__highlight {
    color: #2c5282;
    font-weight: 500;
    padding: 1px 4px;
    background-color: var(--tut-border);
    border-radius: 4px;
    text-decoration: none;
}

/* --------------------------------------------------------------------------
   Bilderfolge zu den Markierungsbeispielen
   (surveyjs/parts/tutorials/marking_slideshow, eingebunden von
   paper_creator_tutorial und vom Papier-Editor)

   NACHBAU STATT EINBINDUNG, aus dem bekannten Grund: welcome/2_slideshow.css
   beginnt mit demselben ungescopten Element-Reset wie der Rest des Buendels
   (* { font: inherit }, eigene h1 bis h4, body auf 1.25rem ab 64rem).
   Uebernommen ist nur, was die zwoelf Markierungsbeispiele brauchen: Rahmen,
   Bildflaeche, die beiden Pfeilschaltflaechen und die Punktreihe, die das
   Skript js/welcome/_2_slideshow.js selbst erzeugt.

   WEGGELASSEN sind die drei Uebergaenge (--transition-fade/-slide/-prx) samt
   ihrer acht Keyframe-Saetze. Das Markup traegt keine dieser Klassen, das
   Skript setzt dann animationOff und blendet die Bilder ohne Bewegung um.
   Ebenso weg: die Seitenverhaeltnisse --ratio-*, die sq7-Schaltflaechen und
   der sq7-Textbaustein. Die sq7-Tokens sind durch ihre Werte ersetzt, damit
   nicht der ganze Variablensatz mitwandern muss.

   Die Klassennamen bleiben, weil derselbe Baustein im Editor steht.
   -------------------------------------------------------------------------- */
.tut-content .slideshow {
    --tut-slideshow-height: 280px;
    position: relative;
    z-index: 1;
    overflow: hidden;
    padding: var(--sp-xs);
    border-radius: 0.5em;
    background: #80808014;
}

.tut-content .slideshow__content {
    overflow: hidden;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tut-content .slideshow__item {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--tut-slideshow-height);
    display: flex;
    justify-content: center;
    visibility: hidden;
    margin: 0;
    padding: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.tut-content .slideshow__item::before {
    content: none;
}

.tut-content .slideshow__item:focus {
    outline: none;
}

.tut-content .slideshow__item--selected {
    position: relative;
    z-index: 3;
    visibility: visible;
}

.tut-content .slideshow[data-swipe="on"] .slideshow__content {
    -webkit-user-select: none;
    user-select: none;
}

.tut-content .slideshow[data-swipe="on"] .slideshow__content img {
    pointer-events: none;
}

/* Die beiden Pfeile stehen erst ab 64rem: darunter blaettert man mit dem
   Finger, dafuer traegt das Markup data-swipe="on". */
.tut-content .slideshow__control {
    display: none;
    position: absolute;
    z-index: 4;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    list-style: none;
}

.tut-content .slideshow__control::before {
    content: none;
}

.tut-content .slideshow__control:first-of-type {
    left: var(--sp-xs);
}

.tut-content .slideshow__control:last-of-type {
    right: var(--sp-xs);
}

@media (min-width: 64rem) {
    .tut-content .slideshow {
        --tut-slideshow-height: 480px;
    }

    .tut-content .slideshow__control {
        display: block;
    }
}

@media (min-width: 48rem) and (max-width: 63.99rem) {
    .tut-content .slideshow {
        --tut-slideshow-height: 380px;
    }
}

@media (min-width: 80rem) {
    .tut-content .slideshow {
        --tut-slideshow-height: 580px;
    }
}

.tut-content .slideshow__btn {
    display: block;
    width: 1.6em;
    height: 3.2em;
    border: 0;
    border-radius: 0.25em;
    background-color: transparent;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}

.tut-content .slideshow__btn:hover {
    background-color: rgba(30, 41, 59, 0.85);
}

.tut-content .slideshow__btn svg {
    display: block;
    width: 1.6em;
    height: 1.6em;
    margin: 0 auto;
    color: var(--tut-text-strong);
    fill: currentColor;
    transition: color 0.2s;
}

.tut-content .slideshow__btn:hover svg {
    color: var(--tut-page);
}

.tut-content .slideshow:not(.slideshow--is-animating) .slideshow__btn:active {
    transform: translateY(2px);
}

/* Die Punktreihe erzeugt das Skript beim Laden, sie steht nicht im Markup. */
.tut-content .slideshow__navigation {
    position: absolute;
    z-index: 4;
    bottom: 0;
    width: 100%;
    height: 32px;
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: center;
    align-items: center;
    background: transparent;
}

.tut-content .slideshow__nav-item {
    display: inline-block;
    margin: 0 var(--sp-xxs);
    padding: 0;
}

.tut-content .slideshow__nav-item::before {
    content: none;
}

.tut-content .slideshow__nav-item button {
    display: block;
    font-size: 8px;
    width: 1em;
    height: 1em;
    border: 0;
    border-radius: 50%;
    background-color: currentColor;
    color: var(--tut-text);
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 0.3s;
}

.tut-content .slideshow__nav-item--selected button {
    opacity: 1;
}

@media (min-width: 64rem) {
    .tut-content .slideshow__navigation {
        height: 40px;
    }

    .tut-content .slideshow__nav-item button {
        font-size: 10px;
    }
}

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

.tut-content .sq7-bg-light {
    background-color: var(--tut-page);
}

.tut-content .sq7-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
}

/* Der leere Kasten in jedem Bild. Er trug im Bestand die Bildunterschrift und
   steht heute nur noch als Huelle im Markup - die Regeln wandern trotzdem
   mit, damit im gerenderten HTML keine Klasse ohne Regel steht. */
.tut-content .sq7-container {
    width: calc(100% - 2 * var(--sp-x));
    margin-left: auto;
    margin-right: auto;
}

.tut-content .sq7-max-width-sm {
    max-width: 48rem;
}

@media (prefers-reduced-motion: reduce) {

    .tut-content .slideshow__btn,
    .tut-content .slideshow__btn svg,
    .tut-content .slideshow__nav-item button {
        transition: none;
    }
}


/* --------------------------------------------------------------------------
   Geteilte Bausteine aus noauth/tutorials/parts/scales_tutorial_part.blade.php

   Dieses Teilstueck steht auf digital_creator_tutorial UND auf
   paper_creator_tutorial. Seit dem 01.09.2026 sind beide Seiten umgestellt,
   das Teilstueck selbst benutzt deshalb jetzt tut-Klassen.

   .list--ul und .step_highlight stehen hier trotzdem weiter: das Teilstueck
   surveyjs/parts/tutorials/variable_case benutzt beide und steht auch im
   Test-Editor, darf also nicht umbenannt werden. Nur der Nachbau von
   .list--ol ist mit der Umstellung entfallen - diese Variante gab es allein
   im Skalen-Teilstueck.

   Der Grund fuer den Nachbau ist unveraendert: .list--ul kaeme aus
   global/1_list.css und .step_highlight aus global/1_tutorial.css, beide mit
   dem ungescopten body-Reset, der auf dem Desktop jede Komponente ohne eigene
   Schriftgroesse auf 20px hebt.

   .from_to_txt und .math_example stehen weiter unten in dieser Datei,
   .tutorial_global_vars_table weiter oben.
   -------------------------------------------------------------------------- */
.tut-content ul.list,
.tut-content ol.list {
    list-style: none;
    padding-left: 0;
    margin: var(--sp-xs) 0;
    font-size: var(--text-size-100);
}

.tut-content .list > li {
    position: relative;
    padding-left: 19px;
    padding-bottom: var(--sp-xxs);
    margin-bottom: var(--sp-xxs);
    line-height: 1.6;
}

.tut-content .list > li:last-child {
    padding-bottom: 0;
    margin-bottom: 0;
}

.tut-content .list--ul > li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background-color: #cbd5e1;
}

.tut-content .step_highlight {
    color: #2c5282;
    font-weight: 500;
    padding: 1px 4px;
    background-color: var(--tut-border);
    border-radius: 4px;
    white-space: nowrap;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.tut-content .step_highlight svg {
    height: 18px;
}


/* --------------------------------------------------------------------------
   Rechenbeispiel und Bereichsangabe im Skalen-Teilstueck
   Umgezogen aus surveyjs/calculations.css (Zeile 533 und 706), damit die
   Anleitungsseite diese Datei nicht mehr braucht.

   Der Grund fuer den Umzug ist nicht der ueblich Reset - calculations.css hat
   keinen - sondern eine einzelne Element-Regel darin: `details { display:
   flex }`. Sie greift ungescopt und legt jede aufklappbare Frage dieses
   Systems (.tut-faq__item ist ein details) auf Flex um. Auf den beiden
   Erstellen-Seiten faellt das heute nicht auf, weil dort keine steht; auf der
   naechsten Seite mit Fragensammlung waere es ein stiller Fehler.

   digital_creator_tutorial laedt calculations.css weiterhin, dort wird sie
   fuer die Operatorentabelle im Teilstueck markdown gebraucht.
   Die Klassennamen bleiben, weil beide auch im Test-Editor stehen.

   Eine Aenderung: .from_to_txt stand auf #d9d9d9, einem Grau, das in keiner
   Palette dieses Systems vorkommt. Es steht in derselben Rolle wie
   .tut-highlight und bekommt deshalb dessen Grund --tut-border. Im Editor
   bleibt es grau, dort greift diese Regel nicht.
   -------------------------------------------------------------------------- */
.tut-content .math_example {
    display: flex;
    flex-direction: column;
    gap: var(--sp-s);
    margin-top: var(--sp-s);
}

.tut-content .from_to_txt {
    background-color: var(--tut-border);
    padding: var(--sp-xxs);
    border-radius: 0.25em;
}


/* --------------------------------------------------------------------------
   Kopieren-Schaltflaeche in der Variablen-Tabelle
   (nur parts/scales_tutorial_part.blade.php)
   Umgezogen aus global/2_copy-to-clipboard.css.

   NACHBAU STATT EINBINDUNG: die Quelldatei beginnt mit demselben ungescopten
   Element-Reset wie das Buendel. Das Teilstueck verlinkte sie bis zum
   01.09.2026 selbst und schleuste den Reset damit auch auf die schon
   umgestellte Seite digital_creator_tutorial ein.

   Das Skript js/global/_2_copy-to-clipboard.js laedt das Teilstueck weiter
   selbst; es setzt .copy-to-clip--copied und laesst damit den Haken wandern.
   Die Klassennamen bleiben, weil dieselbe Schaltflaeche auf tests/emailform
   steht.
   -------------------------------------------------------------------------- */
.tut-content .copy-to-clip {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 0;
    border-radius: 0.25em;
    background-color: rgba(30, 41, 59, 0.1);
    color: inherit;
    cursor: pointer;
    transition: background-color 0.2s;
}

.tut-content .copy-to-clip:hover {
    background-color: rgba(30, 41, 59, 0.15);
}

.tut-content .copy-to-clip:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(30, 41, 59, 0.35);
}

.tut-content .copy-to-clip__icon-check {
    stroke-dashoffset: 8.49;
    stroke-dasharray: 8.49 8.49;
    transition: stroke-dashoffset 0.3s;
}

.tut-content .copy-to-clip--copied .copy-to-clip__icon-check {
    stroke-dashoffset: 0;
}

.tut-content .cx0-icon {
    display: inline-block;
    width: var(--cx0-size, 1em);
    height: var(--cx0-size, 1em);
    color: inherit;
    fill: currentColor;
    line-height: 1;
    flex-shrink: 0;
    max-width: initial;
}

.tut-content .cx0-icon--xs {
    --cx0-size: 16px;
}

.tut-content .cx0-inline-flex {
    display: inline-flex;
}

.tut-content .cx0-items-center {
    align-items: center;
}

.tut-content .cx0-margin-left-sm {
    margin-left: var(--sp-s);
}

.tut-content .cx0-padding-2xs {
    padding: var(--sp-xxs);
}

.tut-content .cx0-radius-lg {
    border-radius: 0.5em;
}

.tut-content .cx0-border {
    border: 1px solid var(--tut-border);
}

@media (prefers-reduced-motion: reduce) {

    .tut-content .copy-to-clip,
    .tut-content .copy-to-clip__icon-check {
        transition: none;
    }
}