/* ===================================================================
   Autolackiererei Bahls
   /assets/ab-style.css

   Gestaltungsprinzip: die diagonale Kante aus dem Logo als
   durchgängiges Strukturmerkmal, plus ein Lackglanz-Effekt beim
   Überfahren von Karten.

   Die vielen !important sind Absicht – Hello Theme und Elementor
   bringen eigene Regeln für Überschriften, Listen, Tabellen und
   SVG mit, die sonst gewinnen.
   =================================================================== */

.ab-seite{
  --ab-navy:#0C3A68;
  --ab-navy-tief:#072A4D;
  --ab-teal:#0E5F74;
  --ab-rot:#C1101F;
  --ab-rot-hell:#E01C2B;
  --ab-grau:#F2F4F6;
  --ab-grau-tief:#E7EBEF;
  --ab-linie:#DDE2E7;
  --ab-text:#2B3238;
  --ab-text-hell:#5C666F;

  font-family:"Helvetica Neue",Helvetica,Arial,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  color:var(--ab-text);
  line-height:1.6;
  font-size:17px;
  overflow-x:hidden;
}

.ab-seite *{ box-sizing:border-box }

.ab-seite svg{
  display:block !important;
  flex:0 0 auto !important;
}

.ab-seite img{ max-width:100%; height:auto }

/* Lange Wörter nie aus dem Bild laufen lassen */
.ab-seite h1,
.ab-seite h2,
.ab-seite h3,
.ab-seite p,
.ab-seite li,
.ab-seite td,
.ab-seite th,
.ab-seite a{
  overflow-wrap:break-word;
  word-break:normal;
}

/* Hello Theme und Elementor zurückdrängen */
.page-template-ab-page-home .site-main,
.page-template-ab-page-home .page-content,
.page-template-ab-page-home .entry-content,
.page-template-ab-page-coming-soon .site-main,
.page-template-ab-page-coming-soon .page-content,
.page-template-ab-page-coming-soon .entry-content,
.page-template-ab-page-impressum .site-main,
.page-template-ab-page-impressum .page-content,
.page-template-ab-page-datenschutz .site-main,
.page-template-ab-page-datenschutz .page-content,
.page-template-ab-page-inhalt .site-main,
.page-template-ab-page-inhalt .page-content{
  max-width:none !important;
  width:100% !important;
  padding:0 !important;
  margin:0 !important;
}

.page-template-ab-page-home .site-header,
.page-template-ab-page-home .site-footer,
.page-template-ab-page-home .page-header,
.page-template-ab-page-coming-soon .site-header,
.page-template-ab-page-coming-soon .site-footer,
.page-template-ab-page-coming-soon .page-header,
.page-template-ab-page-impressum .site-header,
.page-template-ab-page-impressum .site-footer,
.page-template-ab-page-impressum .page-header,
.page-template-ab-page-datenschutz .site-header,
.page-template-ab-page-datenschutz .site-footer,
.page-template-ab-page-datenschutz .page-header,
.page-template-ab-page-inhalt .site-header,
.page-template-ab-page-inhalt .site-footer,
.page-template-ab-page-inhalt .page-header{
  display:none !important;
}

.page-template-ab-page-home #content,
.page-template-ab-page-home .site-content,
.page-template-ab-page-coming-soon #content,
.page-template-ab-page-coming-soon .site-content,
.page-template-ab-page-impressum #content,
.page-template-ab-page-impressum .site-content,
.page-template-ab-page-datenschutz #content,
.page-template-ab-page-datenschutz .site-content,
.page-template-ab-page-inhalt #content,
.page-template-ab-page-inhalt .site-content{
  padding-top:0 !important;
  margin-top:0 !important;
}

/* ===================================================================
   KNÖPFE
   =================================================================== */
.ab-knopf{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  max-width:100%;
  text-align:center;
  padding:.95rem 1.7rem;
  font-size:1rem;
  font-weight:700;
  letter-spacing:.005em;
  border-radius:4px;
  text-decoration:none !important;
  border:2px solid transparent;
  position:relative;
  overflow:hidden;
  transition:background-color .35s cubic-bezier(.33,1,.68,1), color .35s cubic-bezier(.33,1,.68,1), border-color .35s cubic-bezier(.33,1,.68,1), transform .35s cubic-bezier(.33,1,.68,1), box-shadow .35s cubic-bezier(.33,1,.68,1);
}
.ab-knopf::after{
  content:"";
  position:absolute;
  top:0; left:-60%;
  width:40%; height:100%;
  background:linear-gradient(100deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.28) 50%, rgba(255,255,255,0) 100%);
  transform:skewX(-18deg);
  transition:left .75s cubic-bezier(.33,1,.68,1);
  pointer-events:none;
}
.ab-knopf:hover::after,
.ab-knopf:focus-visible::after{ left:130% }

.ab-knopf-rot{
  background:var(--ab-rot);
  color:#fff !important;
  box-shadow:0 4px 14px rgba(193,16,31,.25);
}
.ab-knopf-rot:hover,
.ab-knopf-rot:focus-visible{
  background:var(--ab-rot-hell);
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(193,16,31,.32);
}

.ab-knopf-linie{
  border-color:rgba(255,255,255,.45);
  color:#fff !important;
}
.ab-knopf-linie:hover,
.ab-knopf-linie:focus-visible{
  border-color:#fff;
  background:rgba(255,255,255,.1);
  transform:translateY(-2px);
}

.ab-knopf-weiss{
  background:#fff;
  color:var(--ab-navy) !important;
}
.ab-knopf-weiss:hover,
.ab-knopf-weiss:focus-visible{
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,0,0,.18);
}

/* ===================================================================
   INFOLEISTE UND HAUPTMENÜ
   =================================================================== */
.ab-leiste{
  background:var(--ab-navy-tief);
  color:#A9BECF;
  font-size:.88rem;
}
.ab-leiste-inner{
  max-width:1160px;
  margin:0 auto;
  padding:.55rem clamp(1.25rem,4vw,2.5rem);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.4rem 1.75rem;
}
.ab-leiste-link{
  display:inline-flex !important;
  align-items:center;
  gap:.45rem;
  color:#C9D9E5 !important;
  text-decoration:none !important;
  transition:color .3s cubic-bezier(.33,1,.68,1);
}
.ab-leiste-link:hover,
.ab-leiste-link:focus-visible{ color:#fff !important }
.ab-leiste-icon{
  width:15px !important;
  height:15px !important;
  flex:0 0 15px !important;
  color:var(--ab-rot-hell);
}
.ab-leiste-icon svg{ width:15px !important; height:15px !important }
.ab-leiste-heute{ margin-left:auto; color:#8FA8BC }
.ab-leiste-heute strong{ color:#D5E2EC; font-weight:600 }

.ab-nav{
  position:sticky;
  top:0;
  z-index:50;
  background:#fff;
  border-bottom:1px solid var(--ab-linie);
  box-shadow:0 1px 0 rgba(12,58,104,.04);
}
.ab-nav-inner{
  max-width:1160px;
  margin:0 auto;
  padding:0 clamp(1.25rem,4vw,2.5rem);
  display:flex;
  align-items:center;
  gap:1.5rem;
  min-height:68px;
}

.ab-schalter{
  position:absolute !important;
  opacity:0;
  width:1px; height:1px;
  pointer-events:none;
}

.ab-nav-marke{
  display:flex !important;
  align-items:center;
  text-decoration:none !important;
  flex:0 0 auto;
  margin-right:auto;
}

/* Menü und Anruf-Knopf bilden die rechte Gruppe */
.ab-nav-rechts{
  display:flex;
  align-items:center;
  gap:1.75rem;
  margin-left:auto;
}

/* Aufklappknopf – nur auf schmalen Bildschirmen sichtbar */
.ab-burger{
  display:none;
  position:relative;
  width:44px;
  height:44px;
  margin-left:auto;
  cursor:pointer;
  border:1px solid var(--ab-linie);
  border-radius:4px;
  background:#fff;
  transition:border-color .35s cubic-bezier(.33,1,.68,1), background-color .35s cubic-bezier(.33,1,.68,1);
}
.ab-burger:hover{ border-color:var(--ab-navy) }
.ab-burger-strich{
  position:absolute;
  left:12px;
  width:20px;
  height:2px;
  background:var(--ab-navy);
  border-radius:2px;
  transition:transform .4s cubic-bezier(.33,1,.68,1), opacity .25s cubic-bezier(.33,1,.68,1), top .4s cubic-bezier(.33,1,.68,1);
}
.ab-burger-strich:nth-child(1){ top:15px }
.ab-burger-strich:nth-child(2){ top:21px }
.ab-burger-strich:nth-child(3){ top:27px }
.ab-burger-text{
  position:absolute !important;
  left:-9999px;
  width:1px; height:1px;
  overflow:hidden;
}

.ab-schalter:checked ~ .ab-burger .ab-burger-strich:nth-child(1){ top:21px; transform:rotate(45deg) }
.ab-schalter:checked ~ .ab-burger .ab-burger-strich:nth-child(2){ opacity:0; transform:scaleX(.3) }
.ab-schalter:checked ~ .ab-burger .ab-burger-strich:nth-child(3){ top:21px; transform:rotate(-45deg) }

.ab-schalter:focus-visible ~ .ab-burger{
  outline:3px solid var(--ab-rot);
  outline-offset:3px;
}
.ab-nav-marke img{ max-height:42px; width:auto; display:block }
.ab-nav-wortmarke{
  display:flex;
  flex-direction:column;
  line-height:1;
  font-style:italic;
  color:var(--ab-navy);
}
.ab-nav-wortmarke span{ font-size:.72rem; letter-spacing:.06em; color:var(--ab-text-hell); font-style:normal }
.ab-nav-wortmarke strong{ font-size:1.35rem; font-weight:800 }

.ab-menu{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:0 1.6rem;
}
.ab-menu li{ margin:0 !important; padding:0 !important; list-style:none !important }
.ab-menu li::before,
.ab-menu li::marker{ content:none !important }

.ab-menu a{
  display:block;
  position:relative;
  padding:.4rem 0;
  color:var(--ab-text) !important;
  text-decoration:none !important;
  font-size:.98rem;
  font-weight:600;
  transition:color .3s cubic-bezier(.33,1,.68,1);
}
.ab-menu a::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:0; height:2px;
  background:var(--ab-rot);
  transition:width .4s cubic-bezier(.33,1,.68,1);
}
.ab-menu a:hover,
.ab-menu a:focus-visible{ color:var(--ab-navy) !important }
.ab-menu a:hover::after,
.ab-menu a:focus-visible::after{ width:100% }
.ab-menu .current-menu-item > a,
.ab-menu .current_page_item > a{ color:var(--ab-navy) !important }
.ab-menu .current-menu-item > a::after,
.ab-menu .current_page_item > a::after{ width:100% }

.ab-nav-cta{
  flex:0 0 auto;
  padding:.6rem 1.2rem;
  background:var(--ab-navy);
  color:#fff !important;
  border-radius:4px;
  font-size:.92rem;
  font-weight:700;
  text-decoration:none !important;
  transition:background-color .35s cubic-bezier(.33,1,.68,1), transform .35s cubic-bezier(.33,1,.68,1);
}
.ab-nav-cta:hover,
.ab-nav-cta:focus-visible{ background:var(--ab-rot); transform:translateY(-1px) }



/* ===================================================================
   HERO
   =================================================================== */
.ab-hero{
  position:relative;
  background:linear-gradient(105deg, var(--ab-navy-tief) 0%, var(--ab-navy) 45%, var(--ab-teal) 100%);
  padding:clamp(3.5rem,8vw,6.5rem) clamp(1.25rem,4vw,2.5rem) clamp(5rem,9vw,7rem);
  overflow:hidden;
}
.ab-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 40%);
  pointer-events:none;
}
.ab-hero::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height:clamp(16px,2vw,31px);
  background:#fff;
  clip-path:polygon(0 100%, 100% 0, 100% 100%);
}
.ab-hero-wasserzeichen{
  position:absolute;
  right:-6%;
  bottom:12%;
  width:min(640px,58%);
  opacity:.1;
  pointer-events:none;
  filter:grayscale(1) brightness(2);
}

.ab-hero-inner{
  position:relative;
  z-index:2;
  max-width:1160px;
  margin:0 auto;
  display:grid;
  gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:minmax(0,1.55fr) minmax(280px,1fr);
  align-items:center;
}
@media (max-width:900px){
  .ab-hero-inner{ grid-template-columns:1fr }
}

.ab-hero-kicker{
  display:inline-block;
  position:relative;
  padding-left:2.6rem;
  color:#9FC0D4;
  font-size:.92rem;
  font-weight:600;
  letter-spacing:.04em;
  margin-bottom:1.3rem;
}
.ab-hero-kicker::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:2rem; height:2px;
  background:var(--ab-rot-hell);
}

.ab-hero-titel{
  font-size:clamp(1.65rem,5.2vw,3.5rem) !important;
  font-weight:800;
  color:#fff;
  line-height:1.1;
  letter-spacing:-.022em;
  margin:0 !important;
  max-width:18ch;
  hyphens:manual;
  -webkit-hyphens:manual;
  overflow-wrap:break-word;
}
.ab-betont{
  display:inline;
  color:#fff;
  background-image:linear-gradient(var(--ab-rot), var(--ab-rot));
  background-repeat:no-repeat;
  background-size:100% .14em;
  background-position:0 88%;
  -webkit-box-decoration-break:clone;
  box-decoration-break:clone;
  padding-bottom:.04em;
}

.ab-hero-sub{
  margin:1.5rem 0 0 !important;
  color:#CBDCE8;
  font-size:clamp(1rem,2.1vw,1.12rem);
  max-width:52ch;
  line-height:1.7;
}

.ab-hero-aktionen{
  display:flex;
  flex-wrap:wrap;
  gap:.9rem;
  margin-top:2.2rem;
}

/* Karte "Jetzt neu" */
.ab-hero-karte{
  position:relative;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.18);
  border-radius:6px;
  padding:1.9rem 1.7rem;
  backdrop-filter:blur(4px);
  overflow:hidden;
  transition:border-color .4s cubic-bezier(.33,1,.68,1), transform .4s cubic-bezier(.33,1,.68,1), background-color .4s cubic-bezier(.33,1,.68,1);
}
.ab-hero-karte::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:58px; height:58px;
  background:var(--ab-rot);
  clip-path:polygon(100% 0, 100% 100%, 0 0);
  transition:width .4s cubic-bezier(.33,1,.68,1), height .4s cubic-bezier(.33,1,.68,1);
}
.ab-hero-karte:hover{
  background:rgba(255,255,255,.1);
  border-color:rgba(255,255,255,.3);
  transform:translateY(-3px);
}
.ab-hero-karte:hover::before{ width:74px; height:74px }

.ab-hero-karte-marke{
  display:block;
  color:#9FC0D4;
  font-size:.82rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:.55rem;
}
.ab-hero-karte-titel{
  display:block;
  color:#fff;
  font-size:1.5rem;
  font-weight:800;
  line-height:1.15;
  letter-spacing:-.015em;
  hyphens:auto;
}
.ab-hero-karte-text{
  margin:.9rem 0 1.3rem !important;
  color:#C0D4E2;
  font-size:.96rem;
  line-height:1.65;
}
.ab-hero-karte-link{
  display:inline-flex !important;
  align-items:center;
  color:#fff !important;
  font-weight:700;
  font-size:.96rem;
  text-decoration:none !important;
  border-bottom:2px solid var(--ab-rot);
  padding-bottom:.15rem;
  transition:border-color .35s cubic-bezier(.33,1,.68,1), color .35s cubic-bezier(.33,1,.68,1);
}
.ab-hero-karte-link:hover,
.ab-hero-karte-link:focus-visible{
  color:var(--ab-rot-hell) !important;
  border-bottom-color:#fff;
}

/* ===================================================================
   SCHNELLKONTAKT-KACHELN
   =================================================================== */
.ab-schnell{
  background:#fff;
  padding:clamp(3rem,6vw,4.5rem) clamp(1.25rem,4vw,2.5rem) clamp(4.5rem,9vw,7rem);
}
.ab-schnell-inner{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.ab-schnell-zwei .ab-schnell-inner{
  max-width:760px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

.ab-kachel{
  position:relative;
  display:flex !important;
  flex-direction:column;
  align-items:flex-start;
  padding:1.9rem 1.8rem 1.9rem 2rem;
  background:#fff;
  border:1px solid var(--ab-linie);
  border-radius:6px;
  text-decoration:none !important;
  color:var(--ab-text) !important;
  overflow:hidden;
  transition:border-color .4s cubic-bezier(.33,1,.68,1), box-shadow .4s cubic-bezier(.33,1,.68,1), transform .4s cubic-bezier(.33,1,.68,1);
}
/* senkrechter Akzentbalken, fährt beim Überfahren aus */
.ab-kachel::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:4px; height:26px;
  background:var(--ab-rot);
  transform:translateY(-50%);
  opacity:0;
  transition:height .5s cubic-bezier(.33,1,.68,1), opacity .4s cubic-bezier(.33,1,.68,1);
}
.ab-kachel:hover::before,
.ab-kachel:focus-visible::before{ height:100%; opacity:1 }
/* Lackglanz beim Überfahren */
.ab-kachel::after{
  content:"";
  position:absolute;
  top:0; left:-70%;
  width:45%; height:100%;
  background:linear-gradient(100deg, rgba(12,58,104,0) 0%, rgba(12,58,104,.05) 50%, rgba(12,58,104,0) 100%);
  transform:skewX(-18deg);
  transition:left .85s cubic-bezier(.33,1,.68,1);
  pointer-events:none;
}
.ab-kachel:hover::after,
.ab-kachel:focus-visible::after{ left:130% }
.ab-kachel:hover,
.ab-kachel:focus-visible{
  border-color:var(--ab-navy);
  box-shadow:0 10px 30px rgba(12,58,104,.1);
  transform:translateY(-3px);
}

.ab-kachel-icon{
  width:46px !important;
  height:46px !important;
  flex:0 0 46px !important;
  display:grid !important;
  place-items:center;
  border-radius:50%;
  background:var(--ab-grau);
  color:var(--ab-navy);
  margin-bottom:1.2rem;
  overflow:hidden;
  transition:background-color .4s cubic-bezier(.33,1,.68,1), color .4s cubic-bezier(.33,1,.68,1);
}
.ab-kachel-icon svg{ width:21px !important; height:21px !important }
.ab-kachel:hover .ab-kachel-icon{ background:var(--ab-rot); color:#fff }

.ab-kachel-titel{
  font-size:1.2rem;
  font-weight:700;
  color:var(--ab-navy);
  line-height:1.2;
  letter-spacing:-.01em;
}
.ab-kachel-sub{
  margin-top:.25rem;
  color:var(--ab-text-hell);
  font-size:.94rem;
}
.ab-kachel-wert{
  margin-top:1rem;
  padding-top:1rem;
  border-top:1px solid var(--ab-linie);
  width:100%;
  font-weight:700;
  color:var(--ab-navy);
  font-size:1rem;
  word-break:break-word;
  transition:color .4s cubic-bezier(.33,1,.68,1);
}
.ab-kachel:hover .ab-kachel-wert{ color:var(--ab-rot) }

/* ===================================================================
   ABSCHNITTSKÖPFE
   =================================================================== */
.ab-abschnitt-kopf{ max-width:44rem; margin-bottom:clamp(2rem,4vw,3rem) }
.ab-abschnitt-kicker{
  display:inline-block;
  position:relative;
  padding-left:2.6rem;
  color:var(--ab-rot);
  font-size:.88rem;
  font-weight:700;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:.9rem;
}
.ab-abschnitt-kicker::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:2rem; height:2px;
  background:var(--ab-rot);
}
.ab-abschnitt-kicker.ab-hell{ color:var(--ab-rot-hell) }

.ab-abschnitt-titel{
  font-size:clamp(1.55rem,3.8vw,2.3rem) !important;
  font-weight:800;
  color:var(--ab-navy);
  line-height:1.15;
  letter-spacing:-.018em;
  margin:0 !important;
}
.ab-abschnitt-text{
  margin:1rem 0 0 !important;
  color:var(--ab-text-hell);
  font-size:1.05rem;
  line-height:1.7;
}

/* ===================================================================
   LEISTUNGEN
   =================================================================== */
.ab-leistungen{
  position:relative;
  background:var(--ab-grau);
  padding:clamp(4rem,8vw,5.5rem) clamp(1.25rem,4vw,2.5rem);
  margin-top:0;
}
.ab-leistungen::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height:clamp(13px,1.7vw,25px);
  background:#fff;
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
.ab-leistungen-inner{
  position:relative;
  max-width:1160px;
  margin:0 auto;
}

.ab-karten{
  display:grid;
  gap:1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
}

.ab-karte{
  position:relative;
  background:#fff;
  border:1px solid var(--ab-linie);
  border-radius:6px;
  padding:1.9rem 1.8rem;
  overflow:hidden;
  transition:border-color .4s cubic-bezier(.33,1,.68,1), box-shadow .4s cubic-bezier(.33,1,.68,1), transform .4s cubic-bezier(.33,1,.68,1);
}
/* diagonale Ecke, wächst beim Überfahren */
.ab-karte::before{
  content:"";
  position:absolute;
  top:0; right:0;
  width:0; height:0;
  border-style:solid;
  border-width:0 44px 44px 0;
  border-color:transparent var(--ab-grau-tief) transparent transparent;
  transition:border-width .45s cubic-bezier(.33,1,.68,1), border-color .4s cubic-bezier(.33,1,.68,1);
}
.ab-karte:hover,
.ab-karte:focus-within{
  border-color:var(--ab-navy);
  box-shadow:0 12px 34px rgba(12,58,104,.12);
  transform:translateY(-3px);
}
.ab-karte:hover::before{
  border-width:0 58px 58px 0;
  border-color:transparent var(--ab-rot) transparent transparent;
}

.ab-karte-icon{
  width:48px !important;
  height:48px !important;
  flex:0 0 48px !important;
  display:grid !important;
  place-items:center;
  border-radius:6px;
  background:var(--ab-navy);
  color:#fff;
  margin-bottom:1.3rem;
  overflow:hidden;
  transition:background-color .4s cubic-bezier(.33,1,.68,1), transform .4s cubic-bezier(.33,1,.68,1);
}
.ab-karte-icon svg{ width:24px !important; height:24px !important }
.ab-karte:hover .ab-karte-icon{ background:var(--ab-rot); transform:rotate(-3deg) }

.ab-karte-titel{
  font-size:1.14rem !important;
  font-weight:700;
  color:var(--ab-navy);
  line-height:1.3;
  margin:0 !important;
  letter-spacing:-.008em;
  padding-right:2rem;
}
.ab-karte-text{
  margin:.7rem 0 0 !important;
  color:var(--ab-text-hell);
  font-size:.97rem;
  line-height:1.65;
}

/* ===================================================================
   ZAHLENBAND
   =================================================================== */
.ab-zahlen{
  background:var(--ab-navy);
  padding:clamp(2.5rem,5vw,3.5rem) clamp(1.25rem,4vw,2.5rem);
}
.ab-zahlen-inner{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  gap:1.5rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.ab-zahl{
  position:relative;
  padding-left:1.3rem;
  border-left:3px solid rgba(255,255,255,.16);
  transition:border-color .4s cubic-bezier(.33,1,.68,1);
}
.ab-zahl:hover{ border-left-color:var(--ab-rot) }
.ab-zahl-wert{
  display:block;
  color:#fff;
  font-size:clamp(1.7rem,3.6vw,2.3rem);
  font-weight:800;
  line-height:1.05;
  letter-spacing:-.02em;
}
.ab-zahl-label{
  display:block;
  margin-top:.45rem;
  color:#9FC0D4;
  font-size:.94rem;
  line-height:1.5;
}

/* ===================================================================
   ABLAUF
   =================================================================== */
.ab-ablauf{
  background:#fff;
  padding:clamp(4rem,8vw,5.5rem) clamp(1.25rem,4vw,2.5rem);
}
.ab-ablauf-inner{ max-width:1160px; margin:0 auto }

.ab-schritte{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:grid;
  gap:1.5rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  counter-reset:none;
}
.ab-schritte li{ margin:0 !important; padding:0 !important; list-style:none !important }
.ab-schritte li::before,
.ab-schritte li::marker{ content:none !important }

.ab-schritt{
  position:relative;
  padding-top:1.4rem;
  border-top:3px solid var(--ab-linie);
  transition:border-color .4s cubic-bezier(.33,1,.68,1);
}
.ab-schritt:hover{ border-top-color:var(--ab-rot) }

.ab-schritt-nr{
  display:block;
  font-size:.95rem;
  font-weight:800;
  color:var(--ab-rot);
  letter-spacing:.08em;
  margin-bottom:.5rem;
}
.ab-schritt-titel{
  font-size:1.1rem !important;
  font-weight:700;
  color:var(--ab-navy);
  margin:0 !important;
  line-height:1.3;
}
.ab-schritt-text{
  margin:.6rem 0 0 !important;
  color:var(--ab-text-hell);
  font-size:.96rem;
  line-height:1.65;
}

/* ===================================================================
   KONTAKTBEREICH
   =================================================================== */
.ab-kontakt{
  position:relative;
  background:linear-gradient(105deg, var(--ab-navy-tief) 0%, var(--ab-navy) 50%, var(--ab-teal) 100%);
  padding:clamp(4rem,8vw,5.5rem) clamp(1.25rem,4vw,2.5rem);
  overflow:hidden;
}
.ab-kontakt::before{
  content:"";
  position:absolute;
  left:0; right:0; top:-1px;
  height:clamp(13px,1.7vw,25px);
  background:#fff;
  clip-path:polygon(0 0, 100% 0, 0 100%);
}
.ab-kontakt-inner{
  position:relative;
  max-width:1160px;
  margin:0 auto;
  display:grid;
  gap:clamp(2rem,5vw,3.5rem);
  grid-template-columns:minmax(0,1.4fr) minmax(260px,1fr);
  align-items:start;
}
@media (max-width:860px){
  .ab-kontakt-inner{ grid-template-columns:1fr }
}

.ab-kontakt-titel{
  font-size:clamp(1.6rem,3.8vw,2.3rem) !important;
  font-weight:800;
  color:#fff;
  line-height:1.15;
  letter-spacing:-.018em;
  margin:0 !important;
  max-width:20ch;
}
.ab-kontakt-text{
  margin:1.1rem 0 0 !important;
  color:#CBDCE8;
  font-size:1.03rem;
  line-height:1.7;
  max-width:46ch;
}

.ab-kontakt-daten{
  margin:2.4rem 0 0 !important;
  padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.16);
  display:grid;
  gap:.9rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
}
.ab-kontakt-daten dt{
  color:#8FA8BC;
  font-size:.85rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  font-weight:700;
  margin-bottom:.3rem;
}
.ab-kontakt-daten dd{ margin:0 !important; color:#E2ECF3 }
.ab-kontakt-daten a{
  color:#E2ECF3 !important;
  text-decoration:none !important;
  border-bottom:1px solid rgba(255,255,255,.28);
  transition:border-color .35s cubic-bezier(.33,1,.68,1);
}
.ab-kontakt-daten a:hover,
.ab-kontakt-daten a:focus-visible{ border-bottom-color:var(--ab-rot-hell) }

.ab-kontakt-rechts{
  display:grid;
  gap:1.2rem;
  align-content:start;
}
.ab-kontakt-box{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16);
  border-radius:6px;
  padding:1.8rem 1.7rem;
}
.ab-aktionen-block{ margin-top:0 !important; flex-direction:column; align-items:stretch }
.ab-aktionen-block .ab-knopf{ width:100% }
.ab-zeiten-titel{
  display:block;
  color:#fff;
  font-size:1.05rem;
  font-weight:700;
  margin-bottom:1.1rem;
}
.ab-kontakt .ab-zeiten th{ color:#D5E2EC !important }
.ab-kontakt .ab-zeiten td{ color:#fff !important }
.ab-kontakt .ab-zeiten tr{ border-bottom-color:rgba(255,255,255,.14) !important }
.ab-kontakt .ab-zeiten .ab-zu th,
.ab-kontakt .ab-zeiten .ab-zu td{ color:#8FA8BC !important }

/* ===================================================================
   ÖFFNUNGSZEITEN-TABELLE (überall)
   =================================================================== */
.ab-zeiten,
.ab-zeiten tbody,
.ab-zeiten tr,
.ab-zeiten th,
.ab-zeiten td{
  border:0 !important;
  background:none !important;
  background-color:transparent !important;
  box-shadow:none !important;
}
.ab-zeiten{
  width:100%;
  border-collapse:collapse !important;
  font-size:.98rem;
  margin:0 !important;
}
.ab-zeiten tr{ border-bottom:1px solid var(--ab-linie) !important }
.ab-zeiten tr:last-child{ border-bottom:0 !important }
.ab-zeiten th,
.ab-zeiten td{
  padding:.5rem 0 !important;
  font-weight:400 !important;
  vertical-align:baseline;
}
.ab-zeiten th{ text-align:left !important; color:var(--ab-text) }
.ab-zeiten td{
  text-align:right !important;
  font-variant-numeric:tabular-nums;
  white-space:nowrap;
}
.ab-zeiten .ab-zu th,
.ab-zeiten .ab-zu td{ color:var(--ab-text-hell) }

/* ===================================================================
   FUSSBEREICH
   =================================================================== */
.ab-fuss{ background:var(--ab-navy-tief); color:#A9BECF }

.ab-fuss-oben{
  padding:clamp(2.5rem,5vw,3.5rem) clamp(1.25rem,4vw,2.5rem);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.ab-fuss-spalten{
  max-width:1160px;
  margin:0 auto;
  display:grid;
  gap:2rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}
.ab-fuss-titel{
  display:block;
  color:#fff;
  font-size:1rem;
  font-weight:700;
  margin-bottom:.7rem;
}
.ab-fuss-text{ margin:0 !important; line-height:1.7; font-size:.96rem }
.ab-fuss-text a{
  color:#C9D9E5 !important;
  text-decoration:none !important;
  border-bottom:1px solid transparent;
  transition:border-color .35s cubic-bezier(.33,1,.68,1), color .35s cubic-bezier(.33,1,.68,1);
}
.ab-fuss-text a:hover,
.ab-fuss-text a:focus-visible{ color:#fff !important; border-bottom-color:var(--ab-rot-hell) }

.ab-fuss-unten{ padding:1.3rem clamp(1.25rem,4vw,2.5rem); font-size:.9rem }
.ab-fuss-inner{
  max-width:1160px;
  margin:0 auto;
  display:flex;
  flex-wrap:wrap;
  gap:.6rem 1.75rem;
  align-items:baseline;
  justify-content:space-between;
}
.ab-fuss-menu{
  list-style:none !important;
  margin:0 !important;
  padding:0 !important;
  display:flex !important;
  flex-wrap:wrap;
  gap:0 1.5rem;
}
.ab-fuss-menu li{ margin:0 !important; padding:0 !important; list-style:none !important }
.ab-fuss-menu li::before,
.ab-fuss-menu li::marker{ content:none !important }
.ab-fuss-menu a{
  color:#D5E2EC !important;
  text-decoration:none !important;
  border-bottom:1px solid transparent;
  transition:border-color .35s cubic-bezier(.33,1,.68,1);
}
.ab-fuss-menu a:hover,
.ab-fuss-menu a:focus-visible{ border-bottom-color:var(--ab-rot-hell) }

/* ===================================================================
   ÜBERGANGSSEITE (Template "Bahls Übergangsseite")
   Nutzt dieselben Bausteine wie die Startseite, nur mittig gesetzt.
   =================================================================== */
.ab-hero-uebergang{
  padding-top:clamp(3rem,7vw,5rem);
  padding-bottom:clamp(5rem,9vw,7rem);
}
.ab-hero-inner-mittig{
  grid-template-columns:1fr;
  justify-items:center;
  text-align:center;
}
.ab-hero-inner-mittig .ab-hero-text{ max-width:52rem }

.ab-hero-inner-mittig .ab-logo-bild{
  max-width:min(460px,80%);
  height:auto;
  display:block;
  margin:0 auto 2.2rem;
}

.ab-logo{
  display:inline-block;
  font-style:italic;
  font-weight:800;
  line-height:.94;
  margin-bottom:2rem;
  background:linear-gradient(180deg,#FFFFFF 0%,#E4E9ED 28%,#9AA6AF 52%,#F4F7F9 60%,#C3CCD3 84%,#8E9AA3 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.35));
}
.ab-logo-z1{ display:block; font-size:clamp(1.4rem,4.6vw,2.6rem) }
.ab-logo-z2{ display:block; font-size:clamp(2.1rem,7vw,4rem) }

.ab-hero-titel-mittig{ max-width:none; margin-left:auto !important; margin-right:auto !important }
.ab-hero-sub-mittig{ margin-left:auto !important; margin-right:auto !important }
.ab-hero-aktionen-mittig{ justify-content:center }

/* Kontaktbereich mit zwei gleichwertigen Boxen */
.ab-kontakt-inner-zwei{
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:stretch;
}
.ab-kontakt-inner-zwei .ab-kontakt-box{ height:100% }

.ab-box-text{
  margin:0 0 1.2rem !important;
  color:#E2ECF3;
  line-height:1.7;
}
.ab-box-link{
  display:inline-flex !important;
  align-items:center;
  color:#fff !important;
  font-weight:700;
  font-size:.95rem;
  text-decoration:none !important;
  border-bottom:2px solid var(--ab-rot);
  padding-bottom:.15rem;
  transition:color .35s cubic-bezier(.33,1,.68,1), border-color .35s cubic-bezier(.33,1,.68,1);
}
.ab-box-link:hover,
.ab-box-link:focus-visible{
  color:var(--ab-rot-hell) !important;
  border-bottom-color:#fff;
}

/* ===================================================================
   TEXTSEITEN (Impressum, Datenschutz, weitere)
   =================================================================== */
.ab-inhalt{
  max-width:820px;
  margin:0 auto !important;
  padding:clamp(2.5rem,6vw,4rem) clamp(1.5rem,5vw,3rem) clamp(3rem,7vw,4.5rem);
}
.ab-inhalt-titel{
  font-size:clamp(1.7rem,4.4vw,2.5rem) !important;
  font-weight:800;
  color:var(--ab-navy);
  line-height:1.2;
  letter-spacing:-.018em;
  margin:0 !important;
}
.ab-inhalt-titel::after{
  content:"";
  display:block;
  width:64px;
  height:4px;
  background:var(--ab-rot);
  border-radius:2px;
  margin-top:1.1rem;
}
.ab-inhalt-text{
  margin-top:2.2rem;
  font-size:1.02rem;
  line-height:1.75;
}
.ab-inhalt-text h2{
  font-size:1.3rem !important;
  font-weight:700;
  color:var(--ab-navy);
  margin:2.6rem 0 .8rem !important;
  line-height:1.3;
}
.ab-inhalt-text h3{
  font-size:1.08rem !important;
  font-weight:700;
  color:var(--ab-navy);
  margin:2rem 0 .6rem !important;
  line-height:1.35;
}
.ab-inhalt-text h2:first-child,
.ab-inhalt-text h3:first-child{ margin-top:0 !important }
.ab-inhalt-text p{ margin:0 0 1.1rem !important }
.ab-inhalt-text p:last-child{ margin-bottom:0 !important }
.ab-inhalt-text ul,
.ab-inhalt-text ol{ margin:0 0 1.2rem 1.3rem !important; padding:0 !important }
.ab-inhalt-text li{ margin:0 0 .35rem !important }
.ab-inhalt-text a{
  color:var(--ab-navy) !important;
  text-decoration:none !important;
  border-bottom:1px solid var(--ab-linie);
  word-break:break-word;
  transition:border-color .3s cubic-bezier(.33,1,.68,1);
}
.ab-inhalt-text a:hover,
.ab-inhalt-text a:focus-visible{ border-bottom-color:var(--ab-rot) }
.ab-inhalt-text address{
  font-style:normal;
  line-height:1.6;
  margin:0 0 1.1rem !important;
}
.ab-inhalt-text hr{
  border:0;
  border-top:1px solid var(--ab-linie);
  margin:2.4rem 0;
}

/* ===================================================================
   FOKUS UND BEWEGUNGSREDUZIERUNG
   =================================================================== */
.ab-seite :focus-visible{
  outline:3px solid var(--ab-rot);
  outline-offset:3px;
  border-radius:2px;
}

@media (prefers-reduced-motion:reduce){
  .ab-seite *,
  .ab-seite *::before,
  .ab-seite *::after{
    transition:none !important;
    animation:none !important;
  }
}

/* ===================================================================
   KONTAKTFORMULAR
   =================================================================== */
.ab-formular{ margin-top:2.2rem }

.ab-feld-paar{
  display:grid;
  gap:0 1.2rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
}

.ab-feld{ margin:0 0 1.2rem !important; display:block }

.ab-feld label{
  display:block;
  color:#CBDCE8;
  font-size:.92rem;
  font-weight:600;
  margin-bottom:.45rem;
}
.ab-feld label span{ color:var(--ab-rot-hell) }

.ab-formular input[type="text"],
.ab-formular input[type="email"],
.ab-formular input[type="tel"],
.ab-formular select,
.ab-formular textarea{
  width:100%;
  padding:.85rem 1rem;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.2);
  border-radius:4px;
  color:#fff;
  font-family:inherit;
  font-size:1rem;
  line-height:1.5;
  transition:border-color .35s cubic-bezier(.33,1,.68,1), background-color .35s cubic-bezier(.33,1,.68,1), box-shadow .35s cubic-bezier(.33,1,.68,1);
  -webkit-appearance:none;
  appearance:none;
}
.ab-formular textarea{ resize:vertical; min-height:150px }

.ab-formular select{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23CBDCE8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  background-size:18px;
  padding-right:2.8rem;
}
.ab-formular select option{ color:var(--ab-text); background:#fff }

.ab-formular input::placeholder,
.ab-formular textarea::placeholder{ color:#8FA8BC }

.ab-formular input:hover,
.ab-formular select:hover,
.ab-formular textarea:hover{ border-color:rgba(255,255,255,.35) }

.ab-formular input:focus,
.ab-formular select:focus,
.ab-formular textarea:focus{
  outline:none;
  border-color:var(--ab-rot-hell);
  background:rgba(255,255,255,.12);
  box-shadow:0 0 0 3px rgba(224,28,43,.22);
}

/* Honeypot – für Besucher unsichtbar, für Bots sichtbar */
.ab-honig{
  position:absolute !important;
  left:-9999px !important;
  width:1px; height:1px;
  overflow:hidden;
}

.ab-zustimmung{
  display:flex !important;
  align-items:flex-start;
  gap:.75rem;
  margin:1.4rem 0 0 !important;
}
.ab-zustimmung input[type="checkbox"]{
  flex:0 0 20px;
  width:20px;
  height:20px;
  margin:.22rem 0 0;
  accent-color:var(--ab-rot);
  cursor:pointer;
}
.ab-zustimmung label{
  color:#C0D4E2;
  font-size:.92rem;
  line-height:1.6;
  cursor:pointer;
}
.ab-zustimmung a{
  color:#fff !important;
  text-decoration:none !important;
  border-bottom:1px solid rgba(255,255,255,.4);
  transition:border-color .35s cubic-bezier(.33,1,.68,1);
}
.ab-zustimmung a:hover,
.ab-zustimmung a:focus-visible{ border-bottom-color:var(--ab-rot-hell) }

.ab-pflicht{
  margin:.9rem 0 1.5rem !important;
  color:#8FA8BC;
  font-size:.85rem;
}
.ab-pflicht span{ color:var(--ab-rot-hell) }

.ab-recaptcha-hinweis{
  margin:1.2rem 0 0 !important;
  color:#8FA8BC;
  font-size:.8rem;
  line-height:1.6;
}
.ab-recaptcha-hinweis a{
  color:#A9BECF !important;
  text-decoration:none !important;
  border-bottom:1px solid rgba(255,255,255,.22);
}

/* Rückmeldungen */
.ab-meldung{
  padding:1.1rem 1.3rem;
  border-radius:4px;
  margin-bottom:1.8rem;
  font-size:.98rem;
  line-height:1.6;
  border-left:4px solid;
}
.ab-meldung strong{ display:block; margin-bottom:.2rem }
.ab-meldung-ok{
  background:rgba(255,255,255,.1);
  border-left-color:#4BB77A;
  color:#E8F3EC;
}
.ab-meldung-fehler{
  background:rgba(224,28,43,.14);
  border-left-color:var(--ab-rot-hell);
  color:#FBE3E5;
}

/* ===================================================================
   MOBILE ANSICHT
   Gilt für alle Bahls-Templates. Unten stehend, damit diese Regeln
   die Vorgaben darüber sicher überschreiben.
   =================================================================== */

/* ---- Tablet und kleiner ---- */
@media (max-width:900px){

  .ab-hero-inner{ grid-template-columns:1fr }
  .ab-hero-titel{ max-width:none }
  .ab-hero-sub{ max-width:none }

  .ab-kontakt-inner{ grid-template-columns:1fr }
  .ab-kontakt-titel{ max-width:none }
  .ab-kontakt-text{ max-width:none }
}

/* ---- Navigation: Aufklappmenü ---- */
@media (max-width:820px){

  /* Infoleiste komplett ausblenden – Telefon steht im Menüfeld */
  .ab-leiste{ display:none !important }

  .ab-nav-inner{
    position:relative;
    display:flex;
    align-items:center;
    justify-content:space-between;
    min-height:64px;
    padding-top:.65rem;
    padding-bottom:.65rem;
    gap:1rem;
  }

  .ab-nav-marke{ margin-right:0 }
  .ab-nav-marke img{ max-height:36px }
  .ab-nav-wortmarke strong{ font-size:1.2rem }
  .ab-nav-wortmarke span{ font-size:.66rem }

  .ab-burger{ display:block; flex:0 0 44px }

  /* Menüfeld klappt unter der Leiste auf */
  .ab-nav-rechts{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:block;
    margin-left:0;
    background:#fff;
    border-top:1px solid var(--ab-linie);
    border-bottom:1px solid var(--ab-linie);
    box-shadow:0 14px 28px rgba(12,58,104,.12);
    padding:.5rem clamp(1.25rem,4vw,2.5rem) 1.25rem;

    max-height:0;
    opacity:0;
    overflow:hidden;
    visibility:hidden;
    transition:max-height .45s cubic-bezier(.33,1,.68,1),
               opacity .3s cubic-bezier(.33,1,.68,1),
               visibility .45s;
  }
  .ab-schalter:checked ~ .ab-nav-rechts{
    max-height:80vh;
    opacity:1;
    visibility:visible;
    overflow-y:auto;
  }

  .ab-nav-rechts .ab-menu{
    display:block !important;
    width:100%;
  }
  .ab-nav-rechts .ab-menu li{ display:block; width:100% }
  .ab-nav-rechts .ab-menu li + li{ border-top:1px solid var(--ab-linie) }

  .ab-nav-rechts .ab-menu a{
    display:block;
    padding:.95rem 0;
    font-size:1.05rem;
  }
  /* Unterstreichung ergibt im Aufklappmenü keinen Sinn */
  .ab-nav-rechts .ab-menu a::after{ display:none }
  .ab-nav-rechts .ab-menu .current-menu-item > a,
  .ab-nav-rechts .ab-menu .current_page_item > a{ color:var(--ab-rot) !important }

  .ab-nav-rechts .ab-nav-cta{
    display:block;
    width:100%;
    margin-top:1rem;
    padding:.85rem 1rem;
    text-align:center;
    font-size:1rem;
  }
}

/* ---- Telefon ---- */
@media (max-width:600px){

  .ab-seite{ font-size:16px }

  /* Hero */
  .ab-hero{
    padding-left:1.25rem;
    padding-right:1.25rem;
    padding-top:2.75rem;
    padding-bottom:4rem;
  }
  .ab-hero-wasserzeichen{
    right:-18%;
    bottom:auto;
    top:52%;
    width:82%;
    opacity:.07;
  }
  .ab-hero-kicker{
    font-size:.84rem;
    padding-left:2.1rem;
    margin-bottom:1rem;
  }
  .ab-hero-kicker::before{ width:1.5rem }
  .ab-hero-titel{ line-height:1.14; letter-spacing:-.018em }
  .ab-hero-sub{ margin-top:1.2rem !important; line-height:1.65 }

  /* Knöpfe: volle Breite, untereinander */
  .ab-hero-aktionen{
    flex-direction:column;
    align-items:stretch;
    gap:.7rem;
    margin-top:1.8rem;
  }
  .ab-hero-aktionen .ab-knopf{ width:100% }
  .ab-hero-aktionen-mittig{ align-items:stretch }

  .ab-hero-karte{ padding:1.5rem 1.3rem }
  .ab-hero-karte-titel{ font-size:1.3rem }

  /* Abschnittsköpfe */
  .ab-abschnitt-kicker{
    font-size:.8rem;
    padding-left:2.1rem;
    margin-bottom:.7rem;
  }
  .ab-abschnitt-kicker::before{ width:1.5rem }
  .ab-abschnitt-kopf{ margin-bottom:1.9rem }
  .ab-abschnitt-text{ font-size:1rem }

  /* Kacheln und Karten */
  .ab-schnell{ padding-top:2.5rem; padding-bottom:3.25rem }
  .ab-schnell-inner{ gap:.9rem }
  .ab-kachel{ padding:1.5rem 1.4rem 1.5rem 1.6rem }
  .ab-kachel-titel{ font-size:1.12rem }
  .ab-kachel-wert{ font-size:.96rem }
  /* Akzentbalken auf dem Telefon dauerhaft zeigen – es gibt kein Hover */
  .ab-kachel::before{ opacity:1; height:34px }

  .ab-leistungen{
    margin-top:0;
    padding-top:3rem;
    padding-bottom:3rem;
  }
  .ab-karten{ gap:.9rem }
  .ab-karte{ padding:1.5rem 1.4rem }
  .ab-karte-titel{ padding-right:2.6rem }

  /* Zahlenband */
  .ab-zahlen{ padding-top:2.2rem; padding-bottom:2.2rem }
  .ab-zahlen-inner{ gap:1.2rem }
  .ab-zahl{ padding-left:1rem }
  .ab-zahl-wert{ font-size:1.55rem }
  .ab-zahl-label{ font-size:.9rem }

  /* Ablauf */
  .ab-ablauf{ padding-top:3rem; padding-bottom:3rem }
  .ab-schritte{ gap:1.4rem }

  /* Kontaktbereich */
  .ab-kontakt{ padding-top:3rem; padding-bottom:3rem }
  .ab-kontakt-box{ padding:1.5rem 1.4rem }
  .ab-kontakt-daten{ grid-template-columns:1fr; gap:.9rem }

  /* Formular */
  .ab-formular{ margin-top:1.8rem }
  .ab-feld-paar{ grid-template-columns:1fr; gap:0 }
  .ab-formular input,
  .ab-formular select,
  .ab-formular textarea{
    font-size:16px; /* verhindert das Hineinzoomen auf iOS */
    padding:.8rem .9rem;
  }
  .ab-formular textarea{ min-height:130px }
  .ab-formular .ab-knopf{ width:100% }
  .ab-zustimmung label{ font-size:.9rem }

  /* Textseiten */
  .ab-inhalt{ padding-top:2.2rem }
  .ab-inhalt-text{ margin-top:1.8rem }
  .ab-inhalt-text h2{ font-size:1.2rem !important; margin-top:2.1rem !important }

  /* Übergangsseite */
  .ab-hero-uebergang{ padding-top:2.5rem }
  .ab-hero-inner-mittig .ab-logo-bild{ max-width:88%; margin-bottom:1.7rem }
  .ab-logo{ margin-bottom:1.5rem }

  /* Fußbereich */
  .ab-fuss-oben{ padding-top:2.2rem; padding-bottom:2.2rem }
  .ab-fuss-spalten{ gap:1.6rem }
  .ab-fuss-inner{ flex-direction:column; gap:.8rem }
  .ab-fuss-menu{ gap:0 1.25rem }

  /* Öffnungszeiten etwas kompakter */
  .ab-zeiten{ font-size:.94rem }
  .ab-zeiten th,
  .ab-zeiten td{ padding:.45rem 0 !important }
}

/* ---- Sehr schmale Geräte ---- */
@media (max-width:380px){

  .ab-hero-titel{ font-size:1.5rem !important }
  .ab-nav-wortmarke strong{ font-size:1.08rem }
  .ab-nav-marke img{ max-height:32px }
  .ab-menu a{ font-size:.9rem }
  .ab-kachel-wert{ font-size:.9rem }
  .ab-leiste-inner{ font-size:.82rem }
}