/* =========================================================
   Theme "Dunkles Holz"
   Wird in allen Seiten nach style.css eingebunden und
   überschreibt dort nur die Farbwerte. Entfernt man den
   <link>, fällt die Seite auf die helle Creme-Variante zurück.
   ========================================================= */

:root {
  --brand: #ede4d5; /* warmes Off-White als Textfarbe */
  --bg-body: #12100d; /* fast schwarz, warm gebrochen */
  --bg-deep: #0b0a08; /* Footer / tiefste Ebene */
  --panel: #1c1712; /* Karten, Flächen */
  --panel-2: #241d16; /* Hover, zweite Ebene */
  --surface: #c8a06a; /* Eiche / Messing — Hauptakzent */
  --surface-red: #b0703c; /* Nussbaum-Kupfer — Hover, Zahlen */
  --surface-green: #8d7350; /* gedämpftes Holzgrau */
  --text-primary: #ede4d5;
  --text-muted: #a2947f;
  --text-reverse: #12100d;
  --line: rgba(200, 160, 106, 0.28);
  --line-soft: rgba(200, 160, 106, 0.14);
}

html,
body {
  background-color: var(--bg-body);
  color: var(--text-primary);
}

/* Weicher Lichtschein hinter dem Hero */
body::before {
  content: "";
  position: fixed;
  top: -28vh;
  left: 50%;
  transform: translateX(-50%);
  width: 90vw;
  height: 80vh;
  background: radial-gradient(circle, rgba(200, 160, 106, 0.13) 0%, rgba(18, 16, 13, 0) 68%);
  pointer-events: none;
  z-index: 0;
}
section,
footer,
.marquee {
  position: relative;
  z-index: 1;
}

p {
  color: var(--text-muted);
}
a {
  color: var(--text-primary);
}
a:hover {
  color: var(--surface);
}

::selection {
  background-color: var(--surface);
  color: var(--text-reverse);
}

/* ---------- Fortschritt & Preloader ---------- */
.progress-bar {
  background: linear-gradient(90deg, var(--surface-red), var(--surface));
}
.preload {
  background: var(--bg-body);
}
.preload .bg-circle {
  background: radial-gradient(circle at 50% 40%, #3a2c1d 0%, #1a1510 55%, #12100d 100%);
}
.preload-content h2 {
  color: var(--text-primary);
}
.preload-content span {
  color: var(--surface);
}

/* ---------- Navigation ---------- */
.navlink::after {
  background: var(--surface);
}
.navlink.is-active {
  color: var(--surface);
}
.hero-tag {
  color: var(--surface);
}
.fixed-menu {
  background: var(--surface);
  color: var(--text-reverse);
}
.navmobile {
  background: var(--panel-2);
  border-left: 1px solid var(--line);
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.6);
}
.navmobile a:hover {
  color: var(--surface);
}
.navmobile-close {
  color: var(--surface);
}

/* ---------- Buttons ---------- */
.btn-solid {
  background: linear-gradient(180deg, #d4ae7b 0%, var(--surface) 100%);
  color: var(--text-reverse);
  border-color: var(--surface);
  box-shadow: 0 6px 22px rgba(200, 160, 106, 0.18);
}
.btn-solid:hover {
  background: var(--surface-red);
  border-color: var(--surface-red);
  color: #14100c;
}
.btn-outline {
  border-color: var(--line);
  color: var(--text-primary);
}
.btn-outline:hover {
  background: var(--surface);
  border-color: var(--surface);
  color: var(--text-reverse);
}
.btn-hint {
  opacity: 0.75;
}

/* ---------- Hero ---------- */
.hero-img {
  isolation: isolate;
}

/* Holzscheibe mit gebürsteter Messingfassung und atmendem Schein */
.hero-circle {
  background: conic-gradient(
      from 210deg,
      rgba(200, 160, 106, 0.16) 0deg,
      rgba(200, 160, 106, 0) 60deg,
      rgba(200, 160, 106, 0.1) 150deg,
      rgba(200, 160, 106, 0) 240deg,
      rgba(200, 160, 106, 0.2) 330deg,
      rgba(200, 160, 106, 0.16) 360deg
    ),
    radial-gradient(circle at 34% 28%, #4d3924 0%, #2a2018 58%, #171310 100%);
  box-shadow: 0 0 0 1px rgba(200, 160, 106, 0.32), 0 0 0 7px rgba(200, 160, 106, 0.05),
    0 40px 90px rgba(0, 0, 0, 0.6);
  animation: discglow 7s ease-in-out infinite;
}
@keyframes discglow {
  0%,
  100% {
    box-shadow: 0 0 0 1px rgba(200, 160, 106, 0.3), 0 0 0 7px rgba(200, 160, 106, 0.04),
      0 40px 90px rgba(0, 0, 0, 0.6), 0 0 60px rgba(200, 160, 106, 0.07);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(200, 160, 106, 0.5), 0 0 0 10px rgba(200, 160, 106, 0.07),
      0 40px 90px rgba(0, 0, 0, 0.6), 0 0 100px rgba(200, 160, 106, 0.16);
  }
}

/* Hintergrundfotos: warm eingefärbt und abgedunkelt, damit die
   Wortmarke im Kreis und die Headline sicher darauf stehen */
.hero-photos::after {
  background: linear-gradient(180deg, rgba(18, 16, 13, 0.78) 0%, rgba(18, 16, 13, 0.66) 42%, rgba(18, 16, 13, 0.92) 100%),
    radial-gradient(circle at 50% 44%, rgba(18, 16, 13, 0.2) 0%, rgba(18, 16, 13, 0.8) 100%);
}
.hero-photo {
  filter: saturate(0.7) contrast(1.04) brightness(0.62) sepia(0.12);
}

/* Wortmarke im Kreis */
.hero-logo {
  color: var(--surface);
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7));
}

/* Sägeblatt: Blattkörper in gebürstetem Stahl-Messing */
.saw-body {
  fill: rgba(200, 160, 106, 0.3);
  stroke: rgba(200, 160, 106, 0.5);
  stroke-width: 0.32;
}
.saw-ring {
  stroke: rgba(200, 160, 106, 0.22);
}
.hero-h1 {
  color: var(--text-primary);
}
.hero-b1 strong {
  color: var(--surface);
}
.hero-b3 {
  color: var(--text-muted);
}
.hero-b3 .dot {
  background: var(--surface);
}

/* ---------- Marquee ---------- */
.marquee {
  background: linear-gradient(90deg, #1a1510 0%, #2a2018 50%, #1a1510 100%);
  color: var(--surface);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.marquee-track span::after {
  color: var(--surface-red);
}

/* ---------- Sektionen ---------- */
.eyebrow {
  color: var(--surface);
}
h1,
h2,
h3 {
  color: var(--text-primary);
}

/* ---------- Karten ---------- */
.card {
  background: linear-gradient(180deg, var(--panel) 0%, #191410 100%);
  border: 1px solid var(--line-soft);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.card:hover {
  background: linear-gradient(180deg, var(--panel-2) 0%, #1d1712 100%);
  border-color: var(--line);
  transform: translateY(-6px);
}
.card .num {
  color: var(--surface);
}
.card ul {
  color: var(--text-muted);
}
.card li::before {
  color: var(--surface-red);
}

/* ---------- Einzugsgebiet ---------- */
.area {
  background: linear-gradient(180deg, var(--panel) 0%, #191410 100%);
  border: 1px solid var(--line-soft);
}
.area h3 {
  color: var(--surface);
}

/* ---------- FAQ ---------- */
.faq {
  border-top: 1px solid var(--line-soft);
}
.faq details {
  border-bottom: 1px solid var(--line-soft);
}
.faq summary {
  color: var(--text-primary);
}
.faq summary::after {
  color: var(--surface);
}
.faq summary:hover {
  color: var(--surface);
}
.faq-a p {
  color: var(--text-muted);
}

/* ---------- Ablauf-Schritte ---------- */
.step {
  border-top: 1px solid var(--line-soft);
}
.step:last-child {
  border-bottom: 1px solid var(--line-soft);
}
.step .step-num {
  color: var(--surface);
  opacity: 0.55;
}

/* ---------- Zahlenband ---------- */
.facts {
  background: linear-gradient(135deg, #241d16 0%, #191410 100%);
  border: 1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.fact strong {
  color: var(--surface);
}
.fact span {
  color: var(--text-muted);
}

/* ---------- Bilder ---------- */
.split-media,
.gallery figure,
.gallery-teaser figure {
  border: 1px solid var(--line-soft);
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.45);
  background: #0d0b09;
}
.split-media img,
.gallery-teaser img,
.gallery img {
  filter: saturate(0.9) contrast(1.05) brightness(0.93);
  transition: filter 0.35s ease, transform 0.4s ease;
}
.split-media:hover img,
.gallery-teaser figure:hover img,
.gallery figure:hover img {
  filter: saturate(1) contrast(1) brightness(1);
}

/* ---------- CTA-Band ---------- */
.cta-band {
  background: linear-gradient(150deg, #241d16 0%, #14110d 60%, #1c1712 100%);
  border: 1px solid var(--line);
  color: var(--text-primary);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.45);
}
.cta-band h2 {
  color: var(--text-primary);
}
.cta-band .tel {
  color: var(--surface);
}
.cta-band .btn-solid {
  background: linear-gradient(180deg, #d4ae7b 0%, var(--surface) 100%);
  color: var(--text-reverse);
  border-color: var(--surface);
}
.cta-band .btn-solid:hover {
  background: var(--surface-red);
  border-color: var(--surface-red);
}

/* ---------- Formular / Infobox ---------- */
.infobox {
  background: linear-gradient(180deg, var(--panel) 0%, #191410 100%);
  border: 1px solid var(--line);
}
.infobox dd,
.legal p,
.legal dd {
  color: var(--text-muted);
}
input,
textarea {
  background: #17130f;
  border: 1px solid var(--line-soft);
  color: var(--text-primary);
}
input::placeholder,
textarea::placeholder {
  color: #6f6353;
}
input:focus,
textarea:focus {
  border-color: var(--surface);
}
.map-static {
  background: linear-gradient(180deg, var(--panel) 0%, #191410 100%);
  border: 1px solid var(--line);
}

/* ---------- Lightbox ---------- */
.lightbox {
  background: rgba(10, 8, 6, 0.94);
}
.lightbox img {
  border: 1px solid var(--line);
}

/* ---------- Footer ---------- */
footer {
  background: var(--bg-deep);
  border-top: 1px solid var(--line-soft);
  color: var(--text-primary);
}
footer p {
  color: var(--text-muted);
}
footer a {
  color: var(--text-muted);
}
footer a:hover {
  color: var(--surface);
}
.footer-grid h3 {
  color: var(--surface);
}
.footer-brand h2 {
  color: var(--text-primary);
}
.footer-bottom {
  border-top: 1px solid var(--line-soft);
  color: var(--text-muted);
}