/* ==========================================================================
   PERTL GMBH – Basis
   Design-System (Farben, Schrift, Abstände), Reset, Typografie, Layout-Raster.
   Farben stammen aus Logo (#285032) und bisheriger Website.
   ========================================================================== */

@font-face {
    font-family: 'Montserrat';
    src: url('../assets/fonts/montserrat-latin-wght-normal.woff2') format('woff2');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../assets/fonts/poppins-latin-400-normal.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../assets/fonts/poppins-latin-500-normal.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Poppins';
    src: url('../assets/fonts/poppins-latin-600-normal.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Markenfarben */
    --farbe-tanne: #285032;          /* Logo-Grün */
    --farbe-blatt: #2f7b46;          /* Primärfarbe der bisherigen Website */
    --farbe-blatt-hell: #8cc298;
    --farbe-nacht: #17241b;          /* dunkelstes Grün, Text auf Akzent */
    --farbe-sonne: #cc8a3f;          /* Akzent: Sonne */
    --farbe-sonne-hell: #e9d5a8;
    --farbe-modul: #12283a;          /* Modulblau aus der Bildsprache */
    --farbe-modul-hell: #1c3a52;

    /* Flächen */
    --farbe-hintergrund: #eff7eb;
    --farbe-flaeche: #f7fcf5;
    --farbe-weiss: #ffffff;
    --farbe-sand: #f6f0e4;
    --farbe-wasser: #e4f0f1;

    /* Text */
    --farbe-text: #283523;
    --farbe-text-leise: #55644f;
    --farbe-text-hell: #f4fbf2;
    --farbe-text-hell-leise: #c4d8c4;
    --farbe-linie: rgba(40, 80, 50, 0.16);
    --farbe-linie-hell: rgba(244, 251, 242, 0.2);
    --farbe-fehler: #a3271f;

    /* Schrift */
    --schrift-titel: 'Montserrat', 'Poppins', system-ui, sans-serif;
    --schrift-text: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;

    --text-xs: 0.8125rem;
    --text-sm: 0.9375rem;
    --text-md: 1rem;
    --text-lg: 1.125rem;
    --text-xl: clamp(1.2rem, 1.05rem + 0.6vw, 1.45rem);
    --text-2xl: clamp(1.45rem, 1.2rem + 1vw, 1.9rem);
    --text-3xl: clamp(1.85rem, 1.35rem + 2.1vw, 2.9rem);
    --text-4xl: clamp(2.35rem, 1.3rem + 4.6vw, 4.6rem);

    /* Abstände */
    --abstand-xs: 0.5rem;
    --abstand-sm: 0.75rem;
    --abstand-md: 1.25rem;
    --abstand-lg: 2rem;
    --abstand-xl: 3.25rem;
    --abstand-bereich: clamp(3.75rem, 2.4rem + 5.6vw, 7rem);

    /* Form */
    --radius-klein: 0.5rem;
    --radius-mittel: 1rem;
    --radius-gross: 1.75rem;
    --radius-rund: 999px;

    --schatten-weich: 0 14px 34px rgba(23, 36, 27, 0.1);
    --schatten-tief: 0 26px 60px rgba(23, 36, 27, 0.2);

    --breite-inhalt: 1180px;
    --breite-schmal: 820px;
    --rand-seite: clamp(1.1rem, 4vw, 2.5rem);
    --hoehe-kopf: 4.5rem;

    --dauer: 0.25s;
    --kurve: cubic-bezier(0.2, 0.7, 0.2, 1);
}

@media (max-width: 720px) {
    :root {
        --hoehe-kopf: 3.75rem;
    }
}

/* ---------- Reset ---------- */

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

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--hoehe-kopf) + 1.5rem);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--schrift-text);
    font-size: var(--text-md);
    line-height: 1.65;
    color: var(--farbe-text);
    background: var(--farbe-hintergrund);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img,
video,
svg {
    display: block;
    max-width: 100%;
}

img,
video {
    height: auto;
}

h1,
h2,
h3,
h4,
p,
ul,
ol,
dl,
dd,
figure,
blockquote {
    margin: 0;
}

ul,
ol {
    padding: 0;
    list-style: none;
}

button,
input,
textarea {
    font: inherit;
    color: inherit;
}

button {
    cursor: pointer;
}

[hidden] {
    display: none !important;
}

/* ---------- Typografie ---------- */

h1,
h2,
h3,
h4 {
    font-family: var(--schrift-titel);
    font-weight: 750;
    line-height: 1.14;
    letter-spacing: -0.012em;
    color: var(--farbe-tanne);
    text-wrap: balance;
}

h1 {
    font-size: var(--text-4xl);
    font-weight: 800;
    letter-spacing: -0.025em;
}

h2 {
    font-size: var(--text-3xl);
}

h3 {
    font-size: var(--text-2xl);
}

h4 {
    font-size: var(--text-lg);
    letter-spacing: 0;
}

p {
    max-width: 68ch;
    text-wrap: pretty;
}

p + p {
    margin-top: 1em;
}

a {
    color: var(--farbe-blatt);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--dauer) var(--kurve);
}

a:hover {
    color: var(--farbe-tanne);
}

strong {
    font-weight: 600;
}

:focus-visible {
    outline: 3px solid var(--farbe-sonne);
    outline-offset: 3px;
    border-radius: 4px;
}

::selection {
    background: var(--farbe-sonne-hell);
    color: var(--farbe-nacht);
}

/* ---------- Hilfsklassen ---------- */

.nur-vorlesen {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.sprunglink {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 200;
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius-klein);
    background: var(--farbe-tanne);
    color: var(--farbe-text-hell);
    font-weight: 600;
    text-decoration: none;
    transform: translateY(-200%);
}

.sprunglink:focus {
    transform: none;
    color: var(--farbe-text-hell);
}

/* ---------- Layout ---------- */

.rahmen {
    width: min(100% - 2 * var(--rand-seite), var(--breite-inhalt));
    margin-inline: auto;
}

.rahmen--schmal {
    width: min(100% - 2 * var(--rand-seite), var(--breite-schmal));
}

.bereich {
    position: relative;
    padding-block: var(--abstand-bereich);
}

.bereich--hell {
    background: var(--farbe-flaeche);
}

.bereich--sand {
    background: var(--farbe-sand);
}

.bereich--wasser {
    background: var(--farbe-wasser);
}

.bereich--dunkel {
    background: var(--farbe-tanne);
    color: var(--farbe-text-hell);
}

.bereich--nacht {
    background: var(--farbe-nacht);
    color: var(--farbe-text-hell);
}

.bereich--dunkel :is(h2, h3, h4),
.bereich--nacht :is(h2, h3, h4) {
    color: var(--farbe-text-hell);
}

.bereich--dunkel a:not(.knopf),
.bereich--nacht a:not(.knopf) {
    color: var(--farbe-sonne-hell);
}

.bereich__kopf {
    margin-bottom: var(--abstand-xl);
}

.bereich__kopf p {
    max-width: 46rem;
}

.bereich__kopf > * + * {
    margin-top: var(--abstand-md);
}

.bereich__kopf p {
    font-size: var(--text-lg);
}

.zweispalter {
    display: grid;
    gap: var(--abstand-xl);
    align-items: center;
}

@media (min-width: 900px) {
    .zweispalter {
        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
        gap: clamp(2.5rem, 6vw, 5.5rem);
    }

    .zweispalter--bild-links {
        grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
    }
}

.zweispalter__text > * + * {
    margin-top: var(--abstand-md);
}

.textspalten {
    display: grid;
    gap: var(--abstand-lg);
}

@media (min-width: 820px) {
    .textspalten {
        grid-template-columns: 1fr 1fr;
        gap: var(--abstand-xl);
    }

    .textspalten p + p {
        margin-top: 0;
    }
}

.herkunft {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--farbe-blatt);
}

.herkunft--hell {
    color: var(--farbe-sonne-hell);
}

.vorspann {
    font-size: var(--text-xl);
    font-weight: 500;
    line-height: 1.45;
    color: var(--farbe-tanne);
}

.bereich--dunkel .vorspann,
.bereich--nacht .vorspann {
    color: var(--farbe-text-hell);
}
[tabindex="-1"]:focus { outline: none; }

/* Rasterkinder dürfen schmaler werden als ihr längstes Wort (verhindert seitliches Scrollen) */
main :where(div, article, aside, figure, li, section) {
    min-width: 0;
}

h1,
h2,
h3,
h4 {
    overflow-wrap: break-word;
    hyphens: manual;
}