:root {
  --brand-ink: #101827;
  --brand-navy: #0d2d4a;
  --brand-blue: #3e6a94;        /* exakt die Farbe des Originallogos */
  --brand-blue-deep: #2d5377;   /* dunklere Variante für Hover */
  /* Teal und Gruen nur noch fuer Zustaende (Erfolg, Auswahl), nicht mehr
     als Flaechen- oder Akzentfarbe. Siehe 08_DESIGN_REVISION.md Punkt 5. */
  --brand-teal: #0d827d;
  --brand-green: #66b94a;
  --brand-soft: #ecf8f7;
  --brand-soft-blue: #eef7ff;
  --brand-line: #d9e5ec;
  --brand-muted: #647488;
  --brand-white: #ffffff;
  --brand-warning: #fff8e7;
  --shadow-sm: 0 1px 2px rgba(16, 24, 39, 0.05);
  --shadow-md: 0 4px 16px rgba(16, 24, 39, 0.07);
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --container: min(1120px, calc(100% - 32px));
  --header-height: 74px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--brand-ink);
  background: #fff;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img, svg, video { max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
p { margin: 0 0 1rem; }
ul { margin: 0; padding-left: 1.2rem; }
button, input, textarea, select { font: inherit; }
::selection { background: rgba(62, 106, 148, 0.18); }

.skip-link {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 200;
  padding: 0.7rem 1rem;
  border-radius: 999px;
  background: var(--brand-navy);
  color: #fff;
}
.skip-link:focus { top: 16px; }
.container { width: var(--container); margin: 0 auto; }
.section { padding: clamp(3.5rem, 7vw, 7rem) 0; }
.section-tight { padding: clamp(2.5rem, 5vw, 4rem) 0; }
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-bottom: 0.9rem;
  color: var(--brand-muted);
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 0.74rem;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 34px;
  height: 1px;
  border-radius: 0;
  background: currentColor;
  opacity: 0.65;
}
.lede {
  max-width: 720px;
  color: var(--brand-muted);
  font-size: clamp(1.02rem, 1.5vw, 1.17rem);
}
/* Typografische Skala, Juli 2026 zurückgenommen.
   Vorher erreichte h1 auf großen Bildschirmen 92,8 px (5,8x Fließtext) und
   h2 64 px (4,0x). Damit lagen Haupt- und Abschnittsüberschrift nur um den
   Faktor 1,45 auseinander und konkurrierten miteinander, statt eine Hierarchie
   zu bilden. Jetzt 70,4 px zu 41,6 px, also Faktor 1,7. */
.h1, h1, h2, h3 { line-height: 1.14; letter-spacing: -0.03em; margin: 0; }
h1, .h1 { font-size: clamp(2.4rem, 6.2vw, 4.4rem); }
h2 { font-size: clamp(1.75rem, 3.2vw, 2.6rem); }
h3 { font-size: clamp(1.22rem, 1.9vw, 1.6rem); }
.small { font-size: 0.94rem; color: var(--brand-muted); }

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid rgba(217, 229, 236, 0.72);
  background: rgba(255, 255, 255, 0.90);
}
@supports (backdrop-filter: blur(18px)) {
  .site-header { backdrop-filter: blur(18px); }
}
.navbar {
  width: var(--container);
  min-height: var(--header-height);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.72rem;
  min-width: 170px;
  font-weight: 900;
}
.brand img {
  width: clamp(154px, 18vw, 226px);
  max-height: 54px;
  display: block;
}
.brand-fallback {
  display: none;
  color: var(--brand-navy);
  letter-spacing: -0.03em;
  font-weight: 900;
}
.brand img.is-missing + .brand-fallback { display: inline-flex; }
.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-navy);
  cursor: pointer;
}
.nav-toggle span,
.nav-toggle::before,
.nav-toggle::after {
  content: "";
  display: block;
  width: 19px;
  height: 2px;
  background: currentColor;
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle { flex-direction: column; gap: 4px; }
.nav-toggle[aria-expanded="true"] span { opacity: 0; }
.nav-toggle[aria-expanded="true"]::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"]::after { transform: translateY(-6px) rotate(-45deg); }
.nav-menu {
  position: fixed;
  inset: var(--header-height) 0 auto 0;
  display: grid;
  gap: 0.35rem;
  padding: 1rem 16px 1.4rem;
  border-bottom: 1px solid var(--brand-line);
  background: rgba(255,255,255,0.98);
  transform: translateY(-116%);
  transition: transform 0.25s ease;
  box-shadow: var(--shadow-sm);
}
.nav-menu.is-open { transform: translateY(0); }
.nav-menu a, .nav-menu .nav-parent {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 44px;
  padding: 0.68rem 0.9rem;
  border-radius: var(--radius-sm);
  color: var(--brand-navy);
  font-weight: 600;
}
.nav-menu a:hover, .nav-menu a:focus-visible, .nav-menu a[aria-current="page"] {
  background: var(--brand-soft-blue);
  color: var(--brand-blue);
}
.nav-group { display: grid; gap: 0.35rem; }
.nav-submenu { display: grid; gap: 0.2rem; padding-left: 0.6rem; }
.nav-submenu a { font-size: 0.95rem; color: var(--brand-muted); }
.nav-actions { display: none; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.78rem 1.35rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-weight: 650;
  letter-spacing: -0.005em;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
  cursor: pointer;
}
.btn-primary { background: var(--brand-blue); color: #fff; }
.btn-primary:hover { background: var(--brand-blue-deep); }
.btn-secondary { background: #fff; color: var(--brand-navy); border-color: var(--brand-line); }
.btn-secondary:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.btn-ghost { color: var(--brand-blue); padding-inline: 0; }
.btn-full { width: 100%; }

.hero {
  position: relative;
  overflow: hidden;
  padding: clamp(2.4rem, 6vw, 6rem) 0 clamp(3.5rem, 8vw, 7rem);
}
/* Der radiale Farbschleier hinter dem Hero ist entfallen. Er war die groesste
   zusammenhaengende Farbflaeche der Startseite und hat den oberen Seitenrand
   eingefaerbt, ohne eine Information zu tragen. */
.hero-grid {
  position: relative;
  display: grid;
  gap: clamp(2rem, 6vw, 4rem);
  align-items: center;
}
.hero-copy { max-width: 780px; }
.hero h1 span { color: var(--brand-blue); }
.hero-text { margin: 1.35rem 0 1.6rem; max-width: 700px; color: var(--brand-muted); font-size: clamp(1.06rem, 2vw, 1.28rem); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.hero-media {
  position: relative;
  min-height: 420px;
}
.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--brand-line);
  background: #dcecf5;
  min-height: 420px;
  isolation: isolate;
}
.hero-card img { width: 100%; height: 100%; min-height: 420px; object-fit: cover; display: block; }
.hero-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 58%, rgba(9, 27, 45, 0.38));
  z-index: 1;
}
.hero-badge {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2;
  display: grid;
  gap: 0.25rem;
  padding: 1rem;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,0.94);
}
.hero-badge strong { color: var(--brand-navy); }
.hero-badge span { color: var(--brand-muted); font-size: 0.93rem; }
.metric-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.85rem;
  margin-top: 1.6rem;
}
.metric {
  padding: 1rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-sm);
  background: #fff;
}
.metric strong { display: block; font-size: 1.4rem; color: var(--brand-navy); }
.metric span { color: var(--brand-muted); font-size: 0.9rem; }

.logo-strip {
  border-block: 1px solid var(--brand-line);
  background: #fff;
}
.logo-strip .container {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  align-items: center;
  justify-content: center;
  padding: 1.1rem 0;
}
.service-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.58rem 0.85rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  color: var(--brand-navy);
  font-size: 0.95rem;
  font-weight: 600;
  background: #fff;
}
.service-pill::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--brand-blue);
}

.split {
  display: grid;
  gap: clamp(1.6rem, 5vw, 4rem);
  align-items: center;
}
.split-media {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--brand-line);
  background: var(--brand-soft-blue);
}
.split-media img { width: 100%; height: 100%; object-fit: cover; min-height: 330px; display: block; }
.split-content { max-width: 680px; }
.check-list { display: grid; gap: 0.72rem; margin-top: 1.25rem; padding: 0; list-style: none; }
.check-list li {
  position: relative;
  padding-left: 2rem;
  color: var(--brand-muted);
}
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.36rem;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-blue);
  box-shadow: inset 0 0 0 5px #fff;
  border: 1px solid rgba(62, 106, 148, 0.4);
}

.cards-grid {
  display: grid;
  gap: 1rem;
  margin-top: clamp(1.5rem, 4vw, 2.2rem);
}
.service-card {
  position: relative;
  overflow: hidden;
  min-height: 390px;
  display: flex;
  align-items: flex-end;
  border-radius: var(--radius-md);
  background: var(--brand-soft-blue);
  color: #fff;
}
.service-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.service-card:hover img { transform: scale(1.045); }
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Frueher ein durchgehender Verlauf ueber die gesamte Kartenhoehe. Er lag im
     Mittelton (#43677e bis #6d8092): zu dunkel, um zu verschwinden, zu hell,
     um als gestaltete Flaeche zu wirken - vier davon nebeneinander ergaben die
     schweren Baender auf der Startseite. Jetzt bleibt das Bild oben unberuehrt
     und wird nur unter dem Text klar dunkel. Der Textkontrast steigt dabei. */
  background: linear-gradient(180deg,
              rgba(9, 27, 45, 0) 20%,
              rgba(9, 27, 45, 0.66) 48%,
              rgba(9, 27, 45, 0.94) 100%);
}
.service-card-content {
  position: relative;
  z-index: 1;
  padding: clamp(1rem, 3vw, 1.4rem);
}
.service-card h3 { margin-bottom: 0.45rem; color: #fff; }
/* Von 0.86 auf 0.95 angehoben. Gemessen an der hellsten denkbaren Bildstelle
   ergab 0.86 nur 4.14:1 und verfehlte damit WCAG AA; jetzt 5.29:1. */
.service-card p { color: rgba(255,255,255,0.95); }
.tags { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.85rem; }
.tag {
  display: inline-flex;
  padding: 0.33rem 0.6rem;
  border-radius: 999px;
  background: rgba(255,255,255,0.16);
  color: rgba(255,255,255,0.92);
  font-size: 0.82rem;
  font-weight: 600;
}

.feature-panel {
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  background: #fff;
  padding: clamp(1.2rem, 4vw, 2rem);
}
.feature-grid {
  display: grid;
  gap: 1rem;
  margin-top: 1.4rem;
}
.feature-item {
  display: grid;
  gap: 0.45rem;
  padding: 1.1rem;
  border-radius: var(--radius-sm);
  background: #fff;
  border: 1px solid var(--brand-line);
}
.feature-item strong { color: var(--brand-navy); font-size: 1.06rem; }
.feature-item span { color: var(--brand-muted); }

.page-hero {
  padding: clamp(2.3rem, 6vw, 5.4rem) 0 clamp(2.5rem, 6vw, 5rem);
  background: #fbfcfd;
  border-bottom: 1px solid var(--brand-line);
}
.page-hero-grid { display: grid; gap: 2rem; align-items: center; }
.page-hero-media { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--brand-line); background: #dcecf5; }
.page-hero-media img { width: 100%; min-height: 320px; object-fit: cover; display: block; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1rem; font-size: 0.94rem; color: var(--brand-muted); }
.breadcrumb a { color: var(--brand-blue); font-weight: 700; }

.content-grid {
  display: grid;
  gap: clamp(1rem, 4vw, 2rem);
}
.content-card {
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: clamp(1.15rem, 4vw, 2rem);
}
.content-card h2, .content-card h3 { margin-bottom: 0.85rem; }
.content-card p + h3 { margin-top: 1.4rem; }
.aside-card {
  position: sticky;
  top: calc(var(--header-height) + 1rem);
  align-self: start;
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-line);
  background: var(--brand-navy);
  color: #fff;
  padding: 1.35rem;
}
.aside-card p, .aside-card .small { color: rgba(255,255,255,0.78); }
.aside-card .btn { margin-top: 0.8rem; }
.service-links { display: grid; gap: 0.55rem; margin-top: 1rem; }
.service-links a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: var(--radius-sm);
  color: rgba(255,255,255,0.90);
}
.service-links a:hover { background: rgba(255,255,255,0.10); }

.contact-grid {
  display: grid;
  gap: 1rem;
}
.contact-card {
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-md);
  background: #fff;
  padding: 1.2rem;
}
.contact-card strong { display: block; color: var(--brand-navy); margin-bottom: 0.25rem; }
.contact-card a { color: var(--brand-blue); font-weight: 600; }
.form-grid { display: grid; gap: 1rem; }
.form-field { display: grid; gap: 0.4rem; }
.form-field label { font-weight: 800; color: var(--brand-navy); }
.form-field input, .form-field textarea, .form-field select {
  width: 100%;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1rem;
  background: #fff;
  outline: none;
  transition: border-color 0.16s ease, box-shadow 0.16s ease;
}
.form-field textarea { min-height: 160px; resize: vertical; }
.form-field input:focus, .form-field textarea:focus, .form-field select:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 4px rgba(62,106,148,0.16);
}
.honeypot { position: absolute !important; left: -10000px !important; opacity: 0 !important; }
.form-note { margin-top: 0.7rem; color: var(--brand-muted); font-size: 0.9rem; }

.map-box {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--brand-line);
  background: var(--brand-soft-blue);
}
.map-box iframe {
  width: 100%;
  height: 430px;
  border: 0;
  display: block;
}
.map-consent {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.4rem;
  text-align: center;
}
.map-consent-inner {
  max-width: 560px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.92);
  border: 1px solid var(--brand-line);
  padding: clamp(1.1rem, 4vw, 2rem);
  box-shadow: var(--shadow-sm);
}
.map-consent-inner h2, .map-consent-inner h3 { margin-bottom: 0.7rem; }
.map-loaded .map-consent { display: none; }

.cta-band {
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 5vw, 3rem);
  background: var(--brand-navy);
  color: #fff;
  overflow: hidden;
  position: relative;
}
/* Der aufgehellte Kreis im CTA-Band ist entfallen: dekorativ, ohne Funktion,
   und er hat die Flaeche unruhig gemacht. */
.cta-band > * { position: relative; z-index: 1; }
.cta-band p { color: rgba(255,255,255,0.80); max-width: 650px; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.2rem; }
.cta-band .btn-secondary { color: var(--brand-navy); }

.site-footer {
  margin-top: clamp(2rem, 6vw, 4rem);
  padding: clamp(2rem, 5vw, 3.5rem) 0 1.2rem;
  background: #091b2d;
  color: rgba(255,255,255,0.78);
}
.footer-grid {
  display: grid;
  gap: 1.5rem;
}
.footer-brand img { width: min(220px, 70vw); max-height: 60px; filter: brightness(0) invert(1); opacity: 0.95; }
.footer-brand .brand-fallback { color: #fff; }
.footer-title { display: block; margin-bottom: 0.6rem; color: #fff; font-weight: 850; }
.footer-links { display: grid; gap: 0.42rem; }
.footer-links a { color: rgba(255,255,255,0.78); }
.footer-links a:hover { color: #fff; }
.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.7rem;
  margin-top: 2rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.14);
  font-size: 0.9rem;
}

.notice {
  border: 1px solid #f2d99d;
  background: var(--brand-warning);
  border-radius: var(--radius-sm);
  padding: 1rem;
  color: #6b4b0a;
}

@media (min-width: 560px) {
  .cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 820px) {
  .hero-grid, .split, .page-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(340px, 0.95fr); }
  .split.reverse > .split-media { order: 2; }
  .content-grid { grid-template-columns: minmax(0, 1fr) minmax(270px, 0.36fr); }
  .footer-grid { grid-template-columns: 1.15fr 0.7fr 0.7fr 0.7fr; }
  .contact-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
  .nav-toggle { display: none; }
  .nav-menu {
    position: static;
    inset: auto;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0;
    border: 0;
    background: transparent;
    transform: none;
    box-shadow: none;
  }
  .nav-menu a, .nav-menu .nav-parent { min-height: 40px; padding: 0.45rem 0.7rem; font-size: 0.94rem; }
  .nav-group { position: relative; display: flex; }
  .nav-submenu {
    position: absolute;
    top: calc(100% + 12px);
    left: 0;
    min-width: 250px;
    padding: 0.55rem;
    border: 1px solid var(--brand-line);
    border-radius: var(--radius-md);
    background: #fff;
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  }
  .nav-group:hover .nav-submenu,
  .nav-group:focus-within .nav-submenu { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav-actions { display: flex; align-items: center; gap: 0.6rem; }
  .cards-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .service-card-wrap:nth-child(1), .service-card-wrap:nth-child(2) { grid-column: span 2; }
  .service-card-wrap:nth-child(3) { grid-column: span 1; }
  .service-card-wrap:nth-child(4), .service-card-wrap:nth-child(5) { grid-column: span 2; }
  .service-card { min-height: 420px; }
  .service-card:nth-child(3) { min-height: 420px; }
  .metric-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1400px) {
  :root { --container: min(1280px, calc(100% - 64px)); }
  .hero-card, .hero-card img { min-height: 560px; }
}
@media (min-width: 2200px) {
  :root { --container: 1500px; }
  body { font-size: 1.08rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
}

/* ===========================================================================
   ÜBERARBEITUNG 07/2026 – Ergänzungen
   Reine Reparaturen und Barrierefreiheit. Farben, Abstände, Schriftgrößen
   und Layout der ursprünglichen Gestaltung bleiben unverändert.
   =========================================================================== */

/* <picture> soll das Layout nicht verändern: Das darin liegende <img> wird
   weiterhin direkt vom Elternelement positioniert (hero-card, split-media,
   service-card, page-hero-media). */
picture { display: block; }
@supports (display: contents) {
  picture { display: contents; }
}

/* Das Untermenü „Leistungen" ist jetzt ein <button>, damit es per Tastatur
   und auf Touchgeräten ohne Hover bedienbar ist. Optisch bleibt es ein
   normaler Menüpunkt. */
.nav-menu .nav-parent {
  appearance: none;
  -webkit-appearance: none;
  background: none;
  border: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
@media (min-width: 980px) {
  .nav-group .nav-parent[aria-expanded="true"] + .nav-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* Sichtbarer Tastaturfokus. Mausbedienung bleibt unverändert, da
   :focus-visible nur bei Tastatur- und Hilfsmittelnavigation greift. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
  border-radius: 6px;
}
.service-card:focus-visible { outline-offset: 6px; }

/* Einwilligung im Kontaktformular */
.form-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.65rem;
  align-items: start;
  padding: 0.9rem 1rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-sm);
  background: var(--brand-soft-blue);
}
.form-consent input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--brand-blue);
  flex: none;
}
.form-consent label {
  margin: 0;
  font-size: 0.94rem;
  line-height: 1.5;
  color: var(--brand-ink);
}
.form-consent a { color: var(--brand-blue); font-weight: 700; text-decoration: underline; }

/* Fehlerhinweis nach abgelehntem Formular */
.form-error {
  margin: 0 0 1rem;
  padding: 0.85rem 1rem;
  border-left: 4px solid #c0392b;
  border-radius: var(--radius-sm);
  background: #fdeceb;
  color: #7f231a;
  font-size: 0.95rem;
}

/* Karte wieder deaktivieren – Widerruf der Maps-Zustimmung */
.map-revoke {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 3;
  padding: 0.4rem 0.8rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--brand-navy);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.map-box:not(.map-loaded) .map-revoke { display: none; }

/* Waagerechter Überlauf bei schmalen Fenstern.
   Zwei Ursachen: Ein Grid schrumpft standardmäßig nicht unter die
   Min-Content-Breite seines Inhalts, und lange deutsche Komposita
   ("Gästeanforderungen") sowie Codebezeichner sind in Überschriftengröße
   breiter als der Textbereich. Beides wird hier aufgefangen. Die Regeln
   greifen erst, wenn ein Wort tatsächlich nicht passt, und ändern die
   Darstellung bei normalen Fensterbreiten nicht. */
@media (max-width: 819px) {
  .hero-grid > *,
  .page-hero-grid > *,
  .split > *,
  .content-grid > *,
  .cards-grid > *,
  .footer-grid > *,
  .contact-grid > * {
    min-width: 0;
  }
}

/* Überschriften: Lange Komposita tragen im Markup weiche Trennstellen
   (&shy;), damit an einer korrekten Silbenstelle mit Trennstrich umbrochen
   wird. overflow-wrap darf hier NICHT gesetzt werden: Es erlaubt den Umbruch
   an jeder beliebigen Stelle, und der Zeilenumbruch bevorzugt dann den
   Bruch mitten im Wort ("Gästeansprüch|e") gegenüber der Trennstelle, weil
   so mehr Zeichen in die Zeile passen.

   hyphens: manual statt auto. Bei "auto" trennt der Browser eigenmächtig nach
   Wörterbuch und zerlegt dann auch werbliche Zeilen wie "Zuverlässige Rei-
   nigung für Ihr Ge-bäude." – auf breiten Bildschirmen gleich zweimal in einer
   Überschrift. Mit "manual" werden ausschließlich die im Markup gesetzten
   Trennstellen genutzt, also genau dort, wo Trennung nötig ist. */
h1, h2, h3 {
  hyphens: manual;
  -webkit-hyphens: manual;
}
p, li, .lede, .hero-text, .breadcrumb { overflow-wrap: break-word; }
code, .footer-links a { overflow-wrap: anywhere; }


/* Das Treppenhaus-Motiv ist das einzige Hochformat (683x1024) und sitzt in
   einer querformatigen Karte. Bei mittiger Ausrichtung schneidet der
   Ausschnitt beide Köpfe ab, die im oberen Bildviertel liegen. Der Ausschnitt
   wird deshalb nach oben verschoben. */
.cards-grid .service-card img[src*="stairs-cleaning"] {
  object-position: 50% 5%;
}

/* Kennzeichnung KI-generierter Motive nach Art. 50 Abs. 4 KI-VO (EU) 2024/1689.
   Der Hinweis muss ohne Interaktion erkennbar sein, auf jedem Bilduntergrund
   lesbar bleiben und für Screenreader zugänglich sein. */
.media-ai { position: relative; }
.ai-badge {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 4;
  display: inline-flex;
  align-items: center;
  gap: 0.34rem;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  background: rgba(16, 24, 39, 0.74);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-decoration: none;
  pointer-events: none;
  white-space: nowrap;
}
@supports (backdrop-filter: blur(6px)) {
  .ai-badge { background: rgba(16, 24, 39, 0.62); backdrop-filter: blur(6px); }
}
.ai-badge::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: #fff;
  flex: none;
}
/* In der schmalen Glasreinigungs-Karte ist wenig Platz. */
@media (max-width: 559px) {
  .ai-badge { right: 8px; bottom: 8px; font-size: 0.68rem; }
}

/* Rechtstextseiten (Impressum, Datenschutz, Nutzungshinweise).
   Die globalen Überschriftengrößen sind für Marketingseiten ausgelegt: h2
   erreicht 64 px und damit das Vierfache des Fließtextes. In einem
   gegliederten Rechtstext mit nummerierten Abschnitten wirkt das erschlagend
   und drängt den eigentlichen Inhalt in den Hintergrund. Hier gilt daher eine
   eigene, ruhigere Staffelung. Die Marketingseiten bleiben unberührt. */
.legal-doc h2 {
  font-size: clamp(1.3rem, 1.6vw, 1.5rem);
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin-top: 2.4rem;
}
.legal-doc h3 {
  font-size: clamp(1.08rem, 1.2vw, 1.18rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
  margin-top: 1.8rem;
}
.legal-doc .content-card > :first-child,
.legal-doc .aside-card > :first-child {
  margin-top: 0;
}
.legal-doc .content-card h2 + p,
.legal-doc .content-card h3 + p { margin-top: 0; }

/* Seitenkarte auf denselben Maßstab bringen */
.legal-doc .aside-card h3 {
  font-size: clamp(1.08rem, 1.2vw, 1.18rem);
  line-height: 1.35;
  letter-spacing: -0.005em;
}

/* Zeilenlänge auf sehr breiten Bildschirmen begrenzen: Ein durchlaufender
   Rechtstext über 1000 px Breite ist schwer zu lesen. */
.legal-doc .content-card p,
.legal-doc .content-card ul {
  max-width: 68ch;
}

/* Die Leistungskarte liegt jetzt in einem Wrapper. Grund: Die Karte selbst ist
   ein Link; ein zweites Klickelement darin wäre ungültiges Markup. Die
   KI-Kennzeichnung sitzt deshalb als Geschwisterelement daneben. Der Wrapper
   übernimmt die Rasterzuordnung, an der Darstellung ändert sich nichts. */
.service-card-wrap {
  position: relative;
  display: flex;
}
.service-card-wrap > .service-card { width: 100%; }

/* Kennzeichnung als anklickbare zweite Ebene. Der Text bleibt ohne jede
   Interaktion sichtbar; der Klick liefert nur zusätzliche Erläuterungen. */
a.ai-badge { text-decoration: none; pointer-events: auto; cursor: pointer; }
a.ai-badge:hover { background: rgba(16, 24, 39, 0.88); }
a.ai-badge:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }
.service-card-wrap > .ai-badge { z-index: 5; }

/* Hinweisfeld. Liegt als direktes Kind von <body> vor, damit es nicht vom
   overflow:hidden der Bildcontainer beschnitten wird. */
.ai-tip {
  position: fixed;
  z-index: 300;
  width: min(340px, calc(100vw - 24px));
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}
.ai-tip[hidden] { display: none; }
.ai-tip-inner {
  position: relative;
  padding: 1.15rem 1.25rem 1.25rem;
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-sm);
  background: var(--brand-white);
  box-shadow: var(--shadow-md);
  color: var(--brand-ink);
}
.ai-tip h2 {
  margin: 0 1.6rem 0.6rem 0;
  font-size: 1.05rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--brand-navy);
}
.ai-tip p {
  margin: 0 0 0.6rem;
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--brand-ink);
}
.ai-tip .ai-tip-legal {
  margin-bottom: 0.85rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--brand-line);
  font-size: 0.78rem;
  color: var(--brand-muted);
}
.ai-tip-link {
  display: inline-block;
  color: var(--brand-blue);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
}
.ai-tip-close {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--brand-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
}
.ai-tip-close:hover { background: var(--brand-soft-blue); color: var(--brand-navy); }


/* ===========================================================================
   ÜBERARBEITUNG 07/2026 – Formular, Ablauf, Zitat
   =========================================================================== */

/* Auswahlfeld „Anliegen“. Erbt Rahmen und Innenabstand von den übrigen
   Feldern, bekommt aber einen eigenen Pfeil, weil die Browser-Vorgabe je
   nach System sehr unterschiedlich aussieht. */
.form-field select {
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  padding-right: 2.6rem;
  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.5 11 1.5' fill='none' stroke='%233e6a94' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.05rem center;
  background-size: 12px 8px;
}

/* Ablaufschritte mit vorangestellter Nummer. Die Nummer sitzt als eigene
   Zeile über der Überschrift und gibt der Sektion einen ruhigen Rhythmus. */
.feature-item .step-no {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--brand-muted);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
}

/* Zitat des Inhabers */
.quote-panel {
  position: relative;
  margin-top: 2.4rem;
  padding: clamp(1.6rem, 4vw, 2.4rem) clamp(1.4rem, 4vw, 2.6rem);
  border-radius: var(--radius-md);
  border: 1px solid var(--brand-line);
  background: var(--brand-soft-blue);
}
.quote-panel blockquote {
  margin: 0;
  font-size: clamp(1.15rem, 2.2vw, 1.5rem);
  line-height: 1.45;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--brand-navy);
}
.quote-panel blockquote em { font-style: normal; color: var(--brand-blue); }
.quote-panel figcaption {
  margin-top: 0.9rem;
  color: var(--brand-muted);
  font-size: 0.9rem;
  font-weight: 600;
}

/* Erwartungszeile unter den Kontaktangaben */
.contact-card .contact-hint {
  display: block;
  margin-top: 0.45rem;
  color: var(--brand-muted);
  font-size: 0.86rem;
  line-height: 1.45;
  font-weight: 400;
}

/* ---------------------------------------------------------------------------
   Chips für das Feld „Anliegen"
   Technisch echte Radiobuttons mit Beschriftung. Das Eingabefeld wird nicht
   per display:none versteckt, sondern nur visuell – sonst wäre es für
   Tastatur und Screenreader verloren.
   --------------------------------------------------------------------------- */
.chip-set {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.chip-set legend {
  padding: 0;
  margin-bottom: 0.55rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--brand-navy);
}
.chips {
  position: relative;   /* hält die visuell versteckten Radios im Container */
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.chips input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.chips label {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0.95rem;
  border: 1px solid var(--brand-line);
  border-radius: 999px;
  background: #fff;
  color: var(--brand-ink);
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  transition: background-color 0.14s ease, border-color 0.14s ease, color 0.14s ease;
}
.chips label:hover { border-color: var(--brand-blue); color: var(--brand-blue); }
.chips input:checked + label {
  background: var(--brand-blue);
  border-color: var(--brand-blue);
  color: #fff;
}
.chips input:focus-visible + label {
  outline: 3px solid var(--brand-blue);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   Kompaktes Anfrageformular am Ende der Startseite
   Ersetzt das frühere dunkle CTA-Band. Bewusst hell gehalten: Die Startseite
   hatte sechs dunkle bis mitteltonige Flächen, was die Seite schwer wirken
   ließ. Der Abschluss ist jetzt ein ruhiger, heller Block.
   --------------------------------------------------------------------------- */
.quick-form {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.6rem);
  padding: clamp(1.4rem, 4vw, 2.8rem);
  border: 1px solid var(--brand-line);
  border-radius: var(--radius-lg);
  background: #fbfcfd;
}
@media (min-width: 900px) {
  .quick-form { grid-template-columns: 0.85fr 1fr; align-items: start; }
}
.quick-form-intro p { color: var(--brand-muted); max-width: 46ch; }
.quick-form-intro h2 { margin-bottom: 0.7rem; }
.quick-form-alt {
  margin-top: 1rem;
  font-weight: 600;
  color: var(--brand-ink) !important;
}
.quick-form-alt a { color: var(--brand-blue); font-weight: 650; }
.quick-form .form-grid { display: grid; gap: 0.9rem; }
.quick-form .form-consent { background: #fff; }
.quick-form textarea { min-height: 110px; }

/* Zwei Felder nebeneinander, sobald genug Platz ist */
.form-row { display: grid; gap: 0.9rem; }
@media (min-width: 560px) {
  .form-row { grid-template-columns: 1fr 1fr; }
}
.form-row > * { min-width: 0; }