/* ═══════════════════════════════════════════════════════════════════
   WERKVENGERS — Global Styles
   Farbwelt identisch zu cleanvengers.de + Werkstatt-Graphit
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Cleanvengers Markenfarben */
  --wv-dark:    #024B3E;   /* Primär – Tiefgrün */
  --wv-green:   #3CA200;   /* Akzent – Signalgrün */
  --wv-mid:     #009b72;   /* Sekundär – Petrol */

  /* Werkstatt-Erweiterung */
  --wv-deep:    #012D25;   /* Hero / Footer */
  --wv-graphit: #1C2A26;   /* Werkstatt-Dunkel */
  --wv-steel:   #E7EDEA;   /* Flächen */
  --wv-line:    #DCE5E1;
  --wv-warn:    #B45309;   /* Rechtliche Hinweise */
}

html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, sans-serif;
  color: #14201C;
  -webkit-font-smoothing: antialiased;

  /* Kein totes Weiß: ein Hauch Farbe, ein feines Raster und zwei weiche
     Lichtpunkte. Weiße Karten heben sich dadurch sichtbar ab.
     Reines CSS – kostet null Ladezeit.                                */
  background-color: #FAFCFB;
  background-image:
    radial-gradient(1100px 620px at 92% -4%,  rgba(60,162,0,.075), transparent 60%),
    radial-gradient(900px 640px at -6% 42%,  rgba(0,155,114,.06),  transparent 60%),
    radial-gradient(1000px 700px at 50% 104%, rgba(2,75,62,.05),   transparent 62%),
    radial-gradient(circle, rgba(2,75,62,.055) 1px, transparent 1px);
  background-size: auto, auto, auto, 24px 24px;
  background-attachment: fixed, fixed, fixed, scroll;
}
/* Auf dem Handy nur die Farbe – gemusterte Flächen kosten dort Scroll-Leistung */
@media (max-width: 640px) {
  body { background-image: radial-gradient(900px 520px at 90% 0%, rgba(60,162,0,.07), transparent 60%); }
}
@media (prefers-contrast: more) { body { background-image:none; background-color:#fff; } }

/* ── Gradients ─────────────────────────────────────────────────── */
.wv-grad        { background: linear-gradient(158deg, #024B3E 0%, #3CA200 100%); }
.wv-grad-deep   { background: linear-gradient(160deg, #012D25 0%, #024B3E 55%, #0a6b45 100%); }
.wv-grad-text   { background: linear-gradient(90deg,#3CA200,#009b72); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ── Hero mit echtem Werkstattfoto ─────────────────────────────
   Das Foto liegt UNTER einer dunklen Abdeckung. Ohne Foto greift
   automatisch der Farbverlauf – die Seite funktioniert also auch,
   solange noch keine Aufnahmen vorliegen.                        */
.wv-hero-photo {
  position: relative;
  background-image:
    linear-gradient(160deg,
      rgba(1,45,37,var(--hero-dim,.72)) 0%,
      rgba(2,75,62,calc(var(--hero-dim,.72) - .06)) 55%,
      rgba(10,107,69,calc(var(--hero-dim,.72) - .14)) 100%),
    var(--hero-img);
  background-size: cover, cover;
  background-position: center, var(--hero-pos, center 55%);
  background-repeat: no-repeat;
}
/* Auf dem Handy dunkler – kleiner Text braucht mehr Kontrast */
@media (max-width: 768px) { .wv-hero-photo { --hero-dim: .82; } }

/* Unterer weicher Übergang ins Weiß der Seite */
.wv-hero-photo::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:90px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.10));
  pointer-events:none;
}

/* ═══════════════════════════════════════════════════════════════
   HINTERGRUND-SYSTEM
   ───────────────────────────────────────────────────────────────
   Tiefe ohne Fotos: alles reines CSS, keine Ladezeit, und der Text
   bleibt zu 100 % lesbar. Die Muster liegen bewusst weit unter der
   Wahrnehmungsschwelle – man sieht sie erst, wenn man sie sucht.
   ═══════════════════════════════════════════════════════════════ */

/* Flächen */
.wv-sec-soft { background:#F4F8F6; }
.wv-sec-tint { background:linear-gradient(180deg,#FFFFFF 0%,#F4F8F6 45%,#FFFFFF 100%); }

/* Punktraster – dezente Werkstatt-Anmutung */
.wv-dots {
  background-image: radial-gradient(circle, rgba(2,75,62,.075) 1.1px, transparent 1.1px);
  background-size: 22px 22px;
}
/* Feines Linienraster */
.wv-grid-soft {
  background-image:
    linear-gradient(rgba(2,75,62,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(2,75,62,.045) 1px, transparent 1px);
  background-size: 54px 54px;
}
/* Diagonale Schraffur – erinnert an Werkstattboden-Markierung */
.wv-hatch {
  background-image: repeating-linear-gradient(135deg,
    rgba(60,162,0,.05) 0 2px, transparent 2px 14px);
}

/* Farbschleier: zwei weiche Lichtpunkte statt teurem blur() */
.wv-glow { position:relative; isolation:isolate; }
.wv-glow::before {
  content:''; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(680px 380px at 88% -8%,  rgba(60,162,0,.13), transparent 62%),
    radial-gradient(560px 420px at 4% 108%, rgba(0,155,114,.11), transparent 62%);
}
.wv-glow-dark::before {
  background:
    radial-gradient(700px 420px at 92% 0%,  rgba(60,162,0,.20), transparent 62%),
    radial-gradient(620px 460px at 0% 100%, rgba(0,155,114,.16), transparent 62%);
}

/* Angeschrägter Übergang zwischen zwei Abschnitten */
.wv-angle-b { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 46px), 0 100%); }
.wv-angle-t { clip-path: polygon(0 46px, 100% 0, 100% 100%, 0 100%); margin-top:-46px; padding-top:46px; }
@media (max-width:768px){
  .wv-angle-b { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 24px), 0 100%); }
  .wv-angle-t { clip-path: polygon(0 24px, 100% 0, 100% 100%, 0 100%); margin-top:-24px; padding-top:24px; }
}

/* Trennlinie mit Zahnrad-Anmutung */
.wv-rule { height:3px; border-radius:99px;
  background:linear-gradient(90deg,transparent,#3CA200 20%,#009b72 50%,#024B3E 80%,transparent); opacity:.5; }

/* Karten auf gemustertem Grund brauchen etwas mehr Deckkraft */
.wv-dots .wv-card, .wv-grid-soft .wv-card, .wv-glow .wv-card { background:rgba(255,255,255,.94); }

/* Kein Muster für Menschen, die reduzierte Bewegung/Kontraste bevorzugen */
@media (prefers-contrast: more) {
  .wv-dots, .wv-grid-soft, .wv-hatch { background-image:none; }
  .wv-glow::before { display:none; }
}

/* ── Werkstatt-Textur (Hero-Raster) ────────────────────────────── */
.wv-grid-bg {
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 46px 46px;
}

/* ── Navigation ────────────────────────────────────────────────── */
#wv-nav {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--wv-line);
}
.wv-navlink { position: relative; }
.wv-navlink::after {
  content:''; position:absolute; left:0; bottom:-5px; height:2px; width:0;
  background: var(--wv-green); transition: width .25s ease;
}
.wv-navlink:hover::after, .wv-navlink.active::after { width:100%; }

/* ── Buttons ───────────────────────────────────────────────────── */
.btn        { display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
              font-weight:700; border-radius:.75rem; transition:all .2s ease;
              padding:.8rem 1.4rem; min-height:46px; white-space:nowrap; }
.btn-primary{ background:var(--wv-dark); color:#fff; }
.btn-primary:hover{ background:#012D25; transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(2,75,62,.55); }
.btn-green  { background:var(--wv-green); color:#fff; }
.btn-green:hover{ background:#2f8500; transform:translateY(-2px); box-shadow:0 12px 24px -10px rgba(60,162,0,.55); }
.btn-ghost  { background:#fff; color:var(--wv-dark); border:1.5px solid var(--wv-line); }
.btn-ghost:hover{ border-color:var(--wv-dark); background:#F4F8F6; }
.btn-white  { background:#fff; color:var(--wv-dark); }
.btn-white:hover{ background:#EAF3EF; transform:translateY(-2px); }
.btn-outline-w{ background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.45); }
.btn-outline-w:hover{ background:rgba(255,255,255,.12); border-color:#fff; }

/* ── Cards ─────────────────────────────────────────────────────── */
.wv-card {
  background:#fff; border:1px solid var(--wv-line); border-radius:1.25rem;
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.wv-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 50px -16px rgba(2,75,62,.20);
  border-color: rgba(60,162,0,.45);
}
.wv-card:hover .wv-icon { background: var(--wv-dark); color:#fff; }

.wv-icon {
  width:52px; height:52px; border-radius:.9rem;
  display:flex; align-items:center; justify-content:center;
  background:#EAF3EF; color:var(--wv-dark);
  transition: background .3s ease, color .3s ease;
}

/* ── Preis-Tabelle ─────────────────────────────────────────────── */
.wv-price-row { border-bottom:1px solid var(--wv-line); transition: background .2s; }
.wv-price-row:hover { background:#F5F9F7; }
.wv-price-row:last-child { border-bottom:none; }

/* ── Badges ────────────────────────────────────────────────────── */
.wv-badge { display:inline-flex; align-items:center; gap:.35rem;
            font-size:.7rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
            padding:.3rem .65rem; border-radius:.5rem; }
.wv-badge-green { background:rgba(60,162,0,.12); color:#2f8500; }
.wv-badge-dark  { background:rgba(2,75,62,.10);  color:var(--wv-dark); }
.wv-badge-warn  { background:rgba(180,83,9,.10); color:var(--wv-warn); }

/* ── Rechtlicher Hinweis-Block ─────────────────────────────────── */
.wv-legal-note {
  border-left:4px solid var(--wv-warn);
  background:#FFFBF3; border-radius:.6rem;
  padding:1rem 1.15rem; font-size:.875rem; color:#7C4A0B; line-height:1.6;
}

/* ── FAQ ───────────────────────────────────────────────────────── */
details summary { cursor:pointer; list-style:none; }
details summary::-webkit-details-marker { display:none; }
details[open] summary .wv-chevron { transform: rotate(180deg); }
.wv-chevron { transition: transform .25s ease; }

/* ── Sticky Mobile CTA ─────────────────────────────────────────── */
#wv-mobile-cta {
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:none; gap:.5rem; padding:.6rem;
  padding-bottom:calc(.6rem + env(safe-area-inset-bottom));   /* iPhone-Notch unten */
  background:rgba(255,255,255,.98); border-top:1px solid var(--wv-line);
  box-shadow:0 -6px 24px rgba(0,0,0,.08);
}
@media (max-width: 768px) {
  #wv-mobile-cta { display:flex; }
  body { padding-bottom:calc(74px + env(safe-area-inset-bottom)); }
}

/* ── WhatsApp Floating ─────────────────────────────────────────── */
#wv-wa {
  position:fixed; right:1rem; bottom:1rem; z-index:65;
  width:56px; height:56px; border-radius:50%;
  background:#25D366; color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 10px 26px rgba(37,211,102,.45);
  transition: transform .2s;
}
#wv-wa:hover { transform: scale(1.08); }
@media (max-width: 768px) { #wv-wa { bottom:84px; } }

/* ── Animationen ───────────────────────────────────────────────── */
@keyframes wvFadeUp { from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }
.wv-fade { animation: wvFadeUp .6s ease forwards; opacity:0; }
.wv-d1{animation-delay:.08s}.wv-d2{animation-delay:.16s}.wv-d3{animation-delay:.24s}
.wv-d4{animation-delay:.32s}.wv-d5{animation-delay:.40s}.wv-d6{animation-delay:.48s}

/* ── Formulare ─────────────────────────────────────────────────── */
.wv-input, .wv-select, .wv-textarea {
  width:100%; padding:.75rem .9rem; border:1.5px solid var(--wv-line);
  border-radius:.7rem; background:#fff; transition:border-color .2s, box-shadow .2s;
  /* 16px auf dem Handy – alles darunter löst in iOS Safari einen Zoom beim Antippen aus */
  font-size:16px;
}
@media (min-width:768px){ .wv-input, .wv-select, .wv-textarea { font-size:.95rem; } }
.wv-input:focus, .wv-select:focus, .wv-textarea:focus {
  outline:none; border-color:var(--wv-green); box-shadow:0 0 0 3px rgba(60,162,0,.14);
}
.wv-label { display:block; font-size:.8rem; font-weight:700; color:#3A4A45; margin-bottom:.35rem; }

/* ── Rechner ───────────────────────────────────────────────────── */
.wv-opt {
  display:flex; align-items:center; gap:.75rem; cursor:pointer;
  border:1.5px solid var(--wv-line); border-radius:.8rem; padding:.85rem 1rem;
  transition:all .2s; background:#fff;
}
.wv-opt:hover { border-color:var(--wv-mid); }
.wv-opt input:checked ~ .wv-opt-label { color:var(--wv-dark); font-weight:700; }
.wv-opt.selected { border-color:var(--wv-green); background:#F4FBEF; box-shadow:0 0 0 3px rgba(60,162,0,.10); }

/* ── Divider ───────────────────────────────────────────────────── */
.wv-sep { height:1px; background:linear-gradient(90deg,transparent,var(--wv-line),transparent); }

/* ── Mobile ────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .wv-card { border-radius:1rem; }
  h1 { line-height:1.15; }
}

/* ═══════════════════════════════════════════════════════════════
   ARABISCH — Schreibrichtung von rechts nach links
   Nur die Stellen, an denen eine feste Richtung im Layout steckt.
   ═══════════════════════════════════════════════════════════════ */
.wv-rtl { direction: rtl; }

/* Arabisch braucht etwas mehr Zeilenhöhe, sonst kleben die Zeilen */
.wv-rtl body, .wv-rtl p, .wv-rtl li { line-height: 1.85; }

/* Linksbündige Hilfsklassen spiegeln */
.wv-rtl .text-left  { text-align: right; }
.wv-rtl .text-right { text-align: left; }

/* Farbige Randlinien wandern auf die andere Seite */
.wv-rtl .wv-legal-note { border-left: none; border-right: 4px solid var(--wv-warn); }
.wv-rtl [class*="border-l-4"] { border-left-width: 0 !important; border-right-width: 4px !important; }

/* Icons in Aufzählungen und Buttons */
.wv-rtl .btn i[data-lucide="arrow-right"],
.wv-rtl i[data-lucide="chevron-right"] { transform: scaleX(-1); }

/* Eingabefelder und Auswahlen */
.wv-rtl .wv-input, .wv-rtl .wv-select, .wv-rtl .wv-textarea,
.wv-rtl input.f, .wv-rtl select.f, .wv-rtl textarea.f { text-align: right; }

/* Zahlen, Preise, IBAN und Uhrzeiten bleiben von links nach rechts –
   sonst zerfällt „19,90 €" oder „08:00 – 18:00" optisch. */
.wv-rtl .wv-price, .wv-rtl [data-ltr],
.wv-rtl time, .wv-rtl .font-mono { direction: ltr; unicode-bidi: embed; display: inline-block; }

/* Untere Leiste und schwebende Schaltflächen spiegeln */
.wv-rtl #wv-wa { right: auto; left: 1rem; }

/* Rasterreihenfolge bleibt – Grid spiegelt sich in RTL automatisch */

/* ── Print (für Preislisten) ───────────────────────────────────── */
@media print {
  #wv-nav, #wv-footer, #wv-mobile-cta, #wv-wa, .no-print { display:none !important; }
  body { padding-bottom:0; }
}