/* =========================================================
   Teppichreinigung-24.de  •  styles.css
   Farbwelt: warm/klassisch (hassan-teppiche.de angelehnt)
   ========================================================= */

/* ---------- Farben & Basissetup ---------- */
:root{
  --bg:#faf7f2;         /* heller, warmer Hintergrund */
  --fg:#222;            /* Standardtext */
  --muted:#555;         /* Sekundärtext */
  --brand:#a62822;      /* Akzent (Bordeaux/Rot) */
  --brand-2:#5b2c25;    /* dunkles Rotbraun */
  --card:#fff;          /* Karten */
  --line:rgba(0,0,0,.08);
}

/* ---------- Offline-Fonts (Dateien in /fonts/) ---------- */
@font-face{
  font-family:"InterVar";
  src:url("/fonts/inter-var.woff2") format("woff2-variations");
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Playfair";
  src:url("/fonts/playfair-display-700.woff2") format("woff2");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}

/* ---------- Resets / Basics ---------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--bg);color:var(--fg);
  font-family:InterVar,system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;
  line-height:1.65;
}
a{color:inherit;text-decoration:none}
img,video{max-width:100%;height:auto}
.container{max-width:1120px;margin:0 auto;padding:0 16px}
.small{font-size:.92rem}
.center{text-align:center}

/* ---------- Header / Navigation ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(250,247,242,.9);
  backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:10px 0}
.brand{display:flex;gap:10px;align-items:center;font-weight:900}
.brand .dot{width:10px;height:10px;border-radius:99px;background:var(--brand)}
.brand-link{font-family:Playfair,serif;font-weight:700;letter-spacing:.2px}
.links{display:flex;gap:16px;align-items:center}
.links a{font-weight:700;font-size:.95rem;opacity:.95}
.links a:hover{opacity:1}

/* ---------- Buttons / CTAs ---------- */
.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 16px;border-radius:12px;font-weight:800;
  border:1px solid var(--line);background:#fff;transition:.2s;
  box-shadow:0 2px 8px rgba(0,0,0,.05)
}
.btn:hover{transform:translateY(-1px);box-shadow:0 4px 14px rgba(0,0,0,.08)}
.btn.small{padding:8px 12px;font-size:.9rem}
.btn.accent{background:var(--brand);color:#fff;border-color:transparent}
.btn.ghost{background:transparent}

/* Inline-CTA-Reihen */
.inline-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:16px}
.inline-cta.centered{justify-content:center}

/* ---------- Hero ---------- */
.hero{position:relative;isolation:isolate}
.hero-video{
  width:100%;height:70svh;max-height:760px;
  object-fit:cover;display:block;
  filter:saturate(1.04) contrast(1.02) brightness(.98)
}
.hero-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 40%,rgba(0,0,0,.45))
}
.hero-content{
  position:absolute;inset:0;display:grid;place-items:center;
  text-align:center;padding:24px;color:#fff
}
.kicker{
  color:#ffe8e6;background:rgba(166,40,34,.14);
  border:1px solid rgba(166,40,34,.35);
  padding:6px 10px;border-radius:999px;font-weight:900;
  letter-spacing:.06em;text-transform:uppercase;display:inline-block
}
h1{
  font-family:Playfair,serif;font-weight:700;
  font-size:clamp(28px,4vw,46px);margin:.6rem 0 0;
  text-shadow:0 2px 14px rgba(0,0,0,.25)
}
.sub{color:#f3f3f3;max-width:860px;margin:10px auto 0;text-shadow:0 2px 10px rgba(0,0,0,.25)}
.cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:16px}
.trust-note{margin-top:10px;font-size:.95rem;opacity:.95}

/* ---------- Sections ---------- */
.section{padding:56px 0}
.section.alt{background:#fff;border-block:1px solid var(--line)}
h2{
  font-family:Playfair,serif;font-weight:700;
  font-size:clamp(22px,3vw,34px);margin:0 0 10px;color:var(--brand-2)
}
.muted{color:var(--muted)}
.note{margin-top:10px;color:var(--muted)}

/* ---------- Karten / Grids ---------- */
.cards{
  display:grid;gap:16px;margin-top:14px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.cards.six{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cards.three{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px;
  box-shadow:0 3px 10px rgba(0,0,0,.06);
  min-height:170px;display:flex;flex-direction:column;gap:6px
}
.card h3{margin:0 0 6px;color:var(--brand-2)}

/* =========================================================
   Bilder- & Video-Sektionen: Equal vs. Full-Bleed
   ========================================================= */

/* --- Gemeinsame Stile --- */
.figcap{
  padding:12px 14px;color:var(--muted);font-size:.96rem
}
.figcap strong{color:var(--brand-2)}
.figcap .em{font-style:italic}
.highlight{color:var(--brand);font-weight:800}

/* --- Variante A: Equal (gleich groß wie Cards) --- */
.block.equal .grid-3{
  display:grid;gap:16px;grid-template-columns:repeat(3,1fr)
}
@media (max-width:980px){ .block.equal .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .block.equal .grid-3{grid-template-columns:1fr} }

.block.equal .tile,
.block.equal .video-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.06);
  display:flex;flex-direction:column
}

/* Einheitliche Höhe für Bild/Video – kein Ziehen/Quetschen */
.block.equal .media{
  width:100%;aspect-ratio:4/3; /* identisch zu Karten-Optik */
  object-fit:cover;object-position:center;display:block;background:#000
}

/* --- Variante B: Full-Bleed (über den Rand hinaus, zentriert) --- */
.block.fullbleed .bleed{
  width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)
}
.block.fullbleed .grid-3{
  display:grid;gap:16px;grid-template-columns:repeat(3,1fr)
}
@media (max-width:1024px){ .block.fullbleed .grid-3{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .block.fullbleed .grid-3{grid-template-columns:1fr} }

.block.fullbleed .tile,
.block.fullbleed .video-card{
  background:var(--card);border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.06)
}
.block.fullbleed .media{
  width:100%;aspect-ratio:16/10; /* leicht breiter für Bühnengefühl */
  object-fit:cover;object-position:center;display:block;background:#000
}

/* ---------- Einzelvideo (Arbeitsweise) optional ---------- */
.video-single{
  width:100%;max-width:720px;margin:8px auto;border-radius:12px;
  border:1px solid var(--line);background:#000;display:block
}
.explain{margin-top:12px}

/* ---------- Tabellen (Preise) ---------- */
.table-wrap{
  overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff;margin:12px 0
}
table{width:100%;border-collapse:collapse}
.prices th,.prices td{
  padding:14px 12px;text-align:left;border-bottom:1px solid var(--line)
}
.prices thead th{background:#faf3f2;font-weight:800;color:var(--brand-2)}
.prices tbody tr:hover{background:#fafafa}

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid var(--line);padding:24px 0;color:var(--muted);
  font-size:.95rem;background:#fff
}
.stack-links a{
  margin:0 6px;text-decoration:underline;
  text-decoration-color:rgba(0,0,0,.25)
}

/* ===== Kontrast- & Lesbarkeits-Fixes ===== */
h2{ color:#1b1b1b !important; }            /* Sektionen: noch dunkler für Top-Kontrast */
.kicker{
  color:#7f1d1d !important;
  background:#fdecec !important;
  border:1px solid #e6b3b3 !important;
}
.links a{ color:#2a2a2a; }                 /* Navi-Links etwas dunkler */

/* ===== Brand/Logo größer ===== */
.brand{ gap:12px; }
.brand .dot{ width:14px; height:14px; }    /* größerer Punkt */
.brand-link{
  font-family:Playfair,serif;
  font-size:1.25rem;                       /* ~20px */
  letter-spacing:.3px;
  color:#2a2a2a;
}

/* ===== CTA-Buttons im Hero mit Text + Details ===== */
.cta-stack{ gap:14px; justify-content:center; }
.btn-cta{
  min-width:240px;
  display:flex; align-items:center; gap:12px;
  padding:12px 16px;
  background:#fff;
  color:#1c1c1c;
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:0 2px 8px rgba(0,0,0,.05);
}
.btn-cta .ico{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px; border-radius:10px;
  background:#fdecec; color:#a62822;      /* Icon-Farbe bordeaux */
  flex:0 0 36px;
}
.btn-cta .cta-content{ display:flex; flex-direction:column; line-height:1.25; }
.btn-cta .cta-title{ font-weight:800; }
.btn-cta .cta-detail{ font-size:.95rem; color:#333; }
.btn-cta:hover{ transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.08); }

/* Auf dunklem Hero-Hintergrund die Buttons leicht anheben */
.hero .btn-cta{ background:#fff; }

/* Mobile: Buttons in voller Breite */
@media (max-width:560px){
  .btn-cta{ min-width:0; width:100%; }
}

/* Optional: Fokus-Styles für Tastatur/Nutzerfreundlichkeit */
.btn:focus-visible{
  outline:3px solid rgba(166,40,34,.35);
  outline-offset:2px;
}
/* === Mobile Navigation / Burger === */
.menu-toggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:4px;
  width:38px;height:38px;
  background:none;border:none;
  cursor:pointer;
}
.menu-toggle .bar{
  width:26px;height:3px;
  background:#2a2a2a;
  border-radius:2px;
  transition:.3s;
}

/* Zustand "aktiv" → X-Symbol */
.menu-toggle.active .bar:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-toggle.active .bar:nth-child(2){opacity:0;}
.menu-toggle.active .bar:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Navigation mobil einklappbar */
@media (max-width:880px){
  .menu-toggle{display:flex;}
  .links{
    position:absolute;
    top:64px;right:0;left:0;
    background:#fff;
    flex-direction:column;
    align-items:center;
    gap:18px;
    padding:24px 0;
    border-bottom:1px solid var(--line);
    transform:translateY(-150%);
    transition:transform .35s ease;
  }
  .links.show{transform:translateY(0);}
  .links a{font-size:1.1rem;color:#1b1b1b;}
  .links .btn.small{margin-top:4px;}
}

/* Desktop-Header leicht anpassen */
@media (min-width:881px){
  .links{display:flex !important;position:static;transform:none;background:none;padding:0;}
}

/* === Tooltip (DSGVO-Hinweis) === */
.has-tooltip {
  position: relative;
}

.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%; /* über dem Button */
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  background: rgba(0,0,0,0.9);
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 100;
}

/* kleiner Pfeil */
.has-tooltip::before {
  content: "";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.9) transparent transparent transparent;
  opacity: 0;
  transition: opacity .25s;
  z-index: 101;
}

.has-tooltip:hover::after,
.has-tooltip:hover::before {
  opacity: 1;
}

/* Mobile: Tooltip unten anzeigen */
@media (max-width:600px){
  .has-tooltip::after{
    bottom:auto;
    top:130%;
  }
  .has-tooltip::before{
    bottom:auto;
    top:120%;
    border-color: transparent transparent rgba(0,0,0,0.9) transparent;
  }
}

/* Hero-Layer sauber ordnen */
.hero video { z-index: 0; position: relative; }
.hero .hero-overlay { z-index: 1; position: absolute; }
.hero .hero-content { z-index: 2; position: absolute; }

/* Tooltip Basis (falls noch nicht drin) */
.has-tooltip { position: relative; z-index: 5; } /* über Overlay/Video */

.has-tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  width: 240px;
  background: rgba(0,0,0,0.9);
  color: #fff;
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
  line-height: 1.3;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s;
  z-index: 1000;
}
.has-tooltip::before {
  content: "";
  position: absolute;
  bottom: 120%;
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: rgba(0,0,0,0.9) transparent transparent transparent;
  opacity: 0;
  transition: opacity .25s;
  z-index: 1001;
}

/* Desktop: Hover/Fokus zeigt Tooltip */
.has-tooltip:hover::after,
.has-tooltip:hover::before,
.has-tooltip:focus-visible::after,
.has-tooltip:focus-visible::before { opacity: 1; }

/* Mobile: wir toggeln per JS eine Klasse */
.has-tooltip.show-tip::after,
.has-tooltip.show-tip::before { opacity: 1; }

/* Mobile-Position unten */
@media (max-width:600px){
  .has-tooltip::after{
    bottom:auto; top:130%;
  }
  .has-tooltip::before{
    bottom:auto; top:120%;
    border-color: transparent transparent rgba(0,0,0,0.9) transparent;
  }
}
/* ========== MOBILE HERO FIX v2 (Video bleibt sichtbar) ========== */
@media (max-width:600px){

  /* Video als kompakter Banner oben */
  .hero-video{
    display:block !important;
    position:relative;
    z-index:0;
    width:100%;
    height:45vh;          /* ~45% der Höhe; bei Bedarf 40–55 anpassen */
    max-height:360px;
    object-fit:cover;
    border-radius:0;
    filter:saturate(1.02) contrast(1.02);
  }

  /* Overlay auf Mobile nicht nötig */
  .hero .hero-overlay{ display:none !important; }

  /* Kein absolut positionierter Content mehr: normal darunter stapeln */
  .hero-content{
    position:static !important;   /* vorher absolut → überschreibt das */
    inset:auto !important;
    z-index:1;
    padding:16px;
    text-align:left;
    color:#1b1b1b;                /* dunkle Schrift statt weiß */
    min-height:auto;
    background:
      linear-gradient(180deg, rgba(255,255,255,0.9), rgba(250,247,242,1) 60%);
  }

  /* Kicker + Typo kompakter & auf hell */
  .kicker{
    font-size:.82rem;
    padding:6px 12px;
    border-radius:999px;
    color:#7f1d1d !important;
    background:#fdecec !important;
    border:1px solid #e6b3b3 !important;
  }
  h1{
    color:#1b1b1b !important;
    font-size: clamp(22px, 6vw, 30px);
    line-height:1.25;
    margin:10px 0 6px;
    text-shadow:none !important;
  }
  .sub{
    color:#333 !important;
    font-size:.96rem;
    line-height:1.45;
    margin-top:6px;
    text-shadow:none !important;
  }

  /* CTA-Buttons: volle Breite, dichter */
  .cta-stack{ gap:10px; margin-top:12px; }
  .btn-cta{ width:100%; min-width:0; padding:12px 14px; border-radius:14px; }
  .btn-cta .ico{ width:34px; height:34px; }

  /* Sicherstellen, dass nichts unter dem Video „durchscheint“ */
  .hero{ background:var(--bg); }
}