/* =========================================================
   PIXEL & CODE – SCREEN.CSS
   Gemeinsame Basis + reine Webansicht

   Diese Datei wird immer geladen. Print-spezifische Regeln
   befinden sich in print.css.
   ========================================================= */

/* =========================================================
   PIXEL & CODE
   Zentrales Theme-Stylesheet
   Web + Navigation + Komponenten + Print
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

:root {
    /* Farben */
    --bg: #f5f5f4;
    --surface: #ffffff;

    --text: #222222;
    --text-muted: #666666;
    --border: #dddddd;

    --accent: #5b4bb7;

    /* Didaktische Komponenten */
    --learning: #5b4bb7;
    --learning-bg: #f3f1fa;

    --remember: #8a6418;
    --remember-bg: #fbf6e8;

    --task: #317153;
    --task-bg: #edf6f1;

    --warning: #a63d40;
    --warning-bg: #faeeee;

    /* Code */
    --code-bg: #f4f4f5;
    --code-text: #202124;

    /* Typografie */
    --font-sans: "Source Sans 3", sans-serif;
    --font-serif: "Source Serif 4", serif;
    --font-code: "Source Code Pro", monospace;

    --font-size-base: 1rem;
    --line-height-base: 1.6;

    /* Layout */
    --reading-width: 68ch;

    --layout-width: 75rem;
    --article-width: 52rem;
    --sidebar-width: 17rem;

    --page-padding: 2rem;

    /* Abstände */
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 2rem;
    --space-lg: 3rem;
    --space-xl: 5rem;

    /* Gestaltung */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;

    --transition: 0.2s ease;
}

/* =========================================================
   3. BASIS
   ========================================================= */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    font-size: 100%;
}

html,
body {
    min-height: 100%;
}

body {
    margin: 0;

    background: var(--bg);
    color: var(--text);

    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);

    -webkit-font-smoothing: antialiased;
}

.print-cover .home__intro, .print-cover .site-logo,  .body--home .site-logo  {
    color: #FFFFFF;
}

main:not(.print-cover):not(.main--section) {
    width: min(
            calc(100% - (var(--page-padding) * 2)),
            var(--layout-width)
    );

    margin-inline: auto;
    padding-block: var(--space-lg);
}

main.print-cover {
    margin-inline: auto;
    padding-block: var(--space-lg);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}


/* =========================================================
   4. TYPOGRAFIE
   ========================================================= */

h1,
h2 {
    font-family: var(--font-serif);
    line-height: 1.15;
    text-wrap: balance;
}

h1 {
    margin-block: 0 1.5rem;
    font-size: clamp(2.25rem, 4vw, 4rem);
}

h1 strong {
    font-family: var(--font-code);
}

h2 {
    margin-block: 3rem 1rem;
    font-size: clamp(1.75rem, 2.5vw, 2.5rem);
}

h3,
h4,
h5,
h6 {
    font-family: var(--font-sans);
    line-height: 1.25;
}

h3,
.home-claim {
    margin-block: 2.5rem 1rem;
    font-size: 1.5rem;
}

div.component.component--aufgabe h3 {
    margin-block: 1rem 0.5rem;
}

p {
    margin-block: 0 1.25rem;
}

pre + p {
    margin-block: 1.25rem;
}

a {
    color: var(--accent);
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.15em;
}

a:hover {
    text-decoration-thickness: 0.12em;
}

strong {
    font-weight: 700;
}

.mt-0 {
    margin-top: 0;
}

.showonprint {
    display: none;
}

/* =========================================================
   CHAPTER – TRENNLINIE
   ========================================================= */

.chapter hr {
    width: 100%;
    height: 0;

    margin: 2.75rem 0;

    border: 0;
    border-top: 1px solid
    color-mix(in srgb, var(--accent) 24%, transparent);
}


/* Kleine dekorative Markierung in der Mitte */

.chapter hr::after {
    content: "";

    display: block;

    width: 2.5rem;
    height: 0.25rem;

    margin: -0.15rem auto 0;

    border-radius: 999px;

    background: var(--accent);
}


/* =========================================================
   5. REDAKTIONELLE LISTEN
   ========================================================= */

.chapter-content ul,
.chapter-content ol,
.section-page__description ul,
.section-page__description ol,
.home__text ul,
.home__text ol {
    padding-left: 1.5em;
}

.chapter-content li + li,
.section-page__description li + li,
.home__text li + li {
    margin-top: 0.35em;
}


/* =========================================================
   6. CODE
   ========================================================= */

code,
pre {
    font-family: var(--font-code);
}

code {
    font-size: 0.92em;
}

:not(pre) > code {
    padding: 0.12em 0.35em;

    background: var(--code-bg);
    color: var(--code-text);

    border-radius: var(--radius-sm);
}

pre {
    margin-block: var(--space-md);
    padding: 1.25rem 1.5rem;

    overflow-x: auto;

    background: var(--code-bg);
    color: var(--code-text);

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    line-height: 1.55;
}

pre code {
    padding: 0;
    background: none;
}


/* =========================================================
   7. BILDER & FIGURES
   ========================================================= */

.chapter-content img {
    border-radius: var(--radius-lg);
}

.chapter-content aside img {
    border-radius: 0.1rem;
}

figure {
    margin: var(--space-lg) 0;
}

figcaption {
    margin-top: var(--space-sm);

    color: var(--text-muted);

    font-size: 0.9rem;
}


/* =========================================================
   8. BUTTONS
   ========================================================= */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 2.75rem;
    padding: 0.7rem 1rem;

    border: 1px solid var(--accent);
    border-radius: var(--radius-sm);

    color: var(--accent);

    font-weight: 600;
    line-height: 1;

    text-decoration: none;

    transition:
            background-color var(--transition),
            color var(--transition);
}

.button:hover {
    background: var(--accent);
    color: var(--surface);
}

.body--home .button {
    color: #FFF;
    border-color: #FFF;
}
.body--home .button:hover {
    background: #FFF;
    color: var(--accent);
}
.home__ctas {
    margin-top: 30px;
}


/* =========================================================
   9. DIDAKTISCHE KOMPONENTEN
   ========================================================= */

.component {
    margin-block: var(--space-md);
    padding: 1.25rem 1.5rem;

    border-left: 4px solid;
    border-radius: var(--radius-sm);

    break-inside: avoid;
}

.component__title {
    display: block;
    margin-bottom: var(--space-xs);

    font-weight: 700;
}

.component__content > :last-child {
    margin-bottom: 0;
}

.component--lernziel {
    background: var(--learning-bg);
    border-color: var(--learning);
}

.component--lernziel .component__title {
    color: var(--learning);
}

.component--merke {
    background: var(--remember-bg);
    border-color: var(--remember);
}

.component--merke .component__title {
    color: var(--remember);
}

.component--aufgabe {
    background: var(--task-bg);
    border-color: var(--task);
}

.component--aufgabe .component__title {
    color: var(--task);
}

.component--warnung {
    background: var(--warning-bg);
    border-color: var(--warning);
}

.component--warnung .component__title {
    color: var(--warning);
}


/* =========================================================
   10. HEADER
   ========================================================= */

.site-header {
    position: relative;
    z-index: 1000;

    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    position: relative;

    width: min(
            calc(100% - (var(--page-padding) * 2)),
            var(--layout-width)
    );

    min-height: 6rem;

    margin-inline: auto;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);
}

.site-logo {
    display: inline-block;
    color: var(--text);
    font-family: var(--font-serif);
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    transition: color var(--transition);
}

.site-logo span.sans {
    font-family: var(--font-sans);
    text-transform: uppercase;
    font-weight: 500;
    letter-spacing: 0.08em;
}
.site-logo span.serif {
    font-family: var(--font-serif);
    font-weight: 700;
    margin-left: 0.12em;
    display: inline-block;
}

.site-logo:hover {
    color: var(--accent);
}

.body--home h1.site-logo {
    font-size: clamp(2.25rem, 4vw, 4rem);
}
.site-footer__brand .site-logo {
    font-size: 20px;
}

.site-header__actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}


/* =========================================================
   11. THEME TOGGLE
   ========================================================= */

.nav-toggle {
    width: 2.75rem;
    height: 2.75rem;

    flex: 0 0 auto;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    background: var(--surface);
    color: var(--text);

    cursor: pointer;

    transition:
            border-color var(--transition),
            color var(--transition),
            background-color var(--transition);
}

.nav-toggle:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.nav-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.nav-toggle svg {
    width: 1.4rem;
    height: 1.4rem;
}

.nav-toggle__icon--close {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--menu {
    display: none;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__icon--close {
    display: block;
}



/* =========================================================
   12. HAUPTNAVIGATION
   ========================================================= */

.site-navigation {
    position: absolute;

    top: 100%;
    right: 0;
    left: auto;

    z-index: 999;

    display: none;

    width: min(24rem, calc(100vw - 3rem));
    max-height: calc(100dvh - 6rem);

    overflow-y: auto;
    overscroll-behavior: contain;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.14);
}

.site-navigation.is-open {
    display: block;
}

html.nav-open,
body.nav-open {
    overflow: hidden;
}

.nav-list {
    margin: 0;
    padding: 0;

    list-style: none;
}

.nav-list--level-1 {
    width: 100%;
    margin-inline: auto;
    padding-block: 0;
}

.nav-item {
    width: 100%;
}

ul.nav-list--level-1 li.nav-item:last-child  .nav-item__row {
    border-bottom: none;
}

.nav-item__row, .nav-submenu {
    width: 100%;

    display: flex;
    align-items: stretch;

    border-bottom: 1px solid var(--border);
}

.nav-link {
    flex: 1;

    display: flex;
    align-items: center;

    min-width: 0;
    padding: 0.9rem 0.75rem;

    color: var(--text);

    text-decoration: none;

    border-radius: var(--radius-sm);

    transition:
            color var(--transition),
            background-color var(--transition);
}

.nav-link:hover {
    color: var(--accent);
    background: var(--bg);
}

.nav-item.is-active > .nav-item__row > .nav-link {
    color: var(--accent);
    font-weight: 700;
}

.nav-item.is-active-parent > .nav-item__row > .nav-link {
    color: var(--accent);
    font-weight: 600;
}

.submenu-toggle {
    width: 2.75rem;
    min-width: 2.75rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 0;
    border-radius: var(--radius-sm);

    background: transparent;
    color: var(--text-muted);

    cursor: pointer;

    transition:
            color var(--transition),
            background-color var(--transition);
}

.submenu-toggle:hover {
    color: var(--accent);
    background: var(--bg);
}

.submenu-toggle:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -3px;
}

.submenu-toggle svg {
    width: 1rem;
    height: 1rem;

    transition: transform var(--transition);
}

.nav-item.is-open > .nav-item__row > .submenu-toggle svg {
    transform: rotate(180deg);
}

.nav-submenu {
    display: none;
}

.nav-item.is-open > .nav-submenu {
    display: block;
}

.nav-list--level-2,
.nav-list--level-3,
.nav-list--level-4,
.nav-list--level-5 {
    margin-left: 1rem;
    border-left: 1px solid var(--border);
}

.nav-list--level-1 > .nav-item > .nav-item__row > .nav-link {
    font-size: 1.1rem;
    font-weight: 600;
}

.nav-list--level-2 .nav-link {
    font-size: 1rem;
}

.nav-list--level-3 .nav-link,
.nav-list--level-4 .nav-link,
.nav-list--level-5 .nav-link {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.nav-list--level-3 .nav-item.is-active > .nav-item__row > .nav-link,
.nav-list--level-4 .nav-item.is-active > .nav-item__row > .nav-link,
.nav-list--level-5 .nav-item.is-active > .nav-item__row > .nav-link {
    color: var(--accent);
}

.nav-link__number {
    flex: 0 0 auto;

    min-width: 2.75rem;

    color: var(--text-muted);

    font-size: 0.85em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.nav-link__title {
    min-width: 0;
}


/* =========================================================
   13. BREADCRUMBS
   ========================================================= */

.breadcrumbs {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);

    color: var(--text-muted);

    font-size: 0.9rem;
    line-height: 1.4;

    border-bottom: 1px solid var(--border);
}

.breadcrumbs ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    gap: 0.35rem;

    margin: 0;
    padding: 0;

    list-style: none;
}

.breadcrumbs li {
    display: inline-flex;
    align-items: center;

    min-width: 0;
}

.breadcrumbs li:not(:last-child)::after {
    content: "›";

    margin-left: 0.35rem;

    color: var(--text-muted);
    opacity: 0.65;
}

.breadcrumbs a {
    display: inline-block;

    max-width: 100%;

    overflow: hidden;

    color: var(--text-muted);

    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap;

    transition: color var(--transition);
}

.breadcrumbs a:hover {
    color: var(--accent);
    text-decoration: underline;
}

.breadcrumbs a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;

    border-radius: var(--radius-sm);
}

.breadcrumbs [aria-current="page"] {
    color: var(--text);
    font-weight: 600;
}

.breadcrumbs__number {
    margin-right: 0.25em;

    color: var(--text-muted);

    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.main--chapter .breadcrumbs__number {
    display: inline-block;

    margin-right: 5px;
    padding: 3px 5px;

    background: var(--accent);
    color: #fff;

    border-radius: 4px;

    line-height: 0.9;
}

/* =========================================================
   14. HOME
   ========================================================= */

.home {
    padding-block: var(--space-md);
}

.home__intro {
    width: min(
            calc(100% - (var(--page-padding) * 2)),
            var(--layout-width)
    );
}
.home__text {
    max-width: var(--article-width);
    margin-bottom: 100px;
}

.home__text h1 {
    white-space: nowrap;
}

.home__search {
    margin-top: var(--space-lg);
}

.home__actions {
    margin-top: var(--space-md);
}

.body--home {
    min-height: 100vh;
    position: relative;
}

.print-cover__image,
.print-cover__hover {
    content: "";

    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    inset: 0;

    z-index: -1;
    display: block;
    background: rgb(0 0 0 / 0.4);
}

.print-cover__image {
    object-fit: cover;
}

.print-cover__overlay {
    background: rgb(0 0 0 / 0.35);
}

.body--home .print-cover h1 {
    max-width: 10ch;

    margin-bottom: 1.5rem;
    font-size: clamp(3rem, 8vw, 7rem);
    line-height: 0.95;
    letter-spacing: -0.04em;
}



.body--home .site-header {
    background: transparent;
    border: 0;
}

.body--home .site-footer {
    margin-top: var(--space-md);
    background-color: #0e141a;
    color: #FFF;
    border: 0;
}

/* =========================================================
   15. SUCHE
   ========================================================= */

.search {
    position: relative;

    width: min(100%, 42rem);
}

.search input[type="search"] {
    width: 100%;
    padding: 1rem 1.25rem;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: var(--surface);
    color: var(--text);

    font: inherit;

    outline: none;
}

.search input[type="search"]:focus {
    border-color: var(--accent);
}

.site-search--light {
    --surface: #fff;
    --text: #111;
    --border: rgb(0 0 0 / 0.12);
    --muted: rgb(0 0 0 / 0.55);

    color: var(--text);
}

.site-search--light input {
    color: var(--text);
    background: var(--surface);
    border-color: var(--border);
}

.site-search--light input::placeholder {
    color: var(--muted);
}

.search__suggestions {
    position: absolute;

    top: calc(100% + 0.5rem);
    left: 0;
    right: 0;

    z-index: 500;

    display: none;
    overflow: hidden;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    box-shadow: 0 1rem 2.5rem rgb(0 0 0 / 0.12);
}

.search__suggestions.is-open {
    display: block;
}

.search-results {
    margin: 0;
    padding: 0;

    list-style: none;
}

.search-results li {
    margin: 0;
    padding: 0;
}

.search-results li + li {
    border-top: 1px solid var(--border);
}

.search-result {
    display: flex;
    align-items: center;

    gap: 0.75rem;

    padding: 0.9rem 1rem;

    color: var(--text);

    text-decoration: none;

    transition:
            color var(--transition),
            background-color var(--transition);
}

.search-result:hover,
.search-result:focus-visible {
    background: var(--bg);
    color: var(--accent);
}

.search-result__icon {
    flex: 0 0 auto;

    width: 1.1rem;
    height: 1.1rem;

    color: var(--text-muted);
}

.search-result__number {
    flex: 0 0 auto;

    min-width: 3.75rem;

    color: var(--text-muted);

    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.search-result__title {
    min-width: 0;
    font-weight: 600;
}

.search__empty {
    padding: 1rem;

    color: var(--text-muted);

    font-size: 0.95rem;
}


/* =========================================================
   16. CHAPTER
   ========================================================= */

.chapter {
    width: 100%;
}

.chapter-header {
    margin-bottom: var(--space-lg);
}

.chapter-header__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;

    gap: var(--space-md);
}

.chapter-header h1 {
    margin-bottom: 0;
}

.chapter-number {
    margin-bottom: var(--space-xs);

    color: var(--accent);

    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1;

    letter-spacing: 0.05em;
}

.chapter-layout {
    display: grid;

    grid-template-columns:
        minmax(0, var(--article-width))
        minmax(0, var(--sidebar-width));

    gap: var(--space-lg);

    align-items: start;
}

.chapter-content {
    min-width: 0;
}

/* Marginalie: bleibt im Content und floatet in den rechten Rand */
.chapter-sidebar {
    float: right;

    width: var(--sidebar-width);

    margin-right: calc(
            (var(--sidebar-width) + var(--space-lg)) * -1
    );

    margin-left: var(--space-lg);
    margin-bottom: var(--space-md);

    padding-left: 1rem;

    color: var(--text-muted);

    font-size: 0.875rem;
    line-height: 1.45;

    border-left: 2px solid var(--accent);
}

.chapter-sidebar h3 {
    margin: 0 0 0.4rem;

    color: var(--text);

    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
}

.chapter-sidebar p {
    margin: 0.6rem 0;
}

.chapter-sidebar p:last-child {
    margin-bottom: 0;
}

.chapter-sidebar ul,
.chapter-sidebar ol {
    margin: 0.5rem 0 0;
    padding-left: 1.1rem;
}

.chapter-sidebar li + li {
    margin-top: 0.25rem;
}

.chapter-sidebar a {
    color: var(--accent);

    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

.chapter-sidebar strong {
    color: var(--text);
}

.chapter-content::after {
    content: "";
    display: block;
    clear: both;
}



/* =========================================================
   17. SECTION PAGE – SCREEN
   ========================================================= */

.main--section {
    width: 100%;
    max-width: none;

    margin: 0;
    padding:
            var(--space-lg)
            var(--page-padding)
            var(--space-xl);

    background: var(--accent);
    color: #fff;
}

.main--section + .site-footer {
    margin-top: 0;
}

.section-page {
    position: relative;

    width: min(100%, var(--layout-width));

    margin-inline: auto;
}

.main--section .breadcrumbs {
    margin-bottom: var(--space-sm);

    color: rgb(255 255 255 / 0.65);

    border-color: rgb(255 255 255 / 0.18);
}

.main--section .breadcrumbs a {
    color: rgb(255 255 255 / 0.65);
}

.main--section .breadcrumbs a:hover,
.main--section .breadcrumbs [aria-current="page"] {
    color: #fff;
}

.main--section .breadcrumbs li:not(:last-child)::after {
    color: rgb(255 255 255 / 0.4);
}

.main--section .breadcrumbs__number {
    display: inline-block;

    margin-right: 5px;
    padding: 3px 5px;

    background: rgb(255 255 255 / 0.8);

    border-radius: 4px;

    line-height: 0.9;
}

.section-page__header {
    position: relative;

    min-height: 18rem;

    display: flex;
    align-items: flex-end;

    margin-bottom: var(--space-xl);

    overflow: visible;
}

.section-page__number {
    position: absolute;

    left: -0.04em;
    bottom: -0.18em;

    z-index: 0;

    color: rgb(255 255 255 / 0.10);

    font-family: var(--font-serif);
    font-size: clamp(9rem, 22vw, 20rem);
    font-weight: 700;
    line-height: 0.75;

    letter-spacing: -0.06em;

    pointer-events: none;
    user-select: none;
}

.section-page__header-content {
    position: relative;
    z-index: 1;

    max-width: 50rem;
}

.section-page h1 {
    margin: 0;

    color: #fff;

    font-size: clamp(3.5rem, 8vw, 7.5rem);
    line-height: 0.95;

    letter-spacing: -0.035em;
}

.section-page__description {
    max-width: 48rem;

    margin-top: var(--space-md);

    color: rgb(255 255 255 / 0.85);

    font-size: clamp(1.1rem, 1.5vw, 1.35rem);
    line-height: 1.55;
}

.section-page__description > :last-child {
    margin-bottom: 0;
}

.section-page__contents {
    max-width: 52rem;

    margin-top: calc(var(--space-xl) * 2);
}

.section-page__contents h2 {
    margin: 0 0 var(--space-md);

    color: rgb(255 255 255 / 0.65);

    font-family: var(--font-sans);
    font-size: 0.9rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.section-page__contents ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.section-page__contents li {
    margin: 0;

    border-top: 1px solid rgb(255 255 255 / 0.18);
}

.section-page__contents li:last-child {
    border-bottom: 1px solid rgb(255 255 255 / 0.18);
}

.section-page__contents a {
    display: flex;
    align-items: baseline;

    gap: var(--space-md);

    padding-block: 1rem;

    color: #fff;

    text-decoration: none;

    transition:
            padding-left var(--transition),
            background-color var(--transition);
}

.section-page__contents a:hover {
    padding-left: 0.5rem;

    background: rgb(255 255 255 / 0.05);
}

.section-page__item-number {
    flex: 0 0 4rem;

    color: rgb(255 255 255 / 0.5);

    font-size: 0.85rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.section-page__item-title {
    font-size: 1.1rem;
    font-weight: 600;
}

.section-intro-text-screen {

}

/* =========================================================
   18. FOOTER
   ========================================================= */

.site-footer {
    margin-top: var(--space-xl);

    background: var(--surface);
    color: var(--text-muted);

    border-top: 1px solid var(--border);
}

.site-footer__inner {
    width: min(
            calc(100% - (var(--page-padding) * 2)),
            var(--layout-width)
    );

    margin-inline: auto;
    padding-block: 2rem;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: var(--space-md);
}

.site-footer__brand {
    color: var(--text);

    font-size: 0.95rem;
    font-weight: 600;
}

.site-footer__meta {
    margin-top: 0.2rem;

    color: var(--text-muted);

    font-size: 0.85rem;
}

.site-footer__nav ul {
    margin: 0;
    padding: 0;

    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 0.5rem 1.25rem;

    list-style: none;
}

.site-footer__nav li {
    margin: 0;
}

.site-footer__nav a {
    color: var(--text-muted);

    font-size: 0.9rem;

    text-decoration: none;

    transition: color var(--transition);
}

.site-footer__nav a:hover {
    color: var(--accent);
}

.site-footer__nav a:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;

    border-radius: var(--radius-sm);
}

.site-footer__nav li + li::before {
    content: "·";

    margin-right: 1.25rem;

    color: var(--border);
}


/* =========================================================
   19. HILFSKLASSEN
   ========================================================= */

.sr-only {
    position: absolute;

    width: 1px;
    height: 1px;

    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}


/* =========================================================
   20. RESPONSIVE
   ========================================================= */

@media screen and (max-width: 900px) {
    :root {
        --page-padding: 1.5rem;
    }

    .chapter-layout {
        grid-template-columns: 1fr;
    }

    .chapter-sidebar {
        float: none;

        width: auto;

        margin: var(--space-md) 0;
        padding-left: 1rem;
    }
}

@media screen and (max-width: 700px) {
    .main--section {
        padding:
                var(--space-md)
                var(--page-padding)
                var(--space-lg);
    }

    .main--section .breadcrumbs {
        margin-bottom: var(--space-lg);
    }

    .section-page__header {
        min-height: 13rem;
        margin-bottom: var(--space-lg);
    }

    .section-page__number {
        bottom: -0.1em;
        font-size: clamp(7rem, 38vw, 12rem);
    }

    .section-page h1 {
        font-size: clamp(2.75rem, 13vw, 4.5rem);
    }

    .section-page__description {
        font-size: 1.05rem;
    }

    .section-page__contents a {
        gap: var(--space-sm);
    }

    .section-page__item-number {
        flex-basis: 3.5rem;
    }

    .section-page__item-title {
        font-size: 1rem;
    }

    .site-footer__inner {
        padding-block: 1.5rem;

        flex-direction: column;
        align-items: flex-start;

        gap: 1rem;
    }

    .site-footer__nav ul {
        gap: 0.5rem 1rem;
    }

    .site-footer__nav li + li::before {
        margin-right: 1rem;
    }
}

@media screen and (max-width: 600px) {
    :root {
        --page-padding: 1rem;

        --space-lg: 2rem;
        --space-xl: 3rem;
    }

    .site-header__inner {
        min-height: 4rem;
    }

    .site-navigation {
        max-height: calc(100dvh - 4rem);
    }

    .nav-list--level-1 {
        padding-block: 0.5rem 1rem;
    }

    .nav-link {
        padding: 0.8rem 0.5rem;
    }

    .nav-list--level-2,
    .nav-list--level-3,
    .nav-list--level-4,
    .nav-list--level-5 {
        margin-left: 0.75rem;
    }

    .breadcrumbs {
        margin-bottom: var(--space-sm);

        font-size: 0.85rem;
    }

    .breadcrumbs ol {
        gap: 0.25rem;
    }

    .breadcrumbs li:not(:last-child)::after {
        margin-left: 0.25rem;
    }

    .chapter-header__inner {
        flex-direction: column;
    }

    h1 {
        font-size: 2.25rem;
    }

    .search {
        width: 100%;
    }

    .search-result {
        padding: 0.8rem;
    }

    .search-result__number {
        min-width: 2.25rem;
    }
}

.chapter-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;

    gap: 1rem;

    margin-top: 4rem;
    padding-top: 2rem;

    border-top: 1px solid var(--border);
}

.chapter-navigation__previous,
.chapter-navigation__next {
    min-width: 0;
}

.chapter-navigation__next {
    text-align: right;
}

.chapter-navigation__button {
    display: flex;
    flex-direction: column;

    gap: 0.35rem;

    min-height: 100%;
    padding: 1rem 1.25rem;

    border: 1px solid var(--border);
    border-radius: var(--radius-md);

    background: var(--surface);
    color: var(--text);

    text-decoration: none;

    transition:
            border-color var(--transition),
            color var(--transition),
            transform var(--transition);
}

.chapter-navigation__button:hover {
    border-color: var(--accent);
    color: var(--accent);

    transform: translateY(-2px);
}

.chapter-navigation__button--next {
    align-items: flex-end;
}

.chapter-navigation__direction {
    color: var(--text-muted);

    font-size: 0.8rem;
    font-weight: 700;

    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.chapter-navigation__title {
    font-weight: 700;
    line-height: 1.3;
}

@media screen and (max-width: 700px) {
    .chapter-navigation {
        grid-template-columns: 1fr;
    }

    .chapter-navigation__next {
        text-align: left;
    }

    .chapter-navigation__button--next {
        align-items: flex-start;
    }
}

/* =========================================================
   WORKSHEET – GRUNDLAYOUT
   ========================================================= */

.worksheet-publication {
    width: 100%;
    max-width: none;

    margin: 0;
    padding: 0;
}

.worksheet-sheet {
    width: 210mm;
    min-height: 297mm;

    margin: 0 auto;
    padding: 14mm 16mm;

    box-sizing: border-box;

    background: #fff;
    color: #111;
}


/* =========================================================
   WORKSHEET – HEADER
   ========================================================= */

.worksheet-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;

    gap: 10mm;

    margin-bottom: 9mm;
    padding-bottom: 5mm;

    border-bottom: 1mm solid var(--accent);
}

.worksheet-header__brand {
    min-width: 0;
}

.worksheet-logo {
    display: flex;
    align-items: baseline;

    line-height: 1;
}

.worksheet-logo__sans {
    font-family: var(--font-sans);
    font-size: 13pt;
    font-weight: 600;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.worksheet-logo__serif {
    margin-left: 0.15em;

    font-family: var(--font-serif);
    font-size: 15pt;
    font-weight: 700;
}

.worksheet-header__meta {
    flex: 0 0 auto;

    text-align: right;
}

.worksheet-header__subject {
    color: #444;

    font-family: var(--font-sans);
    font-size: 10pt;
    font-weight: 600;
    line-height: 1.2;
}

.worksheet-header__number {
    margin-top: 1mm;

    color: var(--accent);

    font-family: var(--font-sans);
    font-size: 11pt;
    font-weight: 700;
    line-height: 1.2;
}


/* =========================================================
   WORKSHEET – AUFGABENSTELLUNG
   ========================================================= */

.worksheet-intro {
    margin-bottom: 7mm;
}

.worksheet-title {
    margin: 0 0 2mm;

    font-family: var(--font-serif);
    font-size: 22pt;
    font-weight: 700;
    line-height: 1.1;

    letter-spacing: -0.015em;
}

.worksheet-description {
    max-width: 155mm;

    margin: 0;

    color: #555;

    font-family: var(--font-sans);
    font-size: 10.5pt;
    line-height: 1.45;
}


/* =========================================================
   WORKSHEET – CODE-EDITOR
   ========================================================= */

.worksheet-editor {
    overflow: hidden;

    border: 0.35mm solid #cfd1d6;
    border-radius: 2mm;

    background: #fff;
}


/* ---------------------------------------------------------
   Editor-Leiste
   --------------------------------------------------------- */

.worksheet-editor__toolbar {
    min-height: 10mm;

    display: flex;
    align-items: center;

    gap: 2.5mm;

    padding: 0 4mm;

    background: #f3f4f6;

    border-bottom: 0.3mm solid #d8d9de;
}

.worksheet-editor__file-icon {
    color: var(--accent);

    font-family: var(--font-code);
    font-size: 8pt;
    font-weight: 700;
}

.worksheet-editor__filename {
    color: #444;

    font-family: var(--font-code);
    font-size: 9pt;
    font-weight: 600;
}

.worksheet-editor__language {
    margin-left: auto;

    color: #8b8b92;

    font-family: var(--font-code);
    font-size: 7.5pt;
    font-weight: 700;

    letter-spacing: 0.08em;
}


/* ---------------------------------------------------------
   Editor-Zeilen
   --------------------------------------------------------- */

.worksheet-editor__body {
    background: #fff;
}

.worksheet-editor__line {
    display: grid;
    grid-template-columns: 13mm minmax(0, 1fr);

    min-height: 18mm;
}

.worksheet-editor__line + .worksheet-editor__line {
    border-top: 0.2mm solid #ececef;
}


/* Zeilenhöhe */
.worksheet-editor--large .worksheet-editor__line,
.worksheet-editor--normal .worksheet-editor__line,
.worksheet-editor--compact .worksheet-editor__line {
    min-height: 12mm;
}


/* ---------------------------------------------------------
   Zeilennummern
   --------------------------------------------------------- */

.worksheet-editor__number {
    display: flex;
    align-items: center;
    justify-content: flex-end;

    padding-right: 3.5mm;

    background: #f7f7f8;
    color: #9a9aa1;

    border-right: 0.3mm solid #dedee2;

    font-family: var(--font-code);
    font-size: 9pt;
    font-variant-numeric: tabular-nums;

    user-select: none;
}

.worksheet-editor__strong {
    color: inherit;
    font-weight: 700;
}

.worksheet-editor__em {
    color: inherit;
    font-style: italic;
}


/* ---------------------------------------------------------
   Schreibbereich
   --------------------------------------------------------- */

.worksheet-editor__content {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    min-width: 0;
    padding: 3mm 4mm 3mm 1mm;
}


/* =========================================================
   EINRÜCKUNGSHILFEN
   ========================================================= */

/*
   Der Schreibbereich besitzt links 4 mm Innenabstand.

   Die Einrückungsstufen liegen deshalb bei:

   Stufe 0:  4 mm
   Stufe 1: 14 mm
   Stufe 2: 24 mm
   Stufe 3: 34 mm
   Stufe 4: 44 mm

   Der Code und die Hilfslinien verwenden damit denselben
   Abstand von jeweils 10 mm.
*/

.worksheet-editor__indent-guides {
    position: absolute;
    inset: 0;

    overflow: hidden;

    pointer-events: none;
}

.worksheet-editor__indent-guide {
    position: absolute;

    top: 0;
    bottom: 0;

    left: calc(1mm + var(--guide) * 10mm);

    width: 0;

    border-left: 0.25mm dashed rgb(91 75 183 / 0.13);
}


/* =========================================================
   CODEZEILE
   ========================================================= */

.worksheet-editor__code {
    position: relative;
    z-index: 1;

    display: block;

    width: auto;
    max-width: 100%;

    margin: 0;
    margin-left: calc(var(--indent, 0) * 10mm);
    margin-right: auto;

    padding: 0;

    border: 0;
    border-radius: 0;

    background: transparent;

    color: #333;

    font-family: var(--font-code);
    font-size: 13pt;
    font-style: normal;
    font-weight: 400;
    line-height: 1.2;

    text-align: left;
    white-space: pre;
}


/* =========================================================
   AUSZUFÜLLENDE CODESTELLEN
   ========================================================= */

.worksheet-editor__blank {
    display: inline-block;

    color: transparent;


    white-space: pre;

    print-color-adjust: exact;
    -webkit-print-color-adjust: exact;
}


/* =========================================================
   TEXTAUFGABEN
   ========================================================= */

.worksheet-text {
    margin-top: 5mm;
}

.worksheet-text__line {
    min-height: 13mm;

    border-bottom: 0.25mm solid #b9b9be;
}

.worksheet-text__line + .worksheet-text__line {
    margin-top: 2mm;
}


/* =========================================================
   BILDAUFGABEN
   ========================================================= */

.worksheet-image {
    margin-top: 5mm;
}

.worksheet-image img {
    display: block;

    width: 100%;
    max-height: 185mm;

    object-fit: contain;

    border: 0.3mm solid #d2d2d6;
    border-radius: 2mm;
}

.worksheet-image p {
    margin: 0;
    padding: 5mm;

    border: 0.3mm solid #d2d2d6;
    border-radius: 2mm;

    color: #777;

    font-size: 9pt;
}


/* =========================================================
   FEHLERMELDUNG
   ========================================================= */

.worksheet-error {
    padding: 5mm;

    border: 0.3mm solid #c93c37;
    border-radius: 2mm;

    background: #faeeee;
    color: #8f2f32;

    font-family: var(--font-sans);
    font-size: 10pt;
}


/* =========================================================
   WORKSHEET – FOOTER
   ========================================================= */

.worksheet-footer {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;

    gap: 8mm;

    margin-top: 10mm;

    color: #777;

    font-family: var(--font-sans);
    font-size: 8.5pt;
}

.worksheet-footer span {
    min-height: 7mm;
    padding-bottom: 2mm;

    border-bottom: 0.25mm solid #aaa;
}


/* =========================================================
   BILDSCHIRMANSICHT
   ========================================================= */

@media screen {

    .body--worksheet {
        background: #e8e8e8;
    }

    .worksheet-publication {
        padding-block: 2rem;
    }

    .worksheet-sheet {
        box-shadow: 0 0.5rem 2rem rgb(0 0 0 / 0.12);
    }

    .worksheet-sheet + .worksheet-sheet {
        margin-top: 2rem;
    }

}

/* =========================================================
   CHAPTER – ÜBUNGSBLÄTTER
   ========================================================= */

.chapter-worksheets {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);

    gap: 1.25rem;

    margin-top: 3rem;
    padding: 1.5rem;

    border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
    border-radius: 1rem;

    background:
            linear-gradient(
                    135deg,
                    color-mix(in srgb, var(--accent) 9%, transparent),
                    color-mix(in srgb, var(--accent) 3%, transparent)
            );
}


/* Icon */

.chapter-worksheets__icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 3rem;
    height: 3rem;

    border-radius: 0.8rem;

    background: var(--accent);
    color: #fff;
}

.chapter-worksheets__icon svg {
    width: 1.4rem;
    height: 1.4rem;

    stroke-width: 1.8;
}


/* Inhalt */

.chapter-worksheets__content {
    min-width: 0;
}

.chapter-worksheets__title {
    margin: 0;

    font-family: var(--font-serif);
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
}

.chapter-worksheets__description {
    margin: 0.35rem 0 1.25rem;

    color: var(--text-muted, #666);

    font-size: 1rem;
    line-height: 1.5;
}


/* Link-Liste */

.chapter-worksheets__links {
    display: grid;

    gap: 0.75rem;
}


/* Einzelner Übungslink */

.chapter-worksheets__link {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 1.5rem;

    padding: 1rem 1.1rem;

    border: 1px solid color-mix(in srgb, var(--accent) 18%, transparent);
    border-radius: 0.75rem;

    background: var(--background, #fff);
    color: inherit;

    text-decoration: none;

    transition:
            border-color 160ms ease,
            box-shadow 160ms ease,
            transform 160ms ease;
}

.chapter-worksheets__link:hover {
    border-color: color-mix(in srgb, var(--accent) 55%, transparent);

    box-shadow: 0 0.5rem 1.5rem rgb(0 0 0 / 0.08);

    transform: translateY(-2px);
}

.chapter-worksheets__link:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent) 35%, transparent);
    outline-offset: 3px;
}


/* Titel des Übungsblatts */

.chapter-worksheets__link-title {
    min-width: 0;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.35;
}


/* Link-Aktion */

.chapter-worksheets__link-action {
    display: inline-flex;
    align-items: center;

    flex: 0 0 auto;

    gap: 0.4rem;

    color: var(--accent);

    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.chapter-worksheets__link-action svg {
    width: 1rem;
    height: 1rem;

    stroke-width: 2;

    transition: transform 160ms ease;
}

.chapter-worksheets__link:hover
.chapter-worksheets__link-action svg {
    transform: translateX(0.2rem);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 40rem) {

    .chapter-worksheets {
        grid-template-columns: 1fr;

        padding: 1.25rem;
    }

    .chapter-worksheets__icon {
        width: 2.75rem;
        height: 2.75rem;
    }

    .chapter-worksheets__link {
        align-items: flex-start;
        flex-direction: column;

        gap: 0.6rem;
    }

}

/* =========================================================
   CHAPTER – TABELLEN
   ========================================================= */

.chapter table {
    width: 100%;

    margin: 1.75rem 0;

    border-spacing: 0;
    border-collapse: separate;

    overflow: hidden;

    border: 1px solid
    color-mix(in srgb, var(--accent) 18%, #d8d8dc);

    border-radius: 0.9rem;

    background: var(--background, #fff);

    font-size: 0.98rem;
    line-height: 1.5;
}


/* Tabellenkopf */

.chapter thead {
    background:
            color-mix(
                    in srgb,
                    var(--accent) 9%,
                    var(--background, #fff)
            );
}

.chapter th {
    padding: 0.9rem 1rem;

    color: var(--text, #222);

    font-weight: 700;
    text-align: left;
    vertical-align: top;
}


/* Tabellenzellen */

.chapter td {
    padding: 0.9rem 1rem;

    color: var(--text, #333);

    text-align: left;
    vertical-align: top;
}


/* Horizontale Linien */

.chapter tbody tr + tr td {
    border-top: 1px solid
    color-mix(in srgb, var(--text, #222) 10%, transparent);
}


/* Vertikale Linien */

.chapter th + th,
.chapter td + td {
    border-left: 1px solid
    color-mix(in srgb, var(--text, #222) 9%, transparent);
}


/* Dezente wechselnde Zeilen */

.chapter tbody tr:nth-child(even) {
    background:
            color-mix(
                    in srgb,
                    var(--accent) 2.5%,
                    var(--background, #fff)
            );
}


/* Code innerhalb einer Tabelle */

.chapter table code {
    padding: 0.12em 0.35em;

    border-radius: 0.3rem;

    background:
            color-mix(
                    in srgb,
                    var(--accent) 8%,
                    var(--background, #fff)
            );

    font-size: 0.92em;
    white-space: nowrap;
}


/* Absätze innerhalb von Tabellen */

.chapter table p {
    margin: 0;
}

.chapter table p + p {
    margin-top: 0.65rem;
}


/* Listen innerhalb von Tabellen */

.chapter table ul,
.chapter table ol {
    margin: 0;
    padding-left: 1.25rem;
}


/* Links innerhalb von Tabellen */

.chapter table a {
    color: var(--accent);
    font-weight: 600;
}


/* =========================================================
   RESPONSIVE TABELLEN
   ========================================================= */

.chapter .table-wrapper {
    width: 100%;

    margin: 1.75rem 0;

    overflow-x: auto;

    border-radius: 0.9rem;

    -webkit-overflow-scrolling: touch;
}

.chapter .table-wrapper table {
    margin: 0;
}

.chapter-sidebar table {
    width: auto;
    max-width: 100%;
    margin: 0.75rem 0;

    font-size: 0.7rem;
    line-height: 1.35;

}

.chapter-sidebar th,
.chapter-sidebar td {
    padding: 0.35rem 0.55rem;
}

.chapter-sidebar th {
    font-weight: 600;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media screen and (max-width: 48rem) {

    .chapter table {
        min-width: 38rem;

        font-size: 0.94rem;
    }

    .chapter th,
    .chapter td {
        padding: 0.75rem 0.85rem;
    }

}

aside pre {
    font-size: 0.6rem!important;
    margin-block: 0.2rem;
}

/* =========================================================
   LIVE PREVIEW
   ========================================================= */

.live-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;

    margin: 1.75rem 0;

    overflow: hidden;

    border: 1px solid
    color-mix(in srgb, var(--accent) 18%, #d8d8dc);

    border-radius: 0.9rem;

    background: var(--background, #fff);
}

.live-preview__panel {
    min-width: 0;
}

.live-preview__panel + .live-preview__panel {
    border-left: 1px solid
    color-mix(in srgb, var(--text, #222) 10%, transparent);
}

.live-preview__header {
    padding: 0.7rem 1rem;

    background:
            color-mix(
                    in srgb,
                    var(--accent) 8%,
                    var(--background, #fff)
            );

    color: var(--text, #222);

    font-family: var(--font-sans);
    font-size: 0.85rem;
    font-weight: 700;

    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.live-preview__code {
    min-height: 100%;

    margin: 0;
    padding: 1rem;

    border: 0;
    border-radius: 0;

    background: color-mix(
            in srgb,
            var(--background, #fff) 96%,
            #000
    );

    overflow-x: auto;
}

.live-preview img {
    display: inline;
}

.live-preview__code code {
    padding: 0;

    background: transparent;
    color: inherit;

    font-family: var(--font-code);
    font-size: 0.95rem;
    line-height: 1.55;

    white-space: pre;
}

.live-preview__result {
    padding: 1rem 1.25rem;

    color: var(--text, #222);
}

.live-preview__result > :first-child {
    margin-top: 0;
}

.live-preview__result > :last-child {
    margin-bottom: 0;
}
.live-preview {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.live-preview__result hr {
    margin: 1.25rem 0;
}

.live-preview--stacked {
    grid-template-columns: 1fr;
}

.live-preview--stacked .live-preview__panel + .live-preview__panel {
    border-left: 0;

    border-top: 1px solid
    color-mix(in srgb, var(--text, #222) 10%, transparent);
}

.chapter table .lucide-circle-x,
.chapter table .lucide-circle-minus,
.chapter table .lucide-circle-check {
    width: 1.05em;
    height: 1.05em;

    margin-right: 0.35em;

    vertical-align: -0.15em;

    stroke-width: 2;
}

.chapter table .lucide-circle-x {
    color: #b42318;
}

.chapter table .lucide-circle-minus {
    color: #b7791f;
}

.chapter table .lucide-circle-check {
    color: #2f855a;
}


/* =========================================================
   CMD/Ctrl + F – GLOBALER SUCHDIALOG
   ========================================================= */

.site-search-dialog {
    width: min(46rem, calc(100vw - 2rem));
    max-width: none;

    margin: auto;
    padding: 0;

    overflow: visible;

    border: 0;
    border-radius: var(--radius-md);

    background: var(--surface);
    color: var(--text);

    box-shadow: 0 1.5rem 5rem rgb(0 0 0 / 0.3);
}

.site-search-dialog::backdrop {
    background: rgb(14 20 26 / 0.68);
    backdrop-filter: blur(0.3rem);
}

.site-search-dialog__inner {
    padding: 1.5rem;
}

.site-search-dialog__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: var(--space-md);

    margin-bottom: 1.25rem;
}

.site-search-dialog__eyebrow {
    margin-bottom: 0.25rem;

    color: var(--accent);

    font-size: 0.75rem;
    font-weight: 750;

    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.site-search-dialog__title {
    margin: 0;

    font-size: clamp(1.65rem, 4vw, 2.25rem);
}

.site-search-dialog__close {
    flex: 0 0 auto;

    width: 2.75rem;
    height: 2.75rem;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 0;

    border: 1px solid var(--border);
    border-radius: var(--radius-sm);

    background: var(--surface);
    color: var(--text);

    cursor: pointer;

    transition:
            border-color var(--transition),
            color var(--transition),
            background-color var(--transition);
}

.site-search-dialog__close:hover,
.site-search-dialog__close:focus-visible {
    border-color: var(--accent);

    background: var(--bg);
    color: var(--accent);
}

.site-search-dialog__close:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.site-search-dialog__close svg {
    width: 1.25rem;
    height: 1.25rem;
}

.site-search-dialog__search {
    width: 100%;
}

.site-search-dialog__suggestions {
    position: static;

    max-height: min(58vh, 30rem);

    margin-top: 0.75rem;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;
}

.site-search-dialog__hint {
    margin: 0.9rem 0 0;

    color: var(--text-muted);

    font-size: 0.8rem;
    text-align: right;
}

.site-search-dialog kbd {
    display: inline-block;

    min-width: 1.75rem;
    padding: 0.15rem 0.4rem;

    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 0.3rem;

    background: var(--bg);
    color: var(--text);

    font-family: var(--font-sans);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.2;
    text-align: center;
}

@media screen and (max-width: 600px) {

    .site-search-dialog {
        width: calc(100vw - 1rem);
    }

    .site-search-dialog__inner {
        padding: 1rem;
    }

    .site-search-dialog__header {
        gap: 1rem;
    }

    .site-search-dialog__hint {
        text-align: left;
    }

}

@media print {

    .site-search-dialog {
        display: none !important;
    }

}