/* ==========================================================================
   Dein Hörgerät – Prototyp Startseite (ohne Shop)
   Farben aus dem Logo, Schriften aus den bisherigen Layouts (Titillium Web,
   Source Sans). Grün in drei Stufen, damit Text und Schaltflächen den
   Kontrast für ältere Leserinnen und Leser halten.
   ========================================================================== */

:root {
  --gruen: #76B72A;          /* Logo-Grün: Logo, Akzentlinien, Zierflächen */
  --gruen-ui: #5A9A1F;       /* Schaltflächen, Ziffern, Icons (weiss ab 17px fett) */
  --gruen-ui-dunkel: #4A8318;
  --gruen-text: #3F7A12;     /* grüne Schrift auf Weiss, >= 4.5:1 */
  --gruen-hauch: #EFF6E6;
  --grau: #575756;           /* Logo-Grau: Überschriften, Flächen */
  --tinte: #2B2B2A;
  --tinte-2: #50504F;
  --oliv: #2F3527;           /* Grund hinter dem Hero-Foto */
  --papier: #F5F5F2;
  --papier-2: #E9E9E3;
  --linie: #DADAD3;
  --rahmen: #B5B5AD;
  --fehler: #B3261E;

  --font-display: "Titillium Web", "Segoe UI", system-ui, sans-serif;
  --font-text: "Source Sans 3", "Segoe UI", system-ui, sans-serif;

  --r-s: 4px;
  --r-m: 8px;
  --r-l: 14px;
  --schatten-1: 0 1px 2px rgba(40, 40, 30, .06), 0 6px 18px rgba(40, 40, 30, .07);
  --schatten-2: 0 2px 6px rgba(40, 40, 30, .08), 0 22px 56px rgba(40, 40, 30, .16);

  --max: 1240px;
  --gutter: clamp(20px, 4vw, 48px);
  --sektion: clamp(72px, 9vw, 128px);
  --dauer: 200ms;
  --kopf-h: 92px;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--kopf-h) + 12px); -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #fff;
  color: var(--tinte);
  font-family: var(--font-text);
  font-size: 19px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
img, video, svg { display: block; max-width: 100%; }
img { height: auto; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--grau); margin: 0; line-height: 1.15; }
a { color: var(--gruen-text); text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover { color: var(--gruen-ui-dunkel); }
:focus-visible { outline: 3px solid var(--gruen-ui); outline-offset: 3px; border-radius: 2px; }
button { font: inherit; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 100;
  background: var(--tinte); color: #fff; padding: 12px 18px; border-radius: var(--r-s);
  font-weight: 700; text-decoration: none;
}
.skip:focus { top: 12px; color: #fff; }

.wrap { max-width: calc(var(--max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Schriftrollen ---------- */
.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 16px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gruen-text);
}
.eyebrow::before { content: ""; width: 30px; height: 2px; border-radius: 2px; background: var(--gruen); }
.zentriert .eyebrow { justify-content: center; }

.h-sektion {
  margin-bottom: 20px;
  font-size: clamp(30px, 3.4vw, 46px); font-weight: 300; line-height: 1.12;
  letter-spacing: .045em; text-transform: uppercase;
}
.h-sektion b { font-weight: 700; color: var(--gruen-ui); }
.lead { max-width: 60ch; font-size: clamp(19px, 1.5vw, 21px); color: var(--tinte-2); }
.zentriert { text-align: center; }
.zentriert .lead { margin-left: auto; margin-right: auto; }
.kopfzeile { margin-bottom: clamp(36px, 4vw, 56px); }
.klein { font-size: 16px; color: var(--tinte-2); }

/* ---------- Schaltflächen ---------- */
.btn {
  --bg: var(--gruen-ui); --fg: #fff; --bd: var(--gruen-ui);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 58px; padding: 0 28px;
  border: 2px solid var(--bd); border-radius: var(--r-s);
  background: var(--bg); color: var(--fg);
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer; touch-action: manipulation;
  transition: background-color var(--dauer), border-color var(--dauer), color var(--dauer), box-shadow var(--dauer), transform var(--dauer);
}
.btn:hover { --bg: var(--gruen-ui-dunkel); --bd: var(--gruen-ui-dunkel); color: var(--fg); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--gruen-ui-dunkel); }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--linie { --bg: transparent; --fg: var(--gruen-text); --bd: var(--gruen-ui); }
.btn--linie:hover { --bg: var(--gruen-hauch); --fg: var(--gruen-ui-dunkel); --bd: var(--gruen-ui-dunkel); }
.btn--hell { --bg: #fff; --fg: var(--gruen-text); --bd: #fff; }
.btn--hell:hover { --bg: var(--gruen-hauch); --fg: var(--gruen-ui-dunkel); --bd: var(--gruen-hauch); }
.btn--block { width: 100%; }
.btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.aktionen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.zentriert .aktionen { justify-content: center; }

.ziffer {
  flex: none; display: grid; place-items: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--gruen-ui); color: #fff;
  font-family: var(--font-display); font-size: 21px; font-weight: 700; line-height: 1;
}
.ico { width: 48px; height: 48px; color: var(--gruen-ui); flex: none; }

/* ---------- Kopfbereich ---------- */
.topbar { background: var(--papier); border-bottom: 1px solid var(--linie); font-size: 16px; color: var(--tinte-2); }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 44px; }
.topbar ul { display: flex; gap: 28px; margin: 0; padding: 0; list-style: none; }
.topbar li { display: flex; align-items: center; gap: 8px; }
.topbar svg { width: 18px; height: 18px; color: var(--gruen-ui); }
.topbar a { color: var(--tinte); font-weight: 700; text-decoration: none; }
.topbar a:hover { color: var(--gruen-text); text-decoration: underline; }
.topbar__kontakt { display: flex; gap: 26px; }
.topbar__kontakt a { display: inline-flex; align-items: center; gap: 8px; }

.kopf { position: sticky; top: 0; z-index: 50; background: #fff; transition: box-shadow var(--dauer); }
.kopf.is-stuck { box-shadow: 0 1px 0 var(--linie), 0 10px 28px rgba(40, 40, 30, .08); }
.kopf .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: var(--kopf-h); }
.logo { flex: none; display: block; }
.logo img { width: 210px; }

.hauptnav ul { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
/* Nur die Menüpunkte (ul a) – nicht die Buttons in .hauptnav__extra, sonst verlieren diese ihren Button-Stil */
.hauptnav ul a {
  position: relative; display: block; padding: 10px 11px;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--grau); text-decoration: none;
}
.hauptnav ul a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: 3px; height: 2px;
  background: var(--gruen); transform: scaleX(0); transform-origin: left; transition: transform var(--dauer);
}
.hauptnav ul a:hover { color: var(--tinte); }
.hauptnav ul a:hover::after, .hauptnav ul a[aria-current="true"]::after { transform: scaleX(1); }
.hauptnav__extra { display: none; }

.kopf-cta { display: flex; align-items: center; gap: 18px; flex: none; }
.kopf-tel { display: flex; flex-direction: column; line-height: 1.2; text-decoration: none; color: var(--tinte); }
.kopf-tel small { font-size: 14px; color: var(--tinte-2); }
.kopf-tel strong { font-family: var(--font-display); font-size: 19px; letter-spacing: .02em; }
.kopf-tel:hover strong { color: var(--gruen-text); }
.kopf-cta .btn { min-height: 50px; padding: 0 20px; font-size: 15px; }

.burger {
  display: none; align-items: center; gap: 10px; min-height: 50px; padding: 0 14px;
  border: 1.5px solid var(--rahmen); border-radius: var(--r-s); background: #fff; color: var(--tinte);
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  cursor: pointer;
}
.burger svg { width: 24px; height: 24px; }
.burger .icon-zu { display: none; }
.burger[aria-expanded="true"] .icon-auf { display: none; }
.burger[aria-expanded="true"] .icon-zu { display: block; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; background: var(--oliv); color: #fff; }
.hero__bild { position: absolute; inset: 0; z-index: -2; }
.hero__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 28%; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(34, 40, 28, .86) 0%, rgba(34, 40, 28, .66) 36%, rgba(34, 40, 28, .14) 62%, rgba(34, 40, 28, 0) 78%);
}
.hero .wrap { padding-top: clamp(48px, 5vw, 72px); padding-bottom: 196px; }
.hero__text { max-width: 700px; }
.hero .eyebrow { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
.hero h1 {
  margin-bottom: 22px; color: #fff;
  font-size: clamp(40px, 4.5vw, 66px); font-weight: 300; line-height: 1.02;
  letter-spacing: .03em; text-transform: uppercase; text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.hero h1 b { display: block; font-weight: 700; color: var(--gruen); }
.hero .lead { color: rgba(255, 255, 255, .94); text-shadow: 0 1px 4px rgba(0, 0, 0, .55); max-width: 58ch; }

.haken { display: grid; gap: 12px; margin: 26px 0 0; padding: 0; list-style: none; }
.haken li { display: flex; align-items: flex-start; gap: 14px; font-size: 19px; font-weight: 600; line-height: 1.4; }
.haken li::before {
  content: ""; flex: none; width: 28px; height: 28px; margin-top: -1px; border-radius: 50%;
  background: var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / 16px no-repeat;
}
.hero .haken li { text-shadow: 0 1px 4px rgba(0, 0, 0, .55); }

/* ---------- Rückruf-Karte + Vertrauensleiste ---------- */
.vertrauen { background: var(--papier); padding-bottom: 64px; }
.rueckruf {
  position: relative; z-index: 5; margin-top: -150px;
  background: #fff; border-radius: var(--r-l); box-shadow: var(--schatten-2);
  padding: 28px 34px 22px;
}
.rueckruf__kopf { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 18px; }
.rueckruf__kopf h2 { font-size: 28px; font-weight: 600; color: var(--tinte); letter-spacing: .01em; }
.rueckruf__kopf p { margin: 0; color: var(--tinte-2); }
.rueckruf__form { display: grid; grid-template-columns: 1fr 1fr 300px auto; gap: 14px; align-items: end; }
.rueckruf__fuss { margin: 14px 0 0; font-size: 16px; color: var(--tinte-2); display: flex; align-items: center; gap: 10px; }
.rueckruf__fuss svg { width: 18px; height: 18px; color: var(--gruen-ui); }

.usp { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin: 44px 0 0; padding: 0; list-style: none; }
.usp li {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 26px 14px 22px; border-radius: var(--r-m); background: #fff; box-shadow: var(--schatten-1);
  text-align: center; font-family: var(--font-display); font-size: 17px; font-weight: 600; line-height: 1.3; color: var(--grau);
}
.usp .ico { width: 54px; height: 54px; }

/* ---------- Katalog-Kurzhinweis ---------- */
.katstreifen {
  display: flex; align-items: center; gap: 28px; margin-top: 28px;
  padding: 20px 28px; border: 1px solid var(--linie); border-radius: var(--r-l); background: #fff;
}
.katstreifen .cover { width: 78px; flex: none; }
.katstreifen__text { flex: 1; min-width: 0; }
.katstreifen__text h2 { font-size: 24px; font-weight: 600; color: var(--tinte); margin-bottom: 2px; }
.katstreifen__text p { margin: 0; color: var(--tinte-2); }
.katstreifen .aktionen { margin: 0; flex: none; }
.katstreifen .btn { min-height: 52px; font-size: 15px; padding: 0 20px; }

/* Katalog-Titelbild als Stellvertreter, bis das echte Cover vorliegt */
.cover {
  container-type: inline-size;
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  aspect-ratio: 210 / 297; padding: 0; background: #fff; border-radius: 3px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 12px 28px rgba(40, 40, 30, .18);
}
/* Abstände in cqw (Breite des Covers), damit das Cover in jeder Grösse gleich aussieht */
.cover__logo { width: 72cqw; margin: 11cqw 11cqw 0; }
.cover__titel {
  margin: 8cqw 11cqw 0; font-family: var(--font-display); font-size: 10cqw; font-weight: 300; line-height: 1.05;
  letter-spacing: .05em; text-transform: uppercase; color: var(--grau);
}
.cover__titel b { display: block; font-weight: 700; color: var(--gruen-ui); }
.cover__bild { flex: 1; display: flex; align-items: center; justify-content: center; min-height: 0; padding: 4cqw 11cqw; }
.cover__bild img { max-height: 100%; width: auto; object-fit: contain; }
.cover__band {
  margin: 0; padding: 5cqw 8cqw; background: var(--gruen); color: #fff;
  font-family: var(--font-display); font-size: 5.4cqw; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; text-align: center;
}

/* ---------- Sektionen allgemein ---------- */
.sektion { padding: var(--sektion) 0; overflow-x: clip; }
.sektion--papier { background: var(--papier); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 96px); align-items: center; }

/* Foto auf versetzter Fläche, die zum Seitenrand ausläuft – wie in den bisherigen Layouts */
.buehne { position: relative; isolation: isolate; }
.buehne::before {
  content: ""; position: absolute; z-index: -1; top: -44px; bottom: -44px; left: -100vw; right: 18%;
  background: var(--papier);
}
.sektion--papier .buehne::before { background: var(--papier-2); }
.buehne--rechts::before { left: 18%; right: -100vw; }
.buehne img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--schatten-1); }

/* ---------- Ablauf mit Video ---------- */
.ablauf { display: grid; grid-template-columns: 1fr 1.12fr; gap: clamp(40px, 5vw, 80px); align-items: start; }
.schritte { margin: 0; padding: 0; list-style: none; }
.schritte li { display: flex; align-items: flex-start; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--linie); }
.schritte li:first-child { padding-top: 0; }
.schritte h3 { margin: 7px 0 2px; font-size: 22px; font-weight: 600; line-height: 1.3; color: var(--tinte); letter-spacing: .01em; }
.schritte p { margin: 0; font-size: 18px; color: var(--tinte-2); }
.fussnote { max-width: 50ch; margin: 22px 0 0; font-size: 16px; color: var(--tinte-2); }

.video { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-m); background: var(--gruen); box-shadow: var(--schatten-2); }
.video video, .video__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video__start {
  position: absolute; inset: 0; display: grid; place-items: center; padding: 0; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(0deg, rgba(0, 0, 0, .42) 0%, rgba(0, 0, 0, 0) 45%);
}
.video__play {
  display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%;
  background: var(--gruen-ui); box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
  transition: transform var(--dauer), background-color var(--dauer);
}
.video__play svg { width: 36px; height: 36px; margin-left: 6px; }
.video__start:hover .video__play { transform: scale(1.06); background: var(--gruen-ui-dunkel); }
.video__start:focus-visible { outline: none; }
.video__start:focus-visible .video__play { box-shadow: 0 0 0 4px #fff, 0 0 0 8px var(--gruen-ui-dunkel); }
.video__label {
  position: absolute; left: 18px; bottom: 16px; padding: 5px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .6); font-family: var(--font-display); font-size: 16px; font-weight: 600;
}
.video.is-playing .video__start, .video.is-playing .video__poster { display: none; }
.video__caption { display: flex; align-items: center; gap: 12px; margin: 16px 0 0; font-size: 17px; color: var(--tinte-2); }
.video__caption svg { width: 28px; height: 28px; color: var(--gruen-ui); flex: none; }

/* ---------- Geräteklassen ---------- */
.situationen { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; max-width: 800px; margin: 0 auto 14px; padding: 0; list-style: none; }
.situationen__frage { margin: 0 0 14px; font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--tinte); }
.chip {
  display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 20px 0 14px;
  border: 1.5px solid var(--rahmen); border-radius: 999px; background: #fff; color: var(--tinte);
  font-family: var(--font-text); font-size: 17px; font-weight: 600; cursor: pointer;
  transition: border-color var(--dauer), background-color var(--dauer);
}
.chip:hover { border-color: var(--gruen-ui); }
.chip__haken { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid #8E8E87; transition: background-color var(--dauer), border-color var(--dauer); }
.chip__haken svg { width: 14px; height: 14px; color: #fff; opacity: 0; transition: opacity var(--dauer); }
.chip[aria-pressed="true"] { border-color: var(--gruen-ui); background: var(--gruen-hauch); }
.chip[aria-pressed="true"] .chip__haken { background: var(--gruen-ui); border-color: var(--gruen-ui); }
.chip[aria-pressed="true"] .chip__haken svg { opacity: 1; }
.empfehlung { min-height: 30px; margin: 0 0 30px; font-size: 18px; color: var(--tinte-2); }
.empfehlung strong { color: var(--tinte); }

.tabelle { overflow-x: auto; border-radius: var(--r-l); background: #fff; box-shadow: var(--schatten-1); }
table.klassen { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; font-size: 18px; }
.klassen th, .klassen td {
  padding: 18px 20px; border-bottom: 1px solid var(--linie); text-align: left; vertical-align: top; line-height: 1.45;
  transition: background-color var(--dauer), color var(--dauer);
}
.klassen thead th {
  padding: 22px 20px 18px; border-bottom: 2px solid var(--linie);
  font-family: var(--font-display); font-size: 22px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--grau);
}
.klassen th[scope="row"] {
  width: 210px; background: var(--papier);
  font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2);
}
.klassen tbody tr:last-child > * { border-bottom: 0; }
.klassen .is-passend { background: var(--gruen-hauch); }
.klassen thead th.is-passend { background: var(--gruen-ui); border-bottom-color: var(--gruen-ui); color: #fff; }
.stufe { display: flex; gap: 5px; margin-top: 8px; }
.stufe i { width: 10px; height: 10px; border-radius: 50%; background: var(--papier-2); }
.stufe i.an { background: var(--gruen-ui); }
.klassen thead th.is-passend .stufe i { background: rgba(255, 255, 255, .35); }
.klassen thead th.is-passend .stufe i.an { background: #fff; }

.klassen-karten { display: none; gap: 14px; margin: 0; padding: 0; list-style: none; }
.klassen-karte { padding: 22px 22px 18px; border: 2px solid transparent; border-radius: var(--r-l); background: #fff; box-shadow: var(--schatten-1); transition: border-color var(--dauer); }
.klassen-karte.is-passend { border-color: var(--gruen-ui); }
.klassen-karte h3 { display: flex; align-items: center; justify-content: space-between; font-size: 24px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.klassen-karte dl { margin: 0; }
.klassen-karte dt { margin-top: 14px; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinte-2); }
.klassen-karte dd { margin: 2px 0 0; }

/* ---------- Marken ---------- */
.marken-kopf { margin-bottom: clamp(36px, 4vw, 56px); }
.marke { display: grid; grid-template-columns: 1fr 1fr; min-height: 540px; border-top: 1px solid var(--linie); }
.marke:last-child { border-bottom: 1px solid var(--linie); }
.marke--gespiegelt .marke__bild { order: 2; }
.marke__bild { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--papier); }
.marke__bild--weiss { background: #fff; }
.marke__bild img { width: 100%; height: 100%; object-fit: cover; }
.marke__zahl { position: absolute; right: 0; bottom: 0; display: flex; align-items: baseline; gap: 14px; padding: 22px 30px; background: var(--grau); color: #fff; }
.marke--gespiegelt .marke__zahl { right: auto; left: 0; }
.marke__zahl b { font-family: var(--font-display); font-size: 58px; font-weight: 700; line-height: 1; }
.marke__zahl span { font-family: var(--font-display); font-size: 14px; letter-spacing: .12em; line-height: 1.35; text-transform: uppercase; color: #EDEDE8; }
.marke__inhalt { display: flex; flex-direction: column; justify-content: center; max-width: 680px; padding: clamp(40px, 5vw, 72px) clamp(24px, 5vw, 80px); }
.marke--gespiegelt .marke__inhalt { margin-left: auto; }
.marke__kopf { display: flex; align-items: center; gap: 18px; margin-bottom: 22px; }
.marke__logo { min-width: 150px; min-height: 52px; padding: 10px 16px; font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: .04em; color: var(--tinte); }
.marke__land { padding-left: 18px; border-left: 1px solid var(--linie); font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--tinte-2); }
.marke__claim { margin-bottom: 16px; font-size: clamp(28px, 2.6vw, 38px); font-weight: 300; line-height: 1.12; letter-spacing: .03em; text-transform: uppercase; }
.punkte { display: grid; gap: 10px; margin: 6px 0 22px; padding: 0; list-style: none; }
.punkte li { position: relative; padding-left: 32px; color: var(--tinte-2); }
.punkte li::before { content: ""; position: absolute; left: 2px; top: .42em; width: 15px; height: 15px; border-radius: 50%; border: 2.5px solid var(--gruen-ui); }
.modelle { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.modelle li { padding: 5px 14px; border-radius: 999px; background: var(--papier); font-size: 16px; font-weight: 600; }
.marke .aktionen { margin-top: 26px; }

/* ---------- Fernanpassung ---------- */
.app-schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 28px 0 0; padding: 0; list-style: none; }
.app-schritte li { display: flex; flex-direction: column; gap: 12px; font-family: var(--font-display); font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--tinte); }
.apps { margin: 22px 0 0; font-size: 17px; color: var(--tinte-2); }
.apps strong { color: var(--tinte); }

/* ---------- Vorteile ---------- */
.karten4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.karte { padding: 34px 24px 28px; border-radius: var(--r-l); background: #fff; box-shadow: var(--schatten-1); text-align: center; }
.karte__ico { display: grid; place-items: center; width: 76px; height: 76px; margin: 0 auto 18px; border-radius: 50%; background: var(--gruen-hauch); color: var(--gruen-ui); }
.karte__ico svg { width: 40px; height: 40px; }
.karte h3 { margin-bottom: 8px; font-size: 22px; font-weight: 700; color: var(--tinte); }
.karte p { margin: 0; font-size: 17px; color: var(--tinte-2); }

/* ---------- Partnerfilialen ---------- */
.filialen { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 88px); align-items: stretch; }
.filiale { display: flex; gap: 18px; margin-top: 14px; padding: 22px 24px; border: 1px solid var(--linie); border-radius: var(--r-m); background: #fff; }
.filiale .ico { width: 40px; height: 40px; }
.filiale h3 { margin-bottom: 4px; font-size: 21px; font-weight: 700; color: var(--tinte); }
.filiale p { margin: 0; font-size: 17px; color: var(--tinte-2); }
.karte-platz { min-height: 420px; }

/* ---------- Kundenstimmen: Sprechblasen ---------- */
.stimmen { background: var(--papier); padding-top: 0; }
.stimmen__titel {
  position: relative; top: -44px; display: inline-block; margin-bottom: 0; padding: 36px 48px 34px;
  background: var(--gruen-ui); color: #fff;
}
.stimmen__titel .h-sektion { margin: 0; color: #fff; }
.zitate { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 0; padding: 0; list-style: none; }
.zitat { display: flex; flex-direction: column; height: 100%; margin: 0; }
.zitat blockquote {
  position: relative; flex: 1; margin: 0 0 30px; padding: 30px 30px 28px;
  border-radius: var(--r-l); background: #fff; box-shadow: var(--schatten-1);
  font-size: 20px; line-height: 1.55; color: var(--tinte);
}
.zitat blockquote::before {
  content: "“"; display: block; height: 34px; margin-bottom: 4px;
  font-family: Georgia, "Times New Roman", serif; font-size: 78px; line-height: .8; color: var(--gruen);
}
.zitat blockquote::after {
  content: ""; position: absolute; left: 38px; bottom: -18px; width: 0; height: 0;
  border-style: solid; border-width: 18px 22px 0 0; border-color: #fff transparent transparent transparent;
  filter: drop-shadow(0 4px 3px rgba(40, 40, 30, .05));
}
.zitat blockquote p { margin: 0; }
.zitat figcaption { display: flex; align-items: center; gap: 14px; padding-left: 20px; }
.initialen { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #fff; color: var(--gruen-text); font-family: var(--font-display); font-size: 19px; font-weight: 700; box-shadow: var(--schatten-1); }
.zitat cite { display: block; font-style: normal; font-weight: 700; }
.zitat .ort { font-size: 16px; color: var(--tinte-2); }

/* ---------- FAQ ---------- */
.faq { max-width: 880px; margin: 0 auto; border-top: 1px solid var(--linie); }
.faq details { border-bottom: 1px solid var(--linie); }
.faq summary {
  display: flex; align-items: center; gap: 18px; padding: 22px 4px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.35; color: var(--tinte);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--gruen-text); }
.faq__plus { position: relative; flex: none; width: 36px; height: 36px; border: 2px solid var(--gruen-ui); border-radius: 50%; transition: background-color var(--dauer); }
.faq__plus::before, .faq__plus::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; border-radius: 2px;
  background: var(--gruen-ui); transform: translate(-50%, -50%); transition: transform var(--dauer), background-color var(--dauer);
}
.faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq details[open] summary { color: var(--gruen-text); }
.faq details[open] .faq__plus { background: var(--gruen-ui); }
.faq details[open] .faq__plus::before, .faq details[open] .faq__plus::after { background: #fff; }
.faq details[open] .faq__plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__antwort { max-width: 68ch; padding: 0 4px 24px 58px; color: var(--tinte-2); }
.faq__antwort p:last-child { margin: 0; }

/* ---------- Katalog ---------- */
.katalog { display: grid; grid-template-columns: minmax(0, 400px) 1fr; overflow: hidden; border-radius: var(--r-l); background: #fff; box-shadow: var(--schatten-1); }
.katalog__cover { position: relative; display: grid; place-items: center; padding: 56px 44px; background: linear-gradient(160deg, var(--papier) 0%, var(--papier-2) 100%); }
.katalog__cover .cover { width: min(240px, 100%); transform: rotate(-3deg); }
.katalog__badge { position: absolute; left: 0; top: 0; padding: 8px 16px; background: var(--grau); color: #fff; font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
.katalog__info { padding: clamp(28px, 4vw, 56px); }
.katalog__info .h-sektion { font-size: clamp(28px, 2.6vw, 36px); }
.katalog .aktionen { margin-top: 8px; }

/* ---------- Anfrage ---------- */
.anfrage { background: var(--papier); padding-top: 0; }
.anfrage__titel { position: relative; top: -48px; display: inline-block; max-width: 900px; padding: 38px 48px 34px; background: var(--gruen-ui); color: #fff; }
.anfrage__titel .h-sektion { margin: 0; color: #fff; }
.anfrage__grid { display: grid; grid-template-columns: .9fr 1.3fr; gap: clamp(36px, 5vw, 80px); align-items: start; margin-top: 8px; }
.kontaktwege { display: grid; gap: 24px; margin: 32px 0 0; padding: 0; list-style: none; }
.kontaktwege li { display: flex; align-items: flex-start; gap: 18px; }
.kontaktwege .ico { width: 46px; height: 46px; }
.kontaktwege strong { display: block; font-family: var(--font-display); font-size: 22px; font-weight: 600; color: var(--tinte); }
.kontaktwege a { font-size: 20px; font-weight: 700; }
.formular { padding: clamp(24px, 3.5vw, 44px); border-radius: var(--r-l); background: #fff; box-shadow: var(--schatten-2); }
.formular__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.voll { grid-column: 1 / -1; }

/* ---------- Formularfelder ---------- */
.feld { min-width: 0; margin: 0; padding: 0; border: 0; }
.feld label, .feld legend { display: block; margin-bottom: 6px; padding: 0; font-size: 17px; font-weight: 700; color: var(--tinte); }
.feld .optional { font-weight: 400; color: var(--tinte-2); }
.eingabe {
  width: 100%; min-height: 58px; padding: 0 16px;
  border: 1.5px solid var(--rahmen); border-radius: var(--r-s); background: #fff; color: var(--tinte);
  font-family: var(--font-text); font-size: 18px;
  transition: border-color var(--dauer), box-shadow var(--dauer);
}
.eingabe::placeholder { color: #6F6F6B; }
.eingabe:hover { border-color: #8E8E87; }
.eingabe:focus { outline: none; border-color: var(--gruen-ui); box-shadow: 0 0 0 3px rgba(90, 154, 31, .3); }
textarea.eingabe { min-height: 140px; padding: 12px 16px; line-height: 1.5; resize: vertical; }
select.eingabe {
  appearance: none; padding-right: 46px; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23575756' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") right 14px center / 22px no-repeat;
}
select.eingabe:disabled { background-color: var(--papier); color: #6F6F6B; cursor: not-allowed; }
input[type="file"].eingabe { min-height: 0; padding: 10px 12px; font-size: 17px; cursor: pointer; }
input[type="file"].eingabe::file-selector-button {
  margin-right: 14px; padding: 10px 16px; border: 0; border-radius: var(--r-s); background: var(--papier-2); color: var(--tinte);
  font-family: var(--font-display); font-weight: 700; cursor: pointer;
}
.feld__hilfe { margin: 6px 0 0; font-size: 16px; color: var(--tinte-2); }
.feld__fehler { display: none; margin: 6px 0 0; font-size: 16px; font-weight: 700; color: var(--fehler); }
.feld.hat-fehler .eingabe, .feld.hat-fehler .wahl label { border-color: var(--fehler); }
.feld.hat-fehler .feld__fehler { display: block; }

.wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wahl label {
  display: flex; align-items: center; gap: 10px; min-height: 58px; margin: 0; padding: 0 14px;
  border: 1.5px solid var(--rahmen); border-radius: var(--r-s); background: #fff; cursor: pointer;
  font-size: 17px; font-weight: 600; transition: border-color var(--dauer), background-color var(--dauer);
}
.wahl input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--gruen-ui); }
.wahl label:has(input:checked) { border-color: var(--gruen-ui); background: var(--gruen-hauch); }
.wahl label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(90, 154, 31, .35); }

.checkbox { display: flex; align-items: flex-start; gap: 12px; font-size: 17px; font-weight: 400; line-height: 1.5; cursor: pointer; }
.feld .checkbox { display: flex; margin-bottom: 0; font-weight: 400; }
.checkbox input { flex: none; width: 24px; height: 24px; margin: 1px 0 0; accent-color: var(--gruen-ui); }

.erfolg {
  display: flex; gap: 16px; align-items: flex-start; padding: 22px 24px;
  border: 2px solid var(--gruen-ui); border-radius: var(--r-m); background: var(--gruen-hauch);
}
.erfolg svg { width: 32px; height: 32px; flex: none; color: var(--gruen-ui); }
.erfolg strong { display: block; font-family: var(--font-display); font-size: 22px; color: var(--tinte); }
.erfolg p { margin: 2px 0 0; color: var(--tinte-2); }

/* ---------- SEO-Text ---------- */
.seo h2 { margin-bottom: 18px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 300; letter-spacing: .04em; text-transform: uppercase; }
.seo h3 { margin: 26px 0 8px; font-size: 21px; font-weight: 700; color: var(--tinte); }
.seo__spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 56px; }

/* ---------- Platzhalter: fehlende Inhalte sichtbar markieren ---------- */
.platzhalter {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  padding: 40px 24px; border: 2px dashed var(--gruen-ui); border-radius: var(--r-m);
  background: repeating-linear-gradient(135deg, #F8FBF3 0 14px, #EEF5E4 14px 28px);
  color: var(--tinte-2); font-size: 16px; text-align: center;
}
.platzhalter::before {
  content: "Platzhalter"; position: absolute; top: -13px; left: 20px; padding: 6px 12px; border-radius: 999px;
  background: var(--gruen-ui); color: #fff; font-family: var(--font-display); font-size: 12px; font-weight: 700; letter-spacing: .12em; line-height: 1; text-transform: uppercase;
}
.platzhalter strong { font-family: var(--font-display); font-size: 19px; color: var(--tinte); }
.marke__bild.platzhalter { border: 0; border-radius: 0; outline: 2px dashed var(--gruen-ui); outline-offset: -18px; }
.marke__bild.platzhalter::before { top: 30px; left: 34px; }
.marke__logo.platzhalter { padding: 10px 16px; }
.marke__logo.platzhalter::before { display: none; }
.luecke { padding: 0 5px; border-bottom: 2px dashed #B98B00; border-radius: 2px; background: #FFF3C4; color: var(--tinte); }

/* ---------- Fussbereich ---------- */
.fuss { background: var(--papier); border-top: 1px solid var(--linie); }
.fuss__cta {
  position: relative; top: -44px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px 32px;
  padding: 30px 40px; background: var(--gruen-ui); color: #fff;
}
.fuss__cta p { margin: 0; font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; line-height: 1.2; letter-spacing: .05em; text-transform: uppercase; }
.fuss__cta .aktionen { margin: 0; }
.fuss__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.1fr; gap: 40px; padding: 4px 0 52px; }
.fuss__grid > div > p { margin: 18px 0 0; font-size: 17px; color: var(--tinte-2); max-width: 34ch; }
.fuss h2 { margin-bottom: 14px; font-size: 15px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--tinte); }
.fuss ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; font-size: 18px; }
.fuss ul a { color: var(--tinte); text-decoration: none; }
.fuss ul a:hover { color: var(--gruen-text); text-decoration: underline; }
.fuss__leiste { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px 28px; padding: 20px 0; border-top: 1px solid var(--linie); font-size: 16px; color: var(--tinte-2); }
.fuss__leiste ul { display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 16px; }
.fuss__leiste a { color: var(--tinte-2); }

/* ==========================================================================
   Umbrüche
   ========================================================================== */
@media (max-width: 1359px) {
  .kopf-tel { display: none; }
}

@media (max-width: 1199px) {
  .burger { display: inline-flex; }
  .kopf-cta { gap: 10px; }
  .hauptnav {
    position: fixed; left: 0; right: 0; top: var(--kopf-h); bottom: 0; z-index: 49;
    padding: 12px var(--gutter) 40px; overflow-y: auto; background: #fff; border-top: 1px solid var(--linie);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity var(--dauer), transform var(--dauer), visibility 0s linear var(--dauer);
  }
  .kopf.is-open .hauptnav { opacity: 1; visibility: visible; transform: none; transition: opacity var(--dauer), transform var(--dauer); }
  .hauptnav ul { flex-direction: column; gap: 0; max-width: 640px; margin: 0 auto; }
  /* Menü auf Tablet und Handy: grosse Zeilen, dunkle Schrift, grüner Pfeil rechts statt Unterstreichung */
  .hauptnav ul a {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    min-height: 62px; padding: 0 6px 0 2px; border-bottom: 1px solid var(--linie);
    font-size: 19px; letter-spacing: .07em; color: var(--tinte);
  }
  .hauptnav ul a::after,
  .hauptnav ul a:hover::after,
  .hauptnav ul a[aria-current="true"]::after {
    position: static; flex: none; width: 10px; height: 10px; background: none;
    border-right: 2.5px solid var(--gruen-ui); border-bottom: 2.5px solid var(--gruen-ui); transform: rotate(-45deg); transform-origin: 50% 50%;
  }
  .hauptnav ul a:hover, .hauptnav ul a[aria-current="true"] { color: var(--gruen-text); }
  .hauptnav__extra { display: grid; gap: 12px; max-width: 640px; margin: 32px auto 0; }
  .hauptnav__extra .btn { width: 100%; }
  .hauptnav__zeiten { margin: 4px 0 0; font-size: 16px; color: var(--tinte-2); text-align: center; }
  .rueckruf__form { grid-template-columns: 1fr 1fr; }
  .rueckruf__form .btn { grid-column: 1 / -1; }
  .usp { grid-template-columns: repeat(3, 1fr); }
  .karten4 { grid-template-columns: repeat(2, 1fr); }
  .fuss__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 960px) {
  .split, .ablauf, .filialen, .anfrage__grid { grid-template-columns: 1fr; }
  .split .buehne { order: -1; margin-right: 12%; }
  .split .buehne--rechts { margin: 0 0 0 12%; }
  .marke, .marke--gespiegelt { grid-template-columns: 1fr; min-height: 0; }
  .marke--gespiegelt .marke__bild { order: 0; }
  .marke__bild { min-height: 340px; }
  .marke__inhalt, .marke--gespiegelt .marke__inhalt { max-width: none; margin: 0; }
  .katalog { grid-template-columns: 1fr; }
  .katstreifen { flex-wrap: wrap; }
  .katstreifen .aktionen { width: 100%; }
  .zitate { grid-template-columns: 1fr; max-width: 640px; }
  .seo__spalten { grid-template-columns: 1fr; }
  .tabelle { display: none; }
  .klassen-karten { display: grid; grid-template-columns: 1fr 1fr; }
  .karte-platz { min-height: 300px; }
}

@media (max-width: 760px) {
  :root { --kopf-h: 76px; }
  body { font-size: 18px; }
  .topbar ul { display: none; }
  .topbar .wrap { justify-content: center; }
  .topbar__kontakt { gap: 18px; font-size: 15px; }
  .logo img { width: 168px; }
  .kopf-cta .btn--kopf { display: none; }

  .hero__bild { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .hero__bild img { object-position: 80% 18%; }
  .hero::before { inset: 0 0 auto 0; height: 75vw; background: linear-gradient(180deg, rgba(47, 53, 39, 0) 50%, var(--oliv) 100%); }
  .hero .wrap { min-height: 0; margin-top: -64px; padding-top: 0; padding-bottom: 150px; position: relative; }

  .rueckruf { padding: 24px 20px 18px; }
  .rueckruf__kopf h2 { font-size: 24px; }
  .rueckruf__form { grid-template-columns: 1fr; }
  .usp { grid-template-columns: 1fr 1fr; }
  .usp li:last-child { grid-column: 1 / -1; }
  .katstreifen { padding: 20px; gap: 18px; }
  .katstreifen .aktionen .btn { flex: 1 1 100%; }
  .klassen-karten { grid-template-columns: 1fr; }
  .app-schritte { grid-template-columns: 1fr; }
  .app-schritte li { flex-direction: row; align-items: center; }
  .karten4 { grid-template-columns: 1fr; }
  .stimmen__titel, .anfrage__titel { display: block; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter)); padding: 30px var(--gutter); }
  .formular__grid { grid-template-columns: 1fr; }
  .faq summary { font-size: 19px; gap: 14px; }
  .faq__antwort { padding-left: 4px; }
  .zentriert .eyebrow::before { display: none; }
  .marke__zahl b { font-size: 44px; }
  .fuss__cta { padding: 26px 22px; }
  .fuss__grid { grid-template-columns: 1fr; gap: 28px; }
  .aktionen .btn { flex: 1 1 auto; }
}

/* ---------- Ergänzungen ---------- */
.notiz { margin: 18px auto 44px; }
.sektion--bis-rand { padding-bottom: 0; }
.rueckruf__form { align-items: start; }
.rueckruf__form .btn { margin-top: 34px; }
.marke__zahl { margin: 0; }
.karten4 { margin: 0; padding: 0; list-style: none; }
.buehne img.pos-rechts { object-position: 72% 50%; }
.marke__bild.platzhalter { gap: 8px; padding: 60px 48px; }
.marke__bild.platzhalter > span { max-width: 36ch; }
.stimmen__titel .h-sektion b, .anfrage__titel .h-sektion b { color: #fff; }
.zitat .ort { display: block; }
.filiale.platzhalter { flex-direction: column; align-items: flex-start; gap: 2px; margin-top: 26px; padding: 22px 24px; text-align: left; }
.faq-mehr { margin-top: 40px; }
.faq-mehr > p { margin: 0; font-family: var(--font-display); font-size: 21px; font-weight: 600; color: var(--tinte); }
.faq-mehr .aktionen { margin-top: 14px; }
.katalog__info .klein { margin: 16px 0 0; }

/* Anfrage als dunkle Fläche im Logo-Grau – das Hauptziel der Seite */
.anfrage { background: var(--grau); color: #fff; }
.anfrage__titel { box-shadow: 0 18px 40px rgba(0, 0, 0, .18); }
.anfrage .eyebrow { color: #fff; }
.anfrage .lead { color: rgba(255, 255, 255, .92); }
.anfrage .kontaktwege strong, .anfrage .kontaktwege a, .anfrage .kontaktwege span { color: #fff; }
.anfrage .kontaktwege .ico { color: #8CCB45; }
.anfrage .formular { color: var(--tinte); }
.anfrage .formular .klein { color: var(--tinte-2); }
.anfrage .kontaktwege .luecke { color: var(--tinte); }
.hilfe-zeile { margin-top: -12px; }
.formular__fuss { margin: 12px 0 0; }
.fuss__logo { width: 220px; }
@media (max-width: 1199px) {
  .rueckruf__form .btn { margin-top: 4px; }
}
@media (max-width: 480px) {
  .topbar__mail { display: none; }
}

/* ==========================================================================
   Prototyp 2: drei Betreuungswege und Hausbesuch mit Hörheld
   ========================================================================== */
[hidden] { display: none !important; }

/* Betreuungswege als eigene Sektion unter Rückruf, Leistungen und Katalog */
.wege { background: #fff; }
.wege__hilfe { margin: 36px 0 0; font-size: 19px; text-align: center; color: var(--tinte-2); }
.wege__hilfe a { font-weight: 700; }

.wege__karten { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.weg { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--linie); border-radius: var(--r-l); background: #fff; box-shadow: var(--schatten-1); }
.weg__bild { position: relative; aspect-ratio: 16 / 9; background: var(--papier-2); }
.weg__bild img { width: 100%; height: 100%; object-fit: cover; }
.weg__bild img.pos-rechts { object-position: 74% 40%; }
.weg__neu {
  position: absolute; left: 18px; top: 18px; padding: 6px 14px; border-radius: 999px; background: #fff; color: var(--gruen-text);
  font-family: var(--font-display); font-size: 14px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; box-shadow: var(--schatten-1);
}
.weg__inhalt { flex: 1; display: flex; flex-direction: column; padding: 0 28px 24px; }
/* Grüner Block über der Bildkante – wie in den bisherigen Layouts */
.weg__art {
  position: relative; display: inline-flex; align-self: flex-start; align-items: center; gap: 10px;
  margin: -24px 0 16px; padding: 10px 16px 10px 12px; border-radius: var(--r-s); background: var(--gruen-ui); color: #fff;
  font-family: var(--font-display); font-size: 16px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.weg__art svg { width: 24px; height: 24px; flex: none; }
.weg h3 { font-size: clamp(26px, 2.2vw, 30px); font-weight: 300; line-height: 1.1; letter-spacing: .04em; text-transform: uppercase; }
.weg__wer { margin: 6px 0 14px; font-weight: 700; color: var(--gruen-text); }
.weg .punkte { margin: 0 0 16px; }
.weg .punkte li { font-size: 18px; }
.weg__ideal { margin: 0 0 22px; padding: 14px 16px; border-radius: var(--r-m); background: var(--papier); font-size: 17px; line-height: 1.5; color: var(--tinte-2); }
.weg__ideal strong { color: var(--tinte); }
.weg__aktionen { display: grid; gap: 8px; justify-items: center; margin-top: auto; }
.weg__aktionen .btn { white-space: normal; text-align: center; }
.weg__mehr { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; text-decoration: none; }
.weg__mehr:hover { text-decoration: underline; }
.weg__mehr svg { width: 18px; height: 18px; flex: none; transition: transform var(--dauer); }
.weg__mehr:hover svg { transform: translateX(3px); }


/* Hausbesuch */
.hausbesuch__split { align-items: start; }
.hausbesuch__bild img { aspect-ratio: 1 / 1; object-position: 52% 40%; }
.zusage {
  position: relative; max-width: 420px; margin: -70px 28px 0 auto; padding: 20px 24px;
  background: var(--gruen-ui-dunkel); color: #fff; font-size: 18px; line-height: 1.45; box-shadow: var(--schatten-2);
}
.zusage strong { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 21px; }
.partner { display: flex; align-items: center; gap: 18px; margin-bottom: 26px; padding-bottom: 20px; border-bottom: 1px solid var(--linie); }
.partner__logo { width: 170px; flex: none; }
.partner__text { padding-left: 18px; border-left: 1px solid var(--linie); font-size: 16px; line-height: 1.35; color: var(--tinte-2); }
.haken--liste { grid-template-columns: 1fr 1fr; gap: 12px 24px; margin: 24px 0 18px; }
.haken--liste li { font-size: 18px; }
.einsatz { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; border: 1px solid var(--linie); border-radius: var(--r-m); background: #fff; }
.einsatz .ico { width: 32px; height: 32px; }
.einsatz p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--tinte-2); }
.einsatz strong { display: block; margin-bottom: 2px; font-family: var(--font-display); font-size: 18px; color: var(--tinte); }

.besuch { margin-top: clamp(72px, 8vw, 104px); padding: clamp(28px, 3.5vw, 44px); border-radius: var(--r-l); background: #fff; box-shadow: var(--schatten-1); }
.besuch__titel { margin-bottom: 26px; font-size: clamp(24px, 2.2vw, 30px); font-weight: 300; letter-spacing: .04em; text-transform: uppercase; }
.besuch__schritte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; margin: 0; padding: 0; list-style: none; }
.besuch__schritte li { display: flex; align-items: flex-start; gap: 16px; }
.besuch__schritte h4 { margin: 8px 0 4px; font-family: var(--font-display); font-size: 21px; font-weight: 600; line-height: 1.3; color: var(--tinte); }
.besuch__schritte p { margin: 0; font-size: 17px; color: var(--tinte-2); }

/* Partnerfiliale mit Foto */
.filialen__rechts { display: grid; gap: 72px; align-content: start; }
.buehne img.bild-hoch { aspect-ratio: 4 / 3; object-position: 50% 35%; }
.karte-platz--klein { min-height: 200px; }

/* Formular: Betreuungsweg */
.wahl--betreuung { grid-template-columns: 1fr 1fr; }
.wahl--betreuung label { min-height: 64px; line-height: 1.3; }
.wahl--betreuung svg { width: 24px; height: 24px; flex: none; color: var(--gruen-ui); }

@media (max-width: 1199px) {
  .weg__inhalt { padding: 0 22px 22px; }
  .weg__art { font-size: 15px; }
}
@media (max-width: 960px) {
  .wege__karten { grid-template-columns: 1fr; max-width: 640px; margin: 0 auto; }
  .weg__bild { aspect-ratio: 2 / 1; }
  .besuch__schritte { grid-template-columns: 1fr; gap: 20px; }
  .hausbesuch__bild img { aspect-ratio: 4 / 3; }
  .filialen__rechts { gap: 48px; }
}
@media (max-width: 760px) {
  .haken--liste { grid-template-columns: 1fr; }
  .wahl--betreuung { grid-template-columns: 1fr; }
  .weg__inhalt { padding: 0 20px 20px; }
  .zusage { margin: -44px 14px 0; }
  .partner { flex-wrap: wrap; }
  .partner__text { padding-left: 0; border-left: 0; }
}

/* Korrekturen nach Sichtprüfung */
.weg__bild { overflow: hidden; }
.weg__bild img { position: absolute; inset: 0; }
.rueckruf__fuss { align-items: flex-start; }
.rueckruf__fuss svg { flex: none; margin-top: 4px; }
@media (max-width: 960px) {
  .split { row-gap: 84px; }
}

/* Icon-Leiste: Hinweis auf den neuen Service zu Hause */
.usp li { position: relative; }
.usp__neu {
  position: absolute; top: 10px; right: 10px; padding: 3px 9px; border-radius: 999px;
  background: var(--gruen-ui-dunkel); color: #fff;
  font-family: var(--font-display); font-size: 12px; font-weight: 700; line-height: 1.4; letter-spacing: .1em; text-transform: uppercase;
}

/* Partnerfiliale mit echten Daten */
.filiale p + p { margin-top: 2px; }
.filiale__kontakt { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.filiale__kontakt li { display: flex; align-items: center; gap: 10px; font-size: 18px; }
.filiale__kontakt svg { width: 20px; height: 20px; flex: none; color: var(--gruen-ui); }
.filiale__kontakt a { font-weight: 700; }
.anfahrt { display: grid; gap: 22px; padding: 26px 28px; border-radius: var(--r-l); background: #fff; box-shadow: var(--schatten-1); }
.anfahrt__block + .anfahrt__block { padding-top: 22px; border-top: 1px solid var(--linie); }
.anfahrt h3 { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 22px; font-weight: 600; color: var(--tinte); }
.anfahrt h3 .ico { width: 28px; height: 28px; }
.anfahrt p { margin: 0 0 16px; font-size: 18px; color: var(--tinte-2); }
.zeiten { display: grid; grid-template-columns: auto 1fr; gap: 6px 24px; margin: 0; font-size: 18px; }
.zeiten dt { font-weight: 700; color: var(--tinte); }
.zeiten dd { margin: 0; color: var(--tinte-2); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .zeiten { grid-template-columns: 1fr; gap: 0; }
  .zeiten dd { margin-bottom: 8px; }
  .anfahrt { padding: 22px 20px; }
  .anfahrt .btn { width: 100%; white-space: normal; text-align: center; }
}

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

/* ==========================================================================
   Prototyp 3: Kosten-Teaser auf der Startseite
   ========================================================================== */
.kosten-teaser { background: var(--gruen-hauch); }
.kosten-teaser__split { align-items: center; }
.kosten-teaser .h-sektion { text-wrap: balance; }
.kosten-teaser .klein { margin: 16px 0 0; }
.kosten-teaser__zahlen { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; }
.kosten-teaser__zahlen li {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 18px;
  padding: 20px 24px; border-radius: var(--r-l); background: #fff; box-shadow: var(--schatten-1);
}
.kosten-teaser__zahlen span { font-family: var(--font-display); font-size: 15px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--gruen-text); }
.kosten-teaser__zahlen strong { grid-column: 2; grid-row: 1 / span 2; font-family: var(--font-display); font-size: clamp(22px, 2.3vw, 30px); font-weight: 700; color: var(--tinte); text-align: right; font-variant-numeric: tabular-nums; }
.kosten-teaser__zahlen em { font-size: 16px; font-style: normal; color: var(--tinte-2); }
/* Mit .faq-mehr davor, sonst überschreibt „.faq-mehr > p { margin: 0 }“ die automatischen Seitenränder und der Hinweis rutscht nach links */
.faq-mehr > .faq-hinweis { margin: 8px auto 0; max-width: 60ch; text-wrap: balance; }
@media (max-width: 760px) {
  .kosten-teaser__zahlen li { grid-template-columns: 1fr; }
  .kosten-teaser__zahlen strong { grid-column: 1; grid-row: auto; text-align: left; }
}

/* ---------- Abschluss-CTA mit Foto (alle Seiten, Aufbau wie der Hero) ---------- */
.fuss:has(> .abschluss) { border-top: 0; }
.abschluss { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(440px, 40vw, 580px); background: var(--oliv); color: #fff; }
.abschluss__bild { position: absolute; inset: 0; z-index: -2; }
.abschluss__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
.abschluss::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(270deg, rgba(34, 40, 28, .86) 0%, rgba(34, 40, 28, .7) 36%, rgba(34, 40, 28, .2) 58%, rgba(34, 40, 28, 0) 72%);
}
.abschluss .wrap { width: 100%; padding-top: clamp(56px, 6vw, 88px); padding-bottom: clamp(56px, 6vw, 88px); }
.abschluss__text { max-width: 580px; margin-left: auto; }
.abschluss__titel {
  margin: 0; font-family: var(--font-display); font-size: clamp(30px, 3.4vw, 46px); font-weight: 300; line-height: 1.1;
  letter-spacing: .04em; text-transform: uppercase; text-wrap: balance; text-shadow: 0 1px 4px rgba(0, 0, 0, .35);
}
.abschluss__titel b { display: block; font-weight: 700; color: var(--gruen); }
.abschluss .aktionen { margin-top: 30px; }
.abschluss + .wrap .fuss__grid { padding-top: clamp(48px, 5vw, 72px); }
@media (max-width: 960px) {
  .abschluss::before { background: linear-gradient(270deg, rgba(34, 40, 28, .88) 0%, rgba(34, 40, 28, .76) 55%, rgba(34, 40, 28, .3) 85%, rgba(34, 40, 28, .1) 100%); }
}
@media (max-width: 760px) {
  .abschluss { display: block; min-height: 0; }
  .abschluss__bild { position: relative; inset: auto; aspect-ratio: 4 / 3; }
  .abschluss__bild img { object-position: 30% 25%; }
  .abschluss::before { inset: 0 0 auto 0; height: 75vw; background: linear-gradient(180deg, rgba(47, 53, 39, 0) 50%, var(--oliv) 100%); }
  .abschluss .wrap { position: relative; margin-top: -56px; padding-top: 0; padding-bottom: 48px; }
  .abschluss__text { margin-left: 0; }
}

/* ---------- Anfrage „Sie haben Fragen?“ mit bildschirmbreitem Foto (Startseite, Aufbau wie der Hero) ---------- */
.anfrage { position: relative; isolation: isolate; }
.anfrage__bild { position: absolute; inset: 0; z-index: -2; }
.anfrage__bild img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 22%; } /* hoher Bereich: Gesicht über die Textspalte schieben, nicht hinter das Formular */
.anfrage::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(0deg, rgba(43, 43, 42, .92) 0%, rgba(43, 43, 42, .8) 30%, rgba(43, 43, 42, .4) 50%, rgba(43, 43, 42, .1) 68%, rgba(43, 43, 42, .1) 100%);
}
/* Text unten links, damit das Gesicht frei bleibt; das Formular steht rechts daneben */
.anfrage__grid { align-items: stretch; }
.anfrage__grid > div:first-child { display: flex; flex-direction: column; justify-content: flex-end; }
.anfrage .eyebrow, .anfrage .lead, .anfrage .kontaktwege li { text-shadow: 0 1px 4px rgba(0, 0, 0, .55); }
.anfrage .luecke { text-shadow: none; }
@media (max-width: 960px) {
  .anfrage__bild { position: relative; inset: auto; aspect-ratio: 16 / 10; }
  .anfrage::before { inset: 0 0 auto 0; height: 62.5vw; background: linear-gradient(180deg, rgba(87, 87, 86, 0) 55%, var(--grau) 100%); }
  .anfrage__grid > div:first-child { display: block; }
}
@media (max-width: 760px) {
  .anfrage__bild { aspect-ratio: 4 / 3; }
  .anfrage__bild img { object-position: 28% 25%; }
  .anfrage::before { height: 75vw; }
}

/* ---------- Herstellerlogos im Bereich Marken ---------- */
img.marke__logo { width: auto; min-width: 0; min-height: 0; padding: 0; }
.marke__logo--phonak { height: 34px; }
.marke__logo--starkey { height: 60px; }
/* Oticon: offizielles SVG (5.10.2026); ReSound, Unitron und Signia: aus der Kundenbroschüre – Vektordateien angefragt */
.marke__logo--oticon { height: 30px; }
.marke__logo--resound { height: 42px; }
.marke__logo--unitron { height: 32px; }
.marke__logo--signia { height: 38px; }

/* ---------- Formularversand über den Formmailer (api/formmailer.php) ---------- */
/* Falle für Bots: bleibt leer – nicht mit display:none verstecken, sonst füllen Bots sie nicht */
.falle { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.sende-fehler { grid-column: 1 / -1; margin: 0 0 16px; padding: 14px 16px; border: 2px solid var(--fehler); border-radius: var(--r-m); background: #fff; color: var(--fehler); font-size: 17px; font-weight: 700; }
.sende-fehler a { color: inherit; }

/* ---------- Marken mit Bild, Text und Preistabelle aus der Kundenbroschüre (Master, 29.09.2026) ---------- */
.marken-sprung ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 26px 0 0; padding: 0; list-style: none; }
.marken-sprung a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px solid var(--linie); border-radius: 999px;
  background: #fff; color: var(--tinte); font-family: var(--font-display); font-size: 17px; font-weight: 600; text-decoration: none;
}
.marken-sprung a:hover { border-color: var(--gruen-ui); color: var(--gruen-text); }
.marke { scroll-margin-top: calc(var(--kopf-h) + 8px); }
.marke:last-of-type { border-bottom: 1px solid var(--linie); }
/* Markenbild = Motiv aus der Broschüre mit Text und Preis-Störer: nie beschneiden, am Desktop mitlaufen lassen */
.marke__bild--motiv { align-items: flex-start; padding: clamp(24px, 4vw, 56px); }
.marke__bild--motiv img { position: sticky; top: calc(var(--kopf-h) + 24px); height: auto; object-fit: contain; border-radius: var(--r-m); box-shadow: var(--schatten-1); }
.marke__kopf { flex-wrap: wrap; }
.marke__ab {
  padding-left: 18px; border-left: 1px solid var(--linie); font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; color: var(--gruen-text);
}
/* Preistabelle wie in der Broschüre: Modell grün, Punkte = Leistungsstufe (1–5), Preis grau */
.preise-rahmen { margin: 8px 0 0; overflow-x: auto; }
.preise { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-family: var(--font-display); font-size: 17px; }
.preise caption { padding: 11px 18px; border-radius: 0 var(--r-l) 0 0; background: var(--gruen-ui-dunkel); color: #fff; font-size: 20px; font-weight: 700; text-align: left; }
.preise th, .preise td { height: 42px; padding: 0 14px; vertical-align: middle; white-space: nowrap; }
.preise th { background: var(--gruen-ui-dunkel); color: #fff; font-weight: 700; text-align: left; }
.preise td { border-left: 4px solid transparent; background-clip: padding-box; }
.preise .preise__stufe { padding: 0; }
.preise__preis { width: 100%; background: var(--papier); color: var(--tinte); font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.stufenpunkte { display: flex; gap: 4px; height: 42px; }
.stufenpunkte i { display: grid; place-items: center; width: 30px; background: var(--papier); }
.stufenpunkte i.an { background: var(--gruen-ui-dunkel); }
.stufenpunkte i.an::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #fff; }
.preise__neu {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: var(--r-s); background: #fff; color: var(--gruen-text);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; vertical-align: 2px;
}
.preise__fuss { margin: 10px 0 0; font-size: 15px; color: var(--tinte-2); }
.marken-fuss { padding-top: clamp(36px, 4vw, 56px); }
.marken-fuss p { max-width: 60ch; margin: 0 auto; color: var(--tinte-2); }
.marken-fuss .aktionen { margin-top: 16px; }
/* Anzeige verlinkt auf die Farben der Marke (hoergeraete-farben.html#farben-…); mitlaufen lässt jetzt der Link, nicht das Bild.
   overflow: hidden von .marke__bild verhinderte das Mitlaufen (sticky) – bei der Anzeige nicht nötig */
.marke__bild--motiv { overflow: visible; }
.marke__anzeige {
  position: sticky; top: calc(var(--kopf-h) + 24px); display: block; width: 100%; border-radius: var(--r-m);
  transition: transform var(--dauer);
}
.marke__bild--motiv .marke__anzeige img { position: static; width: 100%; transition: box-shadow var(--dauer); }
.marke__anzeige:hover { transform: translateY(-3px); }
.marke__anzeige:hover img { box-shadow: var(--schatten-2); }
@media (prefers-reduced-motion: reduce) {
  .marke__anzeige, .marke__anzeige img { transition: none; }
  .marke__anzeige:hover { transform: none; }
}
@media (max-width: 960px) {
  .marke__bild--motiv { min-height: 0; padding: 24px var(--gutter) 0; }
  .marke__bild--motiv img, .marke__anzeige { position: static; }
}
@media (max-width: 480px) {
  .preise { font-size: 15px; }
  .preise caption { padding: 10px 14px; font-size: 18px; }
  .preise th, .preise td { height: 38px; padding: 0 10px; }
  .preise th { white-space: normal; } /* bricht nur, wenn die Zeile sonst nicht passt */
  .preise td { border-left-width: 3px; }
  .preise__preis { width: auto; }
  .preise .preise__stufe { padding: 0; }
  .stufenpunkte { gap: 3px; height: 38px; }
  .stufenpunkte i { width: 17px; }
  .stufenpunkte i.an::after { width: 5px; height: 5px; }
}

/* Schmale Handys: lange Button-Texte („Katalog herunterladen“, „Kosten & Beiträge im Überblick“) umbrechen statt über den Rand zu ragen */
@media (max-width: 480px) {
  .aktionen .btn { padding: 10px 20px; white-space: normal; text-align: center; }
  .katalog > *, .kosten-teaser__split > * { min-width: 0; }
}

/* ---------- Katalog: Deckblatt der Kundenbroschüre statt des gezeichneten Stellvertreters ---------- */
.deckblatt { display: block; height: auto; border-radius: 3px; box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 12px 28px rgba(40, 40, 30, .18); }
.katstreifen .deckblatt { width: 78px; flex: none; }
.katalog__cover .deckblatt { width: min(240px, 100%); transform: rotate(-3deg); }

/* ---------- All-inklusive-Service unter den Vorteilen ---------- */
.inklusive { max-width: 1000px; margin: clamp(36px, 4vw, 56px) auto 0; padding: clamp(26px, 4vw, 44px); border-radius: var(--r-l); background: var(--gruen-hauch); }
.inklusive__titel { margin: 0; font-size: clamp(22px, 2vw, 26px); font-weight: 700; color: var(--tinte); }
.inklusive .haken--liste { margin: 20px 0 0; }
.inklusive .haken li { font-weight: 400; }
.inklusive__zusatz { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid rgba(74, 131, 24, .25); font-size: 17px; color: var(--tinte-2); }

/* ---------- Apps der Hersteller für die Fernanpassung ---------- */
.apps-karten { margin-top: clamp(56px, 6vw, 88px); scroll-margin-top: calc(var(--kopf-h) + 16px); }
.apps-karten__titel { margin: 0 0 22px; font-size: clamp(22px, 2vw, 26px); font-weight: 700; color: var(--tinte); }
.apps-karten ul { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.app-karte { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 22px 22px 20px; border: 1px solid var(--linie); border-radius: var(--r-l); background: #fff; }
/* Logos in einer gleich hohen Zeile (46px), damit die App-Namen auf einer Linie stehen */
.app-karte__logo { --h: 28px; width: auto; height: var(--h); margin: calc((46px - var(--h)) / 2) 0; }
.app-karte__logo--resound { --h: 34px; }
.app-karte__logo--unitron { --h: 26px; }
.app-karte__logo--starkey { --h: 46px; }
.app-karte__logo--signia { --h: 32px; }
.app-karte__name { margin: 0; font-family: var(--font-display); font-size: 20px; font-weight: 700; line-height: 1.3; color: var(--tinte); }
.app-karte__hinweis { display: block; font-size: 15px; font-weight: 600; color: var(--tinte-2); }
.app-karte__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.app-karte__links a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--gruen-ui); border-radius: 999px;
  color: var(--gruen-text); font-family: var(--font-display); font-size: 16px; font-weight: 700; text-decoration: none;
}
.app-karte__links a:hover { background: var(--gruen-hauch); color: var(--gruen-ui-dunkel); }
/* Sprung aus dem Marken-Bereich („App zur Fernanpassung“): angesprungene Karte grün hervorheben */
.app-karte:target { border-color: var(--gruen-ui); box-shadow: 0 0 0 3px var(--gruen-hauch), var(--schatten-1); }
.apps-karten .klein { margin: 16px 0 0; }
@media (max-width: 960px) {
  .apps-karten ul { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .apps-karten ul { grid-template-columns: 1fr; }
}

/* ---------- Agentur-Hinweis in der letzten Zeile des Footers (alle Seiten) ---------- */
.fuss__agentur a { font-weight: 600; text-decoration: none; white-space: nowrap; }
.fuss__agentur a:hover { color: var(--gruen-text); text-decoration: underline; }

/* ---------- Marken: Link zur Seite „Hörgeräte-Farben“ unter der Preistabelle ---------- */
.marke__farben { margin: 10px 0 0; }

/* ---------- Seite auf 1920 px boxen (alle Seiten) ----------
   Auf sehr breiten Bildschirmen enden Kopfzeile, Abschnitte und Footer bei 1920 px.
   Bildschirmbreit bleiben nur der Hero (Startseite, Ratgeber) und der Foto-CTA am Ende
   (Anfrage-Bereich der Startseite, Abschluss im Footer der Unterseiten).
   Weisse Fläche von <main> und Papier-Fläche des Footers als 1920 px breite Hintergrundbahn,
   damit auch Seiten ohne Abschnitte (Ratgeber-Text, Rechtsseiten) gleich breit wirken. */
:root { --box: 1920px; --rand: #DCDCD5; }
@media (min-width: 1921px) {
  body { background: var(--rand); }
  .topbar, .kopf, main > section:not(.hero):not(.anfrage) { max-width: var(--box); margin-inline: auto; }
  main { background: linear-gradient(#fff, #fff) top center / var(--box) 100% no-repeat; }
  .fuss {
    border-top: 0;
    background:
      linear-gradient(var(--linie), var(--linie)) top center / var(--box) 1px no-repeat,
      linear-gradient(var(--papier), var(--papier)) top center / var(--box) 100% no-repeat;
  }
}