/* Die Bildkarte — Foto aus assets/cards/, Text als HTML darueber.
   Geladen von pages/guide.html und von den Werkzeugen unter tools/cards/,
   damit es die Gestaltung nur an einer Stelle gibt.

   Warum der Text nicht im Bild steckt: die Sublines muessen uebersetzbar
   bleiben. Gebrannt braeuchte es drei Bildsaetze (126 statt 42 Dateien) und
   einen sprachabhaengigen Bildpfad, den js/i18n.js gar nicht kennt — es gibt
   dort data-i18n, -html, -alt und -title, aber kein -src. Als HTML ist es
   normales i18n, bleibt bei jeder Groesse scharf und markierbar, und im Hero
   laesst man den Text weg, statt den Titel doppelt zu zeigen.

   Die Groessen stehen in cqw — ein Prozent der Kartenbreite. Damit skaliert
   der Text exakt so mit wie frueher der eingebrannte, egal ob die Karte
   300 px oder 1600 px breit ist. Die Werte sind die alten px-Werte geteilt
   durch 16, weil das Rendermass 1600 px war: Titel 128px -> 8cqw. */

.tq-card {
    position: relative;
    display: block;
    container-type: inline-size;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    background: var(--olive-dark);

    /* Eine Groesse fuer alle Karten. Frueher trug fast jede zweite eine
       eigene, aus der Zeit, als der Text ins Bild gebrannt und je Foto
       eingepasst wurde — nebeneinander im Raster liest sich das als Fehler.
       7.5cqw statt der alten 8, weil "Scramble Competitions", der laengste
       Titel, bei 8cqw in den breiteren Ersatzschriften (Helvetica, Roboto)
       umbricht: 120px von 1381px nutzbarer Breite lassen ihm Luft.
       Ausnahmen sind die Referenzfassungen — .tq-mini im Prinzip-Diagramm
       und .g-marke im Seitenkopf —, die eigene feste Groessen setzen. */
    --tq-t: 7.5cqw;    /* Titel */
    --tq-s: 2.875cqw;  /* Subline */
}

.tq-card > img {
    width: 100%;
    height: auto;
    display: block;
}

.tq-card-text {
    position: absolute;
    inset: 0;
    padding: 5.625cqw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    text-align: left;
    /* Der Text darf den Klick auf die Karte nicht abfangen. */
    pointer-events: none;
}

.tq-card-body {
    padding-left: 2.125cqw;
    border-left: 0.3125cqw solid var(--gold);
    /* Ohne die volle Breite ist der Block nur so breit wie der Titel, und
       das max-width an .tq-s bezoege sich dann auf die Titelbreite statt
       auf die Karte — die Subline braeche mitten im Satz um. */
    width: 100%;
}

.tq-t {
    display: block;
    font-size: var(--tq-t);
    font-weight: 800;
    line-height: 1.04;
    letter-spacing: -0.015em;
    color: var(--gold);
    /* Gold hat gegen hellen Sand weniger Reserve als Weiss: der erste
       Schatten traegt die Kante, der zweite legt den Grund dahinter ab. */
    text-shadow: 0 0.125cqw 0.5cqw rgba(0, 0, 0, 0.8),
                 0 0.25cqw 1.875cqw rgba(0, 0, 0, 0.65);
}

.tq-s {
    display: block;
    font-size: var(--tq-s);
    font-weight: 500;
    line-height: 1.36;
    letter-spacing: 0.005em;
    color: #E8EEDC;
    /* Nur eine Notbremse — die Umbrueche setzt das <br> im Markup. 80 %
       war zu eng: im 2er-Raster riss sie "…everyone in your / group." auf,
       obwohl der Umbruch erst danach stehen sollte. */
    max-width: 92%;
    margin-top: 1.25cqw;
    text-shadow: 0 0.125cqw 1.125cqw rgba(0, 0, 0, 0.6);
}

/* Der Hero traegt denselben Text wie die Karte. Die Seite wiederholt den
   Titel darunter als Ueberschrift — das ist gewollt, wie im Magazin. */
.tq-card.tq-hero { border-radius: var(--radius); }

/* Der Abstand unter der Karte, mit der eine Seite aufmacht. Sie steht vor
   dem ersten <section>, das seinen Abstand selbst mitbringt — also hier
   setzen. Im Guide gilt stattdessen .g-hero, dort sitzt der Kopf enger. */
.tq-card.hero-card { margin-bottom: 44px; }

/* Gespiegelte Fassung. Zurzeit ohne Verwendung: sie war fuer den
   Startseiten-Hero da, wo das Telefon links unten im Sand steht, also genau
   dort, wo der Textblock sonst sitzt. Der Text steht dort seit 2026-08-28
   wieder links wie auf jeder anderen Karte — eine Karte, die als einzige
   spiegelverkehrt laeuft, liest sich neben den uebrigen als Fehler. Die
   Regeln bleiben, weil der naechste Hero sie wieder brauchen kann; die
   Goldkante wandert mit, eine Kante links an rechtsbuendigem Text haengt
   in der Luft. */
.tq-card--rechts .tq-card-text {
    align-items: flex-end;
    text-align: right;
}

.tq-card--rechts .tq-card-body {
    padding-left: 0;
    padding-right: 2.125cqw;
    border-left: 0;
    border-right: 0.3125cqw solid var(--gold);
}

/* max-width an .tq-s schneidet sonst links ab, wo der Text gerade anfaengt. */
.tq-card--rechts .tq-s { margin-left: auto; }

/* Kleine Fassung fuer das Prinzip-Diagramm. Dort sind die Karten rund
   250px breit; in cqw waere der Titel dann 20px und die Subline 8px — zu
   klein. Deshalb hier feste Groessen statt mitskalierender. */
.tq-card.tq-mini { --tq-t: 21px; --tq-s: 12px; border-radius: 12px; }
.tq-card.tq-mini .tq-card-text {
    padding: 13px;
    /* Der gebrannte Scrim im Bild ist auf einen Textblock von rund 40 %
       Hoehe ausgelegt. In der kleinen Karte nimmt derselbe Text mehr als
       die Haelfte ein und der Titel landet sonst im hellen Sand. Dieser
       Verlauf legt genau dort nach — er gehoert zur Textebene, nicht ins
       Bild, damit das Bild fuer alle Groessen dasselbe bleibt. */
    background: linear-gradient(180deg,
        rgba(20, 22, 10, 0) 0%,
        rgba(20, 22, 10, 0.14) 30%,
        rgba(20, 22, 10, 0.44) 56%,
        rgba(20, 22, 10, 0.66) 80%,
        rgba(20, 22, 10, 0.72) 100%);
}

.tq-card.tq-mini .tq-card-body {
    padding-left: 11px;
    border-left-width: 3px;
}

.tq-card.tq-mini .tq-t {
    letter-spacing: -0.005em;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 2px 14px rgba(0, 0, 0, 0.65);
}

.tq-card.tq-mini .tq-s {
    max-width: 100%;
    margin-top: 4px;
    line-height: 1.28;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.75);
}

/* Nur die verlinkte Fassung hebt an. */
a.tq-card {
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

a.tq-card:hover {
    border-color: var(--olive);
    transform: translateY(-2px);
    box-shadow: 0 10px 22px rgba(0, 0, 0, 0.10);
}

.tq-grid {
    display: grid;
    /* Der Text skaliert jetzt mit der Karte, nicht mehr in fester Groesse —
       die Zweispaltigkeit war nur wegen des eingebrannten Textes noetig.
       Trotzdem 300px Untergrenze: darunter wird die Subline zu klein zum
       Lesen, ganz gleich wie sauber sie skaliert. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
}

/* ── Platzhalterkarte ──────────────────────────────────────────────────────
   Dieselbe Maske wie eine echte Bildkarte — gleiches Seitenverhaeltnis,
   gleicher Textblock, gleiche Goldkante —, nur steht statt des Fotos eine
   gestrichelte Flaeche. Damit steht der Text schon an seinem endgueltigen
   Platz, und ein spaeteres Foto ersetzt genau ein Element: die Flaeche
   weicht dem <img>, sonst aendert sich nichts.

   Warum kein leeres <img> mit Platzhalter-Datei: das waeren 20 zusaetzliche
   Bilddateien fuer etwas, das wieder verschwindet, und ueber file:// zeigt
   ein fehlendes Bild ein kaputtes Symbol statt einer ruhigen Flaeche. */
.tq-platz-flaeche {
    /* 16:10 wie die gerenderten Karten (1600x1000) — so springt beim
       Einsetzen des Fotos nichts. */
    aspect-ratio: 16 / 10;
    width: 100%;
    display: block;
    background:
        repeating-linear-gradient(135deg,
            rgba(255, 255, 255, 0.045) 0 14px,
            rgba(255, 255, 255, 0) 14px 28px),
        linear-gradient(160deg, #5A6134 0%, var(--olive-dark) 62%, #23260D 100%);
}

/* Die gestrichelte Kante liegt innen, nicht an der Karte: die Karte traegt
   ihren eigenen Rahmen und ihre Ecken, und eine gestrichelte Aussenkante
   saehe neben einer echten Karte im selben Raster wie ein Fehler aus. */
.tq-platz .tq-card-text::before {
    content: "";
    position: absolute;
    inset: 3.25cqw;
    border: 0.19cqw dashed rgba(240, 212, 122, 0.42);
    border-radius: 2.5cqw;
    pointer-events: none;
}

/* Die Notiz sitzt oben, der Titel bleibt unten an seinem Platz. */
.tq-platz-note {
    position: absolute;
    top: 6.5cqw;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 2.25cqw;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(240, 212, 122, 0.65);
}

/* Im Raster sind die Karten rund 460px breit; als Hero rund 900. Beide Male
   traegt cqw die Groessen, wie bei den Fotokarten auch. */
.tq-platz.tq-hero .tq-platz-note { top: 5cqw; }