/* ==========================================================================
   Forst- und Landschaftspflege Nofer – Stylesheet
   Reines CSS, kein Build-Schritt. Farben und Maße stehen oben in :root.
   ========================================================================== */

/* Schriften: Source Serif 4 und Source Sans 3 kommen von Google Fonts (Link im <head> jeder Seite). */

/* --- Design-Variablen --------------------------------------------------- */
:root {
  --fir: #1F3A2D;
  --fir-deep: #14261D;
  --ink: #17251D;
  --paper: #F7F5EF;
  --sage: #E9EEE7;
  --sage-line: #B8C6B6;
  --ph-a: #DCE4DA;
  --muted: #3A4A40;
  --wood: #7A4A22;      /* Akzent auf hellem Grund (Text) */
  --accent: #D1A06A;    /* Akzent auf dunklem Grund */
  --serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sans: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --gutter: 48px;
  --section-pad: 112px;
}

/* --- Basis -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 16px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.container { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
.skip {
  position: absolute; left: -9999px; top: 8px;
}
.skip:focus {
  left: 8px; z-index: 100; background: #fff; color: var(--ink);
  padding: 10px 16px; border-radius: 4px;
}
.icon {
  width: 1em; height: 1em; flex: none;
  fill: none; stroke: currentColor; stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

/* --- Buttons und Links -------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 56px; padding: 0 30px; border-radius: 4px;
  font-weight: 700; font-size: 18px; transition: filter .15s;
}
.btn:hover { filter: brightness(1.07); }
.btn .icon { font-size: 19px; stroke-width: 2.2; }
.btn-accent { background: var(--accent); color: var(--fir-deep); }
.link-more { font-weight: 600; font-size: 17px; }
.link-more:hover { text-decoration: underline; text-underline-offset: 4px; }

/* --- Kopfbereich -------------------------------------------------------- */
.site-header { position: relative; z-index: 3; color: var(--paper); }
.site-header--bar { background: var(--fir); }
.header-inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 16px 40px; padding-block: 28px;
}
.site-header--bar .header-inner { padding-block: 24px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand .icon { font-size: 34px; color: var(--accent); stroke-width: 1.8; }
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-title { font-family: var(--serif); font-weight: 600; font-size: 21px; }
.brand-sub {
  font-size: 12px; letter-spacing: .16em; text-transform: uppercase;
  opacity: .72; margin-top: 4px;
}
.brand-title--short, .brand-sub--short { display: none; }

.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 34px; font-size: 16px; font-weight: 500; }
.nav a:not(.nav-phone):hover { text-decoration: underline; text-underline-offset: 6px; }
.nav-phone {
  display: flex; align-items: center; gap: 8px; padding: 10px 18px;
  border: 1px solid rgba(247, 245, 239, .45); border-radius: 4px; font-weight: 600;
}
.nav-phone .icon { font-size: 16px; }
.nav-back { display: flex; align-items: center; min-height: 44px; font-weight: 600; }

.menu-btn {
  display: none; width: 48px; height: 48px; align-items: center; justify-content: center;
  border: 1px solid rgba(247, 245, 239, .45); border-radius: 4px;
  background: transparent; color: var(--paper); cursor: pointer;
}
.menu-btn .icon { font-size: 22px; }

/* --- Hero mit Tannen-Silhouetten --------------------------------------- */
.hero {
  position: relative; overflow: hidden; min-height: 720px; color: var(--paper);
  background: linear-gradient(180deg, #1A2F23 0%, #284233 55%, #43614D 100%);
}
.hero-body { position: relative; z-index: 2; padding-block: 88px 280px; }
.hero-copy { max-width: 800px; }
.eyebrow {
  font-size: 14px; font-weight: 600; letter-spacing: .18em;
  text-transform: uppercase; color: var(--wood);
}
.on-dark .eyebrow, .hero .eyebrow { color: var(--accent); }
.hero h1 {
  margin-top: 22px; font-family: var(--serif); font-weight: 600;
  font-size: clamp(44px, 5.8vw, 80px); line-height: 1.06; letter-spacing: -.01em;
}
.hero .lead { margin-top: 28px; max-width: 620px; font-size: 21px; line-height: 1.6; opacity: .9; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 40px; }

/* Drei Ebenen aus wiederholten Tannen (SVG als Hintergrundbild) */
.trees { position: absolute; inset: auto 0 0 0; z-index: 1; pointer-events: none; }
.tree { position: absolute; left: 0; right: 0; bottom: 0; background-repeat: no-repeat, repeat-x; }
.tree--back {
  height: 248px; background-color: transparent;
  background-image:
    linear-gradient(#4F6E5A, #4F6E5A),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='140' viewBox='0 0 60 140'%3E%3Cpath d='M30 6 L43 50 L36 50 L49 92 L40 92 L55 134 L5 134 L20 92 L11 92 L24 50 L17 50 Z' fill='%234F6E5A'/%3E%3C/svg%3E");
  background-position: bottom, 24px 0;
  background-size: 100% 30px, auto 224px;
}
.tree--mid {
  height: 192px;
  background-image:
    linear-gradient(#2F4D3C, #2F4D3C),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='140' viewBox='0 0 60 140'%3E%3Cpath d='M30 6 L43 50 L36 50 L49 92 L40 92 L55 134 L5 134 L20 92 L11 92 L24 50 L17 50 Z' fill='%232F4D3C'/%3E%3C/svg%3E");
  background-position: bottom, 0 0;
  background-size: 100% 30px, auto 168px;
}
.tree--front {
  height: 150px;
  background-image:
    linear-gradient(#152A1F, #152A1F),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='140' viewBox='0 0 60 140'%3E%3Cpath d='M30 6 L43 50 L36 50 L49 92 L40 92 L55 134 L5 134 L20 92 L11 92 L24 50 L17 50 Z' fill='%23152A1F'/%3E%3C/svg%3E");
  background-position: bottom, 17px 0;
  background-size: 100% 30px, auto 126px;
}

/* --- Abschnitte --------------------------------------------------------- */
.section { padding-block: var(--section-pad); }
.section--sage { background: var(--sage); }
.h2 {
  margin-top: 16px; font-family: var(--serif); font-weight: 600;
  font-size: 46px; line-height: 1.12;
}

/* Fotos (Hintergrund ist nur die Farbe, die beim Laden kurz sichtbar ist) */
.photo { position: relative; border-radius: 4px; overflow: hidden; background: var(--ph-a); }
.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Leistungen */
.services {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px; margin-top: 56px;
}
.service .photo { aspect-ratio: 4 / 3; }
.service h3 {
  margin-top: 24px; font-family: var(--serif); font-weight: 600;
  font-size: 28px; line-height: 1.2;
}

/* Galerie */
.gallery {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 20px; margin-top: 48px;
}
.gallery .photo { height: 300px; }

/* Kontakt */
.contact { background: var(--fir); color: var(--paper); }
.contact-inner {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: 56px;
}
.contact-main { flex: 1 1 520px; min-width: 0; }
.phone-xl {
  display: flex; align-items: center; gap: 20px; margin-top: 36px;
  font-family: var(--serif); font-weight: 600;
  font-size: clamp(44px, 6vw, 84px); line-height: 1; color: var(--accent);
}
.phone-xl .icon { font-size: .52em; stroke-width: 1.6; }
.mail-link {
  display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; min-height: 44px;
  font-size: 22px; font-weight: 600; color: var(--paper);
  text-decoration: underline; text-decoration-color: rgba(247, 245, 239, .4);
  text-underline-offset: 5px; overflow-wrap: anywhere;
}
.mail-link:hover, .mail-link:focus-visible { text-decoration-color: var(--accent); }
.mail-link .icon { font-size: 24px; color: var(--accent); }
.contact-address {
  flex: 0 1 320px; min-width: 240px; padding-left: 28px;
  border-left: 1px solid rgba(247, 245, 239, .28);
  font-size: 19px; line-height: 1.55; font-style: normal;
}
.contact-address strong { font-weight: 600; }
.contact-address span { display: block; opacity: .88; }

/* Fußbereich */
.site-footer { background: var(--fir-deep); color: var(--paper); padding-block: 32px; font-size: 15px; }
.footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 40px; }
.footer-inner p { opacity: .72; }
.footer-links { display: flex; gap: 28px; }
.footer-links a:hover { text-decoration: underline; text-underline-offset: 4px; }

/* Rechtliche Seiten (Impressum, Datenschutz, 404) */
.legal { padding-block: 88px 112px; }
.legal-inner { max-width: 760px; margin-inline: auto; }
.legal h1 { font-family: var(--serif); font-weight: 600; font-size: clamp(40px, 5vw, 56px); line-height: 1.1; }
.legal h2 { margin-top: 48px; font-family: var(--serif); font-weight: 600; font-size: 24px; line-height: 1.25; }
.legal h1 + h2 { margin-top: 56px; }
.legal p { margin-top: 14px; font-size: 18px; line-height: 1.7; }
.legal h1 + p { margin-top: 28px; }
.legal ul { margin-top: 14px; padding-left: 24px; list-style: disc; }
.legal li { font-size: 18px; line-height: 1.7; }
.legal a:not(.btn) { color: var(--wood); text-decoration: underline; text-underline-offset: 3px; }
.legal .btn { margin-top: 32px; background: var(--fir); color: var(--paper); }

/* ==========================================================================
   Handy
   ========================================================================== */
@media (max-width: 760px) {
  :root { --gutter: 20px; --section-pad: 64px; }

  .header-inner { flex-wrap: nowrap; padding-block: 16px; }
  .site-header--bar .header-inner { padding-block: 16px; }
  .brand { gap: 10px; }
  .brand .icon { font-size: 30px; }
  .brand-title--long, .brand-sub--long { display: none; }
  .brand-title--short, .brand-sub--short { display: block; }
  .brand-title { font-size: 17px; }
  .brand-sub { font-size: 11px; letter-spacing: .12em; margin-top: 3px; }

  .menu-btn { display: flex; }
  .nav {
    display: none; position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 8px var(--gutter) 20px; background: var(--fir-deep);
  }
  .nav.is-open { display: flex; }
  .nav a { display: flex; align-items: center; min-height: 48px; font-size: 17px; }
  .nav-phone { justify-content: center; margin-top: 8px; }
  /* Unterseiten: nur der Zurück-Link, kein Menü-Knopf */
  .site-header--bar .nav {
    display: flex; position: static; flex-direction: row; padding: 0; background: none;
  }

  .hero { min-height: 640px; }
  .hero-body { padding-block: 36px 190px; }
  .hero h1 { font-size: 42px; line-height: 1.08; margin-top: 16px; }
  .hero .eyebrow { font-size: 12px; letter-spacing: .16em; }
  .hero .lead { font-size: 18px; line-height: 1.55; margin-top: 20px; }
  .hero-actions { margin-top: 28px; }
  .hero-actions .btn { width: 100%; }
  .hero-actions .link-more { display: none; }

  .tree--back  { height: 160px; background-position: bottom, 10px 0; background-size: 100% 22px, auto 144px; }
  .tree--mid   { height: 130px; background-size: 100% 22px, auto 112px; }
  .tree--front { height: 100px; background-position: bottom, 14px 0; background-size: 100% 22px, auto 84px; }

  .eyebrow { font-size: 12px; letter-spacing: .16em; }
  .h2 { font-size: 34px; line-height: 1.15; margin-top: 12px; }

  .services { grid-template-columns: 1fr; gap: 32px; margin-top: 32px; }
  .service .photo { aspect-ratio: 16 / 10; }
  .service h3 { margin-top: 16px; font-size: 26px; }

  .gallery { grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 28px; }
  .gallery .photo { height: 160px; }
  .gallery .photo:first-child { grid-column: 1 / -1; height: 220px; }

  .contact-inner { gap: 32px; }
  .contact-main { flex-basis: 100%; }
  .phone-xl {
    justify-content: center; margin-top: 28px; height: 64px; border-radius: 4px;
    background: var(--accent); color: var(--fir-deep); font-size: 28px;
  }
  .phone-xl .icon { font-size: 24px; stroke-width: 2; }
  .mail-link {
    display: flex; justify-content: center; margin-top: 12px; height: 56px;
    border: 1px solid rgba(247, 245, 239, .45); border-radius: 4px;
    font-size: 17px; text-decoration: none;
  }
  .mail-link .icon { font-size: 20px; }
  .contact-address {
    flex-basis: 100%; padding: 24px 0 0; border-left: 0;
    border-top: 1px solid rgba(247, 245, 239, .28); font-size: 17px;
  }

  .site-footer { padding-block: 28px 32px; font-size: 14px; line-height: 1.6; }
  .footer-links a { display: flex; align-items: center; min-height: 44px; }

  .legal { padding-block: 48px 64px; }
}