/* ==========================================================================
   Oliver Schäfer Garten- & Landschaftsbau – Stylesheet

   Stilrichtung: hell und natürlich. Leinen-Beige als Grund, Tannengrün als
   Hauptfarbe, Rindenbraun für Schrift, das Orange aus dem Logo nur für den
   wichtigsten Knopf (Anrufen). Deko-Motiv: die geschwungene Hügellinie aus
   dem Logo (Bühne und Seitenfuß).

   Inhalt
    1. Farben, Schriften, Maße (Variablen)
    2. Grundlagen
    3. Hilfsklassen
    4. Knöpfe und Links
    5. Kopfzeile und Navigation
    6. Bühne (Startseite)
    7. Abschnitte und Spalten
    8. Schnellinfos, Kacheln, Projektkarten
    9. Preistafel, Listen, Fotos
   10. Galerie, Großansicht, Video-Einbettung
   11. Unterseiten (Seitenkopf, Leistungen, Projekte)
   12. Kontakt und Formular
   13. Rechtstexte, Fehlerseite
   14. Aufruf und Seitenfuß
   15. Bewegung reduzieren
   ========================================================================== */


/* === 1. Farben, Schriften, Maße ========================================= */

@font-face {
    font-family: "Alegreya";
    src: url("/fonts/alegreya.woff2") format("woff2");
    font-weight: 400 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Alegreya";
    src: url("/fonts/alegreya-kursiv.woff2") format("woff2");
    font-weight: 400 900;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Alegreya Sans";
    src: url("/fonts/alegreya-sans-400.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: "Alegreya Sans";
    src: url("/fonts/alegreya-sans-400-kursiv.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}
@font-face {
    font-family: "Alegreya Sans";
    src: url("/fonts/alegreya-sans-700.woff2") format("woff2");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* Flächen */
    --leinen: #f7f3ea;        /* Seitenhintergrund */
    --papier: #fffdf8;        /* Karten, Formularfelder */
    --sand: #efe6d4;          /* getönter Abschnitt (warm) */
    --moos: #e6eddc;          /* getönter Abschnitt (grün) */
    --linie: #e2d8c4;         /* Rahmen und Trennlinien */

    /* Grün (Hauptfarbe) */
    --wald: #2f6b3a;          /* Überschriften-Akzent, Links, grüne Knöpfe */
    --wald-tief: #1f4a29;     /* Seitenfuß, Hover */
    --blatt: #5a9a4e;         /* Deko-Linien */

    /* Braun (Schrift) */
    --rinde: #3a2c22;         /* Fließtext und Überschriften */
    --rinde-weich: #6b5646;   /* Nebentexte */
    --holz: #b08a5f;          /* Deko, Preistafel-Rand */

    /* Signal (aus dem Logo) – nur für Anruf-/Bestellknöpfe */
    --signal: #e98b2a;
    --signal-tief: #d57718;
    --signal-text: #a8560b;   /* Orange als Schriftfarbe (Wortmarke, Unterschrift) */

    /* Zustände */
    --offen: #3a9a43;         /* „Jetzt erreichbar“ */
    --zu: #b8603a;            /* „Wieder erreichbar …“ */
    --fehler: #a8321f;

    /* Schriften */
    --schrift-titel: "Alegreya", Georgia, "Times New Roman", serif;
    --schrift-text: "Alegreya Sans", "Segoe UI", system-ui, sans-serif;

    /* Maße */
    --breite: 76rem;
    --rand: clamp(1rem, 4vw, 2.5rem);
    --abstand: clamp(3.5rem, 8vw, 6.5rem);
    --rund-klein: 12px;
    --rund: 20px;
    --rund-gross: 28px;
    --blatt-form: 28px 96px 28px 96px;   /* Blattform für große Fotos */
    --kopf-hoehe: 4.5rem;
    --schatten: 0 1px 2px rgba(58, 44, 34, .06), 0 12px 30px -16px rgba(58, 44, 34, .32);
    --schatten-hoch: 0 2px 4px rgba(58, 44, 34, .06), 0 22px 44px -20px rgba(58, 44, 34, .38);
}


/* === 2. Grundlagen ====================================================== */

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

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

body {
    margin: 0;
    background: var(--leinen);
    color: var(--rinde);
    font-family: var(--schrift-text);
    font-size: 1.1875rem;
    line-height: 1.6;
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--schrift-titel);
    font-weight: 700;
    line-height: 1.12;
    margin: 0 0 .6em;
    color: var(--rinde);
    text-wrap: balance;
}
h1 { font-size: clamp(2.3rem, 1.6rem + 3.2vw, 3.6rem); }
h2 { font-size: clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem); }
h3 { font-size: clamp(1.3rem, 1.15rem + .6vw, 1.6rem); }

p, ul, ol, dl, address, figure { margin: 0 0 1em; }
address { font-style: normal; }
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: var(--wald); text-underline-offset: .18em; }
a:hover { color: var(--wald-tief); }
strong { font-weight: 700; }

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

::selection { background: #d8e6c8; }

/* Kein Doppeltipp-Zoom-Verzug, dezentes Tipp-Feedback auf dem Handy */
a, button, summary, label, select { touch-action: manipulation; }
html { -webkit-tap-highlight-color: rgba(47, 107, 58, .15); }


/* === 3. Hilfsklassen ==================================================== */

.breite {
    width: 100%;
    max-width: calc(var(--breite) + 2 * var(--rand));
    margin-inline: auto;
    padding-inline: var(--rand);
}
.breite-schmal { max-width: calc(48rem + 2 * var(--rand)); }

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

.nicht-umbrechen { white-space: nowrap; }

.sprunglink {
    position: absolute;
    left: 1rem; top: -4rem;
    z-index: 100;
    padding: .7rem 1.1rem;
    background: var(--wald-tief);
    color: #fff;
    border-radius: var(--rund-klein);
}
.sprunglink:focus { top: 1rem; color: #fff; }

.symbol {
    width: 1.2em;
    height: 1.2em;
    flex: none;
}

.abstand-oben { margin-top: clamp(2.5rem, 6vw, 4rem); }
.abstand-oben-klein { margin-top: .6rem; }
.abstand-unten { margin-bottom: clamp(2rem, 5vw, 3rem); }


/* === 4. Knöpfe und Links ================================================ */

.knopfreihe {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    margin-top: 1.5rem;
}

.knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    min-height: 3rem;
    padding: .65rem 1.4rem;
    border: 2px solid transparent;
    border-radius: 999px;
    font-family: var(--schrift-text);
    font-size: 1.0625rem;
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.knopf:active { transform: translateY(1px); }
.knopf-gross { min-height: 3.5rem; padding-inline: 1.6rem; font-size: 1.15rem; }
.knopf-breit { width: 100%; }

/* Signal: Anrufen und Bestellen (Orange aus dem Logo, dunkle Schrift) */
.knopf-signal { background: var(--signal); color: var(--rinde); }
.knopf-signal:hover { background: var(--signal-tief); color: var(--rinde); }

.knopf-gruen { background: var(--wald); color: #fff; }
.knopf-gruen:hover { background: var(--wald-tief); color: #fff; }

.knopf-rand { border-color: var(--wald); color: var(--wald); background: transparent; }
.knopf-rand:hover { background: var(--wald); color: #fff; }

.knopf-hell { background: var(--papier); color: var(--wald-tief); border-color: var(--linie); }
.knopf-hell:hover { border-color: var(--wald); color: var(--wald-tief); }

.knopf[disabled] { opacity: .6; cursor: wait; }

.textlink {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-weight: 700;
    text-decoration: none;
}
.textlink .symbol { transition: transform .2s; }
.textlink:hover .symbol { transform: translateX(3px); }


/* === 5. Kopfzeile und Navigation ======================================== */

.kopf {
    position: sticky;
    top: 0;
    z-index: 50;
    background: var(--leinen);
    border-bottom: 1px solid transparent;
    transition: border-color .2s, box-shadow .2s;
}
.kopf.kopf-gescrollt {
    border-bottom-color: var(--linie);
    box-shadow: 0 6px 18px -14px rgba(58, 44, 34, .4);
}

.kopf-innen {
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: var(--kopf-hoehe);
}

/* Logo: Bildmarke + Schriftzug als echter Text */
.marke {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-right: auto;
    color: inherit;
    text-decoration: none;
}
.marke-zeichen { width: 3.4rem; height: auto; }
.marke-text { display: flex; flex-direction: column; line-height: 1.05; white-space: nowrap; }
.marke-name {
    font-family: var(--schrift-titel);
    font-style: italic;
    font-weight: 800;
    font-size: 1.5rem;
    color: var(--signal-text);
}
.marke-unten { font-size: .9rem; color: var(--wald); font-weight: 700; letter-spacing: .01em; }

/* Telefonknopf in der Kopfzeile (nicht auf der Startseite) */
.kopf-anruf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: 999px;
    background: var(--signal);
    color: var(--rinde);
    font-weight: 700;
    text-decoration: none;
}
.kopf-anruf:hover { background: var(--signal-tief); color: var(--rinde); }
.kopf-anruf-nummer { display: none; white-space: nowrap; }

/* Menüknopf (drei Striche, wird beim Öffnen zum Kreuz) */
.menue-knopf {
    display: none;
    width: 2.9rem;
    height: 2.9rem;
    padding: 0;
    border: 2px solid var(--linie);
    border-radius: 999px;
    background: var(--papier);
    color: var(--rinde);
    cursor: pointer;
}
.js .menue-knopf { display: inline-grid; place-items: center; }
.menue-knopf-striche,
.menue-knopf-striche::before,
.menue-knopf-striche::after {
    display: block;
    width: 1.15rem;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform .25s, opacity .2s;
}
.menue-knopf-striche { position: relative; }
.menue-knopf-striche::before,
.menue-knopf-striche::after { content: ""; position: absolute; left: 0; }
.menue-knopf-striche::before { top: -6px; }
.menue-knopf-striche::after { top: 6px; }
.menue-knopf[aria-expanded="true"] .menue-knopf-striche { background: transparent; }
.menue-knopf[aria-expanded="true"] .menue-knopf-striche::before { transform: translateY(6px) rotate(45deg); }
.menue-knopf[aria-expanded="true"] .menue-knopf-striche::after { transform: translateY(-6px) rotate(-45deg); }

/* Menü auf kleinen Bildschirmen: ganzer Bildschirm unter der Kopfzeile */
.hauptmenue ul { list-style: none; margin: 0; padding: 0; }
.menue-anruf { display: none; }

@media (max-width: 1099px) {
    .js .hauptmenue {
        position: fixed;
        inset: var(--kopf-hoehe) 0 0 0;
        z-index: 49;
        display: none;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 1rem var(--rand) calc(2.5rem + env(safe-area-inset-bottom));
        background: var(--leinen);
        border-top: 1px solid var(--linie);
    }
    .js .hauptmenue.offen { display: block; }
    .hauptmenue a {
        display: block;
        padding: .7rem 0;
        font-family: var(--schrift-titel);
        font-size: 1.45rem;
        font-weight: 700;
        color: var(--rinde);
        text-decoration: none;
        border-bottom: 1px solid var(--linie);
    }
    .hauptmenue .untermenue { padding-left: 1rem; }
    .hauptmenue .untermenue a {
        font-family: var(--schrift-text);
        font-size: 1.1rem;
        font-weight: 400;
        padding: .5rem 0;
    }
    .hauptmenue a[aria-current="page"] { color: var(--wald); }
    .hauptmenue .menue-anruf {
        display: flex;
        margin-top: 1.5rem;
        padding: .9rem 1.4rem;
        border: 0;
        font-family: var(--schrift-text);
        font-size: 1.2rem;
        color: var(--rinde);
    }
    /* Ohne JavaScript: Menü einfach unter dem Logo zeigen */
    html:not(.js) .kopf-innen { flex-wrap: wrap; }
    html:not(.js) .hauptmenue { width: 100%; }
}

@media (min-width: 1100px) {
    .hauptmenue { order: 0; }
    .menue-liste { display: flex; align-items: center; gap: .25rem; }
    .menue-liste > li { position: relative; }
    .menue-liste > li > a {
        display: block;
        padding: .55rem .8rem;
        border-radius: 999px;
        color: var(--rinde);
        font-weight: 700;
        text-decoration: none;
    }
    .menue-liste > li > a:hover { color: var(--wald); background: var(--moos); }
    .menue-liste > li > a[aria-current="page"] { color: var(--wald); box-shadow: inset 0 -2px 0 var(--wald); border-radius: 0; }

    /* Untermenü „Leistungen“: klappt bei Mauszeiger oder Tastaturfokus auf */
    .untermenue {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 17rem;
        padding: .5rem !important;
        background: var(--papier);
        border: 1px solid var(--linie);
        border-radius: var(--rund);
        box-shadow: var(--schatten-hoch);
        opacity: 0;
        visibility: hidden;
        transform: translateY(6px);
        transition: opacity .18s, transform .18s, visibility .18s;
    }
    .hat-untermenue:hover .untermenue,
    .hat-untermenue:focus-within .untermenue { opacity: 1; visibility: visible; transform: none; }
    .untermenue a {
        display: block;
        padding: .5rem .8rem;
        border-radius: var(--rund-klein);
        color: var(--rinde);
        text-decoration: none;
    }
    .untermenue a:hover, .untermenue a[aria-current="page"] { background: var(--moos); color: var(--wald-tief); }

    .js .menue-knopf { display: none; }
    .marke-zeichen { width: 4.4rem; }
    .marke-name { font-size: 1.85rem; }
    .marke-unten { font-size: 1rem; }
    .kopf-innen { min-height: 5.25rem; }
    .kopf-anruf { width: auto; padding: 0 1.1rem; }
    .kopf-anruf-nummer { display: inline; }
}

@media (max-width: 420px) {
    .marke-zeichen { width: 2.8rem; }
    .marke-name { font-size: 1.3rem; }
    .marke-unten { font-size: .8rem; }
}


/* === 6. Bühne (Startseite) ============================================== */

.buehne {
    position: relative;
    padding: clamp(.75rem, 3vw, 2.5rem) 0 clamp(4.5rem, 9vw, 7rem);
    overflow: hidden;
}

.buehne-raster {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 1.75rem;
    align-items: center;
}

.dachzeile {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .6rem;
    font-weight: 700;
    color: var(--wald);
}
.dachzeile::before {
    content: "";
    width: 1.6rem;
    height: 2px;
    background: var(--holz);
}

/* Überschrift in zwei festen Zeilen */
.buehne-titel {
    margin-bottom: .45em;
    font-size: clamp(3rem, 1.9rem + 5.2vw, 5.6rem);
    font-weight: 800;
    line-height: .96;
    letter-spacing: -.015em;
}
.buehne-titel .zeile { display: block; }
.markiert { color: var(--wald); }

.buehne-einleitung {
    max-width: 34rem;
    font-size: clamp(1.15rem, 1.05rem + .4vw, 1.35rem);
    color: var(--rinde-weich);
}

/* Erreichbarkeit + Ort in einer Zeile */
.buehne-status {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .35rem 1.1rem;
    margin-bottom: 0;
    font-size: 1.02rem;
}
.buehne-ort { display: inline-flex; align-items: center; gap: .3rem; color: var(--rinde-weich); white-space: nowrap; }
.buehne-ort .symbol { width: 1em; height: 1em; color: var(--holz); }

.status {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 700;
    color: var(--zu);
    text-decoration: none;
    white-space: nowrap;
}
.status-offen { color: var(--wald); }
.status-punkt {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: var(--zu);
    box-shadow: 0 0 0 4px rgba(184, 96, 58, .15);
}
.status-offen .status-punkt { background: var(--offen); box-shadow: 0 0 0 4px rgba(58, 154, 67, .18); }

.buehne-knoepfe { margin-top: 1.4rem; }

/* Video-Zusammenschnitt in Blattform */
.buehne-film { position: relative; margin: 0; }
.film {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: #cfd9c3;
    border-radius: var(--blatt-form);
    box-shadow: var(--schatten-hoch);
}
.film-knopf {
    position: absolute;
    right: 1.1rem;
    bottom: 2.9rem;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 253, 248, .88);
    color: var(--rinde);
    cursor: pointer;
}
.film-knopf:hover { background: var(--papier); }
.film-knopf .symbol { width: 1.1rem; height: 1.1rem; }
.film-symbol-abspielen { display: none; }
.film-knopf[aria-pressed="true"] .film-symbol-pause { display: none; }
.film-knopf[aria-pressed="true"] .film-symbol-abspielen { display: block; }
.buehne-film-text {
    margin-top: .6rem;
    padding-left: 1rem;
    font-size: .95rem;
    color: var(--rinde-weich);
}

/* Hügellinie (Deko aus dem Logo) */
.buehne-huegel {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: clamp(70px, 9vw, 120px);
    pointer-events: none;
}
.huegel-linie { fill: none; stroke-linecap: round; }
.huegel-linie-1 { stroke: var(--blatt); stroke-width: 3; }
.huegel-linie-2 { stroke: var(--holz); stroke-width: 2; opacity: .7; }

/* Einmaliger Auftritt beim Laden: Linien zeichnen sich, Text blendet ein */
@keyframes linie-zeichnen { from { stroke-dashoffset: 1700; } to { stroke-dashoffset: 0; } }
@keyframes auftauchen { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.huegel-linie { stroke-dasharray: 1700; animation: linie-zeichnen 2.4s cubic-bezier(.3, .6, .2, 1) .2s both; }
.huegel-linie-2 { animation-delay: .6s; }
.buehne-text > * { animation: auftauchen .7s ease-out both; }
.buehne-text > :nth-child(2) { animation-delay: .08s; }
.buehne-text > :nth-child(3) { animation-delay: .16s; }
.buehne-text > :nth-child(4) { animation-delay: .24s; }
.buehne-text > :nth-child(5) { animation-delay: .32s; }
.buehne-film { animation: auftauchen .9s ease-out .25s both; }

@media (min-width: 940px) {
    .buehne-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4rem); }
    .buehne-film-text { text-align: right; padding-right: 1rem; }
}

/* Handy: Knöpfe im ersten Bildschirm, Video darunter */
@media (max-width: 939px) {
    .buehne-knoepfe .knopf { flex: 1 1 15rem; }
    .film { border-radius: 20px 64px 20px 64px; }
    .film-knopf { right: .7rem; bottom: 2.6rem; }
}


/* === 7. Abschnitte und Spalten ========================================== */

.abschnitt { padding-block: var(--abstand); }
.abschnitt-knapp { padding-block: 0 calc(var(--abstand) * .7); }
.abschnitt-ohne-oben { padding-top: 0; }
.abschnitt-sand { background: var(--sand); }
.abschnitt-moos { background: var(--moos); }

.abschnitt-kopf { max-width: 44rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.abschnitt-kopf p { color: var(--rinde-weich); font-size: 1.15rem; }
.abschnitt-kopf-zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem 2rem;
    max-width: none;
}
.abschnitt-kopf-zeile .abschnitt-titel { margin: 0; }
.abschnitt-titel { margin-bottom: .45em; }

.fliesstext { max-width: 40rem; }
.fliesstext > :last-child { margin-bottom: 0; }
.einleitung { font-size: 1.3rem; line-height: 1.5; color: var(--wald-tief); }

.spalten {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
@media (min-width: 900px) {
    .spalten { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .spalten-bild-links > :first-child { order: -1; }
}

.unterschrift {
    margin-top: 1.6rem;
    font-family: var(--schrift-titel);
    font-style: italic;
    font-weight: 700;
    font-size: 1.7rem;
    line-height: 1.1;
    color: var(--signal-text);
}
.unterschrift span {
    display: block;
    margin-top: .3rem;
    font-family: var(--schrift-text);
    font-style: normal;
    font-weight: 400;
    font-size: 1rem;
    color: var(--rinde-weich);
}


/* === 8. Schnellinfos, Kacheln, Projektkarten ============================ */

.schnellinfos {
    display: grid;
    gap: 1rem;
}
@media (min-width: 760px) { .schnellinfos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.infokarte {
    padding: 1.5rem 1.5rem 1.4rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    box-shadow: var(--schatten);
}
.infokarte h2 { font-size: 1.4rem; margin-bottom: .5rem; }
.infokarte p, .infokarte address { margin-bottom: .7rem; }
.infokarte .status { white-space: normal; }
.infokarte-symbol {
    width: 2.6rem;
    height: 2.6rem;
    margin-bottom: .8rem;
    padding: .55rem;
    border-radius: 50%;
    background: var(--moos);
    color: var(--wald);
}
.infokarte-betont { background: var(--moos); border-color: #d3dfc3; }
.infokarte-betont .infokarte-symbol { background: var(--papier); }
.infokarte-nummer {
    font-family: var(--schrift-titel);
    font-size: 1.7rem;
    font-weight: 800;
    text-decoration: none;
}

.zeiten { margin: 0 0 .7rem; }
.zeiten div { display: flex; justify-content: space-between; gap: 1rem; padding: .15rem 0; }
.zeiten dt { white-space: nowrap; }
.zeiten dd { margin: 0; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Leistungen als Fotokacheln (ganze Kachel klickbar) */
.kacheln {
    display: grid;
    gap: clamp(1rem, 2.5vw, 1.5rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 620px) { .kacheln { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.kachel {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
    box-shadow: var(--schatten);
    color: var(--rinde);
    text-decoration: none;
    transition: box-shadow .25s, transform .25s, border-color .25s;
}
.kachel img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .5s ease;
}
.kachel:hover { box-shadow: var(--schatten-hoch); border-color: #cdbf9f; color: var(--rinde); }
.kachel:hover img { transform: scale(1.035); }
.kachel-text { display: flex; flex-direction: column; flex: 1; gap: .35rem; padding: 1.15rem 1.3rem 1.3rem; position: relative; background: var(--papier); }
.kachel-titel { font-family: var(--schrift-titel); font-size: 1.45rem; font-weight: 700; line-height: 1.15; }
.kachel-kurz { color: var(--rinde-weich); font-size: 1.05rem; }
.kachel-mehr { display: inline-flex; align-items: center; gap: .35rem; margin-top: auto; padding-top: .4rem; color: var(--wald); font-weight: 700; }
.kachel:hover .kachel-titel { color: var(--wald); }

/* Projektkarten (Foto + Titel darunter) */
.projektkarten {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(.75rem, 2vw, 1.25rem);
    margin: 0;
    padding: 0;
    list-style: none;
}
@media (min-width: 900px) { .projektkarten { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.projektkarte { display: block; color: var(--rinde); text-decoration: none; }
.projektkarte img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    margin-bottom: .7rem;
    border-radius: var(--rund);
    box-shadow: var(--schatten);
    transition: transform .3s, box-shadow .3s;
}
.projektkarte:hover img { transform: translateY(-3px); box-shadow: var(--schatten-hoch); }
.projektkarte-titel { display: block; font-family: var(--schrift-titel); font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.projektkarte-zusatz { display: block; color: var(--rinde-weich); font-size: 1rem; }
.projektkarte:hover .projektkarte-titel { color: var(--wald); }


/* === 9. Preistafel, Listen, Fotos ======================================= */

.preistafel {
    padding: clamp(1.5rem, 4vw, 2.5rem);
    background: var(--papier);
    border: 1px solid var(--linie);
    border-top: 6px solid var(--holz);
    border-radius: var(--rund);
    box-shadow: var(--schatten);
}
.preise { margin: 1.25rem 0 1.5rem; }
.preis-zeile {
    display: flex;
    align-items: baseline;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--linie);
}
.preis-zeile dt { font-weight: 700; font-size: 1.15rem; }
.preis-zeile dt span { display: block; font-weight: 400; font-size: 1rem; color: var(--rinde-weich); }
.preis-zeile dd {
    margin: 0 0 0 auto;
    font-family: var(--schrift-titel);
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--wald);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.preis-hinweis { font-size: .95rem; color: var(--rinde-weich); }

.hakenliste { list-style: none; padding: 0; }
.hakenliste li { display: flex; gap: .6rem; padding: .25rem 0; }
.hakenliste .symbol { margin-top: .2em; color: var(--wald); width: 1.1em; height: 1.1em; }

/* Kernkompetenzen: zweispaltige Hakenliste */
.kernliste { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: 0 1.5rem; font-size: 1.15rem; }

.punktliste { padding-left: 1.2rem; }
.punktliste li { padding: .15rem 0; }
.punktliste li::marker { color: var(--blatt); }

.fotokarte { margin: 0; }
.fotokarte img {
    width: 100%;
    border-radius: var(--rund-gross);
    box-shadow: var(--schatten-hoch);
}
.fotokarte figcaption { margin-top: .7rem; padding-left: .5rem; font-size: 1rem; color: var(--rinde-weich); }

.hochbild { margin: 0; }
.hochbild img {
    width: 100%;
    max-height: 40rem;
    object-fit: cover;
    border-radius: var(--blatt-form);
    box-shadow: var(--schatten-hoch);
}
@media (max-width: 899px) { .hochbild img { aspect-ratio: 4 / 3; border-radius: 20px 64px 20px 64px; } }


/* === 10. Galerie, Großansicht, Video-Einbettung ========================= */

.galerie {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(46%, 11rem), 1fr));
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}
.galerie a { display: block; overflow: hidden; border-radius: var(--rund-klein); background: var(--sand); }
.galerie img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    transition: transform .4s ease, opacity .2s;
}
.galerie a:hover img { transform: scale(1.05); }

.galerie-mehr { margin-top: .6rem; }
.galerie-mehr > summary {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .6rem;
    padding: .55rem 1.1rem;
    border: 2px solid var(--wald);
    border-radius: 999px;
    color: var(--wald);
    font-weight: 700;
    cursor: pointer;
    list-style: none;
}
.galerie-mehr > summary::-webkit-details-marker { display: none; }
.galerie-mehr > summary:hover { background: var(--wald); color: #fff; }
.galerie-mehr[open] > summary { display: none; }

/* Großansicht (Dialog mit Blättern, siehe js/main.js) */
.grossansicht {
    width: 100vw;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: rgba(28, 22, 17, .94);
    color: #fff;
    overscroll-behavior: contain;
}
.grossansicht::backdrop { background: rgba(28, 22, 17, .6); }
.grossansicht[open] { display: grid; place-items: center; }
.grossansicht-bild {
    max-width: min(94vw, 1400px);
    max-height: 84vh;
    max-height: 84dvh;
    width: auto;
    height: auto;
    border-radius: var(--rund-klein);
}
.grossansicht-zaehler {
    position: absolute;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    margin: 0;
    font-size: 1rem;
    color: #e9e2d6;
}
.grossansicht button {
    position: absolute;
    display: grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 253, 248, .14);
    color: #fff;
    cursor: pointer;
}
.grossansicht button:hover { background: rgba(255, 253, 248, .28); }
.grossansicht button .symbol { width: 1.5rem; height: 1.5rem; }
.grossansicht-schliessen { top: 1rem; right: 1rem; }
.grossansicht-zurueck { left: 1rem; top: 50%; transform: translateY(-50%); }
.grossansicht-weiter { right: 1rem; top: 50%; transform: translateY(-50%); }

/* YouTube/Karte erst nach Klick (Zwei-Klick-Einbindung) */
.einbettung {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--rund);
    background: var(--rinde);
    box-shadow: var(--schatten);
}
.einbettung iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.einbettung-hintergrund {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .72;
}
.einbettung-knopf {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 3.25rem;
    padding: .6rem 1.4rem;
    border: 0;
    border-radius: 999px;
    background: var(--signal);
    color: var(--rinde);
    font: 700 1.1rem/1.2 var(--schrift-text);
    cursor: pointer;
    box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6);
}
.einbettung-knopf:hover { background: var(--signal-tief); }
.einbettung-hinweis {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: 1.6rem 1rem .7rem;
    background: linear-gradient(transparent, rgba(28, 22, 17, .85));
    color: #f3ede3;
    font-size: .9rem;
    line-height: 1.4;
}
.einbettung-hinweis a { color: #fff; }
.einbettung.geladen .einbettung-hinweis { display: none; }
@media (max-width: 520px) { .einbettung-hinweis { font-size: .8rem; padding-top: 1rem; } }


/* === 11. Unterseiten ===================================================== */

.seitenkopf {
    padding: clamp(1.5rem, 4vw, 3rem) 0 clamp(2rem, 5vw, 3.5rem);
    border-bottom: 1px solid var(--linie);
}
.seitenkopf h1 { margin-bottom: .35em; }
.seitenkopf-unterzeile { max-width: 44rem; font-size: 1.25rem; color: var(--rinde-weich); margin-bottom: 0; }
.seitenkopf-zusatz { max-width: 44rem; margin: .9rem 0 0; font-size: 1.05rem; color: var(--rinde-weich); }
.seitenkopf .knopfreihe { margin-top: 1.4rem; }

.brotkrumen {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1rem;
    font-size: 1rem;
    color: var(--rinde-weich);
}
.brotkrumen a { color: var(--rinde-weich); }

/* Seitenkopf mit Foto (Leistungsseiten) */
.seitenkopf-raster { display: grid; gap: 2rem; align-items: center; }
.seitenkopf-raster img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 20px 64px 20px 64px;
    box-shadow: var(--schatten-hoch);
}
@media (min-width: 900px) { .seitenkopf-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 4rem; } }

/* Ein Thema auf einer Seite (z. B. Terrassenbau auf „Garten- & Landschaftsbau“) */
.thema + .thema { margin-top: var(--abstand); padding-top: var(--abstand); border-top: 1px solid var(--linie); }
.thema-kopf { max-width: 44rem; margin-bottom: 1.5rem; }
.thema-kopf > :last-child { margin-bottom: 0; }
.thema-video { max-width: 52rem; margin-top: 1.5rem; }

/* Sprungmarken-Leiste (Inhaltsübersicht auf langen Seiten) */
.sprungleiste {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 1.5rem 0 0;
    padding: 0;
    list-style: none;
}
.sprungleiste a {
    display: inline-block;
    padding: .35rem .95rem;
    border: 1px solid var(--linie);
    border-radius: 999px;
    background: var(--papier);
    color: var(--rinde);
    font-size: 1rem;
    text-decoration: none;
}
.sprungleiste a:hover { border-color: var(--wald); color: var(--wald); }

/* Projekte: Übersicht und einzelne Projekte */
.projekt { scroll-margin-top: calc(var(--kopf-hoehe) + 1rem); }
.projekt-merkmale {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    margin: -.2rem 0 1rem;
    padding: 0;
    list-style: none;
    color: var(--rinde-weich);
    font-size: 1rem;
}
.projekt-merkmale li { display: inline-flex; align-items: center; gap: .35rem; }
.projekt-merkmale .symbol { width: 1em; height: 1em; color: var(--holz); }
.projekt-raster { display: grid; gap: 1.25rem; }
@media (min-width: 1000px) {
    .projekt-raster-mit-video { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

.gruppen-titel {
    display: flex;
    align-items: center;
    gap: .9rem;
    margin: 0 0 1.25rem;
}
.gruppen-titel::after { content: ""; flex: 1; height: 1px; background: var(--linie); }
.thema-video + .gruppen-titel { margin-top: clamp(2rem, 5vw, 3rem); }

/* Downloads (z. B. PDF-Preisliste) */
.download {
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: .8rem 1.2rem;
    border: 1px solid var(--linie);
    border-radius: var(--rund-klein);
    background: var(--papier);
    color: var(--rinde);
    font-weight: 700;
    text-decoration: none;
}
.download .symbol { color: var(--wald); width: 1.5rem; height: 1.5rem; }
.download small { display: block; font-weight: 400; color: var(--rinde-weich); }
.download:hover { border-color: var(--wald); color: var(--wald-tief); }


/* === 12. Kontakt und Formular =========================================== */

.kontakt-raster { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 960px) { .kontakt-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }

.formular-karte {
    padding: clamp(1.4rem, 4vw, 2.5rem);
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--rund-gross);
    box-shadow: var(--schatten);
}
.formular-karte h2 { font-size: clamp(1.6rem, 1.3rem + 1vw, 2.1rem); }

.feld { display: flex; flex-direction: column; gap: .35rem; margin-bottom: 1.1rem; }
.feld label { font-weight: 700; }
.feld-zusatz { font-weight: 400; color: var(--rinde-weich); }
.feld-reihe { display: grid; gap: 0 1rem; }
@media (min-width: 620px) { .feld-reihe { grid-template-columns: 1fr 1fr; } }

.feld input,
.feld select,
.feld textarea {
    width: 100%;
    min-height: 3rem;
    padding: .65rem .9rem;
    border: 2px solid var(--linie);
    border-radius: var(--rund-klein);
    background: #fff;
    color: var(--rinde);
    font: inherit;
    font-size: 1.1rem;
}
.feld textarea { resize: vertical; min-height: 8rem; }
.feld input:focus, .feld select:focus, .feld textarea:focus { outline: none; border-color: var(--wald); box-shadow: 0 0 0 3px rgba(47, 107, 58, .18); }

.feld-haken { flex-direction: row; align-items: flex-start; gap: .7rem; }
.feld-haken input { width: 1.35rem; min-height: 0; height: 1.35rem; margin-top: .2rem; accent-color: var(--wald); flex: none; }
.feld-haken label { font-weight: 400; font-size: 1rem; }

/* Falle für Spam-Programme: für Menschen unsichtbar */
.feld-falle { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.meldung { margin: 0 0 1.25rem; padding: 1rem 1.2rem; border-radius: var(--rund-klein); }
.meldung p { margin: .3rem 0 0; }
.meldung-fehler { background: #fbeae4; color: var(--fehler); border: 1px solid #efc2b3; font-weight: 700; }
.meldung-info { background: #fdf1df; color: #6a3f08; border: 1px solid #f2d3a6; }
.meldung-erfolg { background: var(--moos); color: var(--wald-tief); border: 1px solid #c9d9b6; }

.kontaktdaten { display: grid; gap: 1rem; }
.anrufkarte {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.3rem 1.4rem;
    border-radius: var(--rund);
    background: var(--signal);
    color: var(--rinde);
    text-decoration: none;
    box-shadow: var(--schatten);
}
.anrufkarte:hover { background: var(--signal-tief); color: var(--rinde); }
.anrufkarte .symbol { width: 2.2rem; height: 2.2rem; }
.anrufkarte-titel { display: block; font-weight: 700; }
.anrufkarte-nummer { display: block; font-family: var(--schrift-titel); font-size: 1.8rem; font-weight: 800; line-height: 1.1; white-space: nowrap; }

.kontaktzeile {
    display: flex;
    gap: 1rem;
    padding: 1.2rem 1.3rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
}
.kontaktzeile > .symbol { width: 1.6rem; height: 1.6rem; margin-top: .15rem; color: var(--wald); }
.kontaktzeile h2 { font-size: 1.25rem; margin-bottom: .3rem; }
.kontaktzeile p, .kontaktzeile address, .kontaktzeile .zeiten { margin-bottom: .3rem; }
.kontaktzeile > div { flex: 1; min-width: 0; }

.einbettung-karte { aspect-ratio: 16 / 7; }
@media (max-width: 700px) { .einbettung-karte { aspect-ratio: 4 / 3; } }


/* === 13. Rechtstexte, Fehlerseite ======================================= */

.rechtstext h2 { font-size: 1.5rem; margin-top: 2.2rem; }
.rechtstext h3 { font-size: 1.2rem; margin-top: 1.6rem; }
.rechtstext p, .rechtstext li { overflow-wrap: anywhere; hyphens: auto; }

.inhaltsverzeichnis {
    margin-bottom: 2rem;
    padding: 1.2rem 1.5rem;
    background: var(--papier);
    border: 1px solid var(--linie);
    border-radius: var(--rund);
}
.inhaltsverzeichnis h2 { margin-top: 0; font-size: 1.25rem; }
.inhaltsverzeichnis ol { margin: 0; padding-left: 1.3rem; }

.fehlerseite { text-align: center; }
.fehlerseite .symbol { width: 4rem; height: 4rem; margin: 0 auto 1rem; color: var(--wald); }
.fehlerseite .knopfreihe { justify-content: center; }


/* === 14. Aufruf und Seitenfuß =========================================== */

.aufruf { background: var(--moos); }
.aufruf-innen { display: grid; gap: 1.5rem; align-items: center; }
.aufruf-titel { margin-bottom: .4em; }
.aufruf p { max-width: 38rem; font-size: 1.15rem; color: var(--rinde-weich); margin-bottom: 0; }
.aufruf .knopfreihe { margin-top: 0; }
@media (min-width: 960px) { .aufruf-innen { grid-template-columns: minmax(0, 1fr) auto; gap: 3rem; } }

/* Der letzte Abschnitt bekommt unten Platz für die Hügel des Seitenfußes */
main > section:last-child { padding-bottom: calc(var(--abstand) + clamp(40px, 6vw, 90px)); }

.fuss { position: relative; color: #e7eedf; }
.fuss-huegel {
    display: block;
    width: 100%;
    height: clamp(40px, 6vw, 90px);
    margin-top: calc(-1 * clamp(40px, 6vw, 90px));
    position: relative;
}
.fuss-huegel-hinten { fill: var(--wald); }
.fuss-huegel-vorne { fill: var(--wald-tief); }
.fuss-innen { background: var(--wald-tief); padding: clamp(2rem, 5vw, 3.5rem) 0 1.5rem; }

.fuss-raster { display: grid; gap: 2.25rem; }
@media (min-width: 700px) { .fuss-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) { .fuss-raster { grid-template-columns: 1.35fr 1fr 1fr .9fr; } }

.fuss h2 { color: #fff; font-size: 1.3rem; margin-bottom: .7rem; }
.fuss a { color: #fff; }
.fuss a:hover { color: #f6c48f; }
.fuss-marke img { width: 4.5rem; margin-bottom: .8rem; padding: .4rem; background: var(--leinen); border-radius: var(--rund-klein); }
.fuss-liste { list-style: none; padding: 0; margin: 0; }
.fuss-liste li { padding: .2rem 0; }
.fuss-liste a { text-decoration: none; }
.fuss-liste a:hover { text-decoration: underline; }
.fuss-sozial a { display: inline-flex; align-items: center; gap: .55rem; }
.fuss-hinweis { font-size: 1rem; color: #c9d6bf; }
.fuss .zeiten dd { color: #fff; }

.fuss-unten {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: .6rem 2rem;
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(231, 238, 223, .2);
    font-size: 1rem;
    color: #c9d6bf;
}
.fuss-unten p { margin: 0; }
.fuss-unten nav { display: flex; flex-wrap: wrap; gap: 1.2rem; }


/* === 15. Bewegung reduzieren ============================================ */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0s !important;
        transition-duration: .01ms !important;
    }
    .huegel-linie { stroke-dasharray: none; }
}