/* ===========================
   SpaceClean – styles.css
   (Vollständige, bereinigte Version)
   =========================== */

/* --- Grundlayout --- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  color: #0f172a; /* slate-900 */
  background: #ffffff;
  line-height: 1.6;
}

/* Bilder laufen nie über */
img { max-width: 100%; height: auto; display: block; }

/* Hilfsklassen */
.container { max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.section { padding: 56px 0; }
.lead { color:#475569; margin: 6px 0 18px; }
.small { font-size: 14px; color:#475569; }

/* --- Fester Seitenhintergrund mit Logo (funktioniert auf Handy) --- */
.page-bg{
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: center center / clamp(320px, 60vw, 900px) no-repeat url("assets/bg-logo.png");
  filter: blur(0.7px);  /* 0–1px je nach Geschmack */
  opacity: .18;         /* 0.10–0.20 dezent */
}
.page-bg::after{
  content:""; position:absolute; inset:0;
  background: rgba(255,255,255,.4); /* helles „Nebel“-Overlay für Lesbarkeit */
}

/* --- Header / Navigation --- */
.header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255,255,255,0.9);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid #e2e8f0; /* slate-200 */
}
.nav {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  height: 72px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand .name { font-weight: 800; letter-spacing: .2px; }
.center-contact {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; font-size: 14px; color:#334155;
}
.center-contact a { color: inherit; text-decoration: none; }
.center-contact .dot{
  width:6px;height:6px;border-radius:999px;background:#94a3b8; display:inline-block;
}
.actions { display: flex; justify-content: flex-end; gap: 10px; }

/* Buttons */
.btn {
  display:inline-block; padding:12px 16px; border-radius:10px;
  text-decoration:none; font-weight:700; border:1px solid #e2e8f0; color:#0f172a;
  background:#fff; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(2,6,23,.08); }
.btn-primary {
  background: linear-gradient(135deg, #16a34a, #4ade80);
  color:#fff; border: none;
}

/* --- Hero + Slideshow --- */
.hero.container {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 24px;
  align-items: center; padding: 28px 0;
}
.hero h1 { font-size: 42px; line-height: 1.15; margin: 0 0 12px; }
.hero p { font-size: 18px; color:#334155; margin: 0 0 12px; }
.badges { display:flex; flex-wrap:wrap; gap:8px; }
.badge { background:#e2f0ff; color:#0c4a6e; padding:6px 10px; border-radius:999px; font-weight:600; font-size:13px; }
.card { background:#fff; border:1px solid #e2e8f0; border-radius:16px; padding:12px; box-shadow:0 2px 6px rgba(2,6,23,.04); }

/* Slideshow (Fade) */
.hero-slideshow{ position:relative; height:400px; border-radius:12px; overflow:hidden; background:#000; }
.slideshow-container{ position:relative; width:100%; height:100%; }
.slide{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  opacity:0; transition:opacity .8s ease-in-out;
}
.slide.active{ opacity:1; }

/* --- Vorteile / Karten / Grids --- */
.grid-3 {
  display:grid; gap:16px; grid-template-columns: repeat(3, 1fr);
}
.icon { font-size: 26px; }

/* --- Akkordeon (zero-JS mit <details>) --- */
.accordion-list { display: grid; gap: 12px; }
.accordion-list details{
  background:#f7f7f8;
  border-radius:12px;
  box-shadow:0 1px 2px rgba(2,6,23,.05);
  overflow:hidden;
}
.accordion-list summary{
  position: relative; z-index: 1;
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:18px 16px;
  cursor:pointer; user-select:none;
}
.accordion-list summary::-webkit-details-marker{ display:none; }
.accordion-list .chev{
  width:22px; height:22px; flex:0 0 auto;
  stroke:#64748b; stroke-width:2; fill:none;
  transition:transform .2s ease;
}
.accordion-list details[open] .chev{ transform: rotate(180deg); }
.accordion-list .acc-panel{
  margin:0 16px 16px 16px;
  background:#e9f2f5;
  border-radius:10px;
  padding:14px 16px;
  color:#334155;
}

/* --- Bewertungen --- */
#bewertungen .card { background:#fff; box-shadow:0 4px 12px rgba(0,0,0,.08); border-radius:12px; padding:20px; transition:transform .2s, box-shadow .2s; }
#bewertungen .card:hover { transform:translateY(-4px); box-shadow:0 12px 24px rgba(2,6,23,.08); }
#bewertungen .small { color:#22c55e; font-weight:600; margin-top:10px; }
#bewertungen h2 { margin-bottom:10px; }

/* --- Kontakt / Formular --- */
.contact { display:grid; grid-template-columns: 1.2fr .8fr; gap:20px; align-items:start; }
input, textarea {
  width:100%; padding:12px 12px; border-radius:10px;
  border:1px solid #e2e8f0; font:inherit; color:#0f172a; background:#fff;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus { outline:3px solid #22c55e33; border-color:#22c55e; }
label { display:block; font-weight:600; margin:6px 0 6px; }

/* --- Footer --- */
.footer {
  text-align:center; font-size:14px; padding:40px 10px;
  color:#555; background:#f7f7f7; border-top:1px solid #e2e8f0;
}
.footer a { color:#555; text-decoration:none; }
.footer a:hover { text-decoration:underline; }

/* --- Mobile CTA unten --- */
.mobile-cta{
  position:fixed; left:0; right:0; bottom:10px;
  display:flex; gap:10px; padding:10px 14px; z-index:60;
}
.mobile-cta a{
  flex:1; text-align:center; font-weight:700; border-radius:10px; padding:12px 14px;
 background: linear-gradient(135deg, #16a34a, #4ade80); color:#fff; box-shadow:0 8px 20px rgba(0,0,0,.15);
}

/* --- Responsive --- */

/* Tablet */
@media (max-width: 1024px){
  .hero.container{ grid-template-columns:1fr; gap:20px; }
  .brand img{ height:70px; }
  .center-contact{ gap:10px; font-size:13px; }
  .hero-slideshow{ height:320px; }
}

/* Smartphones */
@media (max-width: 768px){
  body{ padding:0 10px; }
  .nav{ grid-template-columns: 1fr; height:auto; gap:10px; padding:8px 0; }
  .brand{ justify-content:center; }
  .actions{ display:none; }            /* Header-Buttons oben ausblenden (unten gibt's Mobile-CTA) */
  .center-contact{ display:none; }     /* optional ausblenden, um Header schlank zu halten */

  .hero{ grid-template-columns:1fr; padding: 20px 0; }
  .hero h1{ font-size:28px; }
  .hero p{ font-size:16px; }

  .hero-slideshow{ height:250px; border-radius:12px; }

  .grid-3{ grid-template-columns:1fr; gap:14px; }

  .contact{ grid-template-columns:1fr; }
  .btn.btn-primary{ width:100%; }

  
}

/* Sehr kleine Geräte */
@media (max-width: 480px){
  .brand img{ height:52px; }
  .hero h1{ font-size:24px; }
  .badge{ font-size:11px; padding:5px 8px; }
}
/* ===== Mobile CTA unten – nur auf Smartphones ===== */
/* Standard: auf Desktop/Laptop ausgeblendet */
.mobile-cta{ display:none; }

/* Nur <= 768px anzeigen */
@media (max-width: 768px){
  /* Platz für die Leiste schaffen, damit nichts verdeckt wird */
  body{ padding-bottom: 84px; } /* Höhe der Leiste + Luft */

  .mobile-cta{
    position: fixed; left: 0; right: 0;
    bottom: max(10px, env(safe-area-inset-bottom));  /* iPhone Notch-Schutz */
    display: flex; gap: 10px; justify-content: center;
    padding: 10px 14px;
    z-index: 60;
    pointer-events: none; /* Container klicksperren, nur Buttons klickbar */
  }
  .mobile-cta a{
    pointer-events: auto;           /* Buttons klickbar */
    flex: 1; max-width: 520px;      /* nicht endlos breit */
    text-align: center; font-weight: 700;
    border-radius: 12px; padding: 12px 14px;
   background: linear-gradient(135deg, #16a34a, #4ade80);
    color: #fff; text-decoration: none;
    box-shadow: 0 8px 20px rgba(0,0,0,.15);
  }
}
/* Floating-Button nur auf Desktop */
.fab-desktop{
  position: fixed; right: 22px; bottom: 22px; z-index: 50;
  width: 56px; height: 56px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, #16a34a, #4ade80);
  color:#fff; text-decoration:none; font-size:22px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}
@media (max-width:768px){ .fab-desktop{ display:none; } }
/* --- Header-Buttons optimieren --- */
.header .actions .btn {
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 600;
  border-radius: 8px;
  line-height: 1.2;
}

.header .actions .btn-primary {
 background: linear-gradient(135deg, #16a34a, #4ade80);
  color: #fff;
  border: none;
}

.header .actions .btn-primary:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}
/* --- Abstand unter Akkordeon-Button --- */
#leistungen .center {
  margin-top: 24px;
  margin-bottom: 48px; /* mehr Luft nach unten */
}
/* ===== NRW-Karte ===== */
.map-card {
  padding: 0;                  /* keine Innenabstände – Map füllt die Card */
  overflow: hidden;            /* saubere runde Ecken */
  border-radius: 16px;
}

#nrw-map {
  display: block;
  width: 100%;
  height: 420px;               /* feste Höhe für Leaflet */
  border-radius: 16px;
}

/* Legende unter der Karte */
.map-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-top: 1px solid rgba(0,0,0,.06);
  font-size: 14px;
}
.map-legend .spacer { width: 18px; }

.dot {
  display: inline-block;
  width: 12px; height: 12px;
  border-radius: 999px;
  vertical-align: middle;
}
.dot-main {
  width: 14px; height: 14px;
  background: #22c55e;
  border: 2px solid #166534;
}
.dot-sub {
  background: #4ade80;
  border: 2px solid #16a34a;
}

/* Mobile: etwas flacher */
@media (max-width: 768px) {
  #nrw-map { height: 320px; }
}
/* Leaflet: Kacheln & Marker dürfen NICHT durch globales img {max-width:100%} skaliert werden */
.leaflet-container img,
.leaflet-pane img,
.leaflet-marker-icon,
.leaflet-tile {
  max-width: none !important;
}
/* ===== Statische NRW-Karte (PNG + Pins) ===== */
.map-card { padding: 0; overflow: hidden; border-radius: 16px; }

.nrw-static-map {
  position: relative;
  width: 100%;
  /* das <img> bestimmt die Höhe -> immer korrekt, keine grauen Flächen */
  background: #eef3f7; /* zarter Hintergrund während Bild lädt */
}

.nrw-static-map > img {
  display: block;
  width: 100%;
  height: auto;      /* Bild hält sein Seitenverhältnis */
}

/* Pins */
.pin {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: #4ade80;               /* grün hell */
  border: 2px solid #16a34a;         /* grün dunkel */
  box-shadow: 0 0 0 2px #ffffff80;   /* weißer Halo für bessere Lesbarkeit */
  cursor: default;
}

.pin.main {
  width: 14px; height: 14px;
  background: #22c55e;
  border-color: #166534;
}

/* Legende */
.map-legend {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border-top: 1px solid rgba(0,0,0,.06);
  font-size: 14px;
}
.map-legend .spacer { width: 18px; }
.dot { display:inline-block; width:12px; height:12px; border-radius:999px; }
.dot-main { width:14px; height:14px; background:#22c55e; border:2px solid #166534; }
.dot-sub  { background:#4ade80;   border:2px solid #16a34a; }

/* Optional: Mobile etwas kompakter */
@media (max-width: 768px){
  .map-legend { font-size: 13px; }
}