/* Farben und Variablen (Deutsch) */
:root {
  --hintergrund-hell: #f8f8f8; /* خلفية فاتحة */
  --text-dunkel: #333333;     /* نص داكن */
  --akzent-rot: #E50914;      /* أحمر مميز */
  --akzent-gold: #FFD700;     /* ذهبي مميز */
  --grau-mittel: #cccccc;     /* رمادي متوسط للحدود */
  --grau-hell: #eeeeee;       /* رمادي فاتح للخلفيات الفرعية */
  --weiss: #FFFFFF;           /* أبيض */
  --schwarz: #000000;         /* أسود */
  --grau-dunkel: #222222;     /* رمادي غامق للأزرار الداكنة */
  /* درجات خفيفة (Pastel) للأقسام المميّزة – أقوى قليلاً */
  --tint-rot: #ffe8ea;        /* خلفية وردية أقوى */
  --tint-gold: #fff3cc;       /* خلفية ذهبية أقوى */
  --tint-gruen: #eafdf2;      /* خلفية خضراء أقوى */
  --tint-grau: #f1f2f5;       /* خلفية رمادية أقوى */
  /* ارتفاع الهيدر للتعامل مع القائمة الجانبية */
  --kopf-h: 64px;
}

/* Mobile-First Grundlayout */
html, body { margin: 0; padding: 0; background: var(--hintergrund-hell); color: var(--text-dunkel); font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
img { max-width: 100%; display: block; }
a { color: var(--akzent-rot); text-decoration: none; }
button { font: inherit; cursor: pointer; }
/* Einheitlicher Button-Stil */
.btn-like { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 10px; min-height: 48px; font-weight: 600; transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .05s ease; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.btn-like:active { transform: translateY(1px); }
.btn-primary { background: var(--akzent-rot); color: var(--weiss); border: 0; }
.btn-primary:hover { filter: brightness(0.95); }

.service-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 10px;
  min-height: 48px;
  font-weight: 600;
  transition: background .2s ease, color .2s ease, box-shadow .2s ease, transform .05s ease;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  background: var(--akzent-rot);
  color: var(--weiss);
  border: 0;
  text-decoration: none;
  margin: 5px;
}

.service-button:hover { filter: brightness(0.95); }
.btn-secondary { background: var(--grau-hell); color: var(--text-dunkel); border: 1px solid var(--grau-mittel); }
.btn-secondary:hover { background: #f2f2f2; }
.btn-outline { background: transparent; color: var(--text-dunkel); border: 1px solid var(--grau-mittel); }
.btn-outline:hover { border-color: var(--akzent-gold); }
.btn-whatsapp { background: #25D366; color: var(--weiss); border: 0; }
.btn-whatsapp:hover { filter: brightness(0.95); }
.btn-call { background: var(--akzent-rot); color: var(--weiss); border: 0; }
.btn-call:hover { filter: brightness(0.95); }
.btn-light { background: var(--weiss); color: var(--text-dunkel); border: 1px solid var(--grau-mittel); }
.btn-light:hover { background: #fcfcfc; }
.btn-like:focus-visible { outline: 3px solid rgba(255, 215, 0, .4); outline-offset: 2px; }

/* Kopfzeile fixiert */
.kopfzeile { position: fixed; top: 0; left: 0; right: 0; background: var(--weiss); border-bottom: 1px solid var(--grau-hell); z-index: 2000; min-height: var(--kopf-h); }
.kopf-inhalt { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; }
.logo { height: 28px; width: auto; }
@media (max-width: 600px){ .logo { height: 26px; } }
.logo-link { display: inline-flex; align-items: center; text-decoration: none; }
.menue-knopf { background: var(--akzent-rot); color: var(--weiss); border: 0; border-radius: 10px; padding: 10px 12px; min-height: 44px; min-width: 44px; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.menue-knopf:hover { filter: brightness(0.95); }

/* Seitenmenü von links - خلفية سوداء ولا تغطي الهيدر */
.seitenmenue { position: fixed; top: var(--kopf-h); left: -100%; width: 80%; max-width: 360px; height: calc(100vh - var(--kopf-h)); background: #1a1a1a; transition: left .3s ease; z-index: 1100; padding: 16px; display: flex; flex-direction: column; gap: 16px; border-right: 1px solid #333; box-sizing: border-box; overflow-y: auto; }
.seitenmenue.aktiv { left: 0; }
.menue-schliessen { align-self: flex-end; background: transparent; color: var(--weiss); font-size: 24px; border: 0; min-height: 44px; min-width: 44px; }
.menue-liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.menue-liste a { display: block; padding: 10px 12px; border-radius: 8px; background: #333; color: var(--weiss); transition: background .2s ease; }
.menue-liste a:hover { background: #444; }
.untermenue { display: flex; gap: 8px; flex-wrap: wrap; }
.untermenue button { background: #333; color: var(--weiss); border: 1px solid #555; border-radius: 10px; padding: 12px 14px; min-height: 48px; box-shadow: 0 2px 6px rgba(0,0,0,.2); transition: background .2s ease; }
.untermenue button:hover { background: #444; }

/* Kontaktleiste unten fixiert */
.kontaktleiste { position: fixed; bottom: 0; left: 0; right: 0; display: flex; gap: 8px; padding: 8px; background: rgba(255,255,255,.9); backdrop-filter: saturate(120%) blur(4px); z-index: 1000; border-top: 1px solid var(--grau-hell); }
.kontakt-btn { flex: 1; text-align: center; border-radius: 10px; padding: 12px 16px; min-height: 48px; color: var(--weiss); box-shadow: 0 2px 6px rgba(0,0,0,.06); font-weight: 600; }
.kontakt-btn.anruf { background: var(--akzent-rot); }
.kontakt-btn.whatsapp { background: #25D366; } /* WhatsApp green */
.kontakt-btn:hover { filter: brightness(0.95); }

/* Floating Kontaktbuttons unten links */
.kontakt-float { position: fixed; left: 10px; bottom: 10px; display: flex; flex-direction: row; gap: 4px; z-index: 1003; background: rgba(255,255,255,.20); backdrop-filter: saturate(140%) blur(4px); border: 1px solid var(--grau-hell); padding: 2px; border-radius: 10px; box-shadow: 0 2px 6px rgba(0,0,0,.05); }
.kontakt-float a { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; box-shadow: 0 2px 8px rgba(0,0,0,.10); color: var(--weiss); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease; }
.kontakt-float a .icon { display: none; }
.kontakt-float a svg { width: 20px; height: 20px; fill: var(--weiss); }
.kontakt-float a:hover { filter: brightness(0.95); transform: translateY(-0.5px); }
.kontakt-float a:focus-visible { outline: 3px solid rgba(255,215,0,.35); outline-offset: 2px; }
.kontakt-float .wa { background: #25D366; }
.kontakt-float .call { background: var(--akzent-rot); }
.kontakt-float .kontakt { background: var(--akzent-gold); }

/* Erzwinge Entfernung aller Google-Maps-Einbettungen, auch wenn JS nicht läuft */
.maps-einbettung, .maps-rahmen, iframe[src*="google.com/maps"] { display: none !important; }

/* Style für Kontakt-Link im Footer, damit er wie Button erscheint */
.fuss .link-buttons a {
  display: inline-block;
  background: var(--akzent-rot);
  color: var(--weiss);
  border: 0;
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 40px;
  box-shadow: 0 2px 6px rgba(0,0,0,.06);
  font-weight: 700;
  text-decoration: none;
  margin-right: 6px;
}
.fuss .link-buttons a:hover { filter: brightness(0.95); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Seitenabstand unter Kopf- und Kontaktleiste */
main, section { padding: 16px; box-sizing: border-box; max-width: 960px; margin: 0 auto; }
.hero { padding-top: 76px; padding-bottom: 0; background: linear-gradient(180deg, rgba(229,9,20,.05), transparent); }
.hero-hintergrund { background-image: url('img/master.webp'); background-size: cover; background-position: center; position: absolute; inset: 0; opacity: .05; pointer-events: none; }
.hero h1 { font-size: 22px; line-height: 1.25; margin: 0 0 10px; color: var(--text-dunkel); }
.slogans { display: grid; gap: 6px; font-weight: 700; }
.slogans span { display: inline-block; opacity: 0; animation: sanft 6s ease infinite; color: var(--text-dunkel); }
.slogans span:nth-child(1){ animation-delay: .2s; }
.slogans span:nth-child(2){ animation-delay: 1.2s; }
.slogans span:nth-child(3){ animation-delay: 2.2s; }
.slogans span:nth-child(4){ animation-delay: 3.2s; }
@keyframes sanft { 0%{ transform: translateY(6px); opacity: 0;} 10%{ transform: translateY(0); opacity: 1;} 90%{opacity:1;} 100%{opacity:0;} }

.hero-ctas { display: flex; gap: 8px; margin-top: 8px; justify-content: center; flex-wrap: wrap; }
.primar-cta, .sekundaer-cta { display: inline-block; padding: 8px 12px; border-radius: 10px; min-height: 40px; text-align: center; font-weight: 700; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.primar-cta { background: var(--akzent-rot); color: var(--weiss); border: 0; }
.sekundaer-cta { background: var(--grau-hell); color: var(--text-dunkel); border: 1px solid var(--grau-mittel); }
.primar-cta:hover { filter: brightness(0.95); }
.sekundaer-cta:hover { background: #f2f2f2; }
.verfuegbarkeit { margin-top: 8px; color: var(--text-dunkel); }

/* Städte */
.staedte h2, .leistungen h2, .vorteile h2, .bewertungen h2, .bilder-slider h2, .faq h2, .kontakt h2 { font-size: 18px; margin: 12px 0; color: var(--text-dunkel); }
.bezirk-auswahl { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--grau-mittel); background: var(--weiss); color: var(--text-dunkel); min-height: 48px; }
.bezirk-text { margin-top: 8px; color: var(--text-dunkel); }
/* إطارات خفيفة وظلال حول الأقسام */
.staedte, .leistungen, .bewertungen, .faq, .kontakt {
  background: var(--weiss);
  border: 1px solid var(--grau-hell);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,.04);
}

/* Leistungen Karten */
.leistungen-karten { display: grid; gap: 12px; grid-template-columns: 1fr; }
.karte { background: var(--weiss); border: 1px solid var(--grau-hell); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.karte h3 { margin: 8px 12px; color: var(--text-dunkel); }
.karte p { margin: 0 12px 12px; color: var(--text-dunkel); }
.karten-aktionen { display: flex; gap: 8px; padding: 12px; }
/* أزرار الكروت: تصغير الحجم وتوحيد النِسَب وإضافة أيقونات */
.karten-aktionen .btn-detail, .karten-aktionen .btn-call { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 10px; padding: 10px 14px; min-height: 40px; font-weight: 600; font-size: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.06); border: 1px solid var(--grau-mittel); }
.karten-aktionen .btn-detail { background: var(--grau-dunkel); color: var(--weiss); border-color: transparent; }
.karten-aktionen .btn-call { background: var(--akzent-rot); color: var(--weiss); border-color: transparent; }
.karten-aktionen .btn-detail:hover { filter: brightness(0.97); }
.karten-aktionen .btn-call:hover { filter: brightness(0.95); }
.karten-aktionen .btn-detail svg, .karten-aktionen .btn-call svg { width: 18px; height: 18px; fill: var(--weiss); }

/* Modal Fenster */
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; align-items: center; justify-content: center; z-index: 4000; pointer-events: auto; }
.modal.aktiv { display: flex; }
.modal-inhalt { background: var(--hintergrund-hell); border: 1px solid var(--grau-mittel); border-radius: 12px; padding: 16px; max-width: 720px; width: 92%; box-shadow: 0 5px 15px rgba(0,0,0,.3); pointer-events: auto; }
.modal-scroll { max-height: 80vh; overflow: auto; }
.modal-schliessen { position: sticky; top: 0; right: 0; margin-left: auto; background: var(--grau-hell); color: var(--text-dunkel); border: 1px solid var(--grau-mittel); border-radius: 10px; padding: 6px 10px; font-size: 20px; min-width: 40px; min-height: 40px; box-shadow: 0 2px 6px rgba(0,0,0,.06); z-index: 5; }
body.modal-open { overflow: hidden; }

/* Preistabelle */
.preistabelle-wrapper { overflow-x: auto; }
.preistabelle { width: 100%; border-collapse: collapse; }
.preistabelle th, .preistabelle td { border: 1px solid var(--grau-mittel); padding: 10px; color: var(--text-dunkel); }
.hinweis { color: var(--text-dunkel); margin-top: 8px; }
/* ظل خفيف لجدول الأسعار */
.preistabelle { box-shadow: 0 4px 12px rgba(0,0,0,.03); }

/* Preise – bessere Lesbarkeit und volle Breite auf Mobilgeräten */
.preistabelle thead th { position: sticky; top: 0; background: var(--weiss); z-index: 1; }
.preistabelle tbody tr:nth-child(odd) { background: #f7f7f9; }
.preistabelle a { color: var(--akzent-rot); font-weight: 700; text-decoration: none; }

@media (max-width: 600px) {
  .modal { align-items: flex-start; padding: 8px; }
  .modal-inhalt { width: 100%; max-width: 100%; padding: 12px; border-radius: 12px; }
  .modal-scroll { max-height: 86vh; }
  .preistabelle th, .preistabelle td { padding: 8px; font-size: 14px; }
  .preistabelle th:nth-child(2), .preistabelle td:nth-child(2) { white-space: normal; }
}

/* Vorteile */
.vorteile-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vorteil { background: var(--weiss); border: 1px solid var(--grau-hell); border-radius: 12px; padding: 12px; display: flex; align-items: center; gap: 8px; box-shadow: 0 2px 5px rgba(0,0,0,.03); min-height: 110px; }
.vorteil p { margin: 0; font-size: 14px; line-height: 1.45; color: var(--text-dunkel); font-weight: 700; }
.icon { font-size: 18px; color: var(--akzent-rot); opacity: .9; width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }

/* ألوان متناسقة لكل بوكس في "Warum wir" */
.vorteile-liste .vorteil:nth-child(1) { background: var(--tint-rot); border-color: rgba(229,9,20,.18); }
.vorteile-liste .vorteil:nth-child(1) .icon { color: var(--akzent-rot); }

.vorteile-liste .vorteil:nth-child(2) { background: var(--tint-gold); border-color: rgba(255,215,0,.25); }
.vorteile-liste .vorteil:nth-child(2) .icon { color: var(--akzent-gold); }

.vorteile-liste .vorteil:nth-child(3) { background: var(--tint-grau); border-color: rgba(0,0,0,.08); }
.vorteile-liste .vorteil:nth-child(3) .icon { color: var(--text-dunkel); }

.vorteile-liste .vorteil:nth-child(4) { background: var(--tint-gruen); border-color: rgba(37,211,102,.22); }
.vorteile-liste .vorteil:nth-child(4) .icon { color: #25D366; }

/* علامة نصية صغيرة بين الشعار والقائمة */
.marke { font-family: "Segoe Script", "Lucida Handwriting", cursive; font-size: 13px; font-weight: 700; color: var(--text-dunkel); opacity: .9; margin: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; max-width: calc(100vw - 140px); }
.kopf-inhalt { gap: 8px; }

/* قسم مزايا إضافية تحت الأسئلة */
.zusatz-vorteile { background: var(--weiss); border: 1px solid var(--grau-hell); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.04); }
.zusatz-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
.zusatz-item { background: var(--weiss); border: 1px solid var(--grau-hell); border-radius: 12px; padding: 12px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.03); }

/* سكشن الصور + النص (بديل للZusatz-Vorteile) */
.regional-cta{ background: var(--weiss); border: 1px solid var(--grau-hell); border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.04); }
.regional-grid{ display:grid; gap:12px; grid-template-columns: 1fr 1fr; }
.regional-item{ background: var(--weiss); border: 1px solid var(--grau-hell); border-radius: 12px; overflow:hidden; box-shadow:0 2px 6px rgba(0,0,0,.05); display:flex; flex-direction:column; }
.regional-item .rg-media{ aspect-ratio: 16/9; background: #f7f7f7; width:50%; margin:8px auto; }
.regional-item .rg-media svg, .regional-item .rg-media img{ width:100%; height:100%; object-fit:contain; display:block; }
.regional-item .rg-text{ padding:12px; display:flex; flex-direction:column; gap:6px; }
.regional-item .rg-title{ margin:0; font-weight:800; font-size:16px; line-height:1.4; color:var(--text-dunkel); }
.regional-item p{ margin:0; font-size:14px; line-height:1.5; color:var(--text-dunkel); }

@media (max-width: 680px){
  .regional-grid{ grid-template-columns: 1fr; }
  .regional-item .rg-media{ width:100%; max-width: 420px; aspect-ratio: auto; margin: 8px auto; }
  .regional-item .rg-media img{ width:100%; height:auto; object-fit:contain; margin:0; }
}
.zusatz-icon { width: 56px; height: 56px; border-radius: 12px; background: var(--weiss); border: 1px solid var(--grau-hell); box-shadow: 0 2px 6px rgba(0,0,0,.05); display: flex; align-items: center; justify-content: center; margin: 0 auto 10px; }
.zusatz-icon svg { width: 30px; height: 30px; }
.zusatz-item h3 { margin: 6px 0 6px; font-size: 16px; line-height: 1.35; font-weight: 800; color: var(--text-dunkel); }
.zusatz-item p { margin: 0; font-size: 14px; color: var(--text-dunkel); }
/* ألوان خفيفة منسجمة لكل عنصر */
.zusatz-grid .zusatz-item:nth-child(1) { background: var(--tint-gold); border-color: rgba(255,215,0,.25); }
.zusatz-grid .zusatz-item:nth-child(2) { background: var(--tint-gruen); border-color: rgba(37,211,102,.22); }
.zusatz-grid .zusatz-item:nth-child(3) { background: var(--tint-rot); border-color: rgba(229,9,20,.18); }
.zusatz-grid .zusatz-item:nth-child(4) { background: var(--tint-grau); border-color: rgba(0,0,0,.08); }

/* تحسين تجاوب قسم Kontakt */
.kontakt .formular { max-width: 680px; margin: 0 auto; }
.formular label { display: block; }
.formular input, .formular select, .formular textarea { box-sizing: border-box; }

.kontakt-grid { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.kontakt-grid .karte { padding-bottom: 8px; }
.details-list { list-style: none; padding: 12px; margin: 0; display: grid; gap: 10px; }
.details-item { display: grid; grid-template-columns: 160px 1fr; gap: 8px; align-items: center; }
.details-item h3 { margin: 0; font-size: 14px; font-weight: 800; color: var(--text-dunkel); }
.details-item p, .details-item a { margin: 0; font-size: 14px; color: var(--text-dunkel); text-decoration: none; }
.kontakt-cta { display: flex; gap: 8px; padding: 12px; }
.kontakt-cta .primar-cta, .kontakt-cta .sekundaer-cta { flex: 1; }
@media (max-width: 740px){
  .kontakt-grid { grid-template-columns: 1fr; }
  .details-item { grid-template-columns: 1fr; }
}

/* Bewertungen Karussell */
.bewertungen-slider { position: relative; overflow: hidden; border-radius: 12px; }
.bewertungen-track { display: flex; transition: transform .4s ease; }
.bewertung { flex: 0 0 100%; background: var(--weiss); border: 1px solid var(--grau-hell); border-radius: 12px; padding: 12px; box-shadow: 0 4px 12px rgba(0,0,0,.04); box-sizing: border-box; }
.bewertungen-nav { position: absolute; top: 50%; left: 0; right: 0; display: flex; justify-content: space-between; transform: translateY(-50%); padding: 0 8px; }
.bewertungen-nav button { background: rgba(0,0,0,.5); color: var(--weiss); border: 0; border-radius: 50%; width: 36px; height: 36px; }
.bewertungen-dots { display: flex; justify-content: center; gap: 6px; margin-top: 8px; }
.bewertungen-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--grau-mittel); }
.bewertungen-dot.aktiv { background: var(--akzent-rot); }
.sterne { color: var(--akzent-gold); }

/* Maps Rahmen */
.maps-rahmen { border: 1px solid var(--grau-hell); border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,.04); }

/* Slider - نقش قوي وألوان صريحة متناغمة */
.slider-container { position: relative; overflow: hidden; border-radius: 16px; margin-bottom: 0; box-shadow: 0 10px 24px rgba(0,0,0,.10); }
.slider-track { display: flex; transition: transform 0.5s ease-in-out; }
.slider-slide {
  flex: 0 0 100%;
  padding: 38px 22px;
  box-sizing: border-box;
  text-align: center;
  border: 1px solid var(--grau-hell);
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #fef3f5 0%, #ffe7ea 100%);
}
.slider-slide::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="diag" width="15" height="15" patternUnits="userSpaceOnUse" patternTransform="rotate(45)"><path d="M0,7.5 L15,7.5" fill="none" stroke="%23ffffff" stroke-width="0.8" opacity="0.12"/></pattern></defs><rect width="100" height="100" fill="url(%23diag)"/></svg>');
  opacity: 0.8;
  z-index: 1;
}
.slider-slide > * { position: relative; z-index: 2; }
/* ألوان صريحة لكل سلايد مع انسجام مع النص */
.slider-slide:nth-child(1) { background: linear-gradient(135deg, #2c1810 0%, #8B0000 30%, #4a0e0e 70%, #1a0a0a 100%); }
.slider-slide:nth-child(2) { background: linear-gradient(135deg, #0a0a1a 0%, #1a1a3a 30%, #2a2a4a 70%, #0f0f2f 100%); }
.slider-slide:nth-child(3) { background: linear-gradient(135deg, #0a2a1a 0%, #1a4a2a 30%, #2a3a4a 70%, #0f1f2f 100%); }
/* نص أبيض مع ظلال لتحسين المقروئية فوق الخلفيات الصريحة */
.slider-slide h1 { font-size: 26px; margin-bottom: 12px; color: #ffffff; text-shadow: 0 3px 10px rgba(0,0,0,.25); }
/* اجعل عناوين السلايدر H2 بيضاء لضمان المقروئية فوق الخلفيات الداكنة */
.slider-slide h2 { font-size: 24px; margin-bottom: 12px; color: #ffffff; text-shadow: 0 3px 10px rgba(0,0,0,.25); }
.slider-slide .slogan { font-size: 17px; color: rgba(255,255,255,.92); margin-bottom: 26px; font-weight: 600; text-shadow: 0 2px 6px rgba(0,0,0,.25); }
/* أزرار الـCTA داخل السلايدر بتوازن وسيميترية */
.slider-container .hero-ctas { display: flex; gap: 10px; justify-content: center; }
.slider-container .hero-ctas .primar-cta,
.slider-container .hero-ctas .sekundaer-cta { flex: 1 1 180px; padding: 12px 18px; border-radius: 12px; min-height: 44px; font-weight: 700; box-shadow: 0 6px 18px rgba(0,0,0,.18); letter-spacing: .2px; }
.slider-container .hero-ctas .primar-cta { background: linear-gradient(135deg, #ff4d4f 0%, #e50914 100%); color: #ffffff; border: 1px solid rgba(255,255,255,.35); }
.slider-container .hero-ctas .primar-cta:hover { filter: brightness(1.05); transform: translateY(-1px); }
.slider-container .hero-ctas .sekundaer-cta { background: rgba(255,255,255,.18); color: #ffffff; border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(6px); }
.slider-container .hero-ctas .sekundaer-cta:hover { background: rgba(255,255,255,.25); transform: translateY(-1px); }
/* أزرار تنقل السلايدر بشكل أكثر أناقة وتناسق */
.slider-nav { position: absolute; top: 50%; width: 100%; display: flex; justify-content: space-between; transform: translateY(-50%); padding: 0 15px; box-sizing: border-box; z-index: 3; }
.slider-nav button { 
  width: 42px; height: 42px; padding: 0;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.22), rgba(255,255,255,.10));
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.40);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  transition: all .2s ease;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  backdrop-filter: blur(6px);
}
.slider-nav button:hover { transform: scale(1.08) translateY(-1px); box-shadow: 0 14px 30px rgba(0,0,0,.35); }
.slider-dots { display: flex; justify-content: center; margin-top: 14px; gap: 10px; }
.slider-dot { width: 10px; height: 10px; background: rgba(255,255,255,.70); border: 2px solid rgba(255,255,255,.85); border-radius: 50%; cursor: pointer; transition: all .2s ease; box-shadow: 0 2px 6px rgba(0,0,0,.2); }
.slider-dot.active { background: var(--akzent-rot); border-color: var(--akzent-rot); transform: scale(1.15); box-shadow: 0 4px 10px rgba(229,9,20,.35); }

.slider-slide:not(:first-child) { display: none !important; }
.slider-nav, .slider-dots { display: none !important; }
.slider-track { transform: none !important; transition: none !important; }

/* Bilder Slider */
.bilder-slider { position: relative; overflow: hidden; border-radius: 12px; background: var(--weiss); border: 1px solid var(--grau-hell); box-shadow: 0 4px 12px rgba(0,0,0,.04); }
.bilder-slider .slides { display: flex; overflow: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
.bilder-slider .slides img { flex: 0 0 100%; scroll-snap-align: start; user-select: none; pointer-events: none; }
.bilder-slider .slides img { height: auto; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.bilder-slider .punkte { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.bilder-slider .punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--grau-mittel); }
.bilder-slider .punkt.aktiv { background: var(--akzent-rot); }

/* Performance: Sektionen außerhalb des Sichtbereichs später rendern */
.staedte, .leistungen, .bewertungen, .faq, .kontakt, .bilder-slider {
  content-visibility: auto;
  contain-intrinsic-size: 600px;
}

/* Abstand zwischen Slider und Städte-Section weiter reduzieren */
.staedte { margin-top: 2px; }

/* FAQ */
.faq-item { 
  border: 1px solid var(--grau-hell); 
  border-radius: 12px; 
  margin-bottom: 8px; 
  box-shadow: 0 2px 8px rgba(0,0,0,.06); 
  overflow: hidden;
}
.faq-item:nth-child(odd) { background: #e8e9eb; }
.faq-item:nth-child(even) { background: var(--weiss); }
.faq-item:hover { box-shadow: 0 4px 12px rgba(0,0,0,.1); }
.faq-frage { display: flex; align-items: center; justify-content: space-between; padding: 16px; color: var(--text-dunkel); font-weight: 600; }
.faq-antwort { 
  display: none; 
  padding: 0 16px 16px; 
  color: var(--text-dunkel); 
  background: rgba(248,249,250,.8); 
  border-top: 1px solid var(--grau-hell); 
  margin: 0 8px 8px; 
  border-radius: 8px;
}
.faq-item.aktiv .faq-antwort { display: block; }
/* FAQ Toggle Button statt Inline-Styles */
.faq-toggle { background: var(--grau-hell); color: var(--text-dunkel); border: 1px solid var(--grau-mittel); border-radius: 10px; padding: 8px 10px; min-width: 40px; min-height: 36px; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.faq-toggle:hover { background: #f2f2f2; }

/* خلفيات متبادلة للأسئلة (شريطية أنيقة) */
.faq-liste { display: grid; gap: 8px; }
.faq-item:nth-child(odd) .faq-frage { background: var(--tint-grau); }
.faq-item:nth-child(even) .faq-frage { background: var(--weiss); }
.faq-item .faq-frage:hover { filter: brightness(0.99); }

/* Formular */
.formular { display: grid; gap: 10px; }
.formular input, .formular select, .formular textarea { width: 100%; padding: 12px; border-radius: 10px; border: 1px solid var(--grau-mittel); background: var(--weiss); color: var(--text-dunkel); min-height: 48px; }
.formular .senden { background: var(--akzent-rot); color: var(--weiss); border: 0; border-radius: 10px; padding: 12px 16px; min-height: 48px; font-weight: 600; box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.formular .senden:hover { filter: brightness(0.95); }
.bestaetigung { color: #28a745; } /* Green for success */
/* Garantie-Hinweis (Preise Modal) */
.garantie { color: #28a745; font-weight: 700; margin-top: 8px; }

/* Fußbereich محسن */
.fuss { 
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%); 
  border-top: 3px solid var(--akzent-rot); 
  padding: 24px 16px 16px; 
  margin-bottom: 0; 
  color: var(--weiss); 
  box-shadow: 0 -4px 20px rgba(0,0,0,.15);
}
.fuss-inhalt { 
  display: grid; 
  gap: 20px; 
  max-width: 1200px; 
  margin: 0 auto;
}
.fuss-adresse, .fuss-zeiten, .fuss-service, .fuss-links {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.1);
}
.fuss h3 { 
  color: var(--akzent-gold); 
  margin: 0 0 12px; 
  font-size: 16px; 
  font-weight: 700;
  border-bottom: 2px solid var(--akzent-rot);
  padding-bottom: 6px;
}
.fuss p { 
  margin: 6px 0; 
  line-height: 1.5; 
  color: #e0e0e0;
}
.fuss a { 
  color: var(--akzent-gold); 
  text-decoration: none; 
  transition: color .2s ease;
}
.fuss a:hover { 
  color: var(--weiss); 
  text-decoration: underline;
}
.service-liste {
  list-style: none;
  margin: 0;
  padding: 0;
}
.service-liste li {
  margin: 8px 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,.1);
  color: #e0e0e0;
}
.service-liste li:last-child {
  border-bottom: none;
}
.link-buttons { 
  display: flex; 
  gap: 8px; 
  flex-wrap: wrap; 
}
.link-buttons a {
  display: inline-block;
  background: var(--akzent-rot);
  color: var(--weiss);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: 8px;
  padding: 10px 14px;
  min-height: 40px;
  font-weight: 600;
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: all .2s ease;
  text-decoration: none;
}
.link-buttons button { 
  background: var(--akzent-rot); 
  color: var(--weiss); 
  border: 1px solid rgba(255,255,255,.2); 
  border-radius: 8px; 
  padding: 10px 14px; 
  min-height: 40px; 
  font-weight: 600; 
  font-size: 13px;
  box-shadow: 0 2px 6px rgba(0,0,0,.2); 
  transition: all .2s ease;
}
.link-buttons a:hover {
  background: #c50812;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
  color: var(--weiss);
  text-decoration: none;
}
.link-buttons button:hover { 
  background: #c50812; 
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.fuss-bottom {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.2);
  text-align: center;
}
.fuss-cta { 
  font-weight: 700; 
  color: var(--akzent-gold); 
  font-size: 16px;
  margin: 0 0 8px;
}
.copyright {
  font-size: 12px;
  color: #999;
  margin: 0;
}
.bestaetigung { color: #28a745; } /* Green for success */

/* Größere Bildschirme */
 @media (min-width: 768px) {
   .leistungen-karten { grid-template-columns: 1fr 1fr 1fr; }
   .vorteile-liste { grid-template-columns: repeat(4, 1fr); }
   .zusatz-grid { grid-template-columns: repeat(2, 1fr); }
   .zusatz-icon { width: 60px; height: 60px; }
   .fuss-inhalt { grid-template-columns: repeat(2, 1fr); }
   .slider-slide h1 { font-size: 32px; }
   .slider-slide .slogan { font-size: 18px; }
 }

@media (max-width: 480px) {
  .menue-knopf { padding: 10px 12px; min-height: 42px; min-width: 42px; }
  .kontaktleiste { gap: 6px; padding: 6px; }
  .kontakt-btn { padding: 10px 12px; min-height: 42px; }
  .karten-aktionen .btn-detail, .karten-aktionen .btn-call { min-height: 38px; padding: 8px 12px; font-size: 13px; }
  .zusatz-item h3 { font-size: 15px; }
}

@media (min-width: 1024px) {
   .zusatz-grid { grid-template-columns: repeat(4, 1fr); }
   .zusatz-icon { width: 64px; height: 64px; }
   .fuss-inhalt { grid-template-columns: repeat(4, 1fr); }
 }

/* Erweiterung: strukturierter Text für Vorteile-Karten (Titel + Untertitel) */
.vorteile .vorteil .v-text{display:flex;flex-direction:column;gap:6px;}
.vorteile .vorteil .vt-title{margin:0;font-weight:800;font-size:15px;line-height:1.4;color:var(--text-dunkel);} 
.vorteile .vorteil .vt-sub{margin:0;font-weight:400;font-size:13px;line-height:1.5;color:var(--text-dunkel);opacity:.95;}

/* Sicherstellen أن محاذاة النص لا تغيّر تصميم الكارت */
.vorteile .vorteile-liste .vorteil{align-items:flex-start;}