/*
 * PictureGrove – Learn-more-Seite
 * ------------------------------------------------------------
 * Zweck:
 *   Dieses Stylesheet steuert ausschließlich das seitenbezogene
 *   Layout der Learn-more-Seite.
 *
 * Was hier bewusst NICHT liegt:
 *   - Header-Stile (liegen in /assets/header.css)
 *   - mobile Header-Overrides (liegen in /assets/header-mobile.css)
 *
 * Gestalterische Leitidee:
 *   Die Seite soll als ruhige, editoriale Leseseite erscheinen:
 *   dunkler Grund, klare Lesespalte, großzügige Luft und eine
 *   Überschrift, die sich sauber am Raster orientiert.
 */


/* ============================================================
   GRUNDVARIABLEN / SEITENRAHMEN
   ------------------------------------------------------------
   Zentrale Farben, Maximalbreiten und typografische Grundwerte
   der Learn-more-Seite.
   ============================================================ */
:root {
    --stage-bg: #0d0b09;
    --bg: #151311;
    --panel: #1c1917;
    --text: #f1ece2;
    --muted: #cfc6b8;
    --soft: #9f9689;
    --line: rgba(255,255,255,0.10);
    --max-page: 1120px;
    --max-text: 720px;
}


/* ============================================================
   BASIS / RESET
   ------------------------------------------------------------
   Schlichte Grundbereinigung für Box-Modell, Seitenhintergrund
   und neutrale Linkdarstellung.
   ============================================================ */
* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    background: var(--stage-bg);
    color: var(--text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    line-height: 1.6;
}

a {
    color: inherit;
    text-decoration: none;
}

.page {
    min-height: 100vh;
    max-width: 1120px;
    margin: 0 auto;
    background: var(--bg);
}


/* ============================================================
   ÄUSSERE SEITENHÜLLE
   ------------------------------------------------------------
   .shell bildet die großzügige Außenbühne der Seite.
   Innerhalb dieser Bühne sitzt das eigentliche Inhaltsraster.
   ============================================================ */
.shell {
    max-width: 1920px;
    margin: 0 auto;
    padding: 0 24px;
}


/* ============================================================
   HERO-BEREICH
   ------------------------------------------------------------
   Oberer Titelbereich der Learn-more-Seite.
   Die Überschrift sitzt bewusst nicht frei im Raum, sondern
   ist an dieselbe Rasterlogik gekoppelt wie die Lesespalte.
   ============================================================ */
.hero {
    padding: 56px 0 24px;
}

.hero-inner {
    max-width: var(--max-page);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, var(--max-text)) minmax(260px, 1fr);
}

/*
 * Die eigentliche Hero-Kopie sitzt in der mittleren Spalte.
 * Ein kleiner linker Einzug korrigiert die optische Kante
 * der großen Überschrift.
 */
.hero-copy {
    grid-column: 2;
}

/*
 * Kleiner Vorlauf über der Hauptüberschrift.
 * Absichtlich ruhig, weit gesperrt und in zurückgenommener Farbe.
 */
.kicker {
    font-size: 0.84rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--soft);
    margin-bottom: 12px;
}

/*
 * Hauptüberschrift der Seite.
 * Große, leichte Typografie mit enger Zeilenhöhe.
 */
h1 {
    margin: 0;
    max-width: none;
    font-size: clamp(1.75rem, 3.35vw, 3.0rem);
    line-height: 1.02;
    font-weight: 300;
    letter-spacing: -0.04em;
}


/* ============================================================
   HAUPTINHALT / LESESPALTE
   ------------------------------------------------------------
   Der Content-Bereich ist als editoriale Leseseite aufgebaut.
   Das Raster erzeugt links und rechts Luft; der eigentliche
   Text sitzt in der mittleren Spalte.
   ============================================================ */
.content {
    padding: 12px 0 80px;
}

.content-grid {
    max-width: var(--max-page);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(260px, 1fr) minmax(0, var(--max-text)) minmax(260px, 1fr);
    gap: 0;
    align-items: start;
}

.content-grid > article {
    grid-column: 2;
}


/* ============================================================
   EINLEITUNG
   ------------------------------------------------------------
   Die Intro-Zeile ist bewusst etwas größer und luftiger gesetzt
   als der normale Fließtext. Sie fungiert als ruhiger Einstieg.
   ============================================================ */
.intro {
    font-size: 1.12rem;
    line-height: 1.9;
    color: var(--muted);
    margin: 0 0 48px;
}


/* ============================================================
   ABSCHNITTE / FLIESSTEXT
   ------------------------------------------------------------
   Klassische Abfolge aus Abschnittsüberschrift und Absätzen.
   Ziel: gute Lesbarkeit, ruhiger Rhythmus, keine Magazinhektik.
   ============================================================ */
.section {
    margin-bottom: 52px;
}

.section h2 {
    margin: 0 0 18px;
    font-size: clamp(1.7rem, 2.4vw, 2.2rem);
    line-height: 1.15;
    font-weight: 300;
    letter-spacing: -0.03em;
}

.section p {
    margin: 0 0 18px;
    font-size: 1.04rem;
    line-height: 1.9;
    color: var(--muted);
}