/* ==========================================================================
   E&R Ausbauteam — Variante A-hell: aufgehellte Fassung der mehrseitigen Variante A
   --------------------------------------------------------------------------
   Wird NACH style.css geladen und überschreibt nur, was sich ändert:
   die Farbtokens, die dunklen Flächen und die auffälligsten Effekte.
   Struktur, Abstände und Markup bleiben identisch.

   Gestalterische Linie: papierweiß statt kinoschwarz, Burgunder als einziger
   kräftiger Akzent, Haarlinien statt Leuchteffekte, gedämpfte Bewegung.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Farbtokens umdefinieren
   -------------------------------------------------------------------------- */
:root {
  /* Flächen */
  --ink:   #FCFBF9;   /* Seitenhintergrund */
  --ink-2: #FFFFFF;   /* Karten */
  --ink-3: #FFFFFF;
  --ink-4: #F3F0EB;

  /* Die "hellen" Bänder werden zur leicht getönten Bank —
     die Alternation der Abschnitte bleibt dadurch erhalten */
  --bone:   #F2EFE9;
  --bone-2: #E9E4DB;
  --bone-3: #DCD5C9;

  /* Akzent: Burgunder bleibt, Kupfer wird abgedunkelt, damit es auf
     hellem Grund den Kontrastanforderungen genügt */
  --copper:      #8A6512;
  --copper-soft: #6E5210;
  --wine-glow:   rgba(111, 17, 40, 0.22);

  /* Text */
  --txt:       #16161C;
  --txt-muted: rgba(22, 22, 28, 0.68);
  --txt-faint: rgba(22, 22, 28, 0.48);

  --ink-txt:   #16161C;
  --ink-muted: rgba(22, 22, 28, 0.68);
  --ink-faint: rgba(22, 22, 28, 0.48);

  /* Linien */
  --line:        rgba(22, 22, 28, 0.11);
  --line-strong: rgba(22, 22, 28, 0.22);
  --line-dark:   rgba(22, 22, 28, 0.11);

  /* Ruhigere Bewegung */
  --dur: 0.55s;

  /* Zurückhaltendere Schriftgrade — die Riesenversalien der dunklen
     Variante wirken hier zu laut, und der Text teilt sich den Platz
     mit dem Hero-Foto */
  --fs-display: clamp(2.15rem, 5.4vw, 4.5rem);
  --fs-h1:      clamp(2rem, 4.6vw, 3.6rem);
  --fs-h2:      clamp(1.75rem, 3.4vw, 2.9rem);
}

body { background: var(--ink); color: var(--txt); }

::selection { background: rgba(111, 17, 40, 0.14); color: var(--wine); }

/* Filmkorn und Riesen-Konturwort gehören zum cineastischen Look — hier weg */
.grain, .cta-word { display: none !important; }

/* --------------------------------------------------------------------------
   2. Typografie etwas sachlicher
   -------------------------------------------------------------------------- */
.hero-title {
  text-transform: none;        /* Versalien wirken plakativ, hier nicht gewollt */
  letter-spacing: -0.03em;
  font-weight: 750;
}

.display { text-transform: none; }

.eyebrow { color: var(--copper); font-weight: 650; }
.eyebrow::before { background: linear-gradient(90deg, transparent, var(--copper)); }

.gradient-text {
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--wine);
}

/* --------------------------------------------------------------------------
   3. Buttons
   -------------------------------------------------------------------------- */
.btn--primary {
  box-shadow: 0 10px 26px -14px rgba(111, 17, 40, 0.6);
}
.btn--primary::before { background: linear-gradient(120deg, #4A0B1B, var(--wine)); }
.btn--primary:hover { color: #fff; box-shadow: 0 16px 34px -16px rgba(111, 17, 40, 0.65); }

.btn--ghost { border-color: var(--line-strong); color: var(--ink-txt); }
.btn--ghost::before { background: var(--ink-txt); }
.btn--ghost:hover { color: #fff; border-color: var(--ink-txt); }

.btn--dark { border-color: var(--line-strong); color: var(--ink-txt); }
.btn--dark::before { background: var(--ink-txt); }
.btn--dark:hover { color: #fff; border-color: var(--ink-txt); }

.btn--solid-dark { background: var(--ink-txt); color: #fff; }

/* --------------------------------------------------------------------------
   4. Startanimation und Fortschritt
   -------------------------------------------------------------------------- */
.preloader { background: var(--ink); }
.pre-mark { color: var(--ink-txt); }
.pre-bar { background: var(--line); }
.scroll-progress { box-shadow: none; }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */
.header.is-scrolled {
  background: rgba(252, 251, 249, 0.86);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 0 rgba(22, 22, 28, 0.04), 0 12px 28px -24px rgba(22, 22, 28, 0.5);
}

.brand-mark {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 2px 8px -4px rgba(22, 22, 28, 0.25);
}
.brand-mark::after { background: linear-gradient(115deg, transparent 36%, rgba(111, 17, 40, 0.16) 50%, transparent 64%); }
.brand:hover .brand-mark { box-shadow: 0 8px 20px -10px rgba(111, 17, 40, 0.4); }

.nav a::before { background: rgba(22, 22, 28, 0.06); }
.nav a.is-active::after { background: var(--wine); }

.wa-btn { border-color: var(--line-strong); color: var(--ink-txt); }
.burger { border-color: var(--line-strong); }
.burger i { background: var(--ink-txt); }

.mobile-nav { background: var(--ink); }
.mobile-nav li a span { color: var(--wine); }

/* --------------------------------------------------------------------------
   6. Hero — Foto als ruhige Bildbank, Text auf Papier
   -------------------------------------------------------------------------- */
.hero { min-height: auto; padding-bottom: clamp(3rem, 7vw, 6rem); }

.hero-bg {
  inset: 0 0 auto auto;
  width: 44%;
  height: 100%;
  background-position: center;
  background-image:
    linear-gradient(90deg, var(--ink) 0%, rgba(252, 251, 249, 0.9) 18%, rgba(252, 251, 249, 0) 55%),
    url("../img/fotos/hero-baustelle.jpg");
}

/* Der Text bleibt links neben dem Foto, damit nichts über die Bildfläche
   läuft — sonst steht dunkle Schrift auf dunklem Bildinhalt */
@media (min-width: 901px) {
  .hero-inner > * { max-width: 56%; }
  .hero-lower { grid-template-columns: 1fr; }
  .hero-lower .lead { max-width: 100%; }
}

.hero-mesh { opacity: 0.35; }
.blob { filter: blur(120px); opacity: 0.16 !important; }
.blob--2 { opacity: 0.1 !important; }

.hero-grid span,
.hero-grid span:last-child { border-color: rgba(22, 22, 28, 0.05); }

.hero-badge {
  background: #fff;
  border-color: var(--line);
  color: var(--ink-muted);
  box-shadow: 0 8px 22px -16px rgba(22, 22, 28, 0.5);
}
.hero-badge b { color: var(--ink-txt); }
.pulse-dot { background: var(--wine); }
.pulse-dot::after { background: var(--wine); }

.hero-lower { border-top-color: var(--line); }
.hstat b { color: var(--ink-txt); }
.hstat b > span { color: var(--wine); }

.scroll-cue i { background: linear-gradient(180deg, var(--wine), transparent); }
.scroll-cue i::after { background: var(--wine); }

/* Unterseiten-Kopf */
.page-hero::before {
  background:
    radial-gradient(900px 480px at 10% -20%, rgba(111, 17, 40, 0.07), transparent 60%),
    radial-gradient(700px 420px at 92% 0%, rgba(138, 101, 18, 0.06), transparent 62%),
    var(--ink);
}

.page-hero-grid {
  opacity: 0.7;
  background-image:
    linear-gradient(rgba(22, 22, 28, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(22, 22, 28, 0.045) 1px, transparent 1px);
}

/* --------------------------------------------------------------------------
   7. Laufband
   -------------------------------------------------------------------------- */
.marquee { background: var(--bone); border-color: var(--line); }
.marquee-track span { -webkit-text-stroke-color: rgba(22, 22, 28, 0.24); }
.marquee-track span:hover { color: var(--wine); }
.marquee-track i { color: var(--wine); }

/* --------------------------------------------------------------------------
   8. Karten
   -------------------------------------------------------------------------- */
.scard {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(22, 22, 28, 0.04);
}

.scard::before {
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(111, 17, 40, 0.07), transparent 62%);
}

.scard:hover {
  border-color: rgba(111, 17, 40, 0.3);
  box-shadow: 0 22px 46px -30px rgba(22, 22, 28, 0.45);
}

.scard-icon {
  border-color: var(--line);
  background: rgba(111, 17, 40, 0.06);
  color: var(--wine);
}

.scard p { color: var(--ink-muted); }

/* Die großen Geisterziffern wirken zu verspielt */
.scard-ghost { display: none; }

.vcard { box-shadow: 0 1px 2px rgba(22, 22, 28, 0.04); }
.vcard:hover { box-shadow: 0 20px 42px -30px rgba(22, 22, 28, 0.45); }

.chip { background: #fff; }

/* --------------------------------------------------------------------------
   9. Split, Prozess, Zahlen
   -------------------------------------------------------------------------- */
.split-media { box-shadow: 0 26px 60px -40px rgba(22, 22, 28, 0.55); }
.split-media::after { background: linear-gradient(180deg, transparent 45%, rgba(22, 22, 28, 0.55) 100%); }

.media-tag {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--line);
  color: var(--ink-txt);
}

.float-badge {
  background: #fff;
  border: 1px solid var(--line);
  box-shadow: 0 20px 44px -28px rgba(22, 22, 28, 0.5);
  animation: none;                 /* Schweben passt nicht zum ruhigen Auftritt */
}

.check { background: rgba(111, 17, 40, 0.1); color: var(--wine); }

.pstep-num { -webkit-text-stroke-color: rgba(22, 22, 28, 0.2); }
.pstep:hover .pstep-num { color: var(--wine); }
.pstep::before { background: linear-gradient(90deg, rgba(111, 17, 40, 0.05), transparent); }
.pstep-meta { color: var(--wine); }

.stats-band {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(22, 22, 28, 0.04);
}
.stat { border-right-color: var(--line); }
.stat b { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--wine); }

/* --------------------------------------------------------------------------
   10. Projekte
   -------------------------------------------------------------------------- */
.pfilter button { border-color: var(--line-strong); color: var(--ink-muted); }
.pfilter button:hover { color: var(--ink-txt); }

.pcard {
  background: var(--bone);
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(22, 22, 28, 0.05);
}
.pcard:hover {
  border-color: rgba(111, 17, 40, 0.3);
  box-shadow: 0 26px 54px -34px rgba(22, 22, 28, 0.5);
}
.pcard-img { filter: none; }
.pcard-tag { color: #fff; background: rgba(111, 17, 40, 0.85); border-color: transparent; }
.pcard-open { color: var(--copper-soft); }
.pcard-open { color: #F0CE93; }        /* liegt auf dem abgedunkelten Foto */
.pempty { border-color: var(--line-strong); color: var(--ink-muted); }

/* Lightbox bleibt bewusst dunkel — dort zählt allein das Bild */
.lightbox { background: rgba(22, 22, 28, 0.72); }
.lb-panel { background: #fff; border-color: var(--line); }
.lb-info { color: var(--ink-txt); }
.lb-facts { border-color: var(--line); }
.lb-facts dt { color: var(--ink-faint); }
.lb-info p { color: var(--ink-muted); }
.lb-thumbs button { border-color: var(--line); }
.lb-close { background: rgba(255, 255, 255, 0.9); border-color: var(--line); color: var(--ink-txt); }
.lb-close:hover { background: var(--wine); color: #fff; }
.lb-nav { background: rgba(255, 255, 255, 0.9); border-color: var(--line); color: var(--ink-txt); }
.lb-count { background: rgba(22, 22, 28, 0.7); color: #fff; }

/* --------------------------------------------------------------------------
   11. Preiskalkulator
   -------------------------------------------------------------------------- */
.calc-main { box-shadow: 0 1px 2px rgba(22, 22, 28, 0.04); }

/* Die Ergebniskarte bleibt als kräftiger Farbblock stehen — auf hellem
   Grund ist sie damit der klare Blickfang */
.calc-result {
  background: linear-gradient(160deg, #6F1128, #3E0916);
  border-color: transparent;
  color: #F7F4F0;
  box-shadow: 0 28px 60px -34px rgba(111, 17, 40, 0.75);
}
.calc-result::before { background: radial-gradient(circle at 50% 100%, rgba(255, 255, 255, 0.12), transparent 66%); }
.calc-result .eyebrow { color: #F0CE93; }
.calc-result .eyebrow::before { background: linear-gradient(90deg, transparent, #F0CE93); }
.result-price { background: none; -webkit-background-clip: initial; background-clip: initial; color: #fff; }
.result-sub, .result-note, .result-empty { color: rgba(247, 244, 240, 0.72); }
.result-rows { border-color: rgba(247, 244, 240, 0.18); }
.result-rows dt { color: rgba(247, 244, 240, 0.6); }
.result-rows dd { color: #fff; }
.calc-result .btn--primary { background: #fff; color: var(--wine); box-shadow: none; }
.calc-result .btn--primary::before { background: #F0CE93; }
.calc-result .btn--primary:hover { color: #3E0916; }
.calc-result .btn--ghost { border-color: rgba(247, 244, 240, 0.35); color: #fff; }
.calc-result .btn--ghost::before { background: #fff; }
.calc-result .btn--ghost:hover { color: var(--wine); border-color: #fff; }

/* --------------------------------------------------------------------------
   12. Kontakt und Formular
   -------------------------------------------------------------------------- */
.ccard {
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(22, 22, 28, 0.04);
}
.ccard:hover { border-color: rgba(111, 17, 40, 0.3); }
.ccard p { color: var(--ink-muted); }
.ccard a { color: var(--ink-txt); }
.ccard small { color: var(--ink-faint); }

.hours-card { background: #fff; border-color: var(--line); }
.hours-card h3 { color: var(--wine); }
.hours-row { border-bottom-color: var(--line); }
.hours-row span:first-child { color: var(--ink-muted); }
.hours-row.is-now span:last-child { color: #1B7A3D; }

.form-panel {
  color-scheme: light;
  background: #fff;
  border-color: var(--line);
  box-shadow: 0 1px 2px rgba(22, 22, 28, 0.04);
}
.form-panel .field > label { color: var(--ink-faint); }
.form-panel .input,
.form-panel .select,
.form-panel .textarea {
  background-color: #fff;
  border-color: var(--line-strong);
  color: var(--ink-txt);
}
.form-panel .input::placeholder,
.form-panel .textarea::placeholder { color: var(--ink-faint); }
.form-panel .input:focus,
.form-panel .select:focus,
.form-panel .textarea:focus {
  border-color: var(--wine);
  box-shadow: 0 0 0 4px rgba(111, 17, 40, 0.1);
}
.form-panel .select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1l6 6 6-6' stroke='%2316161C' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}
.form-panel option { background: #fff; color: var(--ink-txt); }

.consent { color: var(--ink-muted); }
.consent a { color: var(--wine); }
.consent:has(input:checked) .addon-box { background: var(--wine); border-color: var(--wine); color: #fff; }
.consent .addon-box { border-color: var(--line-strong); }

.form-status.is-ok { background: rgba(27, 122, 61, 0.1); color: #14602F; border-color: rgba(27, 122, 61, 0.35); }
.form-status.is-err { background: rgba(176, 32, 32, 0.08); color: #8E1A1A; border-color: rgba(176, 32, 32, 0.3); }

.map-frame { border-color: var(--line); background: var(--bone); }
.map-frame iframe { filter: none; }

/* --------------------------------------------------------------------------
   13. Handlungsaufruf und Fußzeile
   -------------------------------------------------------------------------- */
.cta::before {
  background:
    radial-gradient(800px 420px at 50% 120%, rgba(138, 101, 18, 0.07), transparent 64%),
    radial-gradient(900px 460px at 50% -30%, rgba(111, 17, 40, 0.08), transparent 64%),
    var(--bone);
}

.cta-contact a:hover { color: var(--wine); }

.footer { background: var(--bone); border-top-color: var(--line); }
.footer h4 { color: var(--wine); }
.footer ul a, .footer address a { color: var(--ink-muted); }
.footer ul a:hover, .footer address a:hover { color: var(--ink-txt); }
.footer address { color: var(--ink-muted); }
.footer address b { color: var(--ink-txt); }
.footer-brand-text { color: var(--ink-muted); }
.footer-hours { border-top-color: var(--line); color: var(--ink-faint); }
.footer-wordmark { -webkit-text-stroke-color: rgba(22, 22, 28, 0.12); }
.footer-wordmark:hover { -webkit-text-stroke-color: rgba(111, 17, 40, 0.3); }
.footer-bottom { border-top-color: var(--line); color: var(--ink-faint); }
.footer-bottom a:hover { color: var(--ink-txt); }

/* --------------------------------------------------------------------------
   14. Mobile Leiste, Einwilligung, Rechtstexte
   -------------------------------------------------------------------------- */
.callbar {
  background: rgba(255, 255, 255, 0.9);
  border-color: var(--line);
  box-shadow: 0 18px 40px -20px rgba(22, 22, 28, 0.45);
}
.cb-icon { background: rgba(22, 22, 28, 0.04); border-color: var(--line); color: var(--ink-txt); }
.cb-icon span { color: var(--ink-faint); }
.cb-icon--tel:hover, .cb-icon--tel:active,
.cb-icon--wa:hover, .cb-icon--wa:active { color: #fff; }
.cb-icon--wa:hover, .cb-icon--wa:active { color: #06130B; }

.cbanner {
  background: rgba(255, 255, 255, 0.97);
  border-color: var(--line-strong);
  color: var(--ink-txt);
  box-shadow: 0 30px 70px -28px rgba(22, 22, 28, 0.5);
}
.cbanner p { color: var(--ink-muted); }
.cbanner a { color: var(--wine); }
.cbanner-opt { border-color: var(--line-strong); }
.cbanner-opt small { color: var(--ink-faint); }
.cbanner-opt:has(input:checked) { border-color: var(--wine); background: rgba(111, 17, 40, 0.05); }
.cbanner-opt:has(input:checked) .addon-box { background: var(--wine); border-color: var(--wine); color: #fff; }
.cbanner-more { color: var(--ink-muted); }
.cbanner-more:hover { color: var(--ink-txt); }

.consent-ph { background: var(--bone); }
.consent-ph svg { color: var(--wine); }
.consent-ph b { color: var(--ink-txt); }
.consent-ph p, .consent-ph a { color: var(--ink-muted); }

.legal p, .legal li { color: var(--ink-muted); }
.legal a { color: var(--wine); }
.legal-note {
  border-color: rgba(111, 17, 40, 0.3);
  background: rgba(111, 17, 40, 0.04);
  color: var(--ink-txt);
}
.todo {
  background: rgba(111, 17, 40, 0.1);
  border-bottom-color: rgba(111, 17, 40, 0.6);
  color: var(--wine);
}

.panel {
  background: linear-gradient(120deg, #6F1128, #3E0916 78%);
  border-color: transparent;
  color: #F7F4F0;
}
.panel p { color: rgba(247, 244, 240, 0.75); }
.panel::after { background: radial-gradient(circle, rgba(255, 255, 255, 0.12), transparent 65%); }

.svc { border-top-color: var(--line); }
.svc-visual { background: linear-gradient(150deg, #6F1128, #3E0916); }
.svc-visual svg { color: rgba(255, 255, 255, 0.85); }

.sec-index, .section--light .sec-index { color: var(--ink-faint); }

/* --------------------------------------------------------------------------
   15. Bewegung zurücknehmen
   -------------------------------------------------------------------------- */
[data-anim] {
  transition:
    opacity 0.6s var(--ease-out) var(--d, 0s),
    transform 0.6s var(--ease-out) var(--d, 0s);
}
[data-anim="up"]    { transform: translateY(18px); }
[data-anim="left"]  { transform: translateX(-20px); }
[data-anim="right"] { transform: translateX(20px); }
[data-anim="scale"] { transform: scale(0.98); }

.word { transition-duration: 0.8s; }

@media (max-width: 900px) {
  /* Auf schmalen Displays liegt das Foto wieder hinter dem Text,
     mit hellem Schleier für die Lesbarkeit */
  .hero-bg {
    inset: 0;
    width: 100%;
    background-image:
      linear-gradient(180deg, rgba(252, 251, 249, 0.92) 0%, rgba(252, 251, 249, 0.88) 55%, var(--ink) 100%),
      url("../img/fotos/hero-baustelle.jpg");
  }
}