/*
 * Hofladen – 02 Basis
 * Grundeinstellungen und Typografie.
 * Überschriften als Zweizeiler: zweite Zeile im Editor in <em> setzen,
 * z. B. <h2>Termine<br><em>auf dem Hof</em></h2>
 */

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    background: var(--hl-papier);
    color: var(--hl-text);
    font: 17px/1.6 var(--hl-schrift-text);
}

img {
    display: block;
    max-width: 100%;
    height: auto;
}

a {
    color: inherit;
}

/* Überschriften */
h1,
h2,
h3 {
    margin: 0 0 .4em;
    font-family: var(--hl-schrift-titel);
    font-weight: 600;
    letter-spacing: -.01em;
    line-height: 1.15;
}

h1 {
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
}

h2 {
    font-size: clamp(1.8rem, 3vw, 2.4rem);
}

h3 {
    font-size: 1.25rem;
}

/* Zweite Zeile in Handschrift */
h1 em,
h2 em {
    color: var(--hl-gruen-hand);
    font-family: var(--hl-schrift-hand);
    font-size: 1.18em;
    font-style: normal;
    font-weight: 700;
    line-height: 1;
}

/* Überzeile: <p class="kicker"> */
.kicker {
    margin: 0 0 .6em;
    color: var(--hl-gruen-text);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.kicker + :is(h1, h2, h3) {
    margin-top: 0;
}

/* Kleingedrucktes */
.note {
    color: var(--hl-text-leise);
    font-size: .8rem;
}