/* =====================================================================
   style.css – zentrales Stylesheet Schlüsseldienst Bernhausen
   Einbinden mit: <link rel="stylesheet" href="css/style.css">
   Farbwelt zentral über die Variablen unten steuerbar.
   Enthält jetzt auch: Bild-Banner oben, Vertrauens-Stichworte,
   Bild-Platzhalter, Storno-Hinweis, "Direktkontakt zum Monteur".
   ===================================================================== */
:root{
  --blau: #2b6ad8;         /* Hauptblau */
  --blau-licht: #6f9dff;   /* heller Verlaufsstart im Banner */
  --blau-mittel: #2153bd;  /* satter Verlaufsabschluss */
  --blau-dunkel: #1c4aa8;  /* Hover/aktiv */
  --blau-tief: #0e2350;    /* Überschriften, Footer */
  --blau-wolke: #eef3fe;   /* helle Section-Flächen */
  --blau-linie: #d4e1f8;   /* Rahmen, Trenner */
  --stern: #f5a623;
  --text: #34414f;
  --radius: 16px;
  --schatten: 0 10px 30px rgba(14,35,80,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;color:var(--text);line-height:1.65;background:#fff}
img{max-width:100%;display:block}
a{color:var(--blau-dunkel)}
h1,h2,h3{color:var(--blau-tief);line-height:1.2;letter-spacing:-.01em}
h2{font-size:clamp(1.5rem,3.2vw,2.15rem);margin-bottom:.4em}
.sub{color:#5d6b7b;margin-bottom:2em;max-width:62ch}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
section{padding:66px 0}
.btn{display:inline-block;background:var(--blau);color:#fff;font-weight:700;text-decoration:none;
  padding:15px 30px;border-radius:999px;box-shadow:0 6px 18px rgba(43,106,216,.38);transition:transform .15s,background .2s}
.btn:hover{background:var(--blau-dunkel);transform:translateY(-1px)}

/* ---------- Kopfzeile ---------- */
.topbar{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.95);backdrop-filter:blur(8px);border-bottom:1px solid var(--blau-linie)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 20px}
.logo{font-size:1.12rem;font-weight:800;color:var(--blau-tief);text-decoration:none;display:flex;align-items:center;gap:9px}
.logo .schluessel{width:36px;height:36px;border-radius:10px;background:var(--blau);color:#fff;display:grid;place-items:center;font-size:1.1rem}
nav.haupt{display:flex;gap:24px}
nav.haupt a{color:var(--blau-tief);text-decoration:none;font-weight:600;font-size:.95rem}
nav.haupt a:hover{color:var(--blau)}
.topbar .btn{padding:10px 20px;white-space:nowrap;font-size:.95rem;text-align:center;line-height:1.15}
.burger{display:none;background:none;border:none;font-size:1.6rem;color:var(--blau-tief);cursor:pointer}

/* "Direktkontakt zum Monteur" unter der Telefonnummer im Button */
.direkt{display:block;font-size:.72rem;font-weight:600;opacity:.92;margin-top:1px;letter-spacing:.01em}

/* ---------- BILD-BANNER GANZ OBEN (1920 x 600) ---------- */
.bild-banner{width:100%;line-height:0;background:var(--blau-tief)}
.bild-banner img{display:block;width:100%;height:auto;max-height:600px;object-fit:cover}

/* ---------- Vertrauens-Stichworte (Leiste, ADAC-Stil) ---------- */
.trust{background:var(--blau-tief);color:#fff;padding:14px 0}
.trust .wrap{display:flex;flex-wrap:wrap;gap:10px 26px;align-items:center;justify-content:center}
.trust span{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:600}
.trust span::before{content:"✓";color:#39d353;font-weight:800}

/* ---------- Bild-Platzhalter (solange kein echtes Bild da ist) ---------- */
.ph{display:flex;align-items:center;justify-content:center;text-align:center;
  background:repeating-linear-gradient(45deg,#e9eef4 0 18px,#dfe6ee 18px 36px);
  color:#33475b;font:600 15px/1.5 system-ui,Arial,sans-serif;
  border:2px dashed var(--blau-linie);box-sizing:border-box;padding:16px}
.ph small{display:block;font-weight:400;color:#5b7085;margin-top:4px}
.ph-banner{width:100%;aspect-ratio:1920/600}      /* 1920 x 600 */
.ph-quer{width:100%;aspect-ratio:800/600;border-radius:var(--radius)}  /* 800 x 600 */

/* Echtes Bild statt Platzhalter: img.ph-quer fuellt den Rahmen sauber */
img.ph-quer{object-fit:cover;box-shadow:var(--schatten)}

/* ---------- BANNER / HERO mit Bild + Farbverlauf-Overlay ---------- */
.banner{position:relative;color:#fff;overflow:hidden}
.banner .bg{position:absolute;inset:0;
  /* Reiner Farbverlauf als Banner-Hintergrund. Das Foto sitzt jetzt sichtbar
     rechts im Banner (.banner-foto), nicht mehr als Schatten hinter dem Text. */
  background:linear-gradient(150deg, var(--blau-licht) 0%, var(--blau-mittel) 60%, var(--blau-tief) 100%);
}
.banner .wrap{position:relative;padding:84px 20px 76px;display:grid;grid-template-columns:1.2fr .9fr;gap:44px;align-items:center}
.banner .badge{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  color:#fff;font-size:.8rem;font-weight:700;padding:6px 15px;border-radius:999px;margin-bottom:18px;letter-spacing:.03em}
.banner h1{font-size:clamp(2rem,4.6vw,3rem);color:#fff;margin-bottom:16px;text-shadow:0 2px 8px rgba(14,35,80,.35)}
.banner h1 em{font-style:normal;color:#cfe0ff}
.banner p.intro{font-size:1.12rem;color:#eaf1ff;max-width:52ch;margin-bottom:26px}
.banner .btn{background:#fff;color:var(--blau-dunkel);box-shadow:0 6px 18px rgba(14,35,80,.3)}
.banner .btn:hover{background:#eaf1ff}
.banner-checks{list-style:none;margin-top:24px;display:grid;gap:10px}
.banner-checks li{padding-left:32px;position:relative;font-weight:600;color:#fff}
.banner-checks li::before{content:"✓";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;
  background:#fff;color:var(--blau-dunkel);font-size:.8rem;display:grid;place-items:center}

/* Notruf-Karte im Banner */
.notruf{background:#fff;color:var(--text);border-radius:var(--radius);box-shadow:0 16px 40px rgba(14,35,80,.28);padding:30px;text-align:center}
.notruf .label{font-size:.85rem;font-weight:700;color:var(--blau);text-transform:uppercase;letter-spacing:.08em}
.notruf .nummer{display:block;font-size:2.1rem;font-weight:800;color:var(--blau-tief);margin:6px 0 4px;letter-spacing:-.02em;text-decoration:none}
.notruf a.nummer:hover{color:var(--blau)}
.notruf .klein{color:#5d6b7b;font-size:.92rem;margin-bottom:18px}
.notruf .btn{width:100%}
.notruf .verfuegbar{margin-top:14px;font-size:.82rem;color:#2e9d5b;font-weight:700}
.notruf .verfuegbar::before{content:"●";margin-right:6px}

/* Rechte Banner-Spalte: sichtbares Foto + Notruf-Karte darauf */
.banner .rechts{position:relative}
.banner-foto{width:100%;height:300px;object-fit:cover;border-radius:var(--radius);
  box-shadow:0 16px 40px rgba(14,35,80,.28);margin-bottom:-28px}
.banner .rechts .notruf{position:relative;z-index:2;margin:0 14px}

/* ---------- Vertrauensleiste ---------- */
.leiste{background:var(--blau-wolke);border-bottom:1px solid var(--blau-linie)}
.leiste .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;padding:20px;text-align:center}
.leiste b{display:block;color:var(--blau-tief);font-size:1.05rem}
.leiste span{font-size:.85rem;color:#6a7887}

/* ---------- Notfälle / Intro mit Bild ---------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
.split img{border-radius:var(--radius);box-shadow:var(--schatten);width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
.bild-platzhalter{border-radius:var(--radius);background:var(--blau-wolke);border:2px dashed var(--blau-linie);
  display:grid;place-items:center;text-align:center;color:#8ba0c0;font-size:.9rem;padding:40px;aspect-ratio:4/3}
.notfall-liste{list-style:none;margin-top:16px;display:grid;gap:10px}
.notfall-liste li{padding-left:28px;position:relative}
.notfall-liste li::before{content:"→";position:absolute;left:0;color:var(--blau);font-weight:800}

/* ---------- Leistungen ---------- */
.grau{background:var(--blau-wolke)}
.leistungen{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:22px}
.leistung{background:#fff;border:1px solid var(--blau-linie);border-radius:var(--radius);padding:26px;transition:transform .15s,box-shadow .2s}
.leistung:hover{transform:translateY(-3px);box-shadow:var(--schatten)}
.leistung .icon{width:52px;height:52px;border-radius:14px;background:var(--blau-wolke);color:var(--blau);display:grid;place-items:center;font-size:1.5rem;margin-bottom:16px}
.leistung h3{font-size:1.12rem;margin-bottom:8px}
.leistung p{font-size:.95rem;color:#5d6b7b}

/* ---------- Ablauf ---------- */
.schritte{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.schritt{text-align:center;position:relative}
.schritt .nr{width:54px;height:54px;border-radius:50%;background:var(--blau);color:#fff;font-weight:800;font-size:1.3rem;display:grid;place-items:center;margin:0 auto 14px;box-shadow:0 6px 16px rgba(43,106,216,.35)}
.schritt h3{font-size:1.05rem;margin-bottom:6px}
.schritt p{font-size:.92rem;color:#5d6b7b}

/* ---------- Warum wir (mit Bild) ---------- */
.vorteile{list-style:none;display:grid;gap:14px;margin-top:10px}
.vorteile li{padding-left:36px;position:relative;font-weight:600;color:var(--blau-tief)}
.vorteile li::before{content:"✓";position:absolute;left:0;top:-1px;width:24px;height:24px;border-radius:50%;background:var(--blau);color:#fff;font-size:.85rem;display:grid;place-items:center}
.vorteile li span{display:block;font-weight:400;color:#5d6b7b;font-size:.92rem}

/* ---------- Preise ---------- */
.preis-intro{max-width:70ch;margin-bottom:28px}
.preis-intro strong{color:var(--blau-tief)}
.preise{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px;margin-top:8px}
.preis-karte{background:#fff;border:1px solid var(--blau-linie);border-radius:var(--radius);padding:26px;text-align:center;transition:transform .15s,box-shadow .2s}
.preis-karte:hover{transform:translateY(-3px);box-shadow:var(--schatten)}
.preis-karte.hervor{border-color:var(--blau);border-width:2px;position:relative}
.preis-karte.hervor::after{content:"Beliebt";position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:var(--blau);color:#fff;font-size:.72rem;font-weight:700;letter-spacing:.05em;padding:4px 12px;border-radius:999px}
.preis-karte h3{font-size:1.05rem;margin-bottom:4px}
.preis-karte .fall{color:#5d6b7b;font-size:.9rem;min-height:2.4em;margin-bottom:12px}
.preis-karte .zahl{font-size:2rem;font-weight:800;color:var(--blau-tief);line-height:1;margin:6px 0 12px}
.preis-karte .zahl small{display:block;font-size:.72rem;font-weight:600;color:#8ba0c0;letter-spacing:.03em;margin-top:6px}
.preis-karte ul{list-style:none;text-align:left;display:grid;gap:7px;margin:0 0 4px}
.preis-karte li{padding-left:24px;position:relative;font-size:.9rem;color:#4a5a6a}
.preis-karte li::before{content:"✓";position:absolute;left:0;color:var(--blau);font-weight:800}
.preis-hinweis{margin-top:22px;font-size:.86rem;color:#6a7887;max-width:70ch}
.preis-hinweis b{color:#2e9d5b}

/* Storno-/Fahrtkosten-Hinweis */
.storno-hinweis{background:#fff5f5;border:1px solid #f3c9c9;border-radius:10px;
  padding:14px 18px;margin-top:20px;font-size:14px;color:#7a2a2a;max-width:70ch}

/* ---------- Einsatzgebiet ---------- */
.chips{display:flex;flex-wrap:wrap;gap:11px}
.chip{background:#fff;border:1px solid var(--blau-linie);border-radius:999px;padding:9px 20px;font-weight:600;font-size:.93rem;color:var(--blau-tief);text-decoration:none;transition:transform .15s,box-shadow .2s}
a.chip:hover{transform:translateY(-2px);box-shadow:var(--schatten);border-color:var(--blau)}
.chip.haupt{background:var(--blau);border-color:var(--blau);color:#fff}

/* ---------- CTA-Band ---------- */
.cta-band{background:linear-gradient(135deg,var(--blau) 0%,var(--blau-mittel) 100%);color:#fff;text-align:center}
.cta-band h2{color:#fff}
.cta-band p{color:#eaf1ff;margin-bottom:26px;font-size:1.05rem}
.cta-band .btn{background:#fff;color:var(--blau-dunkel);box-shadow:none}
.cta-band .btn:hover{background:#eaf1ff}

/* ---------- FAQ ---------- */
details{background:#fff;border:1px solid var(--blau-linie);border-radius:12px;margin-bottom:10px;padding:0 22px}
summary{cursor:pointer;font-weight:700;color:var(--blau-tief);padding:17px 0;list-style-position:inside}
details[open]{border-color:var(--blau)}
details p{padding:0 0 17px;color:#4a5a6a}

/* ---------- Footer ---------- */
footer{background:var(--blau-tief);color:#b5c8e4;padding:50px 0 92px;font-size:.95rem}
footer .wrap{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px}
footer h3{color:#fff;font-size:1rem;margin-bottom:12px}
footer a{color:#dbe6fa;text-decoration:none}
footer a:hover{color:#fff;text-decoration:underline}
footer ul{list-style:none}
footer li{padding:3px 0}
.rechtliches{grid-column:1/-1;border-top:1px solid rgba(255,255,255,.15);padding-top:18px;display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;font-size:.85rem}

/* ---------- Mobiler Anruf-Balken ---------- */
.sticky-call{display:none}

/* ---------- Fester SOS-Button, rechts mittig am Rand ---------- */
.sos-btn{position:fixed;right:14px;top:50%;transform:translateY(-50%);z-index:70;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:62px;height:62px;background:#e03b2f;color:#fff;text-decoration:none;
  border-radius:14px;border:2px solid #fff;
  box-shadow:0 6px 18px rgba(224,59,47,.45),0 2px 6px rgba(14,35,80,.2);
  transition:transform .15s,background .2s}
.sos-btn:hover{background:#b92c21;transform:translateY(-50%) scale(1.06)}
.sos-btn .sos-gross{font-size:15px;font-weight:800;letter-spacing:.04em;line-height:1}
.sos-btn .sos-klein{font-size:9px;font-weight:600;margin-top:2px;opacity:.95}
@media(max-width:900px){
  .sos-btn{width:54px;height:54px;right:10px}
  .sos-btn .sos-gross{font-size:13px}
}

/* ---------- Responsiv ---------- */
@media(max-width:900px){
  .banner .wrap{grid-template-columns:1fr;gap:20px;padding:20px 20px 44px}
  .banner h1{font-size:1.5rem;line-height:1.2;margin-bottom:12px}
  .banner p.intro{font-size:.98rem;margin-bottom:18px;max-width:100%}
  .intro-lang{display:none}
  .banner .badge{margin-bottom:12px}
  /* Handy-Reihenfolge: erst Text (Überschrift + Intro), dann Foto + kompakte Box */
  .banner .rechts{order:2}
  .banner-foto{height:170px;margin-bottom:0;border-radius:var(--radius)}
  .banner .rechts .notruf{display:block;margin:14px 0 0;padding:18px}
  .notruf .klein{display:none}            /* der erklärende Zweizeiler entfällt auf dem Handy */
  .notruf .nummer{margin:2px 0}
  .leiste .wrap{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:28px}
  .schritte{grid-template-columns:1fr 1fr}
  nav.haupt{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid var(--blau-linie);padding:8px 20px 16px}
  nav.haupt.offen{display:flex}
  nav.haupt a{padding:11px 0;border-bottom:1px solid var(--blau-wolke)}
  .burger{display:block}
  .topbar .btn{display:none}
  .sticky-call{display:block;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--blau);color:#fff;text-align:center;padding:16px;font-size:1.1rem;font-weight:800;text-decoration:none;box-shadow:0 -4px 14px rgba(14,35,80,.28)}
  body{padding-bottom:64px}   /* Freiraum, damit der Balken nichts überdeckt */
}
@media(max-width:640px){
  .trust .wrap{gap:8px 16px}
  .trust span{font-size:13px}
  .banner h1{font-size:1.32rem;line-height:1.25}
  .banner p.intro{font-size:.94rem}
  .intro-lang{display:none}
  .notruf .nummer{font-size:1.7rem}
}
@media(max-width:560px){ .schritte{grid-template-columns:1fr} }
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* =====================================================================
   ERGÄNZUNGEN: animierter Anruf-Button, Preisblock oben, SMS-Hinweis
   ===================================================================== */

/* ---------- Pulsierender Anruf-Button ---------- */
.btn-puls{position:relative;animation:puls-scale 1.8s ease-in-out infinite}
.btn-puls::after{content:"";position:absolute;inset:0;border-radius:999px;
  box-shadow:0 0 0 0 rgba(43,106,216,.55);animation:puls-ring 1.8s ease-out infinite;pointer-events:none}
@keyframes puls-scale{0%,100%{transform:scale(1)}50%{transform:scale(1.04)}}
@keyframes puls-ring{0%{box-shadow:0 0 0 0 rgba(43,106,216,.5)}70%{box-shadow:0 0 0 16px rgba(43,106,216,0)}100%{box-shadow:0 0 0 0 rgba(43,106,216,0)}}
/* Wenn der Button weiß ist (im Banner), Ring in Weiß */
.banner .btn-puls::after,.notruf .btn-puls::after{box-shadow:0 0 0 0 rgba(255,255,255,.6)}
@media (prefers-reduced-motion:reduce){
  .btn-puls{animation:none}
  .btn-puls::after{animation:none;box-shadow:none}
}

/* ---------- Preisblock ganz oben, umrahmt (ADAC-Stil) ---------- */
.preis-oben{padding:40px 0 10px}
.preis-box{border:2px solid var(--blau);border-radius:var(--radius);background:#fff;
  box-shadow:var(--schatten);padding:28px 26px;max-width:900px;margin:0 auto}
.preis-box h2{font-size:clamp(1.35rem,2.6vw,1.8rem);margin-bottom:6px}
.preis-box .box-sub{color:#5d6b7b;margin-bottom:18px}
.preis-tabelle{display:grid;grid-template-columns:1fr auto;gap:0;border:1px solid var(--blau-linie);border-radius:12px;overflow:hidden}
.preis-tabelle .zeile{display:contents}
.preis-tabelle .li,.preis-tabelle .pr{padding:15px 18px;border-bottom:1px solid var(--blau-linie)}
.preis-tabelle .li{font-weight:600;color:var(--blau-tief)}
.preis-tabelle .li small{display:block;font-weight:400;color:#6a7887;font-size:.85rem;margin-top:2px}
.preis-tabelle .pr{text-align:right;font-weight:800;color:var(--blau-tief);white-space:nowrap;font-size:1.15rem}
.preis-tabelle .zeile:last-child .li,.preis-tabelle .zeile:last-child .pr{border-bottom:none}
.preis-tabelle .kopf .li,.preis-tabelle .kopf .pr{background:var(--blau-wolke);font-size:.8rem;text-transform:uppercase;letter-spacing:.04em;color:#5d6b7b;font-weight:700}
.preis-haken{list-style:none;display:grid;gap:9px;margin:18px 0 6px}
.preis-haken li{padding-left:30px;position:relative;font-weight:600;color:var(--blau-tief)}
.preis-haken li::before{content:"✓";position:absolute;left:0;top:0;width:22px;height:22px;border-radius:50%;
  background:#2e9d5b;color:#fff;font-size:.78rem;display:grid;place-items:center}
.preis-box .btn{margin-top:16px}
.preis-box .klein-hinweis{margin-top:14px;font-size:.85rem;color:#6a7887}

/* ---------- SMS-/Gehörlosen-Hinweis ---------- */
.sms-hinweis{display:flex;align-items:flex-start;gap:12px;background:var(--blau-wolke);
  border:1px solid var(--blau-linie);border-radius:12px;padding:14px 18px;margin-top:18px;font-size:.95rem;color:var(--blau-tief)}
.sms-hinweis .sms-icon{font-size:1.4rem;line-height:1.2}
.sms-hinweis a{font-weight:700}

@media(max-width:560px){
  .preis-tabelle .li,.preis-tabelle .pr{padding:12px 14px}
  .preis-tabelle .pr{font-size:1.05rem}
}

/* Kachel-Boxen innerhalb des Preis-Rahmens */
.preis-box .preise{margin:4px 0 8px}
.preis-box .preis-karte{box-shadow:none}
.preis-box .preis-karte:hover{transform:none;box-shadow:var(--schatten)}
.tab-titel{margin:20px 0 10px;font-size:1.05rem;color:var(--blau-tief)}