/* ==========================================================================
   CB-Forstbetrieb — Stylesheet

   Skalierung: Die Grundschrift folgt 0,55vw + 9,4px, begrenzt auf 16 bis
   30 px — etwa 16 px bei 1280, 20 px bei 1920, 23 px bei 2560 und 30 px ab
   rund 3750 px Breite. Alle Maße stehen in rem und folgen automatisch.
   Überschrift und Claim sind bewusst vw-gebunden, damit sie auf sehr
   großen Schirmen nicht aus der Spalte laufen.
   ========================================================================== */

/* ==========================================================================
   Schriftarten

   Stehen bewusst hier und nicht mehr in einer eigenen fonts.css: der Browser
   erfährt so eine Runde früher, welche Schriftdateien er braucht.

   Lokal eingebunden — es gehen keine Anfragen an fremde Server, damit
   entfällt die Übermittlung der Besucher-IP an Google.

   Eingebunden sind nur die Schnitte, die die Seite tatsächlich nutzt:
   Inter in 400/500/600/700, Source Serif 4 in 700 (h1 und h2).
   ========================================================================== */

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

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

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

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter/inter-v20-latin-700.woff2') format('woff2');
}

@font-face {
  font-family: 'Source Serif 4';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/source-serif-4/source-serif-4-v14-latin-700.woff2') format('woff2');
}

/* ==========================================================================
   Grundlagen
   ========================================================================== */

:root {
  --schwarz:   #0B0B0B;
  --weiss:     #FFFFFF;
  --papier:    #F7F7F5;
  --grau:      #6B6B6B;
  --linie:     rgba(11, 11, 11, 0.12);
  --wald:      #1B2A1E;
  --nacht:     #111111;   /* Fußzeile */
  --gruen:     #005B35;   /* Akzent / Hover */
  --gruen-hell:#2F6B3A;   /* Logo */

  --font:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;

  --wrap: 90vw;   /* ab 1600 px etwas schmaler, siehe unten */
  --gutter: 1.25rem;
  --section-y: clamp(3.5rem, 8vw, 6.5rem);
}

/* Grundschriftgröße wächst mit dem Fenster — Basis der gesamten Skalierung */
html {
  font-size: clamp(16px, 0.55vw + 9.4px, 30px);
}

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--weiss);
  color: var(--schwarz);
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
/* picture ist nur Hülle für die Auswahl Desktop/Mobile; für das Layout
   zählt allein das img darin. */
picture { display: contents; }
a { color: inherit; }

h1, h2 { font-family: var(--serif); }

h1, h2, h3 {
  margin: 0;
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.025em;
}
h1 { font-size: clamp(2.4rem, 5.4vw, 10rem); }
h2 { font-size: clamp(1.7rem, 2.1vw, 4rem); line-height: 1.35; }
h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); letter-spacing: -0.01em; }

p { margin: 0 0 1.15em; max-width: 62ch; }
p:last-child { margin-bottom: 0; }
strong { font-weight: 700; }

.wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; }

.skip { position: absolute; left: -9999px; background: var(--schwarz); color: #fff; padding: .75rem 1.25rem; z-index: 999; }
.skip:focus { left: 1rem; top: 1rem; }
:focus-visible { outline: 3px solid var(--gruen); outline-offset: 3px; }

/* --- Button --------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 1.5rem;
  background: var(--gruen);
  color: var(--weiss);
  border: 1px solid var(--gruen);
  font: inherit;
  font-weight: 500;
  text-decoration: none;
  padding: 1rem 1.75rem;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.btn svg { flex: 0 0 auto; width: 2.5rem; height: .75rem; }
.btn:hover,
.btn:focus-visible {
  background: var(--weiss);
  border-color: var(--gruen);
  color: var(--gruen);
}

/* Zweitrangige Aktion neben einem normalen Button */
.btn--ghost { background: transparent; color: var(--schwarz); border-color: var(--schwarz); }
.btn--ghost:hover,
.btn--ghost:focus-visible { background: var(--gruen); border-color: var(--gruen); color: var(--weiss); }

.btn-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem; max-width: none; }

/* --- Kopf / Hero ---------------------------------------------------------- */

/* Alles mittig untereinander: Logo, Firmenname, Claim, Kontaktdaten. */
.hero { position: relative; padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem); }

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero h1 {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin-bottom: clamp(1.5rem, 3vw, 3rem);
}

.hero__logo {
  height: clamp(7rem, 13vw, 20rem);
  width: auto;
  margin: 0 auto clamp(1.5rem, 3vw, 3rem);
}

.hero__claim {
  font-family: var(--serif);
  font-size: clamp(1.7rem, 2.1vw, 4rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: center;
  max-width: none;
  margin: 0 auto clamp(2rem, 4vw, 4rem);
}


.hero__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  width: fit-content;
  text-align: left;
}
.hero__list li { margin-bottom: clamp(1rem, 1.17vw, 2.9rem); }
.hero__list li:last-child { margin-bottom: 0; }
.hero__list a {
  display: inline-flex;
  align-items: center;
  gap: clamp(.9rem, 1.08vw, 2.7rem);
  font-size: clamp(1rem, 1.125vw, 2.7rem);
  font-weight: 500;
  text-decoration: none;
}
.hero__list a:hover { color: var(--gruen); }
.hero__list a:hover .hero__ico { color: var(--gruen); }

.hero__ico {
  flex: 0 0 auto;
  width: clamp(1.45rem, 1.85vw, 4.5rem);
  height: clamp(1.45rem, 1.85vw, 4.5rem);
  display: grid;
  place-items: center;
  color: var(--schwarz);
  transition: color .18s ease;
}
.hero__ico svg { width: 100%; height: 100%; display: block; }


@media (max-width: 599px) {
  .hero__logo { height: 10.5rem; }
}


@media (orientation: landscape) and (min-width: 1024px) {
  .hero__logo {
    height: clamp(3.5rem, 8.5vw, 10rem);
    margin-bottom: clamp(1rem, 1.6vw, 2rem);
  }

  /* Abstände etwa 40 % enger als auf Handy und Tablet */
  .hero h1 { margin-bottom: clamp(1rem, 1.8vw, 2rem); }
  .hero__claim { margin-bottom: clamp(1.5rem, 2.4vw, 2.75rem); }
  .hero__list li { margin-bottom: clamp(.75rem, .8vw, 1.75rem); }
  .hero__list li:last-child { margin-bottom: 0; }
}

/* Tablets und andere hochkant gehaltene Bildschirme ab 600 px Breite:
   Die Breite ist hier klein, die Höhe aber groß. Die vw-Werte oben sind auf
   Querformat abgestimmt und fallen hier zu klein aus, deshalb wird der
   Kopfbereich etwa um die Hälfte größer gesetzt. Handys bleiben unberührt. */
@media (orientation: portrait) and (min-width: 600px) {
  .hero h1 { font-size: 8vw; }
  .hero__logo { height: 22vw; }
  .hero__claim { font-size: 3.6vw; }
  .hero__list li { margin-bottom: 1.8vw; }
  .hero__list li:last-child { margin-bottom: 0; }
  .hero__list a { font-size: 2.3vw; gap: 1.6vw; }
  .hero__ico { width: 3vw; height: 3vw; }
}


/* --- Dunkle Sektion mit Waldbild ----------------------------------------- */

.leistungen {
  position: relative;
  color: var(--weiss);
  background: var(--wald);
  padding: clamp(4rem, 9vw, 7rem) 0;
  overflow: hidden;
}
.leistungen__bg {
  position: absolute;
  inset: 0;
  background-image: url("/assets/img/desktop/background_img.webp");
  background-size: cover;
  background-position: center;
}
/* Handys und Tablets bekommen eine kleinere Fassung. Unter der dunklen
   Abdeckung fällt die geringere Auflösung nicht auf. */
@media (max-width: 1024px) {
  .leistungen__bg { background-image: url("/assets/img/mobile/background_img.webp"); }
}
.leistungen__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(9, 16, 11, .7);
}
.leistungen .wrap { position: relative; z-index: 1; text-align: center; }
.leistungen h2 { margin-bottom: 2.25rem; }
.leistungen p {
  max-width: 52ch;
  margin-inline: auto;
  color: rgba(255, 255, 255, .92);
}

/* --- Kontaktaufruf -------------------------------------------------------- */

/* Bewusst großzügig abgesetzt, damit der Block zwischen Waldsektion
   und Bildergalerie als eigene Einheit gelesen wird. */
.aufruf {
  position: relative;
  padding: clamp(4rem, 9vw, 7rem) 0;
  text-align: center;
}

/* Rund 3,5-fache Buttonhöhe */
.aufruf__logo {
  height: 12.25rem;
  width: auto;
  margin: 0 auto 2rem;
}
.aufruf h2 { margin-bottom: 1.5rem; max-width: 22ch; margin-inline: auto; }
.aufruf p {
  max-width: 48ch;
  margin-inline: auto;
  margin-bottom: 2.5rem;
}

/* Tablets hochkant: Button etwa doppelt so groß. Innenabstand, Lücke und
   Pfeil sind hier in em angegeben, damit sie mit der Schrift mitwachsen. */
@media (orientation: portrait) and (min-width: 600px) {
  .aufruf .btn {
    font-size: 3vw;
    padding: 1em 1.75em;
    gap: 1.5em;
  }
  .aufruf .btn svg { width: 2.5em; height: .75em; }
}

/* --- Bildergalerie -------------------------------------------------------- */

.galerie { padding: var(--section-y) 0; }

.galerie__head { text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.galerie__head h2 { margin-bottom: 1.25rem; }
.galerie__head p {
  max-width: 52ch;
  margin-inline: auto;
}

/* Ein Bild zur Zeit. Die Fensterhöhe begrenzt die Rahmenbreite, damit
   das 16:9-Bild auf breiten Schirmen nicht zu hoch wird. */
/* touch-action: manipulation schaltet das Zoomen per Doppeltipp ab, wenn
   jemand schnell hintereinander auf Pfeile, Punkte oder Bild tippt.
   Zoomen mit zwei Fingern bleibt erlaubt, das brauchen Menschen mit
   Sehschwäche. Gilt auch für alle Kindelemente. */
.slider__frame,
.slider__dots {
  touch-action: manipulation;
}

.slider__frame {
  position: relative;
  max-width: min(100%, calc(57.5svh * 16 / 9));
  margin-inline: auto;
}
.slider__viewport { overflow: hidden; }
.slider__track { display: flex; transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
@media (prefers-reduced-motion: reduce) { .slider__track { transition: none; } }

.slider__slide { flex: 0 0 100%; margin: 0; }
/* Heller Platzhalter, solange das Bild noch lädt */
.slider__slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--papier); }

.slider__btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: var(--weiss);
  color: var(--schwarz);
  border: 0;
  cursor: pointer;
  transition: background .18s ease, color .18s ease;
}
.slider__btn svg { width: 1.15rem; height: 1.15rem; }
/* Hover nur bei Geräten mit echter Maus. Auf Touchgeräten bleibt :hover
   nach dem Antippen sonst „kleben“, bis woanders hingetippt wird. */
@media (hover: hover) and (pointer: fine) {
  .slider__btn:hover { background: var(--gruen); color: var(--weiss); }
}
/* Tastaturbedienung: gleiche Hervorhebung wie beim Hover */
.slider__btn:focus-visible { background: var(--gruen); color: var(--weiss); }
.slider__btn--prev { left: .75rem; }
.slider__btn--next { right: .75rem; }

/* Sichtbar bleibt ein kleiner Punkt, die Klickfläche ist aber mindestens
   24 × 24 px groß (WCAG 2.5.8), damit man ihn auf dem Handy trifft. */
.slider__dots { display: flex; justify-content: center; margin-top: 1rem; }
.slider__dots button {
  width: 1.5rem;
  height: 1.5rem;
  min-width: 24px;
  min-height: 24px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.slider__dots button::before {
  content: "";
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: rgba(11, 11, 11, .22);
}
.slider__dots button[aria-current="true"]::before { background: var(--gruen); }

/* --- Einheitliche Größen der Abschnitte ---------------------------------

   Leistungen, Kontaktaufruf und Galerie: Überschriften und Einleitungstexte
   sind überall gleich groß. Änderungen nur hier vornehmen. */
.leistungen h2,
.aufruf h2,
.galerie__head h2 {
  font-size: clamp(2.4rem, 4.2vw, 8rem);
}
.leistungen p,
.aufruf p,
.galerie__head p {
  font-size: clamp(1.35rem, 3.1vw, 2.7rem);
}

/* Desktop und Tablets im Querformat: Die Werte oben sind für Handy und
   Tablet hochkant gedacht und fallen auf breiten Schirmen zu groß aus. */
@media (orientation: landscape) and (min-width: 1024px) {
  .leistungen h2,
  .aufruf h2,
  .galerie__head h2 { font-size: clamp(2.4rem, 2.8vw, 6rem); }

  .leistungen p,
  .aufruf p,
  .galerie__head p { font-size: clamp(1.2rem, 1.6vw, 2.4rem); }
}

/* --- Formular ------------------------------------------------------------- */

.form-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 6vw, 4rem); }
@media (min-width: 900px) { .form-grid { grid-template-columns: 1.15fr .85fr; } }

.field { margin-bottom: 1.35rem; }
.field label { display: block; font-size: .875rem; font-weight: 600; margin-bottom: .45rem; }
.field input, .field textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--schwarz);
  background: var(--weiss);
  /* Kräftiger Rahmen, damit die Felder auf weißem Grund klar erkennbar sind */
  border: 3px solid rgba(11, 11, 11, .28);
  border-radius: 0;
  padding: .85rem 1rem;
}
/* Der grüne Fokusrahmen kommt von der allgemeinen :focus-visible-Regel */
.field input:focus, .field textarea:focus { border-color: var(--schwarz); }
.field textarea { min-height: 10rem; resize: vertical; }

.consent { display: flex; align-items: flex-start; gap: .75rem; font-size: .875rem; color: var(--grau); margin-bottom: 1.75rem; }
.consent input {
  flex: 0 0 auto;
  width: 1.625rem;
  height: 1.625rem;
  margin: 0;
  accent-color: var(--gruen);
  cursor: pointer;
}
.consent a { color: var(--schwarz); }

.form-error { display: none; margin: .5rem 0 0; font-size: .9375rem; color: #b3261e; }
.form-status { margin-top: 1.25rem; font-size: .9375rem; }

.hp { position: absolute !important; left: -9999px; opacity: 0; pointer-events: none; }

.cf-turnstile { margin-bottom: 1.5rem; }

/* --- Kontaktseite -------------------------------------------------------- */

.kontakt { padding: calc(var(--section-y) / 2) 0 var(--section-y); }
.kontakt__intro { margin-bottom: clamp(2.5rem, 6vw, 4rem); }
.kontakt__lead { margin-top: 1.5rem; }

.kontakt__side h2 {
  font-family: var(--font);
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.08;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
}
.kontakt__address { font-style: normal; line-height: 1.9; margin-bottom: 1.5rem; }
.kontakt__direct { font-weight: 600; line-height: 1.9; }
.kontakt__hint { font-size: .9375rem; color: var(--grau); margin-top: 1.75rem; }
.kontakt__maplink { font-size: .9375rem; margin-top: 1rem; }

/* Die Kontaktseite bekommt eine feste Höchstbreite und eine kleinere
   Überschrift als die Startseite. Sonst laufen Formularfelder und Titel
   auf großen Bildschirmen (Notebook mit 2560 px, 4K) erdrückend breit.
   Zurück-Link und Inhalt nutzen beide .kontakt__wrap, damit ihre linke
   Kante übereinander liegt. */
.kontakt__wrap { width: min(100% - var(--gutter) * 2, 72rem); }

/* Seitenüberschriften der Unterseiten (Kontakt, Impressum, Datenschutz,
   404) sind alle gleich groß und kleiner als die der Startseite. */
.kontakt h1,
.prose h1 { font-size: clamp(2.4rem, 4vw, 7rem); }

/* --- Zurück-Link ---------------------------------------------------------- */

.backlink { font-size: .875rem; font-weight: 600; margin: 0 0 1rem; }
.backlink a { text-decoration: none; }
.backlink--top { padding-top: 2rem; margin: 0; }

/* --- Karte mit Einwilligung ---------------------------------------------- */

.mapbox { margin-top: 2rem; border: 1px solid var(--linie); }
.mapbox__consent { padding: 1.5rem; background: var(--papier); }
.mapbox__consent p { font-size: .875rem; color: var(--grau); margin-bottom: 1rem; }
.mapbox iframe { display: block; width: 100%; height: 22rem; border: 0; }

/* --- Textseiten ----------------------------------------------------------- */

/* Oben nur der halbe Abschnittsabstand: Der Zurück-Link steht direkt
   darüber, ein voller Abstand würde ihn von der Überschrift abreißen. */
.prose { max-width: 68ch; padding: calc(var(--section-y) / 2) 0 var(--section-y); }
/* Die Überschrift darf breiter sein als die Textspalte (68ch). Sonst bricht
   „Datenschutzerklärung“ schon auf dem Desktop an der weichen Trennstelle
   (­) um. Begrenzt wird sie erst durch die Seitenbreite, sodass die
   Trennung nur greift, wenn wirklich der Platz fehlt (Handy). */
.prose h1 {
  margin-bottom: 2rem;
  width: max-content;
  max-width: min(90vw, 100vw - var(--gutter) * 2);
}
.prose h2 { margin: 2.75rem 0 1rem; font-size: clamp(1.25rem, 2.2vw, 1.6rem); }
.prose ul { padding-left: 1.25rem; }
.prose li { margin-bottom: .5rem; }
.prose .btn-row { margin-top: 3rem; }

/* --- Fußzeile ------------------------------------------------------------- */

.site-foot {
  background: var(--nacht);
  color: rgba(255, 255, 255, .88);
  padding: clamp(3rem, 7vw, 4.5rem) 0 2rem;
  font-size: .9375rem;
}
.foot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 2.5rem; margin-bottom: 3rem; }
.site-foot h3 { font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--weiss); margin-bottom: 1rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: .55rem; }
.site-foot a { text-decoration: none; }
.site-foot a:hover { color: var(--weiss); text-decoration: underline; }
.site-foot address { font-style: normal; line-height: 1.75; }
.foot-bottom {
  border-top: 1px solid rgba(255, 255, 255, .25);
  padding-top: 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  font-size: .8125rem;
  color: rgba(255, 255, 255, .7);
}
.foot-bottom--plain { border-top: 0; padding-top: 0; }

/* --- Abschnittshöhe ------------------------------------------------------- */

/* Jeder Abschnitt füllt mindestens die Höhe des Geräts. Weil der Inhalt darin
   zentriert sitzt, entsteht der Abstand bereits durch die Höhe selbst — der
   Innenabstand wird deshalb hier bewusst klein gehalten, sonst addiert sich
   beides und die Abschnitte reißen weit auseinander.
   Steht am Dateiende, damit die Angabe die Abstände der einzelnen
   Abschnitte oben überschreibt. */
@media (min-height: 640px) {
  .hero,
  .leistungen,
  .aufruf {
    min-height: 100vh;
    min-height: 100svh;
    display: grid;
    align-content: center;
    padding-block: clamp(2.5rem, 5vh, 4rem);
  }
}