/* =====================================================================
 * saunamusik.css
 *
 * Landingpage fuer die Domain saunamusik.de. Bewusst SEHR wenig eigenes
 * CSS: Die Seite besteht fast vollstaendig aus vorhandenen Bausteinen
 * (.panel, .home-value-args, .section-intro, .home-actions). Was hier
 * steht, ist nur die Anordnung der drei Teile, die es sonst nicht gibt.
 * ===================================================================== */

/*
 * ABSTAENDE (3.3.2-p8, Befund Lars)
 *
 * Die Seite war zu luftig: viel Weissraum zwischen wenig Inhalt. Auf einer
 * Landingpage arbeitet das gegen den Zweck - wer scrollen muss, um vom
 * Argument zum Preis zu kommen, verliert den Zusammenhang.
 *
 * Alle Abstaende sind um etwa ein Drittel gekuerzt. Die Formeln bleiben
 * mitwachsend, nur die Werte sind kleiner.
 */

.sauna-argumente {
    padding: clamp(20px, 3vw, 30px);
    margin-top: clamp(22px, 3vw, 32px);
}

.sauna-argumente .home-value-args {
    margin: 0;
}

.sauna-bereiche,
.sauna-pakete {
    margin-top: clamp(28px, 3.6vw, 44px);
}

/*
 * Die Ueberschriften in diesen Bloecken fielen auf die zentrale h2-Regel
 * zurueck - clamp(1.9rem, 4vw, 3.4rem). Das ist die Groesse fuer eine
 * Abschnittsueberschrift auf der Startseite, nicht fuer eine Karte, in der
 * drei Zeilen Text stehen. Hier eine Stufe kleiner.
 */

.sauna-bereiche h2,
.sauna-pakete h2,
.sauna-referenz h2,
.sauna-schluss h2 {
    margin: 0 0 .35em;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1.2;
}

.sauna-bereiche .lead,
.sauna-pakete .lead {
    margin: 0;
}

.sauna-hinweis {
    margin-top: 16px;
    color: var(--muted);
    font-size: .92rem;
    text-align: center;
}

@media (min-width: 900px) {
.sauna-schluss-paar {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        align-items: stretch;
    }
.sauna-schluss-paar > * {
        margin: 0;
        height: 100%;
    }
}

@media (max-width: 899px) {
.sauna-schluss-paar {
        display: grid;
        gap: 16px;
    }
.sauna-schluss-paar > * {
        margin: 0;
    }
}

/* Musikberater zwischen Argumenten und Hoerproben */

/* Handy: Die Argumente sind dort eine Wischreihe aus Karten - der aeussere
   Rahmen faellt weg, sonst stuenden Karten doppelt gerahmt in einer Karte. */
@media (max-width: 560px) {
    .panel.sauna-argumente {
        padding: 0;
        border: 0;
        background: none;
        box-shadow: none;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    /* Die Seitenregel ".sauna-argumente .home-value-args { margin: 0 }" hebt sonst den
       Randausgleich der Wischreihe auf - die Karten stuenden eingerueckt. */
    .sauna-argumente .home-value-args {
        margin-inline: -12px;
    }
}