/* ==========================================================================
   Projekt BlacklightSMP – nur, was es außerhalb dieser Seite nicht gibt.
   Maße aus docs/konzept/vermessung/unterseiten.md (Bild 9, CSS-px bei 1280 px).
   Textwand, Abschnittsmarke, Seitenleiste (.spalten), Kennzahlenband, Datenliste,
   Bildkarten, Zitat und CTA-Kasten kommen aus main.css.
   Auch /projekte lädt diese Datei, für Hero-Abstand, Rückmeldung und „Selbst ansehen“;
   Änderungen dort mit prüfen.
   ========================================================================== */

/* Hero: einspaltig, rechts nur Muster; unter dem Absatz die Technik-Chips ------- */

.projekt-hero { padding-block: var(--a-18); }
/* Der Umbruch nach „Spielserver,“ wie im Konzept, erst ab 960 px: darunter passt die erste Zeile nicht
   immer in die Breite (bei 640 px stand „Spielserver,“ sonst allein in der Zeile) */
@media (max-width: 959px) { .projekt-hero h1 br { display: none; } }


/* Kennzahlenband -------------------------------------------------------------------- */

/* Date figure: caption first in the source so it reads "im Dauerbetrieb seit Mai 2026",
   value still shown on top (.kennzahl is a flex column, main.css) and kept on one line */
.kennzahl--seit .kennzahl__wert { order: -1; white-space: nowrap; }
/* "Mai 2026" is the widest band value: 34 px only just fits the half column at 360 px and
   breaks at 320 px. Below 375 px all four values step down together so the band stays even. */
@media (max-width: 374px) { .kennzahlen--band .kennzahl__wert { font-size: var(--gr-zahl); } }
@media (max-width: 359px) { .kennzahlen--band .kennzahl__wert { font-size: var(--gr-kennzahl); } }


/* Fallstudie: Marke, Überschrift 32 px, Textwand; rechts die Seitenleiste ---------- */

.fallstudie__teil + .fallstudie__teil { margin-top: var(--a-12); }
.fallstudie__teil > .marke { margin-bottom: var(--a-3); }
.fallstudie__teil h2 {
    margin-bottom: var(--a-4);
    font-size: clamp(1.625rem, 1.3rem + 1vw, 2rem);
    line-height: 1.15;
}

/* Spielwelt: Original 900 × 473, deshalb nur als Kachel in der Seitenleiste (BILDER.md) */
.fallstudie__bild { margin: 0; overflow: hidden; border-radius: var(--r-3); background: var(--c-stein); }
.fallstudie__bild img { width: 100%; }

.projektdaten { gap: var(--a-5); padding: var(--a-6); }
.projektdaten .daten { gap: var(--a-3); }
.projektdaten .daten > div { gap: 0; }
.projektdaten .daten dt { font-size: var(--gr-text); line-height: 1.4; }
.projektdaten .daten dd { font-weight: 600; line-height: 1.4; }

.uebertragbar { gap: var(--a-3); padding: var(--a-6); }
.uebertragbar p { line-height: 1.6; color: var(--tx2); }

/* Tabletbreite: links Bild und Übertrag übereinander, rechts die Projektdaten über beide Reihen.
   Die Projektdaten sind etwa so hoch wie Bild und Übertrag zusammen, so bleibt keine Lücke unter dem Bild. */
@media (min-width: 640px) and (max-width: 959px) {
    .fallstudie__seite { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
    .fallstudie__seite .projektdaten { grid-column: 2; grid-row: 1 / span 2; }
}
/* Hauptspalte breiter als auf „Über mich“ (Konzept: mindestens 765 px), Seitenleiste 340 px */
@media (min-width: 960px) {
    .fallstudie .spalten { grid-template-columns: minmax(0, 48rem) minmax(0, 21.25rem); }
}


/* Was technisch dahintersteckt: sechs weiße Karten ------------------------------- */

.technik-karten .karte { gap: var(--a-3); padding: var(--a-6); }
.technik-karten p { line-height: 1.6; }


/* Zwei Projekte, die dazugehören: Bildkopf 2:1, Text, Technikzeile unten bündig --- */

/* Bewusst höher als der 170-px-Platzhalter im Konzept: Statt grauer Fläche stehen hier echte
   Screenshots, und erst bei 2:1 bleiben Statuskarten, Versionen und Rezeptliste lesbar (wie auf der
   Startseite mit 380:195). Die Trennlinie hält den weißen Plugin-Screenshot von der weißen Karte ab. */
.vorgeschichte .karte__bild { aspect-ratio: 2 / 1; border-bottom: var(--rand-breite) solid var(--rand); }
.vorgeschichte .karte__bild img { object-position: left top; }
.vorgeschichte .karte__inhalt { gap: var(--a-3); padding: var(--a-6); }
.vorgeschichte h3 { font-size: 1.375rem; }
.vorgeschichte .karte__inhalt > p:not(.label) { font-size: 1rem; line-height: 1.65; }
.vorgeschichte__technik { margin-top: auto; padding-top: var(--a-2); }


/* Rückmeldung: Zitat links, Karte „Selbst ansehen“ rechts, mittig zueinander ------ */

.rueckmeldung { display: grid; gap: var(--a-10); align-items: center; }
.rueckmeldung__zitat { max-width: 43rem; }
.rueckmeldung__zitat figure { margin-top: var(--a-4); }

.ansehen { gap: var(--a-3); padding: var(--a-6); }
.ansehen p { line-height: 1.6; color: var(--tx2); }
.ansehen__links { display: grid; gap: var(--a-1); margin-top: var(--a-1); }
.ansehen__links a { line-height: 1.6; }
/* The arrow on external links (.extern) is the shared rule in main.css */

@media (min-width: 960px) {
    .rueckmeldung { grid-template-columns: minmax(0, 1fr) minmax(0, 22.125rem); gap: var(--a-16); }
}