/* =========================================================
   FIND CLEAN – Stylesheet
   Markenfarben & Schriften laut Markenauftritt (Logo / Icons /
   Farben, Schrift & Elemente). Alles in rem, damit die
   Schriftgrößen-Schalter die ganze Seite mitskalieren.
   ========================================================= */

/* ---------- Schriften (lokal gehostet, DSGVO-freundlich) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url("../fonts/cormorant-garamond-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Roboto Condensed";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/roboto-condensed-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Enriqueta";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/enriqueta-400-latin.woff2") format("woff2");
}
@font-face {
  font-family: "Enriqueta";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/enriqueta-600-latin.woff2") format("woff2");
}

/* ---------- Design-Tokens ---------- */
:root {
  --black: #111111;
  --anthracite: #1a1a1a;
  --grey: #555555;
  --text-soft: #3d3d3d;
  --line: #ddddda;
  --line-strong: #8a8a8a;
  --paper: #f4f4f2;
  --white: #ffffff;
  --on-dark-soft: #d6d6d6;
  --on-dark-line: #3a3a3a;
  --focus: #0b57d0;
  --ok: #1d6b35;
  --warn-bg: #fff4c2;

  --font-brand: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-head: "Roboto Condensed", "Arial Narrow", Arial, sans-serif;
  --font-body: "Enriqueta", Georgia, "Times New Roman", serif;

  --wrap: 75rem;
  --gutter: 1.5rem;
  --tap: 3.25rem; /* Mindestgröße für Schaltflächen (52 px) */
}

/* Schriftgrößen-Stufen (per Schalter im Kopfbereich) */
html { font-size: 100%; }
html[data-textsize="1"] { font-size: 115%; }
html[data-textsize="2"] { font-size: 130%; }

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-body);
  font-size: 1.1875rem;          /* 19 px – gut lesbar für ältere Menschen */
  line-height: 1.65;
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
h1, h2, h3 { font-family: var(--font-head); line-height: 1.15; margin: 0; }
h1 { font-weight: 500; font-size: clamp(2.125rem, 5vw, 3.25rem); }
h2 { font-weight: 500; font-size: clamp(1.875rem, 3.6vw, 2.5rem); }
h3 { font-weight: 700; font-size: 1.3125rem; }
p { margin: 0; }
a { color: var(--black); text-underline-offset: 0.18em; }
a:hover { color: var(--grey); }
strong { font-weight: 600; }

:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.on-dark :focus-visible, .on-dark:focus-visible { outline-color: #8ab4ff; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 5.5rem 0; }
.section--paper { background: var(--paper); }
.section--dark { background: var(--black); color: var(--white); }
.section--dark a:not(.btn) { color: var(--white); }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: 1rem; top: -10rem; z-index: 100;
  background: var(--white); color: var(--black); padding: 0.75rem 1.25rem;
  font-family: var(--font-head); font-size: 1.125rem; border: 2px solid var(--black);
}
.skip-link:focus { top: 1rem; }

.icon { width: 2.75rem; height: 2.75rem; flex: 0 0 auto; fill: none; stroke: currentColor;
  stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.icon--sm { width: 1.25rem; height: 1.25rem; stroke-width: 1.7; }
.icon--md { width: 2rem; height: 2rem; }

.eyebrow {
  font-family: var(--font-head);
  font-size: 0.9375rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--grey);
}
.section--dark .eyebrow, .on-dark .eyebrow { color: #cfcfcf; }
.lead { font-size: 1.1875rem; line-height: 1.7; color: var(--text-soft); max-width: 38rem; }
.section--dark .lead { color: var(--on-dark-soft); }

.section-head {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  gap: 1rem 3rem; margin-bottom: 2.5rem;
}
.section-head__title { display: flex; flex-direction: column; gap: 0.625rem; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.625rem;
  min-height: var(--tap); padding: 0.5rem 1.625rem;
  font-family: var(--font-head); font-weight: 500; font-size: 1.1875rem; letter-spacing: 0.02em;
  text-decoration: none; text-align: center; line-height: 1.2;
  border: 2px solid var(--black); background: var(--black); color: var(--white);
  cursor: pointer;
}
.btn:hover { background: #333; border-color: #333; color: var(--white); }
.btn--outline { background: transparent; color: var(--black); }
.btn--outline:hover { background: var(--black); color: var(--white); }
.btn--light { background: var(--white); color: var(--black); border-color: var(--white); }
.btn--light:hover { background: #e6e6e6; border-color: #e6e6e6; color: var(--black); }
.btn--ghost-light { background: transparent; color: var(--white); border-color: var(--white); }
.btn--ghost-light:hover { background: var(--white); color: var(--black); }
.btn--big { min-height: 3.75rem; font-size: 1.3125rem; padding: 0.5rem 2rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 0.875rem; }

/* ---------- Logo (vektorisiert aus photos/Logo.jfif) ----------
   Größen in px, damit das Logo beim Schrift-Vergrößern (A/A/A) nicht aus dem Bild läuft. */
.logo { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: inherit; min-width: 0; }
.logo:hover { color: inherit; }
.logo__mark { display: block; width: auto; height: 74px; flex: 0 0 auto; }
.logo__text { display: flex; flex-direction: column; gap: 9px; min-width: 0; }
.logo__word { display: block; width: 268px; max-width: 100%; height: auto; }
.logo__tag { font-family: var(--font-head); font-size: 13px; letter-spacing: 0.24em; color: var(--grey); white-space: nowrap; }

.logo-full { display: inline-block; border: 0 !important; }
.logo-full img { display: block; width: 150px; height: auto; }

.care__brand { display: inline-flex; align-items: center; gap: 14px; }
.care__brand img { display: block; width: auto; height: 64px; }
.care__brand span { font-family: var(--font-head); font-size: 1.375rem; font-weight: 500; letter-spacing: 0.3em; }

/* ---------- Top-Leiste ---------- */
.topbar { background: var(--black); color: var(--white); font-family: var(--font-head); font-size: 1rem; }
.topbar a { color: var(--white); text-decoration: none; }
.topbar a:hover { text-decoration: underline; color: var(--white); }
.topbar__inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0.5rem 1.5rem; padding-top: 0.5rem; padding-bottom: 0.5rem; }
.topbar__contact { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; }
.topbar__contact a { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2rem; }

/* Schriftgrößen-Schalter */
.textsize { display: flex; align-items: center; gap: 0.5rem; }
.textsize__label { color: #cfcfcf; }
.textsize__btn {
  min-width: 2.5rem; min-height: 2.25rem; padding: 0 0.5rem;
  background: transparent; color: var(--white); border: 1px solid #6a6a6a;
  font-family: var(--font-head); font-weight: 700; line-height: 1; cursor: pointer;
}
.textsize__btn[data-size="0"] { font-size: 0.9375rem; }
.textsize__btn[data-size="1"] { font-size: 1.125rem; }
.textsize__btn[data-size="2"] { font-size: 1.375rem; }
.textsize__btn[aria-pressed="true"] { background: var(--white); color: var(--black); border-color: var(--white); }

/* ---------- Kopfbereich & Navigation ---------- */
.site-header { border-bottom: 1px solid #e2e2df; background: var(--white); }
.site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; padding-top: 1.125rem; padding-bottom: 1.125rem; }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; font-family: var(--font-head); font-size: 1.1875rem; }
.nav a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 0.75rem; text-decoration: none; border-bottom: 3px solid transparent; }
.nav a:hover { border-bottom-color: #bdbdbd; color: var(--black); }
.nav a[aria-current="page"] { border-bottom-color: var(--black); font-weight: 700; }
.nav .btn { margin-left: 0.5rem; border-bottom-width: 2px; }
.nav .btn:hover { color: var(--white); }

@media (max-width: 860px) {
  .site-header__inner { flex-direction: column; align-items: flex-start; }
  .nav { width: 100%; gap: 0.25rem; }
  .nav a { padding: 0 0.625rem; }
  .nav .btn { display: none; } /* mobil übernimmt die Anruf-Leiste unten */
}

/* ---------- Hero ---------- */
.hero { background: var(--paper); padding: 3.5rem 0 3rem; }
.hero__frame { display: flex; align-items: stretch; min-height: 30rem; }
.hero__panel {
  flex: 1 1 auto; min-width: 0; background: var(--anthracite); color: var(--white);
  padding: 3.5rem 3rem; display: flex; flex-direction: column; justify-content: center; gap: 1.5rem;
}
.hero__panel p { font-size: 1.1875rem; line-height: 1.7; color: #e0e0e0; max-width: 38rem; }
.hero__panel h1 { max-width: 44rem; }
.hero__hint { font-size: 1.0625rem !important; color: #cfcfcf !important; }
.hero__hint a { color: var(--white); }
.v-strip-white { width: 5px; background: var(--white); flex: 0 0 auto; }
.v-strip-dark { width: 3px; background: var(--anthracite); flex: 0 0 auto; }
.hero__brand { flex: 0 0 10.5rem; background: var(--white); display: flex; align-items: center; justify-content: center; }
.hero__brand span {
  writing-mode: vertical-rl; font-family: var(--font-brand); font-weight: 600;
  font-size: 4rem; letter-spacing: 0.16em; color: var(--anthracite); white-space: nowrap;
}
.page-hero .hero__frame { min-height: 0; }
.page-hero .hero__panel { padding: 3rem; }
.page-hero .hero__brand span { font-size: 2.75rem; }
.hero__brand--logo img { display: block; width: 78%; height: auto; }

@media (max-width: 760px) {
  .hero { padding: 0 0 2rem; }
  .hero .wrap { padding: 0; }
  .hero__panel, .page-hero .hero__panel { padding: 2.5rem var(--gutter); }
  .hero__brand, .v-strip-white, .v-strip-dark { display: none; }
  .hero__frame { min-height: 0; }
  .hero .trust { padding: 0 var(--gutter); }
}

.trust { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 1rem 1.5rem; margin-top: 2rem; list-style: none; padding: 0; }
.trust li { display: flex; align-items: center; gap: 0.875rem; font-family: var(--font-head); font-size: 1.1875rem; }

/* ---------- Karten / Raster ---------- */
.grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.card { border: 1px solid var(--line); padding: 1.75rem; display: flex; flex-direction: column; gap: 0.875rem; background: var(--white); }
.card p { font-size: 1.0625rem; line-height: 1.6; color: var(--text-soft); }
.card--dark { background: var(--black); color: var(--white); border-color: var(--black); justify-content: space-between; text-decoration: none; }
.card--dark:hover { background: #2a2a2a; color: var(--white); }
.card--dark p, .card--dark span { color: #e6e6e6; }
.card__more { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 1.0625rem; }

/* Dunkles Raster mit Haarlinien (Alltagshilfe) */
.care { display: flex; flex-wrap: wrap; gap: 3.5rem; }
.care__intro { flex: 1 1 22rem; min-width: 0; display: flex; flex-direction: column; gap: 1.25rem; }
.care__grid {
  flex: 1 1 32rem; min-width: 0; align-self: flex-start;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1px; background: var(--on-dark-line); border: 1px solid var(--on-dark-line);
}
.care__item { background: var(--black); padding: 1.625rem; display: flex; flex-direction: column; gap: 0.75rem; }
.care__item p { font-size: 1.0625rem; line-height: 1.6; color: #cfcfcf; }
.note-box { border: 1px solid #4a4a4a; padding: 1.25rem; font-size: 1.0625rem; line-height: 1.6; color: #e4e4e4; }

/* Schritte */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 2rem; list-style: none; padding: 0; margin: 0; }
.steps li { display: flex; flex-direction: column; gap: 0.875rem; border-top: 2px solid var(--black); padding-top: 1.375rem; }
.steps__num { font-family: var(--font-brand); font-weight: 600; font-size: 3.5rem; line-height: 1; }
.steps p { font-size: 1.125rem; color: var(--text-soft); }

/* Zweispaltig */
.split { display: flex; flex-wrap: wrap; gap: 3.5rem; }
.split > * { flex: 1 1 22rem; min-width: 0; }
.stack { display: flex; flex-direction: column; gap: 1.25rem; }
.stack--sm { gap: 0.75rem; }

/* Doppellinien-Band (Erkennungszeichen) */
.band { display: flex; align-items: stretch; border: 1px solid var(--line); }
.band__dark { flex: 1 1 auto; min-width: 0; background: var(--anthracite); color: var(--white); padding: 2.5rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 2.5rem; }
.band__dark h2 { max-width: 34rem; }
.band__dark p { color: #dadada; margin-top: 0.75rem; max-width: 36rem; }
.band__light { flex: 0 0 7rem; background: var(--white); }
@media (max-width: 760px) {
  .band__light, .band .v-strip-white, .band .v-strip-dark { display: none; }
  .band__dark { padding: 2rem var(--gutter); }
}

/* Großer Telefon-Link */
.phone-big {
  display: inline-flex; align-items: center; gap: 0.875rem;
  font-family: var(--font-head); font-weight: 700; font-size: clamp(1.75rem, 4vw, 2.375rem);
  text-decoration: none; line-height: 1.1;
}
.phone-big .icon { width: 2.5rem; height: 2.5rem; }

/* Kontaktliste */
.contact-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1.125rem; }
.contact-list li { display: flex; align-items: flex-start; gap: 0.875rem; font-size: 1.1875rem; }
.contact-list .icon { width: 1.875rem; height: 1.875rem; margin-top: 0.1rem; }
.contact-list a { text-decoration: none; border-bottom: 1px solid currentColor; }
.contact-list small { display: block; font-size: 1rem; color: var(--grey); }

/* Info-Kasten */
.panel { background: var(--white); border: 1px solid var(--line); padding: 2rem; }
.panel--paper { background: var(--paper); }
.panel--dark { background: var(--black); color: var(--white); border-color: var(--black); }
.panel--dark a:not(.btn) { color: var(--white); }

/* Werte (Über uns) */
.values { display: grid; grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); gap: 1.25rem; }
.values .card h3 { display: flex; align-items: center; gap: 0.75rem; }
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.875rem; }
.checklist li { display: flex; gap: 0.875rem; align-items: flex-start; }
.checklist .icon { width: 1.75rem; height: 1.75rem; margin-top: 0.15rem; }

.person { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; }
.person__mono {
  width: 6rem; height: 6rem; flex: 0 0 auto; background: var(--black); color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-brand); font-weight: 600; font-size: 2.75rem; letter-spacing: 0.06em;
}

/* ---------- FAQ ---------- */
.faq { display: flex; flex-direction: column; border-top: 1px solid var(--black); }
.faq details { border-bottom: 1px solid var(--line-strong); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  min-height: 4rem; padding: 1rem 0; font-family: var(--font-head); font-weight: 700; font-size: 1.3125rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-head); font-weight: 400; font-size: 2rem; line-height: 1; flex: 0 0 auto; }
.faq details[open] summary::after { content: "–"; }
.faq details > div { padding: 0 0 1.5rem; max-width: 46rem; color: var(--text-soft); }

/* ---------- Formular ---------- */
.form { background: var(--white); border: 1px solid var(--line); padding: 2.25rem; display: flex; flex-direction: column; gap: 1.75rem; }
.form fieldset { border: 0; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; min-width: 0; }
.form legend, .form .label { font-family: var(--font-head); font-weight: 700; font-size: 1.1875rem; padding: 0; margin-bottom: 0.25rem; }
.form .hint { font-size: 1rem; color: var(--grey); }
.form .req { font-weight: 400; color: var(--grey); font-size: 1rem; }
.fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1.25rem; }
.field { display: flex; flex-direction: column; gap: 0.375rem; }
.field label { font-family: var(--font-head); font-size: 1.125rem; }
.field input, .field textarea, .field select {
  min-height: var(--tap); width: 100%; border: 1.5px solid var(--line-strong); background: var(--white);
  padding: 0.5rem 0.875rem; font-family: var(--font-body); font-size: 1.125rem; color: var(--black); border-radius: 0;
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.5; }
.field input:focus, .field textarea:focus { border-color: var(--black); }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #b3261e; border-width: 2px; }
.field__error { color: #b3261e; font-size: 1rem; font-family: var(--font-head); }

/* Große Auswahl-Kacheln (Checkbox/Radio) */
.choices { display: flex; flex-wrap: wrap; gap: 0.625rem; }
.choice { position: relative; }
.choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.choice span {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: var(--tap); padding: 0.375rem 1.125rem;
  border: 1.5px solid var(--black); background: var(--white); color: var(--black);
  font-family: var(--font-head); font-size: 1.125rem; cursor: pointer; user-select: none;
}
.choice span::before {
  content: ""; width: 1.125rem; height: 1.125rem; border: 1.5px solid currentColor; flex: 0 0 auto;
}
.choice input[type="radio"] + span::before { border-radius: 50%; }
.choice input:checked + span { background: var(--black); color: var(--white); }
.choice input:checked + span::before {
  background: var(--white);
  box-shadow: inset 0 0 0 3px var(--black);
}
.choice input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 3px; }
.choice span:hover { background: #ececea; }
.choice input:checked + span:hover { background: #333; }

.consent { display: flex; gap: 0.875rem; align-items: flex-start; font-size: 1.0625rem; }
.consent input { width: 1.625rem; height: 1.625rem; flex: 0 0 auto; margin-top: 0.15rem; accent-color: var(--black); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { padding: 1.25rem 1.5rem; border: 2px solid var(--black); font-size: 1.125rem; }
.form-status h3 { margin-bottom: 0.5rem; }
.form-status--ok { border-color: var(--ok); background: #eef7f0; }
.form-status--fallback { background: var(--paper); }
.form-status .btn-row { margin-top: 1rem; }
.form-status[hidden] { display: none; }

/* ---------- Hilfsklassen ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.h3 { font-size: 1.3125rem; font-weight: 700; }
[hidden] { display: none !important; }

/* ---------- Bewertungsformular ---------- */
.feedback { max-width: 46rem; display: flex; flex-direction: column; gap: 2rem; }
.stars-input { display: flex; gap: 0.25rem; }
.stars-input label { position: relative; cursor: pointer; line-height: 1; }
.stars-input input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stars-input label > span[aria-hidden] {
  display: inline-flex; align-items: center; justify-content: center; width: 3.75rem; height: 3.75rem;
  font-size: 3.25rem; color: #c9c9c5; transition: color 0.1s, transform 0.1s;
}
.stars-input label.is-on > span[aria-hidden] { color: var(--black); }
.stars-input label:hover > span[aria-hidden] { transform: scale(1.08); }
.stars-input input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.stars-text { font-family: var(--font-head); font-size: 1.1875rem; min-height: 1.5em; }

/* ---------- Kundenbewertungen (Slider) ---------- */
.reviews { display: flex; flex-direction: column; gap: 1.25rem; }
.reviews__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 1.25rem) / 3); column-gap: 1.25rem;
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  scrollbar-width: none; padding: 0.25rem;
}
.reviews__track::-webkit-scrollbar { display: none; }
.reviews__track:focus-visible { outline: 3px solid var(--white); outline-offset: 4px; }
.review {
  scroll-snap-align: start; margin: 0; background: var(--anthracite); border: 1px solid #3a3a3a;
  padding: 1.75rem; display: flex; flex-direction: column; gap: 1rem; min-width: 0;
}
.review__stars { font-size: 1.75rem; letter-spacing: 0.08em; line-height: 1; color: var(--white); margin: 0; }
.review__stars-empty { color: #5a5a5a; }
.review__text { margin: 0; flex: 1 1 auto; }
.review__text p { font-size: 1.125rem; line-height: 1.6; color: #e6e6e6; overflow-wrap: anywhere; }
.review__name { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; display: flex; flex-direction: column; gap: 0.125rem; }
.review__name small { font-weight: 400; font-size: 1rem; color: #bdbdbd; }
.reviews__nav { display: flex; align-items: center; gap: 1rem; }
.reviews__btn {
  width: var(--tap); height: var(--tap); display: inline-flex; align-items: center; justify-content: center;
  background: var(--white); color: var(--black); border: 2px solid var(--white); cursor: pointer;
}
.reviews__btn:hover { background: #dcdcdc; }
.reviews__btn:disabled { background: transparent; color: #6a6a6a; border-color: #4a4a4a; cursor: default; }
.reviews__count { font-family: var(--font-head); font-size: 1.125rem; min-width: 7rem; text-align: center; }
.reviews__note { font-size: 1rem; color: #bdbdbd; max-width: 46rem; }
@media (max-width: 1000px) { .reviews__track { grid-auto-columns: calc((100% - 1.25rem) / 2); } }
@media (max-width: 640px)  { .reviews__track { grid-auto-columns: 100%; } .review { padding: 1.5rem; } }
@media print { #bewertungen .reviews__nav { display: none; } }

/* ---------- Rechtstexte ---------- */
.legal { max-width: 48rem; }
.legal h2 { font-size: 1.75rem; margin: 2.5rem 0 0.875rem; }
.legal h3 { font-size: 1.25rem; margin: 1.75rem 0 0.5rem; }
.legal p, .legal ul { margin: 0 0 1rem; }
.legal ul { padding-left: 1.25rem; }
.todo { background: var(--warn-bg); padding: 0 0.25rem; outline: 1px dashed #b38f00; }
.todo-box { background: var(--warn-bg); border: 2px dashed #b38f00; padding: 1rem 1.25rem; margin-bottom: 2rem; font-size: 1.0625rem; }

/* ---------- Fußbereich ---------- */
.site-footer { background: var(--black); color: var(--white); padding: 3.5rem 0 2.5rem; }
.site-footer a:not(.btn) { color: var(--white); }
.footer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 2rem 3rem; }
.footer__title { font-family: var(--font-head); font-weight: 700; font-size: 1.125rem; margin-bottom: 0.75rem; letter-spacing: 0.04em; }
.footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; font-size: 1.0625rem; color: #dcdcdc; }
.footer__list a { text-decoration: none; border-bottom: 1px solid #7a7a7a; }
.footer__list a:hover { border-bottom-color: var(--white); color: var(--white); }
.footer__bottom { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--on-dark-line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; font-size: 1rem; color: #bdbdbd; }

/* ---------- Mobile Anruf-Leiste ---------- */
.callbar { display: none; }
@media (max-width: 860px) {
  body { padding-bottom: 4.75rem; }
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 0.625rem 0.75rem calc(0.625rem + env(safe-area-inset-bottom));
    background: var(--white); border-top: 2px solid var(--black);
  }
  .callbar .btn { padding: 0.5rem 0.75rem; font-size: 1.125rem; }
  .topbar__contact { display: none; }
  .topbar__inner { justify-content: flex-end; }
}

/* ---------- Kleine Bildschirme ---------- */
@media (max-width: 520px) {
  :root { --gutter: 1rem; }
  .section { padding: 3.75rem 0; }
  .logo { gap: 10px; }
  .logo__mark { height: 58px; }
  .logo__word { width: 210px; }
  .logo__tag { font-size: 11px; letter-spacing: 0.18em; }
  .form { padding: 1.5rem var(--gutter); }
  .panel { padding: 1.5rem; }
  .btn-row .btn { width: 100%; }
}

/* ---------- Druck ---------- */
@media print {
  .topbar, .callbar, .nav, .skip-link, .form, .hero__brand, .v-strip-white, .v-strip-dark { display: none !important; }
  body { padding: 0; font-size: 12pt; }
  .hero__panel, .section--dark, .site-footer, .band__dark { background: #fff !important; color: #000 !important; }
  .logo-full img, .care__brand img { filter: invert(1); } /* weiße Logos auf weißem Papier sichtbar machen */
}

/* Lange Wörter/Pfade dürfen umbrechen (wichtig bei großer Schrift auf dem Handy) */
.legal, .todo-box, .contact-list, .footer__list { overflow-wrap: anywhere; }
.callbar { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.callbar .btn { min-width: 0; }