/* =====================================================================
 * warum.css - 3.2.6-p5
 *
 * Seite "Warum eigene Musik". Aufbau wie die Rechtsseiten: begrenzte
 * Lesebreite, gegliederte Abschnitte, kein Banner. Der Unterschied ist die
 * Absicht - hier wird geworben, nicht informiert, deshalb Kicker, groessere
 * Ueberschriften und ein hervorgehobener Kernsatz je Abschnitt.
 *
 * Die Abschnitte selbst kommen aus includes/warum-inhalt.php, das dieselbe
 * Datei ist, aus der das Popup auf der Startseite seine Kurzfassung zieht.
 * ===================================================================== */


/*
 * LESEBREITE am Abschnitt statt am .wrapper: Der Wrapper ist eine zentrale
 * Regel, die alle Seiten teilen (dieselbe Ueberlegung wie in legal.css).
 */
.warum-intro,
.warum-schluss,
.warum-hinweis {
    max-width: 72ch;
    margin-inline: auto;
}

.warum-intro {
    margin-bottom: 12px;
    text-align: center;
}

/*
 * UEBERSCHRIFT IN ZWEI ZEILEN (3.2.6-p9, dritter Anlauf).
 *
 * Die beiden Anlaeufe davor haben an der BREITE gedreht - erst 20ch, dann
 * 36ch. Beide Male blieben es vier Zeilen. Der Denkfehler steckte in der
 * Einheit: 1ch ist die Breite der Ziffer Null. Deutscher Satz mit
 * Grossbuchstaben und Umlauten braucht pro Zeichen spuerbar mehr, "Musik,
 * die im Betrieb laufen darf." belegt also deutlich mehr als 34ch.
 *
 * Die Ursache ist nicht die Breite, sondern die Schriftgroesse: Bei
 * 3,2rem passt die laengere Zeile schlicht nicht in den Wrapper. Jetzt
 * 2,5rem als Obergrenze und keine eigene Breitenbegrenzung mehr - der
 * Wrapper mit seinen 1180px genuegt.
 *
 * Nebeneffekt, der gewollt ist: Die Schlagzeile konkurriert nicht mehr
 * mit den Zwischenueberschriften der Karten darunter.
 */
.warum-intro h1 {
    margin: .1em auto .5em;
    font-size: clamp(1.7rem, 3.2vw, 2.5rem);
    line-height: 1.2;
    letter-spacing: -.015em;
    text-wrap: balance;
}

.warum-intro .lead {
    margin: 0;
    color: var(--muted);
}

.warum-schluss {
    margin-top: 3em;
    padding: clamp(24px, 4vw, 36px);
    text-align: center;
}

.warum-schluss h2 {
    margin: 0 0 .4em;
}

.warum-schluss .home-actions {
    justify-content: center;
}

/*
 * Der rechtliche Hinweis steht bewusst klein und ganz am Ende - er soll
 * gefunden werden, aber die Aussage davor nicht relativieren, bevor sie
 * gelesen ist.
 */
.warum-hinweis {
    margin: 2.2em auto 0;
    color: var(--muted);
    font-size: .85rem;
    text-align: center;
}