/* Sitepackage – Startseite Deutsch/Englisch */
:root {
    --color-bg: #f7f7f5;
    --color-surface: #ffffff;
    --color-text: #1d1d1f;
    --color-muted: #5f6368;
    --color-border: #e3e3df;
    --color-accent: #c2410c;
    --color-accent-contrast: #ffffff;
    --color-hero-from: #fff7ed;
    --color-hero-to: #f7f7f5;
    --radius: 12px;
    --container: 72rem;
    --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
}

@media (prefers-color-scheme: dark) {
    :root {
        --color-bg: #121212;
        --color-surface: #1c1c1e;
        --color-text: #ececec;
        --color-muted: #a1a1a6;
        --color-border: #2e2e31;
        --color-accent: #fb923c;
        --color-accent-contrast: #1a1a1a;
        --color-hero-from: #2a1a0f;
        --color-hero-to: #121212;
        color-scheme: dark;
    }
}

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

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font);
    font-size: 1.0625rem;
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

a { color: var(--color-accent); }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; border-radius: 4px; }

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 1rem;
}
@media (min-width: 48rem) { .container { padding-inline: 2rem; } }

.skip-link {
    position: absolute;
    left: 1rem;
    top: -3rem;
    padding: .5rem 1rem;
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    border-radius: var(--radius);
    z-index: 10;
}
.skip-link:focus { top: 1rem; }

/* --- Kopfzeile ------------------------------------------------------------ */
.site-header {
    position: sticky;
    top: 0;
    z-index: 5;
    background: color-mix(in srgb, var(--color-surface) 92%, transparent);
    backdrop-filter: saturate(1.4) blur(8px);
    border-bottom: 1px solid var(--color-border);
}
.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    min-height: 4rem;
}
.site-header__brand {
    color: var(--color-text);
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* --- Sprachumschalter DE | EN -------------------------------------------- */
.lang-switch__list {
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: .9375rem;
    font-weight: 600;
    letter-spacing: .04em;
}
.lang-switch__list li + li::before {
    content: "|";
    color: var(--color-border);
    padding-inline: .25rem;
}
.lang-switch__item {
    display: inline-block;
    min-width: 2.75rem;
    padding: .375rem .5rem;
    border-radius: 6px;
    color: var(--color-muted);
    text-align: center;
    text-decoration: none;
}
a.lang-switch__item:hover { color: var(--color-text); background: var(--color-bg); }
.lang-switch__item.is-active { color: var(--color-accent); }
.lang-switch__item.is-fallback { opacity: .75; }

/* --- Hero ------------------------------------------------------------------ */
.hero {
    background: linear-gradient(180deg, var(--color-hero-from), var(--color-hero-to));
    padding-block: 3.5rem 2.5rem;
}
@media (min-width: 48rem) { .hero { padding-block: 5rem 3.5rem; } }
.hero__title {
    margin: 0 0 .75rem;
    font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem);
    line-height: 1.15;
    letter-spacing: -.02em;
}
.hero__lead {
    max-width: 44rem;
    margin: 0;
    color: var(--color-muted);
    font-size: 1.1875rem;
}

/* --- Inhalte ------------------------------------------------------------------ */
.site-main { flex: 1; }
.content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.25rem;
    padding-block: 2.5rem 4rem;
}
.content > .frame { grid-column: 1 / -1; max-width: 48rem; }
.content > .frame.frame-card {
    grid-column: auto;
    max-width: none;
    padding: 1.5rem;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.content > .frame.frame-card::before {
    content: "";
    display: block;
    width: 2.5rem;
    height: 4px;
    margin-bottom: 1rem;
    border-radius: 2px;
    background: var(--color-accent);
}
.content h2 { margin: 0 0 .5rem; font-size: 1.5rem; line-height: 1.25; }
.content .frame-card h2 { font-size: 1.1875rem; }
.content p { margin: 0 0 .75rem; }
.content p:last-child { margin-bottom: 0; }
.content .frame-card p { color: var(--color-muted); }

/* --- Fußzeile ------------------------------------------------------------------ */
.site-footer {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-muted);
    font-size: .875rem;
}
.site-footer__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .5rem 1.5rem;
    padding-block: 1.25rem;
}

/* --- Hauptnavigation -------------------------------------------------------- */
.site-header__inner { flex-wrap: wrap; }
.main-nav { order: 3; flex: 1 0 100%; margin-inline: -.5rem; overflow-x: auto; }
@media (min-width: 48rem) {
    .site-header__inner { flex-wrap: nowrap; }
    .main-nav { order: 0; flex: 1 1 auto; margin-inline: 1rem 0; }
}
.main-nav__list {
    display: flex;
    gap: .25rem;
    margin: 0;
    padding: 0 0 .5rem;
    list-style: none;
    white-space: nowrap;
}
@media (min-width: 48rem) { .main-nav__list { padding: 0; } }
.main-nav__link {
    display: block;
    padding: .375rem .75rem;
    border-radius: 6px;
    color: var(--color-muted);
    font-weight: 600;
    font-size: .9375rem;
    text-decoration: none;
}
.main-nav__link:hover { color: var(--color-text); background: var(--color-bg); }
.main-nav__link.is-active { color: var(--color-accent); }

/* --- Dokumentationsseiten ----------------------------------------------------- */
.hero--compact { padding-block: 2.5rem 2rem; }
@media (min-width: 48rem) { .hero--compact { padding-block: 3.5rem 2.5rem; } }
.hero--compact .hero__title { font-size: clamp(1.75rem, 1.3rem + 2vw, 2.5rem); }
.hero__eyebrow { margin: 0 0 .5rem; font-size: .875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.hero__eyebrow a { text-decoration: none; }

.doc {
    display: grid;
    gap: 1.5rem 3rem;
    padding-block: 2rem 4rem;
}
@media (min-width: 60rem) {
    .doc { grid-template-columns: 15rem minmax(0, 1fr); }
    .doc__aside { position: sticky; top: 5.5rem; align-self: start; }
}
.doc__body { min-width: 0; max-width: 52rem; }

.section-nav { font-size: .9375rem; }
.section-nav__title {
    display: block;
    margin-bottom: .5rem;
    color: var(--color-text);
    font-weight: 700;
    text-decoration: none;
}
.section-nav__list {
    display: flex;
    flex-wrap: wrap;
    gap: .375rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 60rem) {
    .section-nav__list { display: block; border-left: 2px solid var(--color-border); }
}
.section-nav__link {
    display: block;
    padding: .375rem .75rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    color: var(--color-muted);
    text-decoration: none;
}
@media (min-width: 60rem) {
    .section-nav__link { margin-left: -2px; border: 0; border-left: 2px solid transparent; border-radius: 0; }
}
.section-nav__link:hover { color: var(--color-text); }
.section-nav__link.is-current, .section-nav__title.is-current { color: var(--color-accent); }
.section-nav__link.is-current { border-color: var(--color-accent); }

/* Inhalte (Fließtext, Code, Tabellen) */
.doc__body > .frame { margin-bottom: 2.5rem; scroll-margin-top: 5.5rem; }
.doc__body h2 { margin: 0 0 .75rem; font-size: 1.5rem; line-height: 1.25; }
.doc__body h3 { margin: 1.75rem 0 .5rem; font-size: 1.1875rem; }
.doc__body p, .doc__body ul, .doc__body ol, .doc__body table, .doc__body pre { margin: 0 0 1rem; }
.doc__body li { margin-bottom: .25rem; }
.doc__body code {
    padding: .1em .35em;
    border-radius: 4px;
    background: color-mix(in srgb, var(--color-text) 8%, transparent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .875em;
    overflow-wrap: anywhere;
}
.doc__body pre {
    padding: 1rem 1.25rem;
    overflow-x: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    font-size: .875rem;
    line-height: 1.55;
}
.doc__body pre code { padding: 0; background: none; font-size: inherit; overflow-wrap: normal; }
/* Screenshots (Text & Medien): volle Spaltenbreite, Rahmen gegen weißen Hintergrund, Unterschrift klein */
.doc__body .ce-gallery { margin-top: .5rem; }
.doc__body .ce-gallery img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}
.doc__body .ce-gallery figcaption {
    margin-top: .375rem;
    color: var(--color-muted);
    font-size: .875rem;
}
.doc__body table {
    display: block;
    width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: .9375rem;
}
.doc__body th, .doc__body td {
    padding: .5rem .75rem;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}
.doc__body th { font-weight: 700; white-space: nowrap; }
.doc__body td:first-child code { white-space: nowrap; overflow-wrap: normal; }
.doc__body .frame-type-menu_section {
    padding: 1rem 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}
.doc__body .frame-type-menu_section h2 { font-size: 1rem; }
.doc__body .frame-type-menu_section > ul { margin: 0; padding: 0; list-style: none; }
/* Das Menü beginnt mit der Seite selbst – nur deren Abschnitte zeigen */
.doc__body .frame-type-menu_section > ul > li > a { display: none; }
.doc__body .frame-type-menu_section > ul > li > ul { margin: 0; padding-left: 1.25rem; columns: 2 14rem; column-gap: 2rem; }
.doc__body .frame-type-menu_section li { break-inside: avoid; }

/* Übersicht der Unterseiten */
.doc-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.doc-cards__link {
    display: block;
    height: 100%;
    padding: 1.25rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    text-decoration: none;
}
.doc-cards__link:hover { border-color: var(--color-accent); }
.doc-cards__title { display: block; margin-bottom: .375rem; font-weight: 700; color: var(--color-accent); }
.doc-cards__text { display: block; color: var(--color-muted); font-size: .9375rem; }

/* --- Hilfsklassen ------------------------------------------------------------ */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- Kopfzeile rechts: Suche + Sprachumschalter --------------------------- */
.site-header__tools {
    display: flex;
    align-items: center;
    gap: .75rem;
    flex: 0 0 auto;
}
.lang-switch { display: flex; align-items: center; gap: .25rem; }
.lang-switch__icon { color: var(--color-muted); font-size: .9375rem; }
.doc-cards__title .fa-solid { font-size: .8em; margin-left: .25rem; transition: transform .15s; }
.doc-cards__link:hover .fa-solid { transform: translateX(3px); }

/* --- Suchfeld im Seitenkopf ------------------------------------------------ */
.site-search {
    position: relative;
    display: flex;
    align-items: center;
}
.site-search__icon {
    position: absolute;
    left: .75rem;
    color: var(--color-muted);
    font-size: .875rem;
    pointer-events: none;
}
.site-search__input {
    width: 9rem;
    height: 2.25rem;
    padding: 0 2.25rem 0 2.25rem;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-bg);
    color: var(--color-text);
    font: inherit;
    font-size: .9375rem;
    transition: width .2s, border-color .2s;
}
.site-search__input::placeholder { color: var(--color-muted); }
.site-search__input:focus { outline: none; border-color: var(--color-accent); width: 12rem; }
.site-search__input::-webkit-search-cancel-button { display: none; }
@media (min-width: 64rem) {
    .site-search__input { width: 12rem; }
    .site-search__input:focus { width: 16rem; }
}
.site-search__submit {
    position: absolute;
    right: .25rem;
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-muted);
    cursor: pointer;
}
.site-search__submit:hover,
.site-search__input:focus + .site-search__submit { background: var(--color-accent); color: var(--color-accent-contrast); }
/* Schmal: Marke oben, darunter Suche (volle Breite) + Sprachen, darunter die Navigation */
@media (max-width: 47.99rem) {
    .site-header__inner { padding-top: .5rem; }
    .site-header__tools { order: 2; flex: 1 0 100%; }
    .site-search { flex: 1; }
    .site-search__input,
    .site-search__input:focus { width: 100%; }
    .lang-switch__icon { display: none; }
}

/* --- Suchseite ----------------------------------------------------------------- */
.search { max-width: 48rem; }
.search__form { display: flex; gap: .5rem; margin-bottom: 1.5rem; }
.search__field { position: relative; flex: 1; }
.search__field .fa-solid {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-muted);
}
.search__field input {
    width: 100%;
    height: 3rem;
    padding: 0 1rem 0 2.75rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
    color: var(--color-text);
    font: inherit;
}
.search__field input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 25%, transparent); }
.search__submit {
    height: 3rem;
    padding: 0 1.25rem;
    border: 0;
    border-radius: var(--radius);
    background: var(--color-accent);
    color: var(--color-accent-contrast);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}
.search__message { color: var(--color-muted); }
.search__message--error { color: var(--color-accent); }
.search-results { margin: 0; padding: 0; list-style: none; }
.search-result {
    padding-block: 1.25rem;
    border-top: 1px solid var(--color-border);
}
.search-result__path { margin: 0 0 .25rem; color: var(--color-muted); font-size: .8125rem; }
.content .search-result__title { margin: 0 0 .375rem; font-size: 1.1875rem; }
.search-result__title a { text-decoration: none; }
.search-result__title a:hover { text-decoration: underline; }
.content .search-result__snippet { margin: 0; color: var(--color-muted); font-size: .9375rem; }
.search-result mark {
    background: color-mix(in srgb, var(--color-accent) 22%, transparent);
    color: var(--color-text);
    border-radius: 3px;
    padding-inline: .125rem;
}
.search-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-border);
}
.search-pager__status { color: var(--color-muted); font-size: .9375rem; }
.search-pager__link { text-decoration: none; font-weight: 600; }