/* VQS-Homepage theme — ported verbatim (selectors/values) from the source
   project's public/assets/css/style.css (:root, dark body, header/nav,
   buttons, panels/cards) plus public/assets/css/theme-modern.css (the
   design_theme="modern" / anthracite scheme, which is what the source
   site actually runs live — settings.design_theme = "modern"). The
   source ships both a "classic" (navy) base and a "modern" (anthracite)
   overlay switchable per admin setting; since this framework renders one
   static theme per app profile, this file is the flattened, single
   result of that cascade for design_theme="modern" — the actually-live
   scheme, not the admin-configurable base. See
   modules/fahrschul/fs_sitesettings/README.md, "Implementierungsstatus".
*/

:root {
  --accent: #6bd425;
  --accent-blue: #5fb3ff;
  --success: #4caf50;
  --warning: #ff9800;
  --error: #f44336;

  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.2);
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;

  /* Anthracite scale (design_theme="modern", theme-modern.css section 0) */
  --m-bg: #14181d;
  --m-surface: #1c2229;
  --m-surface-dim: #242b33;
  --m-ink: #e3e9ef;
  --m-muted-ink: #a7b2bd;
  --m-line: rgba(255, 255, 255, 0.10);
  --m-line-strong: rgba(255, 255, 255, 0.24);
  --m-anthracite: #191e24;
  --m-anthracite-deep: #101419;
  --m-input-bg: #10151b;
  --m-bleed: calc(50% - 50vw);
  --m-column-pad: max(1.25rem, calc(50vw - 608px));

  --text: var(--m-ink);
  --muted: var(--m-muted-ink);
  --panel: var(--m-surface);
  --lighter: #2b333d;
  --dark: #0d1116;

  font-family: "Inter", "Segoe UI", "Helvetica Neue", system-ui, sans-serif;
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-700-normal.woff2") format("woff2");
}

* {
  box-sizing: border-box;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--m-bg);
  color: var(--text);
  line-height: 1.65;
  font-size: 16px;
  overflow-x: hidden;
}

/* Authentication and administration intentionally use the VQS palette but
   not the public website's conversion header, footer or floating CTAs. */
.auth-shell {
  width: min(100% - 2.5rem, 30rem);
  min-height: 100vh;
  margin: 0 auto;
  display: grid;
  align-content: center;
  gap: 1.5rem;
}
.auth-shell__brand img { width: min(100%, 18rem); margin: 0 auto; }
.auth-shell__card, .admin-shell__content {
  background: var(--panel);
  border: 1px solid var(--m-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: clamp(1.25rem, 3vw, 2.5rem);
}
.auth-shell form { display: grid; gap: .75rem; }
.auth-shell form p { margin: 0; }
.auth-shell input { width: 100%; }
.admin-shell { width: min(100% - 2.5rem, 88rem); margin: 1.25rem auto; }
.admin-shell__header { display:flex; align-items:center; gap:1rem; padding: .75rem 1rem; background:var(--m-anthracite-deep); border:1px solid var(--m-line); border-radius:var(--radius-lg) var(--radius-lg) 0 0; font-weight:700; }
.admin-shell__brand img { width: 10rem; }
.admin-shell__nav { display:flex; flex-wrap:wrap; gap:.35rem; padding:.75rem; background:var(--m-surface-dim); border-inline:1px solid var(--m-line); }
.admin-shell__nav a { color:var(--text); text-decoration:none; padding:.45rem .7rem; border-radius:var(--radius-sm); }
.admin-shell__nav a:hover { background:rgba(255,255,255,.1); }
.admin-shell__content { border-radius:0 0 var(--radius-lg) var(--radius-lg); }
.admin-shell table { width:100%; border-collapse:collapse; }
.admin-shell th, .admin-shell td { padding:.65rem; text-align:left; border-bottom:1px solid var(--m-line); }
.admin-shell input, .admin-shell select, .admin-shell textarea { max-width:100%; }

a {
  color: var(--accent-blue);
}

.page-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.25rem;
  width: 100%;
}

.skip-link {
  position: absolute;
  left: -999px;
  top: 0;
  background: var(--panel);
  color: var(--text);
  padding: 0.75rem 1.25rem;
  border-radius: 0 0 var(--radius-md) 0;
  z-index: 1000;
}

.skip-link:focus {
  left: 0;
}

/* ---------------------------------------------------------------- header */

.page-head {
  position: relative;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  margin: 0 0 1.5rem;
  width: 100%;
  background:
    radial-gradient(circle at 15% -10%, rgba(107, 212, 37, 0.45), transparent 55%),
    radial-gradient(circle at 85% 110%, rgba(107, 212, 37, 0.25), transparent 55%),
    linear-gradient(135deg, #181c25 0%, #11151c 50%, #080b10 100%);
}

.page-head__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0.75rem 1.25rem;
}

.site-header {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  align-items: flex-start;
  padding: 1rem 0 0.5rem;
  position: relative;
  z-index: 1;
}

.logo-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  width: 100%;
}

.logo-block img {
  width: clamp(18rem, 32vw, 28rem);
  height: auto;
  /* Das Logo ist 487 x 107 (rund 4,5:1). Die Breite bestimmt deshalb
     seine Größe; die automatisch berechnete Höhe erhält das Verhältnis. */
  max-width: 100%;
  flex-shrink: 0;
}

.logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  color: var(--text);
  font-weight: 700;
  font-size: 1.02rem;
}

.nav-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  width: 100%;
  flex: 1;
}

.header-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: flex-start;
  width: 100%;
  margin-top: 1rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  font-weight: 600;
}

.nav-toggle__bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-toggle__bars span {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--text);
}

.main-nav {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
  padding: 0.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  width: 100%;
}

.nav-item {
  list-style: none;
}

.main-nav a {
  text-decoration: none;
  color: var(--muted);
  font-weight: 700;
  padding: 0.45rem 0.8rem;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  width: 100%;
}

.main-nav a:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
}

.main-nav a.is-active {
  background: linear-gradient(135deg, var(--accent), #90e75f);
  color: #0c1b2f;
  box-shadow: 0 4px 12px rgba(107, 212, 37, 0.3);
}

@media (min-width: 900px) {
  .nav-toggle {
    display: none !important;
  }
  .main-nav {
    display: flex !important;
    border-top: none;
    width: auto;
  }
  .nav-list {
    flex-direction: row;
    align-items: center;
    gap: 0.25rem;
    width: auto;
  }
  .main-nav a {
    width: auto;
  }
  .site-header {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .nav-block {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: auto;
  }
  .header-actions {
    width: auto;
    margin-top: 0;
  }
}

/* -------------------------------------------------------------- buttons */

.button,
.auth-shell form button,
.admin-shell button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  padding: 0.78rem 1.6rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #90e75f);
  color: #0c1b2f;
  text-decoration: none;
  font-weight: 700;
  border: none;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
  transition: transform 0.1s ease, box-shadow 0.15s ease, filter 0.15s ease;
  font: inherit;
}

.button:hover,
.auth-shell form button:hover,
.admin-shell button:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.35);
}

.button--outline {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: var(--text);
}

.button--ghost {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.button--vehicle-checklist {
  background: linear-gradient(135deg, var(--accent-blue), #8dcbff);
  color: #0c1b2f;
}

.text-accent {
  color: var(--accent) !important;
}

/* ---------------------------------------------------------------- heroes */

.hero,
.page-hero,
.location-hero {
  margin-inline: var(--m-bleed);
  margin-bottom: 0;
  border-radius: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 1.25rem;
  min-height: clamp(400px, 58vh, 620px);
  padding: clamp(1.5rem, 4vw, 3.5rem) var(--m-column-pad);
  padding-top: clamp(5.5rem, 16vh, 9rem);
  color: #f2f6fa;
}

.hero--home {
  background:
    linear-gradient(to top, rgba(20, 24, 29, 0.96) 0%, rgba(20, 24, 29, 0.58) 48%, rgba(20, 24, 29, 0.3) 100%),
    var(--hero-bg-image, none) center/cover no-repeat;
}

.page-hero {
  background:
    linear-gradient(to top, rgba(20, 24, 29, 0.96) 0%, rgba(20, 24, 29, 0.58) 48%, rgba(20, 24, 29, 0.3) 100%),
    var(--page-hero-bg-image, none) center/cover no-repeat;
}

.location-hero {
  background:
    linear-gradient(to top, rgba(20, 24, 29, 0.97) 0%, rgba(20, 24, 29, 0.62) 50%, rgba(20, 24, 29, 0.32) 100%),
    var(--location-hero-bg-image, none) center/cover no-repeat;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
}

.hero__content,
.page-hero__content,
.location-hero__content {
  max-width: 720px;
  position: relative;
  z-index: 1;
}

.hero--home .hero__content {
	text-align: left;
	width: 100%;
	max-width: none;
}

.hero--home .hero__actions {
	justify-content: flex-start;
	width: 100%;
}

.hero h1,
.page-hero h1,
.location-hero h1 {
  margin: 0 0 0.35em;
  max-width: 16ch;
}

.hero__content > p:not(.hero__eyebrow),
.page-hero__content > p:not(.hero__eyebrow),
.location-hero__content > p:not(.hero__eyebrow) {
  font-size: clamp(1.02rem, 0.95rem + 0.5vw, 1.2rem);
  color: var(--muted);
  max-width: 55ch;
  margin-top: 0;
}

.hero__eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.24em;
  color: var(--accent-blue);
  margin-bottom: 0.8rem;
  text-transform: uppercase;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

.hero-facts {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 1.25rem 0 0.5rem;
  padding: 0;
}

.hero-facts li {
  background: rgba(16, 20, 25, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  padding: 0.5rem 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
}

.location-hero__card {
  background: rgba(15, 29, 50, 0.85);
  padding: 1.5rem;
  border-radius: 20px;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.5);
  min-width: 260px;
  position: relative;
  z-index: 1;
}

.location-hero__card a {
  color: var(--accent-blue);
  text-decoration: none;
}

/* ---------------------------------------------------------------- panels */

.content {
  margin-top: 0;
}

.panel {
  background: linear-gradient(145deg, rgba(28, 34, 41, 0.9), rgba(20, 24, 29, 0.85));
  border: 1px solid var(--m-line);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-top: 1.5rem;
  box-shadow: var(--shadow-lg);
}

.panel--text p {
  color: var(--muted);
  line-height: 1.6;
}

.panel a:not(.button) {
  color: var(--accent-blue);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.lead {
  font-size: 1.1rem;
  color: var(--muted);
  line-height: 1.6;
}

.section-heading {
  max-width: 720px;
  margin-bottom: 1rem;
}

.section-heading h2 {
  margin-top: 0;
  margin-bottom: 0.4em;
}

.section-heading p {
  color: var(--muted);
}

.section-heading .eyebrow,
.eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.8rem;
  color: var(--accent-blue);
  margin-bottom: 0.4rem;
  display: inline-block;
}

.muted-text {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.95rem;
  margin: 0.25rem 0 0;
}

.badge-list {
  display: flex;
  gap: 0.8rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.badge-list span {
  background: rgba(255, 255, 255, 0.08);
  padding: 0.4rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.panel__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 2rem;
  align-items: center;
}

.panel__image img {
  width: 100%;
  border-radius: 16px;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.5);
}

.steps-list {
  margin: 0;
  padding-left: 1.2rem;
}

.steps-list li {
  margin-bottom: 0.4rem;
}

.icon-list {
  list-style: none;
  padding: 0;
}

.icon-list li {
  margin-bottom: 0.6rem;
  position: relative;
  padding-left: 1.4rem;
}

.icon-list li::before {
  content: "\2714";
  position: absolute;
  left: 0;
  color: var(--accent);
}

.link-list {
  padding-left: 1.2rem;
}

.link-list li {
  margin-bottom: 0.4rem;
}

/* ----------------------------------------------------------------- grids */

.info-pill-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 0.8rem;
  margin-bottom: 1rem;
}

.info-pill {
  background: rgba(255, 255, 255, 0.06);
  border-radius: 16px;
  padding: 0.8rem 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.info-pill i {
  color: var(--accent);
}

.icon-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.icon-card {
  background: rgba(255, 255, 255, 0.04);
  border-radius: 18px;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.icon-card .icon-label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: 700;
}

.icon-card .icon-label i {
  color: var(--accent);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.feature-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  padding: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  min-height: 190px;
}

.feature-icon-wrap {
  width: 46px;
  height: 46px;
  min-width: 46px;
  min-height: 46px;
  flex: 0 0 46px;
  border-radius: 50%;
  background: rgba(107, 212, 37, 0.18);
  border: 1px solid rgba(107, 212, 37, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
}

.feature-icon-wrap i {
  font-size: 1.2rem;
  color: var(--accent);
}

.info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.2rem;
}

.info-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.info-card--accent {
  background: linear-gradient(145deg, rgba(35, 45, 55, 0.95), rgba(28, 36, 44, 0.8));
}

.info-card__eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.75rem;
  color: var(--accent-blue);
}

.about-points p {
  margin-bottom: 0.8rem;
}

.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.team-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 18px;
  padding: 1.4rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.team-card__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  margin-bottom: 0.6rem;
}

.team-card__photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.team-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.team-card__role {
  color: #c9d5ec;
  font-weight: 600;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.service-card {
  display: flex;
  gap: 0.9rem;
  padding: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
}

.offer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.offer-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.offer-card__media {
  display: block;
  width: 100%;
}

.offer-card__media img {
  width: 100%;
  max-height: 360px;
  object-fit: contain;
  border-radius: 12px 12px 0 0;
  background-color: rgba(0, 0, 0, 0.35);
}

.offer-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem 0.25rem;
}

.offer-card__body {
  padding: 0.75rem 1rem 1rem;
}

.offer-validity {
  color: var(--muted);
  font-size: 0.9rem;
}

.offer-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.offer-tag--highlight {
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
}

.offer-tag--permanent {
  background: rgba(63, 178, 76, 0.15);
  border: 1px solid rgba(63, 178, 76, 0.5);
  color: #9cf29e;
}

.offer-subheading {
  margin: 1rem 0 0.5rem;
}

.location-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.location-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 20px;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.location-card .button {
  margin-top: auto;
}

.schedule-weeks {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.schedule-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.schedule-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.schedule-card li {
  display: flex;
  justify-content: space-between;
  padding: 0.45rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.schedule-card li span {
  color: var(--muted);
}

.schedule-card li.is-closed strong {
  color: #fda4a4;
}

.hours-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
}

.hours-grid > div {
  display: flex;
  justify-content: space-between;
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.card-grid--equal .card {
  height: 100%;
}

.card-grid--tariffs {
  grid-template-columns: 1fr;
  max-width: 980px;
  margin-inline: auto;
}

.card--link a {
  align-self: flex-start;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.75rem;
}

.gallery-item img {
  border-radius: var(--radius-md);
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.vehicle-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.vehicle-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.vehicle-card__media img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.vehicle-thumbs {
  display: flex;
  gap: 0.4rem;
  padding: 0.4rem;
  overflow-x: auto;
}

.vehicle-thumb img {
  width: 64px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
}

.vehicle-card__body {
  padding: 1rem 1.25rem 1.25rem;
}

.vehicle-features,
.vehicle-tags {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.vehicle-tags .tag,
.vehicle-features li {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px;
  padding: 0.25rem 0.75rem;
  font-size: 0.85rem;
}

/* -------------------------------------------- Abfahrts-/Sicherheitskontrolle */

/* Der Knopf auf der Fahrzeugkarte, den fs_inspection über
   fs_vehicles' VehicleLinkProvider beisteuert. */
.vehicle-links {
  margin: 1rem 0 0;
}

.checkguide h2 {
  margin-top: 0;
}

/* Fragen: aufklappbare Antworten, ohne JavaScript. */
.checkguide__question {
  border-top: 1px solid var(--m-line);
  padding: 0.75rem 0;
}

.checkguide__question:first-of-type {
  border-top: none;
}

.checkguide__question > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  padding-right: 1.5rem;
  position: relative;
}

.checkguide__question > summary::-webkit-details-marker {
  display: none;
}

.checkguide__question > summary::after {
  content: "+";
  position: absolute;
  right: 0;
  color: var(--accent-blue);
}

.checkguide__question[open] > summary::after {
  content: "\2013";
}

.checkguide__answer {
  color: var(--muted);
  line-height: 1.6;
  padding-top: 0.5rem;
}

.checkguide__answer :is(ul, ol) {
  padding-left: 1.25rem;
}

/* Checkliste: Kästchen zum Abhaken. Nichts davon wird gespeichert —
   kein localStorage, kein Cookie (docs/07). */
.checkguide__checklist {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.4rem 1.5rem;
}

.checkguide__checklist label {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  cursor: pointer;
}

.checkguide__tasks {
  color: var(--muted);
  line-height: 1.7;
  padding-left: 1.25rem;
}

.checkguide__tasks strong {
  color: var(--ink, inherit);
}

/* Fahrzeugbezogene Hinweise und Fotos zu einem Punkt. */
.checkguide__note {
  border-left: 3px solid var(--accent-blue);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 0.6rem 0.9rem;
  margin: 0.6rem 0;
}

.checkguide__note img {
  max-width: min(100%, 420px);
  height: auto;
  border-radius: var(--radius-md);
  margin-top: 0.5rem;
}

.wissen-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
}

.wissen-card {
  display: block;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  text-decoration: none;
  color: var(--text);
}

.wissen-card p {
  color: var(--muted);
}

.job-meta {
  display: flex;
  gap: 1rem;
  color: var(--muted);
}

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

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.faq-item {
  background: rgba(255, 255, 255, 0.03);
  border-radius: 18px;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.faq-item summary {
  cursor: pointer;
  font-weight: 600;
}

.faq-item__body p {
  color: var(--muted);
}

/* ------------------------------------------------------------ contact cards
   Ported verbatim from public/assets/css/contact-cards.css, dark-theme
   override branch only (this theme is always dark). */

.contact-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.contact-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem;
  border-radius: 12px;
  background: #2a2a2a;
  color: #eee;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
  border: 2px solid transparent;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
}

.contact-card p {
  color: #bbb;
}

.contact-card--whatsapp {
  border-color: rgba(255, 255, 255, 0.85);
}

.contact-card--email {
  border-color: var(--accent);
}

.contact-card--phone {
  border-color: var(--accent-blue);
}

.contact-card__icon {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 2.5rem;
}

.contact-card--whatsapp .contact-card__icon {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}

.contact-card--email .contact-card__icon {
  background: rgba(107, 212, 37, 0.22);
  color: var(--accent);
}

.contact-card--phone .contact-card__icon {
  background: rgba(95, 179, 255, 0.22);
  color: var(--accent-blue);
}

.contact-card h2 {
  margin: 0 0 0.75rem;
  font-size: 1.4rem;
}

.contact-card__cta {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 600;
}

.contact-card--whatsapp .contact-card__cta {
  color: #fff;
}

.contact-card--email .contact-card__cta {
  color: var(--accent);
}

.contact-card--phone .contact-card__cta {
  color: var(--accent-blue);
}

/* --------------------------------------------------------------- footer */

.site-footer {
  margin-top: 2rem;
  padding: 2.5rem 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--muted);
  background: var(--m-anthracite-deep);
  border-radius: 24px 24px 0 0;
}

.site-footer__grid {
  max-width: 1280px;
  margin: 0 auto 1rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.2rem;
}

.site-footer__grid h4 {
  margin-bottom: 0.4rem;
  color: var(--text);
}

.footer-brand {
  text-align: center;
}

.footer-brand img {
  max-width: 220px;
  width: 100%;
  margin-bottom: 0.8rem;
}

.footer-social-icons {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
}

.footer-social-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  text-decoration: none;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.4rem;
}

.footer-links a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.site-footer__bottom {
  max-width: 1280px;
  margin: 1rem auto 0;
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
}

/* ------------------------------------------------------------- floating */

.cta-floating {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 50;
  background: linear-gradient(135deg, var(--accent), #a0ef6d);
  color: #0b1524;
  padding: 0.85rem 1.2rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
  border: none;
  cursor: pointer;
  font: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.cta-floating--price {
  bottom: 10rem;
  left: 1rem;
  right: auto;
  background: linear-gradient(135deg, var(--accent-blue), #7ec8ff);
  color: #0b1524;
}

.cta-floating--consultation {
  bottom: 4rem;
}

.cta-floating--whatsapp {
  bottom: 1rem;
}

@media (min-width: 1024px) {
  .cta-floating--price {
    left: auto;
    right: 1.5rem;
    bottom: 5.5rem;
  }
}

/* ------------------------------------------------------------- news strip */

.news-strip {
  margin-top: 1.5rem;
}

.news-strip__inner {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.news-strip__item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1rem 1.25rem;
}

.news-strip__badge {
  background: var(--accent);
  color: #0c1b2f;
  font-weight: 700;
  font-size: 0.75rem;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  flex-shrink: 0;
}

/* -------------------------------------------------------- price calculator */

.calculator-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.calculator-field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex: 1;
  min-width: 200px;
}

.calculator-field select,
.support-form input,
.support-form textarea,
input[type="number"],
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea {
  background: var(--m-input-bg);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 0.6rem 0.8rem;
  font: inherit;
}

.calculator-slider {
  margin: 1rem 0;
}

.calculator-output {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-top: 1.5rem;
}

.calculator-column {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 1.25rem;
}

.calculator-breakdown {
  list-style: none;
  padding: 0;
  margin: 0.75rem 0;
}

.calculator-line {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.calculator-line__label {
  display: flex;
  flex-direction: column;
}

.calculator-line__label small {
  color: var(--muted);
  font-size: 0.8rem;
}

.calculator-line.is-included strong {
  color: var(--accent);
}

.calculator-column__head h3 {
  margin-bottom: 0.25rem;
}

.calculator-column__desc {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 0.5rem;
}

.calculator-empty {
  color: var(--muted);
}

.calculator-flatrate-note {
  margin: 1rem 0;
}

.calculator-total {
  display: flex;
  justify-content: space-between;
  font-size: 1.15rem;
  font-weight: 700;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 2px solid rgba(255, 255, 255, 0.16);
}

.legal-notice {
  margin-top: 1.5rem;
}

.table-scroll {
  overflow-x: auto;
}

.price-example-table {
  width: 100%;
  border-collapse: collapse;
}

.price-example-table th,
.price-example-table td {
  text-align: left;
  padding: 0.6rem 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

/* ------------------------------------------------------------- utilities */

.u-mt-1 {
  margin-top: 1rem;
}

.u-mb-1 {
  margin-bottom: 1rem;
}

/* Source-theme parity: the PHP application adds its modern layer after the
   base stylesheet.  These overrides retain that final cascade in the Go
   theme while keeping every resource local. */
body.theme-dark.theme-modern {
  background: var(--m-bg);
  color: var(--m-ink);
  line-height: 1.65;
}

body.theme-dark.theme-modern::before { content: none; }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid color-mix(in srgb, var(--accent-blue) 65%, #fff);
  outline-offset: 3px;
}

.theme-modern h1 {
  font-size: clamp(2.1rem, 1.15rem + 4.2vw, 3.7rem);
  line-height: 1.06;
  letter-spacing: -0.022em;
}

.theme-modern h2 {
  font-size: clamp(1.55rem, 1.15rem + 1.8vw, 2.35rem);
  line-height: 1.14;
  letter-spacing: -0.015em;
}

.theme-modern .page-head,
.theme-modern .site-footer {
  margin-inline: var(--m-bleed);
  border-radius: 0;
}

.theme-modern .page-head {
  margin-bottom: 0;
  width: auto;
  background: var(--m-anthracite-deep);
  border-bottom: 1px solid var(--m-line);
}

.theme-modern .page-head__inner { padding-inline: var(--m-column-pad); }
.theme-modern .page-head::before, .theme-modern .page-head::after { content: none; }
.theme-modern .button { border-radius: 12px; min-height: 48px; box-shadow: none; }
.theme-modern .button:hover { transform: none; box-shadow: 0 2px 12px rgba(0, 0, 0, .45); }
.theme-modern .button:active { transform: none; filter: brightness(.95); }
.theme-modern .button--ghost, .theme-modern .button--outline {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.34);
}

.theme-modern .panel {
  background: var(--m-surface);
  border-color: var(--m-line);
  box-shadow: none;
  border-radius: 16px;
  padding: clamp(1.25rem, 3vw, 2.25rem);
  margin-top: clamp(1.75rem, 4vw, 3rem);
}

.theme-modern .panel--cta {
  margin-inline: var(--m-bleed);
  border-radius: 0;
  background: var(--m-anthracite);
  border-inline: 0;
  padding-inline: var(--m-column-pad);
}

.theme-modern .site-footer {
  margin-top: 0;
  padding: clamp(2.75rem, 6vw, 4.5rem) var(--m-column-pad) clamp(1.75rem, 4vw, 3rem);
  border-top-color: var(--m-line);
}

.theme-modern .footer-brand { text-align: left; }
.theme-modern .footer-social-icons { justify-content: flex-start; }
.theme-modern .location-hero__card { background: rgba(20, 24, 29, .88); border: 1px solid var(--m-line); box-shadow: none; }
.theme-modern .calculator-column { background: var(--m-bg); border-color: var(--m-line); box-shadow: none; }
.theme-modern .calculator-field select, .theme-modern .calculator-field input { color-scheme: dark; min-height: 48px; }
.theme-modern .gallery-grid img, .theme-modern .panel__image img, .theme-modern .vehicle-card__media { border: 1px solid var(--m-line); box-shadow: none; }

@media (max-width: 899px) {
  .has-nav-toggle .nav-toggle { display: inline-flex; }
  .has-nav-toggle .main-nav { display: none; }
  .has-nav-toggle .main-nav.is-open { display: flex; }
  .has-nav-toggle .nav-list { width: 100%; }
  .has-nav-toggle .main-nav a { width: 100%; }
  .theme-modern .site-header { padding-block: .75rem; }
  .theme-modern .header-actions { order: 3; margin-top: 0; }
  .theme-modern .nav-toggle { order: 2; }
  .theme-modern .main-nav { order: 4; }
}

@media (max-width: 767px) {
  body.theme-dark.theme-modern { padding-bottom: calc(3.6rem + env(safe-area-inset-bottom, 0px)); }
  .theme-modern .cta-floating {
    top: auto; bottom: 0; margin: 0; min-height: calc(3.6rem + env(safe-area-inset-bottom, 0px));
    padding: .6rem .75rem calc(.6rem + env(safe-area-inset-bottom, 0px)); border-radius: 0;
  }
  .theme-modern .cta-floating--price { left: 0; right: 50%; bottom: 0; }
.theme-modern .cta-floating--consultation { left: 50%; right: 0; bottom: 0; border-left: 1px solid rgba(12,27,47,.25); }
}

/* Production reference (`vqs-verkehrsschule.de`, checked 2026-08-08) runs
   the classic navy theme. Keep this final block after the earlier modern
   compatibility rules so the Go page has the same effective cascade. */
body.theme-dark {
  --dark: #0f1d32;
  --panel: #1c2c45;
  --lighter: #273d5f;
  --text: #f5f8ff;
  --muted: #b3c2da;
  background: linear-gradient(180deg, #242d3d 0%, #182133 45%, #0b1628 100%);
  color: var(--text);
  line-height: 1.6;
  position: relative;
}

body.theme-dark::before {
  content: "";
  position: fixed;
  inset: 0;
  background: radial-gradient(circle at 12% 18%, rgba(107,212,37,.08), transparent 55%), radial-gradient(circle at 82% 78%, rgba(107,212,37,.10), transparent 55%), radial-gradient(circle at 50% 110%, rgba(95,179,255,.12), transparent 60%);
  pointer-events: none;
  z-index: -1;
}

body.theme-dark .page-head { margin: 0 0 1.5rem; width: 100%; border-radius: 0 0 28px 28px; background: radial-gradient(circle at 15% -10%, rgba(107,212,37,.45), transparent 55%), radial-gradient(circle at 85% 110%, rgba(107,212,37,.25), transparent 55%), linear-gradient(135deg, #181c25 0%, #11151c 50%, #080b10 100%); border: 0; }
body.theme-dark .page-head__inner { padding: .75rem 1.25rem; }
body.theme-dark .page-head::before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,.4), rgba(0,0,0,.1)); border-radius: 0 0 28px 28px; }
body.theme-dark .page-head::after { content: ""; position: absolute; inset: 0; background: linear-gradient(45deg, transparent 30%, rgba(107,212,37,.05) 50%, transparent 70%); opacity: .3; border-radius: 0 0 28px 28px; }

body.theme-dark .hero, body.theme-dark .page-hero, body.theme-dark .location-hero {
  margin-inline: 0;
  margin-bottom: 1rem;
  border-radius: 28px;
  min-height: 0;
  padding: 1.5rem 1.25rem;
  background-color: transparent;
}
body.theme-dark .hero { background: linear-gradient(135deg, rgba(7,25,49,.95), rgba(18,53,88,.85)), var(--hero-bg-image, url('/assets/img/hero.jpg')) center/cover no-repeat; }
body.theme-dark .page-hero { min-height: 320px; background: linear-gradient(120deg, rgba(0,0,0,.8), rgba(0,0,0,.3)), var(--page-hero-bg-image, url('/assets/img/wissen.webp')) center/cover no-repeat; }
body.theme-dark .location-hero { background: linear-gradient(120deg, rgba(0,0,0,.8), rgba(0,0,0,.3)), var(--location-hero-bg-image, url('/assets/img/hero.jpg')) center/cover no-repeat; }
body.theme-dark .hero__content, body.theme-dark .page-hero__content, body.theme-dark .location-hero__content { max-width: 100%; }
body.theme-dark .hero h1, body.theme-dark .page-hero h1, body.theme-dark .location-hero h1 { max-width: none; }

body.theme-dark .panel { background: linear-gradient(145deg, rgba(20,34,56,.9), rgba(12,22,38,.85)); border-color: rgba(255,255,255,.08); border-radius: var(--radius-lg); padding: 1.5rem; margin-top: 1.5rem; box-shadow: var(--shadow-lg); }
body.theme-dark .panel:hover { transform: translateY(-2px); box-shadow: 0 20px 40px rgba(0,0,0,.3); }
body.theme-dark .panel--cta { margin-inline: 0; border-radius: var(--radius-lg); padding-inline: 1.5rem; }
body.theme-dark .site-footer { margin: 2rem 0 -2.5rem; padding: 2.5rem; border-radius: 24px 24px 0 0; background: linear-gradient(180deg, rgba(8,18,34,.9), rgba(8,18,34,.92)), url('/assets/img/footer.png') center/cover no-repeat; }
body.theme-dark .footer-brand { text-align: center; }
body.theme-dark .footer-social-icons { justify-content: center; }
body.theme-dark .button { border-radius: 999px; min-height: 0; box-shadow: 0 8px 20px rgba(0,0,0,.25); }
body.theme-dark .button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.35); }
body.theme-dark .calculator-slider { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: 14px; padding: .85rem 1rem; margin: 1rem 0; }
body.theme-dark .calculator-slider label { display: block; font-weight: 600; margin-bottom: .35rem; }
body.theme-dark .calculator-slider input[type="range"] { width: 100%; accent-color: var(--accent); }
body.theme-dark .calculator-output { margin-top: .9rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: .75rem; }
body.theme-dark .calculator-column { background: rgba(7,16,29,.65); border: 1px solid rgba(255,255,255,.08); border-radius: 14px; padding: .8rem .9rem; }

/* Führerschein-Berater — site-wide modal, matching the reference interaction. */
.consultation-modal[hidden] { display: none; }
.consultation-modal { position: fixed; inset: 0; z-index: 500; display: grid; place-items: center; padding: 1rem; }
.consultation-modal__backdrop { position: absolute; inset: 0; background: rgba(4, 11, 22, .76); }
.consultation-modal__dialog { position: relative; width: min(100%, 680px); max-height: min(760px, 90vh); overflow: auto; background: linear-gradient(145deg, #1c2c45, #0c1626); border: 1px solid rgba(255,255,255,.14); border-radius: 20px; box-shadow: 0 24px 64px rgba(0,0,0,.55); }
.consultation-modal__header { display: flex; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.4rem; border-bottom: 1px solid rgba(255,255,255,.1); }
.consultation-modal__header h2 { margin: 0; font-size: 1.35rem; }
.consultation-modal__header p { margin: .2rem 0 0; color: var(--muted); }
.consultation-modal__close { width: 2.25rem; height: 2.25rem; border: 0; border-radius: 50%; background: rgba(255,255,255,.1); color: var(--text); font-size: 1.5rem; cursor: pointer; }
.consultation-chat__progress { padding: 1rem 1.4rem 0; }
.consultation-chat__progress-track { height: 6px; overflow: hidden; background: rgba(255,255,255,.12); border-radius: 999px; }
.consultation-chat__progress-bar { width: 0; height: 100%; background: var(--accent); transition: width .2s ease; }
.consultation-chat__body { min-height: 170px; padding: 1.4rem; }
.consultation-chat__body h3 { margin-top: 0; }
.consultation-chat__footer { display: flex; flex-wrap: wrap; gap: .65rem; padding: 1rem 1.4rem 1.4rem; border-top: 1px solid rgba(255,255,255,.1); }
.consultation-chat__footer .button { flex: 1 1 180px; }
.consultation-lead-form { display: grid; gap: .7rem; }
.consultation-lead-form input, .consultation-lead-form textarea { width: 100%; background: rgba(7,16,29,.8); color: var(--text); border: 1px solid rgba(255,255,255,.18); border-radius: 10px; padding: .75rem; font: inherit; }
body.consultation-modal-open { overflow: hidden; }
.lightbox[hidden] { display:none; }.lightbox { position:fixed; inset:0; z-index:2600; display:flex; align-items:center; justify-content:center; padding:1rem; background:rgba(0,0,0,.82); }.lightbox__inner { position:relative; max-width:90vw; max-height:90vh; display:flex; flex-direction:column; gap:.8rem; }.lightbox__img { max-width:100%; max-height:75vh; border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.6); object-fit:contain; }.lightbox__controls { display:flex; justify-content:space-between; align-items:center; gap:.6rem; color:#fff; }.lightbox__btn,.lightbox__close { border:1px solid rgba(255,255,255,.2); color:#fff; cursor:pointer; background:rgba(255,255,255,.12); }.lightbox__btn { padding:.5rem .9rem; border-radius:10px; font:inherit; }.lightbox__close { position:absolute; top:-.4rem; right:-.4rem; width:32px; height:32px; border-radius:50%; font-size:1.2rem; line-height:1; }.lightbox-open { overflow:hidden; }
.panel__image.gallery-item { display:block; cursor:zoom-in; }
/* Die Standortkarte von Lüdinghausen enthält transparente Flächen. Diese
   erhalten im Panel und in der Großansicht dieselbe VQS-Navy-Fläche. */
.panel__image.gallery-item[data-gallery-group^="location-map-"] { background:#182f52; border-radius:16px; overflow:hidden; }
.panel__image.gallery-item[data-gallery-group^="location-map-"] img { display:block; }
.lightbox--map { padding:clamp(.5rem, 2vw, 2rem); }
.lightbox--map .lightbox__inner { width:min(96vw, 1500px); max-width:96vw; max-height:96vh; }
.lightbox--map .lightbox__img { width:100%; max-width:100%; max-height:84vh; background:#182f52; object-fit:contain; }

/* Standortauswahl für Google-Bewertungen: zwei einfache, vollflächig
   klickbare Bildkacheln. */
.review-location-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:1.25rem; }
.review-location-card { position:relative; display:block; min-height:260px; overflow:hidden; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-lg); color:#fff; background:#182f52; box-shadow:var(--shadow-lg); }
.review-location-card img { display:block; width:100%; height:100%; min-height:260px; object-fit:cover; transition:transform var(--transition-base), filter var(--transition-base); }
.review-location-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 34%,rgba(7,16,29,.88)); pointer-events:none; }
.review-location-card__title { position:absolute; z-index:1; right:1.25rem; bottom:1rem; left:1.25rem; font-size:clamp(1.35rem,1.1rem + 1vw,1.85rem); font-weight:800; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.review-location-card:is(:hover,:focus-visible) { border-color:rgba(107,212,37,.75); color:#fff; }
.review-location-card:is(:hover,:focus-visible) img { transform:scale(1.045); filter:brightness(1.08); }
.review-location-card:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
/* A location without a resolvable Google review link (reviews module not
   selected, or no google_place_id maintained yet) still renders as a
   card, just non-interactive — never a broken link. */
.review-location-card--disabled { cursor:default; filter:grayscale(.35); }
.review-location-card--disabled img { filter:brightness(.85); }
.review-location-panel__note { margin:1.25rem 0 0; color:var(--muted); text-align:center; }

/* Homepage "Echte Bewertungen" section (REQ-36): real, externally
   sourced Google reviews mixed across locations — never redactionally
   authored testimonials. */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

.review-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  padding: 1.25rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.review-card__stars {
  margin: 0;
  color: #ffcf5c;
  letter-spacing: 0.1em;
}

.review-card__text {
  margin: 0;
  color: var(--muted);
}

.review-card__author {
  margin: 0;
  font-weight: 700;
}

.review-card__link {
  margin-top: auto;
  align-self: flex-start;
}

/* Original VQS-Berater: message area and answer rail. */
.consultation-modal { z-index: 2500; display: flex; align-items: center; justify-content: center; }
.consultation-modal__backdrop { backdrop-filter: blur(4px); }
.consultation-modal__dialog { width: min(100%, 900px); max-height: min(92vh, 860px); display: flex; flex-direction: column; border-radius: var(--radius-xl); overflow: hidden; animation: consultationSlideIn .35s ease; }
.consultation-chat__body { flex: 1; min-height: 0; overflow-y: auto; padding: 1rem 1.15rem; scroll-behavior: smooth; }
.consultation-chat__messages { display: flex; flex-direction: column; gap: .75rem; min-height: 120px; }
.chat-bubble { max-width: 92%; padding: .75rem .95rem; border-radius: var(--radius-lg); font-size: .95rem; line-height: 1.5; animation: chatBubbleIn .3s ease; }
.chat-bubble--bot { align-self: flex-start; background: rgba(39,61,95,.75); border: 1px solid rgba(255,255,255,.06); border-bottom-left-radius: 4px; }
.chat-bubble--user { align-self: flex-end; background: linear-gradient(135deg,rgba(107,212,37,.25),rgba(107,212,37,.12)); border: 1px solid rgba(107,212,37,.35); border-bottom-right-radius: 4px; }
.chat-bubble--info { background: rgba(95,179,255,.12); border-color: rgba(95,179,255,.25); }
.chat-bubble__content p { margin: 0 0 .5rem; }.chat-bubble__content p:last-child { margin-bottom: 0; }
.consultation-chat__typing { display:flex; gap:4px; padding:.65rem .9rem; align-self:flex-start; background:rgba(39,61,95,.6); border-radius:16px 16px 16px 4px; }.consultation-chat__typing[hidden] { display:none; }.consultation-chat__typing span { width:6px;height:6px;border-radius:50%;background:var(--muted);animation:chatTyping 1s infinite ease-in-out; }.consultation-chat__typing span:nth-child(2){animation-delay:.15s}.consultation-chat__typing span:nth-child(3){animation-delay:.3s}
.consultation-chat__footer { display:block; max-height:42vh; overflow-y:auto; padding:.75rem 1.15rem 1rem; background:rgba(15,29,50,.35); }
.chat-options { display:flex; flex-direction:column; gap:.5rem; }.chat-option-btn { display:block; width:100%; text-align:center; padding:.75rem 1rem; border:1px solid rgba(255,255,255,.12); border-radius:var(--radius-md); background:rgba(39,61,95,.55); color:var(--text); font:inherit; font-size:.95rem; font-weight:500; cursor:pointer; transition:background var(--transition-fast),border-color var(--transition-fast),transform var(--transition-fast); }.chat-option-btn:hover { background:rgba(39,61,95,.85); border-color:rgba(107,212,37,.35); }.chat-option-btn:active { transform:scale(.99); }.chat-option-btn--primary { background:linear-gradient(135deg,var(--accent),#5cb01e);color:var(--dark);border-color:transparent;font-weight:600; }
.consultation-lead-form { display:flex; flex-direction:column; gap:.65rem; margin-top:.25rem; }.consultation-lead-form input,.consultation-lead-form textarea { padding:.65rem .75rem;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.12);background:rgba(15,29,50,.6);color:var(--text);font:inherit; }
@keyframes consultationSlideIn { from { opacity:0;transform:translateY(16px) scale(.98) } to { opacity:1;transform:translateY(0) scale(1) } } @keyframes chatBubbleIn { from { opacity:0;transform:translateY(6px) } to { opacity:1;transform:translateY(0) } } @keyframes chatTyping { 0%,80%,100% { opacity:.35;transform:scale(.85) } 40% { opacity:1;transform:scale(1) } }
@media (min-width:860px) { .consultation-modal__dialog { display:grid; grid-template-columns:1fr 300px; grid-template-rows:auto auto 1fr; grid-template-areas:"header header" "progress progress" "body options"; max-height:min(92vh,700px); }.consultation-modal__header{grid-area:header}.consultation-chat__progress{grid-area:progress}.consultation-chat__body{grid-area:body}.consultation-chat__footer{grid-area:options;border-top:0;border-left:1px solid rgba(255,255,255,.06);max-height:none;} }
@media (max-width:480px) { .consultation-modal { padding:0;align-items:stretch; }.consultation-modal__dialog { width:100%;max-height:100vh;border-radius:0; } }

/* Card motion from the PHP reference: small, tactile feedback without
   changing the layout or making content dependent on JavaScript. */
body.theme-dark :is(.card, .offer-card, .vehicle-card, .location-card, .wissen-card, .news-card, .icon-card, .contact-card, .calculator-column) {
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease;
  will-change: transform;
}
body.theme-dark :is(.card, .offer-card, .vehicle-card, .location-card, .wissen-card, .news-card, .icon-card, .contact-card, .calculator-column):is(:hover, :focus-within) {
  transform: translateY(-4px);
  border-color: rgba(107, 212, 37, .42);
  box-shadow: 0 12px 32px rgba(0, 0, 0, .30);
}
body.theme-dark .offer-card__media img,
body.theme-dark .vehicle-card__media img,
body.theme-dark .card img {
  transition: transform .35s ease;
}
body.theme-dark :is(.offer-card, .vehicle-card, .card):hover img { transform: scale(1.035); }
body.theme-dark .contact-card__cta i { transition: transform .2s ease; }
body.theme-dark .contact-card:hover .contact-card__cta i { transform: translateX(4px); }
/* Team (Armin, Jutta, Iris): source-specific card lift and portrait zoom. */
body.theme-dark .team-card { transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base); }
body.theme-dark .team-card__photo img { transition: transform var(--transition-base), filter var(--transition-base); }
@media (hover: hover) and (pointer: fine) {
  body.theme-dark .team-card:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(0,0,0,.28); border-color: rgba(255,255,255,.2); }
body.theme-dark .team-card:hover .team-card__photo img { transform: scale(1.035); }
}
/* Complete public-card inventory, aligned with the PHP reference.  Some
   homepage sections use their own names rather than the generic .card. */
body.theme-dark :is(.service-card, .feature-card, .info-card, .info-pill, .faq-entry, .faq-item, .hero-offer-tile, .location-hero__card) {
  transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base), filter var(--transition-base);
  will-change: transform;
}
@media (hover: hover) and (pointer: fine) {
  body.theme-dark :is(.service-card, .feature-card, .info-card, .info-pill, .faq-entry, .faq-item, .hero-offer-tile, .location-hero__card):hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 36px rgba(0,0,0,.28);
    border-color: rgba(255,255,255,.2);
  }
  body.theme-dark .hero-offer-tile img { transition: transform var(--transition-base), filter var(--transition-base); }
  body.theme-dark .hero-offer-tile:hover img { transform: scale(1.03); filter: brightness(1.06); }
  /* Standortgalerien und Fahrzeugwechsel: the PHP site gives both a small
     image response independent of the surrounding card. */
  body.theme-dark .gallery-item { display:block; overflow:hidden; border-radius:var(--radius-md); }
  body.theme-dark .gallery-item img { display:block; transition:transform var(--transition-base), filter var(--transition-base); }
  body.theme-dark .gallery-item:hover img { transform:scale(1.05); filter:brightness(1.06); }
  body.theme-dark .vehicle-thumb { transition:transform var(--transition-fast), border-color var(--transition-fast); }
  body.theme-dark .vehicle-thumb:hover, body.theme-dark .vehicle-thumb:focus-visible { transform:translateY(-2px); border-color:rgba(107,212,37,.55); }
}
@media (prefers-reduced-motion: reduce) {
  body.theme-dark :is(.card, .offer-card, .vehicle-card, .location-card, .wissen-card, .news-card, .icon-card, .contact-card, .calculator-column),
  body.theme-dark :is(.card, .offer-card, .vehicle-card) img,
  body.theme-dark .team-card, body.theme-dark .team-card__photo img,
  body.theme-dark :is(.service-card, .feature-card, .info-card, .info-pill, .faq-entry, .faq-item, .hero-offer-tile, .location-hero__card),
  body.theme-dark .gallery-item img, body.theme-dark .vehicle-thumb,
  body.theme-dark .contact-card__cta i { transition: none; }
  body.theme-dark :is(.card, .offer-card, .vehicle-card, .location-card, .wissen-card, .news-card, .icon-card, .contact-card, .calculator-column):is(:hover, :focus-within),
  body.theme-dark :is(.offer-card, .vehicle-card, .card):hover img,
  body.theme-dark .team-card:hover, body.theme-dark .team-card:hover .team-card__photo img,
  body.theme-dark :is(.service-card, .feature-card, .info-card, .info-pill, .faq-entry, .faq-item, .hero-offer-tile, .location-hero__card):hover,
  body.theme-dark .gallery-item:hover img, body.theme-dark .vehicle-thumb:hover,
  body.theme-dark .contact-card:hover .contact-card__cta i { transform: none; }
}

/* Desktop: the two fixed CTAs must be vertically stacked with a real gap.
   The source offsets were closer than the buttons' own height. */
@media (min-width: 1024px) {
  body.theme-dark .cta-floating--consultation { right: 1.5rem; bottom: 1.5rem; }
  body.theme-dark .cta-floating--price { left: auto; right: 1.5rem; bottom: 6rem; }
}

/* The production header keeps its three rows on desktop as well: logo,
   action buttons, then the horizontal navigation. */
@media (min-width: 900px) and (max-width: 1023px) {
  body.theme-dark .site-header { flex-direction: column; align-items: flex-start; justify-content: initial; }
  body.theme-dark .nav-block { flex-direction: column; align-items: flex-start; justify-content: initial; width: 100%; }
  body.theme-dark .header-actions { justify-content: flex-start; width: 100%; margin-top: 1rem; }
  body.theme-dark .main-nav { width: 100%; padding: .5rem 0; border-top: 1px solid rgba(255,255,255,.08); }
}

@media (min-width: 1024px) {
  body.theme-dark .site-header { flex-direction: row; justify-content: space-between; align-items: center; gap: 4rem; padding: 1.2rem 0 .5rem; }
  body.theme-dark .logo-block { width: auto; flex: 1; min-width: 0; }
  body.theme-dark .logo-block img { width: clamp(20rem, 32vw, 28rem); }
  body.theme-dark .nav-block { align-items: flex-end; flex-direction: column; gap: .5rem; flex: 1; margin-top: 0; }
  body.theme-dark .header-actions { width: 100%; justify-content: flex-end; order: 1; gap: .8rem; margin-top: 0; }
  body.theme-dark .main-nav { flex-direction: row; gap: 1rem; justify-content: flex-end; width: 100%; padding: 0; border-top: 0; order: 2; margin-top: .5rem; }
  body.theme-dark .main-nav a { border-radius: 999px; padding: .6rem 1.2rem; font-size: 1rem; }
  body.theme-dark .hero { flex-direction: row; align-items: center; min-height: 60vh; padding: 2.5rem 3rem; gap: 2rem; }
  body.theme-dark .hero__content { max-width: none; width: 100%; flex: 1 1 100%; }
  body.theme-dark .hero__content h1 { font-size: 2.5rem; line-height: 1.1; }
}

/* The administration is one coherent VQS surface. The public site's
   classic-navy compatibility layer above must not bleed into it, because
   the shell and its controls use the modern anthracite token set. */
body.theme-dark.page--admin {
  --dark: #0d1116;
  --panel: var(--m-surface);
  --lighter: #2b333d;
  --text: var(--m-ink);
  --muted: var(--m-muted-ink);
  background: var(--m-bg);
}

body.theme-dark.page--admin::before {
  display: none;
}

.admin-shell h1,
.admin-shell h2,
.admin-shell h3 {
  color: var(--text);
}

.admin-shell thead {
  background: var(--m-surface-dim);
}

.admin-shell :is(input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="url"], input[type="tel"], input[type="date"], input[type="time"], input[type="datetime-local"], input[type="file"], select, textarea) {
  width: 100%;
  max-width: 42rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--m-line-strong);
  border-radius: var(--radius-sm);
  background: var(--m-input-bg);
  color: var(--text);
  font: inherit;
}

.admin-shell input[type="checkbox"] {
  accent-color: var(--accent);
}

.admin-shell .admin-new,
.admin-shell .form-action a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.65rem 1rem;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--accent), #90e75f);
  color: #0c1b2f;
  font-weight: 700;
  text-decoration: none;
}

.admin-shell .table tbody td:first-child a {
  font-weight: 700;
}

.admin-shell .table-edit {
  display: inline-flex;
  padding: 0.38rem 0.7rem;
  border: 1px solid var(--m-line-strong);
  border-radius: 999px;
  color: var(--accent);
  font-weight: 700;
  text-decoration: none;
}

.admin-shell .table-edit:hover {
  border-color: var(--accent);
  background: var(--m-surface-dim);
}

.admin-shell .admin-delete {
  margin-top: 2rem;
}

.admin-shell .admin-delete button {
	background: linear-gradient(135deg, #ef5350, #d32f2f);
	color: #fff;
}

.admin-shell .rich-text { max-width: 52rem; }
.admin-shell .rich-text-toolbar { display: flex; flex-wrap: wrap; gap: .35rem; padding: .5rem; border: 1px solid var(--m-line-strong); border-bottom: 0; border-radius: var(--radius-sm) var(--radius-sm) 0 0; background: var(--m-surface-dim); }
.admin-shell .rich-text-toolbar button { min-width: 2.5rem; margin: 0; padding: .35rem .55rem; border: 1px solid var(--m-line-strong); border-radius: .35rem; background: var(--m-input-bg); color: var(--text); font: inherit; }
.admin-shell .rich-text-editor { min-height: 12rem; padding: .75rem .85rem; border: 1px solid var(--m-line-strong); border-radius: 0 0 var(--radius-sm) var(--radius-sm); background: var(--m-input-bg); color: var(--text); }
.admin-shell .rich-text-editor:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-shell .rich-text-editor :is(p, ul, ol) { margin: 0 0 .75rem; }

@media (max-width: 767px) {
  body.theme-dark { padding-bottom: 0; }
  body.theme-dark .cta-floating { border-radius: 999px; min-height: 0; padding: .85rem 1.2rem; }
  body.theme-dark .cta-floating--price { left: 1rem; right: auto; bottom: 10rem; }
  body.theme-dark .cta-floating--consultation { left: auto; right: 1rem; bottom: 4rem; border-left: 0; }
}