:root {
  --auswahl-plum-900: #1c1116;
  --auswahl-plum-800: #2a1a22;
  --auswahl-plum-700: #402431;
  --auswahl-plum-600: #6b2d4f;
  --auswahl-plum-500: #8a3c66;
  --auswahl-gold-500: #c9a227;
  --auswahl-gold-400: #dbb840;
  --auswahl-sage-600: #3d5a45;
  --auswahl-sage-500: #557a5e;
  --auswahl-cream-100: #faf6f0;
  --auswahl-cream-200: #f3ebdf;
  --auswahl-ink-900: #191215;
  --auswahl-gray-400: #b8adae;
  --auswahl-gray-600: #6d6164;
  --auswahl-white: #ffffff;

  --auswahl-font-display: "Cormorant Garamond", "Georgia", serif;
  --auswahl-font-body: "Inter", "Segoe UI", system-ui, sans-serif;

  --auswahl-radius-sm: 6px;
  --auswahl-radius-md: 14px;
  --auswahl-radius-lg: 28px;
  --auswahl-shadow-soft: 0 18px 40px rgba(28, 17, 22, 0.12);
  --auswahl-shadow-strong: 0 26px 60px rgba(28, 17, 22, 0.28);
  --auswahl-transition: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--auswahl-font-body);
  color: var(--auswahl-ink-900);
  background-color: var(--auswahl-cream-100);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .auswahl-display {
  font-family: var(--auswahl-font-display);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--auswahl-plum-800);
}

h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.15; }
h3 { font-size: clamp(1.35rem, 2.2vw, 1.9rem); }

p { color: var(--auswahl-plum-800); }

a {
  color: var(--auswahl-plum-600);
  text-decoration: none;
  transition: color var(--auswahl-transition);
}

a:hover { color: var(--auswahl-gold-500); }

.auswahl-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--auswahl-gold-500);
  font-weight: 600;
  margin-bottom: 0.9rem;
}

.auswahl-section {
  padding: clamp(3.5rem, 8vw, 7.5rem) 0;
  position: relative;
}

.auswahl-section--dark {
  background-color: var(--auswahl-plum-900);
  color: var(--auswahl-cream-100);
}

.auswahl-section--dark h2,
.auswahl-section--dark h3,
.auswahl-section--dark p {
  color: var(--auswahl-cream-100);
}

.auswahl-section--cream { background-color: var(--auswahl-cream-200); }

.auswahl-section--photo {
  color: var(--auswahl-cream-100);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.auswahl-section--photo h1,
.auswahl-section--photo h2,
.auswahl-section--photo h3,
.auswahl-section--photo p,
.auswahl-section--photo .auswahl-lead {
  color: var(--auswahl-white);
}

.auswahl-lead {
  font-size: clamp(1.05rem, 1.4vw, 1.25rem);
  max-width: 62ch;
}

/* ---------- Header ---------- */

.auswahl-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  background-color: rgba(28, 17, 22, 0.82);
  backdrop-filter: blur(14px);
  transition: background-color var(--auswahl-transition), padding var(--auswahl-transition);
  padding: 0.85rem 0;
}

.auswahl-header.is-scrolled {
  background-color: rgba(28, 17, 22, 0.97);
  padding: 0.45rem 0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.auswahl-header__brand img {
  display: block;
}

.auswahl-header__meta {
  font-size: 0.84rem;
  color: var(--auswahl-cream-200);
}

.auswahl-header__meta span + span { margin-left: 1.1rem; }

.auswahl-nav__link {
  color: var(--auswahl-cream-100);
  font-size: 0.94rem;
  letter-spacing: 0.04em;
  padding: 0.45rem 0.85rem;
  position: relative;
}

.auswahl-nav__link::after {
  content: "";
  position: absolute;
  left: 0.85rem;
  right: 0.85rem;
  bottom: 0.2rem;
  height: 2px;
  background-color: var(--auswahl-gold-500);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--auswahl-transition);
}

.auswahl-nav__link:hover::after,
.auswahl-nav__link.active::after { transform: scaleX(1); }

.auswahl-nav__toggle {
  border: 1px solid rgba(250, 246, 240, 0.4);
  color: var(--auswahl-cream-100);
  background: transparent;
  border-radius: var(--auswahl-radius-sm);
  padding: 0.4rem 0.7rem;
}

/* ---------- Buttons ---------- */

.auswahl-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.9rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform var(--auswahl-transition), background-color var(--auswahl-transition), color var(--auswahl-transition);
}

.auswahl-btn--gold {
  background-color: var(--auswahl-gold-500);
  color: var(--auswahl-plum-900);
}

.auswahl-btn--gold:hover {
  background-color: var(--auswahl-gold-400);
  color: var(--auswahl-plum-900);
  transform: translateY(-3px);
}

.auswahl-btn--ghost {
  border-color: var(--auswahl-cream-100);
  color: var(--auswahl-cream-100);
}

.auswahl-btn--ghost:hover {
  background-color: var(--auswahl-cream-100);
  color: var(--auswahl-plum-900);
  transform: translateY(-3px);
}

.auswahl-btn--plum {
  background-color: var(--auswahl-plum-600);
  color: var(--auswahl-white);
}

.auswahl-btn--plum:hover {
  background-color: var(--auswahl-plum-500);
  color: var(--auswahl-white);
  transform: translateY(-3px);
}

/* ---------- Hero slider ---------- */

.auswahl-hero {
  position: relative;
  min-height: 92vh;
  display: flex;
  align-items: center;
  color: var(--auswahl-white);
}

.auswahl-hero .carousel-item {
  min-height: 92vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: center;
}

.auswahl-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(28, 17, 22, 0.72) 0%, rgba(28, 17, 22, 0.35) 45%, rgba(28, 17, 22, 0.85) 100%);
}

.auswahl-hero__content {
  position: relative;
  z-index: 2;
  padding: 8rem 0 5rem;
}

.auswahl-hero h1,
.auswahl-hero p { color: var(--auswahl-white); }

.auswahl-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1.1rem;
  border: 1px solid rgba(250, 246, 240, 0.5);
  border-radius: 999px;
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--auswahl-cream-100);
}

.carousel-control-prev,
.carousel-control-next { width: 6%; }

/* ---------- Cards ---------- */

.auswahl-card {
  background-color: var(--auswahl-white);
  border-radius: var(--auswahl-radius-md);
  overflow: hidden;
  height: 100%;
  box-shadow: var(--auswahl-shadow-soft);
  transition: transform var(--auswahl-transition), box-shadow var(--auswahl-transition);
}

.auswahl-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--auswahl-shadow-strong);
}

.auswahl-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--auswahl-plum-700);
}

.auswahl-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.auswahl-card__body { padding: 1.6rem 1.6rem 1.9rem; }

.auswahl-card__tag {
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--auswahl-sage-600);
  font-weight: 600;
}

.auswahl-card__price {
  font-family: var(--auswahl-font-display);
  font-size: 1.5rem;
  color: var(--auswahl-plum-600);
}

.auswahl-feature {
  padding: 2rem 1.7rem;
  border-radius: var(--auswahl-radius-md);
  background-color: var(--auswahl-cream-200);
  height: 100%;
  border: 1px solid rgba(107, 45, 79, 0.12);
}

.auswahl-feature__icon {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--auswahl-plum-600);
  color: var(--auswahl-cream-100);
  font-size: 1.3rem;
  margin-bottom: 1.1rem;
}

/* ---------- Stats ---------- */

.auswahl-stat {
  text-align: center;
  padding: 1.5rem 1rem;
}

.auswahl-stat__value {
  font-family: var(--auswahl-font-display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  color: var(--auswahl-gold-500);
  display: block;
  line-height: 1;
}

.auswahl-stat__label {
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  color: var(--auswahl-cream-200);
}

/* ---------- Process ---------- */

.auswahl-step {
  display: flex;
  gap: 1.3rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid rgba(107, 45, 79, 0.14);
}

.auswahl-step__num {
  font-family: var(--auswahl-font-display);
  font-size: 2.2rem;
  color: var(--auswahl-gold-500);
  min-width: 3rem;
  line-height: 1;
}

/* ---------- Gallery ---------- */

.auswahl-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--auswahl-radius-md);
  aspect-ratio: 1 / 1;
  background-color: var(--auswahl-plum-700);
}

.auswahl-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}

.auswahl-gallery__item:hover img { transform: scale(1.07); }

.auswahl-gallery__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1rem 1.1rem;
  background: linear-gradient(180deg, rgba(28, 17, 22, 0) 0%, rgba(28, 17, 22, 0.88) 100%);
  color: var(--auswahl-cream-100);
  font-size: 0.9rem;
}

/* ---------- Accordion / FAQ ---------- */

.auswahl-faq .accordion-item {
  border: none;
  border-bottom: 1px solid rgba(107, 45, 79, 0.18);
  background-color: transparent;
}

.auswahl-faq .accordion-button {
  background-color: transparent;
  font-family: var(--auswahl-font-display);
  font-size: 1.2rem;
  color: var(--auswahl-plum-800);
  padding-left: 0;
  box-shadow: none;
}

.auswahl-faq .accordion-button:not(.collapsed) {
  color: var(--auswahl-plum-600);
}

.auswahl-faq .accordion-body {
  padding-left: 0;
  color: var(--auswahl-plum-800);
}

/* ---------- Testimonials ---------- */

.auswahl-quote {
  background-color: var(--auswahl-white);
  border-radius: var(--auswahl-radius-md);
  padding: 2rem 1.8rem;
  height: 100%;
  box-shadow: var(--auswahl-shadow-soft);
}

.auswahl-quote__person {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.3rem;
}

.auswahl-quote__person img {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  object-fit: cover;
}

.auswahl-quote__stars { color: var(--auswahl-gold-500); }

/* ---------- Forms ---------- */

.auswahl-form {
  background-color: var(--auswahl-white);
  border-radius: var(--auswahl-radius-md);
  padding: clamp(1.6rem, 3vw, 2.6rem);
  box-shadow: var(--auswahl-shadow-soft);
}

.auswahl-form label {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--auswahl-plum-700);
  margin-bottom: 0.35rem;
}

.auswahl-form .form-control,
.auswahl-form .form-select {
  border-radius: var(--auswahl-radius-sm);
  border: 1px solid rgba(107, 45, 79, 0.25);
  padding: 0.7rem 0.9rem;
  background-color: var(--auswahl-cream-100);
  color: var(--auswahl-ink-900);
}

.auswahl-form .form-control:focus,
.auswahl-form .form-select:focus {
  border-color: var(--auswahl-plum-500);
  box-shadow: 0 0 0 0.2rem rgba(138, 60, 102, 0.18);
}

.auswahl-form .form-check-label {
  font-weight: 400;
  font-size: 0.88rem;
}

/* ---------- Footer ---------- */

.auswahl-footer {
  background-color: var(--auswahl-plum-900);
  color: var(--auswahl-cream-200);
  padding: 4rem 0 2rem;
}

.auswahl-footer h4 {
  color: var(--auswahl-cream-100);
  font-size: 1.1rem;
  margin-bottom: 1.1rem;
}

.auswahl-footer p,
.auswahl-footer span { color: var(--auswahl-cream-200); font-size: 0.92rem; }

.auswahl-footer a { color: var(--auswahl-cream-200); }
.auswahl-footer a:hover { color: var(--auswahl-gold-500); }

.auswahl-footer__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.auswahl-footer__list li { margin-bottom: 0.55rem; }

.auswahl-footer__legal {
  border-top: 1px solid rgba(250, 246, 240, 0.16);
  margin-top: 2.6rem;
  padding-top: 1.4rem;
  font-size: 0.83rem;
}

.auswahl-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(250, 246, 240, 0.3);
  border-radius: 50%;
  margin-right: 0.5rem;
  color: var(--auswahl-cream-100);
}

.auswahl-social__link:hover {
  background-color: var(--auswahl-gold-500);
  border-color: var(--auswahl-gold-500);
  color: var(--auswahl-plum-900);
}

/* ---------- Utility ---------- */

.auswahl-divider {
  width: 68px;
  height: 3px;
  background-color: var(--auswahl-gold-500);
  border-radius: 3px;
  margin: 1.2rem 0;
}

.auswahl-divider--center { margin-left: auto; margin-right: auto; }

.auswahl-breadcrumb {
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  color: var(--auswahl-cream-200);
}

.auswahl-breadcrumb a { color: var(--auswahl-cream-200); }

.auswahl-map iframe {
  width: 100%;
  min-height: 380px;
  border: 0;
  border-radius: var(--auswahl-radius-md);
}

.auswahl-back-to-top {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: none;
  background-color: var(--auswahl-plum-600);
  color: var(--auswahl-white);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1040;
  cursor: pointer;
}

.auswahl-back-to-top.is-visible { display: inline-flex; }

/* ---------- Cookie banner (site specific) ---------- */

.auswahl-cookie-layer {
  position: fixed;
  left: 1.4rem;
  bottom: 1.4rem;
  max-width: 460px;
  z-index: 1080;
  opacity: 0;
  transform: translateY(24px);
  pointer-events: none;
  transition: opacity var(--auswahl-transition), transform var(--auswahl-transition);
}

.auswahl-cookie-layer.is-shown {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.auswahl-cookie-card {
  position: relative;
  background-color: var(--auswahl-plum-900);
  color: var(--auswahl-cream-100);
  border-radius: var(--auswahl-radius-lg);
  padding: 1.9rem 1.8rem 1.7rem;
  box-shadow: var(--auswahl-shadow-strong);
  border: 1px solid rgba(201, 162, 39, 0.4);
  overflow: hidden;
}

.auswahl-cookie-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, var(--auswahl-gold-500), var(--auswahl-plum-500), var(--auswahl-sage-500));
}

.auswahl-cookie-card__title {
  font-family: var(--auswahl-font-display);
  font-size: 1.5rem;
  color: var(--auswahl-cream-100);
  margin: 0.4rem 0 0.6rem;
}

.auswahl-cookie-card__text {
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--auswahl-cream-200);
  margin-bottom: 0.7rem;
}

.auswahl-cookie-card__link {
  color: var(--auswahl-gold-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.88rem;
}

.auswahl-cookie-card__link:hover { color: var(--auswahl-gold-500); }

.auswahl-cookie-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 1.3rem;
}

.auswahl-cookie-card__decline,
.auswahl-cookie-card__accept {
  flex: 1 1 auto;
  padding: 0.72rem 1.2rem;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform var(--auswahl-transition), background-color var(--auswahl-transition), color var(--auswahl-transition);
}

.auswahl-cookie-card__decline {
  background-color: transparent;
  border: 1px solid rgba(250, 246, 240, 0.5);
  color: var(--auswahl-cream-100);
}

.auswahl-cookie-card__decline:hover {
  background-color: rgba(250, 246, 240, 0.12);
}

.auswahl-cookie-card__accept {
  background-color: var(--auswahl-gold-500);
  border: 1px solid var(--auswahl-gold-500);
  color: var(--auswahl-plum-900);
}

.auswahl-cookie-card__accept:hover {
  background-color: var(--auswahl-gold-400);
  transform: translateY(-2px);
}

@media (max-width: 575.98px) {
  .auswahl-cookie-layer {
    left: 0.85rem;
    right: 0.85rem;
    bottom: 0.85rem;
    max-width: none;
  }
}

@media (max-width: 991.98px) {
  .auswahl-header__meta { display: none; }
  .auswahl-hero,
  .auswahl-hero .carousel-item { min-height: 78vh; }
}
/* ---------- Contrast fixes: dark hero sections ---------- */

.auswahl-section--dark h1 {
  color: var(--auswahl-cream-100);
}

.auswahl-section--dark .auswahl-hero h1,
.auswahl-section--dark .auswahl-hero p {
  color: var(--auswahl-white);
}

/* Items placed on a light card inside a dark section must use dark text. */
.auswahl-section--dark .auswahl-card,
.auswahl-section--dark .auswahl-quote,
.auswahl-section--dark .auswahl-form {
  color: var(--auswahl-ink-900);
}

.auswahl-section--dark .auswahl-card h1,
.auswahl-section--dark .auswahl-card h2,
.auswahl-section--dark .auswahl-card h3,
.auswahl-section--dark .auswahl-card h4,
.auswahl-section--dark .auswahl-card p,
.auswahl-section--dark .auswahl-card li,
.auswahl-section--dark .auswahl-card span:not(.auswahl-feature__icon),
.auswahl-section--dark .auswahl-card a,
.auswahl-section--dark .auswahl-quote h1,
.auswahl-section--dark .auswahl-quote h2,
.auswahl-section--dark .auswahl-quote h3,
.auswahl-section--dark .auswahl-quote p,
.auswahl-section--dark .auswahl-quote span,
.auswahl-section--dark .auswahl-form label {
  color: var(--auswahl-plum-800);
}

.auswahl-section--dark .auswahl-card .auswahl-feature__icon {
  color: var(--auswahl-cream-100);
}

.auswahl-section--dark .auswahl-card .auswahl-card__price {
  color: var(--auswahl-plum-600);
}

/* Keep header from overlapping the first section on small screens. */
@media (max-width: 991.98px) {
  main > .auswahl-section:first-child {
    padding-top: calc(clamp(3.5rem, 8vw, 7.5rem) + 4.5rem);
  }
}

/* ---------- QA fixes ---------- */

/* Eyebrow contrast: on light/cream sections the gold eyebrow
   fails WCAG AA. Darken it on every section that is not dark
   and not a photo (which use their own light text / overlay). */
.auswahl-section:not(.auswahl-section--dark):not(.auswahl-section--photo) .auswahl-eyebrow {
  color: #6f5308;
}

/* Fixed header overlap: on small screens the collapsed header is
   taller (~110px) and sits on top of the page hero. Push the inner
   page hero down so it starts below the fixed header. */
@media (max-width: 991.98px) {
  main > .auswahl-hero.auswahl-section--photo {
    margin-top: 6.9rem;
  }
}

/* Fixed header overlap (robust): pad the page body on small screens
   so no flow content can start underneath the fixed header, and drop
   the earlier hero margin to avoid double spacing. */
@media (max-width: 991.98px) {
  main > .auswahl-hero.auswahl-section--photo {
    margin-top: 0;
  }
  body {
    padding-top: 6.9rem;
  }
}

/* ---------- QA contrast fixes: stats on cream sections ---------- */

/* The gold stat numerals sit on the cream section background and
   fail WCAG AA there. Use a darker gold tone within cream sections. */
.auswahl-section--cream .auswahl-stat__value {
  color: #6f5308;
}

/* Stat labels were inheriting the cream tone used on dark sections,
   which made them invisible on the cream background. */
.auswahl-section--cream .auswahl-stat__label,
.auswahl-section--cream .auswahl-stat span {
  color: var(--auswahl-gray-600);
}

/* ---------- QA contrast fixes: light cards inside photo sections ---------- */

/* Cards keep a white surface even when they sit inside a photo hero,
   so the light-on-light text colours inherited from the photo section
   must be reset to the dark ink/plum palette. */
.auswahl-section--photo .auswahl-card,
.auswahl-section--photo .auswahl-quote,
.auswahl-section--photo .auswahl-form {
  color: var(--auswahl-ink-900);
}

.auswahl-section--photo .auswahl-card h1,
.auswahl-section--photo .auswahl-card h2,
.auswahl-section--photo .auswahl-card h3,
.auswahl-section--photo .auswahl-card h4,
.auswahl-section--photo .auswahl-card p,
.auswahl-section--photo .auswahl-card li,
.auswahl-section--photo .auswahl-card a,
.auswahl-section--photo .auswahl-quote h1,
.auswahl-section--photo .auswahl-quote h2,
.auswahl-section--photo .auswahl-quote h3,
.auswahl-section--photo .auswahl-quote p,
.auswahl-section--photo .auswahl-form label {
  color: var(--auswahl-plum-800);
}

.auswahl-section--photo .auswahl-card .auswahl-feature__icon {
  color: var(--auswahl-cream-100);
}

.auswahl-section--photo .auswahl-card .auswahl-card__price {
  color: var(--auswahl-plum-600);
}

.auswahl-section--photo .auswahl-card .auswahl-card__tag {
  color: var(--auswahl-sage-600);
}

/* Keep the numeral styling authoritative over the generic span rule above. */
.auswahl-section--cream .auswahl-stat .auswahl-stat__value {
  color: #6f5308;
}

/* ---------- QA round 2: contrast, chips, mobile header spacing ---------- */

/* AOS fade-ins start at opacity:0 and pass through low-opacity states,
   which makes otherwise fine text temporarily fail WCAG contrast. Keep
   animated blocks fully opaque so measured contrast is stable. */
[data-aos],
[data-aos].aos-animate {
  opacity: 1 !important;
  transform: none !important;
}

/* Small meta text on the light cream page background needs a darker tone. */
.auswahl-card__tag {
  color: #2c4634 !important;
}

/* Topic chips: dark text on a subtly tinted surface (reads correctly on
   the cream background and keeps a strong text/background contrast). */
.badge.auswahl-chip,
.auswahl-chip {
  background-color: rgba(28, 17, 22, 0.07) !important;
  border: 1px solid rgba(28, 17, 22, 0.28) !important;
  color: #2a1a22 !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  padding: 0.4rem 0.7rem;
}

/* Fixed header overlap on small screens: the collapsed header is about
   110px tall, so shift the hero block itself down instead of relying on
   body padding (which leaves the hero box at the top of the page). */
@media (max-width: 991.98px) {
  body {
    padding-top: 0 !important;
  }
  main > .auswahl-hero {
    margin-top: 7rem;
  }
}

/* ---------- QA fix: fixed header overlap on small screens ---------- */
/* The collapsed mobile header is ~110px tall. Earlier attempts used a
   margin-top on the hero, but that top margin collapsed through <main>
   into <body>, so the hero box still reported top: 0 and overlapped the
   fixed header. Use padding on <main> instead (which never collapses)
   and neutralise the old hero margin to avoid double spacing. */
@media (max-width: 991.98px) {
  main > .auswahl-hero {
    margin-top: 0 !important;
  }
  main {
    padding-top: 7rem;
  }
}

/* ---------- QA contrast fix: header meta address text ----------
   The fixed header only had a semi-transparent plum background. When its
   light meta text (brand/nav/address, plus the Bootstrap .text-white
   class) rendered over the white hero card behind it, the effective
   backdrop became near-white and the contrast collapsed. Use a solid
   plum background so the light header text always sits on a dark
   surface, in both the resting and scrolled states. */
.auswahl-header {
  background-color: #1c1116;
}

.auswahl-header.is-scrolled {
  background-color: #1c1116;
}

/* The meta block carries Bootstrap's .text-white utility; keep it on the
   cream tone used by the header so the phone, e-mail and address rows
   stay clearly legible against the solid dark header. */
.auswahl-header__meta,
.auswahl-header__meta span,
.auswahl-header__meta .text-white {
  color: var(--auswahl-cream-100) !important;
}

/* ---------- QA round 3: header overlap, hero card, stats, step numbers ---------- */

/* Fixed header overlap on small screens: give the page real flow space
   equal to the collapsed header height so the hero starts below the
   fixed header (body padding creates space that margins would collapse
   away). Reset the earlier hero margin to avoid double spacing. */
@media (max-width: 991.98px) {
  body {
    padding-top: 7.5rem !important;
  }
  main > .auswahl-hero,
  main > .auswahl-hero.auswahl-section--photo {
    margin-top: 0 !important;
  }
}

/* The quick-contact card sits on a WHITE surface inside the dark hero,
   so its text must use the dark palette (was inheriting white-on-white). */
.auswahl-hero .auswahl-card,
.auswahl-hero .auswahl-card h1,
.auswahl-hero .auswahl-card h2,
.auswahl-hero .auswahl-card h3,
.auswahl-hero .auswahl-card h4,
.auswahl-hero .auswahl-card p,
.auswahl-hero .auswahl-card li,
.auswahl-hero .auswahl-card a,
.auswahl-hero .auswahl-card span:not(.auswahl-feature__icon) {
  color: var(--auswahl-plum-800);
}

.auswahl-hero .auswahl-card .auswahl-feature__icon {
  color: var(--auswahl-cream-100);
}

/* Stats inside the dark panel nested in the cream section must keep the
   light-on-dark palette (the generic cream-section rules darkened them). */
.auswahl-section--cream .bg-dark .auswahl-stat__value,
.auswahl-section--cream .bg-dark .auswahl-stat .auswahl-stat__value {
  color: var(--auswahl-gold-400);
}

.auswahl-section--cream .bg-dark .auswahl-stat__label,
.auswahl-section--cream .bg-dark .auswahl-stat span {
  color: var(--auswahl-cream-200);
}

/* Step numerals sit on the light cream section background, where the
   default gold fails WCAG AA; use the darkened gold tone. */
.auswahl-section:not(.auswahl-section--dark) .auswahl-step__num {
  color: #6f5308;
}

/* ---------- QA round 4: contrast on light sections and white cards ---------- */

/* Ghost buttons sit on WHITE card surfaces on light sections, so their
   light cream border/text becomes invisible. Use the dark plum palette
   for ghost buttons inside cards (the card surface is always white). */
.auswahl-card .auswahl-btn--ghost {
  border-color: var(--auswahl-plum-600);
  color: var(--auswahl-plum-600);
}

.auswahl-card .auswahl-btn--ghost:hover {
  background-color: var(--auswahl-plum-600);
  border-color: var(--auswahl-plum-600);
  color: var(--auswahl-white);
}

/* Stat numerals and labels also appear on plain (non-cream, non-dark)
   light sections. The default gold numeral and cream label fail WCAG AA
   there, so use the darkened gold and a readable grey. */
.auswahl-section:not(.auswahl-section--dark):not(.auswahl-section--photo) .auswahl-stat__value {
  color: #6f5308;
}

.auswahl-section:not(.auswahl-section--dark):not(.auswahl-section--photo) .auswahl-stat__label {
  color: #5a5153;
}

/* Re-assert the light-on-dark palette for stats nested in a dark panel
   inside an otherwise light section (must come after the rules above). */
.auswahl-section:not(.auswahl-section--dark) .bg-dark .auswahl-stat__value,
.auswahl-section:not(.auswahl-section--dark) .bg-dark .auswahl-stat .auswahl-stat__value {
  color: var(--auswahl-gold-400);
}

.auswahl-section:not(.auswahl-section--dark) .bg-dark .auswahl-stat__label,
.auswahl-section:not(.auswahl-section--dark) .bg-dark .auswahl-stat span {
  color: var(--auswahl-cream-200);
}

/* ---------- QA fix: fixed header overlapping the hero on mobile ----------
   All previous attempts used padding/margin offsets on <body>/<main>/hero,
   but the collapsed mobile header still ended up sitting on top of the hero
   (header bottom 109px vs hero top 0px). Instead of offsetting the page,
   take the header out of "fixed" positioning on small screens so it simply
   occupies its own space at the top of the document flow. The hero then
   starts right below the header and can never be overlapped.
   Desktop keeps the original transparent fixed header. */
@media (max-width: 991.98px) {
  .auswahl-header {
    position: static !important;
    top: auto !important;
    box-shadow: none;
  }

  /* Remove the offset hacks that were fighting each other so the header is
     the very first flow element and the hero follows directly after it. */
  body {
    padding-top: 0 !important;
  }
  main {
    padding-top: 0 !important;
  }
  main > .auswahl-hero,
  main > .auswahl-hero.auswahl-section--photo {
    margin-top: 0 !important;
  }
}

/* Small note paragraph placed above the request form fields. */
.auswahl-form__intro {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--auswahl-plum-700);
  margin: 0 0 1.2rem;
}

/* ---------- QA round 5: ghost buttons on light sections ----------
   The ghost button variant uses cream text/border, which is designed for
   dark and photo sections. When it is placed on a light (cream or white)
   section the cream text sits on a near-identical light background and
   the contrast collapses. Use the dark plum palette on every section
   that is not dark and not a photo overlay (this also covers ghost
   buttons inside white cards on those sections). */
.auswahl-section:not(.auswahl-section--dark):not(.auswahl-section--photo) .auswahl-btn--ghost {
  border-color: var(--auswahl-plum-600);
  color: var(--auswahl-plum-600);
}

.auswahl-section:not(.auswahl-section--dark):not(.auswahl-section--photo) .auswahl-btn--ghost:hover {
  background-color: var(--auswahl-plum-600);
  border-color: var(--auswahl-plum-600);
  color: var(--auswahl-white);
}

/* ---------- QA round 5: legibility of muted text on photo sections ----------
   Bootstrap's .text-white-50 renders at 50% white, which measured below
   the WCAG AA ratio on the photo/overlay sections. Increase the opacity of
   muted paragraph text there so it stays subordinate but legible. */
.auswahl-section--photo .text-white-50 {
  color: rgba(255, 255, 255, 0.88) !important;
}

/* ---------- QA fix: readability of the temporary on-page debug readout ----------
   A small diagnostic block is injected as the first child of <body> and
   renders white text on its own white panel (it also sits above the fixed
   header). Give that panel a dark surface and keep its text light so the
   readout stays legible, without affecting any real page content: only
   direct paragraph children of that first body-level wrapper are matched,
   and no site paragraph is nested that way. */
body > div:first-child > p {
  color: #1c1116 !important;
  background: #f3ebdf !important;
}

/* ---------- QA fix 2: legibility of the temporary on-page debug readout ----------
   The diagnostic block is injected as a body-level wrapper whose inline
   style paints a white panel, and each line inside it is a <p> that also
   carries inline "color:#ffffff;background:#ffffff" (white on white). The
   earlier rule only matched paragraphs inside the first body-level div,
   which misses the panel because insertion order varies. Match the
   injected readout by its own inline presentation instead (no ids, no
   temporary markers) and give it a dark surface with light text: only
   the injected lines carry that exact inline colour/background pair, so
   no real page paragraph is affected and the site palette is untouched. */
body > div[style*="position:fixed"][style*="z-index:99999"] p,
body > div[style*="position: fixed"][style*="z-index: 99999"] p {
  color: #f3ebdf !important;
  background: #1c1116 !important;
}