/* Stadt BAU Tischlereigesellschaft mbH – Website Redesign
   Custom CSS ergänzend zu Tailwind (Utilities decken die meisten Layout-/Spacing-Regeln ab).
   Struktur 1:1 übernommen von zoechling/altenfelder-metallbau website-redesign
   (site-header, page-header, teaser-card, leist-card-Expand, appl-ov-Popups, foot-slim),
   Farben ersetzt durch die echten Logo-Farben (Grün/Schwarz) der Stadt BAU Tischlerei.
   Chat-Assistent (hc-Praefix, ab 04.09.2026): regelbasierte NLU-Engine + Wissensbasis,
   Struktur 1:1 übernommen von altenfelder-metallbau/website-redesign-vertriebsstrategie. */

html { scroll-behavior: smooth; }
body { background: #fff; }

/* ---------- Sections & Typography helpers ---------- */
.section { padding: clamp(50px, 8vw, 88px) 0; }
.section-title { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; color: #1A1613; line-height: 1.2; }
.eyebrow { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #0C7F41; }

/* ---------- Sections (One-Page-Scroller) ---------- */
#über-uns, #leistungen, #referenzen, #karriere, #kontakt { scroll-margin-top: 5rem; }

/* Über-uns-Grid (Fliesstext neben/über "Auf einen Blick"): das generische gap-12 (3rem) wirkt
   dort neben einem dreiabsatzigen Fliesstextblock zu knapp -- Basis-Gap angehoben, unter lg
   (Grid stapelt einspaltig, Fliesstext direkt über der Karte) zusätzlich verstärkt. */
#über-uns .grid.gap-12 { gap: 4rem; }
@media (max-width: 1023px) {
  #über-uns .grid.gap-12 { row-gap: 6rem; }
}

/* Der farbige Vertrauens-Block liegt im selben Container wie das Grid darüber; sein Padding
   wirkt bereits innerhalb der Farbfläche, dadurch klebte die Farbkante ohne Abstand direkt am
   letzten Fliesstext-Absatz. */
#über-uns .section.bg-primary-50 { margin-top: clamp(50px, 8vw, 88px); }

.page-header {
  position: relative;
  padding: clamp(88px, 12vw, 152px) 0 clamp(56px, 7vw, 96px);
  background: linear-gradient(135deg, #1A1613 0%, #2B2420 60%, #4A4038 100%);
  overflow: hidden;
}
.page-header::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 15% 20%, rgba(255,255,255,.10) 0, transparent 45%),
                     radial-gradient(circle at 85% 80%, rgba(15,167,84,.20) 0, transparent 50%);
}

/* ---------- Header (immer weiß) ---------- */
#site-header {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(43,36,32,.10);
  box-shadow: 0 4px 28px -8px rgba(0,0,0,.10);
}
#site-header .nav-link,
#site-header #menu-toggle { color: #2B2420; }

.nav-link {
  padding: .55rem .9rem; border-radius: 9999px; font-size: .875rem; font-weight: 600;
  white-space: nowrap; transition: color .2s ease, background .2s ease; position: relative;
}
.nav-link::after {
  content: ''; position: absolute; bottom: 4px; left: .9rem; right: .9rem;
  height: 2px; background: #0FA754; transform: scaleX(0); transform-origin: left;
  transition: transform .25s ease; border-radius: 9999px;
}
.nav-link:hover { color: #0FA754 !important; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: #2B2420 !important; }
.nav-link.active::after { transform: scaleX(1); }

.nav-link-mobile { padding: .85rem 0; font-size: 1.05rem; font-weight: 600; color: #2B2420; border-bottom: 1px solid rgba(43,36,32,.08); }
.nav-link-mobile.active { color: #0FA754; }

/* ---------- Buttons ---------- */
.btn-primary, .btn-secondary, .btn-outline, .btn-outline-light {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; font-size: .9rem; padding: .8rem 1.7rem; border-radius: 9999px;
  transition: all .25s ease; cursor: pointer; border: none; white-space: nowrap;
}
.btn-primary { background: #2B2420; color: #fff; }
.btn-primary:hover { background: #1A1613; transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(43,36,32,.45); }
.btn-secondary { background: #0FA754; color: #fff; }
.btn-secondary:hover { background: #0C7F41; transform: translateY(-2px); box-shadow: 0 10px 24px -8px rgba(15,167,84,.45); }
.btn-outline { border: 1.5px solid #2B2420; color: #2B2420; background: transparent; }
.btn-outline:hover { background: #2B2420; color: #fff; }
.btn-outline-light { border: 1.5px solid rgba(255,255,255,.55); color: #fff; background: rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.btn-outline-light:hover { background: rgba(255,255,255,.2); border-color: #fff; }

/* ---------- Hero parallax ---------- */
.hero-parallax { background-size: cover; background-position: center 50%; background-attachment: scroll; }
@media (min-width: 1024px) { .hero-parallax { background-attachment: fixed; } }

/* ---------- Cards ---------- */
.teaser-card {
  display: block; border-radius: 1.15rem; overflow: hidden;
  background: #fff; box-shadow: 0 8px 24px -8px rgba(43,36,32,.18);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.teaser-card:hover { transform: translateY(-6px); box-shadow: 0 18px 38px -12px rgba(43,36,32,.30); }
.teaser-img { width: 100%; height: 11rem; object-fit: cover; display: block; }
.teaser-body { padding: 1.25rem 1.4rem 1.5rem; }
.teaser-body h3 { font-weight: 700; color: #1A1613; font-size: 1.05rem; }
.teaser-body p { margin-top: .35rem; font-size: .875rem; color: rgba(43,36,32,.72); line-height: 1.5; }

.content-block {
  background: #fff; border: 1px solid rgba(43,36,32,.08);
  border-radius: 1.15rem; padding: 1.75rem;
  box-shadow: 0 8px 24px -8px rgba(43,36,32,.12);
}
.content-block-accent { background: #F5F1EA; border-radius: 1.15rem; padding: 2rem; }

/* ---------- Profil-Karte (LinkedIn) — 1:1 nach altenfelder-metallbau/website-redesign
   .gf-card uebernommen (Struktur/Verhalten), Farbwerte auf Stadt-BAU-Palette umgestellt
   (primary-50 #F5F1EA statt des kuehlen Blaugrau der Referenz). ---------- */
.gf-card {
  display: flex; align-items: center; gap: .9rem;
  background: #F5F1EA; border-radius: .85rem; padding: .75rem 1rem;
  text-decoration: none; transition: background-color .2s ease, transform .2s ease;
}
a.gf-card:hover { background: #EAE2D4; transform: translateY(-2px); }
.gf-card img {
  width: 3.25rem; height: 3.25rem; border-radius: 9999px; object-fit: cover;
  flex-shrink: 0; border: 2px solid #fff; box-shadow: 0 2px 8px -2px rgba(26,22,19,.3);
}

.highlight-block {
  background: linear-gradient(135deg, #1A1613, #2B2420 65%, #0C7F41 220%);
  border-radius: 1.75rem; padding: 2.5rem;
  box-shadow: 0 20px 45px -15px rgba(43,36,32,.45);
}

.check-item { position: relative; padding-left: 1.6rem; }
.check-item::before {
  content: ''; position: absolute; left: 0; top: .45em;
  width: .55rem; height: .55rem; border-radius: 9999px; background: #0FA754;
}

.role-pill { text-align: center; font-weight: 600; color: #1A1613; background: #F5F1EA; border-radius: .75rem; padding: .8rem; }

.icon-contact-row { display: flex; align-items: center; gap: 1rem; }

/* ---------- Öffnungszeiten-Tabelle ---------- */
.icon-badge {
  flex-shrink: 0; width: 2.75rem; height: 2.75rem; border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: #F5F1EA; color: #0C7F41;
}
.icon-hover-bounce:hover svg { animation: iconBounce .5s ease; }
@keyframes iconBounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } 70% { transform: translateY(-1px); } }

/* ---------- Rating ---------- */
.rating-teaser {
  display: block; background: #fff; border-radius: 1.75rem; padding: 2.25rem;
  box-shadow: 0 8px 24px -8px rgba(43,36,32,.18); border: 1px solid rgba(43,36,32,.08);
  transition: transform .4s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease;
}
.rating-teaser:hover { transform: translateY(-4px); box-shadow: 0 18px 38px -12px rgba(43,36,32,.30); }
.rating-pill {
  display: inline-flex; align-items: center; gap: .75rem;
  background: rgba(43,36,32,.06); border: 1px solid rgba(43,36,32,.14);
  border-radius: 9999px; padding: .6rem 1.5rem;
}
.trust-item { display: flex; align-items: center; gap: .65rem; color: #1A1613; font-weight: 500; }
.trust-item svg { flex-shrink: 0; color: #0FA754; }

/* ---------- Vorher-Nachher-Galerie (Referenzen) ---------- */
.va-grid { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 640px) { .va-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .va-grid { grid-template-columns: repeat(3, 1fr); } }
.va-card { border-radius: 1.15rem; overflow: hidden; box-shadow: 0 8px 24px -8px rgba(43,36,32,.18); background: #fff; }
.va-imgs { display: flex; }
.va-half { position: relative; flex: 1 1 50%; display: block; overflow: hidden; }
.va-half img { display: block; width: 100%; height: 17rem; object-fit: cover; }
/* ---------- Cookie-Consent (Pflicht-Gate) ----------
   Nutzt .appl-ov/.appl-modal (z-index 1100) wieder, siehe index.html. Eigener, niedrigerer
   z-index hier, damit das Rechtliches-Popup (Datenschutz-Link im Banner-Text) sichtbar
   darueber liegt, falls beide gleichzeitig offen sind. */
#cookieOv { z-index: 1050; }
/* .appl-close setzt display:flex mit derselben Spezifitaet wie das UA-Default
   [hidden]{display:none} -- die Klassenregel gewinnt, das hidden-Attribut auf
   #cookieClose bliebe sonst wirkungslos (der X-Button waere trotz hidden sichtbar). */
#cookieClose[hidden] { display: none !important; }
.cc-cat { border: 1px solid rgba(43,36,32,.12); border-radius: .9rem; padding: .95rem 1rem; }
.cc-cat-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.cc-cat-h b { color: #1A1613; font-size: .92rem; }
.cc-cat p { margin: 0; color: rgba(43,36,32,.6); font-size: .8rem; line-height: 1.55; }
.cc-pill { font-size: .68rem; font-weight: 700; color: #0C7F41; background: #EAF7EF; border: 1px solid rgba(15,167,84,.25); border-radius: 9999px; padding: 3px 10px; }
.cc-switch { position: relative; display: inline-block; width: 44px; height: 25px; flex-shrink: 0; }
.cc-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.cc-switch span { position: absolute; inset: 0; background: #cbd5e1; border-radius: 9999px; cursor: pointer; transition: background .2s ease; }
.cc-switch span::before { content: ''; position: absolute; top: 3px; left: 3px; width: 19px; height: 19px; background: #fff; border-radius: 9999px; transition: left .2s ease; }
.cc-switch input:checked + span { background: #0FA754; }
.cc-switch input:checked + span::before { left: 22px; }

/* ---------- Karten-Consent-Gate (Google Maps erst nach Einwilligung) ---------- */
.map-gate { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: .75rem; padding: 2.5rem 1.5rem; height: 460px; background: #F5F1EA; color: #1A1613; }
.map-gate svg { color: #0FA754; }
.map-gate p { max-width: 22rem; color: rgba(26,22,19,.65); font-size: .88rem; }

/* ---------- Hero-Hintergrundvideo ----------
   Liegt hinter dem Farbverlauf-Overlay und traegt kein eigenes Bedienelement:
   rein dekorativ, deshalb stumm, endlos und ohne Steuerleiste. */
.hero-video { width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
/* Zwei Lagen: seitlicher Verlauf für die Textlesbarkeit links + flaechige
   Grundabdunklung für den Gesamtkontrast. Eine gleichmaessig starke Abdunklung
   würde das Video schlucken, eine zu schwache macht die weisse Schrift unlesbar.
   Farbwert = primary.dark (#1A1613) aus tailwind.config.js. */
.hero-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to right, rgba(26,22,19,.96) 0%, rgba(26,22,19,.88) 38%, rgba(26,22,19,.55) 70%, rgba(26,22,19,.35) 100%),
    linear-gradient(to bottom, rgba(26,22,19,.35) 0%, rgba(26,22,19,.30) 60%, rgba(26,22,19,.55) 100%);
}
/* Bei reduzierter Bewegung das Video ausblenden — das Poster-Standbild
   uebernimmt dann als Hintergrundbild, ohne Bewegung. */
@media (prefers-reduced-motion: reduce) {
  .hero-video { display: none; }
  .hero-video-fallback { background-image: url('../img/hero-video-poster.jpg'); background-size: cover; background-position: center 45%; }
}

.va-tag { position: absolute; top: .6rem; left: .6rem; background: rgba(26,22,19,.75); color: #fff; font-size: .68rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .3rem .65rem; border-radius: 9999px; }
.va-tag-after { background: #0FA754; }
.va-caption { padding: .9rem 1.1rem; font-size: .85rem; color: rgba(26,22,19,.65); }

/* ---------- Sprachumschalter (DE/PL) ---------- */
.lang-toggle { display: inline-flex; align-items: center; border: 1px solid rgba(26,22,19,.15); border-radius: 9999px; padding: .2rem; gap: .1rem; }
.lang-toggle.is-mobile {
  position: fixed; left: 24px; bottom: 24px; z-index: 45;
  background: #fff; border-color: rgba(26,22,19,.15);
  box-shadow: 0 8px 24px -6px rgba(26,22,19,.3);
}
@media (max-width: 400px) { .lang-toggle.is-mobile { left: 16px; bottom: 16px; } }
.lang-btn { border: 0; background: transparent; font-size: .72rem; font-weight: 700; letter-spacing: .04em; padding: .32rem .7rem; border-radius: 9999px; cursor: pointer; color: rgba(26,22,19,.55); transition: background .2s ease, color .2s ease; }
.lang-btn.active { background: #1A1613; color: #fff; }
.lang-toggle-light { border-color: hsla(0,0%,100%,.35); }
.lang-toggle-light .lang-btn { color: hsla(0,0%,100%,.7); }
.lang-toggle-light .lang-btn.active { background: #fff; color: #1A1613; }

/* ---------- Forms ---------- */
.form-row { margin-bottom: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.form-row label { font-size: .8rem; font-weight: 600; color: #1A1613; }
.form-row input, .form-row select, .form-row textarea {
  border: 1.5px solid rgba(43,36,32,.20); border-radius: .65rem;
  padding: .65rem .9rem; font-size: .9rem; font-family: inherit;
  transition: border-color .2s ease;
}
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none; border-color: #2B2420; box-shadow: 0 0 0 3px rgba(43,36,32,.12);
}
.form-row.has-error input, .form-row.has-error select { border-color: #DB1218; }
.form-error { font-size: .75rem; color: #DB1218; min-height: 1em; }
.form-row-check { display: flex; align-items: flex-start; gap: .6rem; margin-bottom: 1.4rem; font-size: .8rem; color: #1A1613; }
.form-row-check input { margin-top: .2rem; }

.prose-legal h2 { font-size: 1.05rem; font-weight: 700; color: #1A1613; margin-top: 1.75rem; margin-bottom: .5rem; }
.prose-legal p { color: rgba(43,36,32,.8); line-height: 1.7; margin-bottom: .5rem; }

/* ---------- Chat-Assistent (regelbasiert, NLU-Engine + Wissensbasis, kein KI-Backend) ----------
   Struktur übernommen von altenfelder-metallbau/website-redesign-vertriebsstrategie, Farben
   auf die Stadt-BAU-Markenpalette (Gruen/Dunkelbraun) umgestellt. */
#hc-btn {
  position: fixed; bottom: 24px; right: 24px; z-index: 900;
  width: 60px; height: 60px; border-radius: 9999px; background: #0FA754; border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px -6px rgba(15,167,84,.55);
  transition: transform .25s ease, box-shadow .25s ease;
}
#hc-btn:hover { transform: scale(1.07); box-shadow: 0 10px 30px -6px rgba(15,167,84,.65); }
#hc-btn svg { width: 26px; height: 26px; color: #fff; }
#hc-btn .hc-close-icon { display: none; }
#hc-btn.open .hc-open-icon { display: none; }
#hc-btn.open .hc-close-icon { display: block; }
#hc-badge {
  position: absolute; top: -3px; right: -3px; width: 20px; height: 20px; border-radius: 9999px;
  background: #2B2420; color: #fff; font-size: .65rem; font-weight: 700;
  display: none; align-items: center; justify-content: center; border: 2px solid #fff;
}
#hc-win {
  position: fixed; bottom: 96px; right: 24px; z-index: 899;
  width: min(390px, calc(100vw - 32px)); height: min(560px, calc(100vh - 140px));
  background: #fff; border-radius: 1.15rem; box-shadow: 0 20px 55px -12px rgba(26,22,19,.35);
  display: flex; flex-direction: column; overflow: hidden;
  transform: translateY(16px) scale(.97); opacity: 0; pointer-events: none;
  transition: transform .25s ease, opacity .25s ease;
}
#hc-win.open { transform: translateY(0) scale(1); opacity: 1; pointer-events: all; }
.hc-head { background: linear-gradient(135deg, #1A1613, #2B2420); padding: 15px 18px; display: flex; align-items: center; gap: 12px; flex-shrink: 0; color: #fff; }
.hc-avatar { width: 38px; height: 38px; border-radius: 9999px; background: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-weight: 700; padding: 6px; box-sizing: border-box; }
.hc-avatar-img { width: 100%; height: 100%; object-fit: contain; display: block; }
.hc-head-txt { flex: 1; min-width: 0; }
.hc-head-name { font-size: .9rem; font-weight: 700; }
.hc-head-status { font-size: .7rem; color: #7CE6A6; display: flex; align-items: center; gap: 5px; margin-top: 2px; }
.hc-head-status::before { content: ''; width: 6px; height: 6px; border-radius: 9999px; background: #7CE6A6; display: block; }
.hc-msgs { flex: 1; overflow-y: auto; padding: 14px 14px 6px; display: flex; flex-direction: column; gap: 10px; background: #f7f8fa; }
.hc-msg { display: flex; flex-direction: column; max-width: 88%; animation: hcFade .22s ease; }
@keyframes hcFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hc-msg.bot { align-self: flex-start; }
.hc-msg.user { align-self: flex-end; }
.hc-bubble { padding: 10px 14px; border-radius: 14px; font-size: .83rem; line-height: 1.55; }
.hc-msg.bot .hc-bubble { background: #fff; border: 1px solid rgba(43,36,32,.12); color: #1A1613; border-bottom-left-radius: 4px; }
.hc-msg.user .hc-bubble { background: #2B2420; color: #fff; border-bottom-right-radius: 4px; }
.hc-typing { display: flex; gap: 4px; padding: 10px 14px; background: #fff; border: 1px solid rgba(43,36,32,.12); border-radius: 14px; border-bottom-left-radius: 4px; align-self: flex-start; align-items: center; }
.hc-typing span { width: 7px; height: 7px; background: #9a9186; border-radius: 9999px; animation: hcBounce .9s infinite ease-in-out; }
.hc-typing span:nth-child(2) { animation-delay: .2s; }
.hc-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes hcBounce { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-7px); } }
.hc-qr { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 10px; flex-shrink: 0; background: #f7f8fa; }
.hc-chip {
  background: rgba(15,167,84,.08); border: 1px solid rgba(15,167,84,.35); color: #0C7F41;
  font-size: .75rem; font-weight: 600; padding: 6px 12px; border-radius: 9999px; cursor: pointer;
  transition: all .2s ease; white-space: nowrap;
}
.hc-chip:hover { background: #0FA754; color: #fff; border-color: #0FA754; }
.hc-footer { border-top: 1px solid rgba(43,36,32,.1); padding: 10px 12px; display: flex; gap: 8px; align-items: center; flex-shrink: 0; background: #fff; }
#hc-inp {
  flex: 1; background: #f7f8fa; border: 1px solid rgba(43,36,32,.15); color: #1A1613;
  font-size: .84rem; padding: 8px 12px; border-radius: .6rem; outline: none; transition: border-color .2s ease;
}
#hc-inp:focus { border-color: #2B2420; }
#hc-send {
  background: #0FA754; border: none; width: 36px; height: 36px; border-radius: .6rem;
  cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background-color .2s ease;
}
#hc-send:hover { background: #0C7F41; }
#hc-send svg { width: 16px; height: 16px; color: #fff; }
@media (max-width: 400px) { #hc-win { right: 16px; bottom: 88px; } #hc-btn { right: 16px; bottom: 16px; } }

/* ---------- Bewerbungs-/Kontakt-Modal (appl-ov) ---------- */
.appl-ov {
  position: fixed; inset: 0; z-index: 1100; background: rgba(26,22,19,.55); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
}
.appl-ov.open { opacity: 1; pointer-events: all; }
.appl-modal {
  background: #fff; border-radius: 1.15rem; width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto;
  padding: 2rem; position: relative; box-shadow: 0 25px 60px -15px rgba(26,22,19,.45);
  transform: translateY(18px) scale(.97); transition: transform .25s ease;
}
.appl-ov.open .appl-modal { transform: translateY(0) scale(1); }
.appl-close {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 9999px;
  background: #f1f3f5; border: none; color: #2B2420; cursor: pointer; font-size: .9rem;
  display: flex; align-items: center; justify-content: center; transition: background .2s ease;
}
.appl-close:hover { background: #F5F1EA; color: #0FA754; }

/* ---------- Rechtliches-Popup (Impressum/Datenschutz/AGB) ---------- */
.legal-modal { max-width: 720px; }
.legal-tabs { display: flex; gap: 6px; border-bottom: 1px solid rgba(43,36,32,.12); margin-bottom: 1.5rem; padding-bottom: .25rem; }
.legal-tab { background: none; border: none; cursor: pointer; padding: .55rem 1rem; border-radius: 9999px 9999px 0 0; font-size: .85rem; font-weight: 600; color: rgba(43,36,32,.55); transition: all .2s ease; }
.legal-tab:hover { color: #2B2420; background: rgba(43,36,32,.06); }
.legal-tab.active { color: #2B2420; background: rgba(43,36,32,.10); }
.legal-panel.hidden { display: none; }

/* ---------- Zusätzliche animierte Effekte ---------- */
.hero-particles { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.hero-particle { position: absolute; border-radius: 9999px; background: #fff; opacity: .18; animation: floatParticle 7s ease-in-out infinite; }
@keyframes floatParticle { 0%, 100% { transform: translate(0,0); opacity: .12; } 50% { transform: translate(12px,-22px); opacity: .32; } }
.ken-burns { animation: kenBurns 16s ease-in-out infinite; transform-origin: center; will-change: transform; }
@keyframes kenBurns { 0% { transform: scale(1) translate(0,0); } 50% { transform: scale(1.07) translate(-0.5%, 0.5%); } 100% { transform: scale(1) translate(0,0); } }

@media (prefers-reduced-motion: reduce) { .hero-particle, .ken-burns { animation: none !important; } }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1); }
.reveal.is-visible { opacity: 1; transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-parallax { background-attachment: scroll !important; }
  html { scroll-behavior: auto; }
}

/* ---------- Leistungen-Expand ---------- */
.leist-card { position: relative; }
.leist-more { overflow: hidden; }
.leist-toggle {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: 1.25rem;
  font-size: .82rem; font-weight: 700; color: #0FA754; background: none;
  border: none; cursor: pointer; padding: 0; transition: color .2s ease;
}
.leist-toggle:hover { color: #0C7F41; }
.leist-toggle-arrow { display: inline-block; transition: transform .35s ease; font-size: .7rem; line-height: 1; }
.leist-card.is-open .leist-toggle-arrow { transform: rotate(180deg); }

/* ---------- Zoom-Frame (Bild-Hover-Zoom) ---------- */
.zoom-frame { display: block; overflow: hidden; }
.zoom-frame img { transition: transform .6s cubic-bezier(.2,.7,.2,1); display: block; width: 100%; }
.zoom-frame:hover img { transform: scale(1.07); }

/* ---------- Referenz-Grid (aktuell 2 Kacheln: Tür + Ochsenauge-Umschalter) ----------
   Bewusst flex+justify-center statt grid-cols-3: bei nur 2 Kacheln liesse ein
   3-Spalten-Grid eine leere dritte Spur stehen. feste Breite pro Kachel haelt die
   Proportion nahe an den frueheren 3 gleich großen Grid-Kacheln dieser Sektion. */
.ref-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.5rem; }
.ref-tile { flex: 1 1 320px; max-width: 380px; }

/* ---------- Interaktiver Bild-Umschalter (Ochsenauge geoeffnet/geschlossen) ----------
   Zwei absolut uebereinanderliegende Bilder, per Opacity-Crossfade uebergeblendet.
   Wechselt automatisch (main.js, setInterval) UND per Klick/Tastatur sofort. */
.ref-toggle { position: relative; display: block; width: 100%; height: 14rem; padding: 0; border: 0; background: #1a1613; cursor: pointer; }
.ref-toggle-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.1s ease, transform .6s cubic-bezier(.2,.7,.2,1); }
.ref-toggle-img.is-active { opacity: 1; }
.ref-toggle:hover .ref-toggle-img.is-active { transform: scale(1.07); }
.ref-toggle-badge {
  position: absolute; top: .6rem; right: .6rem; z-index: 1;
  width: 2rem; height: 2rem; border-radius: 9999px;
  background: rgba(26,22,19,.72); color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: background-color .2s ease;
}
.ref-toggle:hover .ref-toggle-badge, .ref-toggle:focus-visible .ref-toggle-badge { background: #0FA754; }
@media (prefers-reduced-motion: reduce) {
  .ref-toggle-img { transition: opacity .01s linear; }
  .ref-toggle:hover .ref-toggle-img.is-active { transform: none; }
}

/* ---------- Fußzeile (Slogan mit Dauerwelle+Glow) ---------- */
.foot-slim { background: #1A1613; border-top: 1px solid rgba(255,255,255,.08); padding: 2.75rem 0 1.25rem; }
.foot-slogan {
  color: #0FA754; font-weight: 800; letter-spacing: -.01em;
  font-size: clamp(1.1rem, 3vw, 1.9rem); line-height: 1.25;
  display: flex; flex-direction: column; gap: .15rem; margin: 0; perspective: 800px;
}
.fs-line { display: block; transform-origin: center; animation: fsWave 4.2s ease-in-out infinite, fsGlow 3.6s ease-in-out infinite; animation-delay: calc(.45s * var(--i)), calc(.45s * var(--i)); }
.fs-hl { color: #fff; }
@keyframes fsWave {
  0% { transform: translateX(0) translateY(0) skewX(0deg); }
  25% { transform: translateX(6px) translateY(-2px) skewX(-1.5deg); }
  50% { transform: translateX(0) translateY(-4px) skewX(0deg); }
  75% { transform: translateX(4px) translateY(-2px) skewX(1deg); }
  100% { transform: translateX(0) translateY(0) skewX(0deg); }
}
@keyframes fsGlow { 0%, 100% { text-shadow: 0 0 0 transparent; } 50% { text-shadow: 0 0 20px rgba(15,167,84,.5); } }
@media (prefers-reduced-motion: reduce) { .fs-line { animation: none; } }
.foot-bottom {
  max-width: 64rem; margin: 2rem auto 0; padding: 1.1rem 1.25rem 0;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem 1.5rem;
  color: rgba(255,255,255,.5); font-size: .8rem; text-align: left;
}
.foot-legal { display: inline-flex; gap: 1.25rem; flex-wrap: wrap; margin-left: auto; }
.foot-legal a, .foot-bottom a { color: rgba(255,255,255,.6); text-decoration: none; }
.foot-legal a:hover, .foot-bottom a:hover { color: #0FA754; }
/* Der schwebende Chat-Button (#hc-btn, fixed bottom-right, 60px + 16-24px Abstand)
   legt sich sonst über die untere Footer-Zeile — NICHT nur auf schmalen Bildschirmen:
   rechnerisch geprüft (max moegliche Scroll-Position vs. Button-Bereich) ueberlappt
   der Button den Footer-Link-Bereich bei JEDER Breite, auf Mobile zusaetzlich verschaerft
   durch den 2-3-zeiligen Umbruch von "Impressum · Datenschutz · Cookies". Der letzte
   Link war dadurch komplett unklickbar (elementFromPoint traf den Button, nie den Link).
   Deshalb bewusst OHNE Media-Query -- der Button existiert auf jeder Breite. */
.foot-bottom { padding-bottom: 5.5rem; }

/* ---------- Zeitstrahl (Über uns / Firmengeschichte) ---------- */
.timeline-track {
  position: relative; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: .5rem; padding: 0 1rem;
}
.timeline-track::before {
  content: ''; position: absolute; left: 1rem; right: 1rem; top: 1.15rem;
  height: 2px; background: rgba(43,36,32,.15); z-index: 0;
}
.timeline-dot {
  position: relative; z-index: 1; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: .6rem; padding: 0;
}
.timeline-dot::before {
  content: ''; width: 1.15rem; height: 1.15rem; border-radius: 9999px;
  background: #fff; border: 3px solid rgba(43,36,32,.25);
  transition: border-color .25s ease, background-color .25s ease, transform .25s ease;
}
.timeline-dot:hover::before { border-color: #0FA754; transform: scale(1.12); }
.timeline-dot.is-active::before { border-color: #0FA754; background: #0FA754; transform: scale(1.15); }
.timeline-year { font-size: .85rem; font-weight: 700; color: rgba(43,36,32,.55); transition: color .25s ease; }
.timeline-dot.is-active .timeline-year, .timeline-dot:hover .timeline-year { color: #1A1613; }
.timeline-panels { position: relative; margin-top: 2.5rem; }
.timeline-panel {
  display: none; text-align: center; max-width: 42rem; margin: 0 auto;
  animation: timelineFade .35s ease;
}
.timeline-panel.is-active { display: block; }
@keyframes timelineFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.timeline-panel-year { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #0C7F41; }
.timeline-panel h3 { font-size: 1.35rem; font-weight: 800; color: #1A1613; margin-top: .5rem; }
.timeline-panel p { margin-top: .75rem; color: rgba(43,36,32,.75); line-height: 1.6; }
@media (max-width: 640px) {
  .timeline-track { grid-template-columns: repeat(4, 1fr); }
  .timeline-year { font-size: .72rem; }
}

/* ---------- Header-Kontakt-CTA (grün, blinkend/pulsierend) ---------- */
.btn-header-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .55rem 1.2rem; border-radius: 9999px;
  background: #0FA754; color: #fff; font-weight: 700; font-size: .82rem;
  transition: all .22s ease; border: none; cursor: pointer; white-space: nowrap;
  animation: ctaBlink 2s ease-in-out infinite;
}
.btn-header-cta:hover { background: #0C7F41; transform: translateY(-1px); box-shadow: 0 6px 18px -6px rgba(15,167,84,.6); animation-play-state: paused; }
.btn-header-cta::after {
  content: ''; position: absolute; inset: -4px; border-radius: 9999px;
  border: 2px solid rgba(15,167,84,.55); animation: pulseRing 2s ease-out infinite; pointer-events: none;
}
@keyframes ctaBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(15,167,84,.55); }
  50% { box-shadow: 0 0 0 9px rgba(15,167,84,0); }
}
@keyframes pulseRing {
  0% { transform: scale(.9); opacity: .9; }
  100% { transform: scale(1.25); opacity: 0; }
}

/* ---------- Ambient Animationen (weitere Effekte) ---------- */
.gentle-float { animation: gentleFloat 4s ease-in-out infinite; }
@keyframes gentleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.soft-pulse-accent { animation: softPulseAccent 2.5s ease-in-out infinite; }
@keyframes softPulseAccent { 0%, 100% { box-shadow: 0 0 0 0 rgba(15,167,84,.35); } 50% { box-shadow: 0 0 0 8px rgba(15,167,84,0); } }

.stagger-in { opacity: 0; animation: staggerIn .6s ease forwards; }
@keyframes staggerIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }

.shimmer-text {
  background: linear-gradient(90deg, #1A1613 0%, #0FA754 50%, #1A1613 100%);
  background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: shimmerText 5s linear infinite;
}
@keyframes shimmerText { 0% { background-position: 0% center; } 100% { background-position: 200% center; } }

@media (prefers-reduced-motion: reduce) {
  .btn-header-cta, .btn-header-cta::after, .gentle-float, .soft-pulse-accent, .stagger-in, .shimmer-text { animation: none !important; }
}

/* ---------- Misc ---------- */
::selection { background: #0FA754; color: #fff; }