:root {
    --bg: #0f1115;
    --bg-elevated: #171a21;
    --fg: #f5f6f8;
    --accent: #f97316;
    --accent-soft: rgba(249, 115, 22, 0.15);
    --link: #6c8cff;
    --muted: #9aa1ad;
    --border: #262b35;
    --header-height: 4rem;
}

* { box-sizing: border-box; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-height) + 1rem);
}

html,
body {
    margin: 0;
    padding: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    color: var(--fg);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
}

/* Keep keyboard focus visible across links, buttons and native disclosures. */
:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

/* Inset the outline of the full-width skip destination so it is not clipped. */
#main-content:focus-visible { outline-offset: -3px; }

.skip-link {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 200;
    max-width: calc(100% - 1rem);
    padding: 0.75rem 1rem;
    color: var(--fg);
    background: var(--bg-elevated);
    border: 2px solid var(--accent);
    border-radius: 0.5rem;
    overflow-wrap: anywhere;
    transform: translateY(calc(-100% - 1rem));
}

.skip-link:focus { transform: none; }

/* Root-entry fallback when automatic language routing is unavailable. */
.language-entry {
    width: 100%;
    max-width: 32rem;
    margin: 3rem auto;
    padding: 1.5rem;
    overflow-wrap: anywhere;
}

.language-entry ul {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    list-style: none;
    padding: 0;
}

.language-entry a {
    display: inline-block;
    padding: 0.75rem 1rem;
    color: var(--accent);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
}

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

/* --------------------------------------------------------------------------
   Sticky site header with wordmark, anchor navigation and language switcher
   -------------------------------------------------------------------------- */

.site-header {
    position: relative;
    top: 0;
    z-index: 100;
    background: rgba(15, 17, 21, 0.85);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    max-width: 72rem;
    margin: 0 auto;
    min-height: var(--header-height);
    padding: 0.75rem 1.5rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

/* Enhance only after the navigation script has installed its handlers.
   Without JavaScript the header stays in flow and all links remain visible. */
.site-header[data-nav-ready] { position: sticky; }

.site-header[data-nav-ready] .site-header__inner {
    height: var(--header-height);
    padding-block: 0;
    flex-wrap: nowrap;
}

.site-header a:focus-visible,
.site-header button:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.site-header__toggle[hidden],
.site-header__lang-toggle[hidden],
.site-header__lang-menu[hidden] { display: none; }

.site-header__brand {
    min-width: 0;
    display: flex;
    align-items: center;
    color: var(--accent);
    text-decoration: none;
}

.site-header__wordmark {
    display: block;
    width: 140px;
    max-width: 100%;
    height: auto;
}

.site-header__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1.5rem;
}

.site-header[data-nav-ready] .site-header__nav { flex-wrap: nowrap; }
.site-header[data-nav-ready] .site-header__nav[hidden] { display: none; }

.site-header__nav a {
    color: var(--muted);
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
}

.site-header__nav a:hover,
.site-header__nav a:focus {
    color: var(--fg);
}

.site-header__lang {
    position: relative;
}

.site-header__lang-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 0.25rem 0.75rem;
    color: var(--fg);
    background: var(--bg-elevated);
    font: inherit;
    font-size: 0.95rem;
    cursor: pointer;
}

.site-header__lang-toggle:hover,
.site-header__lang-toggle:focus-visible {
    border-color: var(--accent);
    color: var(--accent);
}

.site-header__lang-caret {
    font-size: 0.7em;
    transition: transform 0.15s ease;
}

.site-header__lang[data-open] .site-header__lang-caret {
    transform: rotate(180deg);
}

.site-header__lang-menu {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0.35rem;
    list-style: none;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.6rem;
}

.site-header[data-nav-ready] .site-header__lang-menu {
    display: block;
    position: absolute;
    top: calc(100% + 0.4rem);
    right: 0;
    min-width: 9rem;
    max-height: calc(100vh - var(--header-height) - 1rem);
    max-height: calc(100dvh - var(--header-height) - 1rem);
    overflow-y: auto;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    z-index: 20;
}

.site-header[data-nav-ready] .site-header__lang-menu[hidden] { display: none; }

.site-header__lang-item {
    display: block;
    padding: 0.45rem 0.75rem;
    border-radius: 0.4rem;
    color: var(--muted);
    text-decoration: none;
    font-size: 0.95rem;
    white-space: nowrap;
}

button.site-header__lang-item {
    width: 100%;
    border: 0;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    text-align: left;
    cursor: pointer;
}

a.site-header__lang-item:hover,
a.site-header__lang-item:focus-visible,
button.site-header__lang-item:hover,
button.site-header__lang-item:focus-visible {
    background: var(--bg);
    color: var(--fg);
}

.site-header__lang-item.is-active {
    color: var(--accent);
    font-weight: 600;
}

/* Hamburger toggle: hidden on desktop, shown on mobile. */

.site-header__toggle {
    display: none;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    gap: 5px;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0.5rem;
    background: none;
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    cursor: pointer;
}

/* Script controls visibility across breakpoints, after moving focus if needed. */
.site-header[data-nav-ready] .site-header__toggle:not([hidden]) { display: flex; }

.site-header__toggle-bar {
    display: block;
    height: 2px;
    width: 100%;
    background: var(--fg);
    border-radius: 1px;
}

/* The enhanced breakpoint also accounts for the actual root font size.
   Media-query rem units alone do not track an author-enlarged root font. */
.site-header[data-nav-compact] .site-header__nav {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: calc(100vh - var(--header-height) - 1px);
    max-height: calc(100dvh - var(--header-height) - 1px);
    overflow-y: auto;
    overscroll-behavior-y: contain;
    scroll-padding-block: 0.5rem;
    padding: 0.5rem 1.5rem 1rem;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}

.site-header[data-nav-compact] .site-header__nav > * { flex-shrink: 0; }

.site-header[data-nav-compact] .site-header__nav > a {
    display: block;
    width: 100%;
    padding: 0.75rem 0;
    font-size: 1.05rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

.site-header[data-nav-compact] .site-header__lang {
    margin-top: 0.5rem;
    align-self: flex-start;
    max-width: 100%;
}

.site-header[data-nav-compact] .site-header__lang-menu {
    position: static;
    box-shadow: none;
    margin-top: 0.4rem;
    min-width: 0;
    max-height: none;
    overflow-y: visible;
}

/* Without script, links remain in flow and can wrap rather than overflow. */
.site-header:not([data-nav-ready]) .site-header__nav a {
    white-space: normal;
    overflow-wrap: anywhere;
}

@media (max-width: 48rem) {
    .site-header:not([data-nav-ready]) .site-header__nav {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    .site-header:not([data-nav-ready]) .site-header__nav > a {
        padding: 0.75rem 0;
        font-size: 1.05rem;
    }

    .site-header:not([data-nav-ready]) .site-header__lang {
        margin-top: 0.5rem;
        align-self: flex-start;
        max-width: 100%;
    }
}

/* --------------------------------------------------------------------------
   Main page layout
   -------------------------------------------------------------------------- */

.page {
    flex: 1;
    width: 100%;
}

/* Legal pages keep the narrow top-aligned text column. */

.page:has(.legal) {
    display: block;
    padding: 2rem;
}

/* --------------------------------------------------------------------------
   Shared error document: familiar navigation, compact bilingual recovery links
   -------------------------------------------------------------------------- */

.page--error {
    display: grid;
    align-items: center;
}

.error-page {
    width: 100%;
    min-width: 0;
    max-width: 46rem;
    margin: 0 auto;
    padding: 3rem 1.5rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.error-page .error-page__code {
    margin: 0 0 1rem;
    color: var(--accent);
    font-size: clamp(3rem, 18vw, 6rem);
    font-weight: 800;
    line-height: 1;
}

.error-page h1 {
    margin: 0 0 1rem;
    font-size: clamp(1.75rem, 4vw, 2.25rem);
    line-height: 1.25;
}

.error-page p {
    margin: 0.75rem 0 0;
    color: var(--muted);
}

.error-page__translation {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.error-page__translation h2 {
    margin: 0;
    font-size: 1.25rem;
}

.error-page__actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin: 2rem 0 0;
    padding: 0;
    list-style: none;
}

.error-page__actions li { max-width: 100%; }
.error-page__actions a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
    max-width: 46rem;
    margin: 0 auto;
    text-align: center;
    padding: 4rem 1.5rem 3rem;
    overflow-wrap: anywhere;
}

/* Visually hidden but available to screen readers (the SVG wordmark is aria-hidden). */

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Animated wordmark. The per-letter reveal lives in the @keyframes below; a soft brand glow adds a
   gentle "breathing" halo once the reveal has settled. Sizing is fluid so it scales down on mobile. */

.hero__wordmark {
    display: block;
    width: min(480px, 80vw);
    max-width: 100%;
    height: auto;
    margin: 0 auto 1.5rem;
    filter: drop-shadow(0 0 10px rgba(249, 115, 22, 0.3));
    animation: pulse-glow 2.4s ease-in-out 1.4s infinite;
}

/* Solid brand orange (same hue used across the Corvish brand). Each letter starts hidden and is
   revealed by the staggered animation below. */

.hero__wordmark .wm path {
    fill: #f97316;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center bottom;
    /* Play once and hold (forwards) — the wordmark should reveal, then stand still, not loop. */
    animation: wm-letter 0.5s ease-out forwards;
}

/* Left-to-right reveal wave in reading order: C O R V I S H ! A tight 0.12s stagger assembles the
   whole wordmark by ~1.3s. */

#wm_c { animation-delay: 0.00s; }

#wm_o { animation-delay: 0.12s; }

#wm_r { animation-delay: 0.24s; }

#wm_v { animation-delay: 0.36s; }

#wm_i { animation-delay: 0.48s; }

#wm_s { animation-delay: 0.60s; }

#wm_h { animation-delay: 0.72s; }

/* The "!" lands last and pops a touch harder — the punch moment. */

#wm_bang {
    animation: wm-bang 0.5s ease-out forwards;
    animation-delay: 0.84s;
}

@keyframes wm-letter {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.9);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes wm-bang {
    0% {
        opacity: 0;
        transform: translateY(18px) scale(0.8);
    }

    70% {
        opacity: 1;
        transform: translateY(-4px) scale(1.12);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes wm-fade {
    0% { opacity: 0; }

    100% { opacity: 1; }
}

/* Subtle, endless "breathing" of the glow only (never the wordmark's opacity), so it reads as a calm
   brand pulse. */

@keyframes pulse-glow {
    0%, 100% { filter: drop-shadow(0 0 8px rgba(249, 115, 22, 0.25)); }

    50% { filter: drop-shadow(0 0 20px rgba(249, 115, 22, 0.5)); }
}

@media (prefers-reduced-motion: reduce) {
    /* Avoid translate/scale; a plain opacity fade-in is safe. The staggered reveal stays, just without
     the hop/pop, and the endless glow pulse is disabled. */
    html { scroll-behavior: auto; }

    .hero__wordmark { animation: none; }

    .hero__wordmark .wm path,
    #wm_bang {
        animation-name: wm-fade;
        transform: none;
    }
}

.hero__tagline {
    font-size: clamp(1.3rem, 3.5vw, 1.8rem);
    font-weight: 700;
    margin: 0 0 1rem;
}

.hero__intro {
    color: var(--muted);
    font-size: 1.05rem;
    max-width: 38rem;
    margin: 0 auto 2rem;
}

.hero__cta { margin: 0 0 0.75rem; }

.hero__note {
    color: var(--muted);
    font-size: 0.9rem;
    margin: 0;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn {
    display: inline-block;
    max-width: 100%;
    overflow-wrap: anywhere;
    padding: 0.8rem min(2rem, 8vw);
    border-radius: 999px;
    font-weight: 600;
    font-size: 1.05rem;
    text-decoration: none;
    background: var(--accent);
    color: #0f1115;
    border: none;
}

.btn--secondary {
    color: var(--fg);
    background: var(--bg-elevated);
    border: 1px solid var(--border);
}

.btn--disabled {
    background: var(--bg-elevated);
    color: var(--muted);
    border: 1px solid var(--border);
    cursor: not-allowed;
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
    max-width: 72rem;
    margin: 0 auto;
    padding: 4rem 1.5rem;
    overflow-wrap: anywhere;
}

.section + .section { border-top: 1px solid var(--border); }

.section__header {
    text-align: center;
    max-width: 44rem;
    margin: 0 auto 1.5rem;
}

.section__header h2 {
    font-size: clamp(1.6rem, 4vw, 2.25rem);
    margin: 0 0 0.75rem;
}

.section__subheading {
    color: var(--muted);
    margin: 0;
}

.section__note {
    text-align: center;
    color: var(--muted);
    margin-top: 2.5rem;
}

.section__disclaimer {
    text-align: center;
    color: var(--fg);
    font-size: 0.9rem;
    margin-bottom: 1.5rem;
    opacity: 0.9;
}

/* Highlight section (character editor): subtle orange-tinted panel. */

.section--highlight .highlight {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 1rem;
    padding: 2rem;
    max-width: 48rem;
    margin: 0 auto;
}

.highlight p { margin-top: 0; }

/* Inline links inside the highlight block (flow text and list items): brand accent color,
   lighter accent on hover. External links (opened in a new tab via target="_blank") keep the
   classic underlined look; internal links are bold without underline and get one on hover. */
.highlight a {
    color: var(--accent);
}

.highlight a:hover,
.highlight a:focus {
    color: color-mix(in srgb, var(--accent) 70%, #ffffff);
}

.highlight a[target="_blank"] {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.highlight a:not([target="_blank"]) {
    font-weight: 600;
    text-decoration: none;
}

.highlight a:not([target="_blank"]):hover,
.highlight a:not([target="_blank"]):focus {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Sub-headings inside a highlight block (e.g. the character editor's
   "Zum Beispiel …" and closing section) sit visually between the section
   subheading and the body copy. */
.highlight__subheading {
    margin: 1.5rem 0 0.75rem;
    font-size: 1.05rem;
    font-weight: 600;
}

.highlight__list {
    margin: 0 0 0.5rem;
    padding-left: 1.25rem;
}

.highlight__list li { margin-bottom: 0.75rem; }

.highlight__list li::marker { color: var(--accent); }

/* Links inside content cards (e.g. provider pages): same external link treatment as in
   highlight blocks – accent color, underlined, lighter accent on hover. */
.card a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.card a:hover,
.card a:focus {
    color: color-mix(in srgb, var(--accent) 70%, #ffffff);
}

/* --------------------------------------------------------------------------
   Card grids (features, characters, use cases)
   -------------------------------------------------------------------------- */

.card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.5rem;
}

.card {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.75rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

/* Selected character card: brighter outline to show which card is expanded. */
.card--selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent), 0 4px 16px color-mix(in srgb, var(--accent) 25%, transparent);
}

.card h3 { margin: 0.75rem 0 0.5rem; }

.card__spec {
    display: inline-block;
    max-width: 100%;
    margin: -0.25rem 0 0.5rem;
    padding: 0.1rem 0.55rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 999px;
    white-space: normal;
}

.card p {
    margin: 0;
    color: var(--muted);
}

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

.card__icon {
    font-size: 1.75rem;
    line-height: 1;
}

/* Feature cards: align card internals across each row with subgrid, so the
   body text of all cards in a row starts at the same height even when titles
   wrap to a different number of lines – without reserving empty title space.
   Progressive enhancement: where subgrid is unsupported, cards simply lay out
   independently (previous behaviour). */
@supports (grid-template-rows: subgrid) {
    @media (min-width: 48rem) {
        .card-grid--features {
            grid-auto-rows: auto auto 1fr;
        }

        .card-grid--features .card {
            display: grid;
            grid-row: span 3;
            grid-template-rows: subgrid;
            row-gap: 0;
        }
    }
}

/* Feature card typography: balance multi-line titles (avoids a lone word on
   the last title line) and use pretty wrapping in body text to reduce widows
   (single words on the final line). */
.card-grid--features .card h3 {
    text-wrap: balance;
}

.card-grid--features .card p {
    text-wrap: pretty;
}

/* Source cards (models page, e.g. Ollama/vLLM): pin the outgoing link to the
   bottom of the card so links in a row sit at the same height even when the
   body text above differs in length. Same pattern as .card__footer on the
   character cards. */
.card-grid--sources .card {
    display: flex;
    flex-direction: column;
}

.card-grid--sources .card__link {
    margin-top: auto;
    padding-top: 1rem;
}

/* Character cards: centered portraits, with initials when no image is configured. */

.card--character {
    text-align: center;
    display: flex;
    flex-direction: column;
}

/* Card footer: tags + detail button pinned to bottom for aligned rows. */
.card__footer {
    margin-top: auto;
    padding-top: 1rem;
}

.card__tagline {
    color: var(--accent) !important;
    font-weight: 600;
    font-size: 0.9rem;
}

/* Legend table: the expandable badge explanations above the provider table.
   Same row mechanics as .provider-table, but visually a distinct "info box"
   so it doesn't merge with the actual provider table below. */

.legend-table {
    container: legend / inline-size;
    margin-top: 0.75rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.25rem 1rem;
}

/* Compact rows inside the legend box: smaller type, tighter spacing,
   no full-width table feel. */

.legend-table .provider-table__row:last-child { border-bottom: none; }

.legend-table .provider-table__row summary {
    padding: 0.55rem 0;
    gap: 0.75rem;
}

.legend-table .provider-table__name {
    font-weight: 600;
    font-size: 0.92rem;
    flex: 1 1 0;
    min-width: 0;
    overflow-wrap: anywhere;
}

.legend-table .provider-table__badge { flex-shrink: 0; }

.legend-table .provider-table__detail {
    padding: 0 0 0.85rem 1.5rem;
    font-size: 0.9rem;
}

.provider-table {
    container: providers / inline-size;
    margin-top: 1rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.25rem 1rem;
}

.provider-table__row { border-bottom: 1px solid var(--border); }

.provider-table__row:last-of-type { border-bottom: none; }

.provider-table__row summary {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.75rem 0;
    cursor: pointer;
    list-style: none;
}

.provider-table__row summary::-webkit-details-marker { display: none; }

.provider-table__row summary::before {
    content: "▸";
    color: var(--accent);
    flex-shrink: 0;
}

.provider-table__row[open] summary::before { content: "▾"; }

.provider-table__row summary:hover .provider-table__name,
.provider-table__row summary:focus-visible .provider-table__name { color: var(--accent); }

.provider-table__name {
    font-weight: 600;
    flex: 0 0 13rem;
}

.provider-table__chip {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--accent);
    border: 1px solid var(--accent);
    border-radius: 999px;
    padding: 0.05rem 0.5rem;
    margin-left: 0.5rem;
    vertical-align: middle;
    white-space: nowrap;
}

.provider-table__seat {
    color: var(--muted);
    font-size: 0.9rem;
    white-space: nowrap;
    flex: 0 0 7rem;
}

.provider-table__badges {
    margin-left: auto;
    display: inline-flex;
    gap: 0.15em;
    white-space: nowrap;
}

.provider-table__badge {
    position: relative;
    display: inline-block;
    width: 1.7em;
    text-align: center;
}

/* Use available content width and the actual root font, including enlarged text.
   The separate legend remains a flex row with a wrapping explanation. */
@container providers (max-width: 36rem) {
    .provider-table .provider-table__row summary {
        display: grid;
        grid-template-columns: 0.75rem minmax(0, 1fr) fit-content(6rem);
        gap: 0.5rem 0.75rem;
    }

    .provider-table .provider-table__name {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    .provider-table .provider-table__seat {
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: right;
    }

    .provider-table__chip { display: none; }

    .provider-table__badges {
        grid-column: 2 / -1;
        justify-self: start;
        min-width: 0;
        margin-left: 0;
        flex-wrap: wrap;
        white-space: normal;
    }

    .provider-table__badges > .provider-table__badge {
        flex: 0 0 1.7em;
    }
}

/* At very narrow text measures, give each label room instead of squeezing
   individual glyphs between the disclosure marker, seat and badge columns. */
@container providers (max-width: 14rem) {
    .provider-table .provider-table__row summary {
        grid-template-columns: 0.75rem minmax(0, 1fr);
    }

    .provider-table .provider-table__seat {
        grid-column: 2;
        text-align: left;
    }
}

@container legend (max-width: 12rem) {
    .legend-table .provider-table__row summary {
        display: grid;
        grid-template-columns: 0.75rem minmax(0, 1fr);
        gap: 0.5rem;
    }

    .legend-table .provider-table__name { grid-column: 2; }
}

.provider-table__badge--na {
    color: var(--muted);
    opacity: 0.45;
}

.provider-table__badge-note {
    position: absolute;
    top: -0.35em;
    right: 0.1em;
    color: var(--accent);
    font-size: 0.75em;
    font-weight: 700;
}

.provider-table__detail { padding: 0 0 1rem 1.25rem; }

.provider-table__detail p {
    margin: 0;
    color: var(--muted);
}

.provider-table__detail p + p { margin-top: 0.5rem; }

.provider-table__points {
    margin: 0.5rem 0;
    padding-left: 0;
    list-style: none;
}

.provider-table__points li {
    position: relative;
    padding-left: 1.6rem;
}

.provider-table__points li + li { margin-top: 0.35rem; }

.model-tips {
    margin: 0.5rem 0 1rem;
    padding-left: 1.25rem;
    color: var(--muted);
}

.model-tips li + li { margin-top: 0.5rem; }

.model-tips strong { color: var(--fg); }

/* Inline links in model tips: brand accent, same treatment as provider-table links. */

.model-tips a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.model-tips a:hover,
.model-tips a:focus-visible { color: color-mix(in srgb, var(--accent) 70%, #ffffff); }

/* Collapsible glossary of model terms (parameters, architecture, context, quantization). */

.glossary {
    margin: 0.5rem 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.glossary__item {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    overflow: hidden;
}

.glossary__item > summary {
    cursor: pointer;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--fg);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

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

.glossary__item > summary::before {
    content: "+";
    color: var(--accent);
    font-weight: 700;
    line-height: 1;
    width: 1rem;
    text-align: center;
}

.glossary__item[open] > summary::before { content: "\2013"; }

.glossary__item > summary:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
}

.glossary__item > p {
    margin: 0;
    padding: 0 1rem 1rem;
    color: var(--muted);
}

.provider-table__source { font-size: 0.85rem; }

/* Provider table links: same treatment as links in .highlight boxes. */

.provider-table a {
    color: var(--accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.provider-table a:hover,
.provider-table a:focus-visible { color: color-mix(in srgb, var(--accent) 70%, #ffffff); }

.provider-table__footer {
    margin-top: 1rem;
    color: var(--muted);
    font-size: 0.9rem;
}

/* Inline symbol chip used in the legend/key so a symbol reads clearly as a symbol
   rather than as ordinary punctuation in the surrounding sentence. */
.provider-table__key-symbol {
    display: inline-block;
    min-width: 1.4em;
    padding: 0 0.35em;
    border: 1px solid var(--border);
    border-radius: 0.3rem;
    background: rgba(255, 255, 255, 0.06);
    color: var(--fg);
    font-weight: 600;
    text-align: center;
    line-height: 1.4;
}

/* Shared avatar base and initials fallback for characters without an image.
   The template sets --avatar-color on the initials disc; portraits use the modifier below. */

.avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    font-weight: 700;
    font-size: 1.5rem;
    letter-spacing: 0.05em;
    color: #0f1115;
    background: linear-gradient(135deg, var(--avatar-color, var(--accent)), color-mix(in srgb, var(--avatar-color, var(--accent)) 55%, #ffffff));
    box-shadow: 0 0 24px color-mix(in srgb, var(--avatar-color, var(--accent)) 40%, transparent);
}

/* Image avatars: rectangular with rounded corners for character portraits. */

.avatar--image {
    width: 100%;
    max-width: 200px;
    height: auto;
    aspect-ratio: 1;
    border-radius: 1rem;
    object-fit: cover;
    align-self: center;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--avatar-color, var(--accent)) 25%, transparent);
}

/* Native character disclosures, enhanced to a shared detail view by JS. */

.character-detail-button[hidden],
.character-detail-fallback[hidden],
.character-detail-view[hidden] {
    display: none;
}

.character-detail-button:focus-visible,
.character-detail-close:focus-visible,
#character-detail-title:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.character-detail-fallback .character-detail-view__content {
    margin-top: 1rem;
    text-align: left;
}

.character-detail-button {
    margin-top: 1rem;
    padding: 0.5rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    color: var(--accent);
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.2s;
}

.character-detail-button:hover {
    background: var(--bg-elevated);
}

/* Shared character detail view (hidden by default, shown via JS). Placed
   inside the card grid directly below the active card's row via JS, so the
   grid gap already provides the spacing above it. */

.character-detail-view {
    grid-column: 1 / -1;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: clamp(1rem, 4vw, 2rem);
}

.character-detail-view__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.character-detail-view__header h3 {
    min-width: 0;
    margin: 0;
    font-size: 1.25rem;
}

.character-detail-close {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--muted);
    cursor: pointer;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    flex-shrink: 0;
    align-items: center;
    justify-content: center;
    border-radius: 0.25rem;
    transition: color 0.2s, background 0.2s;
}

.character-detail-close:hover {
    color: var(--fg);
    background: var(--bg-elevated);
}

.character-detail-view__content {
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Two-column layout: narrative text left, bullet list right (desktop). */
.character-detail-view__columns {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 2.25rem;
    align-items: start;
}

.character-detail-view__content p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.character-detail-view__columns p:last-child {
    margin-bottom: 0;
}

.character-detail-view__content ul {
    margin: 0;
    padding-left: 1.5rem;
}

.character-detail-view__content li {
    margin-bottom: 0.5rem;
}

.character-detail-view__content blockquote {
    margin: 1.5rem 0 0;
    padding: 1rem;
    border-left: 3px solid var(--accent);
    background: var(--bg-elevated);
    font-style: italic;
    color: var(--muted);
}

/* Narrow screens: stack columns vertically. */
@media (max-width: 720px) {
    .character-detail-view__columns {
        grid-template-columns: 1fr;
    }

    .character-detail-view__content ul {
        margin-top: 0.5rem;
    }
}

/* --------------------------------------------------------------------------
   Roadmap timeline
   -------------------------------------------------------------------------- */

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    gap: 1.5rem;
    counter-reset: phase;
}

.timeline__item {
    position: relative;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 1rem;
    padding: 1.75rem;
    padding-top: 2.5rem;
}

.timeline__item::before {
    counter-increment: phase;
    content: counter(phase);
    position: absolute;
    top: -0.9rem;
    left: 1.5rem;
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
    background: var(--border);
    color: var(--muted);
}

.timeline__item--current {
    border-color: var(--accent);
    box-shadow: 0 0 24px var(--accent-soft);
}

.timeline__item--current::before {
    background: var(--accent);
    color: #0f1115;
}

.timeline__phase {
    display: inline-block;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--accent);
    margin-bottom: 0.25rem;
}

.timeline__item--future .timeline__phase,
.timeline__item--next .timeline__phase { color: var(--muted); }

.timeline__item h3 { margin: 0.25rem 0 0.5rem; }

.timeline__item p {
    margin: 0;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq {
    max-width: 48rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.faq__item {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
}

.faq__item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
    position: relative;
    padding-right: 2rem;
}

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

.faq__item summary::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--accent);
    line-height: 1;
}

.faq__item[open] summary::after { content: "−"; }

.faq__item p {
    margin: 0.75rem 0 0;
    color: var(--muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
    text-align: center;
    padding: 2rem 1.5rem;
    color: var(--muted);
    font-size: 0.875rem;
    border-top: 1px solid var(--border);
}

.footer p { margin: 1rem 0 0; }

.footer__anchors,
.footer__links {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    justify-content: center;
}

.footer__links { margin-top: 0.75rem; }

.footer a {
    color: var(--muted);
    text-decoration: none;
}

.footer a:hover,
.footer a:focus {
    color: var(--fg);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Legal pages (Impressum, Datenschutz): a readable, left-aligned text column
   -------------------------------------------------------------------------- */

.legal {
    max-width: 48rem;
    margin: 0 auto;
    text-align: left;
    line-height: 1.7;
    overflow-wrap: anywhere;
}

.legal h1 {
    font-size: clamp(1.75rem, 5vw, 2.5rem);
    margin: 0 0 1.5rem;
}

.legal a { color: var(--link); }

.legal table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5rem 0;
    font-size: 0.95rem;
}

.legal th,
.legal td {
    text-align: left;
    padding: 0.75rem 0.9rem;
    border: 1px solid var(--border);
    vertical-align: top;
}

.legal th {
    background: var(--bg-elevated);
    font-weight: 700;
}

.legal td:first-child { white-space: nowrap; font-weight: 600; }

/* Preserve native table semantics while allowing both columns to reflow. */
@media (max-width: 40rem) {
    .legal table { table-layout: fixed; }

    .legal th,
    .legal td {
        padding: 0.65rem 0.6rem;
        hyphens: auto;
    }

    .legal th:first-child { width: 35%; }
    .legal td:first-child { white-space: normal; }
}

.highlight__more { margin: 1rem 0 0; }

.highlight__more a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}

.highlight__more a:hover,
.highlight__more a:focus { text-decoration: underline; }