/* Schlüsseldienst Kimmel Herford — Stylesheet im Apple-Stil (Systemschrift, Schwarz/Weiß/Blau, Scroll-Reveals, Pill-Buttons) */
/* Aufbau und Designsprache an die Krankenfahrten-Kimmel-Webseite angeglichen. */

:root{
  --ink:#1d1d1f;
  --ink-soft:#6e6e73;
  --ink-faint:#86868b;
  --line:#d2d2d7;
  --paper:#ffffff;
  --paper-soft:#f5f5f7;
  --blue-900:#17233f;
  --blue-800:#2c3a5e;
  --blue-700:#617cc5;
  --blue-600:#7b91ce;
  --blue-500:#9bacda;
  --blue-100:#f0f2f9;
  --blue-50:#fafbfd;
  --gold:#e0a022;
  --radius-lg:18px;
  --radius-md:12px;
  --radius-full:980px;
  --shadow:0 20px 40px -20px rgba(0,0,0,.18);
  --shadow-sm:0 10px 24px -14px rgba(0,0,0,.14);
  --maxw:1160px;
  --font-serif:-apple-system,BlinkMacSystemFont,'SF Pro Display','SF Pro Text','Helvetica Neue',Helvetica,Arial,sans-serif;
  --font-sans:-apple-system,BlinkMacSystemFont,'SF Pro Text','SF Pro Display','Helvetica Neue',Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--font-sans);
  color:var(--ink);
  background:var(--paper);
  line-height:1.47;
  font-size:17px;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
ul{padding:0;margin:0;list-style:none}
h1,h2,h3,h4{font-family:var(--font-serif);line-height:1.08;letter-spacing:-.022em;margin:0 0 .5em;font-weight:600;color:var(--ink)}
p{margin:0 0 1em}
.container{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* ---------- Scroll-Reveal ---------- */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .7s cubic-bezier(.22,.61,.36,1),transform .7s cubic-bezier(.22,.61,.36,1)}
.reveal.is-visible{opacity:1;transform:translateY(0)}
.reveal-1{transition-delay:.08s}
.reveal-2{transition-delay:.16s}
.reveal-3{transition-delay:.24s}
.reveal-4{transition-delay:.32s}
.reveal-5{transition-delay:.4s}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* ---------- Liquid Glass (wiederverwendbares Material) ---------- */
.glass{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(24px) saturate(180%);
  -webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid rgba(255,255,255,.5);
  box-shadow:0 8px 32px rgba(0,0,0,.1),inset 0 1px 0 rgba(255,255,255,.6);
}
.glass-dark{
  background:rgba(28,28,30,.5);
  backdrop-filter:blur(24px) saturate(160%);
  -webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 8px 32px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.14);
  color:#fff;
}

/* ---------- Header ---------- */
.site-header{
  position:sticky;top:0;z-index:50;
  border-bottom:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.7),0 8px 24px -18px rgba(0,0,0,.2);
}
.site-header::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  transition:background .25s ease;
}
.site-header.menu-open::before{
  background:#fff;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  padding:0 24px;max-width:var(--maxw);margin:0 auto;gap:16px;height:68px;
}
.brand{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.95rem;white-space:nowrap;flex-shrink:0}
.brand-logo{height:52px;width:auto;display:block;flex-shrink:0}
.icon-phone{display:inline-flex;flex-shrink:0}

.main-nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
.main-nav>a,.nav-item>a{
  padding:8px 14px;font-weight:400;font-size:.82rem;
  color:var(--ink-soft);white-space:nowrap;border-bottom:2px solid transparent;
  letter-spacing:-.005em;
}
.main-nav>a:hover,.nav-item>a:hover{color:var(--ink)}
.main-nav>a.active,.nav-item>a.active{color:var(--ink);font-weight:600}

/* Desktop-Untermenü (Leistungen, Einsatzgebiet) */
.nav-item{position:relative;display:flex;align-items:center}
.nav-caret{
  margin-left:4px;font-size:.9em;font-weight:300;color:var(--ink-faint);
  display:inline-block;transition:transform .2s ease;
}
.nav-item:hover .nav-caret,.nav-item:focus-within .nav-caret{transform:rotate(45deg)}
.submenu{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) scaleY(.96);transform-origin:top center;
  background:rgba(255,255,255,.96);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:10px;
  display:flex;flex-direction:column;gap:1px;min-width:220px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease;
  z-index:60;
}
.nav-item:hover .submenu,.nav-item:focus-within .submenu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) scaleY(1);
}
.submenu a{
  padding:9px 14px;border-radius:var(--radius-md);
  font-size:.85rem;font-weight:400;color:var(--ink-soft);white-space:nowrap;
}
.submenu a:hover{background:var(--paper-soft);color:var(--ink)}
.submenu a.active{color:var(--ink);font-weight:600;background:var(--paper-soft)}
.submenu.submenu-wide{display:block;columns:3 170px;column-gap:4px;min-width:560px;max-width:620px}
.submenu.submenu-wide a{break-inside:avoid;display:block}

.header-cta{display:flex;align-items:center;gap:14px;flex-shrink:0}
.phone-pill{
  display:flex;align-items:center;gap:6px;
  background:var(--blue-700);color:#fff;padding:10px 18px;border-radius:var(--radius-full);
  font-weight:600;font-size:.85rem;white-space:nowrap;
  transition:background .15s ease;
}
.phone-pill:hover{background:var(--blue-900)}
.nav-toggle{display:none;background:none;border:none;border-radius:10px;padding:8px 10px;font-size:1.5rem;line-height:1;color:var(--ink)}

/* ---------- Stadt-Auswahl (Erstbesuch-Fenster + Rundbutton) ---------- */
/* Beim allerersten Besuch fragt ein zentriertes Fenster explizit nach der Stadt.
   Nach der Wahl (oder beim Schließen) fliegt es animiert zum runden Stecknadel-
   Button in der Kopfzeile, der von da an dauerhaft und ohne jede Unterbrechung
   beim Scrollen die Ortsauswahl bereithält (siehe main.js). */
.city-modal-backdrop{
  position:fixed;inset:0;z-index:90;
  background:rgba(20,20,25,.5);
  display:flex;align-items:center;justify-content:center;padding:20px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.city-modal-backdrop.open{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .3s ease,visibility 0s linear 0s;
}
.city-modal{
  background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow);
  padding:36px 32px;max-width:420px;width:100%;max-height:82vh;overflow-y:auto;
  text-align:center;position:relative;
  transform:scale(1);opacity:1;
  transition:transform .68s cubic-bezier(.65,0,.35,1),opacity .68s cubic-bezier(.65,0,.35,1);
}
.city-modal-icon{
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
  width:56px;height:56px;border-radius:50%;background:var(--blue-100);color:var(--blue-700);
  font-size:1.6rem;
}
.city-modal h2{font-size:1.4rem;margin-bottom:8px;letter-spacing:-.015em}
.city-modal p{color:var(--ink-soft);font-size:.95rem;margin-bottom:22px}
.city-modal-list{display:flex;flex-direction:column;gap:2px;text-align:left;max-height:44vh;overflow-y:auto}
.city-modal-list .city-option{padding:12px 14px;font-size:.96rem}
.city-modal-close{
  position:absolute;right:14px;top:14px;background:none;border:none;color:var(--ink-faint);
  font-size:1.4rem;line-height:1;cursor:pointer;padding:4px 8px;
}
.city-modal-close:hover{color:var(--ink)}

/* Runde Kopfzeilen-Buttons: Stecknadel (Ortsauswahl) und Telefon, immer sichtbar
   neben dem Hamburger-Symbol bzw. der Telefonnummer */
.round-btn{
  width:40px;height:40px;border-radius:50%;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:1.15rem;line-height:1;
  border:none;cursor:pointer;font-family:var(--font-sans);
  transition:background .15s ease,transform .2s ease;
}
.round-btn-pin{background:var(--blue-100);color:var(--blue-700)}
.round-btn-pin:hover{background:var(--blue-500);color:#fff}
.round-btn-phone{background:var(--blue-700);color:#fff}
.round-btn-phone:hover{background:var(--blue-900)}
/* Auf breiten Bildschirmen zeigt die Telefon-Pille bereits die volle Nummer –
   der runde Telefon-Knopf ist für die mobile Kopfzeile gedacht */
@media (min-width:1181px){
  .round-btn-phone{display:none}
}
@keyframes cityPinPop{
  0%{transform:scale(1)}
  45%{transform:scale(1.35)}
  100%{transform:scale(1)}
}
.round-btn-pin.pop{animation:cityPinPop .5s cubic-bezier(.34,1.56,.64,1)}

.city-option{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:10px 12px;border-radius:var(--radius-md);border:none;background:none;text-align:left;
  font-family:var(--font-sans);font-size:.92rem;color:var(--ink);cursor:pointer;
}
.city-option:hover{background:var(--paper-soft)}
.city-option.active{background:var(--blue-100);color:var(--blue-900);font-weight:600}
.city-option .cp-eta{color:var(--ink-soft);font-size:.82rem;font-weight:400}

.city-suggest{
  position:fixed;z-index:70;display:flex;align-items:center;flex-wrap:wrap;gap:8px;
  background:#fff;border:1px solid var(--blue-100);border-radius:var(--radius-md);box-shadow:var(--shadow);
  padding:12px 34px 12px 14px;font-size:.85rem;color:var(--blue-900);max-width:320px;
}
.city-suggest button{font-family:var(--font-sans);cursor:pointer}
#city-suggest-switch{
  background:var(--blue-700);color:#fff;border:none;border-radius:var(--radius-full);
  padding:6px 14px;font-size:.82rem;font-weight:600;flex-shrink:0;
}
#city-suggest-switch:hover{background:var(--blue-900)}
#city-suggest-dismiss{
  background:none;border:none;color:var(--blue-700);font-size:1.1rem;line-height:1;
  padding:2px 4px;position:absolute;right:8px;top:8px;
}
@media (max-width:640px){
  .city-modal{padding:28px 22px;max-height:88vh}
  .city-modal h2{font-size:1.25rem}
  .city-suggest{max-width:calc(100vw - 32px)}
  .round-btn{width:36px;height:36px;font-size:1.05rem}
}

/* Personalisierter Hinweis auf Seiten ohne eigenen Stadt-Bezug (z. B. Leistungen) */
.service-city-note{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  background:var(--blue-100);border-radius:var(--radius-md);
  padding:14px 18px;margin:28px 0 0;font-size:.9rem;color:var(--blue-900);
}
.service-city-note strong{font-weight:700}
.service-city-note a{color:var(--blue-700);font-weight:600;margin-left:auto;white-space:nowrap}
.service-city-note a:hover{text-decoration:underline}
@media (max-width:600px){
  .service-city-note a{margin-left:0}
}

/* ---------- Buttons (Apple: Pill-Form) ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 24px;border-radius:var(--radius-full);font-weight:400;font-size:.98rem;
  border:1px solid transparent;cursor:pointer;transition:background .2s ease,color .2s ease,border-color .2s ease;
  font-family:var(--font-sans);
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--blue-700);color:#fff}
.btn-primary:hover{background:var(--blue-900)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#000}
.btn-outline{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-outline:hover{background:var(--ink);color:#fff}
.btn-block{width:100%}

/* ---------- Hero (Startseite, zweispaltig) ---------- */
.hero{
  background:var(--paper-soft);
  padding:96px 0 64px;
}
/* Ortsseiten: Porträtfoto hinter dem Text. Ronalds Gesicht sitzt im Foto
   etwas oberhalb der Bildmitte – der vertikale Ankerpunkt liegt deshalb bei
   25% statt 50%, damit sein Gesicht auch auf sehr breiten (=niedrigen)
   Desktop-Heros im sichtbaren Ausschnitt bleibt. Auf dem hohen, schmalen
   Mobil-Ausschnitt hat das keinen Effekt (dort wird ohnehin die volle
   Bildhöhe gezeigt), bleibt also wie gehabt perfekt. Ein gleichmäßiger,
   eher heller Schleier hält die Schrift lesbar, ohne ihn zu sehr zu
   verstecken. */
.hero-photo{
  background-image:
    linear-gradient(rgba(245,245,247,.62), rgba(245,245,247,.62)),
    url('../img/werbefotos/ronald-kimmel-schluesseldienst-kimmel.webp');
  background-size: cover;
  background-position: center 25%;
  background-repeat: no-repeat;
}
/* Breadcrumb auf dem Foto-Hero dunkel statt hellgrau, sonst zu wenig
   Kontrast vor dem grauen Bildhintergrund. */
.hero-photo .breadcrumb, .hero-photo .breadcrumb a{color:var(--ink)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.eyebrow{
  display:block;color:var(--blue-700);
  font-weight:600;font-size:.92rem;margin-bottom:14px;
}
.hero h1{font-size:clamp(2.2rem,4.4vw,3.2rem);letter-spacing:-.03em}
.hero .lead{font-size:1.15rem;color:var(--ink-soft);max-width:52ch}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.hero-badges{display:flex;gap:22px;flex-wrap:wrap;margin-top:34px}
.hero-badge{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.88rem;color:var(--ink-soft)}
.hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--blue-700)}
.hero-panel{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:32px;box-shadow:var(--shadow-sm);
}
.hero-panel h3{font-size:1.1rem;letter-spacing:-.015em}
.hero-stat-row{display:flex;justify-content:space-between;padding:14px 0;border-bottom:1px solid var(--line)}
.hero-stat-row:last-child{border-bottom:none}
.hero-stat-row strong{color:var(--blue-700);font-size:1.05rem}
.stars{color:var(--gold);letter-spacing:2px}

/* ---------- Sections ---------- */
section{padding:100px 0}
.section-tight{padding:56px 0}
.section-head{max-width:680px;margin:0 auto 48px;text-align:center}
.section-head h2{font-size:clamp(1.8rem,3.6vw,2.6rem);letter-spacing:-.025em}
.section-head p{color:var(--ink-soft);font-size:1.1rem}
.kicker{color:var(--blue-700);font-weight:600;letter-spacing:0;font-size:.92rem;display:block;margin-bottom:10px;font-family:var(--font-sans);text-transform:none}
.bg-soft{background:var(--paper-soft)}
.bg-navy{background:var(--blue-900);color:#f5f5f7}
.bg-navy h2,.bg-navy h3{color:#fff}
.bg-navy .kicker{color:var(--blue-500)}
.bg-navy .section-head p{color:#c7cdda}

/* ---------- Cards / Grids ---------- */
.grid{display:grid;gap:32px}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-4{grid-template-columns:repeat(4,1fr)}
.grid-2{grid-template-columns:repeat(2,1fr)}

.card{
  background:transparent;border:none;border-radius:var(--radius-md);
  padding:8px;text-align:center;transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.card:hover{transform:translateY(-4px)}
.card-icon{
  width:64px;height:64px;border-radius:50%;background:var(--blue-100);color:var(--blue-700);
  display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:1.7rem;
}
.card-icon img{width:32px;height:32px;object-fit:contain}
.card h3{font-size:1.25rem;margin-bottom:8px;letter-spacing:-.015em}
.card p{color:var(--ink-soft);font-size:1rem;margin-bottom:16px}
.card-link{font-weight:400;color:var(--blue-700);font-size:.98rem;display:inline-flex;align-items:center;gap:4px}
.card-link:hover{text-decoration:underline}

/* Schritte */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
.step{position:relative;text-align:center;padding:0 22px;background:transparent;border:none}
.step-num{
  width:36px;height:36px;border-radius:50%;background:var(--ink);color:#fff;
  font-weight:600;
  display:flex;align-items:center;justify-content:center;margin:0 auto 18px;font-size:.98rem;
}

/* Preistabelle */
.price-table{width:100%;border-collapse:collapse;background:transparent;border:none;border-radius:0;overflow:visible}
.price-table td,.price-table th{padding:18px 4px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.price-table tr:last-child td{border-bottom:none}
.price-table td:last-child{text-align:right;font-weight:600;color:var(--blue-700);white-space:nowrap}
.price-note{font-size:.9rem;color:var(--ink-soft);margin-top:10px}

/* Bewertungen */
.review-summary{
  display:flex;align-items:center;gap:18px;background:var(--paper-soft);border:none;
  border-radius:var(--radius-lg);padding:24px 28px;margin-bottom:36px;flex-wrap:wrap;
}
.review-summary .score{font-family:var(--font-serif);font-size:2.4rem;font-weight:700;color:var(--ink)}
.review-card{background:var(--paper-soft);border:none;border-radius:var(--radius-lg);padding:28px}
.review-card .stars{margin-bottom:10px;display:block}
.review-card .who{font-weight:600;margin-top:14px}
.review-card .where{color:var(--ink-soft);font-size:.88rem}
.review-quote{color:var(--ink);font-size:1rem}

/* Städte */
.city-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.city-card{
  background:var(--paper-soft);border:none;border-radius:var(--radius-lg);
  padding:22px 24px;transition:transform .25s cubic-bezier(.22,.61,.36,1);
}
.city-card:hover{transform:translateY(-4px)}
.city-card h3{font-size:1.05rem;margin-bottom:4px;display:flex;align-items:center;gap:8px;color:var(--ink);font-weight:600;letter-spacing:-.01em}
.city-card h3 a{color:inherit}
.city-card .eta{color:var(--blue-700);font-weight:600;font-size:.85rem}
.city-card p{color:var(--ink-soft);font-size:.9rem;margin:6px 0 0}
.city-card .card-link{display:inline-block;margin-top:10px;font-weight:400;color:var(--blue-700);font-size:.88rem}
.district-pills{display:flex;flex-wrap:wrap;gap:10px}
.district-pill{background:var(--paper-soft);border:none;color:var(--ink-soft);padding:9px 16px;border-radius:var(--radius-full);font-weight:400;font-size:.88rem}

/* Ortsauswahl (Startseite) — Glas-Kacheln auf dunklem Grund */
.city-select-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.city-select{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--radius-md);
  backdrop-filter:blur(16px) saturate(160%);-webkit-backdrop-filter:blur(16px) saturate(160%);
  padding:14px 10px;text-align:center;transition:background .15s ease,border-color .15s ease,transform .15s ease;
}
.city-select:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.36);transform:translateY(-2px)}
.city-select-name{display:block;font-weight:600;color:#fff;font-size:.9rem;letter-spacing:-.01em}
.city-select-eta{display:block;color:var(--blue-500);font-size:.76rem;margin-top:4px;font-weight:400}
.city-select.active{background:var(--blue-700);border-color:var(--blue-600)}
.city-select.active .city-select-eta{color:#fff}

/* Stadtsuche (Einsatzgebiet) */
.city-search-box{max-width:520px;margin:0 auto;position:relative}
.city-search-icon{position:absolute;left:20px;top:50%;transform:translateY(-50%);color:var(--ink-soft);pointer-events:none}
.city-search-box input{
  width:100%;padding:16px 20px 16px 50px;border-radius:var(--radius-full);border:1px solid var(--line);
  background:#fff;font-size:1rem;font-family:inherit;color:var(--ink);box-shadow:none;
}
.city-search-box input:focus{outline:none;border-color:var(--blue-700);box-shadow:0 0 0 4px var(--blue-100)}
.city-search-box input::placeholder{color:var(--ink-faint)}

/* FAQ */
.faq-item{border:none;border-bottom:1px solid var(--line);border-radius:0;margin-bottom:0;overflow:hidden;background:transparent}
.faq-q{
  width:100%;text-align:left;background:none;border:none;padding:22px 4px;font-weight:400;font-size:1.08rem;
  display:flex;justify-content:space-between;align-items:center;gap:16px;cursor:pointer;color:var(--ink);
  font-family:var(--font-sans);letter-spacing:-.01em;
}
.faq-q .plus{flex-shrink:0;color:var(--blue-700);font-size:1.3rem;transition:transform .2s ease;font-weight:300}
.faq-item.open .faq-q .plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease}
.faq-a-inner{padding:0 4px 22px;color:var(--ink-soft)}
.faq-item.open .faq-a{max-height:600px}
.faq-cat{margin:0 0 16px;font-size:1.3rem;letter-spacing:-.02em;color:var(--ink)}

/* CTA-Band */
.cta-band{
  background:rgba(20,20,22,.6);
  backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;border-radius:var(--radius-lg);padding:64px 48px;
  box-shadow:0 24px 50px -20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.08);
  display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap;text-align:left;
}
.cta-band h2{margin-bottom:8px;font-size:1.9rem;color:#fff;letter-spacing:-.025em}
.cta-band p{color:#a1a1a6;margin:0;font-size:1.05rem}
.cta-band .btn-primary{background:#fff;color:var(--ink)}
.cta-band .btn-primary:hover{background:#e8e8ed}

/* ---------- Foto-Galerie ---------- */
.photo-card{
  display:block;border-radius:var(--radius-lg);overflow:hidden;background:var(--paper-soft);
  box-shadow:var(--shadow-sm);cursor:zoom-in;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease;
}
.photo-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.photo-frame{display:block;aspect-ratio:4/3;overflow:hidden}
.photo-frame img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.22,.61,.36,1)}
.photo-card:hover .photo-frame img{transform:scale(1.06)}
.photo-cap{display:block;padding:14px 18px;font-size:.9rem;color:var(--ink-soft)}
.bg-navy .photo-cap{color:#c7cdda}

/* Lightbox */
.lightbox-backdrop{
  position:fixed;inset:0;z-index:120;background:rgba(10,10,12,.88);
  display:flex;align-items:center;justify-content:center;padding:28px;
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .3s ease,visibility 0s linear .3s;
}
.lightbox-backdrop.open{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .3s ease,visibility 0s linear 0s;
}
.lightbox-figure{
  max-width:min(920px,92vw);text-align:center;
  transform:scale(.94);transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.lightbox-backdrop.open .lightbox-figure{transform:scale(1)}
.lightbox-figure img{max-width:100%;max-height:78vh;border-radius:var(--radius-md);display:block;margin:0 auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.lightbox-cap{color:#f0f0f2;margin-top:16px;font-size:.95rem}
.lightbox-close{
  position:absolute;top:20px;right:20px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.3);color:#fff;
  font-size:1.4rem;line-height:1;cursor:pointer;transition:background .15s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,.24)}
@media (max-width:640px){
  .lightbox-close{top:12px;right:12px}
}

/* Breadcrumb */
.breadcrumb{font-size:.85rem;color:var(--ink-faint);margin-bottom:20px}
.breadcrumb a{color:var(--ink-faint)}
.breadcrumb a:hover{color:var(--blue-700)}
.breadcrumb span{margin:0 6px}

/* Detailseiten */
.detail-hero{background:var(--paper-soft);border-bottom:none;padding:64px 0 56px}
.detail-hero h1{font-size:clamp(2rem,4vw,3rem);letter-spacing:-.03em}
.detail-hero .lead{color:var(--ink-soft);font-size:1.15rem;max-width:62ch}
.check-list li{display:flex;gap:12px;margin-bottom:12px;align-items:flex-start}
.check-list li .tick{
  flex-shrink:0;width:22px;height:22px;border-radius:50%;background:var(--blue-100);color:var(--blue-700);
  display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;margin-top:2px;
}
.side-box{background:var(--paper-soft);border:none;border-radius:var(--radius-lg);padding:32px}
.side-box h3{font-size:1.1rem;letter-spacing:-.015em}
.related-services{display:flex;flex-wrap:wrap;gap:10px}
.related-services a{
  background:var(--paper-soft);border:1px solid var(--line);color:var(--ink);
  padding:8px 16px;border-radius:var(--radius-full);font-weight:400;font-size:.88rem;
}
.related-services a:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.two-col{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start}

/* Legal */
.legal h2{font-size:1.3rem;margin-top:42px;color:var(--ink);letter-spacing:-.015em}
.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:var(--ink-soft)}
.legal ul{list-style:disc;padding-left:22px}
.legal ul li{margin-bottom:6px}

/* ---------- Footer ---------- */
.site-footer{background:var(--paper-soft);color:var(--ink-soft);padding:56px 0 26px;margin-top:20px;border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:32px;margin-bottom:36px}
.site-footer h4{color:var(--ink);font-size:.85rem;margin-bottom:16px;font-family:var(--font-sans);font-weight:600;letter-spacing:0}
.site-footer a{color:var(--ink-soft);font-size:.88rem}
.site-footer a:hover{color:var(--ink);text-decoration:underline}
.footer-list li{margin-bottom:10px}
.footer-brand p{color:var(--ink-faint);font-size:.88rem;max-width:34ch}
.footer-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:.8rem;color:var(--ink-faint)}
.footer-bottom a{color:var(--ink-faint)}
.footer-bottom a:hover{color:var(--ink)}

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed;left:20px;right:20px;bottom:20px;max-width:560px;margin:0 auto;
  background:rgba(255,255,255,.65);
  backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);
  border:1px solid rgba(255,255,255,.55);border-radius:22px;
  box-shadow:0 20px 50px -12px rgba(0,0,0,.25),inset 0 1px 0 rgba(255,255,255,.7);
  padding:24px 26px;z-index:200;
  transform:translateY(140%);transition:transform .4s cubic-bezier(.22,.61,.36,1);
}
.cookie-banner.show{transform:translateY(0)}
.cookie-banner h3{font-size:1rem;margin-bottom:8px;letter-spacing:-.01em}
.cookie-banner p{font-size:.88rem;color:var(--ink-soft);margin-bottom:18px}
.cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.cookie-actions .btn{padding:11px 20px;font-size:.88rem}

/* ---------- Utilities ---------- */
.mt-0{margin-top:0}
.text-center{text-align:center}
.mx-auto{margin-left:auto;margin-right:auto}
.small{font-size:.85rem;color:var(--ink-soft)}
.badge-inline{display:inline-flex;align-items:center;gap:6px;background:var(--blue-100);color:var(--blue-700);padding:5px 14px;border-radius:var(--radius-full);font-weight:400;font-size:.8rem}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  section{padding:72px 0}
  .hero-grid{grid-template-columns:1fr}
  .hero-panel{order:-1}
  /* Ortsseiten-Hero mit Porträtfoto: Karte NICHT nach oben ziehen, sonst
     verdeckt sie auf schmalen Screens genau den Bereich, in dem Ronald im
     Hintergrundfoto zu sehen ist (sein Kopf liegt weiter oben im Bild). */
  .hero-photo .hero-panel{order:0}
  .grid-3,.grid-4,.grid-2{grid-template-columns:repeat(2,1fr)}
  .two-col{grid-template-columns:1fr}
  .footer-grid{grid-template-columns:1fr 1fr}
  .city-grid{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:1fr;gap:32px}
  .city-select-grid{grid-template-columns:repeat(3,1fr)}
}
/* Mobiles Menü: liegt zwar im DOM innerhalb von .site-header (siehe build.py),
   ist aber position:absolute unterhalb der 68px hohen Kopfzeile verankert, damit
   die Kopfzeile beim Öffnen gleich hoch bleibt und nur das Panel über dem Inhalt aufklappt. */
.mobile-nav-panel{
  position:absolute;top:68px;left:0;right:0;
  display:flex;flex-direction:column;padding:0 16px;
  max-height:0;opacity:0;overflow:hidden;
  background:rgba(255,255,255,.9);
  backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  transition:max-height .45s cubic-bezier(.22,.61,.36,1),opacity .3s ease,padding .45s cubic-bezier(.22,.61,.36,1);
}
.mobile-nav-panel.open{
  max-height:640px;opacity:1;overflow-y:auto;padding:10px 16px 16px;
  border-radius:0 0 var(--radius-lg) var(--radius-lg);
  box-shadow:0 12px 28px -16px rgba(0,0,0,.25);
  background:#fff;
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.mobile-nav-panel a{
  width:100%;padding:12px 16px;font-weight:600;font-size:.82rem;
  color:#4c4c51;white-space:nowrap;letter-spacing:-.005em;
  border-radius:var(--radius-full);
}
.mobile-nav-panel a.active{
  color:var(--ink);font-weight:600;
  background:rgba(0,0,0,.055);
}

/* Mobiles Untermenü (Leistungen, Einsatzgebiet) als Akkordeon */
.mobile-nav-group{display:flex;flex-direction:column}
.mobile-nav-parent{
  display:flex;align-items:center;justify-content:flex-start;gap:6px;
  width:100%;padding:12px 16px;font:inherit;font-weight:600;font-size:.82rem;
  color:#4c4c51;white-space:nowrap;letter-spacing:-.005em;
  background:none;border:none;border-radius:var(--radius-full);text-align:left;
}
.mobile-nav-parent.active{color:var(--ink)}
.mobile-nav-parent .plus{
  flex-shrink:0;color:var(--ink-faint);font-size:1.2rem;font-weight:300;
  transition:transform .3s ease;
}
.mobile-nav-group.expanded .mobile-nav-parent .plus{transform:rotate(45deg)}
.mobile-submenu{
  display:flex;flex-direction:column;padding-left:14px;
  max-height:0;overflow:hidden;
  transition:max-height .35s ease;
}
.mobile-nav-group.expanded .mobile-submenu{max-height:1000px}
.mobile-submenu a{
  width:100%;padding:10px 16px;font-weight:500;font-size:.78rem;
  color:var(--ink-soft);white-space:nowrap;letter-spacing:-.005em;
  border-radius:var(--radius-full);
}
.mobile-submenu a.active{color:var(--ink);font-weight:600;background:rgba(0,0,0,.055)}
.mobile-submenu.submenu-wide{display:grid;grid-template-columns:1fr 1fr;column-gap:4px}
.mobile-submenu.submenu-wide a{white-space:normal;padding:8px 10px;font-size:.74rem}
@media (min-width:1181px){
  .mobile-nav-panel{display:none !important}
}
@media (max-width:1180px){
  .main-nav{display:none}
  .nav-toggle{
    display:flex;align-items:center;justify-content:center;flex-shrink:0;
    width:32px;height:32px;padding:0;font-size:1.4rem;
  }
  .header-inner{
    position:relative;padding:0 22px 0 9px;gap:4px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .header-cta{gap:8px}
  .phone-pill{display:none}
  .grid-3,.grid-4,.grid-2{grid-template-columns:1fr}
  .city-grid{grid-template-columns:1fr}
  .cta-band{flex-direction:column;text-align:center}
  .footer-grid{grid-template-columns:1fr}
  .city-select-grid{grid-template-columns:repeat(2,1fr)}
  .brand-logo{height:clamp(42px,11vw,50px)}
  section{padding:56px 0}
}
@media (max-width:365px){
  .brand-logo{height:40px}
}