/* Design C – „Klassisch & seriös“ (Marine + Orange-Akzent, Serifen-Überschriften)
   Kundenentscheidung 28.09.2026: gilt für ALLE Seiten (layout.php bindet diese Datei nach site.css ein).
   Reines Override-Stylesheet, kein Skript. Dieselbe Datei liegt als public/design-test/theme-c.css für die
   Design-Testseiten – beide Dateien bitte immer identisch halten.

   Grundsätze
   - Farben laufen möglichst über die Variablen aus site.css (--dark, --white, --light …). Die Farbdarstellungen
     des Barrierefrei-Menüs (html[data-palette], site.css Abschnitt 12) belegen genau diese Variablen um – dadurch
     bleiben sie ohne Zusatzregeln lesbar. Feste Farbwerte nur dort, wo site.css selbst feste Werte setzt; diese
     Stellen fängt site.css Abschnitt 12 ab.
   - Marine #14213D ist die neue „dunkle“ Farbe (Kopfleiste, Fußzeile, Überschriften, dunkle Flächen),
     Orange bleibt Akzent und Farbe der Hauptaktion.
   - Hauptknöpfe: Orange #C2410C mit weißer Schrift (5,2:1, WCAG AA). Das hellere Logo-Orange #F0641E hätte mit
     weißer Schrift nur 3,2:1 – es bleibt deshalb für Linien, Symbole und Flächen mit Marine-Schrift (5,0:1).
   - Kopfbereich: kompakt wie zuletzt mit dem Kunden abgestimmt (Logo 26/30 px hoch, Kopfleiste 56/62 px,
     Kontaktleiste 32 px, Menü rechtsbündig, „Angebot anfordern“ als letzter Punkt, Barrierefrei-Knopf ganz rechts). */

:root {
  --dark: #14213D;
  --dark-2: #1C2B4D;
  --dark-3: #2E3A57;
  --navy-deep: #0E172B;
  --light: #F3F5F9;
  --light-2: #E7EBF2;
  --line: #D9DEE8;
  --text: #1F2937;
  --muted: #5B6474;
  --cta: #C2410C;             /* Hauptknopf: weiße Schrift 5,2:1 */
  --cta-hover: #9A3412;       /* weiße Schrift 7,3:1 */
  --on-dark: #C9D2E3;         /* Fließtext auf Marine: 10,5:1 */
  --on-dark-accent: #F5B98F;  /* Akzent/Überschrift auf Marine: 9,3:1 */
  --radius: 6px;
  --radius-sm: 4px;
  --shadow: 0 1px 2px rgba(20, 33, 61, .06);
  --shadow-hover: 0 10px 24px rgba(20, 33, 61, .12);
  --focus: #B8470C;
  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Book Antiqua", serif;
  --header-h: 56px;
}

/* ---- 1) Typografie ---- */
h1, h2, h3,
.hero__title, .page-hero__title, .page-header__title, .fact-box__big, .cta-band__title, .card__title, .team__name,
.contact-card__title, .rechner-note__title, .kalender__selection-title, .form__title, .einfach__title,
.a11y-dialog__title, .rueckruf-dialog__title, .job__title, .anhaenger__name, .belegung__titel, .qr-card__title {
  font-family: var(--serif);
  font-weight: 700;
  letter-spacing: 0;
}
h1 { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.6rem); line-height: 1.12; }
.eyebrow { letter-spacing: .14em; }
.lead { color: var(--dark-3); }

/* Abschnittsüberschrift: schmale Marine-Linie statt dickem Orange-Balken */
.section__head h2::after { width: 2.5rem; height: 2px; border-radius: 0; background: var(--dark); }
.section--alt { background: var(--light); }

/* Aufzählungszeichen und Links: dunkles Orange (AA auf Weiß und Hellgrau) */
.prose li::marker { color: var(--orange-deep); }

/* ---- 2) Knöpfe ---- */
.btn { border-radius: var(--radius-sm); }
.btn--primary { background: var(--cta); border-color: var(--cta); color: #fff; }
.btn--primary:hover { background: var(--cta-hover); border-color: var(--cta-hover); color: #fff; box-shadow: 0 6px 16px rgba(154, 52, 18, .28); }
.btn--dark:hover { background: var(--dark-2); border-color: var(--dark-2); }
.btn--ghost-dark:hover { background: var(--dark); border-color: var(--dark); color: var(--white); }
.prose .p-cta > a:not([href^="mailto:"]):not([href^="tel:"]):not([href$=".pdf"]) { background: var(--cta); color: #fff; }
.prose .p-cta > a:not([href^="mailto:"]):not([href^="tel:"]):not([href$=".pdf"]):hover { background: var(--cta-hover); color: #fff; }

/* ---- 3) Kopfbereich (Kontaktleiste + Hauptleiste) ---- */
/* Kontaktleiste: Marine, schmal */
.topbar { background: var(--dark); color: var(--on-dark); font-size: .8rem; }
.topbar .icon { color: var(--on-dark-accent); }
.topbar__inner { min-height: 32px; padding-top: 0; padding-bottom: 0; gap: 0 1.25rem; }
.topbar__list { gap: 0 1.25rem; }
.topbar__list a { min-height: 32px; padding: 0; }
.topbar__list a:hover { color: #fff; }
.topbar__einfach { min-height: 32px; margin-left: auto; padding: 0; border: 0; border-radius: 0; font-weight: 600; color: #E5EAF3; }
.topbar__einfach:hover { color: #fff; border: 0; }
.topbar__hours { padding-left: 1.25rem; border-left: 1px solid rgba(201, 210, 227, .25); }
@media (max-width: 71.99em) {
  .topbar__list a, .topbar__einfach { min-height: 40px; }
  .topbar__inner { min-height: 40px; }
  .topbar__hours { padding-left: 0; border-left: 0; }   /* bricht auf Tablets in eine eigene Zeile um */
}

/* Hauptleiste: weiß mit Marine-Linie unten */
.header-main { background: var(--white); border-bottom: 3px solid var(--dark); box-shadow: 0 2px 10px rgba(20, 33, 61, .06); }
.header-main__inner { min-height: 56px; gap: .5rem; }
.logo { padding: 0; color: var(--dark); }
.logo__picture img, .logo > img { width: auto; height: 26px; max-width: 110px; object-fit: contain; }

.nav__link { color: var(--dark); font-weight: 600; }
.nav__link:hover,
.nav__link[aria-current="page"],
.nav__item.is-current > .nav__link { color: var(--orange-deep); }
.nav__sub-toggle { color: var(--dark); }
.nav__item.is-current > .nav__sub-toggle,
.nav__item:hover > .nav__sub-toggle,
.nav__item.is-open > .nav__sub-toggle { color: var(--orange-deep); }
.nav__sub a { color: var(--dark); }
.nav__sub a:hover { background: var(--light); color: var(--dark); }
.nav__sub a[aria-current="page"] { color: var(--orange-deep); }

/* Barrierefrei-Knopf nur als Symbol, Menü-Knopf mit dünnem Rahmen */
.a11y-toggle { min-height: 2.5rem; min-width: 2.5rem; padding: .3rem; border: 0; background: transparent; color: var(--dark); }
.a11y-toggle:hover { color: var(--orange-deep); }
.a11y-toggle .icon { width: 1.4rem; height: 1.4rem; }
.a11y-toggle__label { display: none !important; }
.nav-toggle { border-color: var(--dark); background: transparent; color: var(--dark); }
.nav-toggle:hover { border-color: var(--orange-deep); color: var(--orange-deep); }
.site-header a:focus-visible,
.site-header button:focus-visible { outline-color: var(--orange-deep); }

/* Mobil/Tablet: aufgeklapptes Menü hell auf Weiß */
@media (max-width: 71.99em) {
  .a11y-toggle { margin-left: auto; }
  .nav-toggle { padding: .35rem .75rem; border-width: 1.5px; border-radius: var(--radius); font-size: .95rem; }
  .nav-toggle .icon { width: 1.2rem; height: 1.2rem; }
  .nav { border-top-color: var(--line); }
  .nav__item { border-bottom-color: var(--light-2); }
  .nav__link { font-family: var(--serif); font-size: 1.08rem; }
  .nav__sub a { color: var(--dark-3); }
  .nav__sub a:hover { background: var(--light); color: var(--dark); }
  .nav__sub a[aria-current="page"] { color: var(--orange-deep); }
  .nav__contact { border-top-color: var(--line); }
  .nav__contact a { color: var(--dark); }
  .nav__contact .icon { color: var(--orange-deep); }
}

/* Desktop: Menü rechtsbündig, Versalien, „Angebot anfordern“ zuletzt, Barrierefrei ganz rechts */
@media (min-width: 72em) {
  :root { --header-h: 62px; }
  .header-main__inner { min-height: 62px; gap: 1rem; }
  .logo__picture img, .logo > img { height: 30px; max-width: 124px; }
  .nav { flex: 1 1 auto !important; }
  .nav__list { justify-content: flex-end; gap: .15rem; }
  .nav__link { padding: .4rem .55rem; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; }
  .nav__item--cta { order: 99; margin-left: .6rem; }
  .btn--nav { padding: .5rem 1rem; font-size: .88rem; }
  .a11y-toggle { order: 2; margin-left: .25rem; padding-left: .85rem; border-left: 1px solid var(--line); border-radius: 0; }
  .nav__sub { border: 1px solid var(--line); border-top: 3px solid var(--orange); border-radius: 0 0 var(--radius) var(--radius); }
}
@media (min-width: 72em) and (max-width: 79.99em) {
  .logo__picture img, .logo > img { height: 26px; max-width: 108px; }
  .nav__link { padding: .4rem .4rem; font-size: .76rem; letter-spacing: .04em; }
  .btn--nav { padding: .45rem .75rem; font-size: .84rem; }
}

/* ---- 4) Startseiten-Hero und Seitenköpfe ---- */
.hero, .page-hero { background: var(--dark); }
/* Abdunklung oben etwas kräftiger (30.09.2026): Brotkrumen, Dachzeile und Titel liegen über hellen Fotostellen
   sonst unter 4,5:1 (gemessen 3,1–4,5:1) */
.hero__overlay { background: linear-gradient(180deg, rgba(20, 33, 61, .55) 0%, rgba(20, 33, 61, .76) 50%, rgba(20, 33, 61, .96) 100%); }
.page-hero__overlay { background: linear-gradient(180deg, rgba(20, 33, 61, .65) 0%, rgba(20, 33, 61, .76) 50%, rgba(20, 33, 61, .94) 100%); }
.hero--plain .hero__overlay { background: linear-gradient(135deg, #1C2B4D, #0E172B); }
.hero__title { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.8rem); line-height: 1.08; max-width: 13em; }
.page-hero__title { font-size: clamp(1.9rem, 1.35rem + 2.2vw, 2.8rem); line-height: 1.1; }
.hero__subtitle { font-family: var(--serif); font-style: italic; font-size: 1.35rem; color: #E5EAF3; }
.eyebrow--light { color: var(--on-dark-accent); text-shadow: none; letter-spacing: .14em; }
.page-hero .breadcrumb { color: #E5EAF3; }
.btn--light { background: transparent; border-color: #fff; color: #fff; }
.btn--light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; color: #fff; }
.hero a:focus-visible, .page-hero a:focus-visible { outline-color: var(--on-dark-accent); }

/* Seitenkopf ohne Foto: hellgrau, Marine-Titel mit kurzer Orange-Linie, dünne Marine-Kante unten */
.page-header { background: var(--light); border-bottom: 1px solid var(--line); }
.page-header__title::after { content: ""; display: block; width: 2.5rem; height: 3px; margin-top: .45em; background: var(--orange); }
.page-header--thanks .page-header__title::after { margin-left: auto; margin-right: auto; }
.page-header .breadcrumb { color: var(--muted); }
.page-header .breadcrumb a { color: var(--dark-3); }

/* USP-Leiste */
.usp-bar { background: var(--white); color: var(--dark); border-bottom: 1px solid var(--line); }
.usp-bar__list { font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.usp-bar .icon { color: var(--orange-deep); }

/* ---- 5) Inhaltsbausteine ---- */
.card { border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.card:hover { transform: none; border-color: var(--dark); box-shadow: var(--shadow-hover); }
.card__icon { background: var(--light); color: var(--dark); border-radius: 50%; border: 1px solid var(--line); }
.card__more { color: var(--orange-deep); }
.card__text { color: var(--dark-3); }

.fact-box { background: var(--dark); color: var(--on-dark); border-top: 5px solid var(--orange); border-radius: var(--radius); }
.fact-box__big { color: var(--on-dark-accent); }
.fact-box__list li { border-top-color: rgba(201, 210, 227, .18); }
.fact-box__list .icon { color: var(--on-dark-accent); }
.fact-box .btn--dark { color: var(--dark); }

.split__media picture, .split__media img { border-radius: var(--radius); box-shadow: var(--shadow-hover); }

.city-link, .downloads__link, .tool-teaser { box-shadow: none; }
.city-link:hover, .downloads__link:hover, .tool-teaser:hover { transform: none; border-color: var(--dark); box-shadow: var(--shadow-hover); }
.city-link .icon { color: var(--orange-deep); }
.city-link__name { font-family: var(--serif); }
.downloads__icon, .tool-teaser__icon, .job__icon, .jobs-empty__icon { background: var(--light); color: var(--dark); border: 1px solid var(--line); }

.logos__item { border-color: var(--line); }

.team__member { box-shadow: none; }
.team__role { color: var(--orange-deep); }
.team__contact .icon { color: var(--orange-deep); }

.review { box-shadow: none; border-top: 3px solid var(--dark); }
.review__quote { font-family: var(--serif); font-style: italic; color: var(--dark-3); }
.stars__star.is-on { fill: var(--orange); }

.faq__item { box-shadow: none; }
.faq__item[open] { border-color: var(--dark); border-left: 3px solid var(--orange); }
.faq__question { color: var(--dark); }
.faq__chevron { color: var(--orange-deep); }

.steps__num { background: var(--dark); color: #fff; font-family: var(--serif); }

.compact-item { border-top: 3px solid var(--dark); }

.cta-band { background: var(--dark); color: var(--on-dark); border-top: 5px solid var(--orange); }
.cta-band__copy a { color: var(--on-dark-accent); }
.cta-band a:focus-visible { outline-color: var(--on-dark-accent); }

.contact-card, .rechner-note, .qr-card { background: var(--light); border-top: 4px solid var(--dark); border-radius: var(--radius); }
.contact-card__list .icon, .contact-card__social .icon, .form__note .icon { color: var(--orange-deep); }
.contact-card__list a, .contact-card__social { color: var(--dark); }

.job { border-top: 4px solid var(--dark); box-shadow: none; }
.job__meta .icon { color: var(--orange-deep); }

/* ---- 6) Formulare ---- */
.form__group { border-color: var(--line); border-radius: var(--radius); }
.form__group legend { color: var(--dark); }
.form input[type="text"],
.form input[type="email"],
.form input[type="tel"],
.form input[type="number"],
.form input[type="date"],
.form select,
.form textarea,
.rechner__input,
.rechner__btn { border-color: #7C8698; }       /* Rahmen 3,6:1 auf Weiß */
.form input:focus,
.form select:focus,
.form textarea:focus,
.rechner__input:focus { border-color: var(--dark); box-shadow: 0 0 0 1px var(--dark), 0 0 0 4px rgba(240, 100, 30, .45); }
.form__notice { border-left-color: var(--orange); }
.rechner__btn:hover { background: var(--light); }

/* Umzugsrechner */
.rechner-table__cat th { color: var(--dark); }
.rechner__cat { box-shadow: none; }
.rechner__cat-head { font-family: var(--serif); }
.rechner__cat-head .icon { color: var(--orange-deep); }
.rechner__result, .rechner__ticker { background: var(--dark); color: var(--on-dark); }
.rechner__total, .rechner__ticker-total { color: var(--on-dark-accent); }
.rechner__total-label, .rechner__disclaimer { color: var(--on-dark); }
.rechner__ticker-link:hover { color: var(--on-dark-accent); }

/* Verfügbarkeitskalender (Kühlanhänger) */
.kalender__caption { font-family: var(--serif); }
.kalender__selection { box-shadow: none; border-top: 4px solid var(--dark); }
.kalender__day.is-today { border-color: var(--dark); }

/* Anhänger-Vermietung: Belegungsplan + Kacheln (vergebene Tage als Marine-Balken) */
.belegung__scroll { border-color: var(--line); }
.belegung__monat { font-family: var(--serif); }
.belegung__tag.is-we { background: #F6F8FB; }
.belegung__tag.is-belegt::before { background: var(--dark); }
.belegung__muster--belegt { background: var(--dark); border-color: var(--dark); }
.belegung__row.is-focus > .belegung__tag:not(.is-belegt):not(.is-wahl) { background: #FFF6EF; }
.anhaenger { box-shadow: none; }
.anhaenger:hover { border-color: var(--dark); box-shadow: var(--shadow-hover); }

/* ---- 7) Fußzeile, Leiste unten, Dialoge ---- */
.site-footer { background: var(--navy-deep); color: var(--on-dark); }
.site-footer a:hover { color: var(--on-dark-accent); }
.footer__heading { font-family: var(--serif); color: var(--on-dark-accent); text-transform: none; letter-spacing: 0; font-size: 1.15rem; }
.footer__subheading { color: #fff; }
.site-footer .icon { color: var(--on-dark-accent); }
.footer__bottom { border-top-color: rgba(201, 210, 227, .18); color: #AEB8CC; }   /* 8,4:1 */
.footer__legal a { color: #E5EAF3; }

/* Schnellkontakt-Leiste (mobil): Anrufen = Hauptaktion in Orange, Rückruf weiß, WhatsApp grün */
.sticky-bar { background: var(--dark); box-shadow: 0 -4px 18px rgba(20, 33, 61, .25); }
.sticky-bar__btn { background: var(--cta); color: #fff; }
.sticky-bar__btn:hover { background: var(--cta-hover); color: #fff; }
.sticky-bar__btn--callback { background: var(--white); color: var(--dark); }
.sticky-bar__btn--callback:hover { background: var(--light); color: var(--dark); }
.sticky-bar__btn--whatsapp { background: var(--whatsapp); color: var(--dark); }
.sticky-bar__btn--whatsapp:hover { background: var(--whatsapp-hover); color: var(--dark); }

.rueckruf-dialog::backdrop, .a11y-dialog::backdrop { background: rgba(14, 23, 43, .62); }
.rueckruf-dialog, .a11y-dialog { border-top: 4px solid var(--dark); }
.a11y-option:hover { background: var(--light); }
.a11y-reader { background: var(--dark); }

/* Einfache Sprache */
.einfach-kontakt { border-top-color: var(--dark); }
.einfach-header .breadcrumb a { color: var(--dark-3); }

::selection { background: var(--dark); color: #fff; }

/* ---- 8) Farbdarstellungen (Kontrast hell/dunkel, Dunkelmodus, Creme) ----
   Stehen gesammelt in site.css Abschnitt 12 (html[data-palette] …): Sie belegen die Variablen dieser Datei
   (--navy-deep, --cta, --on-dark …) mit um und schlagen die festen Farbwerte hier über die höhere Spezifität. */

/* Kleine Zwischenüberschriften in Stellenanzeigen bleiben in der Grundschrift (Serifen erst ab Titelgröße) */
.job__body h2, .job__body h3 { font-family: var(--font); }

/* Startseite „Mehr von uns“ */
.mehr__title { font-family: var(--serif); }
.section--mehr { background: #14213D; border-top: 5px solid var(--orange); }

/* ---- Stadtseiten (29.09.2026): Einsatzgebiet-Links und Bildnachweis im Seitenkopf ---- */
.section--staedte { background: var(--white, #fff); border-top: 1px solid var(--line); }
.staedte__text { color: var(--muted); margin-top: .5rem; max-width: 42rem; }
.staedte { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fill, minmax(min(10rem, 45%), 1fr)); }
.staedte__link {
  display: flex; align-items: center; gap: .55rem; padding: .8rem 1rem; min-height: 44px;
  border: 1px solid var(--line); border-radius: var(--radius); background: var(--light);
  color: var(--dark); font-weight: 600; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.staedte__link .icon, .staedte__link svg { width: 1.15rem; height: 1.15rem; flex: none; color: var(--orange-deep, #C2410C); }
.staedte__link small { font-weight: 400; color: var(--muted); margin-left: auto; font-size: .8rem; }
.staedte__link:hover, .staedte__link:focus-visible { border-color: var(--dark); box-shadow: var(--shadow-hover); transform: translateY(-1px); }
.staedte__link--sitz { background: var(--dark); color: var(--white, #fff); border-color: var(--dark); }
.staedte__link--sitz small { color: var(--on-dark); }
.staedte__link--sitz svg { color: var(--on-dark-accent); }
.page-hero__credit {
  position: absolute; right: .6rem; bottom: .4rem; z-index: 2; margin: 0; max-width: 60%;
  font-size: .7rem; line-height: 1.3; color: rgba(255, 255, 255, .78); text-align: right; text-shadow: 0 1px 2px rgba(0, 0, 0, .6);
}
@media (prefers-reduced-motion: reduce) { .staedte__link { transition: none; } .staedte__link:hover { transform: none; } }

/* ---- Skyline-Linie (eigene Zeichnung): Startseite „Regional für Sie da“ und oberer Rand der Fußzeile ---- */
.skyline { display: block; width: 100%; height: auto; color: var(--dark-3); }
.skyline .skyline__fein { stroke-width: 1.2; opacity: .75; }
.skyline .skyline__akzent { color: var(--orange-deep, #B8470C); }
.skyline .skyline__boden { stroke-width: 2.5; }
.section--cities { padding-bottom: 0; }
.section--cities .skyline-wrap { max-width: 1200px; margin: 2.5rem auto 0; padding: 0 1rem; }
.footer__skyline { max-width: 1200px; margin: 0 auto 1.25rem; padding: 1.75rem 1rem 0; }
/* Fußzeile: früher opacity .55 auf der ganzen Zeichnung – die Ortsnamen hatten damit nur 3,3:1. Jetzt dieselben
   gedämpften Linienfarben als feste Werte (= alte Mischfarbe), die Schrift voll in --on-dark (≥ 7:1). */
.skyline--footer { color: #757E90; opacity: 1; }
.skyline--footer .skyline__akzent { color: #8D7062; }
.skyline.skyline--footer :is(.skyline__name, .skyline__schrift) { fill: var(--on-dark); }
@media (max-width: 40em) {
  .footer__skyline { padding-top: 1.25rem; }
  .section--cities .skyline-wrap { margin-top: 1.75rem; }
}
.staedte__sitz { grid-column: span 2; }
@media (max-width: 30em) { .staedte__link { padding: .7rem .75rem; font-size: .95rem; gap: .4rem; } }
.staedte--kompakt { grid-template-columns: repeat(auto-fill, minmax(min(10.5rem, 45%), 1fr)); gap: .5rem; margin-top: 1.25rem; }
.staedte--kompakt .staedte__link { background: var(--white, #fff); padding: .6rem .85rem; font-size: .95rem; }
/* Skyline: Ortsnamen und Schriftzug (SVG-Text) */
.skyline .skyline__name { fill: currentColor; stroke: none; font: 600 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .8; }
.skyline .skyline__schrift { fill: currentColor; stroke: none; font: 700 11px/1 system-ui, -apple-system, "Segoe UI", sans-serif; letter-spacing: .12em; }
.skyline-wrap, .footer__skyline { overflow: hidden; }
@media (max-width: 48em) {
  /* Auf dem Handy nicht winzig schrumpfen: Mitte zeigen, Ränder abschneiden */
  .skyline-wrap .skyline, .footer__skyline .skyline { width: 760px; max-width: none; margin-left: 50%; transform: translateX(-50%); }
}