/* Eigene Ergaenzungen zu Bootstrap. Alles, was die Seite von einer
   Standard-Bootstrap-Seite unterscheidet, steht hier - mehr nicht. */

/* Die Farben kommen vom Kanal: rotes Pfeilband auf Weiss, schwarze Geraete
   mit roten Knoepfen. Gemessen am Banner ist das Rot #FE0000 - reines Rot.
   Auf Weiss ergibt das aber nur 4,0:1 und reicht damit fuer Fliesstext nicht.
   Deshalb zwei Rottoene: `--marke` mit 4,8:1 fuer alles, was Text traegt oder
   anklickbar ist, und `--marke-grell` fuer grosse Flaechen, wo die Farbe des
   Kanals wirken soll und kein kleiner Text darauf steht. */
:root {
    --marke: #e60000;
    --marke-grell: #fe0000;
    --marke-dunkel: #b80000;
    --marke-zart: #fff1f1;
    --marke-rand: #ffe0e0;
    /* Rot als Schrift (Links, Hover): auf Weiss und auf --marke-zart lesbar. */
    --marke-text: var(--marke-dunkel);
    --tinte: #141414;
    /* Das Level, auf dem man steht: dunkel im Hellen, hell im Dunkeln. */
    --hier-grund: var(--tinte);
    --hier-schrift: #fff;
    /* kern (Bootstrap): "primary" ist das Rot des Kanals. */
    --kern-akzent: var(--marke);
}

/* Dunkel (kern: data-bs-theme am <html>, Umschalter im Kopf). Die Flaechen
   nehmen sonst Bootstraps Variablen und folgen von selbst; hier nur, was aus
   der Marke kommt. Das Rot als Schrift wird heller - #b80000 laege auf dem
   dunklen Grund unter 3:1. */
[data-bs-theme="dark"] {
    --marke-zart: #2c1517;
    --marke-rand: #4a1d20;
    --marke-text: #ff7b7b;
    --hier-grund: #f1f1f1;
    --hier-schrift: var(--tinte);
}

body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* ---------- Marke ---------- */

.bg-dark-brand {
    background-color: var(--tinte);
}

.btn-brand {
    background-color: var(--marke);
    border-color: var(--marke);
    color: #fff;
}

.btn-brand:hover,
.btn-brand:focus {
    background-color: var(--marke-dunkel);
    border-color: var(--marke-dunkel);
    color: #fff;
}

.bg-brand-soft {
    background-color: var(--marke-zart);
}

.nav-pills .nav-link.active {
    background-color: var(--marke);
}

a {
    color: var(--marke-text);
}

/* ---------- Startseite ---------- */

.hero {
    background: linear-gradient(135deg, var(--marke-zart), var(--bs-body-bg));
    border: 1px solid var(--marke-rand);
}

.card-hover {
    transition: transform .12s ease, box-shadow .12s ease;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 .4rem 1rem rgba(0, 0, 0, .08);
}

/* ---------- Levelraster ----------
   Bei Spielen mit hunderten Leveln ist eine Liste unbrauchbar; das Raster
   zeigt auf einen Blick, was da ist und wo die Luecken sind. */

.level-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(3.25rem, 1fr));
    gap: .5rem;
}

.level-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.75rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

.level-chip:hover {
    border-color: var(--marke);
    background: var(--marke-zart);
    color: var(--marke-text);
}

.level-chip-draft {
    border-style: dashed;
    color: var(--bs-tertiary-color);
}

/* ---------- Loesung ---------- */

details.solution > summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

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

details.solution[open] > summary .bi-unlock::before {
    /* bi-unlock-fill - aufgeklappt ist der Spoilerschutz aufgehoben */
    content: "\f5ff";
}

.solution-steps {
    padding-left: 1.25rem;
}

.solution-steps li {
    margin-bottom: .75rem;
    line-height: 1.6;
}

.solution-steps li:last-child {
    margin-bottom: 0;
}

/* ---------- Rechtstexte ---------- */

.legal-text {
    max-width: 44rem;
    line-height: 1.7;
}

.legal-text h2 {
    font-size: 1.15rem;
    margin-top: 1.75rem;
}

/* ---------- Loesungsvideos ---------- */

/* 16:9 steht fest, damit beim Tausch von Knopf gegen iframe nichts springt. */
.video-einbettung {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 100%;
    border-radius: .5rem;
    overflow: hidden;
    background: var(--tinte);
}

.video-start {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: .95rem;
    text-align: center;
    padding: 1rem;
    cursor: pointer;
}

.video-start:hover .video-start-zeichen,
.video-start:focus-visible .video-start-zeichen {
    background: var(--marke);
    transform: scale(1.06);
}

.video-start-zeichen {
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    background: rgba(255, 255, 255, .18);
    font-size: 1.75rem;
    line-height: 1;
    transition: background-color .15s ease, transform .15s ease;
}

@media (prefers-reduced-motion: reduce) {
    .video-start-zeichen { transition: none; }
}

.video-rahmen {
    width: 100%;
    height: 100%;
    border: 0;
}

.video-einbettung noscript a {
    position: absolute;
    inset: auto 0 .75rem 0;
    color: #fff;
}

/* Standbild hinter dem Startknopf. Es liegt auf unserem Server, nicht bei
   Google - deshalb steht es schon vor dem Klick da.

   Als <img> und nicht als Hintergrund: nur ein echtes Bild hat eine
   Beschriftung, kann verzoegert geladen werden und taucht in der Bildersuche
   auf. Es fuellt die 16:9-Flaeche, der Startknopf liegt darueber. */
.video-standbild {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Schalter ueber den Videos: sieht aus wie ein Verweis, ist aber ein Knopf,
   weil er nichts aufruft, sondern eine Wahl umlegt. */
.video-einwilligung-knopf {
    border: 0;
    padding: 0;
    background: none;
    color: var(--marke);
    text-decoration: underline;
    cursor: pointer;
}

/* Die Frage nach der Einwilligung: ein Balken am unteren Rand, der nichts
   verdeckt, was man lesen will, und nach der Antwort verschwindet. Beide
   Knoepfe gleich - ein kleineres Nein waere keine freie Wahl. */
.video-frage {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 1030;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .5rem 1rem;
    padding: 1rem 16px;
    background: var(--hier-grund);
    color: var(--hier-schrift);
    box-shadow: 0 -.25rem 1.5rem rgba(0, 0, 0, .35);
}

.video-frage a {
    color: inherit;
}

/* Bei der allerersten Frage tritt die Seite einen Schritt zurueck. Nur
   optisch: lesen, scrollen und klicken geht weiter, die Frage sperrt nichts. */
.video-frage-erstmals body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 1029;
    background: rgba(0, 0, 0, .45);
    pointer-events: none;
}

.video-frage[hidden] {
    display: none;
}

.video-frage-text {
    margin: 0;
    max-width: 40rem;
    font-size: .95rem;
}

.video-frage-knoepfe {
    display: flex;
    gap: .5rem;
}

.video-frage-knoepfe .btn {
    flex: 1 1 0;
    white-space: nowrap;
}

.video-einbettung .video-start {
    background: linear-gradient(180deg, rgba(20, 20, 20, .25), rgba(20, 20, 20, .68));
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

/* Kapitel im Video. Eine Zeile je Level, die Zeit vorn in fester Breite -
   so stehen die Levelnummern untereinander, und das Auge findet "Level 5"
   ohne zu suchen. */
.video-kapitel {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10.5rem, 1fr));
    gap: .35rem;
    padding: 0;
    margin: .6rem 0 0;
}

.kapitel-sprung {
    display: flex;
    align-items: baseline;
    gap: .5rem;
    width: 100%;
    padding: .4rem .6rem;
    border: 1px solid var(--bs-border-color);
    border-radius: .5rem;
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    font-size: .9rem;
    text-align: left;
}

.kapitel-sprung:hover,
.kapitel-sprung:focus-visible {
    border-color: var(--marke);
}

.kapitel-zeit {
    min-width: 2.6rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

/* Das Level, mit dem jemand hierher kam (#level-5). */
.video-kapitel li.kapitel-gewaehlt .kapitel-sprung {
    border-color: var(--marke);
    box-shadow: inset 0 0 0 1px var(--marke);
    font-weight: 600;
}

/* Sprungleiste im Levelraster (#block-3): die Ueberschrift nicht unter
   der klebenden Kopfzeile verstecken. */
section[id^="block-"] {
    scroll-margin-top: 5rem;
}

.video-beschreibung {
    margin-top: .75rem;
    color: var(--bs-secondary-color);
    font-size: .92rem;
    line-height: 1.55;
}

/* ==========================================================
   Kacheln mit Titelbild
   ==========================================================

   Die Standbilder der Loesungsvideos liegen ohnehin auf der Platte. Sie zu
   zeigen ist der Unterschied zwischen einer Liste aus Kaesten und einer
   Seite, auf der man erkennt, um welches Spiel es geht. */

.kachelraster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 1.25rem;
}

.kachel {
    display: flex;
    flex-direction: column;
    background: var(--bs-body-bg);
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .75rem;
    overflow: hidden;
    color: inherit;
    text-decoration: none;
    transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.kachel:hover,
.kachel:focus-visible {
    transform: translateY(-2px);
    border-color: var(--marke);
    box-shadow: 0 .5rem 1.5rem -.75rem rgba(20, 20, 20, .32);
    color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .kachel { transition: none; }
    .kachel:hover, .kachel:focus-visible { transform: none; }
}

/* Feste 16:9-Flaeche: die Kacheln stehen sonst auf verschiedenen Hoehen,
   sobald ein Bild fehlt. */
.kachel-bild {
    aspect-ratio: 16 / 9;
    background: var(--marke-zart);
    display: grid;
    place-items: center;
    color: var(--marke-text);
    font-size: 1.75rem;
    overflow: hidden;
}

.kachel-bild img {
    grid-area: 1 / 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.kachel-text {
    padding: .85rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.kachel-name {
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
}

.kachel-zahl {
    font-size: .8125rem;
    color: var(--bs-secondary-color);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================
   Kopfband
   ========================================================== */

.kopfband {
    position: relative;
    border-radius: .75rem;
    overflow: hidden;
    background: var(--tinte) center/cover no-repeat;
    color: #fff;
    margin-bottom: 1.75rem;
}

/* Der Verlauf haelt den Text lesbar, egal wie hell das Standbild ist. */
.kopfband::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, rgba(20, 20, 20, .95) 0%, rgba(20, 20, 20, .84) 42%, rgba(254, 0, 0, .62) 100%);
}

.kopfband-inhalt {
    position: relative;
    padding: 1.6rem 1.5rem;
}

.kopfband h1 {
    font-weight: 700;
    letter-spacing: -.015em;
    text-wrap: balance;
    margin: 0;
}

.kopfband-zeile {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem 1rem;
    margin-top: .5rem;
    font-size: .875rem;
    color: rgba(255, 255, 255, .82);
}

.kopfband-zeile .trenner { opacity: .45; }

/* ==========================================================
   Levelraster
   ========================================================== */

.level-grid {
    grid-template-columns: repeat(auto-fill, minmax(3.5rem, 1fr));
    gap: .4rem;
}

.level-chip {
    min-height: 2.6rem;
    border: 1px solid transparent;
    background: var(--bs-tertiary-bg);
    border-radius: .5rem;
    font-size: .9375rem;
    transition: background-color .12s ease, color .12s ease;
}

.level-chip:hover,
.level-chip:focus-visible {
    background: var(--marke);
    border-color: var(--marke);
    color: #fff;
}

.level-chip-draft {
    background: transparent;
    border: 1px dashed var(--bs-border-color);
    color: var(--bs-tertiary-color);
}

/* Datumskacheln tragen "01.08." und brauchen mehr Platz als eine Zahl. */
.level-grid-datum {
    grid-template-columns: repeat(auto-fill, minmax(4.5rem, 1fr));
}

.block-titel {
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
}

/* Das Kanalzeichen in der Kopfzeile: rundes Weiss auf Schwarz, wie es auch
   bei YouTube steht. */
.marke-zeichen {
    border-radius: 50%;
    background: #fff;
    object-fit: cover;
}

/* Das Kanalband auf der Startseite. Es traegt die Marke, und sein Rot ist
   das des Kanals - deshalb steht hier kein Text darauf. */
.kanalband {
    display: block;
    width: 100%;
    height: auto;
    border-radius: .75rem;
    margin-bottom: 1.75rem;
}

/* Die Beschriftung auf dem Standbild braucht Halt: die Bilder des Kanals
   sind bunt und tragen selbst schon grosse Schrift. Ein Verlauf allein
   reicht dafuer nicht, deshalb liegt der Text in einer eigenen Flaeche. */
.video-start > span:last-child {
    background: rgba(20, 20, 20, .72);
    padding: .35rem .85rem;
    border-radius: 2rem;
    backdrop-filter: blur(2px);
}

.video-dauer {
    color: rgba(255, 255, 255, .72);
    margin-left: .35rem;
    font-variant-numeric: tabular-nums;
}

/* Das Level, auf dem man gerade steht. */
.level-chip-hier {
    background: var(--hier-grund);
    border-color: var(--hier-grund);
    color: var(--hier-schrift);
    font-weight: 600;
}

.level-chip-hier:hover {
    background: var(--hier-grund);
    border-color: var(--hier-grund);
}

/* Knopf zum Play Store. */
.kopfband-store {
    margin-top: .85rem;
}

/* ==========================================================
   Fahnen zu den anderen Sprachen (partials/fahnen.php)
   ========================================================== */

.fahnen {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    flex-shrink: 0;
}

.fahne {
    display: inline-flex;
    border-radius: 3px;
    line-height: 1;
    opacity: .55;
    transition: opacity .16s ease, transform .16s ease;
}

.fahne img {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 3px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .18);
}

.fahne.aktiv {
    opacity: 1;
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

a.fahne:hover,
a.fahne:focus-visible {
    opacity: 1;
    transform: translateY(-1px);
}

/* Ohne Fahnenbild: das Kuerzel. */
.fahne-kuerzel {
    font-size: .7rem;
    font-weight: 700;
    padding: .15rem .3rem;
    border: 1px solid currentColor;
    border-radius: 3px;
}

/* Im Kopfband neben dem Titel; am Handy rutschen sie darunter. */
.kopfband-titel {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5rem 1rem;
}

.kopfband .fahne { opacity: .7; }
.kopfband .fahne.aktiv,
.kopfband a.fahne:hover,
.kopfband a.fahne:focus-visible { opacity: 1; }

/* Auf der Kachel unten rechts, neben dem Link der Kachel (nicht darin) -
   und mit ihr angehoben. */
.kachel-huelle {
    position: relative;
    display: flex;
}

.kachel-huelle > .kachel { flex: 1; }

.kachel-fahnen {
    position: absolute;
    right: .85rem;
    bottom: .95rem;
    transition: transform .16s ease;
}

.kachel-huelle:has(> .kachel:hover) .kachel-fahnen,
.kachel-huelle:has(> .kachel:focus-visible) .kachel-fahnen {
    transform: translateY(-2px);
}

.kachel-fahnen .fahne.aktiv { outline-width: 1.5px; }

@media (prefers-reduced-motion: reduce) {
    .fahne, .kachel-fahnen { transition: none; }
    .kachel-huelle:has(> .kachel:hover) .kachel-fahnen { transform: none; }
}

.zwilling-hinweis {
    margin-top: 1.25rem;
    padding: .6rem .9rem;
    background: var(--marke-zart);
    border-radius: .5rem;
    font-size: .9375rem;
}

/* ---------- Kurzlink ----------
 *
 * Er steht am Rand des Inhalts und soll ihn nicht ueberstrahlen: nur so
 * breit wie die Adresse, die darin steht, und in der Farbe der Nebensachen.
 */
.kurzlink {
    margin-top: 2rem;
    max-width: 26rem;
}

.kurzlink-titel {
    display: block;
    margin-bottom: .25rem;
    font-size: .85rem;
    color: var(--bs-secondary-color);
}

/* ---------- Trefferliste ---------- */

.trefferliste {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.treffer {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .55rem .75rem;
    border: 1px solid var(--bs-border-color-translucent);
    border-radius: .6rem;
    background: var(--bs-body-bg);
    color: inherit;
    text-decoration: none;
    transition: border-color .12s ease, background-color .12s ease;
}

.treffer:hover,
.treffer:focus-visible {
    border-color: var(--marke);
    background: var(--marke-zart);
    color: inherit;
}

/* Feste Breite, damit die Textspalten aller Treffer untereinander stehen. */
.treffer-bild {
    flex: 0 0 auto;
    width: 5.5rem;
    height: auto;
    aspect-ratio: 16 / 9;
    border-radius: .35rem;
    object-fit: cover;
    background: var(--marke-zart);
}

.treffer-text {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

.treffer-titel { font-weight: 600; }

.treffer-zusatz {
    font-size: .85rem;
    color: var(--bs-secondary-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Symbole
 *
 * Sie waren einmal Buchstaben einer Symbolschrift und sollen sich weiter so
 * verhalten: so gross wie der Text, in seiner Farbe, auf seiner Grundlinie.
 * Die Verschiebung nach unten ist das, was die Schriftart selbst mitbrachte.
 */
.bi {
    vertical-align: -.125em;
    flex: none;
}

/* ---------- Von Nutzern ----------
 *
 * Tipps stehen abgesetzt vom Loesungstext der Redaktion: ein Zitat mit
 * Namen, kein Teil der Loesung.
 */
.nutzer-tipp {
    margin: 0 0 .75rem;
    padding: .6rem .9rem;
    border-left: 3px solid var(--marke);
    background: var(--bs-tertiary-bg);
    border-radius: 0 .5rem .5rem 0;
}

.vorschlag-hinweis {
    margin-top: 1rem;
    color: var(--bs-secondary-color);
}