:root {
    /* Brand */
    --scum-dark: #1a1a2e;
    --scum-darker: #12121f;
    --scum-accent-rgb: 233, 69, 96;
    --scum-accent: rgb(var(--scum-accent-rgb));
    --scum-accent-hover: #c73652;

    /* Surfaces */
    --scum-card-bg: #16213e;
    --scum-input-bg: #0f3460;

    /* Text */
    --scum-text: #e0e0e0;
    --scum-text-bright: #ffffff;
    --scum-text-muted: #adb5bd;
    --scum-text-subtle: #8a9bb5;
    --scum-muted: #6c757d;

    /* Borders */
    --scum-border-subtle: rgba(255, 255, 255, 0.08);
    --scum-border: rgba(255, 255, 255, 0.15);

    /* Accent overlays */
    --scum-accent-border-subtle: rgba(var(--scum-accent-rgb), 0.2);
    --scum-accent-border: rgba(var(--scum-accent-rgb), 0.3);
    --scum-accent-bg-subtle: rgba(var(--scum-accent-rgb), 0.1);
    --scum-accent-focus-ring: rgba(var(--scum-accent-rgb), 0.25);
}

body {
    background-color: var(--scum-dark);
    color: var(--scum-text);
    min-height: 100vh;
}

/* Navbar */
.navbar {
    background-color: var(--scum-darker) !important;
    border-bottom: 1px solid var(--scum-accent-border);
}

.navbar-brand {
    color: var(--scum-accent) !important;
    font-weight: 700;
    letter-spacing: 1px;
}

.nav-link {
    color: var(--scum-text-muted) !important;
}

.nav-link:hover, .nav-link.active {
    color: var(--scum-text-bright) !important;
}

/* Cards */
.card {
    background-color: var(--scum-card-bg);
    border: 1px solid var(--scum-border-subtle);
    border-radius: 8px;
    color: var(--scum-text);
}

.card-header {
    background-color: var(--scum-accent-bg-subtle);
    border-bottom: 1px solid var(--scum-accent-border-subtle);
    font-weight: 600;
    color: var(--scum-text-bright);
}

.card .text-muted,
.card dt.text-muted {
    color: var(--scum-text-subtle) !important;
}

/* Tables */
.table {
    color: var(--scum-text);
}

/* Buttons */
.btn-primary {
    background-color: var(--scum-accent);
    border-color: var(--scum-accent);
}

.btn-primary:hover {
    background-color: var(--scum-accent-hover);
    border-color: var(--scum-accent-hover);
}

/* Forms */
.form-control, .form-select, textarea.form-control {
    background-color: var(--scum-input-bg);
    border-color: var(--scum-border);
    color: var(--scum-text);
}

.form-control:focus, .form-select:focus, textarea.form-control:focus {
    background-color: var(--scum-input-bg);
    border-color: var(--scum-accent);
    color: var(--scum-text);
    box-shadow: 0 0 0 0.2rem var(--scum-accent-focus-ring);
}

.form-control::placeholder {
    color: var(--scum-muted);
}

/* Bootstrap gives disabled/readonly fields a light grey background (more specific than the
   rule above), which leaves our light text unreadable - e.g. on a locked, approved profile. */
.form-control:disabled, .form-control[readonly],
.form-select:disabled {
    background-color: var(--scum-input-bg);
    border-color: var(--scum-border-subtle);
    color: var(--scum-text);
    opacity: 0.75;
}

.form-label {
    color: var(--scum-text);
    font-weight: 500;
}

/* Headings */
h1, h2 {
    font-family: "ethnocentric", sans-serif;
    font-style: normal;
    font-weight: 100;
}

/* Page title */
.page-title {
    color: var(--scum-accent);
}

/* Home — social media links */
.social-link {
    color: var(--scum-text-muted);
    transition: color 0.15s ease-in-out;
}

.social-link:hover {
    color: var(--scum-accent);
}

/* Home — Merch-Shop tile */
.merch-card-body {
    min-height: 352px;
    background-image: linear-gradient(180deg, rgba(18, 18, 31, 0.35), rgba(18, 18, 31, 0.85)), url("../images/hi--oDmkbt.png");
    background-size: cover;
    background-position: center;
    border-radius: 0 0 8px 8px;
    color: #fff;
}

.merch-card-body p {
    color: #fff;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Home — two-click placeholder for third-party embeds (same height as the Spotify player) */
.click-to-load-placeholder {
    min-height: 352px;
    border-radius: 0 0 8px 8px;
}

.click-to-load-placeholder .bi-spotify {
    color: #1db954;
}

/* Character roster — ID card tiles */
.id-card-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: transform 0.15s ease-in-out;
}

.id-card-link:hover {
    transform: translateY(-4px);
    color: inherit;
}

.id-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background-color: #ece7dc;
    color: #22262e;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    overflow: hidden;
    padding-top: 14px;
}

.id-card--large {
    max-width: 480px;
    margin: 0 auto;
    height: auto;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.id-card--large .id-card-photo {
    width: 160px;
    height: 160px;
    margin-top: 1.5rem;
}

.id-card--large .id-card-org {
    font-size: 1rem;
}

.id-card--large .id-card-badge {
    font-size: 0.8rem;
}

.id-card--large .id-card-name {
    font-size: 1.75rem;
}

.id-card--large .id-card-info {
    font-size: 1rem;
    white-space: pre-line;
}

.id-card-hole {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    width: 34px;
    height: 8px;
    border-radius: 4px;
    background-color: var(--scum-dark);
    opacity: 0.5;
}

.id-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.5rem 0.9rem;
    background-color: var(--scum-accent);
    color: #fff;
}

.id-card-org {
    font-weight: 700;
    letter-spacing: 1px;
    font-size: 0.85rem;
}

.id-card-badge {
    font-size: 0.65rem;
    text-transform: uppercase;
    opacity: 0.9;
}

.id-card-photo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 96px;
    height: 96px;
    margin: 1rem auto 0.5rem;
    border-radius: 50%;
    background-color: #fff;
    border: 3px solid var(--scum-dark);
    overflow: hidden;
}

.id-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.id-card-photo .bi {
    font-size: 2.75rem;
    color: #b9b2a3;
}

.id-card-body {
    flex-grow: 1;
    padding: 0 1rem;
    text-align: center;
}

.id-card-name {
    font-weight: 700;
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}

.id-card-field {
    font-size: 0.8rem;
    color: #555;
    margin-bottom: 0.35rem;
}

.id-card-field-label {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    margin-right: 0.35rem;
}

.id-card-info {
    font-size: 0.85rem;
    color: #3a3d42;
    margin-bottom: 0.5rem;
}

.id-card-footer {
    border-top: 1px dashed #b9b2a3;
    padding: 0.4rem 1rem 0.7rem;
    text-align: center;
}

.id-card-id {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 0.75rem;
    letter-spacing: 1px;
    color: #6b6255;
}

/* Footer */
footer {
    border-top: 1px solid var(--scum-border-subtle);
    color: var(--scum-muted);
    font-size: 0.85rem;
}

/* Lore item reveal page: paper texture per content type */
.lore-item-paper--textured {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* The site-wide .card rule sets a light gray color for the dark navy card
       background used everywhere else - on a light paper texture that's
       light-on-light and unreadable, so switch to a dark "ink" color here. */
    color: #2b2116;
}

.card.lore-item-paper--textured .text-muted {
    color: #5a4632 !important;
}

.lore-item-paper--textured .table {
    color: inherit;
}

/* Admin-written HTML lands inside the paper card, so anything Bootstrap colors
   for the dark navy theme (links, code, blockquote borders) has to be pulled
   back to readable "ink" tones here too. */
.lore-item-paper--textured a {
    color: #6b3410;
    text-decoration: underline;
}

.lore-item-paper--textured a:hover {
    color: #8f4614;
}

.lore-item-paper--textured code,
.lore-item-paper--textured pre,
.lore-item-paper--textured kbd,
.lore-item-paper--textured samp {
    background-color: rgba(43, 33, 22, .07);
    color: inherit;
}

.lore-item-paper--textured blockquote {
    border-left: 3px solid rgba(43, 33, 22, .35);
    padding-left: .75rem;
    font-style: italic;
}

.lore-item-paper--textured hr {
    border-top: 1px solid rgba(43, 33, 22, .35);
    opacity: 1;
}

.lore-item-paper--textured img {
    max-width: 100%;
    height: auto;
}

/* Gives the document-style lore items (medical/delivery/mission/diary) at least
   a DIN A4 page shape (210x297mm ratio), even when the content is short. Grows
   taller than that for longer content since aspect-ratio only sets the
   preferred/minimum size, it doesn't clip anything. */
.lore-item-paper {
    max-width: 720px;
    aspect-ratio: 210 / 297;
    margin-left: auto;
    margin-right: auto;
}

/* Lore item "Medizinischer Bericht": an old, torn hospital sheet like the KT-GESAMT notes. The image
   carries its own frayed edge and shadow (transparent around it), so the card itself has no frame and
   the padding keeps the text inside the paper. */
.card.medical-sheet {
    background-color: transparent;
    background-size: 100% 100%;
    border: 0;
    box-shadow: none;
    color: #3a2410;
}

.medical-sheet .card-body {
    padding: 11% 12% 13%;
}

.medical-sheet .card-title {
    font-size: .8rem;
    color: #6b4a2b;
    opacity: .8;
}

.medical-sheet__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    margin: 1.25rem 0 1.5rem;
}

.medical-sheet__title {
    font-family: "ethnocentric", sans-serif;
    font-size: clamp(1.1rem, 3.6vw, 1.75rem);
    color: #6b3e12;
    text-transform: uppercase;
    line-height: 1.2;
}

.medical-sheet__date {
    font-family: "ethnocentric", sans-serif;
    font-size: clamp(.75rem, 2vw, .95rem);
    color: #4a2a0c;
    margin-top: .75rem;
}

.medical-sheet__logo {
    width: clamp(48px, 11vw, 84px);
    flex-shrink: 0;
}

.medical-sheet__fields,
.medical-sheet__entry,
.medical-sheet .card-text {
    font-family: "DejaVu Sans Mono", "Courier New", ui-monospace, monospace;
    font-size: clamp(.8rem, 2.1vw, .98rem);
}

.medical-sheet__fields {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .15rem 1rem;
    margin-bottom: 1.25rem;
}

.medical-sheet__fields dt {
    font-weight: 600;
}

.medical-sheet__fields dd {
    margin: 0;
}

.medical-sheet__entry {
    margin-bottom: 1rem;
}

.medical-sheet__label {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-size: .85em;
}

.medical-sheet__text {
    white-space: pre-line;
}

/* Geschwärzter Name: schwarzer Balken mit unruhigen Rändern, die Buchstaben darunter unsichtbar */
.medical-sheet__redacted {
    display: inline-block;
    min-width: 9ch;
    color: transparent;
    background: #14100c;
    border-radius: 2px 5px 3px 6px;
    transform: rotate(-.6deg);
    box-shadow: 1px 0 0 #14100c, -2px 1px 0 rgba(20, 16, 12, .85), 3px -1px 0 rgba(20, 16, 12, .6);
    user-select: none;
}

/* Handschriftlicher roter Vermerk wie "Übergabe A. gemäß Wunsch" auf den alten Notizen */
.medical-sheet__stamp {
    font-family: Georgia, "Times New Roman", serif;
    font-style: italic;
    font-weight: 700;
    font-size: clamp(1rem, 2.8vw, 1.35rem);
    color: #c8141c;
    transform: rotate(-4deg);
    margin: 1.5rem 0 0 30%;
}

.medical-sheet code {
    background: transparent;
    font-style: italic;
}

/* Lore item "Computer": the puzzle terminal and, once solved, the screen showing the content.
   Same card element as the paper types, so the site-wide .card colors are overridden here. */
.computer-screen {
    background-color: #0b120b;
    color: #7dff9a;
    font-family: "Courier New", ui-monospace, monospace;
    border: 2px solid #1f3d24;
    box-shadow: inset 0 0 40px rgba(0, 255, 90, .08), 0 0 12px rgba(0, 255, 90, .15);
    text-shadow: 0 0 4px rgba(125, 255, 154, .45);
}

.card.computer-screen .text-muted {
    color: #3fae5c !important;
}

.computer-screen a {
    color: #b6ffc6;
    text-decoration: underline;
}

.computer-screen .table {
    color: inherit;
}

.computer-screen__header {
    border-bottom: 1px solid #3fae5c;
    padding-bottom: .5rem;
}

.computer-screen__big {
    font-size: 1.4rem;
    letter-spacing: .1em;
    word-break: break-word;
}

.computer-screen__alert {
    color: #ffcf5c;
}

.computer-screen__attempts {
    letter-spacing: .2em;
}

.computer-screen__words {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.computer-screen .form-control {
    background-color: transparent;
    color: inherit;
    border-color: #3fae5c;
    font-family: inherit;
    max-width: 24rem;
}

.computer-screen .form-control::placeholder {
    color: #3fae5c;
}

.computer-screen .btn-terminal {
    color: inherit;
    background-color: transparent;
    border: 1px solid #3fae5c;
    font-family: inherit;
}

.computer-screen .btn-terminal:hover,
.computer-screen .btn-terminal:focus-visible {
    color: #0b120b;
    background-color: #7dff9a;
}

.computer-screen .btn-terminal:disabled {
    color: #3fae5c;
    border-color: #1f3d24;
    text-decoration: line-through;
}

.computer-screen pre {
    color: inherit;
    font-family: inherit;
    margin-bottom: .75rem;
}

.computer-screen__circuits {
    display: flex;
    flex-wrap: wrap;
    column-gap: 2rem;
}

.computer-screen__morse-table {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
    gap: .25rem;
}

.computer-screen__switches {
    display: grid;
    grid-template-columns: repeat(var(--switch-columns), 4.5rem);
    gap: .5rem;
}

.computer-screen__switches .btn-terminal {
    height: 4.5rem;
}

.computer-screen__switches .btn-terminal.is-on {
    color: #0b120b;
    background-color: #7dff9a;
}

.computer-screen__switches .btn-terminal:disabled {
    text-decoration: none;
}

/* Wiki: [[Links]] im Text (wiki_links-Filter) */
.wiki-content a.wiki-link {
    text-decoration: underline dotted;
}

/* Abschnitte mit eigener Sichtbarkeit (App\Service\Wiki\WikiSections) */
.wiki-section {
    border: 1px dashed var(--scum-border);
    border-radius: 4px;
}

div.wiki-section {
    padding: .5rem .75rem;
    margin-bottom: 1rem;
}

span.wiki-section {
    padding: 0 .2rem;
}

.wiki-section__label {
    font-size: .75rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--scum-text-muted);
    margin-bottom: .25rem;
}

.wiki-section--admin {
    border-color: var(--bs-danger);
}

.wiki-section--political {
    border-color: var(--bs-info);
}

.wiki-section--group {
    border-color: var(--bs-warning);
}

.wiki-link--missing {
    color: var(--scum-accent);
    text-decoration: underline wavy;
    cursor: help;
}

.wiki-tile {
    color: var(--scum-text);
}

.wiki-tile:hover {
    border-color: var(--scum-accent-border);
    color: var(--scum-text-bright);
}

/* Wiki: Übersichtskarte der Orte */
.wiki-place-marker {
    text-decoration: none;
    line-height: 1;
}

.wiki-place-marker__label {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: .1rem .4rem;
    border-radius: .25rem;
    background-color: var(--scum-darker);
    color: var(--scum-text-bright);
    font-size: .8rem;
}

.wiki-place-marker:hover .wiki-place-marker__label,
.wiki-place-marker:focus .wiki-place-marker__label {
    display: block;
}

/* Wiki-Zeitstrahl (assets/wiki_timeline.js): Band in der Mitte, Karten darüber und darunter. Die
   Strangfarbe kommt pro Karte/Linie als --wiki-timeline-accent; Karten liegen über dem SVG. */
.wiki-timeline {
    position: relative;
    overflow: hidden;
    padding: .75rem 0;
    border: 1px solid var(--scum-border);
    border-radius: .375rem;
    background-color: var(--scum-card-bg);
    touch-action: pan-y;
    user-select: none;
    cursor: grab;
}

.wiki-timeline.is-dragging {
    cursor: grabbing;
}

.wiki-timeline:focus-visible {
    outline: 2px solid var(--scum-text-muted);
    outline-offset: 2px;
}

.wiki-timeline__canvas {
    position: relative;
}

.wiki-timeline__svg {
    position: absolute;
    inset: 0;
}

/* Umriss über den farbigen Abschnitten */
.wiki-timeline__band {
    fill: none;
    stroke: var(--scum-border);
}

/* Abschnitte im Band (Wochen/Monate/Jahre/Jahrzehnte), reihum */
.wiki-timeline__segment--0 { fill: #4a1416; }
.wiki-timeline__segment--1 { fill: #6e1c1f; }
.wiki-timeline__segment--2 { fill: #8f2629; }
.wiki-timeline__segment--3 { fill: #5c181a; }

.wiki-timeline__boundary {
    stroke: rgba(255, 255, 255, .7);
    stroke-width: 1.5;
}

.wiki-timeline__label {
    fill: #fbecec;
    font-size: 11px;
    font-weight: 600;
    dominant-baseline: central;
    paint-order: stroke;
    stroke: rgba(0, 0, 0, .55);
    stroke-width: 3px;
    pointer-events: none;
}

.wiki-timeline__today {
    stroke: #2ecc71;
    stroke-width: 2;
    stroke-dasharray: 4 3;
}

/* Linie über alle Stränge für Ereignisse mit timelineMarker */
.wiki-timeline__marker {
    stroke: #ffc107;
    stroke-width: 3;
    opacity: .75;
}

.wiki-timeline__stem {
    stroke: var(--scum-text-muted);
    stroke-width: 1;
    opacity: .6;
}

.wiki-timeline__stem.is-active {
    stroke: var(--wiki-timeline-accent);
    stroke-width: 2;
    opacity: 1;
}

.wiki-timeline__dot {
    fill: var(--wiki-timeline-accent, #4e9af1);
    stroke: var(--scum-card-bg);
    stroke-width: 2;
}

.wiki-timeline__dot.is-active {
    stroke: var(--scum-text-bright);
}

.wiki-timeline__range {
    fill: var(--wiki-timeline-accent, #4e9af1);
    opacity: .75;
}

.wiki-timeline__range.is-active {
    opacity: 1;
}

.wiki-timeline-card {
    position: absolute;
    display: block;
    padding: .35rem .5rem;
    border: 1px solid var(--scum-border);
    border-radius: .375rem;
    background-color: var(--scum-darker);
    color: var(--scum-text);
    font-size: .8rem;
    line-height: 1.25;
    text-decoration: none;
    cursor: pointer;
}

/* Akzentkante (Strangfarbe) zum Band hin */
.wiki-timeline-card--top {
    border-bottom: 3px solid var(--wiki-timeline-accent);
}

.wiki-timeline-card--bottom {
    border-top: 3px solid var(--wiki-timeline-accent);
}

.wiki-timeline-card:hover,
.wiki-timeline-card:focus-visible {
    z-index: 1;
    border-color: var(--wiki-timeline-accent);
    color: var(--scum-text-bright);
}

/* Wissen nicht für alle: gestrichelt, die Akzentkante bleibt durchgezogen */
.wiki-timeline-card--political,
.wiki-timeline-card--group,
.wiki-timeline-card--admin {
    border-style: dashed;
}

.wiki-timeline-card--top.wiki-timeline-card--political,
.wiki-timeline-card--top.wiki-timeline-card--group,
.wiki-timeline-card--top.wiki-timeline-card--admin {
    border-bottom-style: solid;
}

.wiki-timeline-card--bottom.wiki-timeline-card--political,
.wiki-timeline-card--bottom.wiki-timeline-card--group,
.wiki-timeline-card--bottom.wiki-timeline-card--admin {
    border-top-style: solid;
}

.wiki-timeline-card__date {
    display: block;
    color: var(--scum-text-muted);
    font-size: .72rem;
}

.wiki-timeline-card__title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    font-weight: 600;
    overflow-wrap: anywhere;
}

/* Wichtigkeit: unwichtig und nebensächlich dünn und blasser, wichtig bis extrem wichtig fett, extrem wichtig mit Stern */
.wiki-timeline-card--trivial {
    opacity: .7;
}

.wiki-timeline-card--minor {
    opacity: .85;
}

.wiki-timeline-card--trivial .wiki-timeline-card__title,
.wiki-timeline-card--minor .wiki-timeline-card__title {
    font-weight: 400;
}

.wiki-timeline-card--trivial .wiki-timeline-card__title {
    font-size: .9em;
}

.wiki-timeline-card--major .wiki-timeline-card__title,
.wiki-timeline-card--high .wiki-timeline-card__title,
.wiki-timeline-card--key .wiki-timeline-card__title {
    font-weight: 700;
}

.wiki-timeline-card--high .wiki-timeline-card__title::before {
    content: "\f587"; /* bi-star-half */
    font-family: "bootstrap-icons";
    font-weight: 400;
    margin-right: .25rem;
    color: #e0a930;
}

.wiki-timeline-card--key .wiki-timeline-card__title::before {
    content: "\f586"; /* bi-star-fill */
    font-family: "bootstrap-icons";
    font-weight: 400;
    margin-right: .25rem;
    color: #e0a930;
}

.wiki-timeline-card__note {
    display: block;
    margin-top: .15rem;
    color: var(--scum-text-muted);
    font-size: .68rem;
    font-style: italic;
}

/* Strang-Chips zum Ein- und Ausblenden */
.wiki-timeline-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .15rem .55rem;
    border: 1px solid var(--scum-border);
    border-radius: 1rem;
    background-color: var(--scum-darker);
    color: var(--scum-text);
    font-size: .8rem;
}

.wiki-timeline-chip::before {
    content: "";
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background-color: var(--wiki-timeline-accent);
}

.wiki-timeline-chip.is-off {
    color: var(--scum-text-muted);
    text-decoration: line-through;
    opacity: .6;
}

.wiki-timeline-chip.is-off::before {
    background-color: transparent;
    border: 1px solid var(--wiki-timeline-accent);
}

.wiki-timeline-scrollbar {
    overflow-x: auto;
    overflow-y: hidden;
    height: 14px;
    margin-top: 2px;
    scrollbar-color: var(--scum-text-muted) var(--scum-card-bg);
}

.wiki-timeline-scrollbar > div {
    height: 1px;
}

/* Kompakte Wiki-Suche neben der Brotkrumen-Navigation (templates/wiki/_search.html.twig) */
.wiki-search--compact {
    width: 100%;
    max-width: 18rem;
    margin-bottom: 1rem;
}

/* Überschriften im Wiki-Text: h1 = Staffel-Abschnitt, h2 = Monat - kleiner als der Seitentitel */
.wiki-content h1 {
    font-size: 1.6rem;
    margin-top: 1.5rem;
}

.wiki-content h2 {
    font-size: 1.3rem;
    margin-top: 1.25rem;
}

.wiki-content h3 {
    font-size: 1.1rem;
}

/* Bilder und Karten im Wiki-Text bleiben in der Textspalte (sonst ragen sie unter die Seitenleiste) */
.wiki-content img {
    display: block;
    max-width: 100%;
    height: auto;
}

.wiki-content figure {
    max-width: 36rem;
    margin: 1rem 0 1.5rem;
}

.wiki-content figcaption {
    font-size: .85rem;
    color: var(--scum-text-muted);
    margin-top: .4rem;
}

/* Fanforum (/forum) - klassische Foren-Optik: Themenliste als Tabelle, Beiträge mit Autorenspalte */
.forum-board-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    margin-bottom: 0.75rem;
    border-radius: 8px;
    background: linear-gradient(135deg, rgba(var(--scum-accent-rgb), 0.35), var(--scum-input-bg));
    border: 1px solid var(--scum-accent-border);
}

.forum-board-header__logo {
    font-size: 2rem;
    line-height: 1;
    color: var(--scum-text-bright);
}

.forum-board-header__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--scum-text-bright);
    letter-spacing: 0.5px;
}

.forum-board-header__tagline {
    font-size: 0.85rem;
    color: var(--scum-text-muted);
}

.forum-breadcrumb {
    font-size: 0.9rem;
}

.forum-empty {
    padding: 2rem;
    text-align: center;
    color: var(--scum-text-muted);
    border: 1px dashed var(--scum-border);
    border-radius: 8px;
}

.forum-table {
    border: 1px solid var(--scum-border);
    border-radius: 8px;
    overflow: hidden;
}

.forum-table__head,
.forum-table__row {
    display: grid;
    grid-template-columns: 1fr 7rem 12rem;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

.forum-table__head {
    background-color: var(--scum-input-bg);
    color: var(--scum-text-bright);
    font-weight: 600;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.forum-table__row {
    background-color: var(--scum-card-bg);
    border-top: 1px solid var(--scum-border-subtle);
}

.forum-table__row:nth-child(odd) {
    background-color: var(--scum-darker);
}

.forum-table__topic {
    display: flex;
    gap: 0.75rem;
    min-width: 0;
}

.forum-table__icon {
    font-size: 1.4rem;
    color: var(--scum-accent);
}

.forum-table__title {
    font-weight: 600;
    color: var(--scum-text-bright);
}

.forum-table__description,
.forum-table__meta,
.forum-table__last {
    font-size: 0.85rem;
    color: var(--scum-text-muted);
}

.forum-table__num {
    text-align: center;
}

@media (max-width: 767.98px) {
    .forum-table__head {
        display: none;
    }

    .forum-table__row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }

    .forum-table__num,
    .forum-table__last {
        text-align: left;
        padding-left: 2.15rem;
        font-size: 0.85rem;
        color: var(--scum-text-muted);
    }
}

.forum-thread-title {
    font-size: 1.5rem;
    color: var(--scum-text-bright);
    margin-bottom: 1rem;
}

.forum-post {
    display: grid;
    grid-template-columns: 10rem 1fr;
    margin-bottom: 1rem;
    border: 1px solid var(--scum-border);
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--scum-card-bg);
    scroll-margin-top: 1rem;
}

.forum-post:target {
    border-color: var(--scum-accent);
    box-shadow: 0 0 0 3px var(--scum-accent-focus-ring);
}

.forum-post--draft {
    border-style: dashed;
    opacity: 0.8;
}

.forum-post__author {
    padding: 1rem 0.75rem;
    text-align: center;
    background-color: var(--scum-darker);
    border-right: 1px solid var(--scum-border-subtle);
}

.forum-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    font-size: 1.5rem;
    font-weight: 700;
    color: #fff;
    background-color: hsl(var(--forum-avatar-hue, 200), 45%, 38%);
    border: 2px solid hsl(var(--forum-avatar-hue, 200), 55%, 60%);
}

.forum-avatar--small {
    width: 2rem;
    height: 2rem;
    font-size: 0.9rem;
}

/* Profilbild statt Initiale (public/images/forum-avatars) */
.forum-avatar--image {
    object-fit: cover;
    background-color: var(--scum-darker);
    border-color: var(--scum-border-subtle);
}

.forum-post__name {
    margin-top: 0.5rem;
    font-weight: 600;
    color: var(--scum-text-bright);
    overflow-wrap: anywhere;
}

.forum-post__rank {
    font-size: 0.8rem;
    color: var(--scum-text-subtle);
}

.forum-post__main {
    min-width: 0;
}

.forum-post__header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    color: var(--scum-text-muted);
    border-bottom: 1px solid var(--scum-border-subtle);
}

.forum-post__number {
    margin-left: auto;
    color: var(--scum-text-subtle);
}

.forum-post__body {
    padding: 1rem;
    overflow-wrap: anywhere;
}

.forum-post__image {
    max-width: 100%;
    max-height: 28rem;
    border-radius: 4px;
    border: 1px solid var(--scum-border);
}

@media (max-width: 575.98px) {
    .forum-post {
        grid-template-columns: 1fr;
    }

    .forum-post__author {
        display: flex;
        align-items: center;
        gap: 0.75rem;
        text-align: left;
        padding: 0.5rem 0.75rem;
        border-right: 0;
        border-bottom: 1px solid var(--scum-border-subtle);
    }

    .forum-post__author .forum-avatar {
        width: 2.25rem;
        height: 2.25rem;
        font-size: 1rem;
    }

    .forum-post__name {
        margin-top: 0;
    }
}

.wiki-forum-mention {
    display: flex;
    gap: 0.5rem;
    align-items: flex-start;
}

.forum-emoji {
    height: 1.4em;
    width: auto;
    vertical-align: -0.3em;
}

.forum-post__reactions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0 1rem 0.75rem;
}

.forum-reaction {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    border: 1px solid var(--scum-border);
    background-color: var(--scum-darker);
    font-size: 0.9rem;
}

.forum-reaction__count {
    font-weight: 600;
    color: var(--scum-text-bright);
}

.forum-reply {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--scum-border);
    border-radius: 8px;
    background-color: var(--scum-card-bg);
    scroll-margin-top: 1rem;
}

.forum-reply__title {
    font-size: 1.15rem;
    color: var(--scum-text-bright);
}

/* Köderfeld gegen Bots: für Menschen unsichtbar, aber nicht display:none (das erkennen manche Bots) */
.forum-reply__trap {
    position: absolute;
    left: -10000px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Wiki: Weltwissen (grün, Globus) vs. Show-Wissen (blau, Kamera) deutlich unterscheiden */
.wiki-knowledge-banner,
.wiki-knowledge-hero {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    border-left: 4px solid;
}

.wiki-knowledge-banner > i,
.wiki-knowledge-hero > i {
    font-size: 1.5rem;
    line-height: 1;
}

.wiki-knowledge-hero {
    padding: 1rem 1.25rem;
}

.wiki-knowledge-hero > i {
    font-size: 2.5rem;
}

.wiki-knowledge-banner--world,
.wiki-knowledge-hero--world {
    background-color: rgba(25, 135, 84, 0.15);
    border-color: #2fb37a;
}

.wiki-knowledge-banner--world > i,
.wiki-knowledge-hero--world > i {
    color: #2fb37a;
}

.wiki-knowledge-banner--show,
.wiki-knowledge-hero--show {
    background-color: rgba(13, 110, 253, 0.15);
    border-color: #4d94ff;
}

.wiki-knowledge-banner--show > i,
.wiki-knowledge-hero--show > i {
    color: #4d94ff;
}

.wiki-knowledge-tile {
    border-left: 4px solid;
}

.wiki-knowledge-tile > .card-body > i {
    font-size: 2.25rem;
}

.wiki-knowledge-tile--world {
    border-left-color: #2fb37a;
}

.wiki-knowledge-tile--world > .card-body > i {
    color: #2fb37a;
}

.wiki-knowledge-tile--show {
    border-left-color: #4d94ff;
}

.wiki-knowledge-tile--show > .card-body > i {
    color: #4d94ff;
}

/* Charakter-Pfad (/wiki/welt/charakter) */
.character-path__answers {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.character-path__option {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.6rem 0.75rem;
    margin-bottom: 0.4rem;
    border: 1px solid var(--scum-border);
    border-radius: 6px;
    cursor: pointer;
}

.character-path__option:hover,
.character-path__option:has(input:checked) {
    border-color: #2fb37a;
    background-color: rgba(25, 135, 84, 0.12);
}

.character-path__option input {
    margin-top: 0.3rem;
    flex-shrink: 0;
}

.character-path__links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.character-path-teaser {
    color: inherit;
}

.character-path__key-fact {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 193, 7, 0.5);
    border-left: 5px solid #ffc107;
    background-color: rgba(255, 193, 7, 0.12);
}

.character-path__key-fact > i {
    font-size: 1.6rem;
    color: #ffc107;
    line-height: 1;
}

.character-path__key-fact-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffc107;
}

/* Eingeklappte Chronologie unter den Zeitstrahlen (wiki/timeline.html.twig) */
.wiki-chronology > summary {
    cursor: pointer;
}

/* Hilfetext, Bereichs-Beschreibung und Anzahl rund um die Zeitstrahlen: Bootstraps text-muted ist auf dem dunklen Hintergrund zu dunkel */
.wiki-timeline-wrapper .text-muted,
.wiki-timeline-section .text-muted {
    color: var(--scum-text-muted) !important;
}

/* ---------------------------------------------------------------------------
   Tagebuch (Lore-Item-Typ "diary"): Buch mit braunem Ledereinband, weißem, leicht
   fleckigem Papier und Handschrift. Seiten baut assets/lore_diary.js.
   Handschrift: Caveat (SIL Open Font License, assets/fonts/Caveat-OFL.txt), selbst gehostet.
   --------------------------------------------------------------------------- */
@font-face {
    font-family: 'DiaryHand';
    src: url("../fonts/caveat-400-wkGR6Zt.woff2") format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DiaryHand';
    src: url("../fonts/caveat-600-QLGPI2s.woff2") format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

.diary {
    max-width: 1000px;
}

.diary-heading small {
    color: var(--scum-text-muted);
}

.diary-book {
    --leather: #5b3920;
    position: relative;
    margin: 0 auto;
    max-width: 560px;
    padding: 16px;
    border-radius: 8px 16px 16px 8px;
    background-color: var(--leather);
    background-image:
        radial-gradient(ellipse at 25% 15%, rgba(255, 214, 170, .16), transparent 55%),
        radial-gradient(ellipse at 80% 95%, rgba(0, 0, 0, .35), transparent 60%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    box-shadow:
        0 14px 34px rgba(0, 0, 0, .55),
        inset 0 0 0 1px rgba(255, 220, 180, .12),
        inset 0 0 26px rgba(0, 0, 0, .45);
}

/* Ziernaht am Rand des Einbands */
.diary-book::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 2px dashed rgba(224, 186, 140, .45);
    border-radius: 6px 12px 12px 6px;
    pointer-events: none;
}

.diary-book--spread {
    max-width: none;
    border-radius: 12px;
}

.diary-book--spread::before {
    border-radius: 9px;
}

.diary-book.is-closed {
    max-width: 440px;
}

.diary-spread {
    position: relative;
    display: flex;
    justify-content: center;
}

.diary-book.is-measuring .diary-spread {
    display: flex !important;
    visibility: hidden;
}

/* Bundsteg zwischen linker und rechter Seite */
.diary-book--spread .diary-spread::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: rgba(60, 40, 20, .35);
}

.diary-page {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 0 0 100%;
    aspect-ratio: 5 / 7;
    padding: 1.6rem 1.5rem 1rem;
    color: #22201d;
    font-family: 'DiaryHand', 'Segoe Print', 'Bradley Hand', cursive;
    font-size: clamp(1.15rem, 4.6vw, 1.35rem);
    line-height: 1.35;
    border-radius: 2px;
    background-color: #fbfaf6;
    background-image:
        /* Kaffeerand, nur auf manchen Seiten (--ring-alpha 0 = keiner) */
        radial-gradient(circle at var(--ring-x, 70%) var(--ring-y, 30%),
            transparent 0 2.4em,
            rgba(150, 102, 48, var(--ring-alpha, 0)) 2.55em,
            rgba(150, 102, 48, calc(var(--ring-alpha, 0) * .35)) 2.85em,
            transparent 3.05em),
        radial-gradient(ellipse 30% 22% at var(--stain-1-x, 20%) var(--stain-1-y, 80%), rgba(160, 125, 70, var(--stain-alpha, .06)), transparent 70%),
        radial-gradient(ellipse 18% 26% at var(--stain-2-x, 80%) var(--stain-2-y, 20%), rgba(140, 115, 80, calc(var(--stain-alpha, .06) * .8)), transparent 70%),
        /* vergilbte Ränder */
        radial-gradient(ellipse at 50% 50%, transparent 62%, rgba(170, 140, 90, .16) 100%),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .28 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
    box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
}

.diary-book--spread .diary-page {
    flex-basis: 50%;
    font-size: 1.32rem;
}

.diary-page--left {
    box-shadow: inset -22px 0 24px -18px rgba(70, 50, 25, .35), 0 1px 3px rgba(0, 0, 0, .35);
}

.diary-page--right {
    box-shadow: inset 22px 0 24px -18px rgba(70, 50, 25, .35), 0 1px 3px rgba(0, 0, 0, .35);
}

.diary-page--blank .diary-page-number {
    visibility: hidden;
}

/* Feste Seitengröße: ohne min-height/overflow würde aspect-ratio bei Überlauf nachgeben */
.diary-page:not(.diary-source):not(.diary-page--tall) {
    min-height: 0;
    overflow: hidden;
}

.diary-page--tall {
    aspect-ratio: auto;
}

.diary-page-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.diary-page--tall .diary-page-body,
.diary-source .diary-page-body {
    overflow: visible;
}

/* Ohne JS: alles auf einer langen Seite */
.diary-source {
    aspect-ratio: auto;
}

.diary-page-number {
    flex: 0 0 auto;
    padding-top: .3rem;
    text-align: center;
    font-size: .85em;
    color: #6d6455;
}

.diary-page--left .diary-page-number {
    text-align: left;
}

.diary-page--right .diary-page-number {
    text-align: right;
}

.diary-page p,
.diary-page li {
    margin: 0 0 .45em;
}

.diary-page ul,
.diary-page ol {
    margin: 0 0 .45em;
    padding-left: 1.3em;
}

.diary-page .diary-cont {
    text-indent: 0;
}

/* Einträge: Datum statt Titel */
.diary-page h1,
.diary-page h2,
.diary-page h3,
.diary-page h4 {
    margin: .7em 0 .35em;
    font-family: inherit;
    font-size: 1.15em;
    font-weight: 600;
    line-height: 1.2;
    color: #2a2622;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .2em;
}

.diary-page-body > :first-child,
.diary-source > :first-child {
    margin-top: 0;
}

.diary-page .diary-author {
    font-size: .9em;
    color: #5d564b;
}

.diary-page a {
    color: #6b3410;
}

/* Fundbeschreibungen (<code>) stehen nicht im Buch geschrieben - schlicht abgesetzt */
.diary-page code {
    display: block;
    margin: 0 0 .6em;
    padding: .35em .6em;
    font-family: var(--bs-body-font-family);
    font-size: .62em;
    font-style: italic;
    line-height: 1.45;
    color: #5e5546;
    background: rgba(90, 70, 40, .07);
    border-left: 2px solid rgba(90, 70, 40, .3);
    border-radius: 2px;
}

.diary-page img {
    max-width: 100%;
    height: auto;
}

.diary-page blockquote {
    margin: 0 0 .45em;
    padding-left: .8em;
    border-left: 2px solid rgba(43, 33, 22, .3);
}

.diary-spread {
    perspective: 2600px;
}

/* Umblättern: eine Seite dreht sich um den Buchrücken (assets/lore_diary.js) */
.diary-flipper {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    transform-style: preserve-3d;
    pointer-events: none;
}

.diary-flipper--right {
    left: 50%;
    width: 50%;
    transform-origin: left center;
}

.diary-flipper--left {
    left: 0;
    width: 50%;
    transform-origin: right center;
}

.diary-flipper--full {
    left: 0;
    width: 100%;
    transform-origin: left center;
}

.diary-face {
    position: absolute;
    inset: 0;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.diary-face--back {
    transform: rotateY(180deg);
}

.diary-face > .diary-page {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .35);
}

/* Licht und Schatten auf der drehenden Seite, dunkler zum Rücken hin */
.diary-face-shade {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(40, 25, 10, .9), rgba(40, 25, 10, .25) 45%, rgba(40, 25, 10, .05));
}

.diary-flipper--left .diary-face:not(.diary-face--back) .diary-face-shade,
.diary-flipper--right .diary-face--back .diary-face-shade,
.diary-flipper--full .diary-face--back .diary-face-shade {
    background: linear-gradient(to left, rgba(40, 25, 10, .9), rgba(40, 25, 10, .25) 45%, rgba(40, 25, 10, .05));
}

/* Deckblatt: nur bei ganzen Tagebüchern (mit Titel), nur mit JS */
.diary-cover {
    display: none;
}

.diary-book.is-ready.is-closed .diary-cover {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    width: 100%;
    aspect-ratio: 5 / 7;
    padding: 2rem 1.5rem;
    border: 0;
    border-radius: 4px 10px 10px 4px;
    color: #f1e3cc;
    background: transparent;
    box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .25), inset 0 0 0 10px rgba(255, 220, 180, .05);
    cursor: pointer;
}

.diary-cover-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .2rem;
    width: 78%;
    padding: 1.2rem 1rem 1rem;
    color: #22201d;
    font-family: 'DiaryHand', 'Segoe Print', 'Bradley Hand', cursive;
    background: #f6f1e6;
    border-radius: 2px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .45), inset 0 0 18px rgba(160, 130, 80, .25);
    transform: rotate(-1.5deg);
}

.diary-cover-title {
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1.05;
}

.diary-cover-subtitle {
    font-size: 1.3rem;
}

.diary-cover-author {
    margin-top: .4rem;
    font-size: 1.4rem;
    color: #4a443b;
}

.diary-cover-hint {
    font-size: .85rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: rgba(241, 227, 204, .75);
}

.diary-cover:hover .diary-cover-hint,
.diary-cover:focus-visible .diary-cover-hint {
    color: #f1e3cc;
}

.diary-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem .75rem;
    margin-top: 1rem;
}

.diary-nav-status {
    min-width: 9em;
    text-align: center;
    color: var(--scum-text-muted);
}

.diary-nav-entries {
    width: auto;
    max-width: 14rem;
}

/* Werbeanzeige von TEC01 für Zuschauerdrohnen auf der Startseite (home/_drone_ad.html.twig) */
.drone-ad {
    position: relative;
    padding: 1.5rem;
    border-radius: 14px;
    border: 2px solid #e8b84a;
    background:
        radial-gradient(circle at 85% 0%, rgba(255, 214, 102, .25), transparent 55%),
        linear-gradient(135deg, #2a0a10 0%, #4a0d18 45%, #1b0a22 100%);
    color: #fff4e0;
    box-shadow: 0 0 24px rgba(232, 184, 74, .25);
}

.drone-ad__tag {
    position: absolute;
    top: .5rem;
    right: .75rem;
    font-size: .7rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: rgba(255, 244, 224, .6);
}

.drone-ad__header {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.25rem;
}

.drone-ad__logo {
    flex-shrink: 0;
    background: #fff4e0;
    border-radius: 10px;
    padding: .4rem;
}

.drone-ad__logo .medical-sheet__logo {
    width: 56px;
    display: block;
}

.drone-ad__kicker {
    text-transform: uppercase;
    letter-spacing: .15em;
    font-size: .75rem;
    color: #e8b84a;
}

.drone-ad__title {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    font-weight: 800;
    color: #fff;
}

.drone-ad__lead {
    color: rgba(255, 244, 224, .85);
}

.drone-offer {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    padding: 1rem;
    border-radius: 10px;
    border: 1px solid rgba(232, 184, 74, .45);
    background: rgba(0, 0, 0, .3);
    cursor: pointer;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}

.drone-offer:hover {
    transform: translateY(-2px);
    border-color: #e8b84a;
}

.btn-check:checked + .drone-offer {
    border-color: #ffd666;
    box-shadow: 0 0 0 3px rgba(255, 214, 102, .45);
    background: rgba(232, 184, 74, .15);
}

.btn-check:focus-visible + .drone-offer {
    outline: 2px solid #ffd666;
    outline-offset: 2px;
}

.drone-offer__icon {
    font-size: 2rem;
    color: #e8b84a;
}

.drone-offer__name {
    font-weight: 700;
    color: #fff;
}

.drone-offer__tagline {
    font-style: italic;
    color: #ffd666;
    font-size: .9rem;
}

.drone-offer__text {
    font-size: .85rem;
    color: rgba(255, 244, 224, .8);
    flex-grow: 1;
}

.drone-offer__price {
    margin-top: .5rem;
    font-weight: 800;
    font-size: 1.15rem;
    color: #ffd666;
}

.drone-offer__score {
    font-size: .8rem;
    color: rgba(255, 244, 224, .7);
}

.drone-ad__button {
    background: linear-gradient(180deg, #ffd666, #e8b84a);
    color: #2a0a10;
    font-weight: 700;
    border: none;
}

.drone-ad__button:hover {
    background: #ffd666;
    color: #2a0a10;
}

.drone-ad__fine {
    color: rgba(255, 244, 224, .6);
}

.drone-ad .form-control {
    background: rgba(0, 0, 0, .35);
    border-color: rgba(232, 184, 74, .45);
    color: #fff4e0;
}

@media (max-width: 575.98px) {
    .drone-ad {
        padding: 1rem;
    }

    .drone-ad__header {
        flex-direction: column;
        align-items: flex-start;
    }
}