/*
 * Grundgerüst aller öffentlichen Seiten. Farben, Rundungen und Schrift
 * kommen ausschließlich aus den Variablen unten – ein Skin überschreibt
 * nur diese Variablen und ergänzt bei Bedarf eigene Details.
 */
:root {
    --page-bg: #f4f4f2;
    --surface: #fff;
    --text: #20201e;
    --muted: #666;
    --accent: #222;
    --accent-text: #fff;
    --border: #bbb;
    --success: #e8f5e9;
    --danger: #f8d7da;
    --radius: 14px;
    --font: Arial, sans-serif;
    /* Zweitfarbe für Akzente; Skins dürfen sie überschreiben. */
    --accent-alt: var(--accent);
    /* Kopf- und Fußzeile: eigene Flächen, damit dunkle Balken möglich sind. */
    --header-bg: var(--accent);
    --header-text: var(--accent-text);
    --footer-bg: var(--accent);
    --footer-text: var(--accent-text);
    --shell: 1180px;

    /* Klartext: die Farbe fuer alles, was auf dieser Seite NICHT Satire
       ist - Rechtstexte, Kontakt, der Hinweis oben, die Werkstatt.
       Behoerdenblau, und zwar mit Absicht: die Seite ist sonst rot und
       schwarz, das Blau faellt dadurch sofort aus dem Ton.
       Dunkle Skins muessen den Wert aufhellen, sonst ist er auf der
       dunklen Flaeche nicht mehr lesbar. */
    --klartext: #004b76;
    --klartext-flaeche: rgba(0, 75, 118, .07);
}

* { box-sizing: border-box; }

/* Fußzeile immer am Seitenende, auch bei kurzen Seiten. */
html { min-height: 100%; }
body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--page-bg);
    color: var(--text);
    font: 17px/1.55 var(--font);
}
a { color: inherit; }

/* ----------------------------------------------------------------
   Kopfzeile mit Bildmarke
   ---------------------------------------------------------------- */
.site-header { background: var(--header-bg); color: var(--header-text); }
.site-header a { color: inherit; }
.site-header-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.brand { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.brand-mark { width: 62px; height: 62px; flex: 0 0 auto; }
.brand-lines {
    display: grid;
    grid-template-columns: auto;
    border-left: 2px solid currentColor;
    padding-left: 16px;
    line-height: 1.05;
}
.brand-name { font-size: 1.32rem; font-weight: 700; letter-spacing: .01em; }
.brand-accent { font-size: 1.32rem; font-weight: 700; color: var(--accent-alt); }
.brand-claim { margin-top: 5px; font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.site-session { display: flex; align-items: center; gap: 10px; font-size: .9rem; }
.site-user { opacity: .8; }

/* ----------------------------------------------------------------
   Inhalt
   ---------------------------------------------------------------- */
.wrap { flex: 1 0 auto; width: 100%; max-width: 720px; margin: 48px auto; padding: 0 20px; }
.listing { max-width: var(--shell); }
.card { background: var(--surface); padding: 36px; border-radius: var(--radius); box-shadow: 0 8px 28px #0001; }
.test-card { display: block; margin: 15px 0; color: inherit; text-decoration: none; transition: transform .16s, box-shadow .16s; }
.test-card:hover { transform: translateY(-2px); box-shadow: 0 12px 32px #0002; }
h1 { margin: 0 0 16px; line-height: 1.15; }
p { margin: 0 0 16px; }
.muted, .hint { color: var(--muted); }
.option { display: block; border: 1px solid var(--border); border-radius: calc(var(--radius) - 6px); padding: 14px; margin: 10px 0; cursor: pointer; }
.option:hover, .option:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 7%, var(--surface)); }
.button, .link { display: inline-block; margin-top: 18px; border: 0; border-radius: calc(var(--radius) - 7px); background: var(--accent); color: var(--accent-text); padding: 12px 18px; font: inherit; text-decoration: none; cursor: pointer; }
.error, .feedback { padding: 14px; border-radius: calc(var(--radius) - 7px); margin: 16px 0; }
.error { background: var(--danger); }
.feedback { background: var(--success); }
.result { border-left: 5px solid var(--accent); padding-left: 18px; }

/*
 * Knopfreihe unter Frage und Ergebnis: zurück zur Übersicht, Test neu
 * beginnen. Die zweite Stufe ist zurückhaltend, damit "Weiter" bzw.
 * "Zurück zum Start" der sichtbare Weg bleibt.
 */
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.actions .button { margin-top: 0; }
.button.secondary { background: transparent; color: var(--text); border: 2px solid var(--border); padding: 10px 16px; }
.button.secondary:hover { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
textarea { width: 100%; padding: 12px; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) - 7px); font: inherit; }
label { display: block; font-weight: bold; margin: 14px 0 6px; }
input[type="text"], input[type="password"], input[type="email"] { width: 100%; padding: 12px; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: calc(var(--radius) - 7px); font: inherit; }
.progress { height: 7px; margin: 18px 0 5px; overflow: hidden; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--surface)); }
.progress span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width .2s ease; }
.progress-label { color: var(--muted); font-size: .82rem; text-align: right; }

/* ----------------------------------------------------------------
   Fußzeile: Leitmotive, Stempel, Skin-Auswahl
   ---------------------------------------------------------------- */
.site-footer { flex: 0 0 auto; margin-top: 40px; background: var(--footer-bg); color: var(--footer-text); }
.site-footer a { color: inherit; }
.site-footer-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 22px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}
.motives { display: flex; flex-wrap: wrap; gap: 10px 26px; margin: 0; padding: 0; list-style: none; }
.motive {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .72rem;
    line-height: 1.25;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.motive + .motive { border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); padding-left: 26px; }
.motive-icon { flex: 0 0 auto; color: var(--accent-alt); }
.motive strong { font-weight: 700; }
.stamp {
    margin: 0;
    padding: 8px 12px;
    background: var(--accent-alt);
    color: #fff;
    font-size: .7rem;
    line-height: 1.3;
    letter-spacing: .04em;
    text-transform: uppercase;
    transform: rotate(-1.5deg);
}
.stamp strong { font-size: .84rem; }
.site-footer-bar {
    border-top: 1px solid color-mix(in srgb, currentColor 22%, transparent);
}
.site-footer-bar > * { max-width: var(--shell); }
.site-footer-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    max-width: var(--shell);
    margin: 0 auto;
    padding: 12px 20px 18px;
}
.site-footer-note { font-size: .74rem; opacity: .7; }
.theme-picker { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: .8rem; opacity: .95; }
.theme-choice {
    border: 1px solid color-mix(in srgb, currentColor 40%, transparent);
    border-radius: 999px;
    padding: 4px 11px;
    text-decoration: none;
}
.theme-choice.is-active, .theme-choice:hover { background: var(--accent-alt); border-color: var(--accent-alt); color: #fff; }

@media (max-width: 720px) {
    .wrap { margin: 28px auto; }
    .card { padding: 24px; }
    h1 { font-size: 29px; }
    .site-header-inner { flex-wrap: wrap; }
    .brand-mark { width: 50px; height: 50px; }
    .brand-name, .brand-accent { font-size: 1.1rem; }
    .motive + .motive { border-left: 0; padding-left: 0; }
    .motives { gap: 12px 20px; }
}

/* ==================================================================
   "Aus der Werkstatt" – der Abschnitt unter der Testliste

   Er soll zeigen, was hinter den Tests steckt, ohne die Testliste zu
   überschreien: gleicher Kartenstil, ruhige Abstände, ein Trennstrich
   darüber statt großer Auftritt.
   ================================================================== */

.pitch {
    margin-top: 64px;
    padding-top: 34px;
    border-top: 1px solid var(--border);
}
.pitch h2 { margin: 0 0 10px; }
.pitch-lead { margin: 0 0 26px; max-width: 132ch; color: var(--muted); font-size:13px; }

.pitch-shots {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    align-items: start;
    gap: 20px;
    margin-bottom: 40px;
}

.shot { margin: 0; }

.shot-button {
    display: block;
    position: relative;
    width: 100%;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: zoom-in;
    overflow: hidden;
    line-height: 0;
}
/* Einheitliches Seitenverhältnis: Die Aufnahmen sind unterschiedlich
   hoch, nebeneinander sähen die Bildunterschriften sonst verrutscht aus.
   Beschnitten wird nur die Vorschau – in der Lupe ist alles zu sehen. */
.shot-button img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: top left;
}
.shot-button:hover,
.shot-button:focus-visible { border-color: var(--accent); }

/* Der Hinweis liegt auf dem Bild und kommt erst beim Darüberfahren. */
.shot-zoom {
    position: absolute;
    right: 8px;
    bottom: 8px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .72);
    color: #fff;
    font-size: .72rem;
    line-height: 1.6;
    opacity: 0;
    transition: opacity .15s;
}
.shot-button:hover .shot-zoom,
.shot-button:focus-visible .shot-zoom { opacity: 1; }

.shot figcaption { margin-top: 10px; font-size: .86rem; line-height: 1.5; }
.shot figcaption strong { display: block; }
.shot figcaption span { color: var(--muted); }

.pitch-text { max-width: 138ch;     background: rgba(250, 250, 0, .1); padding:10px;}
.pitch-text h3 { margin: 24px 0 6px; font-size: 1rem; }
.pitch-text p { margin: 0; }

/* ------------------------------------------------------------------
   Die Lupe
   ------------------------------------------------------------------ */

body.has-lightbox { overflow: hidden; }

/* Zuerst: Solange die Lupe zu ist, darf sie nicht da sein.
 *
 * Das hidden-Attribut allein reicht nicht - es setzt display:none nur
 * über das Standard-Stylesheet des Browsers, und jede eigene Regel mit
 * display schlägt das. Ohne diese Zeile liegt die durchsichtige Lupe
 * dauerhaft über der Seite und schluckt jeden Klick. */
.lightbox[hidden] { display: none; }

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    background: rgba(12, 10, 9, 0);
    transition: background .2s ease;
    cursor: zoom-out;
}
.lightbox.is-open { background: rgba(12, 10, 9, .88); }

.lightbox-figure {
    margin: 0;
    max-width: 1200px;
    width: 100%;
    text-align: center;
}
.lightbox img {
    max-width: 100%;
    max-height: 78vh;
    width: auto;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 18px 60px rgba(0, 0, 0, .5);
    transform-origin: center center;
    transition: transform .22s cubic-bezier(.2, .7, .3, 1), opacity .22s;
    opacity: 0;
}
.lightbox.is-open img { opacity: 1; }

.lightbox figcaption {
    margin-top: 14px;
    color: #e9e3d6;
    font-size: .88rem;
    opacity: 0;
    transition: opacity .2s .05s;
}
.lightbox.is-open figcaption { opacity: 1; }

.lightbox-close {
    position: absolute;
    top: 14px;
    right: 18px;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    font-size: 1.6rem;
    line-height: 1;
    cursor: pointer;
}
.lightbox-close:hover { background: rgba(255, 255, 255, .24); }

/* Wer Bewegung im Betriebssystem abbestellt hat, bekommt keine. */
@media (prefers-reduced-motion: reduce) {
    .lightbox, .lightbox img, .lightbox figcaption, .shot-zoom { transition: none; }
}

@media (max-width: 620px) {
    .pitch { margin-top: 48px; }
    .lightbox { padding: 12px; }
    .lightbox img { max-height: 70vh; }
}

/* ------------------------------------------------------------------
   Ausklappbarer Teil des Werkstatt-Abschnitts

   Als <details>/<summary> gebaut, also ohne eigenes JavaScript: Der
   Browser kann das von Haus aus, es lässt sich mit der Tastatur
   bedienen, und es kann nichts unsichtbar über der Seite liegen
   bleiben. Die Bewegung beim Öffnen ist eine Animation statt eines
   Übergangs - bei <details> springt der Inhalt von display:none auf
   sichtbar, und daran greift kein transition.
   ------------------------------------------------------------------ */

.pitch-more { margin-top: 4px; }

.pitch-more > summary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px 9px 13px;
    border: 2px solid var(--border);
    border-radius: calc(var(--radius) - 7px);
    cursor: pointer;
    font-weight: 700;
    font-size: .9rem;
    list-style: none;
    user-select: none;
}
/* Das Standard-Dreieck des Browsers weg – wir zeichnen ein eigenes. */
.pitch-more > summary::-webkit-details-marker { display: none; }
.pitch-more > summary::marker { content: ""; }

.pitch-more > summary:hover,
.pitch-more > summary:focus-visible {
    background: var(--accent);
    color: var(--accent-text);
    border-color: var(--accent);
}

.pitch-more-arrow {
    width: 0;
    height: 0;
    border-left: 7px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform .18s ease;
}
.pitch-more[open] > summary .pitch-more-arrow { transform: rotate(90deg); }

/* Zugeklappt lädt der Text des Knopfes zum Öffnen ein, aufgeklappt zum
   Schließen. */
.pitch-more[open] > summary .pitch-more-label::after { content: " – wieder zuklappen"; font-weight: 400; }

.pitch-more-body {
    padding-top: 26px;
    animation: pitchUnfold .28s ease both;
}

@keyframes pitchUnfold {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .pitch-more-body { animation: none; }
    .pitch-more-arrow { transition: none; }
}

/* ==================================================================
   Portalbausteine

   Anmutung eines Behördenportals: viel Weißraum, klare Hierarchie,
   Flächen statt Schatten, Haarlinien statt Kästen im Kasten. Alles aus
   den Farbvariablen oben – jeder Skin behält damit seine Handschrift,
   die Anarchie bleibt ein Plakat, Modern wird ein Amt.
   ================================================================== */

/* ---------------------------------------------------------------- */
/*  Begrüßung                                                        */
/* ---------------------------------------------------------------- */

.portal-intro { margin: 0 0 34px; }
.portal-intro h1 {
    font-size: clamp(1.6rem, 3.4vw, 2.25rem);
    line-height: 1.18;
    margin: 0 0 12px;
    max-width: 200ch;
}
.portal-intro .lead { font-size: 1.05rem; color: var(--muted); max-width: 600ch; margin: 0; }

/* ---------------------------------------------------------------- */
/*  Abschnitte: Haarlinie und Luft statt Rahmen                      */
/* ---------------------------------------------------------------- */

.section { margin-top: 56px; }
.section > h2 {
    margin: 0 0 6px;
    font-size: 1.3rem;
    padding-bottom: 10px;
    border-bottom: 3px solid var(--accent);
    display: inline-block;
}
.section-lead { color: var(--muted); margin: 14px 0 24px; max-width: 70ch; }

/* ---------------------------------------------------------------- */
/*  Kacheln                                                           */
/* ---------------------------------------------------------------- */

.tiles {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.tile {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 22px 22px 52px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 10px);
    color: inherit;
    text-decoration: none;
    transition: border-color .14s, background .14s;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .3);
}
.tile:hover,
.tile:focus-visible {
    background: color-mix(in srgb, var(--accent) 1%, var(--surface));
    box-shadow: 0 0 20px rgba(0, 0, 0, .1),0 3px 5px rgba(0, 0, 0, .3);
    border-bottom: 3px solid var(--accent);
    margin-bottom: -2px;
}
.tile:focus-visible { outline: 3px solid var(--accent-alt); outline-offset: 2px; }

.tile-kicker {
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}
.tile-title { font-size: 1.05rem; font-weight: 700; line-height: 1.3; }
.tile-text { font-size: .9rem; color: var(--muted); margin: 0; }

/* Der Pfeil sitzt unten rechts und rückt beim Überfahren nach. */
.tile-go {
    position: absolute;
    left: 22px;
    bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .86rem;
    font-weight: 700;
    color: var(--accent-alt);
}
.tile-go::after {
    content: "";
    width: 0;
    height: 0;
    border-left: 6px solid currentColor;
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .14s;
}
.tile:hover .tile-go::after { transform: translateX(4px); }

/* ---------------------------------------------------------------- */
/*  Hinweisbox                                                        */
/* ---------------------------------------------------------------- */

.notice {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 5px solid var(--accent-alt);
    border-radius: calc(var(--radius) - 8px);
    padding: 20px 22px;
}
.notice > :last-child { margin-bottom: 0; }
.notice h2 { margin: 0 0 8px; font-size: 1.05rem; }

/* ---------------------------------------------------------------- */
/*  Linkliste mit Pfeil                                               */
/* ---------------------------------------------------------------- */

.linklist { list-style: none; margin: 0; padding: 0; }
.linklist li { border-bottom: 1px solid var(--border); }
.linklist a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 2px;
    text-decoration: none;
    font-weight: 700;
}
.linklist a::before {
    content: "";
    flex: 0 0 auto;
    width: 0; height: 0;
    border-left: 6px solid var(--accent-alt);
    border-top: 4px solid transparent;
    border-bottom: 4px solid transparent;
    transition: transform .14s;
}
.linklist a:hover { text-decoration: underline; }
.linklist a:hover::before { transform: translateX(4px); }

/* ---------------------------------------------------------------- */
/*  Teaser: Bild und Text nebeneinander                               */
/* ---------------------------------------------------------------- */

.teaser {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 26px;
    align-items: start;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 8px);
    overflow: hidden;
}
.teaser-media { margin: 0; }
.teaser-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.teaser-body { padding: 24px 26px 26px 0; }
.teaser-body > :last-child { margin-bottom: 0; }
.teaser-body h2 { margin: 0 0 10px; }

@media (max-width: 700px) {
    .teaser { grid-template-columns: 1fr; gap: 0; }
    .teaser-body { padding: 22px; }
    .teaser-media img { max-height: 260px; }
}

/* ==================================================================
   Startseite: zweispaltig, solange Platz ist

   Links die Kacheln, rechts ein schmaler Kasten mit dem Kurztext zur
   Werkstatt. Wird es eng, rutscht der Kasten unter die Kacheln – erst
   ab 900px lohnt sich die Spalte überhaupt.
   ================================================================== */

.split {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
    align-items: start;
}

@media (min-width: 900px) {
    /* Rund ein Viertel für die Randspalte, der Rest für die Kacheln. */
    .split { grid-template-columns: minmax(0, 3fr) minmax(230px, 1fr); gap: 26px; }
}

.side-teaser {
    background: var(--surface);
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent-alt);
    border-radius: calc(var(--radius) - 8px);
    padding: 20px;
}
.side-teaser h2 { margin: 0 0 10px; font-size: 1.05rem; line-height: 1.3; }
.side-teaser p { font-size: .86rem; line-height: 1.5; color: var(--muted); }
.side-teaser p.punch { color: var(--text); font-weight: 700; }
.side-teaser .button { margin-top: 4px; width: 100%; text-align: center; }

/* ------------------------------------------------------------------
   Ausklappbarer Bereich

   Die Höhe wird über grid-template-rows von 0fr auf 1fr gefahren - das
   lässt sich weich überblenden, ohne dass irgendwo eine feste Höhe
   ausgerechnet werden müsste. Zugeklappt nimmt visibility den Inhalt
   zusätzlich aus der Tabulatorreihenfolge, sonst könnte man in einen
   unsichtbaren Bereich hineinspringen.
   ------------------------------------------------------------------ */

/* Die Höhe wird beim Auf- und Zuklappen gemessen und gesetzt (siehe
   assets/js/screens.js) und hier überblendet. Der kürzere Weg über
   grid-template-rows (0fr auf 1fr) käme ohne Messen aus, ließ sich im
   Prüfbrowser aber nicht nachweisen - der lässt Übergänge nicht
   weiterlaufen. Die gemessene Höhe konnte ich in beiden Zuständen
   belegen, deshalb steht sie hier.

   Ohne JavaScript bekommt der Bereich die Klasse is-collapsible nie und
   steht damit offen da - lieber alles zeigen als nichts. */
.reveal.is-collapsible {
    overflow: hidden;
    height: 0;
    transition: height .34s cubic-bezier(.3, .8, .3, 1);
}
.reveal.is-collapsible:not(.is-open) .reveal-clip { visibility: hidden; }

.reveal-inner {
    padding-top: 30px;
    margin-top: 34px;
    border-top: 1px solid var(--border);
}

.reveal-toggle { display: inline-flex; align-items: center; gap: 9px; }
.reveal-toggle::before {
    content: "";
    width: 0; height: 0;
    border-left: 7px solid currentColor;
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
    transition: transform .2s;
}
.reveal-toggle[aria-expanded="true"]::before { transform: rotate(90deg); }

/* ==================================================================
   Zwei Abschnitte nebeneinander (Psychologie und das Spiel)
   ================================================================== */

.duo {
    margin-top: 56px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 30px;
    align-items: start;
}

@media (min-width: 1000px) {
    .duo { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
}

.duo > .section { margin-top: 0; }

/* In der halben Spalte hat das Bild neben dem Text keinen Platz mehr. */
.duo .teaser { grid-template-columns: minmax(0, 1fr); gap: 0; }
.duo .teaser-body { padding: 22px; }
.duo .teaser-media img { max-height: 300px; }

@media (prefers-reduced-motion: reduce) {
    .reveal.is-collapsible { transition: none; }
    .reveal-toggle::before { transition: none; }
}

/* ==================================================================
   Die vier Kästen über den Tests

   Zwei Spalten ab 760px, vier ab 1150px - bei vier Spalten auf einem
   1180er Raster bleiben rund 270px je Kasten, und darunter wird der
   Text zur Wortspalte.
   ================================================================== */

.hero-boxes {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
    margin: 0 0 40px;
}

@media (min-width: 760px)  { .hero-boxes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .hero-boxes { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.hero-box {
    display: flex;
    flex-direction: column;
    gap: 9px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: calc(var(--radius) - 10px);
    box-shadow: 0 3px 3px rgba(0, 0, 0, .16);
}
.hero-box h2 { margin: 0; font-size: 1.06rem; line-height: 1.3; }
.hero-box p { margin: 0; font-size: .88rem; line-height: 1.5; color: var(--muted); }

/* Der letzte Satz ist die Pointe - der steht im Textton, nicht im grauen. */
.hero-box-note {
    margin-top: auto !important;
    padding-top: 9px;
    border-top: 1px solid var(--border);
    color: var(--text) !important;
    font-weight: 600;
}

/* Zeichen statt Foto: nimmt die Schriftfarbe an, der Balken die Akzentfarbe. */
.hero-box-mark { color: var(--text); }
.hero-box-mark svg { width: 76px; height: 76px; display: block; }

/* Das Bild sitzt bündig oben im Kasten und ist zugleich der Knopf für
   die Lupe - deshalb kein eigener Rahmen. */
.hero-box-media {
    /* width:auto statt der geerbten 100%: mit width:100% bleibt der
       Knopf so breit wie der Textbereich und die beiden negativen
       Seitenraender schieben ihn nur nach links - rechts fehlten
       dadurch 40px und das Bild sass sichtbar aus der Mitte. Mit auto
       waechst er in beide Richtungen gleich. */
    width: auto;
    margin: -20px -20px 4px;
    border: 0;
    border-radius: calc(var(--radius) - 12px) calc(var(--radius) - 12px) 0 0;
}
.hero-box-media img {
    display: block;
    width: 100%;
    /* Ohne height:auto gewinnt das height-Attribut aus dem Markup und
       das Seitenverhältnis bleibt wirkungslos - der Kasten wurde damit
       mehr als doppelt so hoch wie gewollt. */
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center 32%;
}
.hero-box .shot-button:hover,
.hero-box .shot-button:focus-visible { border: 0; }
.smaler {font-size:14px;}

/* ==================================================================
   Kopfzeilen-Menüs: Suche und Speisekarte

   Beide als <details>/<summary> gebaut, also ohne eigenes JavaScript.
   Das Feld klappt unter der Kopfzeile auf und liegt über dem Inhalt;
   zugeklappt ist es display:none und kann nichts abfangen.
   ================================================================== */

/* Bezugspunkt für die aufklappenden Felder: die Kopfzeile selbst, damit
   sie über die ganze Breite der Seitenspalte gehen. */
.site-header-inner { position: relative; }
.site-session { position: static; }

.topmenu { position: static; }

.topbtn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 2px solid currentColor;
    border-radius: calc(var(--radius) - 9px);
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    list-style: none;
    user-select: none;
    white-space: nowrap;
}
.topbtn::-webkit-details-marker { display: none; }
.topbtn::marker { content: ""; }
.topbtn:hover,
.topbtn:focus-visible { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

.topbtn-icon { width: 17px; height: 17px; flex: 0 0 auto; }

/* Die Speisekarte ist der auffällige der beiden Knöpfe. */
.topbtn-haupt { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }
.topbtn-haupt:hover,
.topbtn-haupt:focus-visible { background: var(--accent-alt); border-color: var(--accent-alt); color: #fff; }

/* Drei Striche, die sich beim Öffnen zu einem Kreuz legen. */
.topbtn-balken {
    position: relative;
    width: 18px;
    height: 12px;
    flex: 0 0 auto;
}
.topbtn-balken::before,
.topbtn-balken::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 2.4px;
    background: currentColor;
    transition: transform .18s;
}
.topbtn-balken::before { top: 0; box-shadow: 0 4.8px 0 currentColor; }
.topbtn-balken::after { bottom: 0; }
.topmenu[open] .topbtn-balken::before { transform: translateY(4.8px) rotate(45deg); box-shadow: none; }
.topmenu[open] .topbtn-balken::after { transform: translateY(-4.8px) rotate(-45deg); }

/* ------------------------------------------------------------------
   Das aufgeklappte Feld
   ------------------------------------------------------------------ */

.topmenu-panel {
    position: absolute;
    top: calc(100% + 14px);
    left: 0;
    right: 0;
    z-index: 40;
    padding: 24px 26px;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
    border-top: 4px solid var(--accent);
    border-radius: calc(var(--radius) - 8px);
    box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
    animation: topmenuAuf .18s ease both;
}
.topmenu-panel-schmal { left: auto; width: min(360px, calc(100vw - 40px)); }
.topmenu-panel p { margin: 0 0 10px; font-size: .9rem; }
.topmenu-panel p:last-child { margin-bottom: 0; }
.topmenu-panel kbd {
    font: inherit;
    font-size: .82rem;
    padding: 1px 6px;
    border: 1px solid var(--border);
    border-bottom-width: 2px;
    border-radius: 4px;
    background: var(--page-bg);
}

@keyframes topmenuAuf {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   Die Gänge
   ------------------------------------------------------------------ */

.karte {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
}
@media (min-width: 700px) { .karte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; } }

.karte-gang h3 {
    margin: 0 0 10px;
    padding-bottom: 7px;
    font-size: 1rem;
    border-bottom: 2px solid var(--accent);
}
.karte-gang ul { margin: 0; padding: 0; list-style: none; }
.karte-gang li {
    padding: 6px 0 6px 15px;
    position: relative;
    font-size: .86rem;
    line-height: 1.4;
    border-bottom: 1px solid var(--border);
}
.karte-gang li:last-child { border-bottom: 0; }
/* Ein kleiner Strich statt eines Aufzählungspunkts - Speisekarte eben. */
.karte-gang li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 15px;
    width: 8px;
    height: 1px;
    background: var(--accent-alt);
}

.karte-fuss {
    margin: 20px 0 0 !important;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: .8rem !important;
}

@media (max-width: 620px) {
    .topbtn-text { display: none; }
    .topbtn { padding: 8px 10px; }
    .topbtn-haupt .topbtn-text { display: inline; }
}

/* ==================================================================
   Erste Reihe Kästen: Verhalten beim Überfahren

   Ganz ohne Skript - die Maus über dem Kasten färbt die Oberkante der
   Pointe rot. Gearbeitet wird mit box-shadow statt mit border-width,
   damit sich beim Überfahren nichts verschiebt.
   ================================================================== */

.hero-box {
    transition: border-top-color 5s;
}
.hero-box:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, .22);
    border-top-color: var(--accent-alt);
}
.hero-box-note { transition: box-shadow .16s, color .16s; }
.hero-box:hover .hero-box-note {
    box-shadow: inset 0 2px 0 -1px var(--accent-alt), 0 -2px 0 -1px var(--accent-alt);
    border-top-color: var(--accent-alt);
    background-color: rgba(0, 0, 200, .02);
}
.vsmal{font-size:12px;}
.psy{margin-left:-20px;margin-top:-20px;}

/* ----------------------------------------------------------------
   Satirehinweis auf der Startseite.
   ---------------------------------------------------------------- */

.satire-hinweis {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    max-width: var(--shell);
    margin: 0 auto 26px;
    padding: 14px 18px;
    border: 1px dashed var(--border);
    border-radius: calc(var(--radius) - 6px);
    background: color-mix(in srgb, var(--accent) 4%, var(--surface));
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.55;
}
.satire-hinweis strong { color: var(--text); }
.satire-hinweis-zeichen { flex: 0 0 auto; margin-top: 2px; color: var(--accent-alt); }
.satire-hinweis-text { min-width: 0; }
.satire-hinweis p { margin: 0; }
.satire-hinweis a { color: inherit; }

/* Die Werkstatt ist der einzige ernst gemeinte Kasten zwischen lauter
   Satire - deshalb traegt sie den blauen Rand statt des roten. */
.side-teaser-klartext { border-top-color: var(--klartext); }
.side-teaser-klartext .klartext-marke { margin-bottom: 8px; }

/* Rechtslinks in der Fußleiste. Sie sitzen neben der Darstellungswahl
   und brechen darunter um, wenn es eng wird. */
.site-footer-legal { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.site-footer-legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.site-footer-legal span { opacity: .5; }

/* ==================================================================
   Klartext

   Ein wiederkehrender Marker fuer die Stellen, an denen die Seite aus
   der Rolle faellt: Impressum, Datenschutz, Kontakt, der Hinweis ueber
   der Begruessung und die Werkstatt. Immer dieselben drei Zutaten -
   Stempel, das Wort "Klartext", die blaue Farbe - damit man es nach dem
   ersten Mal wiedererkennt.

   Farbe allein reicht dafuer nicht: sie wird nicht von jedem
   unterschieden und bedeutet beim ersten Besuch ohnehin nichts. Das
   Wort traegt die Botschaft, die Farbe nur die Wiedererkennung.
   ================================================================== */

.klartext-marke {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0 0 10px;
    color: var(--klartext);
    font-size: .74rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    line-height: 1;
}
.klartext-marke svg { width: 17px; height: 17px; flex: 0 0 auto; }

/* Der Balken links macht den Abschnitt schon beim Scrollen erkennbar,
   ohne dass man den Text gelesen haben muss. */
.klartext-block {
    border-left: 3px solid var(--klartext);
    padding-left: 16px;
}

/* Klartext innerhalb eines sonst satirischen Kastens. */
.klartext-einschub {
    margin-top: 10px;
    padding: 10px 12px;
    border-left: 3px solid var(--klartext);
    border-radius: 0 calc(var(--radius) - 10px) calc(var(--radius) - 10px) 0;
    background: var(--klartext-flaeche);
    color: var(--text);
}
.klartext-einschub a { color: var(--klartext); }

/* ------------------------------------------------------------------
   Anmelden in der Kopfzeile

   Bekommt die Form der beiden vorhandenen Knoepfe (Suche, Speisekarte),
   damit die Kopfzeile eine Einheit bleibt. Kein <details>, also auch
   kein Aufklappen - deshalb topbtn ohne topmenu.
   ------------------------------------------------------------------ */

.topbtn-link { text-decoration: none; color: inherit; }
.topbtn-link:hover,
.topbtn-link:focus-visible { background: var(--accent); color: var(--accent-text); border-color: var(--accent); }

/* Der angemeldete Name steht vor dem Abmelden-Knopf und soll ihn nicht
   ueberstrahlen. */
.site-user {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 16ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.site-user svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .75; }

/* Der Stempel in der Fußleiste ist nur Wiedererkennung, kein Hinweis -
   er sitzt vor den Pflichtlinks und nimmt deren Farbe an. */
.site-footer-stempel { display: inline-flex; opacity: .75; }
.site-footer-stempel svg { width: 15px; height: 15px; }

/* ==================================================================
   Haltung: der ernste Abschluss jeder Seite

   Sitzt ganz oben in der Fußzeile, vor den Leitmotiven. Die Farben
   kommen aus der Fußzeile selbst - ein festes Blau wäre auf rotem
   (Modern), schwarzem (Anarchie) und dunkelbraunem (Dark) Grund nicht
   gleichermaßen lesbar. Wiedererkannt wird der Abschnitt über Stempel
   und Wort, nicht über die Farbe.
   ================================================================== */

.footer-haltung {
    background: var(--footer-bg);
    color: var(--footer-text);
    border-bottom: 1px solid rgba(255, 255, 255, .14);
}

/* Gleiche Spalte wie der Rest der Fusszeile (--shell, mittig, 20px
   Seitenrand), damit Haltung, Leitmotive und Pflichtlinks auf einer
   gemeinsamen Kante stehen. */
.footer-haltung-inner {
    max-width: var(--shell);
    margin: 0 auto;
    padding: 15px 20px 14px;
    padding-left: 17px;
    border-left: 3px solid currentColor;
}

/* Ab 900px stehen Ueberschrift und Text nebeneinander statt
   untereinander - das halbiert die Hoehe des Bandes, ohne am Text
   selbst zu kuerzen. Darunter wieder gestapelt. */
@media (min-width: 900px) {
    .footer-haltung-inner {
        display: flex;
        align-items: baseline;
        gap: 28px;
    }
    .footer-haltung-kopf { flex: 0 0 240px; }
    .footer-haltung-text { flex: 1 1 auto; min-width: 0; }
}

.footer-haltung .klartext-marke {
    color: inherit;
    opacity: .7;
    margin-bottom: 5px;
    font-size: .64rem;
}
.footer-haltung .klartext-marke svg { width: 13px; height: 13px; }

.footer-haltung h2 {
    margin: 0 0 6px;
    font-size: .97rem;
    line-height: 1.25;
}
@media (min-width: 900px) {
    .footer-haltung-kopf h2 { margin-bottom: 0; }
}

.footer-haltung p {
    margin: 0 0 4px;
    font-size: .8rem;
    line-height: 1.5;
    opacity: .85;
}
.footer-haltung-schluss {
    margin-bottom: 0;
    font-weight: 700;
    opacity: 1;
}

@media (max-width: 640px) {
    .footer-haltung-inner { padding: 14px 16px 13px; padding-left: 13px; }
    .footer-haltung h2 { font-size: .92rem; }
}

/* ==================================================================
   Die beiden Kästen unten: Psychologie und Spiel

   Sie standen vorher nur nebeneinander und waren unterschiedlich hoch.
   Gleiche Hoehe allein reicht aber nicht: Wenn der Kasten nur gedehnt
   wird, steht unten leere Flaeche. Deshalb waechst innerhalb des
   Kastens das Bild mit - der Text bleibt, wie er ist, und der Rest der
   Hoehe geht an die Abbildung.
   ================================================================== */

@media (min-width: 1000px) {
    /* stretch statt start: beide Spalten werden so hoch wie die höhere. */
    .duo { align-items: stretch; }
    .duo > .section { display: flex; flex-direction: column; }

    /* Aus dem Raster wird eine Spalte, damit sich steuern laesst,
       welcher Teil die uebrige Hoehe bekommt. */
    .duo .teaser {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
    }
    .duo .teaser-body { flex: 0 0 auto; }
    .duo .teaser-media { flex: 1 1 auto; min-height: 220px; }
    .duo .teaser-media img { height: 100%; max-height: none; }

    /* Das Spielfeld behaelt seine eigenen Massen - es haengt an einem
       Seitenverhaeltnis und wuerde sonst verzerren. */
    .duo #app { flex: 0 0 auto; }
}

.duo .teaser {
    box-shadow: 0 3px 3px rgba(0, 0, 0, .16);
    transition: box-shadow .16s;
}
.duo .teaser:hover { box-shadow: 0 8px 18px rgba(0, 0, 0, .22); }

/* Beide Abschnittsueberschriften auf eine gemeinsame Hoehe. */
.duo > .section > h2 { margin-bottom: 14px; }

/* ==================================================================
   Vetternwirtschaft und Jobbörse
   ================================================================== */

/* Deutlicher Abstand nach oben: der Block darueber endet mit einem
   Kasten, und ohne Luft klebt die Vetternwirtschaft daran. */
.split-vettern { margin-top: 72px; }

@media (max-width: 900px) {
    .split-vettern { margin-top: 48px; }
}

.notice-vettern { border-left-width: 5px; }
.notice-vettern h3 {
    margin: 26px 0 8px;
    font-size: 1.02rem;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--border);
}

/* Der Leitsatz: das einzige, was im Text hervorsticht. */
.vettern-satz {
    margin: 18px 0;
    padding: 12px 0 12px 18px;
    border-left: 4px solid var(--accent-alt);
    font-size: 1.04rem;
    font-weight: 700;
    line-height: 1.45;
}

/* Das Organigramm erbt über currentColor die Textfarbe des Skins. */
/* Das Foto haengt an derselben Lupe wie die uebrigen Bilder - im Text
   ist es nur rund 700px breit, die Schilder waeren da nicht lesbar. */
.vettern-bild { margin: 22px 0; }
.vettern-bild .shot-button { border-radius: calc(var(--radius) - 8px); }
.vettern-bild img {
    display: block;
    width: 100%;
    height: auto;
    /* .shot-button img schneidet sonst auf 16:10 und oben links zu -
       hier soll das ganze Bild zu sehen sein. */
    aspect-ratio: auto;
    object-fit: fill;
    object-position: center;
}
.vettern-bild figcaption {
    margin-top: 10px;
    color: var(--muted);
    font-size: .82rem;
    line-height: 1.5;
    text-align: center;
}

.vettern-schluss {
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--border);
    font-weight: 700;
}

/* Die Jobbörse in der Randspalte: gleiche Bauart wie die Werkstatt,
   nur mit dem Hinweis statt einem Knopf, der nichts tut. */
.side-teaser-jobboerse { border-top-color: var(--accent); }

/* Die drei neuesten Stellen in der Randspalte. */
.side-stellen {
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
    font-size: .84rem;
}
.side-stellen li {
    padding: 8px 0;
    border-top: 1px solid var(--border);
    line-height: 1.4;
}
.side-stellen li:last-child { border-bottom: 1px solid var(--border); }
.side-stellen span { color: var(--muted); font-size: .78rem; }