/* ==========================================================================
   Krüger Gebäudereinigung – Stilvorlage
   ==========================================================================
   Reihenfolge zählt: Grundlagen zuerst, danach die Abschnitte in der
   Reihenfolge, in der sie auf der Seite vorkommen, ganz zum Schluss die
   Anpassungen für schmale Bildschirme.
   ========================================================================== */

:root{
  /* Grün des neuen Entwurfs – weicher und salbeiger als zuvor */
  --gruen:      #3E8B7C;
  --gruen-tief: #33705F;
  --gruen-900:  #16332C;
  --gruen-800:  #1E453B;
  --gruen-100:  #D8E8E4;
  --gruen-50:   #EFF5F3;

  --ink:        #1A2321;   /* Überschriften und dunkle Schaltflächen */
  --ink-2:      #4F5A57;   /* Fließtext */
  --ink-3:      #8F9996;   /* Feindruck */
  --nav:        #45514E;

  --linie:      #E3E8E6;
  --sand:       #F7F9F8;
  --weiss:      #FFFFFF;

  --schatten:      0 1px 2px rgba(26,35,33,.05), 0 10px 30px -14px rgba(26,35,33,.20);
  --schatten-hoch: 0 2px 6px rgba(26,35,33,.06), 0 26px 60px -22px rgba(26,35,33,.30);

  --container: 1180px;
  --kopf-hoehe: 78px;
  --luft: 108px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:var(--kopf-hoehe); -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  font-size:17px; line-height:1.62;
  color:var(--ink-2); background:var(--weiss);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; }
ul,ol{ margin:0; padding:0; list-style:none; }

h1,h2,h3,h4{ margin:0; color:var(--ink); font-weight:700; line-height:1.1; letter-spacing:-.032em; }
h1{ font-size:clamp(36px,3.6vw,50px); font-weight:800; }
h2{ font-size:clamp(29px,3.1vw,42px); }
h3{ font-size:20px; letter-spacing:-.02em; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:28px; }
.abschnitt{ padding-block:var(--luft); }
.abschnitt--sand{ background:var(--sand); }

:focus-visible{ outline:3px solid var(--gruen); outline-offset:3px; }
.skip-link{ position:absolute; left:-9999px; background:var(--ink); color:#fff; padding:12px 20px; z-index:300; }
.skip-link:focus{ left:0; }

/* --- Bausteine ------------------------------------------------------------ */
.eyebrow{
  display:block; font-size:12.5px; font-weight:700;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--gruen); margin-bottom:18px;
}
.kopfzeile{ max-width:640px; }
.kopfzeile--mitte{ margin-inline:auto; text-align:center; }
.lead{ font-size:19px; margin:20px 0 0; }
.lead--mitte{ margin-inline:auto; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:14px;
  font:inherit; font-weight:600; font-size:16px; line-height:1.2;
  padding:18px 32px; border:2px solid transparent; border-radius:0;
  text-decoration:none; cursor:pointer;
  transition:background .16s, border-color .16s, color .16s;
}
.btn__pfeil{ font-size:17px; line-height:1; }
.btn--primaer{ background:var(--gruen); color:#fff; border-color:var(--gruen); }
.btn--primaer:hover{ background:var(--gruen-tief); border-color:var(--gruen-tief); }
.btn--dunkel{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn--dunkel:hover{ background:#000; border-color:#000; }
.btn--linie{ background:transparent; color:var(--ink); border-color:var(--linie); }
.btn--linie:hover{ border-color:var(--gruen); color:var(--gruen-tief); }
.btn--hell{ background:#fff; color:var(--ink); border-color:#fff; }
.btn--hell:hover{ background:var(--gruen-100); border-color:var(--gruen-100); }
.btn--gross{ padding:21px 38px; font-size:17px; }
.btn--voll{ width:100%; justify-content:space-between; }

.ln{ fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

/* ==========================================================================
   Kopfleiste
   ========================================================================== */
.kopf{
  position:sticky; top:0; z-index:100;
  background:var(--weiss); border-bottom:1px solid var(--linie);
}
.kopf__innen{ display:flex; align-items:center; gap:32px; height:var(--kopf-hoehe); }
.kopf__logo{ display:block; }
.kopf__logo img{ width:206px; }

.kopf__nav{ margin-left:auto; }
.kopf__nav ul{ display:flex; align-items:center; gap:34px; }
.kopf__nav a{
  display:inline-block; text-decoration:none; white-space:nowrap;
  font-size:15.5px; font-weight:400; color:var(--nav);
  transition:color .16s;
}
.kopf__nav a:hover{ color:var(--gruen); }
.kopf__cta{ padding:15px 26px; font-size:15.5px; gap:0; }

.burger{
  display:none; width:44px; height:44px; margin-left:auto;
  flex-direction:column; justify-content:center; gap:5px;
  background:none; border:0; padding:10px; cursor:pointer;
}
.burger span{ display:block; height:2px; background:var(--ink); transition:transform .22s, opacity .22s; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero{
  position:relative; overflow:hidden;
  background:var(--sand);
  border-bottom:1px solid var(--linie);
}
.hero__foto{
  position:absolute; inset:0;
  background:url("../images/hero-buero.webp") center/cover no-repeat;
}
.hero__schleier{
  position:absolute; inset:0;
  background:linear-gradient(100deg,
    rgba(255,255,255,.975) 0%,
    rgba(255,255,255,.955) 42%,
    rgba(255,255,255,.80) 70%,
    rgba(255,255,255,.55) 100%);
}
.hero__innen{
  position:relative;
  display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:90px;
  align-items:center;
  padding-block:96px 104px;
}
.hero__text{ max-width:590px; }
.hero h1 .zeile2{ display:block; color:var(--gruen); }
.hero__lead{ font-size:18.5px; margin:26px 0 0; max-width:530px; }

.hero__haken{
  display:grid; grid-template-columns:1fr 1fr; gap:12px 34px;
  margin:34px 0 0;
}
.hero__haken li{ display:flex; align-items:flex-start; gap:11px; font-size:15.5px; color:var(--ink-2); }
.hero__haken svg{ width:15px; height:15px; color:var(--gruen); flex:0 0 auto; margin-top:5px; }

.hero__aktion{ margin-top:40px; }

/* --- Anfragekarte --------------------------------------------------------- */
.karte{
  background:var(--weiss); box-shadow:var(--schatten-hoch);
  padding:42px 40px 36px;
}
.karte h2{ font-size:27px; line-height:1.18; }
.karte p{ font-size:15.5px; margin:16px 0 0; }
.karte .btn{ margin-top:28px; }
.karte__fein{ margin:14px 0 0; font-size:13.5px; color:var(--ink-3); }

/* ==========================================================================
   Referenzleiste
   ========================================================================== */
.beweis{ padding-block:40px; border-bottom:1px solid var(--linie); }
.beweis p{
  margin:0 0 26px; text-align:center;
  font-size:12.5px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3);
}
.beweis ul{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:26px 56px; }
.beweis img{ max-height:32px; width:auto; filter:grayscale(1); opacity:.45; }

/* ==========================================================================
   Versprechen
   ========================================================================== */

/* ==========================================================================
   Leistungen
   ========================================================================== */
.leistungen{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:52px; }
.leistung{
  display:flex; gap:18px; align-items:flex-start;
  padding:28px 26px; background:#fff; border:1px solid var(--linie);
  transition:border-color .2s, box-shadow .2s;
}
.leistung:hover{ border-color:var(--gruen); box-shadow:var(--schatten); }
.leistung__icon{ flex:0 0 auto; width:40px; height:40px; color:var(--gruen); }
.leistung__icon svg{ width:100%; height:100%; }
.leistung h3{ font-size:17.5px; margin-bottom:6px; }
.leistung p{ margin:0; font-size:15.5px; line-height:1.55; }


/* ==========================================================================
   WhatsApp
   ========================================================================== */
.whatsapp{ background:var(--gruen-900); color:#C3D8D2; padding-block:var(--luft); }
.whatsapp__innen{ display:grid; grid-template-columns:1.02fr .98fr; gap:80px; align-items:center; }
.whatsapp h2{ color:#fff; }
.whatsapp .eyebrow{ color:#7FC4B2; }
.whatsapp__lead{ font-size:18.5px; margin:20px 0 0; color:#A9C6BF; }

.whatsapp__punkte{ margin:36px 0 38px; display:grid; gap:20px; }
.whatsapp__punkte li{ display:flex; gap:15px; }
.whatsapp__punkte svg{ width:21px; height:21px; flex:0 0 auto; color:#7FC4B2; margin-top:3px; }
.whatsapp__punkte strong{ display:block; color:#fff; font-weight:600; font-size:16.5px; margin-bottom:2px; }
.whatsapp__punkte span{ font-size:15.5px; color:#A9C6BF; }

.wa-icon{ width:21px; height:21px; }

/* --- Nachgebauter Chatverlauf --------------------------------------------- */
.chat{ background:#0E2621; padding:26px 22px; box-shadow:var(--schatten-hoch); }
.chat__kopf{
  display:flex; align-items:center; gap:12px;
  padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid rgba(255,255,255,.10);
}
.chat__avatar{
  width:40px; height:40px; flex:0 0 auto; background:var(--gruen);
  display:grid; place-items:center; color:#fff; font-weight:700; font-size:15px;
}
.chat__kopf strong{ display:block; color:#fff; font-size:15.5px; font-weight:600; }
.chat__kopf span{ font-size:13px; color:#7FC4B2; }
.chat__lauf{ display:grid; gap:12px; }
.blase{ max-width:86%; padding:13px 16px; font-size:15px; line-height:1.5; }
.blase--ein{ background:#1F3A34; color:#DCE9E5; justify-self:start; }
.blase--aus{ background:#2E5F52; color:#fff; justify-self:end; }
.blase time{ display:block; margin-top:5px; font-size:11.5px; opacity:.6; }

/* ==========================================================================
   Ablauf
   ========================================================================== */
.ablauf{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:60px; counter-reset:schritt; }
.ablauf li{ position:relative; padding-top:56px; }
.ablauf li::before{
  counter-increment:schritt; content:counter(schritt);
  position:absolute; top:0; left:0; width:40px; height:40px;
  background:var(--gruen); color:#fff;
  font-weight:700; font-size:16px; display:grid; place-items:center;
}
.ablauf li::after{
  content:""; position:absolute; top:19px; left:52px; right:-13px; height:2px; background:var(--linie);
}
.ablauf li:last-child::after{ display:none; }
.ablauf h3{ font-size:18px; margin-bottom:8px; }
.ablauf p{ margin:0; font-size:15.5px; }


/* ==========================================================================
   Standorte
   ========================================================================== */
.standorte{ display:grid; grid-template-columns:.78fr 1.22fr; gap:70px; align-items:center; }
.standorte__karte img{ width:100%; max-width:330px; margin-inline:auto; }
ul.orte{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px 20px; margin-top:32px; }
ul.orte li{ display:flex; align-items:center; gap:9px; font-size:16.5px; color:var(--ink); padding:8px 0; }
ul.orte svg{ width:15px; height:15px; color:var(--gruen); flex:0 0 auto; }
.standorte__hinweis{ margin-top:26px; font-size:15.5px; color:var(--ink-3); }

/* ==========================================================================
   Innung und Team
   ========================================================================== */
.innung{ background:var(--sand); padding-block:var(--luft); }
.innung__innen{ display:grid; grid-template-columns:1fr 1fr; gap:70px; align-items:center; }
.innung h2{ max-width:530px; }
.innung__lead{ font-size:18px; margin:20px 0 0; }
.innung__bild img{ width:100%; aspect-ratio:3/2; object-fit:cover; }

/* ==========================================================================
   Angebot
   ========================================================================== */
.angebot{
  position:relative; overflow:hidden;
  padding-block:var(--luft); background:var(--sand);
}
.angebot__foto{ position:absolute; inset:0; background:url("../images/anfrage-flur.webp") center/cover no-repeat; }
.angebot__schleier{ position:absolute; inset:0; background:rgba(247,249,248,.93); }
.angebot__innen{ position:relative; display:grid; grid-template-columns:.9fr 1.1fr; gap:64px; align-items:start; }

.angebot__nutzen{ margin:32px 0 0; display:grid; gap:16px; }
.angebot__nutzen li{ display:flex; gap:13px; font-size:16.5px; color:var(--ink-2); }
.angebot__nutzen svg{ width:20px; height:20px; color:var(--gruen); flex:0 0 auto; margin-top:3px; }

.angebot__kontakt{ margin-top:34px; padding-top:26px; border-top:1px solid var(--linie); font-size:16px; }
.angebot__kontakt a{ font-weight:600; color:var(--ink); text-decoration:none; overflow-wrap:anywhere; }
.angebot__kontakt a:hover{ color:var(--gruen); }

.karte-form{ background:#fff; border:1px solid var(--linie); padding:40px; box-shadow:var(--schatten); }
.form-reihe{ display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.feld{ margin-bottom:18px; }
.feld label{ display:block; font-size:14px; font-weight:600; color:var(--ink); margin-bottom:7px; }
.feld input,.feld select,.feld textarea{
  width:100%; font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1.5px solid var(--linie); border-radius:0;
  padding:14px 15px; transition:border-color .16s, box-shadow .16s;
}
.feld select{
  appearance:none; padding-right:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%238F9996' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 15px center; background-size:12px;
}
.feld textarea{ resize:vertical; min-height:104px; }
.feld input:focus,.feld select:focus,.feld textarea:focus{
  outline:none; border-color:var(--gruen); box-shadow:0 0 0 3px var(--gruen-50);
}
.feld input:user-invalid,.feld textarea:user-invalid{ border-color:#C0392B; }

.form-zustimmung{ display:flex; gap:11px; align-items:flex-start; margin:22px 0 24px; font-size:14px; color:var(--ink-3); line-height:1.5; }
.form-zustimmung input{ width:18px; height:18px; flex:0 0 auto; margin-top:2px; accent-color:var(--gruen); }
.karte-form .btn{ width:100%; }
.form-fuss{ margin:16px 0 0; text-align:center; font-size:14px; color:var(--ink-3); }
.form-hinweis{ margin:14px 0 0; text-align:center; font-size:15px; font-weight:600; color:var(--gruen-tief); min-height:1.5em; }

/* ==========================================================================
   Fragen
   ========================================================================== */
.fragen{ max-width:820px; margin:52px auto 0; }
.fragen details{ border-bottom:1px solid var(--linie); }
.fragen summary{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:26px 0; cursor:pointer; list-style:none;
  font-weight:700; font-size:18.5px; color:var(--ink); letter-spacing:-.02em;
}
.fragen summary::-webkit-details-marker{ display:none; }
.fragen summary::after{
  content:""; flex:0 0 auto; width:12px; height:12px;
  border-right:2px solid var(--gruen); border-bottom:2px solid var(--gruen);
  transform:rotate(45deg) translate(-3px,-3px); transition:transform .2s;
}
.fragen details[open] summary::after{ transform:rotate(-135deg) translate(-3px,-3px); }
.fragen p{ margin:0 0 26px; font-size:16.5px; max-width:72ch; }

/* ==========================================================================
   Abschluss
   ========================================================================== */
.schluss{
  position:relative; overflow:hidden;
  background:var(--gruen-800); color:#C3D8D2; padding-block:96px; text-align:center;
}
.schluss__foto{
  position:absolute; inset:0;
  background:url("../images/abschluss.webp") center/cover no-repeat;
}
.schluss__schleier{ position:absolute; inset:0; background:rgba(30,69,59,.90); }
.schluss .container{ position:relative; }
.schluss h2{ color:#fff; max-width:680px; margin-inline:auto; }
.schluss p{ margin:20px auto 0; max-width:540px; font-size:18px; color:#A9C6BF; }
.schluss__aktionen{ display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-top:36px; }
.schluss__aktionen .btn--rand{ border-color:rgba(255,255,255,.34); color:#fff; }
.schluss__aktionen .btn--rand:hover{ border-color:#fff; background:rgba(255,255,255,.08); }

/* ==========================================================================
   Fuß
   ========================================================================== */
.fuss{ background:var(--gruen-900); color:#93AFA8; padding-block:72px 40px; font-size:15px; }
.fuss__oben{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:44px; }
.fuss__intro{ margin:0; max-width:290px; line-height:1.7; }
.fuss h3{ color:#fff; font-size:15px; font-weight:700; margin-bottom:16px; letter-spacing:0; }
.fuss li{ line-height:2.05; }
.fuss a{ text-decoration:none; transition:color .16s; }
.fuss a:hover{ color:#fff; }
.fuss address{ font-style:normal; line-height:1.9; }
.fuss__unten{
  margin-top:56px; padding-top:26px; border-top:1px solid rgba(255,255,255,.12);
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:14px;
}
.fuss__unten ul{ display:flex; flex-wrap:wrap; gap:24px; }

/* ==========================================================================
   Fester Aktionsbalken auf dem Handy
   ========================================================================== */
.balken{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:120;
  background:rgba(255,255,255,.97); border-top:1px solid var(--linie);
  padding:12px 16px calc(12px + env(safe-area-inset-bottom)); gap:10px;
}
.balken .btn{ flex:1; padding:15px 10px; font-size:15px; gap:8px; }

/* ==========================================================================
   Kleinere Bildschirme
   ========================================================================== */
@media (max-width:1080px){
  :root{ --luft:84px; }
  .hero__innen{ grid-template-columns:minmax(0,1fr) 330px; gap:52px; }
  .leistungen{ grid-template-columns:repeat(2,1fr); }
  .ablauf{ grid-template-columns:repeat(2,1fr); row-gap:44px; }
  .ablauf li:nth-child(2)::after{ display:none; }
  .whatsapp__innen{ gap:48px; }
}

@media (max-width:900px){
  .kopf__nav, .kopf__cta{ display:none; }
  .burger{ display:flex; }
  .kopf__nav.offen{
    display:block; position:absolute; left:0; right:0; top:100%;
    background:#fff; border-bottom:1px solid var(--linie); box-shadow:var(--schatten-hoch); margin:0;
  }
  .kopf__nav.offen ul{ flex-direction:column; align-items:stretch; gap:0; padding:8px 28px 22px; }
  .kopf__nav.offen a{ display:block; padding:15px 0; border-bottom:1px solid var(--linie); }

  .hero__innen{ grid-template-columns:1fr; gap:44px; padding-block:56px 68px; }
  .hero__text{ max-width:none; }
  .hero__schleier{ background:rgba(255,255,255,.90); }

  .whatsapp__innen{ grid-template-columns:1fr; }
  .standorte{ grid-template-columns:1fr; gap:40px; }
  .standorte__karte img{ max-width:250px; }
  .innung__innen{ grid-template-columns:1fr; gap:36px; }
  .innung h2{ max-width:none; }
  .angebot__innen{ grid-template-columns:1fr; gap:40px; }
  .karte-form{ padding:30px 24px; }
  .fuss__oben{ grid-template-columns:1fr 1fr; gap:36px; }

  .balken{ display:flex; }
  body{ padding-bottom:78px; }
}

@media (max-width:620px){
  :root{ --luft:64px; }
  .container{ padding-inline:20px; }
  h1{ font-size:clamp(31px,8.4vw,40px); }
  .kopf__logo img{ width:168px; }
  .hero__haken{ grid-template-columns:1fr; gap:11px; }
  .hero__aktion .btn{ width:100%; }
  .karte{ padding:32px 26px 28px; }
  .leistungen{ grid-template-columns:1fr; }
  .ablauf{ grid-template-columns:1fr; row-gap:34px; }
  .ablauf li::after{ display:none; }

  /* Untereinander wirken die vier Schritte mittig ruhiger als linksbuendig.
     Die Ziffer sitzt absolut, wird deshalb ueber die halbe Breite geschoben. */
  .ablauf li{ text-align:center; }
  .ablauf li::before{ left:50%; transform:translateX(-50%); }

  /* Die Staedteliste bleibt zweispaltig, der Block als Ganzes rueckt in die
     Mitte: Spalten so breit wie ihr Inhalt, das Raster mittig gesetzt.     */
  ul.orte{ grid-template-columns:repeat(2,max-content); justify-content:center; }
  .form-reihe{ grid-template-columns:1fr; gap:0; }
  .fuss__oben{ grid-template-columns:1fr; }
  .beweis img{ max-height:25px; }
  .beweis ul{ gap:20px 32px; }
  .btn{ padding-inline:22px; }
  .btn--gross{ font-size:16px; gap:10px; padding-inline:18px; }
  .blase{ max-width:94%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ transition-duration:.01ms !important; }
}

/* ==========================================================================
   Warum Krüger – positiver Block mit Bild und Haken
   ========================================================================== */
.vorteile__innen{
  display:grid; grid-template-columns:.92fr 1.08fr;
  gap:66px; align-items:stretch;
}
.vorteile__bild{ display:flex; }
.vorteile__bild img{
  display:block; width:100%; height:100%;
  min-height:460px; object-fit:cover;
}
.vorteile__liste{
  margin:32px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:15px 30px;
}
.vorteile__liste li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:16px; color:var(--ink-2);
}
.vorteile__liste svg{
  width:19px; height:19px; flex:0 0 auto;
  color:var(--gruen); margin-top:2px;
}
.vorteile__aktion{ margin:38px 0 0; }

/* ==========================================================================
   Angebot in dunkler Ausführung
   Gleiche Farbwerte wie der WhatsApp-Abschnitt, damit die Seite ein
   einheitliches Dunkel hat.
   ========================================================================== */
.angebot--dunkel{ background:var(--gruen-900); }
.angebot--dunkel .angebot__schleier{ background:rgba(22,51,44,.90); }

.angebot--dunkel .eyebrow{ color:#7FC4B2; }
.angebot--dunkel h2{ color:#fff; }
.angebot--dunkel .lead{ color:#A9C6BF; }

.angebot--dunkel .angebot__nutzen li{ color:#DCE8E4; }
.angebot--dunkel .angebot__nutzen svg{ color:#7FC4B2; }

.angebot--dunkel .angebot__kontakt{ color:#A9C6BF; border-top-color:rgba(255,255,255,.14); }
.angebot--dunkel .angebot__kontakt a{ color:#fff; text-decoration-color:rgba(255,255,255,.45); }
.angebot--dunkel .angebot__kontakt a:hover{ color:#7FC4B2; }

/* Die weiße Formularkarte bleibt hell – das ist der Kontrast, der sie trägt */
.angebot--dunkel .karte-form{
  border-color:transparent;
  box-shadow:0 2px 8px rgba(0,0,0,.20), 0 30px 70px -24px rgba(0,0,0,.55);
}

/* ==========================================================================
   Schmalere Bildschirme
   ========================================================================== */
@media (max-width:900px){
  .vorteile__innen{ grid-template-columns:1fr; gap:38px; }
  .vorteile__bild img{ min-height:0; aspect-ratio:3/2; }
}

@media (max-width:620px){
  .vorteile__liste{ grid-template-columns:1fr; gap:13px; }
  .vorteile__aktion .btn{ width:100%; }
}

/* ==========================================================================
   Rechtsseiten (Impressum, Datenschutz, AGB)
   ========================================================================== */
.rechts{ padding-block:72px var(--luft); }
.rechts__innen{ max-width:760px; margin-inline:auto; }
.rechts h1{ font-size:clamp(32px,3.2vw,44px); margin-bottom:14px; }
.rechts__stand{ color:var(--ink-3); font-size:15px; margin:0 0 48px; }

.rechts h2{
  font-size:23px; margin:44px 0 14px; padding-top:26px;
  border-top:1px solid var(--linie);
}
.rechts h2:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.rechts h3{ font-size:17px; margin:26px 0 8px; }
.rechts p, .rechts li{ font-size:16.5px; line-height:1.72; color:var(--ink-2); }
.rechts p{ margin:0 0 14px; }
.rechts ul, .rechts ol{ margin:0 0 16px; padding-left:22px; }
.rechts li{ margin-bottom:7px; }
.rechts a{ color:var(--gruen-tief); }
.rechts strong{ color:var(--ink); }
.rechts address{ font-style:normal; margin-bottom:14px; }

/* Offene Stelle, die noch gefüllt werden muss */

@media (max-width:620px){
  .rechts{ padding-block:44px 64px; }
  .rechts h2{ font-size:21px; }
}

/* ==========================================================================
   Formular: Spamschutz und Rückmeldungen
   ========================================================================== */
/* Honigtopf – für Menschen unsichtbar, aber nicht display:none,
   damit Bots ihn ausfüllen. Aus dem Tab-Fluss und für Screenreader raus. */
.honigtopf{
  position:absolute; left:-9999px; top:auto;
  width:1px; height:1px; overflow:hidden;
}

.form-hinweis--gut{ color:var(--gruen-tief); }
.form-hinweis--schlecht{ color:#B3261E; }
.karte-form button[disabled]{ opacity:.6; cursor:progress; }

/* ==========================================================================
   Ortstext – der Lesetext soll nicht wie ein SEO-Block aussehen
   ========================================================================== */
.ortstext__satz{ max-width:960px; margin:44px auto 0; }

.ortstext__auftakt{
  font-size:20px; line-height:1.68; color:var(--ink-2);
  text-align:center; max-width:760px; margin:14px auto 54px;
}
.ortstext__auftakt strong{ color:var(--ink); font-weight:600; }

.ortstext__spalten{ display:grid; grid-template-columns:1fr 1fr; gap:20px 60px; }
.ortstext__spalten h3{
  font-size:18px; margin:0 0 10px;
  padding-left:16px; border-left:3px solid var(--gruen);
}
.ortstext__spalten h3 + p{ margin:0 0 34px; padding-left:19px; }
.ortstext__spalten p{ font-size:16.5px; line-height:1.72; color:var(--ink-2); }
.ortstext__spalten div > *:last-child{ margin-bottom:0; }

.ortstext__schluss{
  margin:52px auto 0; padding-top:34px; max-width:720px;
  border-top:1px solid var(--linie);
  text-align:center; font-size:18px; line-height:1.68; color:var(--ink-2);
}
.ortstext__schluss strong{ color:var(--ink); font-weight:600; }
.ortstext__schluss a{ color:var(--gruen-tief); font-weight:600; }

@media (max-width:820px){
  .ortstext__spalten{ grid-template-columns:1fr; gap:34px; }
  .ortstext__auftakt{ font-size:18.5px; margin-bottom:38px; text-align:left; }
}

/* ==========================================================================
   Leistungs-Unterseiten
   ========================================================================== */
.brotkrumen{ margin-bottom:26px; }
.brotkrumen ol{ display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none; }
.brotkrumen li{ font-size:14px; color:var(--ink-3); }
.brotkrumen li + li::before{ content:"›"; margin-right:8px; color:var(--ink-3); }
.brotkrumen a{ color:var(--ink-3); text-decoration:none; }
.brotkrumen a:hover{ color:var(--gruen-tief); text-decoration:underline; }
.brotkrumen [aria-current]{ color:var(--ink); font-weight:600; }

.leistungskopf{ padding-block:56px 84px; background:var(--weiss); }
.leistungskopf__innen{
  display:grid; grid-template-columns:1.02fr .98fr;
  gap:64px; align-items:center;
}
.leistungskopf h1{ margin-bottom:0; }
.leistungskopf .lead{ max-width:520px; }
.leistungskopf__aktion{ margin:36px 0 0; }
.leistungskopf__bild img{
  display:block; width:100%; height:100%;
  min-height:380px; object-fit:cover;
}

/* Leistungsumfang */
.umfang{ max-width:900px; margin:52px auto 0; }
.umfang__liste{
  display:grid; grid-template-columns:1fr 1fr; gap:15px 40px;
  margin:0; padding:0; list-style:none;
}
.umfang__liste li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:16.5px; color:var(--ink-2);
}
.umfang__liste svg{
  width:19px; height:19px; flex:0 0 auto;
  color:var(--gruen); margin-top:3px;
}
.umfang__fuss{
  max-width:640px; margin:44px auto 0; text-align:center;
  font-size:15.5px; color:var(--ink-3);
}

/* Zielgruppen */
.zielgruppen{
  margin-top:52px; display:grid;
  grid-template-columns:repeat(2,1fr); gap:20px;
}
.zielgruppe{
  padding:30px 28px; background:var(--sand);
  border-left:3px solid var(--gruen);
}
.zielgruppe h3{ font-size:18px; margin:0 0 9px; }
.zielgruppe p{ margin:0; font-size:16px; line-height:1.68; color:var(--ink-2); }

/* Verweise auf die übrigen Leistungen */
.weitere{
  margin:48px auto 0; max-width:900px; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px;
}
.weitere a{
  display:flex; align-items:center; min-height:64px;
  padding:14px 18px; background:var(--weiss);
  border:1px solid var(--linie);
  font-size:15px; font-weight:600; color:var(--ink);
  text-decoration:none; transition:border-color .18s ease, color .18s ease;
}
.weitere a:hover{ border-color:var(--gruen); color:var(--gruen-tief); }

@media (max-width:900px){
  .leistungskopf__innen{ grid-template-columns:1fr; gap:38px; }
  .leistungskopf__bild img{ min-height:0; aspect-ratio:3/2; }
  .leistungskopf .lead{ max-width:none; }
  .zielgruppen{ grid-template-columns:1fr; }
  .weitere{ grid-template-columns:repeat(2,1fr); }
}

@media (max-width:620px){
  .leistungskopf{ padding-block:34px 56px; }
  .umfang__liste{ grid-template-columns:1fr; gap:13px; }
  .weitere{ grid-template-columns:1fr; }
  .leistungskopf__aktion .btn{ width:100%; }
}

/* Verlinkte Leistungsüberschrift */
.leistung h3 a{
  color:inherit; text-decoration:none;
  background-image:linear-gradient(var(--gruen),var(--gruen));
  background-size:0 2px; background-position:0 100%;
  background-repeat:no-repeat; transition:background-size .22s ease, color .22s ease;
}
.leistung h3 a:hover{ color:var(--gruen-tief); background-size:100% 2px; }

/* ==========================================================================
   Innungslogos – zwei einzelne Zeichen statt einer Sammelgrafik
   ========================================================================== */
.innung__logos{
  margin-top:38px; display:flex; align-items:center; gap:26px;
  flex-wrap:wrap;
}
.innung__logos img{ display:block; width:auto; }
.innung__logos img:first-child{ height:78px; }
.innung__logos img:last-child{ height:60px; }

@media (max-width:620px){
  .innung__logos{ gap:18px; }
  .innung__logos img:first-child{ height:62px; }
  .innung__logos img:last-child{ height:48px; }
}

/* Innungszeichen im dunklen Fußbereich – Negativfassung */
.fuss__innung{
  margin-top:30px; display:flex; align-items:center; gap:20px; flex-wrap:wrap;
}
.fuss__innung img{ display:block; width:auto; opacity:.88; }
.fuss__innung img:first-child{ height:62px; }
.fuss__innung img:last-child{ height:46px; }

/* ==========================================================================
   Standortseite
   ========================================================================== */
.ortekopf{ padding-block:56px 78px; background:var(--weiss); }
.ortekopf__innen{
  display:grid; grid-template-columns:1.05fr .95fr;
  gap:56px; align-items:center;
}
.ortekopf h1{ margin-bottom:0; }
.ortekopf .lead{ max-width:560px; }

.orte-raster{
  display:grid; grid-template-columns:repeat(3,1fr); gap:20px;
}
.ort{
  padding:28px 26px; background:var(--weiss);
  border:1px solid var(--linie);
  display:flex; flex-direction:column;
  /* Rasterfelder haben min-width:auto und schrumpfen sonst nicht unter
     die Breite der längsten E-Mail-Adresse */
  min-width:0;
}
.ort--haupt{ border-color:var(--gruen); box-shadow:inset 3px 0 0 var(--gruen); }
.ort h2{ font-size:21px; margin:0; }
.ort__hinweis{
  display:block; margin-top:5px;
  font-size:13px; font-weight:600; letter-spacing:.05em;
  text-transform:uppercase; color:var(--gruen-tief);
}
.ort address{
  font-style:normal; margin:16px 0 0;
  font-size:15.5px; line-height:1.62; color:var(--ink-2);
}

.ort__kontakt{
  margin:18px 0 0; padding-top:16px;
  border-top:1px solid var(--linie);
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 14px;
  font-size:15px;
}
.ort__kontakt dt{ color:var(--ink-3); }
.ort__kontakt dd{
  margin:0; color:var(--ink-2);
  /* break-word statt anywhere: dann wird der <wbr> im E-Mail-Namen
     als Trennstelle bevorzugt, statt mitten im Wort zu brechen */
  overflow-wrap:break-word; word-break:normal; hyphens:none;
}
.ort__kontakt a{ color:var(--ink); font-weight:600; text-decoration:none; }
.ort__kontakt a:hover{ color:var(--gruen-tief); text-decoration:underline; }

@media (max-width:980px){
  .orte-raster{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:900px){
  .ortekopf__innen{ grid-template-columns:1fr; gap:34px; }
  .ortekopf .lead{ max-width:none; }
  .ortekopf__karte .standortkarte{ max-width:280px; }
}
@media (max-width:620px){
  .ortekopf{ padding-block:34px 52px; }
  .orte-raster{ grid-template-columns:1fr; }
}

/* ==========================================================================
   Standortkarte und Boxen – gekoppelte Hervorhebung
   ========================================================================== */
.standortkarte{
  display:block; width:100%; margin-inline:auto;
  /* modern.css benutzt .karte für die weiße Anfragekarte im Hero –
     hier ausdrücklich nichts davon */
  background:none; box-shadow:none; padding:0; border:0;
}
.ortekopf__karte .standortkarte{ max-width:400px; }
.standortkarte .raster circle{ fill:#9DACA7; }

.standortkarte .orte circle{
  fill:var(--gruen); stroke:var(--sand); stroke-width:1.6;
  transition:transform .18s ease, fill .18s ease;
  transform-box:fill-box; transform-origin:center;
}
/* Punkt selbst überfahren oder zugehörige Box überfahren */
.standortkarte .orte circle:hover,
.standortkarte .orte circle.wach{
  fill:var(--gruen-tief); transform:scale(1.55);
}

/* Box wie die Leistungskarten */
.ort{ transition:border-color .2s, box-shadow .2s; }
.ort:hover{ border-color:var(--gruen); box-shadow:var(--schatten); }
.ort--haupt:hover{ box-shadow:inset 3px 0 0 var(--gruen), var(--schatten); }

@media (prefers-reduced-motion:reduce){
  .standortkarte .orte circle{ transition:none; }
  .standortkarte .orte circle:hover,
  .standortkarte .orte circle.wach{ transform:none; }
}

/* Von der Karte aus hervorgehobene Box – nur die Standortkarten,
   nicht die Städtenamen in der Liste auf der Startseite */
article.ort.ort--wach{ border-color:var(--gruen); box-shadow:var(--schatten); }
article.ort--haupt.ort--wach{ box-shadow:inset 3px 0 0 var(--gruen), var(--schatten); }

/* Karte auf der Startseite */
.standorte__karte .standortkarte{ max-width:400px; }

/* Städteliste: der Name hebt sich als kleine Karte ab.
   Innenabstand und negativer Außenabstand, damit die Zeilen dabei
   nicht verrutschen. */
ul.orte li{
  margin:0 -12px; padding:8px 12px;   /* modern.css setzt 8px 0 – Höhe bleibt gleich */
  background:transparent; border:1px solid transparent;
  transition:color .18s ease, background .18s ease,
             border-color .18s ease, box-shadow .18s ease;
}
ul.orte li.ort--wach{
  color:var(--gruen-tief); font-weight:600;
  background:var(--weiss); border-color:var(--linie);
  box-shadow:var(--schatten);
}
ul.orte li.ort--wach svg{ color:var(--gruen-tief); }

/* ==========================================================================
   Standort-Landingpage
   ========================================================================== */
.stadtkontakt{
  display:grid; grid-template-columns:.9fr 1.1fr; gap:24px;
  margin-top:52px; align-items:start;
}
.stadtkontakt .ort h3{ font-size:19px; margin:0; }
.stadtkontakt .ort address{ margin-top:14px; }

.bezirke{ padding:28px 26px; background:var(--weiss); border:1px solid var(--linie); }
.bezirke h3{ font-size:19px; margin:0 0 4px; }
/* Bezirke sind keine Standorte – hier ohne Hervorhebungseffekt */
.orte--fest{ grid-template-columns:repeat(2,1fr); margin-top:18px; }
.orte--fest li{ margin:0; padding:7px 0; background:none; border:0; box-shadow:none; }

.stadtleistungen{
  margin:52px 0 0; padding:0; list-style:none;
  display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.stadtleistungen a{
  display:block; height:100%; padding:22px 24px;
  background:var(--weiss); border:1px solid var(--linie);
  text-decoration:none; transition:border-color .2s, box-shadow .2s;
}
.stadtleistungen a:hover{ border-color:var(--gruen); box-shadow:var(--schatten); }
.stadtleistungen strong{ display:block; font-size:17px; color:var(--ink); }
.stadtleistungen span{ display:block; margin-top:5px; font-size:15px; color:var(--ink-2); }

@media (max-width:900px){
  .stadtkontakt{ grid-template-columns:1fr; }
  .stadtleistungen{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:620px){
  .stadtleistungen{ grid-template-columns:1fr; }
}

/* Verlinkte Stadt auf der Standortseite */
.ort h2 a{ color:inherit; text-decoration:none;
  background-image:linear-gradient(var(--gruen),var(--gruen));
  background-size:0 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .22s ease, color .22s ease; }
.ort h2 a:hover{ color:var(--gruen-tief); background-size:100% 2px; }

/* ==========================================================================
   Standort-Landingpage: Kopf mit Haken und Kontaktkarte
   ========================================================================== */
.stadt__haken{
  margin:30px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:13px 26px;
}
.stadt__haken li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:16px; color:var(--ink-2);
}
.stadt__haken svg{
  width:19px; height:19px; flex:0 0 auto;
  color:var(--gruen); margin-top:2px;
}

.stadt__karte{
  background:var(--weiss); border:1px solid var(--linie);
  box-shadow:var(--schatten); align-self:start;
}
.stadt__karte img{ display:block; width:100%; aspect-ratio:3/2; object-fit:cover; }
.stadt__karte-fuss{ padding:26px 28px 28px; }
.stadt__nummer{ margin:8px 0 0; font-size:27px; font-weight:800; letter-spacing:-.02em; }
.stadt__nummer a{ color:var(--ink); text-decoration:none; }
.stadt__nummer a:hover{ color:var(--gruen-tief); }
.stadt__zeiten{ margin:4px 0 20px; font-size:15px; color:var(--ink-3); }

@media (max-width:900px){
  .stadt__karte{ max-width:520px; margin-inline:auto; }
}
@media (max-width:620px){
  .stadt__haken{ grid-template-columns:1fr; gap:12px; }
}

/* Fußlogo: lange Fassung mit Schriftzug – breiter als die kurze */
.fuss__logo{ width:250px; margin-bottom:24px; }
@media (max-width:620px){ .fuss__logo{ width:210px; } }

/* ==========================================================================
   WhatsApp – nur in der mobilen Ansicht hervorgehoben
   ==========================================================================
   Auf dem Desktop bleibt alles wie bisher. Am Telefon ist WhatsApp der
   naheliegendste Weg, deshalb wird er dort als solcher erkennbar gemacht.
   Markenfarbe #25D366 nach den WhatsApp-Gestaltungsvorgaben.
   ========================================================================== */
@media (max-width:900px){

  /* Fester Balken unten: WhatsApp in Markenfarbe statt als Umrisslinie */
  .balken .btn--wa{
    background:#25D366; border-color:#25D366; color:#fff;
  }
  .balken .btn--wa:hover,
  .balken .btn--wa:focus-visible{
    background:#1EBE5A; border-color:#1EBE5A; color:#fff;
  }
  .balken .btn--wa .wa-icon{ width:19px; height:19px; }

  /* Das blasse WhatsApp-Zeichen im Hintergrund der Hero-Karte ist bewusst
     entfernt: der grüne Balken unten trägt die Botschaft schon.            */
}