/* ==========================================================================
   H.F. Transporte – Umzüge Fittkau · Stylesheet der öffentlichen Website
   Ein einziges Stylesheet, kein Framework, keine externen Schriften.
   Aufbau: 1 Variablen/Reset · 2 Typografie · 3 Layout-Helfer · 4 Buttons
           5 Header/Navigation · 6 Hero/Seitenkopf · 7 Inhaltsbausteine
           8 Formulare · 9 Footer · 10 Sonstiges/Barrierefreiheit · 11 Einfache Sprache
           12 Barrierefrei (Knopf, Dialog, Schriftstufen, Farbdarstellungen, Lesefreundlich, Bewegung aus,
              Lese-Lineal, Vorlesen, Windows-Kontrastdesign)
   ========================================================================== */

/* 1 Variablen & Reset ------------------------------------------------------ */
:root {
  --orange: #F0641E;
  --orange-hover: #F5793D;
  --orange-deep: #B8470C;   /* 4,8:1 auf Hellgrau, 5,3:1 auf Weiß (WCAG AA auch für kleine Schrift) */
  --orange-soft: #FDEBDF;
  --link: #B8470C;
  --dark: #1B1B1B;
  --dark-2: #262626;
  --dark-3: #333333;
  --light: #F4F4F2;
  --light-2: #E9E9E6;
  --line: #DEDEDA;
  --text: #222222;
  --muted: #5C5C59;
  --white: #FFFFFF;
  --focus: #1B5FBF;
  --whatsapp: #25D366;       /* WhatsApp-Grün; dunkler Text darauf 9,4:1 */
  --whatsapp-hover: #4BE083;
  --error-bg: #FBE9E7;
  --error-fg: #8A1F11;
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --container: 1140px;
  --gutter: 1rem;
  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 8px 24px rgba(27, 27, 27, .08);
  --shadow-hover: 0 2px 4px rgba(0, 0, 0, .06), 0 14px 32px rgba(27, 27, 27, .14);
  --header-h: 72px;
  --transition: .18s ease;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  font-family: var(--font);
  font-size: 100%;
  line-height: 1.6;
  color: var(--text);
  background: var(--white);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 1rem);
}

body {
  margin: 0;
  font-size: 1.0625rem;
  background: var(--white);
  overflow-x: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.site-main { flex: 1 0 auto; outline: none; }

img,
picture,
video,
svg { display: block; max-width: 100%; }

img { height: auto; }

picture img { width: 100%; }

ul,
ol { margin: 0; padding: 0; }

.icon {
  width: 1.25em;
  height: 1.25em;
  flex: 0 0 auto;
  vertical-align: -.25em;
}

.icon--lg { width: 2rem; height: 2rem; }

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

/* 2 Typografie ------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 .6em;
  line-height: 1.18;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
  hyphens: auto;              /* lange deutsche Wörter (Umzugsunternehmen) sauber trennen statt hart umbrechen */
}

h1 { font-size: clamp(1.85rem, 1.35rem + 2vw, 2.4rem); }
h2 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.9rem); }
h3 { font-size: 1.2rem; }
h4 { font-size: 1.05rem; }

p { margin: 0 0 1.1em; }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: from-font; text-underline-offset: .12em; }
a:hover { color: var(--orange-deep); }

strong { font-weight: 700; }

.eyebrow {
  display: inline-block;
  margin: 0 0 .5rem;
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--orange-deep);
}

.eyebrow--light { color: var(--orange); text-shadow: 0 1px 6px rgba(0, 0, 0, .6); }

.lead { font-size: 1.15rem; color: var(--dark-3); max-width: 42em; }
.lead p:last-child { margin-bottom: 0; }

.prose > :first-child { margin-top: 0; }
.prose > :last-child { margin-bottom: 0; }
.prose h2 { margin-top: 1.6em; }
.prose h3 { margin-top: 1.4em; }
.prose h4 { margin-top: 1.2em; }
.prose ul,
.prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.prose li { margin: 0 0 .4em; }
.prose li::marker { color: var(--orange); font-weight: 700; }
.prose a { font-weight: 600; }
/* Absatz, der nur aus einem Link besteht (hf_md setzt .p-cta) → Button. Nicht für Mail/Tel/PDF. */
.prose .p-cta { margin-top: 1.25em; }
.prose .p-cta > a:not([href^="mailto:"]):not([href^="tel:"]):not([href$=".pdf"]) {
  display: inline-block; padding: .7em 1.3em; border-radius: var(--radius-sm); background: var(--orange); color: var(--dark);
  text-decoration: none; font-weight: 700;
}
.prose .p-cta > a:not([href^="mailto:"]):not([href^="tel:"]):not([href$=".pdf"]):hover { background: var(--orange-hover); color: var(--dark); }
/* PDF-Links erkennbar machen */
.prose a[href$=".pdf"]::after,
.downloads__link[type="application/pdf"] .downloads__title::after { content: " (PDF)"; font-weight: 400; font-size: .85em; color: var(--muted); white-space: nowrap; }
.prose a.has-pdf-label::after { content: none; }

/* 3 Layout-Helfer ---------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.container--narrow { max-width: calc(800px + 2 * var(--gutter)); }

.section { padding: 3rem 0; }
.section--alt { background: var(--light); }
.section--intro { padding-bottom: 1rem; }

.section__head { max-width: 46em; margin-bottom: 2rem; }
.section__head h2 { margin-bottom: .4em; }
.section__head h2::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 4px;
  margin-top: .6em;
  border-radius: 2px;
  background: var(--orange);
}

@media (min-width: 40em) {
  :root { --gutter: 1.5rem; }
  .section { padding: 4rem 0; }
}

@media (min-width: 72em) {
  .section { padding: 5rem 0; }
}

/* 4 Buttons ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .75em 1.35em;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition), transform var(--transition), box-shadow var(--transition);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn .icon { width: 1.15em; height: 1.15em; }

.btn--primary { background: var(--orange); border-color: var(--orange); color: var(--dark); }
.btn--primary:hover { background: var(--orange-hover); border-color: var(--orange-hover); color: var(--dark); box-shadow: 0 6px 18px rgba(240, 100, 30, .35); }

.btn--dark { background: var(--dark); border-color: var(--dark); color: var(--white); }
.btn--dark:hover { background: var(--dark-3); border-color: var(--dark-3); color: var(--white); }

.btn--light { background: var(--white); border-color: var(--white); color: var(--dark); }
.btn--light:hover { background: var(--light); border-color: var(--light); color: var(--dark); }

.btn--ghost { background: transparent; border-color: rgba(255, 255, 255, .7); color: var(--white); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--white); color: var(--white); }

.btn--ghost-dark { background: transparent; border-color: var(--dark); color: var(--dark); }
.btn--ghost-dark:hover { background: var(--dark); color: var(--white); }

.btn--lg { padding: .9em 1.6em; font-size: 1.05rem; }

/* 5 Header & Navigation ---------------------------------------------------- */
/* Header bleibt beim Scrollen oben (die Topbar davor scrollt weg); scroll-padding-top oben passt dazu */
.site-header { position: sticky; top: 0; z-index: 50; }

.topbar {
  background: var(--dark);
  color: #E8E8E4;
  font-size: .875rem;
}

.topbar__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .25rem 1.5rem;
  min-height: 2.4rem;
  padding-top: .35rem;
  padding-bottom: .35rem;
}

.topbar__list {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem 1.5rem;
  list-style: none;
}

.topbar__list a,
.topbar__hours {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin: 0;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.topbar__list a:hover { color: var(--white); text-decoration: underline; }
.topbar .icon { color: var(--orange); width: 1.1em; height: 1.1em; }

@media (max-width: 71.99em) {
  .topbar__list a { min-height: 44px; padding: .35rem 0; }
}

@media (max-width: 39.99em) {
  .topbar__hours { display: none; }
  /* Auf kleinen Displays nur die Festnetznummer (eine Zeile); Mobil und E-Mail stehen im Menü, Footer und Kontaktkasten */
  .topbar__list li:nth-child(2),
  .topbar__list li:nth-child(3) { display: none; }
  .topbar__inner { padding-top: 0; padding-bottom: 0; }
}

.header-main {
  position: relative;
  z-index: 40;
  background: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .05);
}

.header-main__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
  flex-wrap: wrap;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: .6rem 0;
  text-decoration: none;
  color: var(--dark);
}

.logo__picture img { width: auto; height: 60px; max-width: 240px; object-fit: contain; }

.logo__text { font-weight: 800; font-size: 1.15rem; letter-spacing: -.01em; }
.logo__text-strong { color: var(--orange); }

/* Burger-Button: ohne JS unsichtbar, Navigation bleibt als Liste sichtbar */
.nav-toggle {
  display: none;
  align-items: center;
  gap: .5rem;
  margin-left: auto;
  padding: .55rem .8rem;
  border: 2px solid var(--dark);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--dark);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.nav-toggle .icon { width: 1.4rem; height: 1.4rem; }
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

.nav { flex: 1 1 100%; }

.nav__list { list-style: none; display: flex; flex-direction: column; }

.nav__item { position: relative; }

.nav__link {
  display: flex;
  align-items: center;
  gap: .35em;
  padding: .8rem .25rem;
  color: var(--dark);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--transition), background var(--transition);
}

.nav__link:hover { color: var(--orange-deep); }
.nav__link[aria-current="page"],
.nav__item.is-current > .nav__link { color: var(--orange-deep); }

.nav__link--button {
  width: 100%;
  border: 0;
  background: none;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
}

.nav__sub-toggle {
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
  padding: .4rem;
  border-radius: var(--radius-sm);
}

.nav__sub-toggle .icon { width: 1.1rem; height: 1.1rem; transition: transform var(--transition); }
.nav__sub-toggle[aria-expanded="true"] .icon,
.nav__item.is-open > .nav__link--button .icon { transform: rotate(180deg); }

.nav__sub { list-style: none; }

.nav__sub a {
  display: block;
  padding: .6rem .75rem;
  color: var(--dark);
  text-decoration: none;
  font-weight: 500;
  border-radius: var(--radius-sm);
}

.nav__sub a:hover { background: var(--orange-soft); color: var(--dark); }
.nav__sub a[aria-current="page"] { color: var(--orange-deep); font-weight: 700; }

.nav__contact { display: none; }

.btn--nav { padding: .6em 1.1em; }

/* Mobile Navigation (bis 72em) – darüber Desktop-Navigation mit Dropdowns */
@media (max-width: 71.99em) {
  .js .nav-toggle { display: inline-flex; }
  .js .nav { display: none; }
  .js .nav.is-open { display: block; }

  .nav {
    padding: .5rem 0 1.25rem;
    border-top: 1px solid var(--line);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }

  .nav__item { border-bottom: 1px solid var(--light-2); }
  .nav__item--has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .nav__item--has-sub > .nav__link { flex: 1 1 auto; }
  .nav__item--has-sub > .nav__link--button { justify-content: space-between; }
  .nav__item--has-sub > .nav__sub { flex: 1 1 100%; }
  .nav__sub-toggle { padding: .6rem .9rem; }
  .nav__sub-toggle .icon { width: 1.3rem; height: 1.3rem; }

  .nav__sub { padding: 0 0 .5rem .75rem; }
  .nav__sub a { padding: .55rem .75rem; }
  /* ohne JS: Untermenüs immer sichtbar; mit JS: aufklappbar */
  .js .nav__sub { display: none; }
  .js .nav__item.is-open > .nav__sub { display: block; }

  .nav__item--has-sub > .nav__link--button.nav__sub-toggle { padding: .8rem .25rem; }
  .nav__item--cta { order: 99; border-bottom: 0; padding-top: 1rem; }
  .nav__item--cta .btn { width: 100%; }

  .nav__contact {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--line);
    font-size: .95rem;
  }

  .nav__contact a { display: inline-flex; align-items: center; gap: .5em; color: var(--dark); text-decoration: none; }
  .nav__contact .icon { color: var(--orange); }
}

/* Desktop Navigation */
@media (min-width: 72em) {
  .header-main__inner { flex-wrap: nowrap; }
  .nav { flex: 0 0 auto; display: block !important; }
  .nav__list { flex-direction: row; align-items: center; gap: .1rem; }
  .nav__link { padding: .6rem .55rem; font-size: .92rem; white-space: nowrap; }
  .btn--nav { font-size: .92rem; white-space: nowrap; }
  .nav__item--has-sub { display: flex; align-items: center; }
  .nav__item--has-sub > .nav__link { padding-right: .2rem; }
  .nav__sub-toggle { padding: .45rem; margin-right: .3rem; }
  .nav__item--cta { margin-left: .6rem; }

  .nav__sub {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 16rem;
    padding: .5rem;
    background: var(--white);
    border: 1px solid var(--line);
    border-top: 3px solid var(--orange);
    border-radius: 0 0 var(--radius) var(--radius);
    box-shadow: var(--shadow-hover);
  }

  .nav__sub a { white-space: nowrap; }

  .nav__item:hover > .nav__sub,
  .nav__item.is-open > .nav__sub,
  html:not(.js) .nav__item:focus-within > .nav__sub { display: block; }
  /* Mit Escape geschlossen (site.js): bleibt trotz Hover zu, bis der Mauszeiger den Menüpunkt verlässt */
  .nav__item.is-dismissed:not(.is-open) > .nav__sub { display: none; }
}

@media (min-width: 72em) and (max-width: 79.99em) {
  .nav__link { padding: .6rem .4rem; font-size: .88rem; }
  .btn--nav { padding: .6em .8em; font-size: .88rem; }
  .nav__item--cta { margin-left: .3rem; }
  .logo__picture img { height: 48px; max-width: 190px; }
}

/* 6 Hero & Seitenkopf ------------------------------------------------------ */
.hero,
.page-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  background: var(--dark);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}

.hero { min-height: 32rem; }
.page-hero { min-height: 18rem; }

.hero__picture,
.page-hero__picture,
.hero__picture img,
.page-hero__picture img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.hero__overlay,
.page-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(27, 27, 27, .18) 0%, rgba(27, 27, 27, .45) 45%, rgba(27, 27, 27, .88) 100%);
}

.hero--plain .hero__overlay { background: linear-gradient(135deg, #2b2b2b, #151515); }

.hero__inner { position: relative; padding-top: 5rem; padding-bottom: 3rem; }
.page-hero__inner { position: relative; padding-top: 4rem; padding-bottom: 2rem; }

.hero__title,
.page-hero__title {
  color: var(--white);
  max-width: 22em;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}

.hero__title { font-size: clamp(1.9rem, 1.3rem + 2.6vw, 3rem); margin-bottom: .4em; }

.hero__subtitle {
  max-width: 34em;
  margin-bottom: 1.6rem;
  font-size: 1.2rem;
  color: #F1F1EE;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .35);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

@media (min-width: 72em) {
  .hero { min-height: 36rem; }
  .hero__inner { padding-top: 7rem; padding-bottom: 4rem; }
  .page-hero { min-height: 22rem; }
  .page-hero__inner { padding-top: 6rem; padding-bottom: 2.75rem; }
}

.page-header { background: var(--light); padding: 2.25rem 0 2.5rem; border-bottom: 1px solid var(--line); }
.page-header__title { margin-bottom: .5em; }
.page-header .lead { margin-top: .75rem; }

@media (min-width: 72em) {
  .page-header { padding: 3rem 0 3.5rem; }
}

.breadcrumb { margin-bottom: 1rem; font-size: .875rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; list-style: none; gap: .35em; }
.breadcrumb li + li::before { content: "›"; margin-right: .35em; opacity: .7; }
.breadcrumb a { display: inline-block; padding: .4rem 0; margin: -.4rem 0; color: inherit; text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.page-header .breadcrumb { color: var(--muted); }
.page-hero .breadcrumb { color: #E8E8E4; text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }

/* 7 Inhaltsbausteine ------------------------------------------------------- */

/* USP-Leiste unter dem Hero */
.usp-bar { background: var(--dark-2); color: #E8E8E4; }
.usp-bar__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem 2rem;
  padding: .85rem 0;
  font-size: .92rem;
  font-weight: 600;
}
.usp-bar__list li { display: inline-flex; align-items: center; gap: .5em; }
.usp-bar .icon { color: var(--orange); }

/* Karten (Leistungen) */
.cards { display: grid; gap: 1.25rem; grid-template-columns: 1fr; }

@media (min-width: 40em) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) {
  .cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.card:hover { box-shadow: var(--shadow-hover); transform: translateY(-3px); border-color: rgba(240, 100, 30, .45); }

.card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 1.1rem;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--orange-deep);
}

.card__title { margin-bottom: .5em; font-size: 1.2rem; }

.card__link { color: var(--dark); text-decoration: none; }
.card__link::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__link { color: var(--orange-deep); }

.card__text { flex: 1 1 auto; margin-bottom: 1rem; color: var(--dark-3); font-size: .98rem; }

.card__more {
  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-weight: 700;
  font-size: .95rem;
  color: var(--orange-deep);
}

.card__more .icon { transition: transform var(--transition); }
.card:hover .card__more .icon { transform: translateX(4px); }

/* Einleitung Startseite mit Faktenkasten */
.intro-home { display: grid; gap: 2rem; align-items: start; }
.intro-home__text { max-width: 44em; }

@media (min-width: 72em) {
  .intro-home { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 4rem; }
}

.fact-box {
  padding: 1.75rem;
  background: var(--dark);
  color: #E8E8E4;
  border-radius: var(--radius);
  border-top: 5px solid var(--orange);
}

.fact-box__big { margin: 0; font-size: 2.4rem; font-weight: 800; line-height: 1; color: var(--orange); }
.fact-box__label { margin: .35rem 0 1.25rem; font-weight: 600; color: var(--white); }
.fact-box__list { list-style: none; margin-bottom: 1.5rem; }
.fact-box__list li { display: flex; align-items: center; gap: .6em; padding: .45rem 0; border-top: 1px solid rgba(255, 255, 255, .12); }
.fact-box__list .icon { color: var(--orange); }
.fact-box .btn--dark { background: var(--white); border-color: var(--white); color: var(--dark); width: 100%; }
.fact-box .btn--dark:hover { background: var(--light); border-color: var(--light); }

/* Text + Bild */
.split { display: grid; gap: 2rem; align-items: center; }
.split__text { max-width: 46em; }
.split__media { display: flex; justify-content: center; }
.split__media picture,
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow); }
.split__media img { width: auto; max-width: 100%; height: auto; max-height: 30rem; object-fit: contain; }
.split--text-only .split__text { max-width: 44em; }

@media (min-width: 72em) {
  .split--has-image { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
  .split--image-left .split__media { order: -1; }
}

/* Standort-Links */
.city-links { list-style: none; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .city-links { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .city-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.city-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1.1rem 1.15rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--dark);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.city-link:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: rgba(240, 100, 30, .45); color: var(--dark); }
.city-link .icon { color: var(--orange); width: 1.6rem; height: 1.6rem; }
.city-link__body { display: flex; flex-direction: column; min-width: 0; }
.city-link__name { font-weight: 700; font-size: 1.1rem; line-height: 1.2; }
.city-link__sub { font-size: .875rem; color: var(--muted); overflow-wrap: anywhere; }

/* Referenzlogos */
.logos {
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

@media (min-width: 40em) { .logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 72em) { .logos { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.logos__item {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 6.5rem;
  padding: 1rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.logos__link { display: block; }
.logos__picture img { max-height: 4.75rem; width: auto; max-width: 100%; margin: 0 auto; object-fit: contain; opacity: .9; transition: opacity var(--transition); }
.logos__item:hover .logos__picture img { opacity: 1; }
.logos__name { font-weight: 700; color: var(--muted); text-align: center; }

/* Team */
.team { list-style: none; display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.team__member {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.team__media img { aspect-ratio: 1 / 1; object-fit: cover; }
.team__body { padding: 1.25rem 1.5rem 1.5rem; }
.team__name { margin-bottom: .1em; font-size: 1.2rem; }
.team__role { margin-bottom: .75rem; color: var(--orange-deep); font-weight: 600; font-size: .95rem; }
.team__contact { list-style: none; display: flex; flex-direction: column; gap: .35rem; font-size: .95rem; }
.team__contact a { display: inline-flex; align-items: center; gap: .5em; color: var(--dark); text-decoration: none; overflow-wrap: anywhere; }
.team__contact a:hover { color: var(--orange-deep); text-decoration: underline; }
.team__contact .icon { color: var(--orange); }

/* Video */
.video { border-radius: var(--radius); overflow: hidden; background: var(--dark); box-shadow: var(--shadow); }
.video__player { width: 100%; aspect-ratio: 16 / 9; }

/* Download-Liste */
.downloads { list-style: none; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); padding: 0; margin: 0; }
.downloads__item { min-width: 0; }
@media (min-width: 40em) { .downloads { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.downloads__link {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  height: 100%;
  padding: 1.1rem 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--dark);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}

.downloads__link:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: rgba(240, 100, 30, .45); color: var(--dark); }
.downloads__icon { display: inline-flex; padding: .6rem; border-radius: var(--radius-sm); background: var(--orange-soft); color: var(--orange-deep); }
.downloads__icon .icon { width: 1.4rem; height: 1.4rem; }
.downloads__body { display: flex; flex-direction: column; gap: .15rem; }
.downloads__title { font-weight: 700; }
.downloads__text { font-size: .92rem; color: var(--muted); }

/* FAQ */
.faq { display: flex; flex-direction: column; gap: .75rem; }
.section--faq-inline .faq { max-width: 46em; }

.faq__item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.faq__item[open] { border-color: rgba(240, 100, 30, .5); }

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--dark);
  cursor: pointer;
  list-style: none;
  border-radius: var(--radius);
}

/* Lange Wörter (z. B. mit erhöhtem Zeichenabstand, WCAG 1.4.12) dürfen umbrechen – der Pfeil bleibt im Kasten */
.faq__question > span { min-width: 0; overflow-wrap: anywhere; }
.faq__chevron { flex-shrink: 0; }
.faq__question::-webkit-details-marker { display: none; }
.faq__question:hover { color: var(--orange-deep); }
.faq__chevron { color: var(--orange); transition: transform var(--transition); }
.faq__item[open] .faq__chevron { transform: rotate(180deg); }
.faq__answer { padding: 0 1.25rem 1.25rem; color: var(--dark-3); }

/* Schritte (Angebot) */
.steps { list-style: none; display: grid; gap: 1.25rem; grid-template-columns: 1fr; counter-reset: step; }
@media (min-width: 40em) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.steps__item { display: flex; gap: 1rem; align-items: flex-start; }
.steps__num {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: var(--orange);
  color: var(--dark);
  font-weight: 800;
  font-size: 1.1rem;
}
.steps__title { margin-bottom: .25em; font-size: 1.1rem; }
.section--steps .section__head { margin-bottom: 1.5rem; }
.steps__text { margin: 0; font-size: .97rem; color: var(--dark-3); }

/* CTA-Band */
.cta-band {
  padding: 3.5rem 0;
  background: var(--dark);
  color: #E8E8E4;
  border-top: 5px solid var(--orange);
}

.cta-band__inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 72em) { .cta-band__inner { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 3rem; } }

.cta-band__title { color: var(--white); margin-bottom: .4em; }
.cta-band__copy { max-width: 40em; font-size: 1.1rem; }
.cta-band__copy p:last-child { margin-bottom: 0; }
.cta-band__copy a { color: var(--orange); }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: .75rem; }
@media (min-width: 72em) { .cta-band__actions { justify-content: flex-end; } }

/* Danke-Seite */
.page-header--thanks { padding: 4rem 0 5rem; border-bottom: 0; }
.thanks { text-align: center; }
.thanks .lead { margin: 0 auto 2rem; }
.thanks__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 1.25rem;
  border-radius: 50%;
  background: var(--orange);
  color: var(--dark);
}
.thanks__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.thanks__actions + .lead { margin-top: 1.5rem; }
.notfound__phone a[href^="tel:"] { white-space: nowrap; }

/* Rechtstexte */
.prose--legal { font-size: 1rem; }
.prose--legal h2 { font-size: 1.35rem; }
.prose--legal h3 { font-size: 1.1rem; }

/* 8 Formulare -------------------------------------------------------------- */
.form-layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 72em) { .form-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4rem; } }

.form__title { margin-bottom: .5em; }
.form__intro { margin-bottom: 1.75rem; }

.form__group {
  margin: 0 0 1.75rem;
  padding: 1.25rem 1.25rem 1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  min-width: 0;
}

.form__group legend { padding: 0 .5rem; font-weight: 700; font-size: 1.05rem; color: var(--dark); }

.form__grid { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; } }

.form__field { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .25rem; min-width: 0; }
.form__field--full { grid-column: 1 / -1; }
.form__field label { font-weight: 600; font-size: .95rem; color: var(--dark); }
.form__optional { font-weight: 400; color: var(--muted); }

.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="number"],
.form input[type="date"],
.form select,
.form textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1.5px solid #8A8A86;
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--text);
  font: inherit;
  line-height: 1.4;
  transition: border-color var(--transition), box-shadow var(--transition);
}

.form textarea { resize: vertical; min-height: 7rem; }
/* Select: native Darstellung (kein data:-Hintergrundbild wegen CSP default-src 'self') */
.form select { cursor: pointer; min-height: 2.9rem; }

.form input:focus,
.form select:focus,
.form textarea:focus { outline: none; border-color: var(--orange-deep); box-shadow: 0 0 0 3px rgba(240, 100, 30, .25); }

.form input::placeholder,
.form textarea::placeholder { color: #8a8a86; }

.form__field--check { flex-direction: row; align-items: flex-start; gap: .65rem; }
.form__group > .form__field--check { margin-top: .75rem; }
.form__field--check input { width: 1.25rem; height: 1.25rem; margin: .15rem 0 0; flex: 0 0 auto; accent-color: var(--orange-deep); }
.form__field--check label { font-weight: 500; }

.form__checks { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .form__checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.form__required { margin: 0 0 1rem; font-size: .875rem; color: var(--muted); }
.form__actions { display: flex; flex-direction: column; gap: .75rem; align-items: flex-start; }
.form__hint { margin: 0; font-size: .9rem; color: var(--muted); }

.form__notice {
  padding: .9rem 1rem;
  border-left: 4px solid var(--orange);
  background: var(--orange-soft);
  border-radius: var(--radius-sm);
}

.form-error {
  margin: 0 0 1.5rem;
  padding: .9rem 1rem;
  border-left: 4px solid var(--error-fg);
  background: var(--error-bg);
  color: var(--error-fg);
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.form-error[hidden] { display: none; }

/* Honeypot: für Menschen unsichtbar, für Bots ein normales Feld */
.hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Kontaktkasten */
.contact-card {
  padding: 1.75rem;
  background: var(--light);
  border-radius: var(--radius);
  border-top: 5px solid var(--orange);
}

.contact-card__title { font-size: 1.3rem; margin-bottom: .75em; }
.contact-card__company { margin-bottom: 1.25rem; }
.contact-card__list { list-style: none; display: flex; flex-direction: column; gap: .9rem; margin-bottom: 1.5rem; }
.contact-card__list li { display: flex; gap: .75rem; align-items: flex-start; line-height: 1.45; }
.contact-card__list li > span { display: block; }
.contact-card__list .icon { color: var(--orange); margin-top: .15rem; width: 1.35rem; height: 1.35rem; }
.contact-card__list a { color: var(--dark); font-weight: 600; overflow-wrap: anywhere; }
.contact-card__social { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; color: var(--dark); }
.contact-card__social .icon { color: var(--orange); }

/* 9 Footer ----------------------------------------------------------------- */
.site-footer {
  margin-top: auto;
  padding: 3.5rem 0 1.5rem;
  background: var(--dark);
  color: #D9D9D5;
  font-size: .95rem;
}

.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { color: var(--orange); text-decoration: underline; }

.footer__grid { display: grid; gap: 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .footer__grid { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 3rem; } }

.footer__heading { margin-bottom: .9rem; font-size: 1.05rem; font-weight: 700; color: var(--orange); text-transform: uppercase; letter-spacing: .06em; }
.footer__subheading { margin: 1.5rem 0 .6rem; font-size: .95rem; color: var(--white); text-transform: uppercase; letter-spacing: .06em; }
.footer__brand { margin: -.5rem 0 1rem; color: var(--white); font-weight: 600; }

.footer__address { font-style: normal; }
.footer__address a { display: inline-block; padding: .25rem 0; margin: -.25rem 0; }
.footer__address p,
.footer__hours li { display: flex; gap: .6rem; align-items: flex-start; margin: 0 0 .55rem; }
.footer__hours { list-style: none; }
.site-footer .icon { color: var(--orange); margin-top: .15rem; width: 1.2rem; height: 1.2rem; }

.footer__links { list-style: none; display: flex; flex-direction: column; gap: .25rem; }
.footer__links a { display: inline-block; padding: .2rem 0; }
.footer__legal a { display: inline-block; padding: .3rem 0; }
.footer__social { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.25rem; font-weight: 600; }

.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1.5rem;
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: .875rem;
  color: #B5B5B0;
}

.footer__copy { margin: 0; }
.footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 0; }
.footer__legal li + li::before { content: "·"; margin: 0 .6em; color: #8a8a86; }
.footer__legal a { color: #E8E8E4; }

/* 10 Sonstiges & Barrierefreiheit ----------------------------------------- */
.skip-link {
  position: absolute;
  left: 1rem;
  top: 0;
  transform: translateY(-110%);         /* statt top:-100px – bei großer Schrift ragte der Link sonst ins Bild */
  z-index: 100;
  padding: .75rem 1rem;
  background: var(--dark);
  color: var(--white);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus { transform: none; outline: 3px solid var(--orange); }

.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;
}

/* Sticky Schnellkontakt-Leiste unten (nur mobil): Anrufen · Rückruf · WhatsApp */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 60;
  display: flex;
  gap: 1px;
  background: var(--dark);
  box-shadow: 0 -4px 18px rgba(0, 0, 0, .22);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.sticky-bar__btn {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  min-height: 3.4rem;
  padding: .6rem .5rem;
  background: var(--orange);
  color: var(--dark);
  font-weight: 700;
  font-size: .95rem;
  line-height: 1.15;
  text-decoration: none;
  white-space: nowrap;
}

.sticky-bar__btn .icon { width: 1.35rem; height: 1.35rem; }
.sticky-bar__btn:hover { background: var(--orange-hover); color: var(--dark); }
.sticky-bar__btn--callback { background: var(--white); }
.sticky-bar__btn--callback:hover { background: var(--light); color: var(--dark); }
.sticky-bar__btn--whatsapp { background: var(--whatsapp); }
.sticky-bar__btn--whatsapp:hover { background: var(--whatsapp-hover); color: var(--dark); }

@media (max-width: 23.99em) { .sticky-bar__btn { font-size: .85rem; gap: .35rem; } }
@media (max-width: 21.99em) { .sticky-bar__btn .icon { display: none; } }   /* sehr schmale Displays: nur Beschriftungen */
@media (min-width: 72em) { .sticky-bar { display: none; } }
/* Bei geöffnetem Menü verdeckt die Leiste sonst „Angebot anfordern“ am Menüende */
body:has(.nav.is-open) .sticky-bar { display: none; }
@media (max-width: 71.99em) { .site-footer { padding-bottom: 5.5rem; } }

/* WhatsApp-Button (Markengrün, dunkler Text: Kontrast > 9:1) */
.btn--whatsapp { background: var(--whatsapp); border-color: var(--whatsapp); color: var(--dark); }
.btn--whatsapp:hover { background: var(--whatsapp-hover); border-color: var(--whatsapp-hover); color: var(--dark); box-shadow: 0 6px 18px rgba(37, 211, 102, .35); }
.contact-card__whatsapp { width: 100%; margin: -.5rem 0 1.25rem; }
.btn--xl { padding: 1.05em 1.8em; font-size: 1.15rem; }

/* Rückruf-Dialog (<dialog>, nur mit JS geöffnet; ohne JS führt der Link auf /rueckruf/) */
.rueckruf-dialog {
  width: min(34rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  overflow: auto;
}

.rueckruf-dialog::backdrop { background: rgba(16, 16, 16, .6); }
.rueckruf-dialog__form { padding: 1.5rem; }
.rueckruf-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.rueckruf-dialog__title { margin: 0; font-size: 1.4rem; }
.rueckruf-dialog__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  margin: -.4rem -.5rem 0 0;
  border: 0;
  border-radius: 50%;
  background: var(--light);
  color: var(--dark);
  cursor: pointer;
}
.rueckruf-dialog__close:hover { background: var(--light-2); }
.rueckruf-dialog__close .icon { width: 1.3rem; height: 1.3rem; }
.rueckruf-dialog__text { margin-bottom: 1.25rem; color: var(--dark-3); }
.rueckruf-dialog__actions { margin-top: 1.25rem; }
.rueckruf-dialog .form__hint a { color: var(--link); }
@media (min-width: 40em) { .rueckruf-dialog__form { padding: 2rem; } }
.cta-band__callback { border-style: dashed; }
@media (max-width: 71.99em) { .cta-band__callback { display: none; } }   /* mobil steht „Rückruf“ in der Leiste unten */

/* Kundenbewertungen (Startseite) */
.reviews { list-style: none; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
@media (min-width: 40em) { .reviews { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 72em) { .reviews { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

.review {
  display: flex;
  flex-direction: column;
  gap: .75rem;
  padding: 1.5rem 1.5rem 1.35rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.stars { display: inline-flex; gap: .15rem; }
.stars__star { width: 1.25rem; height: 1.25rem; fill: var(--light-2); }
.stars__star.is-on { fill: var(--orange); }
.review__quote { flex: 1 1 auto; margin: 0; font-size: 1.02rem; color: var(--dark-3); }
.review__quote p { margin: 0; }
.review__meta { margin: 0; font-size: .92rem; color: var(--muted); }
.review__name { font-weight: 700; color: var(--dark); }
.reviews__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 2rem; }
.reviews__link { font-weight: 600; }

/* Stellenanzeigen */
.jobs { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 72em) { .jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; } }

.job {
  display: flex;
  flex-direction: column;
  padding: 1.75rem 1.5rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}

.job__head { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.25rem; }
.job__icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 12px;
  background: var(--orange-soft);
  color: var(--orange-deep);
}
.job__headline { min-width: 0; }
.job__title { margin-bottom: .35em; font-size: 1.35rem; }
.job__meta { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-size: .92rem; color: var(--muted); }
.job__meta li { display: inline-flex; align-items: center; gap: .35em; }
.job__meta .icon { color: var(--orange); width: 1.1em; height: 1.1em; }
.job__badge { padding: .15em .6em; border-radius: 999px; background: var(--dark); color: var(--white); font-weight: 700; font-size: .82rem; letter-spacing: .03em; }
.job__body { flex: 1 1 auto; font-size: 1rem; }
.job__body h2 { font-size: 1.05rem; margin-top: 1.2em; }
.job__body h2:first-child { margin-top: 0; }
.job__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); }
.job__hint { flex: 1 1 100%; margin: .25rem 0 0; font-size: .9rem; color: var(--muted); overflow-wrap: anywhere; }

.jobs-empty { max-width: 46em; text-align: center; margin: 0 auto; }
.jobs-empty__icon { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; margin-bottom: 1.25rem; border-radius: 50%; background: var(--orange-soft); color: var(--orange-deep); }
.jobs-empty .lead { margin: 0 auto 1.5rem; }
.jobs-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }

/* Bewerten Sie uns */
.review-layout { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 72em) { .review-layout { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4rem; } }
.review__button { width: 100%; }
@media (min-width: 40em) { .review__button { width: auto; } }
.review__note { margin: 1rem 0 0; font-size: .92rem; color: var(--muted); }
.review__pending { margin-bottom: 1.5rem; }
.steps--review { margin-top: 2.25rem; grid-template-columns: 1fr; gap: 1rem; }
.steps--review .steps__num { width: 2.2rem; height: 2.2rem; font-size: 1rem; }

.qr-card {
  padding: 1.75rem;
  text-align: center;
  background: var(--light);
  border-radius: var(--radius);
  border-top: 5px solid var(--orange);
}
.qr-card__title { font-size: 1.2rem; margin-bottom: 1rem; }
.qr-card__code { display: flex; justify-content: center; margin-bottom: 1rem; }
.qr-card__code svg { width: min(240px, 70vw); height: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow); }
.qr-card__text { font-size: .95rem; color: var(--dark-3); }
.qr-card__download { margin-top: .5rem; }
.qr-card__hint { margin: .75rem 0 0; font-size: .85rem; color: var(--muted); }

/* Umzugsrechner */
.rechner-wrap { display: grid; gap: 2.5rem; align-items: start; }
.rechner-main, .rechner-side { min-width: 0; }
.rechner-result-slot[hidden] { display: none; }
@media (min-width: 72em) {
  .rechner-wrap { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 4rem; }
  .rechner-side { position: sticky; top: calc(var(--header-h) + 1.5rem); }
  .rechner-result-slot + .rechner-note { margin-top: 1.5rem; }
}

.rechner-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.rechner-table th, .rechner-table td { padding: .55rem .75rem; text-align: left; border-bottom: 1px solid var(--line); }
.rechner-table thead th { background: var(--dark); color: var(--white); font-weight: 700; }
.rechner-table__cat th { padding-top: 1.1rem; background: var(--light); color: var(--orange-deep); text-transform: uppercase; letter-spacing: .06em; font-size: .85rem; }
.rechner-table__num { text-align: right !important; font-variant-numeric: tabular-nums; white-space: nowrap; }

.rechner-note {
  padding: 1.75rem;
  background: var(--light);
  border-radius: var(--radius);
  border-top: 5px solid var(--orange);
}
.rechner-note__title { font-size: 1.2rem; }
.rechner-note__actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.25rem; }

.rechner[hidden] { display: none; }
.rechner__cat { margin-bottom: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); overflow: hidden; }
.rechner__cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem 1.25rem;
  background: var(--light);
  font-weight: 700;
  font-size: 1.08rem;
  color: var(--dark);
  cursor: pointer;
  list-style: none;
}
.rechner__cat-head::-webkit-details-marker { display: none; }
.rechner__cat-head .icon { color: var(--orange); transition: transform var(--transition); }
.rechner__cat[open] .rechner__cat-head .icon { transform: rotate(180deg); }
.rechner__cat-sum { margin-left: auto; font-size: .9rem; font-weight: 600; color: var(--muted); white-space: nowrap; }
.rechner__list { list-style: none; }
.rechner__row { display: flex; align-items: center; gap: .75rem; padding: .6rem 1.25rem; border-top: 1px solid var(--light-2); }
.rechner__label { flex: 1 1 auto; min-width: 0; font-size: .98rem; }
.rechner__label small { display: block; color: var(--muted); font-size: .82rem; }
.rechner__qty { display: inline-flex; align-items: center; flex: 0 0 auto; }
.rechner__btn {
  width: 2.6rem;
  height: 2.6rem;
  border: 1.5px solid #8A8A86;
  background: var(--white);
  color: var(--dark);
  font: inherit;
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.rechner__btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.rechner__btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.rechner__btn:hover { background: var(--orange-soft); }
.rechner__input {
  width: 3.4rem;
  height: 2.6rem;
  margin: 0 -1.5px;
  padding: 0;
  border: 1.5px solid #8A8A86;
  background: var(--white);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  text-align: center;
  -moz-appearance: textfield;
  appearance: textfield;
}
.rechner__input::-webkit-outer-spin-button, .rechner__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rechner__input:focus { outline: none; border-color: var(--orange-deep); box-shadow: 0 0 0 3px rgba(240, 100, 30, .25); position: relative; z-index: 1; }
.rechner__row.is-active .rechner__label { font-weight: 600; }

.rechner__result {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--dark);
  color: #E8E8E4;
  border-radius: var(--radius);
  border-top: 5px solid var(--orange);
  box-shadow: var(--shadow);
  scroll-margin-top: calc(var(--header-h) + 1rem);
}
.rechner-result-slot .rechner__result { margin-top: 0; }
/* Kompakte Summenleiste: mobil sticky über der Schnellkontakt-Leiste, auf dem Desktop ausgeblendet */
.rechner__ticker {
  position: sticky;
  bottom: 3.5rem;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25rem .6rem;
  margin: 0 0 1rem;
  padding: .7rem 1rem;
  background: var(--dark);
  color: var(--white);
  border-left: 5px solid var(--orange);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .25);
  font-size: .95rem;
}
.rechner__ticker-total { font-size: 1.25rem; font-weight: 800; color: var(--orange); font-variant-numeric: tabular-nums; }
.rechner__ticker-class { font-weight: 600; }
.rechner__ticker-link { margin-left: auto; color: var(--white); font-weight: 700; }
.rechner__ticker-link:hover { color: var(--orange); }
.rechner__ticker-link:focus-visible { outline-color: var(--orange); }
@media (min-width: 72em) { .rechner__ticker { display: none; } }
.rechner__result-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem 1rem; }
.rechner__total { margin: 0; font-size: 2rem; font-weight: 800; line-height: 1.1; color: var(--orange); font-variant-numeric: tabular-nums; }
.rechner__total-label { font-size: .95rem; color: #C9C9C4; }
.rechner__class { margin: .5rem 0 0; font-weight: 600; color: var(--white); }
.rechner__disclaimer { margin: .35rem 0 0; font-size: .85rem; color: #C9C9C4; }
.rechner__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1rem; }
.rechner__actions .btn--ghost { padding: .6em 1em; }
.rechner__scale { display: block; width: 100%; height: .5rem; margin-top: 1rem; border-radius: 999px; overflow: hidden; }
.rechner__scale-bg { fill: rgba(255, 255, 255, .15); }
.rechner__scale-fill { fill: var(--orange); }

/* Hinweis-Zeile im Formular (Rechner-Link) + Teaser neben dem Formular */
.form__field--note { grid-column: 1 / -1; }
.form__note { display: flex; gap: .5rem; align-items: flex-start; margin: 0; padding: .75rem .9rem; font-size: .95rem; background: var(--light); border-radius: var(--radius-sm); }
.form__note .icon { color: var(--orange); margin-top: .1rem; }
.form__note a { font-weight: 700; }

.tool-teaser {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  color: var(--dark);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: box-shadow var(--transition), transform var(--transition), border-color var(--transition);
}
.tool-teaser:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); border-color: rgba(240, 100, 30, .45); color: var(--dark); }
.tool-teaser__icon { display: inline-flex; padding: .6rem; border-radius: var(--radius-sm); background: var(--orange-soft); color: var(--orange-deep); }
.tool-teaser__body { display: flex; flex-direction: column; gap: .2rem; }
.tool-teaser__title { font-weight: 700; font-size: 1.05rem; }
.tool-teaser__text { font-size: .92rem; color: var(--muted); }

/* Fokus-Styles: deutlich, überall */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.btn:focus-visible { outline-offset: 3px; }
.topbar a:focus-visible,
.site-footer a:focus-visible,
.cta-band a:focus-visible,
.hero a:focus-visible,
.site-header a:focus-visible,
.site-header button:focus-visible,
.fact-box a:focus-visible,
.usp-bar a:focus-visible { outline-color: var(--orange); }
.sticky-bar__btn:focus-visible { outline-color: var(--white); outline-offset: -4px; }
.rueckruf-dialog :focus-visible { outline-color: var(--orange-deep); }

/* Auswahl in Markenfarbe */
::selection { background: var(--orange); color: var(--dark); }

/* Druck */
@media print {
  .topbar, .nav-toggle, .nav, .sticky-bar, .rueckruf-dialog, .cta-band, .skip-link { display: none !important; }
  .hero, .page-hero { min-height: 0; color: var(--dark); background: none; }
  .hero__title, .page-hero__title { color: var(--dark); text-shadow: none; }
  .hero__overlay, .page-hero__overlay, .hero__picture, .page-hero__picture { display: none; }
  a { color: inherit; }
}

/* Kompaktes Raster für viele kurze Abschnitte */
.compact-grid { display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 48em) { .compact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 3rem; } }
.compact-item { padding: 1.5rem 1.75rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); border-top: 4px solid var(--orange); }
.section--alt .compact-item { background: var(--white); }
.section:not(.section--alt) .compact-item { background: var(--light); }
.compact-item__title { font-size: 1.25rem; margin: 0 0 .6em; }
.compact-item p:last-child, .compact-item ul:last-child { margin-bottom: 0; }

/* Dunkler Header (Markenlook: Orange auf Schwarz wie im Logo) */
.topbar { background: #101010; }
.header-main { background: var(--dark); border-bottom: 1px solid #2c2c2c; box-shadow: 0 2px 14px rgba(0, 0, 0, .28); }
.logo { color: #fff; }
.nav__link { color: #F4F4F2; }
.nav__link:hover,
.nav__link[aria-current="page"],
.nav__item.is-current > .nav__link { color: var(--orange); }
.nav-toggle { border-color: #F4F4F2; background: transparent; color: #F4F4F2; }
.nav-toggle:hover { border-color: var(--orange); color: var(--orange); }
@media (max-width: 71.99em) {
  .nav { border-top-color: #333; }
  .nav__item { border-bottom-color: #2e2e2e; }
  .nav__sub a { color: #E8E8E4; }
  .nav__sub a:hover { background: #2a2a2a; color: #fff; }
  .nav__sub a[aria-current="page"] { color: var(--orange); }
}
.nav__sub-toggle { color: #F4F4F2; }
.nav__item.is-current > .nav__sub-toggle,
.nav__item:hover > .nav__sub-toggle,
.nav__item.is-open > .nav__sub-toggle { color: var(--orange); }
@media (max-width: 71.99em) {
  .nav__contact a { color: #F4F4F2; }
  .nav__contact { border-top-color: #333; }
}

/* Verfügbarkeitskalender (Kühlanhänger-Vermietung) ------------------------
 * Aufbau kommt aus site.js (Block 8). Zustände je Tag: frei (weiß, klickbar), belegt (grau-rot mit
 * Schraffur und ✕ – nie nur Farbe), vergangen/zu kurzfristig (grau), ausgewählt (Orange), dazwischen (Orange hell).
 * Mobil: 7 Spalten ohne horizontalen Scroll, Zellen ≥ 40 px. */
.kalender { display: grid; gap: 2rem; align-items: start; }
.kalender[hidden], .kalender-fallback[hidden] { display: none; }
@media (min-width: 62em) { .kalender { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; } }
.kalender__main { min-width: 0; }
.section--calendar .section__head { margin-bottom: 1.5rem; }

.kalender__nav { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.kalender__nav-btn {
  display: inline-flex;
  align-items: center;
  gap: .3em;
  min-height: 2.75rem;
  padding: .4em .8em;
  border: 1.5px solid var(--dark);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--dark);
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.kalender__nav-btn .icon { width: 1.2em; height: 1.2em; }
@media (hover: hover) { .kalender__nav-btn:hover:not(:disabled) { background: var(--dark); color: var(--white); } }
.kalender__nav-btn:disabled { border-color: var(--line); color: var(--muted); background: var(--light); cursor: default; }

.kalender__table {
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: .25rem;
  margin: 0 -.25rem;                 /* Außenabstand der Zellen ausgleichen: Raster bündig mit dem Text */
  width: calc(100% + .5rem);
  font-variant-numeric: tabular-nums;
}
.kalender__caption {
  padding: .35rem 0 .75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--dark);
  text-align: center;
  caption-side: top;
}
.kalender__weekday { padding: 0 0 .35rem; font-size: .85rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); text-align: center; }
.kalender__cell { padding: 0; vertical-align: top; }
.kalender__cell--empty { background: transparent; }

.kalender__day {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.75rem;      /* ≥ 40 px Tipp-Fläche */
  aspect-ratio: 1 / 1;
  max-height: 4.25rem;
  margin: 0;
  padding: 0;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--dark);
  font: inherit;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
}
@media (max-width: 24em) { .kalender__day { font-size: .9rem; } }
/* Hover nur mit Maus – auf Touchgeräten bliebe der Zustand sonst nach dem Tippen „kleben“ */
@media (hover: hover) {
  .kalender__day.is-free:hover { border-color: var(--orange-deep); background: var(--orange-soft); }
  }
.kalender__day.is-preview { background: var(--orange-soft); border-color: rgba(240, 100, 30, .55); }
.kalender__day.is-range { background: var(--orange-soft); border-color: rgba(240, 100, 30, .55); }
.kalender__day.is-selected { background: var(--orange); border-color: var(--orange-deep); color: var(--dark); font-weight: 800; }
.kalender__day.is-selected::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid var(--dark);
  border-radius: 3px;
  opacity: .35;
  pointer-events: none;
}
.kalender__day.is-past { background: var(--light); border-color: var(--light-2); color: var(--muted); cursor: default; }
.kalender__day.is-booked {
  background-color: var(--error-bg);
  background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgba(138, 31, 17, .14) 5px 7px);
  border-color: rgba(138, 31, 17, .3);
  color: var(--error-fg);
  cursor: not-allowed;
}
.kalender__day.is-booked::after {
  content: "✕";
  position: absolute;
  right: .25rem;
  top: .15rem;
  font-size: .7rem;
  font-weight: 800;
  line-height: 1;
}
.kalender__day.is-today .kalender__num::after {
  content: "";
  display: block;
  width: .35rem;
  height: .35rem;
  margin: .15rem auto 0;
  border-radius: 50%;
  background: currentColor;
}
.kalender__day.is-today { border-width: 2px; border-color: var(--dark-3); }
.kalender__day.is-today.is-past { border-color: var(--muted); }
.kalender__day:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; z-index: 1; }

/* Rechte Spalte: Legende + gewählter Zeitraum */
.kalender__side { min-width: 0; }
.kalender__legend { list-style: none; display: grid; gap: .5rem .75rem; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0 0 1.25rem; padding: 0; font-size: .92rem; color: var(--dark-3); }
.kalender__legend-item { display: flex; align-items: center; gap: .5rem; }
.kalender__swatch { flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border: 1.5px solid var(--line); border-radius: 4px; background: var(--white); position: relative; }
.kalender__swatch--booked { background-color: var(--error-bg); background-image: repeating-linear-gradient(135deg, transparent 0 4px, rgba(138, 31, 17, .16) 4px 6px); border-color: rgba(138, 31, 17, .3); }
.kalender__swatch--booked::after { content: "✕"; position: absolute; right: .1rem; top: 0; font-size: .55rem; font-weight: 800; color: var(--error-fg); line-height: 1.2; }
.kalender__swatch--past { background: var(--light); border-color: var(--light-2); }
.kalender__swatch--selected { background: var(--orange); border-color: var(--orange-deep); }

.kalender__selection {
  padding: 1.25rem 1.5rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-top: 5px solid var(--orange);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.section--calendar:not(.section--alt) .kalender__selection { background: var(--light); }
.kalender__selection-title { margin-bottom: .4em; font-size: 1.15rem; }
.kalender__selection-text { margin: 0 0 .75rem; font-size: 1rem; }
.kalender__selection-text strong { font-size: 1.1rem; }
.kalender__warning { margin: 0 0 .75rem; padding: .7rem .9rem; border-left: 4px solid var(--error-fg); background: var(--error-bg); color: var(--error-fg); border-radius: var(--radius-sm); font-size: .95rem; }
.kalender__warning[hidden], .kalender__actions [hidden] { display: none; }
.kalender__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.kalender__actions .btn--ghost-dark { padding: .6em 1em; }
.kalender__note { margin: .9rem 0 0; font-size: .9rem; color: var(--muted); }
.kalender-fallback__list { margin-bottom: .5rem; }
.kalender-fallback__hint { margin: 0; color: var(--dark-3); }
@media (prefers-reduced-motion: reduce) { .kalender__day, .kalender__nav-btn { transition: none; } }

/* 11 Einfache Sprache ------------------------------------------------------ */
/* Zwillingsseiten unter /einfach/… (templates/einfach.php) und der Umschalter in Topbar und Fußzeile.
   Nur Farb-Variablen aus :root verwenden (Design wird später ausgetauscht). */

/* Umschalter in der Topbar: eigener Link rechts neben den Öffnungszeiten; margin-left:auto schiebt ihn
   (samt Öffnungszeiten) an den rechten Rand, ohne die bestehenden Topbar-Regeln zu ändern */
.topbar__einfach {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  margin-left: auto;
  padding: .3rem .6rem;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: var(--radius-sm);
  color: inherit;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.topbar__einfach:hover { color: var(--white); border-color: var(--white); text-decoration: underline; }
.topbar__einfach .icon { width: 1.25em; height: 1.25em; }
@media (max-width: 71.99em) { .topbar__einfach { min-height: 44px; } }
@media (max-width: 23.99em) {
  /* sehr schmale Displays: nur das Symbol, der Text bleibt für Vorleseprogramme erhalten */
  .topbar__einfach { padding: .3rem .5rem; }
  .topbar__einfach-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}

/* Fußzeile: „Diese Website in einfacher Sprache“ */
.footer__einfach { margin: 2.5rem 0 0; }
.footer__einfach a { display: inline-flex; align-items: center; gap: .5em; font-weight: 600; padding: .3rem 0; }
.footer__einfach .icon { margin-top: 0; }

/* Seitenkopf der Zwillingsseite */
.einfach-header {
  padding: 2rem 0 2.25rem;
  background: var(--light);
  border-bottom: 1px solid var(--line);
  font-size: 1.25rem;
  line-height: 1.8;
  hyphens: manual;
}
.einfach-header .breadcrumb { color: var(--muted); font-size: 1rem; }
.einfach-header .eyebrow { font-size: .95rem; }
.einfach__title {
  max-width: 38em;
  margin-bottom: .4em;
  font-size: clamp(2rem, 1.5rem + 2vw, 2.6rem);
  line-height: 1.25;
  hyphens: manual;
}
.einfach__intro { max-width: 38em; margin-top: 1rem; color: var(--dark-3); }
.einfach__intro p { margin-bottom: 1em; }

/* Inhalt: große Schrift, Zeilenhöhe 1.8, höchstens 38em je Zeile, linksbündig, keine automatische Silbentrennung */
.einfach {
  padding: 2.5rem 0 3rem;
  font-size: 1.25rem;
  line-height: 1.8;
  text-align: left;
  hyphens: manual;
  overflow-wrap: anywhere;
}
/* linksbündig, aber an der linken Kante des normalen .container (wie Kopfbereich/Brotkrumen) statt am Fensterrand */
.einfach__inner { max-width: calc(38em + 2 * var(--gutter)); margin-left: max(0px, (100% - var(--container) - 2 * var(--gutter)) / 2); }
.einfach h2,
.einfach h3 { hyphens: manual; line-height: 1.3; }
.einfach h2 { margin: 0 0 .6em; font-size: clamp(1.5rem, 1.2rem + 1.2vw, 1.85rem); }
.einfach .prose p { margin-bottom: 1em; }
.einfach .prose ul,
.einfach .prose ol { margin-bottom: 1em; padding-left: 1.2em; }
.einfach .prose li { margin-bottom: .5em; }
.einfach .prose li::marker { color: var(--orange); }
.einfach .prose a { font-weight: 700; text-decoration-thickness: .1em; text-underline-offset: .15em; }

.einfach-section { padding: 0 0 1.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--line); }
.einfach-section:last-of-type { border-bottom: 0; }
.einfach__picture { margin: 0 0 1.25rem; }
.einfach__picture img { width: 100%; border-radius: var(--radius); box-shadow: var(--shadow); }

/* Kontakt-Kasten am Ende: große Buttons untereinander */
.einfach-kontakt {
  margin-top: 2rem;
  padding: 1.5rem 1.25rem 1.75rem;
  background: var(--light);
  border: 1px solid var(--line);
  border-top: 6px solid var(--orange);
  border-radius: var(--radius);
}
.einfach-kontakt h2 { margin-bottom: .4em; }
.einfach-kontakt__text { margin: 0 0 1.25rem; }
.einfach-kontakt__buttons { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.5rem; }
.einfach-kontakt__btn {
  width: 100%;
  min-height: 3.6rem;
  padding: .85em 1.2em;
  font-size: 1.2rem;
  line-height: 1.25;
  justify-content: flex-start;
  text-align: left;
  white-space: normal;
}
.einfach-kontakt__btn .icon { width: 1.4em; height: 1.4em; }
.einfach-kontakt__nr { white-space: nowrap; }
.einfach-kontakt__btn.btn--ghost-dark { background: var(--white); }
.einfach-kontakt__list { list-style: none; display: flex; flex-direction: column; gap: .6rem; font-size: 1.1rem; }
.einfach-kontakt__list li { display: flex; align-items: flex-start; gap: .6rem; }
.einfach-kontakt__list .icon { color: var(--orange-deep); margin-top: .35em; width: 1.25em; height: 1.25em; }
.einfach-kontakt__list a { font-weight: 700; }

/* Liste weiterer Seiten in einfacher Sprache (nur auf /einfach/) */
.einfach-more__list { list-style: none; display: flex; flex-direction: column; gap: .5rem; }
.einfach-more__list a { display: inline-flex; align-items: center; gap: .5em; padding: .35rem 0; font-weight: 700; }
.einfach-more__list .icon { color: var(--orange-deep); }

/* Zurück zur Ursprungsseite */
.einfach__back { margin: 2rem 0 0; }
.einfach__back-link { display: inline-flex; align-items: center; gap: .5em; padding: .5rem 0; font-weight: 700; }
.einfach__back-link .icon { transform: scaleX(-1); color: var(--orange-deep); }

@media (min-width: 40em) {
  .einfach-header { padding: 2.75rem 0 3rem; }
  .einfach { padding: 3.5rem 0 4rem; }
  .einfach-kontakt { padding: 2rem 2rem 2.25rem; }
  .einfach-kontakt__buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 12 Barrierefrei ---------------------------------------------------------- */
/* Barrierefrei-Knopf im Header (.a11y-toggle), Einstellungsdialog (#a11y-dialog), Vorlese-Leiste (.a11y-reader),
   Lese-Lineal (.a11y-lineal) und alle Anzeige-Einstellungen. Logik: assets/js/barrierefrei.js, Startzustand aus
   localStorage vor dem ersten Rendern: assets/js/barrierefrei-init.js. Attribute am <html>:
     data-schrift="1|2|3"          Schrift 115 / 130 / 150 %
     data-farbe="…"                gewählte Farbdarstellung (kontrast-hell, kontrast-dunkel, dunkel, creme, farbenblind)
     data-palette="hell|dunkel"    eigene Farbpalette (alle Farbdarstellungen außer Standard und Farbenblind-sicher)
     data-kontrast="hoch"          zusätzlich nur bei „Kontrast dunkel“ (ältere Regeln in ki-assistent.css/umbau-show.css)
     data-lesen="an"               Lesefreundlich (WCAG 1.4.8 / 1.4.12)
     data-bewegung="reduziert"     Bewegung aus (auch automatisch bei „Bewegung reduzieren“ im System)
     data-lineal="linie|fenster"   Lese-Lineal
   Farbpaletten: Wie beim früheren „Hohen Kontrast“ werden zuerst die Farb-Variablen aus :root (und theme-c.css) auf
   die Palette umgelegt (--p-*), dann wird die Schrift überall auf die Palettenfarbe gesetzt und es folgen gezielte
   Regeln für Stellen mit festen Farben. Jede Palette ist gemessen (Pixelmessung aller Textknoten, alle Seitentypen):
   Kontrast hell/dunkel ≥ 7:1 überall, Dunkelmodus und Creme ≥ 7:1 für Text, Bedienelemente ≥ 3:1. */

/* Knopf im Header: mobil links vom Menü-Button (beide rechts), auf dem Desktop rechts neben der Navigation */
.a11y-toggle {
  display: none;                          /* ohne JS gibt es keinen Dialog – Knopf wie .nav-toggle nur mit JS */
  align-items: center;
  justify-content: center;
  gap: .45rem;
  flex: 0 0 auto;
  min-height: 2.75rem;
  min-width: 2.75rem;
  margin-left: auto;
  padding: .45rem .6rem;
  border: 2px solid #F4F4F2;
  border-radius: var(--radius-sm);
  background: transparent;
  color: #F4F4F2;
  font: inherit;
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.js .a11y-toggle { display: inline-flex; }
.a11y-toggle:hover { border-color: var(--orange); color: var(--orange); }
.a11y-toggle .icon { width: 1.5rem; height: 1.5rem; }
.a11y-toggle__label { display: none; }
/* Der Menü-Button hat margin-left:auto; steht der Barrierefrei-Knopf davor, übernimmt dieser das Auto-Margin */
.a11y-toggle + .nav-toggle { margin-left: 0; }
@media (min-width: 40em) and (max-width: 71.99em) {
  .a11y-toggle { padding: .45rem .8rem .45rem .65rem; }
  .a11y-toggle__label { display: inline; }
}
@media (min-width: 72em) {
  /* Desktop: hinter der Navigation, nur Symbol (Name über aria-label/title) – der 1140-px-Container ist voll */
  .a11y-toggle { order: 1; margin-left: 0; padding: .45rem; }
}
@media (min-width: 80em) {
  /* Navigation minimal enger, damit der Knopf neben ihr Platz hat (sie füllt den Container sonst bis auf 16 px) */
  .nav__link { padding: .6rem .45rem; font-size: .9rem; }
  .btn--nav { padding: .6em .95em; font-size: .9rem; }
  .nav__item--cta { margin-left: .4rem; }
  .nav__sub-toggle { margin-right: .15rem; }
}

/* Schriftstufen: 115 % / 130 % / 150 % über die Wurzelschrift – alle rem-Maße wachsen mit, Breakpoints (em) bleiben */
html[data-schrift="1"] { font-size: 115%; }
html[data-schrift="2"] { font-size: 130%; }
html[data-schrift="3"] { font-size: 150%; }
@media (min-width: 72em) {
  /* Desktop-Navigation darf auf zwei Zeilen umbrechen statt über den Rand zu laufen (auch bei Lesefreundlich) */
  html:is([data-schrift], [data-lesen]) .nav { flex: 1 1 auto; min-width: 0; }
  html:is([data-schrift], [data-lesen]) .nav__list { flex-wrap: wrap; justify-content: flex-end; }
}
@media (max-width: 29.99em) {
  /* Große Schrift auf schmalen Displays: Menü-Button nur mit Symbol (Beschriftung bleibt für Vorleseprogramme) */
  html[data-schrift] .nav-toggle__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  html:is([data-schrift="2"], [data-schrift="3"]) .sticky-bar__btn { font-size: .8rem; gap: .3rem; }
  html:is([data-schrift="2"], [data-schrift="3"]) .sticky-bar__btn .icon { display: none; }
  html[data-schrift="3"] .sticky-bar__btn { font-size: .72rem; padding-left: .25rem; padding-right: .25rem; }
}
@media (max-width: 21.99em) {
  /* Sehr schmale Displays (≤ 352 px): Logo, Barrierefrei- und Menü-Knopf passen nur mit Symbol-Menü in eine Zeile */
  .a11y-toggle + .nav-toggle .nav-toggle__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
}
/* Große Schrift: lange Wörter/Adressen in Textspalten dürfen umbrechen, Raster nie breiter als der Bildschirm */
html:is([data-schrift], [data-lesen]) .prose :is(a, strong) { overflow-wrap: anywhere; }
/* Reflow (WCAG 1.4.10) + Textabstände (1.4.12) auch in der Standardansicht: bei 320 px Breite bzw. erhöhtem
   Zeichen-/Wortabstand dürfen lange Wörter umbrechen und Raster-/Flex-Kinder schrumpfen – sonst verschiebt sich die
   Seite waagerecht (Stellenanzeigen, Städte-Links, Schnellkontakt-Leiste). */
:is(main, .site-footer, .sticky-bar) :is(h1, h2, h3, h4, p, li, dt, dd, a, span, strong, small, b, label, legend, figcaption, summary) { overflow-wrap: break-word; }
@media (max-width: 71.99em) { :is(.jobs, .intro-home) { grid-template-columns: minmax(0, 1fr); } }
/* Einsatzgebiet-Links (theme-c.css): Spalten erst ab 12rem, sonst ragten lange Namen (Gelsenkirchen) bei 320 px heraus */
ul.staedte { grid-template-columns: repeat(auto-fill, minmax(min(12rem, 100%), 1fr)); }
ul.staedte.staedte--kompakt { grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); }
ul.staedte > .staedte__sitz { grid-column: 1 / -1; }
.prose :is(a, strong) { overflow-wrap: anywhere; }
.staedte__link { overflow-wrap: anywhere; }
.sticky-bar__btn > span { white-space: normal; text-align: center; }
:is(.job, .job__head, .job__headline, .anhaenger, .mehr__item, .mehr__link, .downloads__link, .downloads__body, .split__text, .split__media, .form-layout__main, .steps__item, .card, .city-link__body, .staedte__link > span, .sticky-bar__btn > span) { min-width: 0; }
:is(.staedte__link, .sticky-bar__btn, .job__title) > span, .job__title, .job__meta li { overflow-wrap: anywhere; }
html:is([data-schrift], [data-lesen]) :is(main, .site-footer, .a11y-dialog, .a11y-reader, .sticky-bar) :is(h1, h2, h3, h4, p, li, dt, dd, a, span, strong, small, b, label, legend, th, td, summary, button, figcaption) { overflow-wrap: anywhere; }
/* Große Schrift/Lesefreundlich: Knöpfe und Kurzangaben dürfen umbrechen, Raster- und Flex-Kinder dürfen schrumpfen –
   geprüft bei 320 px Breite (entspricht 400 % Zoom) mit „Sehr groß“ + Lesefreundlich ohne waagerechtes Scrollen */
html:is([data-schrift], [data-lesen]) :is(.btn, .sticky-bar__btn, .einfach-kontakt__nr, .eyebrow, .rechner__ticker, .job__meta li, .footer__legal a) { white-space: normal; }
html:is([data-schrift], [data-lesen]) :is(.btn, .sticky-bar__btn) { text-align: center; }
html:is([data-schrift], [data-lesen]) :is(.job, .job__head, .job__headline, .anhaenger, .mehr__item, .mehr__link, .downloads__link, .downloads__body, .split__text, .split__media, .form-layout__main, .form-layout > *, .steps__item, .steps__item > *, .review-layout > *, .card, .city-link__body, .faq__question, .rechner__row, .rechner__label, .kalender__side, .einfach-kontakt__btn) { min-width: 0; }
@media (max-width: 29.99em) {
  html:is([data-schrift="2"], [data-schrift="3"]) :is(.anhaenger-liste, .vergleich) { grid-template-columns: minmax(0, 1fr); }
  html:is([data-schrift="2"], [data-schrift="3"]) .sticky-bar__btn { flex-direction: column; gap: .1rem; padding-top: .35rem; padding-bottom: .35rem; line-height: 1.1; }
}
@media (max-width: 71.99em) {
  html:is([data-schrift], [data-lesen]) .intro-home { grid-template-columns: minmax(0, 1fr); }
}

/* Dialog „Anzeige anpassen“ – Muster wie .rueckruf-dialog */
.a11y-dialog {
  width: min(40rem, calc(100vw - 2rem));
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: var(--white);
  color: var(--text);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
  overflow: auto;
  overscroll-behavior: contain;
}
.a11y-dialog::backdrop { background: rgba(16, 16, 16, .6); }
.a11y-dialog__body { padding: 1.25rem; }
.a11y-dialog__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: .25rem; }
.a11y-dialog__title { display: flex; align-items: center; gap: .5rem; margin: 0; font-size: 1.4rem; }
.a11y-dialog__title .icon { width: 1.5rem; height: 1.5rem; color: var(--orange-deep); }
.a11y-dialog__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin: -.4rem -.5rem 0 0;
  border: 0;
  border-radius: 50%;
  background: var(--light);
  color: var(--dark);
  cursor: pointer;
}
.a11y-dialog__close:hover { background: var(--light-2); }
.a11y-dialog__close .icon { width: 1.3rem; height: 1.3rem; }
.a11y-dialog__text { margin-bottom: .75rem; font-size: .95rem; color: var(--dark-3); }

/* Gruppen: <fieldset> mit <legend> (die Legende wird per float zur normalen Überschriftzeile) */
.a11y-group { min-width: 0; margin: 0; padding: 1rem 0; border: 0; border-top: 1px solid var(--line); }
.a11y-group__label { float: left; width: 100%; margin: 0 0 .55rem; padding: 0; font-size: 1.05rem; font-weight: 700; color: var(--dark); }
.a11y-group__label + * { clear: both; }
.a11y-group__hint { margin: 0 0 .65rem; font-size: .9rem; color: var(--muted); }
.a11y-group__note { margin: .65rem 0 0; padding: .5rem .75rem; border-left: 4px solid var(--orange); background: var(--light); font-size: .9rem; color: var(--dark-3); }
.a11y-group__note[hidden] { display: none; }
.a11y-subgroup { min-width: 0; margin: .9rem 0 0; padding: 0; border: 0; }
.a11y-subgroup__label { float: left; width: 100%; margin: 0 0 .4rem; padding: 0; font-size: .95rem; font-weight: 700; color: var(--dark); }
.a11y-subgroup__label + * { clear: both; }
.a11y-dialog kbd { display: inline-block; padding: 0 .35em; border: 1px solid var(--muted); border-radius: 3px; font: inherit; font-size: .85em; font-weight: 700; line-height: 1.4; }

/* Auswahlfelder: die ganze Beschriftung ist die Klickfläche (≥ 44 px), das native Optionsfeld/Kästchen bleibt sichtbar */
.a11y-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.a11y-choices--row .a11y-choice { flex: 1 1 auto; justify-content: center; }
.a11y-choices--tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(15.5rem, 100%), 1fr)); }
.a11y-choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: .6rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: .5rem .85rem .5rem .7rem;
  border: 2px solid #7C8698;              /* 3,6:1 auf Weiß */
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--dark);
  font-weight: 700;
  line-height: 1.25;
  cursor: pointer;
}
.a11y-choice input { flex: 0 0 auto; width: 1.2rem; height: 1.2rem; margin: 0; accent-color: var(--dark); cursor: pointer; }
.a11y-choice input:focus-visible { outline: none; }
.a11y-choice:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.a11y-choice:hover { border-color: var(--dark); background: var(--light); }
.a11y-choice:has(input:checked) { border-color: var(--dark); background: var(--dark); color: #fff; }
.a11y-choice:has(input:checked) input { accent-color: var(--orange); }
.a11y-choice:has(input:disabled) { cursor: default; }
.a11y-choice__text { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.a11y-choice__desc { font-size: .88rem; font-weight: 400; line-height: 1.35; color: var(--muted); }
.a11y-choice:has(input:checked) .a11y-choice__desc { color: var(--on-dark, #C9D2E3); }
.a11y-choice__desc[hidden] { display: none; }
.a11y-choice--check { flex: 1 1 100%; align-items: flex-start; }
.a11y-choice--check input { margin-top: .1rem; }
.a11y-choice--tile { align-items: center; }
/* Vorschau „Aa“ je Farbdarstellung (feste Farben – sie zeigen die Palette, nicht die gerade aktive) */
.a11y-swatch {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid #7C8698;
  border-radius: 4px;
  font-family: var(--serif, Georgia, serif);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1;
}
:root .a11y-dialog .a11y-choice .a11y-swatch.a11y-swatch--standard { background: #FFFFFF !important; color: #14213D !important; border-bottom: 4px solid #C2410C; }
:root .a11y-dialog .a11y-choice .a11y-swatch.a11y-swatch--kontrast-hell { background: #FFFFFF !important; color: #000000 !important; border: 2px solid #000000; }
:root .a11y-dialog .a11y-choice .a11y-swatch.a11y-swatch--kontrast-dunkel { background: #000000 !important; color: #FFE500 !important; border: 2px solid #FFFFFF; }
:root .a11y-dialog .a11y-choice .a11y-swatch.a11y-swatch--dunkel { background: #0F1729 !important; color: #E6EAF2 !important; border-color: #8E9AB3; }
:root .a11y-dialog .a11y-choice .a11y-swatch.a11y-swatch--creme { background: #FBF6E9 !important; color: #2E2A26 !important; border-color: #7A6E5B; }
:root .a11y-dialog .a11y-choice .a11y-swatch.a11y-swatch--farbenblind { background: #FFFFFF !important; color: #14213D !important; text-decoration: underline 2px; text-underline-offset: .18em; }

.a11y-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr)); gap: .5rem; }
.a11y-option {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45em;
  min-height: 2.75rem;
  padding: .5em 1em;
  border: 2px solid var(--dark);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--dark);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.a11y-option:hover { background: var(--light); }
.a11y-option:disabled { border-color: #A3ABB9; color: var(--muted); cursor: default; background: var(--white); }
.a11y-option .icon { width: 1.2em; height: 1.2em; }
.a11y-stimme { margin-top: .9rem; }
.a11y-stimme[hidden] { display: none; }
.a11y-stimme .a11y-subgroup__label { display: block; float: none; }
.a11y-select { width: 100%; min-height: 2.75rem; padding: .5rem .75rem; border: 2px solid #7C8698; border-radius: var(--radius-sm); background: var(--white); color: var(--text); font: inherit; }
.a11y-status { margin: .75rem 0 0; font-size: .92rem; font-weight: 600; color: var(--dark-3); }
.a11y-status[hidden] { display: none; }

.a11y-dialog__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.a11y-dialog__einfach { display: inline-flex; align-items: center; gap: .5em; min-height: 2.75rem; font-weight: 700; color: var(--link); }
.a11y-dialog__einfach .icon { color: var(--orange-deep); }
.a11y-dialog__reset { min-height: 2.75rem; padding: .55em 1em; }
.a11y-dialog__reset-desc { flex: 1 1 100%; margin: 0; font-size: .85rem; color: var(--muted); text-align: right; }
.a11y-dialog :focus-visible { outline-color: var(--orange-deep); }
@media (max-width: 39.99em) {
  .a11y-dialog { width: calc(100vw - 1rem); max-height: calc(100dvh - 1rem); }
  .a11y-dialog__title { font-size: 1.25rem; }
  .a11y-dialog__reset-desc { text-align: left; }
}
@media (min-width: 40em) { .a11y-dialog__body { padding: 1.75rem 2rem; } }

/* Vorlese-Leiste (während des Vorlesens und bei „Ab hier“) und Markierung des gelesenen Abschnitts */
.a11y-reader {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 70;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  max-width: min(40rem, calc(100vw - 2rem));
  padding: .6rem .75rem;
  border: 1px solid var(--line);
  border-left: 5px solid var(--orange);
  border-radius: var(--radius);
  background: var(--dark);
  color: var(--white);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .3);
}
.a11y-reader[hidden] { display: none; }
.a11y-reader__status { flex: 1 1 12rem; margin: 0 .25rem 0 0; font-size: .95rem; font-weight: 600; color: #fff; }
.a11y-reader__btns { display: flex; flex-wrap: wrap; gap: .4rem; }
.a11y-reader__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  min-height: 2.75rem;
  min-width: 2.75rem;
  padding: .4em .75em;
  border: 2px solid var(--white);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--dark);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}
.a11y-reader__btn[hidden] { display: none; }
.a11y-reader__btn:hover { background: var(--light); }
.a11y-reader__btn:disabled { background: transparent; border-color: #8C97AD; color: #C9D2E3; cursor: default; }
.a11y-reader__btn .icon { width: 1.1em; height: 1.1em; }
.a11y-reader__prev { transform: scaleX(-1); }
.a11y-reader :focus-visible { outline-color: var(--orange); }
@media (max-width: 71.99em) {
  .a11y-reader { left: .5rem; right: .5rem; bottom: calc(var(--leiste-unten-h, 3.4rem) + .5rem); max-width: none; justify-content: space-between; }   /* über der Schnellkontakt-Leiste */
  .a11y-reader__btns { flex: 1 1 100%; }
  .a11y-reader__btn { flex: 1 1 0; min-width: 0; padding-left: .3em; padding-right: .3em; }
}
@media (max-width: 29.99em) {
  .a11y-reader__btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .a11y-reader__btn { font-size: .9rem; gap: .2em; }
  .a11y-reader__btn .icon:not(.a11y-reader__prev):not(:last-child) { display: none; }
  .a11y-reader__btn[data-a11y-vorlesen="vor"] .icon { display: inline-block; }
}
.is-reading { box-shadow: 0 0 0 .4rem var(--orange-soft); border-radius: 4px; }
.is-reading:not(.btn):not(button) { background: var(--orange-soft); }
/* „Ab hier vorlesen“: Absätze beim Überfahren/Fokus markieren */
html.a11y-waehlen main { cursor: pointer; }
html.a11y-waehlen main :is(h1, h2, h3, h4, p, li, dt, dd, blockquote, figcaption, summary, label, legend, address):hover {
  outline: 2px dashed var(--focus); outline-offset: 3px; background: var(--orange-soft);
}

/* Lese-Lineal (barrierefrei.js setzt --lineal-y/--lineal-h): nie klickbar, für Vorleseprogramme unsichtbar */
.a11y-lineal { position: fixed; inset: 0; z-index: 65; pointer-events: none; --lineal-y: 40vh; --lineal-h: 2.2rem; --lineal-farbe: #C2410C; --lineal-dunkel: rgba(14, 23, 43, .6); }
.a11y-lineal > div { position: absolute; left: 0; right: 0; pointer-events: none; }
html:not([data-lineal]) .a11y-lineal { display: none; }
.a11y-lineal__band { top: 0; height: var(--lineal-h); transform: translateY(var(--lineal-y)); }
html[data-lineal="linie"] .a11y-lineal__band { background: rgba(240, 100, 30, .1); border-top: 1px solid rgba(194, 65, 12, .45); border-bottom: 3px solid var(--lineal-farbe); }
html[data-lineal="linie"] :is(.a11y-lineal__oben, .a11y-lineal__unten) { display: none; }
html[data-lineal="fenster"] .a11y-lineal { --fy: calc(var(--lineal-y) - var(--lineal-h) * .6); --fh: calc(var(--lineal-h) * 2.2); }
html[data-lineal="fenster"] .a11y-lineal__band { transform: translateY(var(--fy)); height: var(--fh); border-top: 2px solid var(--lineal-farbe); border-bottom: 2px solid var(--lineal-farbe); }
html[data-lineal="fenster"] .a11y-lineal__oben { top: 0; height: max(0px, var(--fy)); background: var(--lineal-dunkel); }
html[data-lineal="fenster"] .a11y-lineal__unten { top: calc(var(--fy) + var(--fh)); bottom: 0; background: var(--lineal-dunkel); }
@media print { .a11y-lineal, .a11y-reader, .a11y-dialog { display: none !important; } }

/* Lesefreundlich (WCAG 1.4.8 / 1.4.12, BDA Style Guide): mehr Zeilen-, Wort- und Buchstabenabstand, Absätze 2em,
   Zeilen höchstens ~70 Zeichen, linksbündig, keine Kursivschrift, keine Versalien. Unabhängig von der Schriftgröße. */
html[data-lesen] body { line-height: 1.8; letter-spacing: .06em; word-spacing: .16em; }
html[data-lesen] :not(svg, svg *) { font-style: normal !important; text-transform: none !important; }
html[data-lesen] :is(h1, h2, h3, h4, .hero__title, .page-hero__title, .einfach__title) { line-height: 1.35; letter-spacing: .03em; }
html[data-lesen] main :is(p, li, dd, dt, blockquote, figcaption, td, th, .lead, .card__text, .faq__answer) { line-height: 1.8; text-align: left; hyphens: manual; }
html[data-lesen] main :is(p, blockquote, .lead, .section__head, .faq__answer) { max-width: 70ch; }
html[data-lesen] main :is(.prose, .einfach, .job__body, .compact-item, .split__text, .faq__answer) :is(li, dd) { max-width: 70ch; }
html[data-lesen] main p,
html[data-lesen] main .prose :is(ul, ol, blockquote) { margin-bottom: 2em; }
html[data-lesen] main p:last-child { margin-bottom: 0; }
html[data-lesen] .a11y-dialog { letter-spacing: .03em; }
/* Knöpfe dürfen umbrechen statt abgeschnitten zu werden */
html[data-lesen] :is(.btn, .sticky-bar__btn) { white-space: normal; text-align: center; }

/* Bewegung aus: keine Animationen/Übergänge, kein weiches Scrollen, keine Hover-Sprünge */
html[data-bewegung="reduziert"] { scroll-behavior: auto !important; }
html[data-bewegung="reduziert"] *,
html[data-bewegung="reduziert"] *::before,
html[data-bewegung="reduziert"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-bewegung="reduziert"] :is(.btn, .card, .city-link, .downloads__link, .tool-teaser, .mehr__link, .staedte__link, .anhaenger):hover,
html[data-bewegung="reduziert"] .card:hover .card__more .icon { transform: none !important; }

/* Links: in allen Nicht-Standard-Farbdarstellungen unterstrichen (Fließtext ist es immer); Karten unterstreichen den Titel.
   Der aktuelle Menüpunkt ist überall zusätzlich unterstrichen – nicht nur farbig (1.4.1). */
.nav__link[aria-current="page"],
.nav__item.is-current > .nav__link,
.nav__sub a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .35em; }
html[data-farbe] a:not(.btn, .sticky-bar__btn, .skip-link, .logo, .card__link, .city-link, .downloads__link, .tool-teaser, .mehr__link, .staedte__link, .logos__link, .nav__link, .nav__sub a, .a11y-reader a) { text-decoration-line: underline; text-decoration-thickness: max(1px, .07em); text-underline-offset: .18em; }
html[data-farbe] :is(.card__title, .city-link__name, .downloads__title, .tool-teaser__title, .mehr__cta, .staedte__link > span:first-of-type) { text-decoration: underline; text-decoration-thickness: max(1px, .07em); text-underline-offset: .18em; }

/* Zustände nie nur über Farbe (Standard – kleine Zusatzzeichen) */
.form__hint.is-ok::before { content: "✓ "; }
:is(.form__hint, .belegung__hilfe).is-warn::before { content: "! "; font-weight: 800; }

/* Farbenblind-sicher: zusätzliche Muster und Formen für Kalender, Belegungsplan und Auswahl */
html[data-farbe="farbenblind"] .belegung__tag.is-belegt::before { background: repeating-linear-gradient(135deg, var(--dark) 0 5px, #5B6474 5px 8px); }
html[data-farbe="farbenblind"] .belegung__muster--belegt { background: repeating-linear-gradient(135deg, var(--dark) 0 3px, #5B6474 3px 5px); }
html[data-farbe="farbenblind"] .belegung__tag.is-wahl { box-shadow: inset 0 3px 0 var(--dark), inset 0 -3px 0 var(--dark); }
html[data-farbe="farbenblind"] .belegung__tag.is-vorschau { box-shadow: inset 0 -3px 0 var(--dark); }
html[data-farbe="farbenblind"] .belegung__muster--wahl { box-shadow: inset 0 2px 0 var(--dark), inset 0 -2px 0 var(--dark); }
html[data-farbe="farbenblind"] :is(.kalender__day.is-range, .kalender__day.is-preview) { border-style: dashed; border-color: var(--dark); }
html[data-farbe="farbenblind"] .kalender__day.is-selected::before { opacity: 1; }
html[data-farbe="farbenblind"] .kalender__day.is-booked { text-decoration: line-through; }
html[data-farbe="farbenblind"] :is(.form-error, .kalender__warning, .form__notice) { border-left-width: 6px; }
html[data-farbe="farbenblind"] .kalender__warning::before { content: "! "; font-weight: 800; }
html[data-farbe="farbenblind"] .stars__star:not(.is-on) { fill: none; stroke: var(--muted); stroke-width: 1.5; }
html[data-farbe="farbenblind"] :is(.nav__link:hover, .nav__sub a:hover, .site-footer a:hover) { text-decoration: underline; }

/* ---------- Farbpaletten ---------- */
html[data-farbe="kontrast-dunkel"] {
  --p-bg: #000000; --p-alt: #000000; --p-dunkel: #000000; --p-fg: #FFFFFF; --p-muted: #E0E0E0;
  --p-akzent: #FFE500; --p-akzent-hover: #FFF066; --p-on-akzent: #000000;
  --p-flaeche: #262626; --p-flaeche-2: #333333; --p-linie: #FFFFFF; --p-deko: #FFFFFF;
  --p-aus: #BBBBBB; --p-aus-linie: #777777; --p-fehler: #FFE500; --p-rgb: 0, 0, 0;
  --p-belegt: #BBBBBB; --p-schraffur: #5A5A5A;
}
html[data-farbe="kontrast-hell"] {
  --p-bg: #FFFFFF; --p-alt: #FFFFFF; --p-dunkel: #FFFFFF; --p-fg: #000000; --p-muted: #1F1F1F;
  --p-akzent: #7C2D12; --p-akzent-hover: #5A1E08; --p-on-akzent: #FFFFFF;
  --p-flaeche: #EDEDED; --p-flaeche-2: #DADADA; --p-linie: #000000; --p-deko: #000000;
  --p-aus: #595959; --p-aus-linie: #767676; --p-fehler: #A3001B; --p-rgb: 255, 255, 255;
  --p-belegt: #333333; --p-schraffur: #BDBDBD;
}
html[data-farbe="dunkel"] {
  --p-bg: #0F1729; --p-alt: #16213A; --p-dunkel: #0A1020; --p-fg: #E6EAF2; --p-muted: #C3CBDA;
  --p-akzent: #FFB27A; --p-akzent-hover: #FFC89E; --p-on-akzent: #0F1729;
  --p-flaeche: #1E2A45; --p-flaeche-2: #26324F; --p-linie: #8E9AB3; --p-deko: #3A4766;
  --p-aus: #A9B2C3; --p-aus-linie: #6B7894; --p-fehler: #FF9B8A; --p-rgb: 15, 23, 41;
  --p-belegt: #B4BDCC; --p-schraffur: #3A4766;
}
html[data-farbe="creme"] {
  --p-bg: #FBF6E9; --p-alt: #F4ECD8; --p-dunkel: #EFE5CC; --p-fg: #2E2A26; --p-muted: #3A342E;
  --p-akzent: #7A2E0E; --p-akzent-hover: #5E230A; --p-on-akzent: #FBF6E9;
  --p-flaeche: #EFE5CC; --p-flaeche-2: #E9DDC2; --p-linie: #7A6E5B; --p-deko: #D8CBAE;
  --p-aus: #4F473F; --p-aus-linie: #8C7F6A; --p-fehler: #9B1C1C; --p-rgb: 251, 246, 233;
  --p-belegt: #4A433C; --p-schraffur: #D8CBAE;
}

/* Schritt 1: Variablen aus :root (site.css) und theme-c.css auf die Palette legen */
html[data-palette] {
  --orange: var(--p-akzent);
  --orange-hover: var(--p-akzent-hover);
  --orange-deep: var(--p-akzent);
  --orange-soft: var(--p-flaeche);
  --link: var(--p-akzent);
  --dark: var(--p-dunkel);
  --dark-2: var(--p-dunkel);
  --dark-3: var(--p-dunkel);
  --navy-deep: var(--p-dunkel);
  --light: var(--p-alt);
  --light-2: var(--p-flaeche-2);
  --line: var(--p-deko);
  --text: var(--p-fg);
  --muted: var(--p-muted);
  --white: var(--p-bg);
  --focus: var(--p-akzent);
  --cta: var(--p-akzent);
  --cta-hover: var(--p-akzent-hover);
  --on-dark: var(--p-fg);
  --on-dark-accent: var(--p-akzent);
  --whatsapp: var(--p-akzent);
  --whatsapp-hover: var(--p-akzent-hover);
  --error-bg: var(--p-bg);
  --error-fg: var(--p-fehler);
  --shadow: none;
  --shadow-hover: none;
  color-scheme: light;
  background: var(--p-bg);
}
html[data-palette="dunkel"] { color-scheme: dark; }
html[data-palette] body { background: var(--p-bg); color: var(--p-fg); }
/* Schritt 2: --dark/--white sind oben zugleich Text- und Flächenfarbe – deshalb Text generell in der Palettenfarbe,
   ohne Schatten; SVG-Icons bleiben ausgenommen (sie erben currentColor bzw. die Akzentfarbe). */
html[data-palette] :not(svg, svg *) { color: var(--p-fg) !important; box-shadow: none !important; text-shadow: none !important; }
html[data-palette] ::placeholder { color: var(--p-aus) !important; }
html[data-palette] ::selection { background: var(--p-akzent); color: var(--p-on-akzent) !important; }
/* Links in Akzentfarbe */
html[data-palette] a,
html[data-palette] a :not(svg, svg *) { color: var(--p-akzent) !important; }
/* Buttons: Akzentschrift auf Grundfarbe mit Akzentrand … */
html[data-palette] :is(.btn, button, .nav-toggle),
html[data-palette] :is(.btn, button, .nav-toggle) :not(svg, svg *) { color: var(--p-akzent) !important; }
html[data-palette] :is(.btn, button, .nav-toggle) { background-color: var(--p-bg) !important; background-image: none !important; border-color: var(--p-akzent) !important; }
html[data-palette] :is(.btn, button):hover:where(:not(:disabled)) { background-color: var(--p-flaeche) !important; }
html[data-palette] :is(.btn, button):disabled { border-color: var(--p-aus-linie) !important; color: var(--p-aus) !important; }
/* … Hauptaktionen und gewählte Zustände: Grundfarbe auf Akzentfläche */
html[data-palette] :is(.btn--primary, .btn--nav, .sticky-bar__btn, .steps__num, .thanks__icon, .prose .p-cta > a:not([href^="mailto:"], [href^="tel:"], [href$=".pdf"]), .kalender__day.is-selected, .a11y-choice:has(input:checked), .a11y-reader__btn:not(:disabled), .belegung__tag.is-wahl),
html[data-palette] :is(.btn--primary, .btn--nav, .sticky-bar__btn, .steps__num, .thanks__icon, .prose .p-cta > a:not([href^="mailto:"], [href^="tel:"], [href$=".pdf"]), .kalender__day.is-selected, .a11y-choice:has(input:checked), .a11y-reader__btn:not(:disabled), .belegung__tag.is-wahl) :not(svg, svg *) { color: var(--p-on-akzent) !important; }
html[data-palette] :is(.btn--primary, .btn--nav, .sticky-bar__btn, .steps__num, .thanks__icon, .prose .p-cta > a:not([href^="mailto:"], [href^="tel:"], [href$=".pdf"]), .kalender__day.is-selected, .a11y-choice:has(input:checked), .a11y-reader__btn:not(:disabled), .belegung__tag.is-wahl) { background-color: var(--p-akzent) !important; border-color: var(--p-akzent) !important; }
html[data-palette] :is(.btn--primary, .btn--nav, .sticky-bar__btn, .prose .p-cta > a:not([href^="mailto:"], [href^="tel:"], [href$=".pdf"]), .a11y-reader__btn):hover:where(:not(:disabled)) { background-color: var(--p-akzent-hover) !important; }
html[data-palette] .a11y-reader__btn:disabled { background-color: transparent !important; }
html[data-palette] :is(.rueckruf-dialog__close, .a11y-dialog__close) { border: 2px solid var(--p-akzent); }
/* Fokus: überall Akzentfarbe (≥ 7:1 zur Grundfläche); auf Akzentflächen mit innenliegendem Rahmen die Grundfarbe */
html[data-palette] :focus-visible { outline-color: var(--p-akzent) !important; }
html[data-palette] :is(.sticky-bar__btn, .belegung__tag.is-wahl > .belegung__knopf):focus-visible { outline-color: var(--p-on-akzent) !important; }
/* Kopf, Abschnittsgrenzen, Hero-Abdunklung, Dialoge */
html[data-palette] .topbar { background: var(--p-dunkel); border-bottom: 1px solid var(--p-linie); }
html[data-palette] .header-main { background: var(--p-bg); border-bottom: 1px solid var(--p-linie); }
html[data-palette] :is(.section--alt, .usp-bar) { border-top: 1px solid var(--p-deko); border-bottom: 1px solid var(--p-deko); }
html[data-palette] :is(.site-footer, .cta-band) { border-top: 1px solid var(--p-linie); }
/* mind. 80 % Grundfarbe über dem Foto: Schrift bleibt auch über hellen/dunklen Bildstellen ≥ 7:1 */
html[data-palette] :is(.hero__overlay, .page-hero__overlay) { background: linear-gradient(180deg, rgba(var(--p-rgb), .82) 0%, rgba(var(--p-rgb), .9) 40%, rgba(var(--p-rgb), .96) 100%); }
html[data-palette] :is(.hero, .page-hero) { background: var(--p-bg); }
html[data-palette] .page-hero__credit { background: var(--p-bg); padding: 0 .3rem; }
html[data-palette] :is(.rueckruf-dialog, .a11y-dialog) { border: 2px solid var(--p-linie); }
html[data-palette] :is(.rueckruf-dialog, .a11y-dialog)::backdrop { background: rgba(var(--p-rgb), .8); }
html[data-palette="hell"] :is(.rueckruf-dialog, .a11y-dialog)::backdrop { background: rgba(0, 0, 0, .55); }
html[data-palette] .job__badge { border: 1px solid var(--p-linie); }
html[data-palette] .logos__item { background: #fff; }       /* Referenzlogos bleiben auf Weiß erkennbar */
html[data-palette] :is(.card, .city-link, .downloads__link, .tool-teaser, .team__member, .review, .job, .faq__item, .compact-item, .contact-card, .rechner-note, .qr-card, .kalender__selection, .anhaenger, .form__group, .rechner__cat, .vergleich__item, .staedte__link) { border-color: var(--p-linie); }
html[data-palette] :is(.card, .city-link, .downloads__link, .tool-teaser, .team__member, .review, .job, .anhaenger):hover,
html[data-palette] .faq__item[open] { border-color: var(--p-akzent); }
html[data-palette] :is(.card__icon, .downloads__icon, .tool-teaser__icon, .job__icon, .jobs-empty__icon) { background: var(--p-flaeche); border-color: var(--p-deko); color: var(--p-akzent); }
/* Einzelne Flächen mit festen Farben in site.css/theme-c.css */
html[data-palette] :is(.fact-box, .cta-band, .rechner__result, .rechner__ticker, .section--mehr, .rechner-table thead th, .einfach-kontakt, .a11y-reader) { background: var(--p-dunkel); }
html[data-palette] :is(.fact-box, .rechner__result, .rechner__ticker, .einfach-kontakt, .a11y-reader) { border: 1px solid var(--p-linie); }
html[data-palette] :is(.fact-box, .rechner__result) { border-top: 5px solid var(--p-akzent); }
html[data-palette] :is(.a11y-reader, .rechner__ticker) { border-left: 5px solid var(--p-akzent); }
html[data-palette] .page-header { background: var(--p-alt); border-bottom-color: var(--p-deko); }
html[data-palette] .page-header__title::after,
html[data-palette] .section__head h2::after { background: var(--p-akzent); }
html[data-palette] .footer__legal li + li::before { color: var(--p-muted); }
html[data-palette] .belegung__tag { background: var(--p-bg); }
html[data-palette] .belegung__row.is-focus > .belegung__tag:not(.is-belegt):not(.is-wahl):not(.is-vorbei) { background: var(--p-flaeche); }
html[data-palette] .belegung__tag[role="gridcell"] { border-color: var(--p-deko); border-width: 0 1px 1px 0; }
html[data-palette] .belegung__tag > .belegung__knopf { background-color: transparent !important; border: 0 !important; }
html[data-palette] .belegung__tag:not(.is-wahl) > .belegung__knopf:hover { background-color: var(--p-flaeche-2) !important; }
html[data-palette] .belegung__tag.is-belegt::before { background: var(--p-belegt); }
html[data-palette] .belegung__muster--belegt { background: var(--p-belegt); border-color: var(--p-belegt); }
html[data-palette] .belegung__muster--wahl { background: var(--p-akzent); border-color: var(--p-akzent); }
html[data-palette] .belegung__tag.is-vorschau { background: var(--p-flaeche-2); }
html[data-palette] .belegung__row.is-focus > .belegung__name { background: var(--p-flaeche); }
html[data-palette] .belegung__scroll { border-color: var(--p-linie); }
html[data-palette] .steps__num { background: var(--p-akzent); }
html[data-palette] .faq__item[open] { border-left-color: var(--p-akzent); }
html[data-palette] :is(.review, .compact-item, .job, .contact-card, .rechner-note, .qr-card, .kalender__selection, .einfach-kontakt) { border-top-color: var(--p-akzent); }
html[data-palette] .stars__star { fill: var(--p-flaeche-2); }
html[data-palette] .stars__star.is-on { fill: var(--p-akzent); }
/* Formulare */
html[data-palette] :is(.form input, .form select, .form textarea, .rechner__input, .rechner__btn, .a11y-select) { background: var(--p-bg); color: var(--p-fg); border-color: var(--p-linie); }
html[data-palette] :is(.form input, .form select, .form textarea, .rechner__input, .a11y-select):focus { outline: 3px solid var(--p-akzent); outline-offset: 2px; border-color: var(--p-akzent); }
html[data-palette] :is(.form__notice, .form__note, .kalender__warning) { background: var(--p-flaeche); }
html[data-palette] .form-ok { background: var(--p-bg); border-color: var(--p-linie); }
html[data-palette] .form-ok__title .icon { color: var(--p-akzent); }
/* Kalender: freie Tage in Akzentfarbe umrandet, vergangene/belegte mit ✕ bzw. durchgestrichen, Zeitraum als Fläche */
html[data-palette] .kalender__day { border-color: var(--p-akzent) !important; }
html[data-palette] :is(.kalender__day.is-past, .kalender__day.is-booked),
html[data-palette] :is(.kalender__day.is-past, .kalender__day.is-booked) :not(svg, svg *) { color: var(--p-aus) !important; }
html[data-palette] :is(.kalender__day.is-past, .kalender__day.is-booked) { background: var(--p-bg) !important; border-color: var(--p-aus-linie) !important; }
html[data-palette] .kalender__day.is-booked { text-decoration: line-through; }
html[data-palette] :is(.kalender__day.is-range, .kalender__day.is-preview) { background: var(--p-flaeche-2) !important; }
html[data-palette] .kalender__swatch { background-color: var(--p-bg); border-color: var(--p-akzent); }
html[data-palette] .kalender__swatch--booked { background-image: none; border-color: var(--p-aus-linie); }
html[data-palette] .kalender__swatch--booked::after { color: var(--p-aus); }
html[data-palette] .kalender__swatch--past { border-color: var(--p-aus-linie); }
html[data-palette] .kalender__swatch--selected { background: var(--p-akzent); }
/* Vorlesen: Markierung mit Akzentrahmen */
html[data-palette] .is-reading { background: var(--p-flaeche) !important; box-shadow: 0 0 0 .4rem var(--p-flaeche), 0 0 0 calc(.4rem + 2px) var(--p-akzent) !important; }
/* Dialog „Anzeige anpassen“ in der Palette */
html[data-palette] .a11y-choice { border-color: var(--p-linie); background: var(--p-bg); }
html[data-palette] .a11y-choice:hover { background: var(--p-flaeche); }
html[data-palette] .a11y-choice input { color-scheme: light; accent-color: var(--p-akzent); }
html[data-palette] .a11y-group__note { background: var(--p-flaeche); }
html[data-palette] .a11y-dialog kbd { border-color: var(--p-linie); }
/* KI-Assistent (ki-assistent.css) und Start-Banner (umbau-show.css) – dort gibt es nur Regeln für „Kontrast dunkel“ */
html[data-palette] :is(.ki-fab, .ki-send) { background: var(--p-akzent) !important; color: var(--p-on-akzent) !important; border-color: var(--p-akzent) !important; }
html[data-palette] button:is(.ki-fab, .ki-send) :not(svg, svg *) { color: var(--p-on-akzent) !important; }
html[data-palette] .ki-fab__badge { background: var(--p-bg); }
html[data-palette] button.ki-fab .ki-fab__badge { color: var(--p-akzent) !important; }
html[data-palette] :is(.ki-fab, .ki-send):focus-visible { outline-color: var(--p-akzent) !important; outline-offset: 3px; }
html[data-palette] .ki-log:focus-visible { outline: 3px solid var(--p-akzent); outline-offset: -3px; }
html[data-palette] button:is(.ki-fab, .ki-send):hover { background-color: var(--p-akzent-hover) !important; }
html[data-palette] .ki-input { background: var(--p-bg); border: 2px solid var(--p-linie); }
html[data-palette] .ki-input:focus { border-color: var(--p-akzent); }
html[data-palette] :is(.ki-dialog, .ki-card) { border: 2px solid var(--p-linie); }
html[data-palette] :is(.ki-head, .ki-card__icon) { background: var(--p-dunkel); }
html[data-palette] :is(.ki-log, .ki-foot, .ki-msg--bot, .ki-typing, .ki-summary, .ki-card) { background: var(--p-bg); border-color: var(--p-deko); }
html[data-palette] .ki-msg--user { background: var(--p-flaeche); border: 1px solid var(--p-linie); }
html[data-palette] :is(.ki-thanks, .ki-msg--error, .ki-summary__error) { background: var(--p-bg); border: 2px solid var(--p-linie); }
html[data-palette] .ki-typing span { background: var(--p-fg); }
html[data-palette] :is(.umbau-banner, .umbau-hinweis) { background: var(--p-dunkel); border-bottom: 1px solid var(--p-linie); }
html[data-palette] .umbau-banner::after { display: none; }
html[data-palette] .umbau-hinweis { border: 2px solid var(--p-linie); }
html[data-palette] .umbau-hinweis__los { background: var(--p-akzent) !important; border-color: var(--p-akzent) !important; }
html[data-palette] .umbau-hinweis__los,
html[data-palette] .umbau-hinweis__los :not(svg, svg *) { color: var(--p-on-akzent) !important; }
html[data-palette] .umbau-toast { background: var(--p-bg); border: 2px solid var(--p-linie); -webkit-backdrop-filter: none; backdrop-filter: none; }
/* Lese-Lineal in der Palette */
html[data-palette] .a11y-lineal { --lineal-farbe: var(--p-akzent); --lineal-dunkel: rgba(0, 0, 0, .62); }
html[data-palette="hell"] .a11y-lineal { --lineal-dunkel: rgba(20, 20, 20, .5); }
html[data-palette] .a11y-lineal__band { background: transparent !important; }

/* Windows-Kontrastdesign / erzwungene Farben: Rahmen für alle Bedienelemente, Fokus in Systemfarbe,
   Zustände, die sonst nur als Hintergrund sichtbar wären, mit Systemfarben bzw. Mustern */
@media (forced-colors: active) {
  :focus-visible { outline: 3px solid Highlight !important; outline-offset: 2px; }
  :is(.btn, button, .a11y-choice, .sticky-bar__btn, .a11y-reader__btn, .nav-toggle, .a11y-toggle, .rechner__btn, .kalender__day, .belegung__btn, .belegung__heute, .staedte__link, .topbar__einfach) { border: 2px solid ButtonText; }
  :is(.card, .city-link, .downloads__link, .tool-teaser, .mehr__link, .faq__item, .review, .job, .compact-item, .contact-card, .fact-box, .cta-band, .a11y-reader, .a11y-dialog, .rueckruf-dialog, .form-error, .kalender__warning, .form-ok, .job__badge) { border: 1px solid CanvasText; }
  .icon, .skyline { forced-color-adjust: auto; }
  .a11y-choice:has(input:checked) { outline: 3px solid Highlight; outline-offset: -5px; }
  .is-reading { forced-color-adjust: none; background: Mark !important; color: MarkText !important; outline: 3px solid Highlight; }
  .is-reading * { color: MarkText !important; }
  .belegung__tag.is-belegt::before { forced-color-adjust: none; background: CanvasText; }
  :is(.belegung__tag.is-wahl, .kalender__day.is-selected, .belegung__tag--kopf.is-heute) { forced-color-adjust: none; background: Highlight; color: HighlightText; }
  .belegung__tag--kopf.is-heute :is(b, i) { color: HighlightText; }
  .kalender__day.is-booked { text-decoration: line-through; }
  :is(.kalender__day.is-range, .kalender__day.is-preview, .belegung__tag.is-vorschau) { border-style: dashed; }
  :is(.belegung__muster, .kalender__swatch, .belegung__dot, .stars__star, .a11y-swatch) { forced-color-adjust: none; }
  .steps__num, .thanks__icon { border: 2px solid CanvasText; }
  .a11y-lineal { forced-color-adjust: none; }
  .a11y-lineal__band { border-bottom: 3px solid Highlight; background: transparent; }
  :is(.a11y-lineal__oben, .a11y-lineal__unten) { background: rgba(0, 0, 0, .6); }
  .nav__link[aria-current="page"], .nav__item.is-current > .nav__link { text-decoration: underline 3px; }
  a:not(.btn, .sticky-bar__btn) { text-decoration-line: underline; }
}

/* ==========================================================================
   Anhänger-Vermietung: Belegungsplan (vermietung.js) + Anhänger-Kacheln
   Zeilen = Anhänger, Spalten = Tage des Monats. Vergeben = dunkler Balken, Auswahl = Orange.
   ========================================================================== */
.section--belegung { padding-top: 2rem; }
.belegung__head { margin-bottom: 1rem; }
.belegung__bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: .75rem; }
.belegung__nav { display: flex; align-items: center; gap: .4rem; }
.belegung__monat { margin: 0; min-width: 9.5rem; text-align: center; font-size: 1.2rem; font-weight: 800; }
.belegung__btn, .belegung__heute {
  display: inline-flex; align-items: center; justify-content: center; min-width: 2.75rem; min-height: 2.75rem; padding: 0 .8rem;
  border: 2px solid var(--dark); border-radius: 999px; background: var(--white); color: var(--dark); font: inherit; font-weight: 700; cursor: pointer;
}
.belegung__btn .icon { width: 1.2em; height: 1.2em; }
.belegung__btn[data-belegung-prev] .icon { transform: rotate(90deg); }
.belegung__btn[data-belegung-next] .icon { transform: rotate(-90deg); }
.belegung__btn:disabled { border-color: var(--line); color: var(--muted); cursor: default; }
@media (hover: hover) { .belegung__btn:hover:not(:disabled), .belegung__heute:hover { background: var(--dark); color: var(--white); } }
.belegung__legende { display: flex; flex-wrap: wrap; gap: .3rem 1rem; margin: 0 0 0 auto; padding: 0; list-style: none; font-size: .9rem; color: var(--muted); }
.belegung__legende li { display: inline-flex; align-items: center; gap: .4rem; }
.belegung__muster { display: inline-block; width: 1.4rem; height: .9rem; border-radius: 4px; border: 1px solid var(--line); background: var(--white); }
.belegung__muster--belegt { background: var(--dark-3); border-color: var(--dark-3); }
.belegung__muster--wahl { background: var(--orange); border-color: var(--orange-deep); }

.belegung__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); overscroll-behavior-x: contain; }
.belegung__scroll:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.belegung__grid {
  --name: 8.5rem; --tag: 1.9rem;
  display: grid; grid-template-columns: var(--name) repeat(var(--tage, 31), minmax(var(--tag), 1fr));
  min-width: calc(var(--name) + var(--tage, 31) * var(--tag));
}
@media (min-width: 40em) { .belegung__grid { --name: 12rem; --tag: 2rem; } }
.belegung__row { display: contents; }
.belegung__laden { grid-column: 1 / -1; margin: 0; padding: 2rem 1rem; color: var(--muted); text-align: center; }
.belegung__name {
  position: sticky; left: 0; z-index: 2; display: flex; align-items: center; gap: .45rem; min-height: 2.75rem; padding: .35rem .6rem;
  background: var(--white); border-bottom: 1px solid var(--light-2); border-right: 1px solid var(--line);
  font-size: .85rem; font-weight: 700; line-height: 1.2;
}
@media (min-width: 40em) { .belegung__name { font-size: .95rem; } }
.belegung__name--kopf { z-index: 3; font-size: .75rem; letter-spacing: .05em; text-transform: uppercase; color: var(--muted); }
.belegung__dot { flex: 0 0 auto; width: .6rem; height: .6rem; border-radius: 50%; background: var(--muted); }
.belegung__dot--kuehl { background: #2B8FD6; }
.belegung__dot--koffer { background: var(--orange); }
.belegung__dot--plane { background: #5C6B3A; }
.belegung__dot--rad { background: #8C4FB5; }
.belegung__tag {
  position: relative; min-height: 2.75rem; padding: 0; border: 0; border-bottom: 1px solid var(--light-2); border-right: 1px solid var(--light-2);
  background: var(--white); color: inherit; font: inherit;
}
.belegung__tag.is-we { background: #FAF8F4; }
.belegung__tag--kopf { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .05rem; font-size: .7rem; color: var(--muted); line-height: 1.1; }
.belegung__tag--kopf b { font-size: .95rem; color: var(--text); }
.belegung__tag--kopf.is-heute { background: var(--orange); color: var(--dark); border-radius: 6px 6px 0 0; }
.belegung__tag--kopf.is-heute b { color: var(--dark); }
/* Freie Tage: div[role=gridcell] > button.belegung__knopf (füllt die Zelle); vergebene/vergangene Tage: fokussierbare Zelle */
.belegung__knopf { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: inherit; background: transparent; color: inherit; font: inherit; cursor: pointer; }
@media (hover: hover) { .belegung__tag:not(.is-wahl) > .belegung__knopf:hover { background: var(--orange-soft); box-shadow: inset 0 0 0 2px var(--orange); } }
:is(.belegung__knopf, .belegung__tag[data-zelle]):focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; z-index: 1; }
.belegung__tag.is-vorbei { background: repeating-linear-gradient(135deg, var(--light) 0 4px, #EDEDEA 4px 8px); }
.belegung__tag.is-heute:not(.belegung__tag--kopf) { box-shadow: inset 2px 0 0 var(--orange), inset -2px 0 0 var(--orange); }
.belegung__tag.is-belegt::before {
  content: ""; position: absolute; inset: .55rem 0; background: var(--dark-3);
}
.belegung__tag.is-belegt.is-start::before { left: 3px; border-radius: 999px 0 0 999px; }
.belegung__tag.is-belegt.is-ende::before { right: 3px; border-radius: 0 999px 999px 0; }
.belegung__tag.is-belegt.is-vorbei::before { background: #8A8A86; }
.belegung__tag.is-vorschau { background: var(--orange-soft); }
.belegung__tag.is-wahl { background: var(--orange); }
.belegung__tag.is-wahl-start { border-radius: 999px 0 0 999px; }
.belegung__tag.is-wahl-ende { border-radius: 0 999px 999px 0; }
.belegung__tag.is-wahl-start.is-wahl-ende { border-radius: 999px; }
.belegung__row.is-sel > .belegung__name { color: var(--orange-deep); }
.belegung__row.is-focus > .belegung__name { background: var(--orange-soft); }
.belegung__row.is-focus > .belegung__tag:not(.is-belegt):not(.is-wahl) { background: #FFF6EF; }
.belegung__hilfe { margin: .6rem 0 0; font-size: .95rem; color: var(--muted); }
.belegung__hilfe.is-warn { color: var(--error-fg); font-weight: 700; }
.belegung__auswahl {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem 1.5rem;
  margin-top: .9rem; padding: .9rem 1.1rem; border: 2px solid var(--orange); border-radius: var(--radius); background: var(--orange-soft);
}
.belegung__auswahl[hidden] { display: none; }
.belegung__auswahl p { margin: 0; }
.belegung__auswahl-btns { display: flex; flex-wrap: wrap; gap: .5rem; }
.belegung__noscript { padding: 1rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--light); }

.form__radios { border: 0; margin: 0; padding: 0; display: grid; gap: .4rem; }
.form__radios legend { margin-bottom: .35rem; font-weight: 700; }
.form__radios label { display: flex; align-items: center; gap: .55rem; font-weight: 400; }
.form__radios input { width: 1.15rem; height: 1.15rem; accent-color: var(--orange-deep); }
.form__hint.is-ok { color: #1E6B34; font-weight: 700; }
.form__hint.is-warn { color: var(--error-fg); font-weight: 700; }
.form-ok { padding: 1.1rem 1.25rem; border: 2px solid #1E6B34; border-radius: var(--radius); background: #E7F4EA; }
.form-ok[hidden] { display: none; }
.form-ok__title { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; font-weight: 800; color: #1E6B34; }
.form-ok__title .icon { width: 1.3em; height: 1.3em; }
.btn.is-busy { opacity: .6; cursor: progress; }
.contact-card__small { font-size: .9rem; color: var(--muted); }

.anhaenger-liste { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); }
.anhaenger { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.anhaenger__bild { aspect-ratio: 4 / 3; background: var(--light); overflow: hidden; }
.anhaenger__bild picture, .anhaenger__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.anhaenger__bild--leer { display: flex; align-items: center; justify-content: center; color: var(--muted); }
.anhaenger__bild--leer .icon { width: 4rem; height: 4rem; opacity: .55; }
.anhaenger__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .4rem; padding: 1rem 1.1rem 1.2rem; }
.anhaenger__art { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-deep); }
.anhaenger__name { margin: 0; font-size: 1.2rem; }
.anhaenger__kurz { margin: 0; color: var(--muted); }
.anhaenger__details { margin: .2rem 0 0; padding-left: 1.1rem; font-size: .92rem; }
.anhaenger__details li + li { margin-top: .15rem; }
.anhaenger__preis { margin: auto 0 0; padding-top: .5rem; font-weight: 700; }
.anhaenger__btn { align-self: flex-start; }
.belegung__row.is-focus.is-blink > .belegung__name { animation: belegung-blink 1.2s ease 2; }
@keyframes belegung-blink { 50% { background: var(--orange); } }
@media (prefers-reduced-motion: reduce) { .belegung__row.is-focus.is-blink > .belegung__name { animation: none; } }
.belegung__tag--kopf i { font-style: normal; font-size: .62rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--orange-deep); min-height: .8rem; }
.belegung__tag--kopf.is-heute i { color: var(--dark); }
.belegung__tag.is-monat { border-left: 2px solid var(--muted); }
.belegung__monat { min-width: 12rem; font-size: 1.05rem; }
/* Vermietung: kompakter Seitenkopf, damit der Plan sofort sichtbar ist */
.page--vermietung .page-header { padding: 1.1rem 0 1.2rem; }
.page--vermietung .page-header__title { margin-bottom: 0; }
.page--vermietung .page-header .breadcrumb { margin-bottom: .4rem; }
.page--vermietung .section--belegung { padding-top: 1.25rem; }
.belegung__titel { margin: 0 0 .75rem; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.75rem); }
.belegung__hinweis { margin-top: .5rem; font-size: .88rem; color: var(--muted); }
.belegung__hinweis p { margin: 0; }
@media (max-width: 39.99em) {
  .belegung__grid { --name: 6.9rem; --tag: 1.85rem; }
  .belegung__name { font-size: .76rem; padding: .3rem .4rem; gap: .3rem; }
  .belegung__bar { gap: .5rem; }
  .belegung__monat { min-width: 0; flex: 1 1 auto; font-size: .98rem; }
  .belegung__nav { flex: 1 1 100%; justify-content: space-between; }
  .belegung__heute { min-height: 2.4rem; }
  .belegung__legende { margin-left: auto; font-size: .8rem; gap: .2rem .7rem; }
}

/* Startseite „Mehr von uns“ (Wohnungsplaner, Anhänger-Vermietung, Spielhof) */
.section--mehr { background: var(--dark); color: #fff; }
.section--mehr .section__head h2 { color: #fff; }
.section--mehr .eyebrow { color: #F5B98F; }
.mehr__item { display: flex; }
.mehr__item > .mehr__link { flex: 1 1 auto; }
.mehr { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; }
@media (min-width: 48em) { .mehr { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.mehr__link { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: var(--radius); background: #fff; color: var(--text); text-decoration: none; box-shadow: 0 10px 30px rgba(0, 0, 0, .25); transition: transform var(--transition), box-shadow var(--transition); }
@media (hover: hover) { .mehr__link:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .32); } }
.mehr__link:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.mehr__bild { position: relative; display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--light); }
.mehr__bild picture, .mehr__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mehr__live { position: absolute; left: .75rem; bottom: .75rem; padding: .35rem .75rem; border-radius: 999px; background: rgba(255, 255, 255, .92); color: #1E6B34; font-size: .85rem; font-weight: 700; box-shadow: 0 2px 8px rgba(0, 0, 0, .2); }
.mehr__live::before { content: ""; display: inline-block; width: .55rem; height: .55rem; margin-right: .4rem; border-radius: 50%; background: #2FA84F; vertical-align: .05em; }
.mehr__live[hidden] { display: none; }
.mehr__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .4rem; padding: 1.1rem 1.2rem 1.3rem; }
.mehr__label { font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--orange-deep); }
.mehr__title { font-size: 1.3rem; font-weight: 700; line-height: 1.2; color: var(--dark); }
.mehr__text { color: var(--muted); }
.mehr__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; padding-top: .6rem; font-weight: 700; color: var(--orange-deep); }
.mehr__cta .icon { width: 1.1em; height: 1.1em; }
html[data-palette] .section--mehr { background: var(--p-bg); }

/* Vergleichskarten (Standardseiten: compare_items – Lagerarten mit Preis, Außenaufzüge) + technische Daten (auch Anhänger) */
.vergleich { display: grid; gap: 1.25rem; margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40em) { .vergleich { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .vergleich { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 62em) {
  /* 4 Karten: 2 × 2, Bild links neben den Daten (4 schmale Spalten wären für die Datentabellen zu eng) */
  .vergleich--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .vergleich--4 .vergleich__item { flex-direction: row; }
  .vergleich--4 .vergleich__bild { flex: 0 0 40%; aspect-ratio: auto; height: auto; min-height: 15rem; }
}
.vergleich__item { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--white); box-shadow: var(--shadow); }
.vergleich__bild { aspect-ratio: 3 / 2; background: var(--light); overflow: hidden; }
.vergleich__bild picture, .vergleich__bild img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vergleich__bild--leer { display: flex; align-items: center; justify-content: center; aspect-ratio: auto; height: 7rem; color: var(--muted); }
.vergleich__bild--leer .icon { width: 4rem; height: 4rem; opacity: .5; }
.vergleich__body { display: flex; flex: 1 1 auto; flex-direction: column; gap: .5rem; padding: 1rem 1.1rem 1.2rem; }
.vergleich__art { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-deep); }
.vergleich__name { margin: 0; font-size: 1.25rem; }
.vergleich__text { margin: 0; color: var(--muted); }
.vergleich__preis { display: flex; flex-direction: column; gap: .1rem; margin: auto 0 0; padding: .75rem 1rem; border-radius: var(--radius-sm); background: var(--orange-soft); }
.vergleich__preis-label { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--orange-deep); }
.vergleich__preis-wert { font-size: 1.6rem; font-weight: 800; line-height: 1.15; color: var(--dark); }
.vergleich__hinweis { margin-top: 1rem; font-size: .92rem; color: var(--muted); }
.vergleich__hinweis p { margin: 0; }
.daten { margin: .15rem 0 .35rem; font-size: .92rem; }
.daten__row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .1rem 1rem; padding: .32rem 0; border-bottom: 1px solid var(--line); }
.daten__row:first-child { border-top: 1px solid var(--line); }
.daten dt { font-weight: 700; color: var(--dark); }
.daten dd { margin: 0 0 0 auto; text-align: right; font-variant-numeric: tabular-nums; }
.anhaenger .daten { margin-top: .3rem; font-size: .86rem; }
html[data-palette] .vergleich__item { border-color: var(--p-linie); }
html[data-palette] .vergleich__preis { background: var(--p-bg); border: 2px solid var(--p-linie); }
html[data-palette] .daten__row { border-color: var(--p-linie); }
@media (min-width: 62em) { .vergleich--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 40em) { .steps--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ==========================================================================
   Barrierefreiheit – Nachbesserungen 30.09.2026 (A11Y-AUDIT.md GLB-01, GLB-02, FRM-01/02)
   ========================================================================== */

/* GLB-02: Hoher Kontrast – alle Text-/Flächenpaare ≥ 7:1, Bedienelemente und Fokus sichtbar */
/* Startseite „Mehr von uns“: Karten hatten fest #fff als Fläche (gelber Text auf Weiß) */
html[data-palette] .mehr__link { background: var(--p-bg); border: 2px solid var(--p-linie); }
html[data-palette] .mehr__link:hover { border-color: var(--p-akzent); }
html[data-palette] .mehr__bild { background: var(--p-bg); }
html[data-palette] .mehr__live { background: var(--p-bg); border: 1px solid var(--p-linie); }
/* Belegungsplan: Spalte „heute“ (gelbe Fläche → schwarze Schrift), vergangene Tage dunkel schraffiert,
   gewählte (gelbe) Tage mit schwarzem Fokusrahmen, Heute-Spalte mit gelben Seitenlinien statt Schatten */
html[data-palette] .belegung__tag--kopf.is-heute,
html[data-palette] .belegung__tag--kopf.is-heute :not(svg, svg *) { color: var(--p-on-akzent) !important; }
html[data-palette] .belegung__tag--kopf.is-heute { background: var(--p-akzent); }
html[data-palette] .belegung__tag.is-vorbei { background: repeating-linear-gradient(135deg, var(--p-bg) 0 4px, var(--p-schraffur) 4px 8px); }
html[data-palette] .belegung__tag.is-heute:not(.belegung__tag--kopf) { border-left: 2px solid var(--p-akzent); }
html[data-palette] .belegung__tag.is-wahl > .belegung__knopf:focus-visible { outline-color: var(--p-on-akzent) !important; }
html[data-palette] .belegung__name { border-color: var(--p-linie); }
/* Deaktivierte Schaltflächen: einheitlich hellgrau statt halbtransparent gelb */
html[data-palette] :is(.btn, button):disabled :not(svg, svg *) { color: var(--p-aus) !important; }
html[data-palette] :is(.btn, button):disabled { opacity: 1; }
/* Skyline-Zeichnung: war schwarz auf schwarz */
html[data-palette] .skyline,
html[data-palette] .skyline--footer { color: var(--p-fg); opacity: 1; }
html[data-palette] .skyline .skyline__akzent { color: var(--p-akzent); }
html[data-palette] .skyline :is(.skyline__fein, .skyline__name) { opacity: 1; }
/* Fokus: gelbe Schaltflächen mit innenliegendem Rahmen bekommen einen schwarzen Rahmen */
html[data-palette] .sticky-bar__btn:focus-visible { outline-color: var(--p-on-akzent); }
html[data-palette] .skip-link { background: var(--p-bg); border: 2px solid var(--p-akzent); }
html[data-palette] .job__badge { background: var(--p-bg); }
html[data-palette] .staedte__link--sitz { background: var(--p-bg); border-color: var(--p-linie); }

/* GLB-01: Fokus nicht verdeckt – oben klebt die Kopfleiste, unten liegen mobil die Schnellkontakt-Leiste und
   darüber der KI-Knopf, auf dem Desktop nur der KI-Knopf; im Umzugsrechner (mobil) zusätzlich die klebende
   Summenleiste. Die Höhen stehen als Variablen hier, scroll-padding rechnet sie zusammen: Browser-Scrollen
   (Tab, scrollIntoView, Sprungmarken) hält so genug Abstand; site.js (Abschnitt 10) korrigiert zusätzlich
   nach jedem Fokuswechsel. */
:root {
  --kopf-h: calc(var(--header-h) + 3px);   /* klebende Kopfleiste inkl. 3-px-Linie unten (theme-c.css) */
  --leiste-unten-h: 0px;                   /* Schnellkontakt-Leiste (.sticky-bar), nur mobil */
  --ki-knopf-platz: 4.5rem;                /* KI-Knopf: 3rem hoch + 1,5rem Abstand (ki-assistent.css) */
  --klebe-unten-h: 0px;                    /* weitere klebende Leisten unten (Summenleiste des Rechners) */
}
@media (max-width: 71.99em) {
  :root { --leiste-unten-h: calc(3.4rem + env(safe-area-inset-bottom, 0px)); --ki-knopf-platz: 3.75rem; }
  :root:has(.rechner__ticker) { --klebe-unten-h: 6rem; }   /* Summenleiste bis 2 Zeilen; KI-Knopf sitzt darüber */
}
/* Desktop mit großer Schrift: die Navigation bricht in eine zweite Zeile um, die Kopfleiste wird höher */
@media (min-width: 72em) { html[data-schrift="2"] { --kopf-h: calc(var(--header-h) + 3px + 2.5rem); } }
html {
  scroll-padding-top: calc(var(--kopf-h) + 1rem);
  scroll-padding-bottom: calc(var(--leiste-unten-h) + var(--ki-knopf-platz) + var(--klebe-unten-h) + 1rem);
}

/* FRM-01/02: Fehlerliste über dem Formular und dauerhafte Fehlertexte unter den Feldern (site.js Abschnitt 3).
   Farbe #8A1F11 auf Weiß ≈ 9:1; zusätzlich Symbol „!“ und dicker Rand – nicht nur über die Farbe erkennbar. */
.form-error__title { margin: 0; }
.form-error__list { margin: .5rem 0 0; padding-left: 1.25rem; list-style: disc; font-weight: 500; }
.form-error__list li + li { margin-top: .25rem; }
.form-error__list a { color: inherit; text-decoration: underline; text-underline-offset: .15em; }
.form-error:focus { outline: 3px solid var(--error-fg); outline-offset: 2px; }
.form__error { display: flex; align-items: flex-start; gap: .45rem; margin: .1rem 0 .25rem; color: var(--error-fg); font-size: .95rem; font-weight: 600; line-height: 1.35; }
.form__error-icon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--error-fg); color: #fff; font-size: .8rem; font-weight: 800; line-height: 1; }
.form .form__field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--error-fg); border-width: 2px; }   /* stärker als theme-c.css */
.form input[type="checkbox"][aria-invalid="true"] { outline: 2px solid var(--error-fg); outline-offset: 2px; }
.form-error[data-fehler-liste] { margin-bottom: 1rem; }
html[data-palette] .form-error { border: 2px solid var(--p-fehler); }
html[data-palette] .form__error-icon { background: var(--p-fehler); }
html[data-palette] .form__error-icon, html[data-palette] .form__error .form__error-icon { color: var(--p-on-akzent) !important; }
html[data-palette] .form .form__field :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--p-fehler); border-width: 3px; }
html[data-palette] .form-error__list a { color: var(--p-akzent) !important; }

/* ==========================================================================
   Barrierefreiheit – Kontrast & Fokus, 2. Runde 30.09.2026 (A11Y-AUDIT.md GLB-01, GLB-02, COL-01–03)
   Geprüft per Pixelmessung aller Textknoten (Hintergrund aus dem echten Bild, Text ausgeblendet) auf allen
   Seiten in 1366 und 390 px, Standard- und Kontrastmodus, plus Menüs, Dialoge, KI-Chat und Formularfehler.
   ========================================================================== */

/* Belegungsplan: lange Anhängernamen („Planenanhänger“) liefen mobil über die Namensspalte in die Tageszellen
   (Text auf grauen Balken, 1,9:1 im Kontrastmodus / 4,2:1 normal) – jetzt Umbruch innerhalb der Spalte */
.belegung__name { overflow-wrap: anywhere; hyphens: auto; }
/* Fokussierte Tageszelle nicht unter der klebenden Namensspalte oder am Rand abschneiden (2.4.11): Abstand =
   Namensspalte + eine Tagesbreite bzw. rechts eine Tagesbreite – teilweise verdeckte Zellen werden so ganz sichtbar
   gescrollt (der Browser scrollt beim Fokus nur, wenn die Zelle außerhalb des freien Bereichs liegt) */
.belegung__scroll { scroll-padding-left: calc(8.5rem + 2.75rem + 3px); scroll-padding-right: calc(2.75rem + 3px); }
@media (min-width: 40em) { .belegung__scroll { scroll-padding-left: calc(12rem + 2.75rem + 3px); } }
@media (max-width: 39.99em) { .belegung__scroll { scroll-padding-left: calc(6.9rem + 2.75rem + 3px); } }

/* Formulare: Platzhalter war #8A8A86 auf Weiß (3,5:1) → --muted (≥ 5,5:1 auf Weiß und Hellgrau) */
.form input::placeholder,
.form textarea::placeholder { color: var(--muted); }

/* 2.4.7/2.4.11/2.4.13 Fokus: überall mind. 3 px, ≥ 3:1 zu den angrenzenden Farben, nicht abgeschnitten */
/* Kontaktleiste: der Rahmen lag oben außerhalb des Fensters und unten unter der Hauptleiste → nach innen */
.topbar a:focus-visible,
.topbar button:focus-visible { outline-offset: -3px; }
/* Eingabefelder: statt nur blassem Schatten (1,6:1) derselbe 3-px-Rahmen wie überall (#B8470C, 5,3:1 auf Weiß) */
.form :is(input, select, textarea):focus-visible,
.form :is(input, select, textarea)[aria-invalid="true"]:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.rechner__input:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
/* Aufklappbare Kategorien im Rechner (overflow:hidden am Rahmen schnitt den Fokus ab) → innenliegend */
.rechner__cat-head:focus-visible { outline-offset: -3px; }
/* Video: .video schneidet den Rahmen des Players ab → Rahmen am Container */
.video:has(:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; }
/* Schnellkontakt-Leiste: weißer Fokusrahmen war auf dem weißen Rückruf-Knopf unsichtbar */
.sticky-bar__btn--callback:focus-visible,
.sticky-bar__btn--whatsapp:focus-visible { outline-color: var(--dark); }

/* GLB-02 Kontrastmodus: leere Kästchen/Optionsfelder waren dunkelgrau auf Schwarz (≈ 2,6:1) → hell mit gelber
   Auswahl (Rand ≥ 7:1, Haken schwarz auf Gelb) */
html[data-palette] input:is([type="radio"], [type="checkbox"]) { color-scheme: light; accent-color: var(--p-akzent); }

/* Mobiles Menü: Fokusrahmen der Untermenü-Links nicht vom Scrollbereich abschneiden (30.09.2026) */
@media (max-width: 71.99em) {
  .nav__link:focus-visible, .nav__sub a:focus-visible, .nav__sub-toggle:focus-visible { outline-offset: -3px; }
}

/* ==========================================================================
   2.5.5 Zielgröße (AAA): alle Bedienelemente mindestens 44 × 44 px (30.09.2026)
   Geprüft per Skript auf allen Seiten in 1366 und 390 px (auch Menü und Dialoge). Ausgenommen nach 2.5.5:
   Links mitten im Fließtext („inline“), die Tageszellen des Belegungsplans (/vermietung/, gleichwertige Eingabe über
   die Datumsfelder des Anfrageformulars darunter). :root erhöht die Spezifität über theme-c.css (wird später geladen).
   ========================================================================== */
:root .topbar__inner { min-height: 2.75rem; }
:root .topbar__list a,
:root .topbar__einfach { min-height: 2.75rem; }
:root .logo { min-height: 2.75rem; min-width: 2.75rem; }
:root .a11y-toggle { min-height: 2.75rem; min-width: 2.75rem; }
:root .nav-toggle { min-height: 2.75rem; }
:root .nav__link,
:root .nav__sub a { min-height: 2.75rem; }
:root .nav__sub a { display: flex; align-items: center; }
:root .nav__sub-toggle { display: inline-flex; align-items: center; justify-content: center; min-height: 2.75rem; min-width: 2.75rem; }
:root .nav__item--has-sub > .nav__link--button.nav__sub-toggle { justify-content: space-between; }
@media (min-width: 72em) { :root .nav__item--has-sub > .nav__link--button.nav__sub-toggle { justify-content: center; } }
:root .btn--nav,
:root .btn { min-height: 2.75rem; }
:root .nav__contact a { min-height: 2.75rem; }
:root .breadcrumb a { padding: .7rem .1rem; margin: -.7rem -.1rem; }
/* Fußzeile: Link-Listen als Blöcke mit 44 px Höhe (statt 31 px), Abstand dafür 0 */
:root .footer__links { gap: 0; }
:root :is(.footer__links a, .footer__legal a, .footer__address a, .footer__social, .footer__einfach a) { display: inline-flex; align-items: center; min-height: 2.75rem; min-width: 2.75rem; padding-top: 0; padding-bottom: 0; margin-top: 0; margin-bottom: 0; }
:root .footer__address p { align-items: center; min-height: 2.75rem; margin-bottom: 0; }
:root .footer__address p > .icon { margin-top: 0; }
:root .footer__social { margin-top: .75rem; }
:root .footer__einfach { margin-top: 1.75rem; }
/* Inhalt: freistehende Links (Kontaktkarten, Team, Link-Listen) */
:root :is(.team__contact a, .contact-card__social, .rechner__ticker-link, .einfach-more__list a, .einfach__back-link, .einfach-kontakt__list a, .reviews__link) { display: inline-flex; align-items: center; min-height: 2.75rem; }
:root .team__contact { gap: 0; }
:root .prose li > a:only-child,
:root .prose li > strong:only-child > a:only-child,
:root .prose .p-cta > a:is([href^="mailto:"], [href^="tel:"], [href$=".pdf"]) { display: inline-block; padding: .6rem 0; }
:root .prose li:has(> a:only-child, > strong:only-child > a:only-child) { margin-bottom: 0; }
:root .rechner__btn { width: 2.75rem; height: 2.75rem; }
:root .rechner__input { height: 2.75rem; }
:root .belegung__heute { min-height: 2.75rem; }
:root .form__radios label { min-height: 2.75rem; }
:root fieldset.form__field > label:has(> input[type="radio"]) { display: flex; align-items: center; gap: .55rem; min-height: 2.75rem; }
/* 1.4.10 Umbruch bei 320 px (400 % Zoom) auch ohne Einstellungen: Schnellkontakt-Leiste und Stellenanzeigen liefen
   um 5–10 px über den Rand */
@media (max-width: 21.99em) {
  .sticky-bar__btn { white-space: normal; text-align: center; font-size: .8rem; }
  main :is(h1, h2, h3, h4, p, li, a, dt, dd) { overflow-wrap: anywhere; }
  :is(.job, .job__head, .job__headline) { min-width: 0; }
}
/* Große Schrift auf schmalen Displays: Schnellkontakt-Leiste nicht mehr fest am unteren Rand (sie würde sonst einen
   großen Teil des Bildschirms verdecken), sondern am Seitenende; Knöpfe mit weniger Innenabstand; Titel begrenzt */
@media (max-width: 29.99em) {
  html:is([data-schrift="2"], [data-schrift="3"]) { --leiste-unten-h: 0px; }
  html:is([data-schrift="2"], [data-schrift="3"]) .sticky-bar { position: static; }
  html:is([data-schrift="2"], [data-schrift="3"]) .site-footer { padding-bottom: 1.5rem; }
  html:is([data-schrift="2"], [data-schrift="3"]) .sticky-bar__btn { flex-direction: row; min-height: 3.4rem; font-size: .85rem; }
  html:is([data-schrift="2"], [data-schrift="3"]) .btn { padding-left: .8em; padding-right: .8em; }
  html:is([data-schrift="2"], [data-schrift="3"]) :is(h1, .hero__title, .page-hero__title, .einfach__title) { font-size: min(2rem, 12vw); }
  html:is([data-schrift="2"], [data-schrift="3"]) h2 { font-size: min(1.6rem, 9.5vw); }
}
@media (min-width: 72em) { html:is([data-schrift="3"], [data-schrift="2"][data-lesen], [data-schrift="3"][data-lesen]) { --kopf-h: calc(var(--header-h) + 3px + 4.5rem); } }

/* ==========================================================================
   Belegungsplan & Umzugsrechner – Tastatur/Screenreader (A11Y-AUDIT.md WID-01, WID-02; 30.09.2026)
   ========================================================================== */
/* Hinweiszeile unter dem Plan (Formular als Alternative + Tastenbelegung) */
.belegung__tipp { margin: .35rem 0 0; font-size: .92rem; color: var(--muted); }
.belegung__tipp a { color: var(--link); }
/* Zielgröße 2.5.5 (AAA): auf allen Geräten (Maus und Touch) ist jede Tageszelle bzw. ihr Knopf ≥ 44 × 44 px.
   Spalte = 44 px + 1 px Trennlinie rechts + bis zu 2 px Linie links (Monatsanfang / „heute“ im Farbmodus), Zeile = 44 px
   + 1 px Trennlinie unten. Wie viele Tage nebeneinander passen, rechnet vermietung.js aus (fitSpan). */
:root .belegung__grid { --tag: calc(2.75rem + 3px); }
:root .belegung__tag:not(.belegung__tag--kopf) { min-height: calc(2.75rem + 1px); }
.belegung__scroll { scroll-padding-right: calc(2.75rem + 3px); }
/* Umzugsrechner: Ansage je Änderung in eigener, unsichtbarer Statusmeldung (vermeidet das Vorlesen des ganzen Kastens) */
.rechner__status { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ==========================================================================
   Hauptmenü bei großer Schrift / Lesefreundlich auf dem Desktop (01.10.2026)
   Passt die Desktop-Navigation nicht in eine Zeile neben Logo und Barrierefrei-Knopf (Schriftstufen 1–3,
   Lesefreundlich, längere Beschriftungen aus dem Bearbeiten-Bereich), setzt site.js (initNavFit) html.nav-eng:
   Dann gilt auch ab 72em das mobile Menü (Menü-Knopf, aufklappbare Liste) – statt zweizeiliger Leiste und
   Untermenüs, die über den rechten Rand ragen. Die Regeln spiegeln die mobilen aus site.css (5) und theme-c.css.
   ========================================================================== */
@media (min-width: 72em) {
  html.nav-eng .header-main__inner { flex-wrap: wrap; gap: .5rem; }
  html.nav-eng .a11y-toggle { order: 0; margin-left: auto; padding: .3rem; border-left: 0; }
  html.nav-eng .nav-toggle { display: inline-flex; padding: .35rem .75rem; border-width: 1.5px; border-radius: var(--radius); font-size: .95rem; }
  html.nav-eng .nav-toggle .icon { width: 1.2rem; height: 1.2rem; }
  html.nav-eng .nav {
    display: none !important;
    flex: 1 1 100% !important;
    padding: .5rem 0 1.25rem;
    border-top: 1px solid var(--line);
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
  }
  html.nav-eng .nav.is-open { display: block !important; }
  html.nav-eng .nav__list { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 0; }
  html.nav-eng .nav__item { border-bottom: 1px solid var(--light-2); }
  html.nav-eng .nav__item--has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  html.nav-eng .nav__item--has-sub > .nav__link { flex: 1 1 auto; }
  html.nav-eng .nav__item--has-sub > .nav__sub { flex: 1 1 100%; }
  html.nav-eng .nav__link { padding: .8rem .25rem; font-family: var(--serif); font-size: 1.08rem; text-transform: none; letter-spacing: 0; white-space: normal; }
  html.nav-eng .nav__item--has-sub > .nav__link--button.nav__sub-toggle { justify-content: space-between; padding: .8rem .25rem; }
  html.nav-eng .nav__sub-toggle { margin-right: 0; }
  html.nav-eng .nav__sub-toggle .icon { width: 1.3rem; height: 1.3rem; }
  html.nav-eng .nav__sub,
  html.nav-eng .nav__item:hover > .nav__sub { display: none; position: static; min-width: 0; padding: 0 0 .5rem .75rem; border: 0; border-radius: 0; box-shadow: none; background: none; }
  html.nav-eng .nav__item.is-open > .nav__sub { display: block; }
  html.nav-eng .nav__sub a { padding: .55rem .75rem; white-space: normal; color: var(--dark-3); }
  html.nav-eng .nav__sub a[aria-current="page"] { color: var(--orange-deep); }
  html.nav-eng .nav__item--cta { order: 99; margin-left: 0; border-bottom: 0; padding-top: 1rem; }
  html.nav-eng .nav__item--cta .btn { width: 100%; white-space: normal; }
  html.nav-eng .nav__contact { display: flex; flex-direction: column; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: .95rem; }
  html.nav-eng .nav__contact a { display: inline-flex; align-items: center; gap: .5em; color: var(--dark); text-decoration: none; }
  html.nav-eng .nav__contact .icon { color: var(--orange-deep); }
  html.nav-eng :is(.nav__link, .nav__sub a, .nav__sub-toggle):focus-visible { outline-offset: -3px; }
  /* Kopfleiste bleibt einzeilig (die Regeln für die zweizeilige Leiste oben gelten hier nicht) */
  html.nav-eng { --kopf-h: calc(var(--header-h) + 3px + .5rem); }
}

/* ==========================================================================
   WCAG-2.2-Prüfung 01.10.2026 (Prüfliste in der Erklärung zur Barrierefreiheit)
   ========================================================================== */
/* 2.5.5 Zielgröße: „Einfache Sprache“ in der Kopfzeile zeigt auf schmalen Displays nur das Symbol – trotzdem 44 × 44 px */
:root .topbar__einfach { min-width: 2.75rem; justify-content: center; }
/* 2.4.12 Fokus nicht verdeckt: Das Zahlenfeld im Umzugsrechner liegt 1,5 px über den ±-Knöpfen – der fokussierte
   Knopf bzw. das fokussierte Feld kommt nach vorn, damit Rahmen und Fokus ganz sichtbar sind */
.rechner__btn:focus-visible, .rechner__input:focus-visible { position: relative; z-index: 1; }
/* Tabelle in Texten (Prüfliste der Erklärung zur Barrierefreiheit): scrollt bei Bedarf in einem eigenen,
   beschrifteten und per Tastatur erreichbaren Bereich (1.4.10 erlaubt das für Datentabellen) */
.tabelle { max-width: 100%; overflow-x: auto; margin: 0 0 1.5rem; border: 1px solid var(--line); border-radius: var(--radius-sm, 6px); }
.tabelle:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.tabelle table { width: 100%; min-width: 36rem; border-collapse: collapse; font-size: .95rem; line-height: 1.5; }
.tabelle caption { padding: .75rem 1rem; text-align: left; font-weight: 700; caption-side: top; max-width: calc(100vw - 2rem - 2px); box-sizing: border-box; }
.tabelle th, .tabelle td { padding: .55rem .75rem; border-top: 1px solid var(--line); text-align: left; vertical-align: top; }
.tabelle thead th { background: var(--light, #F4F4F2); border-top: 0; }
.tabelle tbody th { font-weight: 600; white-space: nowrap; }
html[data-palette] .tabelle thead th { background: var(--p-bg) !important; color: var(--p-fg) !important; }
html[data-palette] .tabelle, html[data-palette] .tabelle :is(th, td) { border-color: var(--p-linie) !important; }