/* 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;
    --tinte: #141414;
}

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-dunkel);
}

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

.hero {
    background: linear-gradient(135deg, var(--marke-zart), #ffffff);
    border: 1px solid #ffe0e0;
}

.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 #dee2e6;
    border-radius: .5rem;
    background: #fff;
    color: #212529;
    font-variant-numeric: tabular-nums;
    font-weight: 500;
}

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

.level-chip-draft {
    border-style: dashed;
    color: #adb5bd;
}

/* ---------- 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;
}

.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);
}

/* ==========================================================
   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: #fff;
    border: 1px solid #e9e6ea;
    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);
    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: #6c757d;
    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: #f4f2f4;
    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 #ced4da;
    color: #adb5bd;
}

/* 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: #8a8a8a;
}

/* 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(--tinte);
    border-color: var(--tinte);
    color: #fff;
    font-weight: 600;
}

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

/* Verweis auf das Zwillingsspiel. */
.kopfband-zwilling {
    margin-top: .6rem;
    font-size: .875rem;
    color: rgba(255, 255, 255, .82);
}

.kopfband-zwilling a {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, .5);
    text-underline-offset: .2em;
}

.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: #6c757d;
}

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

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

.treffer {
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .55rem .75rem;
    border: 1px solid #e9e6ea;
    border-radius: .6rem;
    background: #fff;
    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;
    aspect-ratio: 16 / 9;
    border-radius: .35rem;
    background: var(--marke-zart) center/cover no-repeat;
}

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

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

.treffer-zusatz {
    font-size: .85rem;
    color: #6c757d;
    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;
}