:root {
  --blue: #63bfea;
  --blue-strong: #2a78a3;
  /* Hover-Stufe zu --blue-strong, nur fuer gefuellte Buttons auf dunklem Grund. */
  --blue-deep: #1f5f83;
  --blue-soft: #eff8fd;
  --white: #ffffff;
  --paper: #f6f7f8;
  --surface: #eef1f4;
  --line: #cbe8f6;
  --line-strong: var(--blue);
  --text: #1d222a;
  --muted: #66707d;
  --anthracite: #2a2f38;
  --cardesk-anthracite: #2b3440;
  --shadow-soft: 0 10px 28px rgba(29, 34, 42, 0.06);
  --container: 1140px;
  --radius: 6px;
}

* {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  color: var(--text);
  background: var(--paper);
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
  line-height: 1.62;
}

body.nav-open {
  position: fixed;
  right: 0;
  left: 0;
  width: 100%;
  overflow: hidden;
}

body.nav-open .site-header {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
}

a {
  color: inherit;
}

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--blue-strong);
  outline-offset: 3px;
}

h1,
h2,
h3,
p {
  margin-top: 0;
}

h1,
h2,
h3 {
  color: var(--text);
  line-height: 1.2;
  letter-spacing: 0;
}

h1 {
  max-width: 760px;
  margin-bottom: 1rem;
  font-size: 2.72rem;
  font-weight: 650;
}

h2 {
  margin-bottom: 0.85rem;
  font-size: 1.68rem;
  font-weight: 650;
}

h3 {
  margin-bottom: 0.45rem;
  font-size: 1.02rem;
  font-weight: 700;
}

p {
  margin-bottom: 1rem;
}

.container {
  width: min(100% - 2rem, var(--container));
  margin-inline: auto;
}

.narrow {
  width: min(100% - 2rem, 830px);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--line);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 66px;
  gap: 1rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 0.78rem;
  color: var(--text);
  text-decoration: none;
}

.brand strong,
.brand small {
  display: block;
}

.brand strong {
  font-size: 0.98rem;
  font-weight: 700;
}

.brand small {
  color: var(--muted);
  font-size: 0.76rem;
}

.brand-logo {
  display: block;
  flex: 0 0 auto;
  width: auto;
  height: 38px;
  aspect-ratio: 1012 / 584;
  object-fit: contain;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 0.08rem;
}

.site-nav a {
  min-height: 38px;
  padding: 0.54rem 0.6rem;
  color: var(--text);
  border-bottom: 2px solid transparent;
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 600;
}

.site-nav a:hover,
.site-nav a[aria-current="page"] {
  color: var(--anthracite);
  border-bottom-color: rgba(42, 120, 163, 0.45);
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}

.header-phone {
  color: var(--anthracite);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 700;
  white-space: nowrap;
}

.nav-toggle {
  display: none;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  cursor: pointer;
}

.nav-toggle-lines,
.nav-toggle-lines::before,
.nav-toggle-lines::after {
  display: block;
  width: 19px;
  height: 2px;
  background: currentColor;
}

.nav-toggle-lines {
  position: relative;
}

.nav-toggle-lines::before,
.nav-toggle-lines::after {
  position: absolute;
  left: 0;
  content: "";
}

.nav-toggle-lines::before {
  top: -7px;
}

.nav-toggle-lines::after {
  top: 7px;
}

.hero,
.page-hero,
.section {
  padding-block: 4rem;
}

.hero {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.page-hero {
  background: var(--white);
  border-bottom: 1px solid var(--line);
}

.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
  gap: 2.25rem;
  align-items: center;
}

.hero-copy {
  padding: 0.4rem 0;
}

.hero-text,
.page-lead {
  max-width: 680px;
  color: var(--muted);
  font-size: 1.05rem;
}

.eyebrow,
.section-kicker,
.service-label {
  margin-bottom: 0.62rem;
  color: var(--anthracite);
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.hero .eyebrow {
  font-size: 0.74rem;
}

.hero-actions,
.contact-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.58rem;
  margin-top: 1.25rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0.58rem 0.85rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 650;
}

.button:hover {
  border-color: var(--blue);
}

.button-small {
  min-height: 36px;
  padding: 0.48rem 0.72rem;
  font-size: 0.86rem;
}

.button-primary {
  color: var(--text);
  background: var(--blue);
  border-color: var(--blue);
}

.button-primary:hover {
  color: var(--white);
  background: var(--blue-strong);
}

.button-secondary {
  color: var(--text);
  background: var(--white);
}

.site-facts,
.contact-box,
.info-card,
.service-card,
.detail-card,
.story-block,
.profile-box,
.station-card,
.station-panel {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.site-facts {
  padding: 1.25rem;
  border-top: 3px solid var(--blue);
  box-shadow: var(--shadow-soft);
}

.facts-title {
  margin-bottom: 0.65rem;
  padding-bottom: 0.65rem;
  color: var(--text);
  border-bottom: 1px solid var(--line);
  font-size: 1rem;
  font-weight: 700;
}

.facts-list,
.hours-list {
  margin: 0;
}

.facts-list div,
.hours-list div {
  display: grid;
  grid-template-columns: 7.4rem 1fr;
  gap: 0.85rem;
  padding-block: 0.78rem;
  border-top: 1px solid var(--line);
}

.facts-list div:first-child,
.hours-list div:first-child {
  border-top: 0;
}

.facts-list.compact div {
  grid-template-columns: 6.6rem 1fr;
}

dt {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 700;
}

dd {
  margin: 0;
  color: var(--muted);
}

.quick-actions {
  padding-block: 1.25rem;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}

.quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.85rem;
}

.action-card {
  position: relative;
  display: grid;
  gap: 0.28rem;
  min-height: 172px;
  padding: 1rem 2.1rem 1rem 1rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
}

.action-card:hover {
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.action-card::after {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  color: var(--anthracite);
  content: "›";
  font-size: 1.2rem;
  line-height: 1;
}

.action-card span {
  color: var(--text);
  font-size: 0.98rem;
  font-weight: 700;
}

.action-card small {
  color: var(--muted);
  font-size: 0.9rem;
}

.section-white {
  background: var(--white);
  border-block: 1px solid var(--line);
}

.split-section,
.about-grid,
.contact-layout,
.location-grid,
.strip-inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 2.4rem;
  align-items: start;
}

.section-heading {
  max-width: 760px;
}

.section-heading p,
.prose,
.service-intro,
.plain-note,
.address-line,
.contact-box p,
.strip-inner p,
.contact-note {
  color: var(--muted);
}

.info-grid,
.service-grid,
.services-list,
.values-row {
  display: grid;
  gap: 0.9rem;
}

.two-columns,
.services-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.info-card,
.service-card,
.detail-card,
.story-block,
.profile-box,
.contact-box {
  padding: 1.1rem;
}

.info-card,
.service-card,
.detail-card,
.story-block,
.profile-box,
.contact-box {
  box-shadow: 0 1px 0 rgba(29, 34, 42, 0.02);
}

.service-card {
  min-height: 224px;
  border-top: 3px solid transparent;
}

.service-card:hover,
.info-card:hover {
  border-color: var(--line-strong);
}

.service-card:hover {
  border-top-color: rgba(42, 120, 163, 0.42);
}

.service-card p,
.info-card p {
  color: var(--muted);
  font-size: 0.95rem;
}

.service-card p:last-child,
.info-card p:last-child {
  margin-bottom: 0;
}

.detail-card {
  min-height: 100%;
}

.detail-card h2 {
  font-size: 1.36rem;
}

.services-overview {
  background: linear-gradient(180deg, var(--white), var(--blue-soft) 58%, var(--white));
}

.services-heading {
  margin-bottom: 1.65rem;
}

.services-heading p:last-child {
  color: var(--muted);
}

.services-jump-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.75rem;
  margin-bottom: clamp(2.2rem, 5vw, 3.5rem);
}

.services-jump-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.72rem 0.9rem;
  color: var(--anthracite);
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.services-jump-link:hover {
  color: var(--blue-strong);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-soft);
}

.service-group {
  padding-block: clamp(2rem, 5vw, 3.5rem);
}

.service-group + .service-group {
  border-top: 1px solid var(--line);
}

.service-group .station-layout {
  align-items: center;
}

.service-group .station-media .preview-image {
  min-height: 300px;
}

/* Leistungsseite: orientierende Service-Navigation und ruhige Szenen-Einstiege. */
.services-page .services-heading {
  max-width: 820px;
  margin-bottom: 1.35rem;
}

.services-page .services-unknown-link {
  display: inline-flex;
  gap: 0.32rem;
  align-items: baseline;
  margin-top: 0.72rem;
  color: var(--blue-strong);
  font-size: 0.94rem;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
}

.services-page .services-process {
  margin: 0 0 clamp(2.6rem, 5vw, 4rem);
  padding: clamp(1rem, 2.2vw, 1.35rem);
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(42, 120, 163, 0.18);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(29, 34, 42, 0.045);
}

.services-page .services-process h3 {
  margin-bottom: 0.85rem;
  font-size: 1.08rem;
}

.services-page .services-process ol {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.72rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: service-process;
}

.services-page .services-process li {
  position: relative;
  display: grid;
  gap: 0.2rem;
  min-width: 0;
  padding-left: 2rem;
  counter-increment: service-process;
}

.services-page .services-process li::before {
  position: absolute;
  top: 0;
  left: 0;
  display: grid;
  width: 1.5rem;
  height: 1.5rem;
  place-items: center;
  color: var(--blue-strong);
  background: var(--blue-soft);
  border: 1px solid rgba(42, 120, 163, 0.22);
  border-radius: 50%;
  content: counter(service-process);
  font-size: 0.7rem;
  font-weight: 800;
}

.services-page .services-process strong,
.services-page .services-process span {
  display: block;
}

.services-page .services-process strong {
  color: var(--text);
  font-size: 0.9rem;
}

.services-page .services-process span {
  color: var(--muted);
  font-size: 0.86rem;
  line-height: 1.45;
}

.services-page .services-jump-nav {
  position: sticky;
  top: calc(var(--garage-header-height, 66px) + 0.55rem);
  z-index: 12;
  /* Keine feste Spaltenzahl: die Leiste bekommt automatisch so viele gleich breite
     Spalten, wie Stationen im Markup stehen. Ein fester Wert wurde beim Wegfall von
     Stationen vergessen und liess rechts eine leere Flaeche stehen. */
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0.48rem;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
  padding: 0.52rem;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(99, 191, 234, 0.5);
  border-radius: 12px;
  box-shadow: 0 18px 42px rgba(29, 34, 42, 0.1);
  backdrop-filter: blur(12px);
}

.services-page .services-jump-link {
  position: relative;
  display: grid;
  min-height: 88px;
  align-content: space-between;
  gap: 0.4rem;
  padding: 0.72rem 0.68rem 0.66rem;
  color: var(--anthracite);
  background: linear-gradient(145deg, var(--white), var(--paper));
  border: 1px solid rgba(42, 120, 163, 0.16);
  border-radius: 8px;
  box-shadow: 0 5px 16px rgba(29, 34, 42, 0.045);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  transition: color 180ms ease, background 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}

.services-page .services-jump-link::before {
  color: var(--blue-strong);
  content: attr(data-number);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.services-page .services-jump-link::after {
  position: absolute;
  right: 0.68rem;
  bottom: 0.7rem;
  width: 18px;
  height: 2px;
  background: var(--blue);
  content: "";
  transform-origin: right center;
  transition: width 180ms ease, background 180ms ease;
}

.services-page .services-jump-link:hover {
  border-color: rgba(42, 120, 163, 0.42);
  box-shadow: 0 10px 24px rgba(29, 34, 42, 0.08);
  transform: translateY(-2px);
}

.services-page .services-jump-link[aria-current="location"] {
  color: var(--text);
  background: linear-gradient(145deg, #f5fbfe, #dff2fb);
  border-color: var(--blue-strong);
  box-shadow: 0 12px 28px rgba(42, 120, 163, 0.16), inset 0 0 0 1px rgba(42, 120, 163, 0.08);
  transform: translateY(-2px);
}

.services-page .services-jump-link[aria-current="location"]::before {
  color: var(--blue-strong);
}

.services-page .services-jump-link[aria-current="location"]::after {
  width: 30px;
  background: var(--blue-strong);
}

.services-page .service-title-two-lines span {
  display: block;
  white-space: nowrap;
}

.services-page .service-scene-title {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 0.8rem;
  align-items: start;
  margin-bottom: clamp(1rem, 2vw, 1.45rem);
}

.services-page .service-scene-number {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--blue-strong);
  background: var(--blue-soft);
  border: 1px solid rgba(42, 120, 163, 0.24);
  border-radius: 50%;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.services-page .service-scene-title .station-step {
  margin: 0.08rem 0 0.32rem;
}

.services-page .service-scene-title h2 {
  grid-column: 2;
  max-width: 720px;
  margin: 0;
  font-size: clamp(2rem, 3.4vw, 3.25rem);
  line-height: 1.08;
  text-wrap: balance;
}

.services-page .service-group > .station-layout {
  scroll-margin-top: 180px;
}

.services-page .service-group.section-anchor {
  scroll-margin-top: 190px;
}

.services-page .service-points {
  display: grid;
  gap: 0.58rem;
  max-width: 640px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.services-page .service-points li {
  position: relative;
  display: grid;
  gap: 0.18rem;
  padding: 0.74rem 0.88rem 0.76rem 1rem;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid var(--line);
  border-left: 3px solid rgba(99, 191, 234, 0.48);
  border-radius: var(--radius);
}

.services-page .service-points .service-deep-anchor {
  position: absolute;
  top: -6.2rem;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}

.services-page .service-points strong,
.services-page .service-points span {
  display: block;
}

.services-page .service-points strong {
  color: var(--text);
  font-size: 0.96rem;
  line-height: 1.3;
}

.services-page .service-points span {
  color: var(--muted);
  font-size: 0.91rem;
  line-height: 1.5;
}

.services-page .service-points a {
  overflow-wrap: anywhere;
}

.services-page .service-group-compact {
  padding-block: clamp(2.5rem, 5vw, 3.8rem);
}

.services-page .service-group-compact .station-layout {
  gap: clamp(1.6rem, 3.5vw, 2.5rem);
}

.services-page .service-group-compact .service-scene-title {
  margin-bottom: 0.9rem;
}

.services-page .service-group-compact .service-scene-number {
  width: 38px;
  height: 38px;
}

.services-page .service-group-compact .service-scene-title h2 {
  font-size: clamp(1.75rem, 2.8vw, 2.55rem);
}

.services-page .service-group-compact .station-media .preview-image {
  min-height: 280px;
}

.services-page .service-group-compact .station-content {
  gap: 0.7rem;
}

.services-page .service-group-compact .station-lead {
  font-size: 0.98rem;
}

.services-list-refined {
  gap: 1rem;
}

.service-card-quiet {
  position: relative;
  overflow: hidden;
  padding: 1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(239, 248, 253, 0.82));
  border-color: rgba(203, 232, 246, 0.9);
  box-shadow: 0 12px 30px rgba(29, 34, 42, 0.045);
}

.service-card-quiet::before {
  position: absolute;
  inset: 1rem auto 1rem 0;
  width: 3px;
  background: linear-gradient(180deg, rgba(42, 120, 163, 0.72), rgba(42, 120, 163, 0.08));
  border-radius: 999px;
  content: "";
}

.service-card-quiet .card-media {
  margin: -0.15rem -0.15rem 0.95rem;
}

.service-card-quiet .preview-image {
  aspect-ratio: 16 / 8.6;
  border-color: rgba(203, 232, 246, 0.92);
  box-shadow: 0 8px 22px rgba(29, 34, 42, 0.05);
}

.service-card-quiet h2 {
  max-width: 24rem;
  margin-bottom: 0.62rem;
  font-size: 1.28rem;
}

.service-card-quiet .service-intro {
  max-width: 34rem;
  margin-bottom: 0.95rem;
}

.service-card-accent {
  border-color: rgba(99, 191, 234, 0.2);
}

.services-support-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}

.service-card-compact {
  padding: 1rem 1rem 1.05rem;
}

.service-card-compact h2 {
  font-size: 1.14rem;
}

.service-card-compact .service-intro,
.service-card-compact .check-list li {
  font-size: 0.93rem;
}

.text-link {
  color: var(--blue-strong);
  font-weight: 700;
  text-decoration-color: var(--line-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}

.card-media {
  margin-bottom: 0.78rem;
}

.image-placeholder {
  position: relative;
  display: grid;
  min-height: 82px;
  place-items: center;
  gap: 0.45rem;
  overflow: hidden;
  padding: 0.82rem;
  color: var(--muted);
  background:
    linear-gradient(135deg, rgba(42, 120, 163, 0.035) 25%, transparent 25%) 0 0 / 18px 18px,
    linear-gradient(135deg, transparent 75%, rgba(42, 120, 163, 0.035) 75%) 0 0 / 18px 18px,
    var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-align: center;
}

.image-placeholder--wide {
  min-height: 124px;
}

.image-placeholder--tall {
  min-height: 220px;
}

.image-placeholder__icon {
  position: relative;
  display: block;
  width: 34px;
  height: 25px;
  background: rgba(255, 255, 255, 0.62);
  border: 1px solid var(--line-strong);
  border-radius: 4px;
}

.image-placeholder__icon::before,
.image-placeholder__icon::after {
  position: absolute;
  content: "";
}

.image-placeholder__icon::before {
  top: 5px;
  left: 6px;
  width: 6px;
  height: 6px;
  background: rgba(42, 120, 163, 0.18);
  border-radius: 50%;
}

.image-placeholder__icon::after {
  right: 5px;
  bottom: 5px;
  left: 7px;
  height: 9px;
  background: linear-gradient(135deg, transparent 42%, rgba(42, 120, 163, 0.18) 43% 68%, transparent 69%);
}

.image-placeholder__label {
  position: relative;
  color: var(--blue-strong);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

.preview-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.preview-image--tall {
  aspect-ratio: 4 / 3;
}

.hero-stage {
  --hero-progress: 0;
  --hero-sticky-height: calc(100svh - var(--garage-header-height, 0px));
  --hero-grid-max: 1300px;
  --hero-copy-col: 0.72fr;
  --hero-media-col: 1.48fr;
  --hero-padding-block: clamp(3.8rem, 6vw, 5.4rem);
  --hero-title-size: clamp(3rem, 4vw, 3.4rem);
  --hero-text-size: 1.16rem;
  --hero-copy-y: 0px;
  --hero-media-scale: 1.1;
  --hero-media-x: -20px;
  --hero-media-y: 0px;
  --hero-image-radius: 1px;
  --hero-shadow-alpha: 0.17;
  --hero-caption-opacity: 1;
  --hero-image-max-height: calc(100svh - var(--garage-header-height, 0px) - 4rem);
  min-height: 195svh;
  padding-block: 0;
  background:
    linear-gradient(180deg, var(--white), var(--paper));
}

.hero-stage-contact {
  min-height: 160svh;
}

.hero-stage-services {
  min-height: 160svh;
}

.hero-stage-about {
  min-height: 160svh;
}

.hero-visit {
  background: var(--white);
}

.hero-visit-sticky {
  position: sticky;
  top: var(--garage-header-height, 0px);
  display: grid;
  min-height: var(--hero-sticky-height);
  align-items: center;
  overflow: hidden;
  padding-block: var(--hero-padding-block);
}

.hero-visit-sticky::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(42, 120, 163, 0.06), transparent 38%),
    linear-gradient(180deg, rgba(99, 191, 234, 0.06), transparent 34%);
  content: "";
  opacity: calc(1 - (var(--hero-progress, 0) * 0.35));
  pointer-events: none;
}

.hero-story-grid {
  position: relative;
  z-index: 1;
  width: min(100% - 2rem, var(--hero-grid-max));
  display: grid;
  grid-template-columns: minmax(0, var(--hero-copy-col)) minmax(320px, var(--hero-media-col));
  gap: 2.6rem;
  align-items: center;
}

.hero-visit h1 {
  max-width: 620px;
  font-size: var(--hero-title-size);
}

.hero-stage .hero-copy {
  transform: translateY(var(--hero-copy-y));
}

.hero-stage .hero-text {
  font-size: var(--hero-text-size);
}

.hero-contact-line {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.95rem;
  font-weight: 650;
}

.hero-contact-line a {
  color: var(--anthracite);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.hero-media {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: var(--hero-image-radius);
  box-shadow: 0 18px 48px rgba(29, 34, 42, var(--hero-shadow-alpha));
}

.hero-media .preview-image {
  min-height: 0;
  max-height: var(--hero-image-max-height);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center center;
  border-color: var(--line-strong);
  border-radius: var(--hero-image-radius);
  box-shadow: none;
  transform: translate(var(--hero-media-x), var(--hero-media-y)) scale(var(--hero-media-scale));
  transform-origin: center;
}

.hero-stage .hero-media {
  transform: none;
}

.hero-media figcaption {
  position: absolute;
  right: 1rem;
  bottom: 1rem;
  max-width: min(90%, 320px);
  padding: 0.72rem 0.85rem;
  color: var(--text);
  background: rgba(255, 255, 255, 0.94);
  border-left: 4px solid var(--blue);
  border-radius: var(--radius);
  font-size: 0.9rem;
  font-weight: 700;
  opacity: var(--hero-caption-opacity, 1);
}

/* ---------------------------------------------------------------------------
   Startseite: Vollbild-Hero (.home-hero)

   Bewusst unabhaengig von .hero-stage / .hero-visit-sticky. Diese Klassen
   tragen weiterhin die Sticky-Choreografie der Unterseiten (leistungen.html,
   ueber-uns.html, kontakt.html) und bleiben deshalb unveraendert bestehen.

   Das Bild ist ein <img> mit alt-Text und wird hier nur als Hintergrundebene
   positioniert (z-index -2), darueber liegt der Verlauf (.home-hero-scrim,
   z-index -1), darueber der Inhalt. .home-hero bildet dafuer einen eigenen
   Stacking-Kontext (isolation: isolate).
   --------------------------------------------------------------------------- */
.home-hero {
  --home-hero-progress: 0;
  --home-hero-overlay: 0;
  --home-hero-image-shift: 0px;
  --home-hero-image-scale: 1;
  --home-hero-copy-shift: 0px;
  --home-hero-copy-opacity: 1;
  position: relative;
  z-index: 0;
  display: grid;
  align-items: center;
  min-height: calc(100svh - var(--garage-header-height, 66px));
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(2.5rem, 6svh, 4.5rem);
  background: var(--anthracite);
  border-bottom: 1px solid var(--blue-strong);
}

.home-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  height: 3px;
  background: var(--blue);
  content: "";
  pointer-events: none;
  transform: scaleX(var(--home-hero-progress));
  transform-origin: left center;
  will-change: transform;
}

.home-hero-image {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Haelt Schriftzug (linke Bildhaelfte) und blaues Tor (rechte Bildhaelfte)
     im sichtbaren Ausschnitt; geprueft bei 1280 und 1920 Breite. */
  object-position: 50% calc(38% + var(--home-hero-image-shift));
  transform: scale(var(--home-hero-image-scale));
  transform-origin: center center;
  will-change: transform, object-position;
}

/* Das Bild ist hell (weisse Wand, heller Himmel). Der Verlauf ist deshalb
   bewusst kraeftig: links, wo der Text steht, bleibt er nahezu deckend,
   nach rechts oeffnet er sich auf das Tor. */
.home-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(
      90deg,
      rgba(29, 34, 42, 0.95) 0%,
      rgba(29, 34, 42, 0.92) 42%,
      rgba(29, 34, 42, 0.66) 68%,
      rgba(29, 34, 42, 0.3) 100%
    ),
    linear-gradient(
      180deg,
      rgba(29, 34, 42, 0.34) 0%,
      rgba(29, 34, 42, 0) 34%,
      rgba(29, 34, 42, 0.52) 100%
    );
  background-color: rgb(29 34 42 / var(--home-hero-overlay));
  pointer-events: none;
}

.home-hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(310px, 0.85fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}

.home-hero-copy {
  max-width: 40rem;
  opacity: var(--home-hero-copy-opacity);
  transform: translate3d(0, var(--home-hero-copy-shift), 0);
  will-change: opacity, transform;
}

.home-hero-eyebrow {
  margin-bottom: 0.7rem;
  color: var(--blue);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0;
}

.home-hero h1 {
  max-width: 18ch;
  margin-bottom: 1.05rem;
  color: var(--white);
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  line-height: 1.08;
}

.home-hero-lead {
  max-width: 46ch;
  margin-bottom: 1.55rem;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.2rem;
  line-height: 1.55;
}

.home-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem;
}

.home-hero-cta,
.home-hero-cta-ghost {
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  font-size: 0.98rem;
}

.home-hero-cta {
  color: var(--white);
  background: var(--blue-strong);
  border-color: var(--blue-strong);
}

.home-hero-cta:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}

.home-hero-cta-ghost {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.75);
}

.home-hero-cta-ghost:hover {
  color: var(--text);
  background: var(--white);
  border-color: var(--white);
}

.home-hero-contact {
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
  font-weight: 650;
}

.home-hero-contact a {
  color: var(--white);
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* Der globale Fokusring (--blue-strong) erreicht auf dem dunklen Verlauf
   keine 3:1. Auf der dunklen Seite deshalb --blue, im hellen Panel bleibt
   der globale Ring bestehen. */
.home-hero-copy a:focus-visible {
  outline-color: var(--blue);
}

.home-hero-panel {
  position: relative;
  overflow: hidden;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  color: var(--text);
  /* 0.96 statt tiefer: darunter fiel der Kontrast der Panel-Beschriftung
     gegen den hellen Bildhintergrund unter 4.5:1 (nachgemessen). */
  background: rgba(255, 255, 255, 0.96);
  border: 1px solid rgba(99, 191, 234, 0.6);
  border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(29, 34, 42, 0.3);
  backdrop-filter: blur(10px);
  opacity: var(--home-hero-copy-opacity);
  transform: translate3d(0, var(--home-hero-copy-shift), 0);
  will-change: opacity, transform;
}

.home-hero-panel > * {
  position: relative;
  z-index: 1;
}

.home-hero-panel-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.15rem;
  padding-bottom: 0.72rem;
  border-bottom: 1px solid var(--line);
}

.home-hero-panel-head strong {
  font-size: 1.02rem;
  font-weight: 700;
}

.home-hero-panel-head span {
  /* --blue-strong erreichte auf dem halbtransparenten Panel nur 4.32:1. */
  color: var(--blue-deep);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.home-hero-hours {
  margin: 0;
}

.home-hero-hours div {
  display: grid;
  grid-template-columns: 4.6rem 1fr;
  gap: 0.85rem;
  padding-block: 0.7rem;
  border-top: 1px solid var(--line);
}

.home-hero-hours div:first-child {
  border-top: 0;
}

.home-hero-hours dd {
  color: var(--text);
  font-weight: 650;
}

.home-hero-panel-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.6rem;
  margin-top: 0.9rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--line);
}

.home-hero-panel-actions .button {
  white-space: nowrap;
}

/* Dezenter Lichtstreifen ueber der Karte. Liegt unter dem Inhalt (z-index 0),
   damit die Textkontraste unberuehrt bleiben. Ohne Animation steht der
   Streifen ausserhalb der Karte und ist durch overflow: hidden unsichtbar -
   bei prefers-reduced-motion: reduce ist der Effekt damit vollstaendig aus. */
.home-hero-panel::after {
  position: absolute;
  top: -36%;
  right: 0;
  left: 0;
  z-index: 0;
  height: 36%;
  background: linear-gradient(to bottom, transparent, rgba(99, 191, 234, 0.1), transparent);
  content: "";
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .home-hero-panel::after {
    animation: home-hero-panel-scan 9s ease-in-out infinite;
  }
}

.home-page.is-home-motion-reduced .home-hero-panel::after {
  display: none;
  animation: none;
}

.home-page.is-home-motion-reduced .home-hero-image,
.home-page.is-home-motion-reduced .home-hero-copy,
.home-page.is-home-motion-reduced .home-hero-panel {
  will-change: auto;
}

@keyframes home-hero-panel-scan {
  0%,
  14% {
    transform: translateY(-100%);
    opacity: 0;
  }

  24% {
    opacity: 1;
  }

  58% {
    transform: translateY(390%);
    opacity: 0.85;
  }

  66%,
  100% {
    transform: translateY(390%);
    opacity: 0;
  }
}

.section-anchor {
  scroll-margin-top: 96px;
}

.visit-station {
  scroll-margin-top: 140px;
}

.station-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 2.35rem;
  align-items: center;
}

.station-layout-reverse .station-media {
  order: 2;
}

.station-media .preview-image {
  min-height: 360px;
  object-fit: cover;
  box-shadow: var(--shadow-soft);
}

.visit-station-feature .station-layout {
  gap: clamp(1.6rem, 4vw, 3rem);
  align-items: stretch;
}

.visit-station-feature .station-media {
  display: grid;
  align-content: stretch;
}

.visit-station-feature .station-media .preview-image {
  height: 100%;
  min-height: 420px;
  border-color: var(--line-strong);
}

.visit-station-feature .station-content {
  align-content: center;
  padding-block: 0.5rem;
}

.visit-station-feature .station-lead {
  max-width: 600px;
  font-size: 1rem;
}

.visit-station-feature .station-services {
  gap: 0.62rem;
  margin-top: 0.25rem;
}

.visit-station-feature .station-services article {
  min-height: 116px;
  padding: 0.86rem 0.9rem;
  background: var(--white);
  border-color: var(--line);
  border-top: 0;
  box-shadow: 0 1px 0 rgba(29, 34, 42, 0.02);
}

.visit-station-feature .station-services article::before {
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 0.82rem;
  background: rgba(99, 191, 234, 0.42);
  content: "";
}

.visit-station-feature .station-services h3 {
  font-size: 0.98rem;
  line-height: 1.28;
}

.visit-station-feature .station-services p {
  font-size: 0.91rem;
}

.visit-station-scene {
  --station-progress: 1;
  --station-media-col: 52.5%;
  --station-content-col: 47.5%;
  --station-image-height: 420px;
  --station-media-width: 52.5%;
  --station-media-left: 0%;
  --station-media-right: 0%;
  --station-media-scale: 1;
  --station-content-opacity: 1;
  --station-content-y: 0px;
  --station-card-opacity: 1;
  --station-card-y: 0px;
  --station-image-radius: var(--radius);
  --station-shadow-alpha: 0.06;
}

.visit-station-workshop .station-layout {
  gap: clamp(1.7rem, 4vw, 3rem);
}

.visit-station-diagnose .station-layout,
.visit-station-carrosserie .station-layout,
.visit-station-season .station-layout {
  gap: clamp(1.7rem, 4vw, 3rem);
  align-items: center;
}

.station-media-frame {
  margin: 0;
}

.station-media-frame .preview-image {
  display: block;
  border-color: var(--line-strong);
  box-shadow: 0 16px 42px rgba(29, 34, 42, 0.12);
}

.station-media-frame figcaption {
  margin-top: 0.64rem;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.45;
}

/* --- Kennzeichnung KI-generierter Symbolbilder -------------------------- */
/* Die sieben Vorschaubilder ohne echtes Pendant sind KI-generiert. Sie duerfen
   nicht wirken, als zeigten sie die echte Garage (OFFENE_FRAGEN.md Nr. 8).
   Farbe und Groesse folgen der bestehenden Bildunterschrift, eine Stufe leiser. */
.bild-symbolhinweis {
  color: var(--muted);
  font-size: 0.76rem;
}

/* Bildplaetze ohne bestehende Unterschrift bekommen eine eigene, die nur die
   Kennzeichnung traegt. Die Bildoptik bleibt dabei unveraendert - deshalb eine
   eigene Klasse und nicht .station-media-frame. */
.media-symbolbild {
  margin: 0;
}

.media-symbolbild > figcaption {
  margin-top: 0.64rem;
  line-height: 1.45;
}

.station-services-workshop,
.station-services-calm {
  grid-template-columns: 1fr;
  gap: 0.64rem;
  max-width: 640px;
}

.station-services-workshop article,
.station-services-calm article {
  position: relative;
  min-height: auto;
  padding: 0.92rem 1rem 0.94rem 1.05rem;
  background: var(--white);
  border-color: var(--line);
  border-top: 0;
  box-shadow: 0 1px 0 rgba(29, 34, 42, 0.03);
}

.station-services-workshop article::before,
.station-services-calm article::before {
  position: absolute;
  top: 1rem;
  left: 0;
  width: 3px;
  height: calc(100% - 2rem);
  min-height: 30px;
  background: rgba(99, 191, 234, 0.38);
  content: "";
}

.station-services-workshop h3,
.station-services-calm h3 {
  margin-bottom: 0.26rem;
  font-size: 1rem;
  line-height: 1.26;
}

.station-services-workshop p,
.station-services-calm p {
  font-size: 0.93rem;
  line-height: 1.55;
}

.station-action-link {
  justify-self: start;
  margin-top: 0.16rem;
  color: var(--anthracite);
  background: transparent;
  border-color: var(--line-strong);
  box-shadow: none;
}

.station-action-link:hover {
  color: var(--blue-strong);
  background: var(--white);
}

.service-intake {
  display: grid;
  gap: 0.72rem;
  width: min(100%, 640px);
}

.service-intake-wide {
  width: 100%;
  margin-top: clamp(1rem, 2.6vw, 1.65rem);
}

.service-intake-toggle {
  cursor: pointer;
  font: inherit;
}

.service-intake-panel {
  display: grid;
  grid-template-columns: minmax(128px, 0.78fr) minmax(0, 1.42fr);
  align-items: start;
  gap: 0.62rem;
  padding: 0.78rem 0.88rem 0.86rem 0.98rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 3px solid rgba(99, 191, 234, 0.38);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(29, 34, 42, 0.03);
}

.service-intake-panel[hidden] {
  display: none;
}

html:not(.js-ready) .service-intake-toggle {
  display: none;
}

html:not(.js-ready) .service-intake-panel[hidden] {
  display: grid;
}

.service-intake-heading h3 {
  margin-bottom: 0.18rem;
  font-size: 0.98rem;
}

.service-intake-heading p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.42;
}

.service-intake-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.52rem 0.58rem;
}

.service-intake-form label,
.service-intake-form-note {
  min-width: 0;
}

.service-intake-form label span {
  display: block;
  margin-bottom: 0.22rem;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
}

.service-intake-form input,
.service-intake-form select,
.service-intake-form textarea {
  width: 100%;
  min-height: 42px;
  padding: 0.45rem 0.56rem;
  color: var(--text);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
  font-size: 0.92rem;
}

.service-intake-form input:focus-visible,
.service-intake-form select:focus-visible,
.service-intake-form textarea:focus-visible {
  border-color: var(--blue-strong);
  outline: 3px solid rgba(42, 120, 163, 0.2);
  outline-offset: 1px;
}

.service-intake-form textarea {
  min-height: 58px;
  resize: vertical;
}

.service-intake-form-note {
  grid-column: 1 / -1;
}

.service-intake-form button {
  justify-self: end;
  margin-top: 0.06rem;
}

.station-content {
  display: grid;
  gap: 0.82rem;
  align-content: start;
}

.station-step {
  margin-bottom: 0;
  color: var(--blue-strong);
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.station-lead {
  max-width: 640px;
  color: var(--muted);
  font-size: 1.02rem;
}

.station-services {
  display: grid;
  gap: 0.75rem;
}

.station-services {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Desktop: Die Kaertchen stehen in der Textspalte NEBEN dem Bild, nicht ueber
   die volle Containerbreite. Der Container ist auf --container (1140px)
   gedeckelt, die Textspalte misst dort rund 519px. Drei Spalten ergeben darin
   rund 135px Textbreite: gemessen 15 Zeichen pro Zeile und bis zu 5 Zeilen je
   Kaertchen (leistungen.html bis 9 Zeilen, 13 von 21 Ueberschriften
   umgebrochen). Weil der Deckel greift, wird das auf breiteren Bildschirmen
   nicht besser - 1280, 1440 und 1920 messen identisch.
   Eine Spalte bringt den Fliesstext auf 55-60 Zeichen pro Zeile und damit in
   den lesbaren Korridor; zwei Spalten blieben mit 27-29 Zeichen darunter.
   Die Seitenhoehe aendert sich dadurch nicht, weil die Bildspalte in jeder
   Station ohnehin hoeher ist als die Textspalte.
   Nur ab 981px, darunter greifen die bestehenden Raster (2 Spalten ab 980px,
   1 Spalte ab 760px) fuer die dann volle Containerbreite. */
@media (min-width: 981px) {
  .station-layout .station-services {
    grid-template-columns: 1fr;
  }
}

.station-services-compact {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.station-services article,
.contact-form,
.map-card,
.hours-card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.section-white .station-services article,
.section-white .map-card,
.section-white .hours-card {
  background: var(--paper);
}

.station-services article {
  min-height: 132px;
  padding: 0.92rem;
  border-top: 3px solid var(--blue);
}

.visit-station-feature.section-white .station-services article {
  min-height: 116px;
  padding: 0.86rem 0.9rem;
  background: var(--white);
  border-color: var(--line);
  border-top: 0;
  box-shadow: 0 1px 0 rgba(29, 34, 42, 0.02);
}

.station-services h3,
.map-card h3 {
  margin-bottom: 0.32rem;
}

.station-services p,
.map-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.station-services-workshop article,
.station-services-calm article {
  min-height: auto;
  padding: 0.92rem 1rem 0.94rem 1.05rem;
  border-top: 0;
}

.station-services-workshop h3,
.station-services-calm h3 {
  margin-bottom: 0.26rem;
  font-size: 1rem;
  line-height: 1.26;
}

.station-services-workshop p,
.station-services-calm p {
  font-size: 0.93rem;
  line-height: 1.55;
}

.handover-layout {
  display: grid;
  gap: 1rem;
  max-width: 980px;
}

.visit-station-handover .section-heading {
  max-width: 700px;
}

.visit-station-handover .section-heading p {
  max-width: 640px;
  color: var(--muted);
  font-size: 1rem;
}

.handover-panel {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(1rem, 2.4vw, 1.45rem);
  align-items: start;
  padding: clamp(1rem, 2.4vw, 1.32rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(29, 34, 42, 0.055);
}

.handover-panel::before {
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: rgba(99, 191, 234, 0.42);
  border-radius: var(--radius) 0 0 var(--radius);
  content: "";
}

.handover-summary {
  display: grid;
  gap: 0.46rem;
  padding: 0.08rem clamp(0.8rem, 2vw, 1.15rem) 0.08rem 0.2rem;
  border-right: 1px solid var(--line);
}

.handover-summary h3,
.handover-checks h3 {
  margin-bottom: 0;
  font-size: 0.98rem;
  line-height: 1.3;
}

.handover-summary p,
.handover-checks p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.55;
}

.handover-checks {
  display: grid;
  gap: 0.5rem;
}

.handover-checks article {
  position: relative;
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 0.28rem 0.68rem;
  padding: 0.72rem 0.78rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.handover-checks span {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  margin-top: 0.04rem;
  background: var(--white);
  border: 1px solid rgba(42, 120, 163, 0.34);
  border-radius: 999px;
}

.handover-checks span::before {
  width: 7px;
  height: 4px;
  border-bottom: 2px solid rgba(42, 120, 163, 0.78);
  border-left: 2px solid rgba(42, 120, 163, 0.78);
  transform: translateY(-1px) rotate(-45deg);
  content: "";
}

.handover-checks p {
  grid-column: 2;
}

.contact-final {
  background: linear-gradient(180deg, var(--paper) 0%, var(--blue-soft) 100%);
}

.contact-journey-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(310px, 0.88fr);
  grid-template-areas:
    "title title"
    "intro request"
    "intro hours";
  gap: 0.95rem 1.35rem;
  align-items: start;
  max-width: 1120px;
}

.contact-journey-grid > .station-content {
  grid-area: intro;
}

.contact-title {
  grid-area: title;
}

.contact-title p {
  margin-bottom: 0;
}

.contact-intro {
  gap: 0.9rem;
  max-width: none;
}

.contact-action-grid {
  display: grid;
  gap: 0.66rem;
}

.contact-action-card {
  display: grid;
  gap: 0.28rem;
  padding: 0.95rem 1rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(29, 34, 42, 0.03);
}

.contact-action-card:hover {
  border-color: var(--line-strong);
  box-shadow: 0 10px 26px rgba(29, 34, 42, 0.065);
}

.contact-action-card span {
  color: var(--blue-strong);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

.contact-action-card strong {
  font-size: clamp(1.02rem, 2vw, 1.22rem);
  line-height: 1.25;
}

.contact-action-card small {
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.45;
}

.contact-action-card-primary {
  color: var(--text);
  background: var(--blue);
  border-color: var(--blue);
  box-shadow: 0 14px 34px rgba(42, 120, 163, 0.16);
}

.contact-action-card-primary span,
.contact-action-card-primary small {
  color: var(--text);
}

.contact-action-card-primary:hover {
  color: var(--white);
  background: var(--blue-strong);
  border-color: var(--blue-strong);
}

.contact-action-card-primary:hover span,
.contact-action-card-primary:hover small {
  color: rgba(255, 255, 255, 0.82);
}

.contact-map-card {
  display: grid;
  gap: 0.62rem;
  margin-top: 0.2rem;
  padding: 0.72rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 1px 0 rgba(29, 34, 42, 0.03);
}

/* Zwei-Klick-Loesung fuer die Google-Maps-Karte: Vor der Einwilligung ist
   .contact-map-frame der Platzhalter, danach traegt dasselbe Element den
   nachgeladenen <iframe>. Bewusst ohne eigene Bilddatei. */
.contact-map-frame {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 0.6rem;
  overflow: hidden;
  width: 100%;
  min-height: 230px;
  aspect-ratio: 16 / 9;
  padding: clamp(0.85rem, 2vw, 1.15rem);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.contact-map-consent-text {
  max-width: 48ch;
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.45;
}

.contact-map-consent-note {
  margin: 0;
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.4;
}

.contact-map-frame.is-map-loaded {
  display: block;
  padding: 0;
}

.contact-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: inherit;
  border: 0;
}

/* Ohne JavaScript kann die Karte nicht nachgeladen werden. Dann bleibt nur
   der Textlink darunter stehen, der ohnehin nichts nachlaedt. */
html:not(.js-ready) .contact-map-frame {
  display: none;
}

.contact-map-link {
  width: fit-content;
  font-size: 0.94rem;
}

.contact-request-card {
  grid-area: request;
  display: grid;
  /* acht auto-Zeilen: sieben Felder plus der Datenschutzhinweis; die 1fr-Zeile
     bleibt dem Absenden-Button vorbehalten, damit er unten sitzen bleibt. */
  grid-template-rows: repeat(8, auto) 1fr;
  align-self: stretch;
  gap: 0.66rem;
  padding: clamp(0.95rem, 1.8vw, 1.12rem);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 10px 28px rgba(29, 34, 42, 0.06);
}

.contact-form-heading {
  display: grid;
  gap: 0.24rem;
  padding-top: 0.56rem;
  border-top: 1px solid var(--line);
}

.contact-form-heading h3 {
  margin-bottom: 0;
  font-size: 1.08rem;
  line-height: 1.3;
}

.contact-form-heading p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.82rem;
}

.contact-request-card label span {
  display: block;
  margin-bottom: 0.28rem;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
}

.contact-request-card input,
.contact-request-card select,
.contact-request-card textarea {
  width: 100%;
  min-height: 42px;
  padding: 0.62rem 0.68rem;
  color: var(--text);
  background: var(--white);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font: inherit;
}

.contact-request-card textarea {
  min-height: 86px;
  resize: vertical;
}

.contact-request-card button {
  justify-self: start;
  align-self: end;
}

.contact-request-card .field-hint,
.service-intake-form .field-hint {
  grid-column: 1 / -1;
  margin: -0.28rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
}

/* Datenschutzhinweis unmittelbar ueber dem Absenden-Button (OFFENE_FRAGEN.md Nr. 6).
   Uebernimmt Farbe und Groesse der bestehenden Formularhinweise - keine neue Farbe,
   kein neues Schriftmass. Volle Breite, damit der Satz im zweispaltigen
   Service-Formular nicht in eine Spalte gequetscht wird. */
.contact-request-card .form-privacy-note,
.service-intake-form .form-privacy-note {
  grid-column: 1 / -1;
  margin: 0.1rem 0 0;
  color: var(--muted);
  font-size: 0.8rem;
  line-height: 1.45;
}

.hours-card {
  grid-area: hours;
  padding: 0.95rem 1rem;
}

.contact-card {
  border-color: var(--line);
  box-shadow: 0 1px 0 rgba(29, 34, 42, 0.03);
}

.contact-card h3 {
  margin-bottom: 0.2rem;
  font-size: 1.02rem;
}

.contact-card p {
  margin-bottom: 0.36rem;
  color: var(--muted);
  font-size: 0.94rem;
}

.section-media-stack,
.location-side {
  display: grid;
  gap: 1rem;
}

.plain-note {
  margin: 1.1rem 0 0;
  padding: 0.82rem 0.95rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.section-button {
  margin-top: 1.1rem;
}

.check-list {
  display: grid;
  gap: 0.58rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 1.05rem;
  color: var(--muted);
  font-size: 0.95rem;
}

.check-list li::before {
  position: absolute;
  top: 0.68rem;
  left: 0;
  width: 5px;
  height: 5px;
  background: var(--blue);
  border-radius: 50%;
  content: "";
}

.contact-strip {
  background: var(--surface);
  border-block: 1px solid var(--line);
}

.contact-strip h2 {
  color: var(--text);
}

.contact-strip p {
  color: var(--muted);
}

.profile-box {
  background: var(--paper);
}

.values-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.values-row div {
  display: grid;
  gap: 0.28rem;
  min-height: 104px;
  padding: 1.05rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.values-row span {
  color: var(--text);
  font-size: 1.05rem;
  font-weight: 700;
}

.values-row small {
  color: var(--muted);
}

.about-editorial-grid,
.about-personal-grid {
  align-items: stretch;
}

.about-story {
  display: grid;
  align-content: center;
  gap: 0.9rem;
  padding: clamp(1.25rem, 3vw, 1.8rem);
}

.about-story .prose {
  display: grid;
  gap: 0.78rem;
}

.about-story .prose p {
  margin-bottom: 0;
  font-size: 1rem;
}

.about-media-card {
  display: grid;
  gap: 0.82rem;
  align-content: start;
  padding: 0.9rem;
  background: var(--paper);
  box-shadow: var(--shadow-soft);
}

.about-media-card .card-media {
  overflow: hidden;
  border-radius: var(--radius);
}

.about-media-card .preview-image {
  display: block;
  min-height: 360px;
  border-color: var(--line-strong);
  box-shadow: none;
}

.about-media-card p:not(.section-kicker) {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

.about-contact-note {
  display: grid;
  align-content: center;
  gap: 0.72rem;
  padding: clamp(1.2rem, 3vw, 1.65rem);
  background: var(--white);
  border-left: 4px solid rgba(99, 191, 234, 0.42);
}

.about-contact-note p:last-child {
  margin-bottom: 0;
  color: var(--muted);
}

.about-expect-heading {
  margin: 0.2rem 0 0;
  color: var(--text);
  font-size: 0.86rem;
  font-weight: 700;
}

.about-expect-list {
  display: grid;
  gap: 0.42rem;
  margin: 0.3rem 0 0;
  padding: 0;
  list-style: none;
}

.about-expect-list li {
  position: relative;
  padding-left: 1.05rem;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
}

.about-expect-list li::before {
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 6px;
  height: 6px;
  background: rgba(42, 120, 163, 0.55);
  border-radius: 50%;
  content: "";
}

.about-section-heading {
  margin-bottom: 1.15rem;
}

.about-process-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.9rem;
}

.about-process-card {
  position: relative;
  display: grid;
  gap: 0.62rem;
  align-content: start;
  min-height: 210px;
  padding: 1rem;
  background: var(--white);
  overflow: hidden;
}

.about-process-card::before {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 34px;
  height: 2px;
  background: rgba(99, 191, 234, 0.42);
  content: "";
}

.about-process-card span {
  color: var(--blue-strong);
  font-size: 0.74rem;
  font-weight: 800;
}

.about-process-card h3 {
  margin-bottom: 0;
  font-size: 1.04rem;
  line-height: 1.28;
}

.about-process-card p {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 0.93rem;
  line-height: 1.55;
}

/* Über-uns-Seite: Marco als redaktioneller Hauptbereich, danach Ablauf und Werkstatt. */
.about-page .about-personal {
  padding-block: clamp(4.5rem, 7vw, 6rem);
}

.about-page .about-story {
  display: grid;
  grid-template-columns: minmax(0, 0.45fr) minmax(0, 0.55fr);
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: 0;
}

.about-page .about-portrait-media {
  margin: 0;
  overflow: hidden;
  background: var(--blue-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.about-page .about-portrait-media .preview-image {
  aspect-ratio: 4 / 3;
  object-position: 34% 50%;
  border: 0;
  border-radius: 0;
}

.about-page .about-story-copy {
  max-width: none;
}

.about-page .about-story-copy h2 {
  max-width: 48rem;
  font-size: clamp(1.75rem, 2.7vw, 2.35rem);
  line-height: 1.15;
  text-wrap: balance;
}

.about-page .about-story .prose {
  gap: 0.82rem;
}

.about-page .about-process {
  padding-block: clamp(4.25rem, 7vw, 6.25rem);
}

.about-page .about-process .about-section-heading {
  margin-bottom: clamp(2rem, 4vw, 2.8rem);
}

.about-page .about-timeline {
  max-width: 52rem;
  margin-inline: 0;
}

.about-page .about-timeline-step {
  min-height: 0;
  padding-bottom: clamp(1.6rem, 3.5vw, 2.4rem);
}

.about-page .about-timeline-step:last-child {
  padding-bottom: 0;
}

.about-page .about-timeline-step > div {
  padding: 0.35rem 0 clamp(1.15rem, 2.5vw, 1.7rem);
}

.about-page .about-workshop {
  padding-block: clamp(3.75rem, 6vw, 5.25rem);
}

.about-page .about-workshop-figure {
  max-width: 60rem;
  margin: 0 auto;
}

.about-page .about-workshop-figure .preview-image {
  aspect-ratio: 16 / 9;
  object-position: 50% 50%;
  border-color: var(--line);
  box-shadow: 0 10px 28px rgba(29, 34, 42, 0.05);
}

.about-page .about-workshop-figure figcaption {
  margin-top: 0.72rem;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Über-uns-Seite: ruhige Bildenthüllungen, Leitbild und Scroll-Zeitstrahl. */
.about-page .about-reveal-media {
  opacity: 0;
  clip-path: inset(0 0 12% 0 round var(--radius));
  transform: translateY(24px) scale(1.015);
  transition: opacity 760ms ease, clip-path 900ms cubic-bezier(0.22, 1, 0.36, 1), transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, clip-path, transform;
}

.about-page .about-reveal-media.is-visible,
html:not(.js-ready) .about-page .about-reveal-media {
  opacity: 1;
  clip-path: inset(0 0 0 0 round var(--radius));
  transform: translateY(0) scale(1);
  will-change: auto;
}

.about-manifesto {
  position: relative;
  overflow: hidden;
  padding-block: clamp(5.5rem, 11vw, 9rem);
  color: var(--white);
  background:
    radial-gradient(circle at 82% 18%, rgba(99, 191, 234, 0.2), transparent 32%),
    linear-gradient(135deg, #202733, var(--cardesk-anthracite));
  border-block: 1px solid rgba(99, 191, 234, 0.4);
}

.about-manifesto::after {
  position: absolute;
  right: max(1rem, calc((100vw - var(--container)) / 2));
  bottom: 1.2rem;
  width: clamp(80px, 12vw, 150px);
  height: 2px;
  background: var(--blue);
  content: "";
}

.about-manifesto-inner {
  position: relative;
  z-index: 1;
}

.about-manifesto .section-kicker {
  color: var(--blue);
}

.about-manifesto h2 {
  max-width: 980px;
  margin: 0;
  color: var(--white);
  font-size: clamp(2.35rem, 5.2vw, 4.85rem);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
}

.about-page .about-process {
  padding-block: clamp(5rem, 9vw, 7.5rem);
}

.about-page .about-process .about-section-heading {
  max-width: 650px;
  margin-bottom: clamp(2rem, 5vw, 3.6rem);
}

.about-timeline {
  display: grid;
  gap: 0;
  max-width: 900px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

.about-timeline-step {
  position: relative;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  min-height: 190px;
  padding-bottom: clamp(2.2rem, 5vw, 3.5rem);
}

.about-timeline-step::after {
  position: absolute;
  top: 58px;
  bottom: 0;
  left: 28px;
  width: 2px;
  background: linear-gradient(180deg, var(--blue-strong), rgba(99, 191, 234, 0.2));
  content: "";
  transform-origin: top;
}

/* Der gedimmte Startzustand wird NUR gesetzt, wenn JavaScript laeuft. Ohne
   JavaScript wird .is-visible nie vergeben, die Schritte blieben sonst
   dauerhaft auf opacity 0.24 stehen - gemessen an einer Darstellung mit
   blockierten Skripten. Die Klasse js-ready stammt aus js/script.js, also aus
   derselben Datei wie die Einblendlogik: scheitert das Skript beim Laden,
   fehlt auch der Startzustand und der Inhalt bleibt sichtbar. Ein Inline-
   Skript im <head> waere hier die schlechtere Wahl, weil der Startzustand
   dann auch dann gilt, wenn script.js gar nicht ankommt. */
.js-ready .about-timeline-step {
  opacity: 0.24;
  transform: translateY(22px);
  transition: opacity 620ms ease, transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.js-ready .about-timeline-step::after {
  transform: scaleY(0);
  transition: transform 780ms cubic-bezier(0.22, 1, 0.36, 1) 160ms;
}

.about-timeline-step:last-child::after {
  display: none;
}

.js-ready .about-timeline-step.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.js-ready .about-timeline-step.is-visible::after {
  transform: scaleY(1);
}

.about-timeline-number {
  position: relative;
  z-index: 1;
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  color: var(--blue-strong);
  background: var(--white);
  border: 2px solid rgba(42, 120, 163, 0.26);
  border-radius: 50%;
  box-shadow: 0 8px 22px rgba(29, 34, 42, 0.06);
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  transition: color 360ms ease, background 360ms ease, border-color 360ms ease, box-shadow 360ms ease;
}

.about-timeline-step.is-visible .about-timeline-number {
  color: var(--white);
  background: var(--blue-strong);
  border-color: var(--blue-strong);
  box-shadow: 0 10px 28px rgba(42, 120, 163, 0.22);
}

.about-timeline-step > div {
  padding: 0.5rem 0 clamp(1.2rem, 3vw, 2rem);
  border-bottom: 1px solid var(--line);
}

.about-timeline-step h3 {
  margin-bottom: 0.58rem;
  font-size: clamp(1.3rem, 2.3vw, 1.78rem);
}

.about-timeline-step p {
  max-width: 680px;
  margin-bottom: 0;
  color: var(--muted);
  font-size: 1rem;
}

.about-values-row {
  margin-top: 1.15rem;
}

.about-values-row div {
  position: relative;
  min-height: 142px;
  padding: 1.15rem 1.15rem 1.1rem;
  background: var(--white);
  box-shadow: 0 1px 0 rgba(29, 34, 42, 0.02);
}

.about-values-row div::before {
  width: 28px;
  height: 2px;
  margin-bottom: 0.62rem;
  background: rgba(99, 191, 234, 0.42);
  content: "";
}

.about-values-row small {
  line-height: 1.5;
}

.location-section {
  background: var(--paper);
}

.location-grid {
  padding: 1.35rem;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
}

.station-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  box-shadow: var(--shadow-soft);
}

.station-panel {
  padding: 1.35rem;
  border: 0;
  border-radius: 0;
}

.station-panel + .station-panel {
  border-left: 1px solid var(--line);
}

.station-panel-muted {
  background: var(--paper);
}

.station-panel h2 {
  font-size: 1.38rem;
}

@media (prefers-reduced-motion: no-preference) {
  .hero-stage .hero-copy,
  .hero-stage .hero-media,
  .hero-media .preview-image,
  .hero-media figcaption {
    transition: transform 120ms linear, opacity 120ms linear, border-radius 120ms linear, box-shadow 120ms linear;
  }

  .js-ready .visit-station {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 500ms ease, transform 500ms ease;
  }

  .js-ready .visit-station.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .js-ready .services-overview .service-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 560ms ease, transform 560ms ease, box-shadow 180ms ease;
    will-change: opacity, transform;
  }

  .js-ready .services-overview .service-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
  }

  .js-ready .services-overview .station-services .service-reveal:nth-child(2) {
    transition-delay: 70ms;
  }

  .js-ready .services-overview .station-services .service-reveal:nth-child(3) {
    transition-delay: 130ms;
  }

  .js-ready .services-overview .service-reveal.is-visible:hover {
    transition-delay: 0ms;
  }

  .preview-image,
  .station-services article {
    transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
  }

  .station-services article:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-soft);
  }
}

/* Breakpoint muss mit DESKTOP_BREAKPOINT_PX (js/script.js) übereinstimmen. */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .visit-station-scene.is-scene-ready {
    min-height: 146svh;
    padding-block: 0;
  }

  .visit-station-scene.is-scene-ready .station-layout {
    position: sticky;
    top: var(--garage-header-height, 66px);
    grid-template-columns: minmax(0, var(--station-media-col)) minmax(0, var(--station-content-col));
    min-height: calc(100svh - var(--garage-header-height, 66px));
    padding-block: clamp(2rem, 5svh, 4rem);
  }

  .visit-station-scene.is-scene-ready .station-layout-reverse {
    grid-template-columns: minmax(0, var(--station-content-col)) minmax(0, var(--station-media-col));
  }

  .visit-station-scene.is-scene-ready .station-media {
    transform: translateZ(0) scale(var(--station-media-scale));
    transform-origin: center left;
  }

  .visit-station-scene.is-scene-ready .station-layout-reverse .station-media {
    transform-origin: center right;
  }

  .visit-station-scene.is-scene-ready .station-media .preview-image {
    height: var(--station-image-height);
    min-height: 0;
    max-height: calc(100svh - var(--garage-header-height, 66px) - 7rem);
    border-radius: var(--station-image-radius);
    box-shadow: 0 18px 52px rgba(29, 34, 42, var(--station-shadow-alpha));
  }

  .visit-station-scene.is-scene-ready .station-content {
    transform: translateY(var(--station-content-y, 0px));
  }

  .service-group-scene.is-scene-ready {
    min-height: 132svh;
  }

  .service-group-scene.is-scene-ready .station-layout {
    isolation: isolate;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(1.7rem, 4vw, 3rem);
  }

  .service-group-scene.is-scene-ready .station-layout-reverse {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  }

  .service-group-scene.is-scene-ready .station-media {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: var(--station-media-left);
    width: var(--station-media-width);
    transform: translateY(-50%) scale(var(--station-media-scale));
    transform-origin: center left;
    pointer-events: none;
  }

  .service-group-scene.is-scene-ready .station-layout-reverse .station-media {
    right: var(--station-media-right);
    left: auto;
    transform-origin: center right;
  }

  .service-group-scene.is-scene-ready .station-content {
    z-index: 2;
    grid-column: 2;
    grid-row: 1;
    opacity: clamp(0.76, var(--station-content-opacity, 1), 1);
  }

  .service-group-scene.is-scene-ready .station-layout-reverse .station-content {
    grid-column: 1;
  }

  .visit-station-scene.is-scene-ready .station-services {
    opacity: clamp(0.76, var(--station-card-opacity, 1), 1);
    transform: translateY(var(--station-card-y, 0px));
  }

  .service-group-scene.is-scene-ready .station-action-link {
    opacity: clamp(0.76, var(--station-card-opacity, 1), 1);
    transform: translateY(var(--station-card-y, 0px));
  }

  .service-group-scene.is-scene-ready .service-intake-panel {
    opacity: clamp(0.76, var(--station-card-opacity, 1), 1);
    transform: translateY(var(--station-card-y, 0px));
  }

  .visit-station-scene.is-scene-ready .station-media,
  .visit-station-scene.is-scene-ready .station-content,
  .visit-station-scene.is-scene-ready .station-services,
  .service-group-scene.is-scene-ready .station-action-link,
  .service-group-scene.is-scene-ready .service-intake-panel,
  .visit-station-scene.is-scene-ready .station-media .preview-image {
    transition: transform 120ms linear, opacity 120ms linear, border-radius 120ms linear, box-shadow 120ms linear;
  }

  .services-page .service-group-scene.is-scene-ready {
    min-height: 132svh;
  }

  .services-page .service-group-scene.is-scene-ready .station-layout {
    top: calc(var(--garage-header-height, 66px) + 8.35rem);
    min-height: calc(100svh - var(--garage-header-height, 66px) - 8.35rem);
    padding-block: clamp(1.25rem, 3svh, 2.25rem);
  }

  .services-page .service-group-scene.is-scene-ready .station-content {
    opacity: var(--station-content-opacity, 1);
  }

  .services-page #diagnose-mfk .station-content {
    padding-right: clamp(2.75rem, 3.5vw, 3.25rem);
  }

  .services-page .service-group-scene.is-scene-ready .station-media {
    display: grid;
    align-content: center;
  }

  .services-page .service-group-scene.is-scene-ready .station-media .preview-image {
    max-height: calc(100svh - var(--garage-header-height, 66px) - 18.75rem);
  }

  .services-page .service-group-scene.is-scene-ready .service-scene-title {
    max-width: min(900px, 92vw);
  }
}

.site-footer {
  color: var(--text);
  background: var(--blue-soft);
  border-top: 1px solid var(--line);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.9fr minmax(175px, 0.85fr);
  align-items: start;
  gap: 1.35rem;
  padding-block: 1.6rem;
}

.footer-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 0.94rem;
}

.footer-grid .footer-title {
  margin-bottom: 0.36rem;
  color: var(--text);
  font-weight: 700;
}

.footer-grid .footer-copyright {
  margin-top: 0.55rem;
  font-size: 0.78rem;
}

.site-footer a {
  color: var(--text);
  text-decoration-color: var(--line-strong);
  text-underline-offset: 3px;
}

.footer-links {
  display: grid;
  gap: 0.28rem;
}

.footer-links a {
  width: fit-content;
  color: var(--muted);
  font-size: 0.94rem;
  text-decoration-thickness: 1px;
}

.footer-links a:hover {
  color: var(--text);
}

/* Abstand Logo/Byline ueber "gap" am Container, nicht ueber "margin" am Logo:
   der Container hat genau zwei Kinder, "gap" wirkt nur zwischen ihnen und
   laesst keinen Rest stehen, falls die Byline wieder entfaellt. 0.38rem ist
   der frueher wirksame Abstand (gap 0.18rem + margin-bottom 0.2rem am Logo). */
.footer-cardesk-signature {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  gap: 0.38rem;
  padding-left: 1.2rem;
  border-left: 1px solid var(--line);
}

/* Der Link umschliesst nur das Logo, nicht die Byline. "display: block"
   entfernt den Zeilenabstand unter dem Bild, damit unter dem Logo genau der
   "gap" oben wirkt und keine zusaetzliche Luecke entsteht. */
.footer-cardesk-link {
  display: block;
  transition: opacity 180ms ease;
}

.footer-cardesk-link:hover {
  opacity: 0.72;
}

.footer-cardesk-logo {
  display: block;
  width: clamp(112px, 11vw, 140px);
  height: auto;
}

/* "margin: 0" gegen die globale Regel "p { margin-bottom: 1rem }", sonst
   haengt unter der Byline eine Leerzeile in der Footer-Spalte. */
.footer-grid .footer-cardesk-byline {
  margin: 0;
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

@media (max-width: 1080px) {
  .header-phone {
    display: none;
  }
}

/* Breakpoint muss mit DESKTOP_BREAKPOINT_PX (js/script.js) übereinstimmen. */
@media (max-width: 980px) {
  h1 {
    font-size: 2.32rem;
  }

  h2 {
    font-size: 1.52rem;
  }

  .hero-grid,
  .hero-story-grid,
  .station-layout,
  .split-section,
  .about-grid,
  .contact-layout,
  .contact-journey-grid,
  .location-grid,
  .strip-inner {
    grid-template-columns: 1fr;
  }

  .contact-journey-grid {
    grid-template-areas:
      "title"
      "intro"
      "request"
      "hours";
  }

  .station-layout-reverse .station-media {
    order: 0;
  }

  .quick-grid,
  .about-process-grid,
  .services-jump-nav,
  .service-grid,
  .station-services,
  .footer-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .header-actions {
    display: none;
  }

  .hero-stage {
    --hero-copy-y: 0px !important;
    --hero-media-scale: 1 !important;
    --hero-media-x: 0px !important;
    --hero-media-y: 0px !important;
    --hero-copy-col: 1fr !important;
    --hero-media-col: 1fr !important;
    --hero-title-size: 2.32rem !important;
    --hero-text-size: 1.05rem !important;
    --hero-image-radius: var(--radius) !important;
    --hero-shadow-alpha: 0.06 !important;
    --hero-caption-opacity: 1 !important;
    --hero-image-max-height: none !important;
    min-height: auto;
  }

  .hero-visit-sticky {
    position: relative;
    top: auto;
    min-height: auto;
    padding-block: 3.4rem;
  }

  /* Einspaltig. Das Bild wird hier NICHT ueber die volle Sektionshoehe
     gezogen, sondern als Band mit fast originalem Seitenverhaeltnis
     (Breite : Hoehe rund 1.39 gegenueber 1.33 der Datei) gesetzt. So bleiben
     Schriftzug und Tor auch bei 390px und 768px praktisch vollstaendig im
     Ausschnitt; darunter traegt der anthrazitfarbene Grund den Text. */
  .home-hero {
    --home-hero-band: min(62svh, 72vw);
    min-height: 0;
    align-items: start;
    padding-block: 0;
  }

  .home-hero-image {
    bottom: auto;
    height: var(--home-hero-band);
    object-position: 50% calc(45% + var(--home-hero-image-shift));
  }

  .home-hero-scrim {
    bottom: auto;
    height: var(--home-hero-band);
    background: linear-gradient(
      180deg,
      rgba(29, 34, 42, 0.34) 0%,
      rgba(29, 34, 42, 0.12) 38%,
      rgba(29, 34, 42, 0.72) 80%,
      var(--anthracite) 100%
    );
    background-color: rgb(29 34 42 / var(--home-hero-overlay));
  }

  .home-hero-inner {
    grid-template-columns: 1fr;
    gap: 1.7rem;
    padding-top: calc(var(--home-hero-band) + 2.2rem);
    padding-bottom: 3.2rem;
  }

  .home-hero-copy,
  .home-hero h1 {
    max-width: none;
  }

  .home-hero-lead {
    font-size: 1.08rem;
  }

  .about-page .about-portrait-media .preview-image {
    aspect-ratio: 16 / 9;
    object-position: 50% 50%;
  }

  .about-page .about-story {
    grid-template-columns: 1fr;
    gap: clamp(1.8rem, 4vw, 2.6rem);
    align-items: start;
  }
}

@media (max-width: 760px) {
  h1 {
    font-size: 1.92rem;
  }

  h2 {
    font-size: 1.36rem;
  }

  .header-inner {
    min-height: 64px;
  }

  .js-ready .nav-toggle {
    display: grid;
  }

  .site-nav {
    display: grid;
    flex: 1 0 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    padding: 0.35rem;
    background: var(--white);
    border: 1px solid var(--line-strong);
    border-radius: var(--radius);
  }

  html:not(.js-ready) .header-inner {
    flex-wrap: wrap;
    padding-block: 0.65rem;
  }

  .js-ready .site-nav {
    position: fixed;
    inset: 64px 1rem auto 1rem;
    display: none;
    grid-template-columns: 1fr;
    width: auto;
    padding: 0.65rem;
    box-shadow: var(--shadow-soft);
  }

  .js-ready .site-header.is-open .site-nav {
    display: grid;
  }

  .site-nav a {
    width: 100%;
    border-bottom: 0;
    border-left: 2px solid transparent;
  }

  .site-nav a:hover,
  .site-nav a[aria-current="page"] {
    border-left-color: var(--anthracite);
  }

  .hero,
  .page-hero,
  .section {
    padding-block: 2.8rem;
  }

  .hero-visit-sticky::before {
    opacity: 0.65;
  }

  .hero-stage {
    --hero-title-size: 1.92rem !important;
  }

  /* Panel kompakter; der Lichtstreifen entfaellt auf kleinen Viewports. */
  .home-hero-panel {
    padding: 1rem;
    backdrop-filter: none;
  }

  .home-hero-panel::after {
    display: none;
  }

  .home-hero-hours div {
    padding-block: 0.6rem;
  }

  .home-hero-panel-actions {
    grid-template-columns: 1fr;
  }

  .home-hero-lead {
    font-size: 1.05rem;
  }

  .home-hero-contact {
    font-size: 0.95rem;
  }

  .hero-media .preview-image,
  .station-media .preview-image {
    min-height: 260px;
  }

  .visit-station-feature .station-media .preview-image {
    min-height: 260px;
  }

  .hero-media .preview-image {
    min-height: 0;
    max-height: none;
    object-position: center center;
  }

  .quick-grid,
  .about-process-grid,
  .two-columns,
  .services-jump-nav,
  .services-list,
  .services-support-grid,
  .service-grid,
  .station-services,
  .station-services-compact,
  .values-row,
  .footer-grid,
  .station-card {
    grid-template-columns: 1fr;
  }

  .handover-panel {
    grid-template-columns: 1fr;
  }

  .handover-summary {
    padding: 0 0 0.9rem 0.2rem;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .station-panel + .station-panel {
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .facts-list div,
  .facts-list.compact div,
  .hours-list div {
    grid-template-columns: 1fr;
    gap: 0.22rem;
  }

  .button,
  .hero-actions,
  .contact-actions {
    width: 100%;
  }

  .form-row,
  .service-intake-form,
  .map-card {
    grid-template-columns: 1fr;
  }

  .service-intake,
  .service-intake-panel {
    width: 100%;
  }

  .service-intake-panel {
    grid-template-columns: 1fr;
  }

  .contact-form button,
  .contact-request-card button,
  .service-intake-form button {
    width: 100%;
  }

  .contact-map-frame {
    min-height: 200px;
    aspect-ratio: auto;
  }

  .footer-cardesk-signature {
    align-items: flex-start;
    padding-top: 1rem;
    padding-left: 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }

  .about-page .about-personal,
  .about-page .about-workshop {
    padding-block: 3.2rem;
  }

  .about-page .about-story {
    gap: 1.35rem;
  }

  .about-page .about-portrait-media .preview-image {
    aspect-ratio: 4 / 3;
    object-position: 28% 50%;
  }

  .about-page .about-story-copy h2 {
    font-size: clamp(1.45rem, 6.4vw, 1.7rem);
  }

  .about-page .about-process {
    padding-block: 3.5rem;
  }

  .about-page .about-process .about-section-heading {
    margin-bottom: 1.8rem;
  }
}

@media (max-width: 980px) {
  .services-page .services-jump-nav {
    display: flex;
    gap: 0.55rem;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    padding: 0.5rem 1.8rem 0.5rem 0.5rem;
    scroll-padding-inline: 0.5rem 1.8rem;
    scroll-snap-type: inline proximity;
    scrollbar-width: none;
  }

  .services-page .services-jump-nav::-webkit-scrollbar {
    display: none;
  }

  .services-page .services-jump-link {
    flex: 0 0 min(39vw, 156px);
    min-height: 78px;
    scroll-snap-align: start;
  }

  .services-page .services-process ol {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .services-page .service-scene-title {
    margin-top: 1rem;
  }

  .services-page .service-group {
    padding-block: clamp(3.1rem, 8.5vw, 4.25rem);
  }

  .services-page .service-group .station-media .preview-image {
    min-height: min(52svh, 480px);
  }

  .services-page .service-group .station-content {
    margin-top: clamp(1.45rem, 5vw, 2.2rem);
  }

  .services-page .service-group-compact {
    padding-block: clamp(2.5rem, 7vw, 3.4rem);
  }

  .services-page .service-group-compact .station-media .preview-image {
    min-height: min(42svh, 380px);
  }

  .services-page .service-group-compact .station-content {
    margin-top: clamp(1.15rem, 4vw, 1.7rem);
  }
}

@media (max-width: 760px) {
  .services-page .services-jump-nav {
    top: calc(var(--garage-header-height, 64px) + 0.35rem);
    margin-bottom: 1.2rem;
    margin-inline: -0.25rem;
    border-radius: 10px;
  }

  .services-page .services-process {
    margin-bottom: 2rem;
    padding: 0.9rem;
  }

  .services-page .service-group-core {
    padding-block: 2.65rem;
  }

  .services-page .service-group-compact {
    padding-block: 2rem;
  }

  .services-page .service-group-core .station-media .preview-image {
    min-height: min(46svh, 420px);
  }

  .services-page .service-group-compact .station-media .preview-image {
    min-height: min(34svh, 320px);
  }

  .services-page .service-group-core .station-content {
    margin-top: 1.15rem;
  }

  .services-page .service-group-compact .station-content {
    margin-top: 0.9rem;
  }

  .services-page .service-points {
    gap: 0.45rem;
  }

  .services-page .service-points li {
    padding: 0.62rem 0.76rem 0.64rem 0.88rem;
  }

  .services-page .service-scene-title {
    grid-template-columns: 38px minmax(0, 1fr);
    column-gap: 0.7rem;
  }

  .services-page .service-scene-number {
    width: 38px;
    height: 38px;
  }

  .services-page .service-scene-title h2 {
    font-size: clamp(1.85rem, 8vw, 2.45rem);
  }

  .services-page .service-intake-form input,
  .services-page .service-intake-form select,
  .services-page .service-intake-form textarea {
    min-height: 46px;
    font-size: 1rem;
  }

  .services-page .service-intake-form textarea {
    min-height: 88px;
  }

  .services-page .service-intake-toggle,
  .services-page .service-intake-form button {
    min-height: 46px;
  }

  .about-manifesto {
    padding-block: clamp(4.5rem, 18vw, 6.5rem);
  }

  .about-manifesto h2 {
    font-size: clamp(2.15rem, 10vw, 3.25rem);
  }

  .about-timeline-step {
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.9rem;
    min-height: 170px;
  }

  .about-timeline-number {
    width: 48px;
    height: 48px;
  }

  .about-timeline-step::after {
    top: 48px;
    left: 23px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .about-page .about-reveal-media,
  .about-timeline-step {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
  }

  /* Muss die Spezifitaet von ".js-ready .about-timeline-step" erreichen,
     sonst bliebe der gedimmte Startzustand trotz reduce bestehen. */
  .js-ready .about-timeline-step {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .about-timeline-step::after,
  .js-ready .about-timeline-step::after {
    transform: scaleY(1);
    transition: none;
  }

  .hero-stage {
    --hero-progress: 0 !important;
    --hero-sticky-height: auto !important;
    --hero-grid-max: var(--container) !important;
    --hero-copy-col: 0.88fr !important;
    --hero-media-col: 1.12fr !important;
    --hero-padding-block: 4rem !important;
    --hero-title-size: 2.72rem !important;
    --hero-text-size: 1.05rem !important;
    --hero-copy-y: 0px !important;
    --hero-media-scale: 1 !important;
    --hero-media-x: 0px !important;
    --hero-media-y: 0px !important;
    --hero-image-radius: var(--radius) !important;
    --hero-shadow-alpha: 0.06 !important;
    --hero-caption-opacity: 1 !important;
    --hero-image-max-height: min(640px, calc(100svh - var(--garage-header-height, 0px) - 7rem)) !important;
    min-height: auto;
  }

  .hero-visit-sticky {
    position: relative;
    top: auto;
  }

  .hero-stage .hero-copy,
  .hero-stage .hero-media,
  .hero-media figcaption {
    transition: none;
    transform: none;
  }

  /* Der Lichtstreifen im Hero-Panel wird ohnehin nur unter
     "prefers-reduced-motion: no-preference" animiert. Hier zusaetzlich
     vollstaendig ausgeblendet, damit kein statischer Rest sichtbar bleibt. */
  .home-hero-panel::after {
    display: none;
    animation: none;
  }
}

@media (max-width: 420px) {
  .services-page .services-process ol {
    grid-template-columns: 1fr;
  }

  .container,
  .narrow {
    width: min(100% - 1.25rem, var(--container));
  }

  .brand strong {
    font-size: 0.9rem;
  }

  .brand-logo {
    height: 36px;
  }
}

/* Startseite: gezielte Anpassungen aus der visuellen Prüfung. Die Variablen
   werden nur im Startseiten-Scope überschrieben; Unterseiten behalten ihre
   bisherigen grauen Flächen und sämtliche weißen Flächen bleiben weiß. */
.home-page {
  --paper: #f4f8fb;
  --surface: #f4f8fb;
}

.home-page .home-hero-panel {
  color: var(--white);
  background: rgba(24, 30, 38, 0.52);
  border-color: rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 24px rgba(18, 23, 30, 0.12);
  backdrop-filter: blur(3px);
}

.home-page .home-hero-panel-head {
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.home-page .home-hero-panel-head span {
  color: var(--blue);
}

.home-page .home-hero-hours div {
  border-top-color: rgba(255, 255, 255, 0.16);
}

.home-page .home-hero-hours dt {
  color: rgba(255, 255, 255, 0.76);
}

.home-page .home-hero-hours dd {
  color: var(--white);
}

.home-page .home-hero-panel-actions {
  border-top-color: rgba(255, 255, 255, 0.18);
}

.home-page .home-hero-panel-actions .button-primary {
  color: var(--white);
  background: var(--blue-strong);
  border-color: var(--blue-strong);
}

.home-page .home-hero-panel-actions .button-secondary {
  color: var(--white);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.56);
}

.home-page .home-hero-panel-actions .button-secondary:hover {
  color: var(--text);
  background: var(--white);
  border-color: var(--white);
}

.home-page .home-hero-panel a:focus-visible {
  outline-color: var(--blue);
}

.home-page .handover-summary .preview-image {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 42% 58%;
}

@media (max-width: 760px) {
  .home-page .handover-summary .preview-image {
    object-position: 40% 58%;
  }
}

@media (min-width: 981px) {
  .home-page .home-hero-inner {
    position: static;
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }

  .home-page .home-hero-copy {
    position: relative;
    z-index: 1;
  }

  .home-page .home-hero-panel {
    position: absolute;
    top: 1.25rem;
    right: max(1rem, calc((100% - var(--container)) / 2 - 4.5rem));
    left: auto;
    z-index: 1;
    width: min(650px, calc(100% - 2rem));
    padding: 0.75rem 0.9rem 0.85rem;
  }

  .home-page .home-hero-panel-head {
    margin-bottom: 0;
    padding-bottom: 0.4rem;
  }

  .home-page .home-hero-panel-head strong {
    font-size: 0.96rem;
  }

  .home-page .home-hero-hours {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.7rem;
  }

  .home-page .home-hero-hours div {
    grid-template-columns: 1fr;
    gap: 0.05rem;
    padding: 0.38rem 0.68rem 0.32rem 0;
    border-top: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.16);
  }

  .home-page .home-hero-hours div:last-child {
    border-right: 0;
  }

  .home-page .home-hero-hours dt,
  .home-page .home-hero-hours dd {
    font-size: 0.78rem;
    line-height: 1.45;
  }

  .home-page .home-hero-panel-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.4rem;
    padding-top: 0.5rem;
  }

  .home-page .home-hero-panel-actions .button {
    min-height: 36px;
    padding: 0.44rem 0.8rem;
    font-size: 0.86rem;
  }
}

@media (max-width: 980px) {
  .home-page .home-hero-inner {
    gap: 1rem;
  }
}

@media (max-width: 760px) {
  .home-page .home-hero-panel {
    padding: 1rem;
    backdrop-filter: none;
  }
}

/* Startseite: Formular und Öffnungszeiten bilden rechts einen ruhigen,
   zusammenhängenden Abschluss. Die Regeln bleiben im .home-page-Scope, damit
   Formulare und Karten der Unterseiten unverändert bleiben. */
.home-page .contact-journey-grid {
  grid-template-areas:
    "title title"
    "intro request";
}

.home-page .contact-request-column {
  grid-area: request;
  min-width: 0;
  padding: 0.35rem 0 0 1.35rem;
  border-left: 1px solid var(--line);
}

.home-page .contact-request-card {
  grid-area: auto;
  grid-template-rows: none;
  align-self: auto;
  gap: 0.58rem;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.home-page .contact-request-card .home-contact-details {
  gap: 0.68rem;
}

.home-page .contact-request-card label span {
  margin-bottom: 0.22rem;
  font-size: 0.82rem;
}

.home-page .contact-request-card input,
.home-page .contact-request-card select,
.home-page .contact-request-card textarea {
  min-height: 40px;
  padding: 0.54rem 0.62rem;
  background: var(--white);
  border-color: rgba(42, 120, 163, 0.55);
  border-radius: 7px;
  box-shadow: 0 1px 0 rgba(29, 34, 42, 0.025);
}

.home-page .contact-request-card textarea {
  min-height: 76px;
}

.home-page .contact-request-card .field-hint {
  margin: 0.04rem 0 0;
}

.home-page .contact-request-card .form-privacy-note {
  margin-top: 0.08rem;
}

.home-page .contact-request-card button {
  margin-top: 0.18rem;
}

.home-page .home-contact-hours {
  margin-top: 1.3rem;
  padding-top: 1.05rem;
  border-top: 1px solid var(--line-strong);
}

.home-page .home-contact-hours .section-kicker {
  margin-bottom: 0.35rem;
  color: var(--blue-strong);
}

.home-page .home-contact-hours .hours-list div {
  grid-template-columns: minmax(4.6rem, 0.32fr) minmax(0, 1fr);
  gap: 0.7rem;
  padding-block: 0.58rem;
}

.home-page .home-contact-hours .hours-list dd {
  font-weight: 650;
}

@media (max-width: 980px) {
  .home-page .contact-journey-grid {
    grid-template-areas:
      "title"
      "intro"
      "request";
  }

  .home-page .contact-request-column {
    padding: 1.35rem 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .home-page .contact-request-card {
    gap: 0.54rem;
  }

  .home-page .contact-request-card textarea {
    min-height: 72px;
  }

  .home-page .home-contact-hours {
    margin-top: 1.15rem;
    padding-top: 0.95rem;
  }

  .home-page .home-contact-hours .hours-list div {
    grid-template-columns: minmax(4.25rem, 0.3fr) minmax(0, 1fr);
    gap: 0.55rem;
  }
}

/* Kontaktseite: kompakter Abschluss aus Hero, Formular und unverändertem Footer.
   Der Hero bleibt auf .contact-page begrenzt; die freigegebene Abschlusskomponente
   wird über .contact-form-section auf den vorgesehenen Hauptseiten geteilt. */
.contact-page .contact-hero {
  position: relative;
  z-index: 0;
  display: grid;
  min-height: clamp(520px, 68svh, 660px);
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(3.8rem, 8svh, 5.8rem);
  background: var(--anthracite);
  border-bottom: 1px solid var(--blue-strong);
}

.contact-page .contact-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  height: 3px;
  background: var(--blue);
  content: "";
  pointer-events: none;
  transform: scaleX(var(--contact-hero-progress, 0));
  transform-origin: left center;
  will-change: transform;
}

.contact-page .contact-hero-media {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  margin: 0;
}

.contact-page .contact-hero-media::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(29, 34, 42, 0.96) 0%,
      rgba(29, 34, 42, 0.92) 38%,
      rgba(29, 34, 42, 0.66) 66%,
      rgba(29, 34, 42, 0.32) 100%
    ),
    linear-gradient(
      180deg,
      rgba(29, 34, 42, 0.22) 0%,
      rgba(29, 34, 42, 0) 38%,
      rgba(29, 34, 42, 0.54) 100%
    );
  background-color: rgb(29 34 42 / var(--contact-hero-overlay, 0));
  content: "";
  pointer-events: none;
}

.contact-page .contact-hero-image {
  display: block;
  width: 100%;
  height: calc(100% + 108px);
  margin-top: -54px;
  object-fit: cover;
  object-position: 50% 42%;
  transform: translate3d(0, var(--contact-hero-image-shift, 0px), 0)
    scale(var(--contact-hero-image-scale, 1));
  transform-origin: center center;
  will-change: transform;
}

.contact-page .contact-hero-media figcaption {
  position: absolute;
  right: max(1rem, calc((100% - var(--container)) / 2));
  bottom: 1.15rem;
  z-index: 1;
  max-width: 21rem;
  padding: 0.68rem 0.82rem;
  color: var(--white);
  background: rgba(29, 34, 42, 0.72);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.4;
  backdrop-filter: blur(4px);
}

.contact-page .contact-hero-inner {
  position: relative;
  z-index: 1;
}

.contact-page .contact-hero-copy {
  max-width: 42rem;
  opacity: var(--contact-hero-copy-opacity, 1);
  transform: translate3d(0, var(--contact-hero-copy-shift, 0px), 0);
  will-change: opacity, transform;
}

.contact-page .contact-hero .eyebrow {
  margin-bottom: 0.72rem;
  color: var(--blue);
  font-size: 0.78rem;
}

.contact-page .contact-hero h1 {
  max-width: 14ch;
  margin-bottom: 1.05rem;
  color: var(--white);
  font-size: clamp(2.85rem, 5vw, 4.15rem);
  line-height: 1.08;
}

.contact-page .contact-hero .hero-text {
  max-width: 49ch;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.15rem;
  line-height: 1.58;
}

.contact-page .contact-hero .hero-actions {
  gap: 0.7rem;
  margin-top: 1.55rem;
}

.contact-page .contact-hero .button {
  min-height: 46px;
  padding: 0.7rem 1.25rem;
  font-size: 0.96rem;
}

.contact-page .contact-hero .button-primary {
  color: var(--white);
  background: var(--blue-strong);
  border-color: var(--blue-strong);
}

.contact-page .contact-hero .button-primary:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}

.contact-page .contact-hero .button-secondary {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.72);
}

.contact-page .contact-hero .button-secondary:hover {
  color: var(--text);
  background: var(--white);
  border-color: var(--white);
}

.contact-page .contact-hero .hero-contact-line {
  margin-top: 1.35rem;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.96rem;
}

.contact-page .contact-hero .hero-contact-line a {
  color: var(--white);
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.contact-page .contact-hero a:focus-visible {
  outline-color: var(--blue);
}

.contact-form-section {
  padding-block: clamp(4.2rem, 7vw, 6rem);
  /* Entspricht dem auf .home-page verwendeten --paper-Wert. */
  background: linear-gradient(180deg, #f4f8fb 0%, var(--blue-soft) 100%);
  border-top: 0;
}

.contact-form-section .contact-form-shell {
  display: grid;
  grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
  grid-template-areas:
    "title title"
    "contact request";
  width: min(100% - 2rem, 1120px);
  gap: 1.25rem 1.6rem;
  align-items: start;
}

.contact-form-section .contact-title {
  grid-area: title;
  max-width: 46rem;
}

.contact-form-section .contact-intro {
  grid-area: contact;
}

.contact-form-section .contact-title h2 {
  margin-bottom: 0.6rem;
  font-size: clamp(1.85rem, 3vw, 2.3rem);
  line-height: 1.15;
}

.contact-form-section .contact-title .station-lead {
  max-width: 58ch;
  color: var(--muted);
  font-size: 1.04rem;
  line-height: 1.55;
}

.contact-form-section .contact-request-card {
  grid-area: request;
  grid-template-rows: none;
  align-self: auto;
  gap: 0.72rem;
  padding: 0.35rem 0 0 1.45rem;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.contact-form-section .contact-form-heading {
  gap: 0.3rem;
  margin-bottom: 0.2rem;
  padding: 0 0 1rem;
  border-top: 0;
  border-bottom: 1px solid var(--line);
}

.contact-form-section .contact-form-heading h3 {
  font-size: 1.18rem;
}

.contact-form-section .contact-form-heading p {
  max-width: 58ch;
  font-size: 0.92rem;
}

.contact-form-section .contact-request-card label span {
  margin-bottom: 0.3rem;
  font-size: 0.84rem;
}

.contact-form-section .contact-request-card input,
.contact-form-section .contact-request-card select,
.contact-form-section .contact-request-card textarea {
  min-height: 46px;
  padding: 0.68rem 0.75rem;
  background: var(--white);
  border-color: rgba(42, 120, 163, 0.56);
  border-radius: 7px;
  box-shadow: 0 1px 0 rgba(29, 34, 42, 0.03);
}

.contact-form-section .contact-request-card textarea {
  min-height: 112px;
}

.contact-form-section .contact-request-card input:focus-visible,
.contact-form-section .contact-request-card select:focus-visible,
.contact-form-section .contact-request-card textarea:focus-visible {
  outline: 3px solid rgba(42, 120, 163, 0.24);
  outline-offset: 1px;
  border-color: var(--blue-strong);
}

.contact-form-section .contact-request-card input:user-invalid,
.contact-form-section .contact-request-card select:user-invalid,
.contact-form-section .contact-request-card textarea:user-invalid {
  border-color: #9d342f;
  box-shadow: 0 0 0 3px rgba(157, 52, 47, 0.14);
}

.contact-form-section .contact-request-card .field-hint {
  margin: -0.12rem 0 0;
  font-size: 0.82rem;
}

.contact-form-section .contact-request-card .form-privacy-note {
  margin-top: 0.08rem;
  font-size: 0.82rem;
  line-height: 1.5;
}

.contact-form-section .contact-request-card .form-privacy-note a {
  color: var(--blue-deep);
  font-weight: 650;
  text-underline-offset: 3px;
}

.contact-form-section .contact-request-card button {
  min-height: 48px;
  margin-top: 0.3rem;
  padding-inline: 1.35rem;
  color: var(--white);
  background: var(--blue-strong);
  border-color: var(--blue-strong);
}

.contact-form-section .contact-request-card button:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}

@media (max-width: 980px) {
  .contact-form-section .contact-form-shell {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "contact"
      "request";
    gap: 1.35rem;
  }

  .contact-form-section .contact-request-card {
    padding: 1.35rem 0 0;
    border-top: 1px solid var(--line);
    border-left: 0;
  }
}

@media (max-width: 760px) {
  .contact-page .contact-hero {
    min-height: auto;
    align-items: start;
    padding-block: 3.5rem 7.4rem;
  }

  .contact-page .contact-hero-media::after {
    background:
      linear-gradient(180deg, rgba(29, 34, 42, 0.88) 0%, rgba(29, 34, 42, 0.82) 58%, rgba(29, 34, 42, 0.95) 100%),
      linear-gradient(90deg, rgba(29, 34, 42, 0.42), rgba(29, 34, 42, 0.22));
    background-color: rgb(29 34 42 / var(--contact-hero-overlay, 0));
  }

  .contact-page .contact-hero-image {
    height: 100%;
    margin-top: 0;
    object-position: 58% 42%;
    transform: translate3d(0, var(--contact-hero-image-shift, 0px), 0)
      scale(var(--contact-hero-image-scale, 1));
    will-change: auto;
  }

  .contact-page .contact-hero h1 {
    max-width: 13ch;
    font-size: 2.45rem;
  }

  .contact-page .contact-hero .hero-text {
    font-size: 1.04rem;
  }

  .contact-page .contact-hero-media figcaption {
    right: 0.625rem;
    bottom: 0.75rem;
    left: 0.625rem;
    max-width: none;
    backdrop-filter: none;
  }

  .contact-form-section {
    padding-block: 3.2rem;
  }

  .contact-form-section .contact-form-shell {
    width: min(100% - 1.25rem, 1120px);
    gap: 1.35rem;
  }

  .contact-form-section .contact-request-card {
    gap: 0.78rem;
    padding: 1.15rem 0 0;
  }

  .contact-form-section .contact-request-card textarea {
    min-height: 104px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-page .contact-hero-image {
    will-change: auto;
  }

  .contact-page .contact-hero-copy {
    will-change: auto;
  }
}

/* ---------------------------------------------------------------------------
   Leistungen und Über uns: gemeinsamer Vollbild-Hero

   Die sichtbare Ebene übernimmt Raster, Typografie, Scrim und Bedienelemente
   der freigegebenen Index-/Kontakt-Heros. Die äußere 160-svh-Timeline und die
   seitenspezifischen Scrollvariablen bleiben unverändert angebunden.
   --------------------------------------------------------------------------- */

.feature-hero-stage {
  --feature-hero-progress: 0;
  --feature-hero-overlay: 0;
  --feature-hero-image-shift: 0px;
  --feature-hero-image-scale: 1;
  --feature-hero-copy-shift: 0px;
  --feature-hero-copy-opacity: 1;
  --feature-hero-focus-x: 50%;
  --feature-hero-focus-y: 38%;
  min-height: 160svh;
  padding: 0;
  background: var(--anthracite);
}

.services-page .feature-hero-stage {
  --feature-hero-progress: var(--services-hero-progress, 0);
  --feature-hero-overlay: var(--services-hero-overlay, 0);
  --feature-hero-image-shift: var(--services-hero-image-shift, 0px);
  --feature-hero-image-scale: var(--services-hero-image-scale, 1);
  --feature-hero-copy-shift: var(--services-hero-copy-shift, 0px);
  --feature-hero-copy-opacity: var(--services-hero-copy-opacity, 1);
}

.about-page .feature-hero-stage {
  --feature-hero-progress: var(--about-hero-progress, 0);
  --feature-hero-overlay: var(--about-hero-overlay, 0);
  --feature-hero-image-shift: var(--about-hero-image-shift, 0px);
  --feature-hero-image-scale: var(--about-hero-image-scale, 1);
  --feature-hero-copy-shift: var(--about-hero-copy-shift, 0px);
  --feature-hero-copy-opacity: var(--about-hero-copy-opacity, 1);
}

.feature-hero {
  position: sticky;
  top: var(--garage-header-height, 66px);
  display: grid;
  min-height: calc(100svh - var(--garage-header-height, 66px));
  align-items: center;
  overflow: hidden;
  isolation: isolate;
  padding-block: clamp(2.5rem, 6svh, 4.5rem);
  background: var(--anthracite);
  border-bottom: 1px solid var(--blue-strong);
}

.feature-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  height: 3px;
  background: var(--blue);
  content: "";
  pointer-events: none;
  transform: scaleX(var(--feature-hero-progress));
  transform-origin: left center;
  will-change: transform;
}

.feature-hero .feature-hero-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

.feature-hero .feature-hero-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: calc(100% + 108px);
  max-height: none;
  margin-top: -54px;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: var(--feature-hero-focus-x) var(--feature-hero-focus-y);
  background: var(--anthracite);
  border: 0;
  border-radius: 0;
  transform: translate3d(0, var(--feature-hero-image-shift), 0)
    scale(var(--feature-hero-image-scale));
  transform-origin: center center;
}

.feature-hero-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(
      90deg,
      rgba(29, 34, 42, 0.95) 0%,
      rgba(29, 34, 42, 0.92) 42%,
      rgba(29, 34, 42, 0.66) 68%,
      rgba(29, 34, 42, 0.3) 100%
    ),
    linear-gradient(
      180deg,
      rgba(29, 34, 42, 0.34) 0%,
      rgba(29, 34, 42, 0) 34%,
      rgba(29, 34, 42, 0.52) 100%
    );
  background-color: rgb(29 34 42 / var(--feature-hero-overlay));
  pointer-events: none;
}

.feature-hero-inner {
  position: relative;
  z-index: 3;
}

.feature-hero .feature-hero-copy {
  max-width: 40rem;
  padding: 0;
  opacity: var(--feature-hero-copy-opacity);
  transform: translate3d(0, var(--feature-hero-copy-shift), 0);
}

.feature-hero .eyebrow {
  margin-bottom: 0.7rem;
  color: var(--blue);
  font-size: 0.78rem;
}

.feature-hero h1 {
  max-width: 18ch;
  margin-bottom: 1.05rem;
  color: var(--white);
  font-size: clamp(2.6rem, 5.2vw, 4.4rem);
  line-height: 1.08;
  text-wrap: balance;
}

.feature-hero .hero-text {
  max-width: 46ch;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.92);
  font-size: 1.2rem;
  line-height: 1.55;
}

.feature-hero .hero-actions {
  gap: 0.7rem;
  margin-top: 1.55rem;
}

.feature-hero .button {
  min-height: 46px;
  padding: 0.7rem 1.35rem;
  font-size: 0.98rem;
}

.feature-hero .button-primary {
  color: var(--white);
  background: var(--blue-strong);
  border-color: var(--blue-strong);
}

.feature-hero .button-primary:hover {
  background: var(--blue-deep);
  border-color: var(--blue-deep);
}

.feature-hero .button-secondary {
  color: var(--white);
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.75);
}

.feature-hero .button-secondary:hover {
  color: var(--text);
  background: var(--white);
  border-color: var(--white);
}

.feature-hero .hero-contact-line {
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, 0.88);
  font-size: 1rem;
}

.feature-hero .hero-contact-line a {
  color: var(--white);
  text-decoration-color: var(--blue);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.feature-hero a:focus-visible {
  outline-color: var(--blue);
}

.feature-hero .feature-hero-media figcaption {
  position: absolute;
  right: max(1rem, calc((100% - var(--container)) / 2));
  bottom: 1.15rem;
  z-index: 2;
  max-width: 21rem;
  padding: 0.68rem 0.82rem;
  color: var(--white);
  background: rgba(29, 34, 42, 0.72);
  border-left: 3px solid var(--blue);
  border-radius: var(--radius);
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.4;
  opacity: 1;
  backdrop-filter: blur(4px);
}

@media (max-width: 980px) {
  .feature-hero-stage {
    --feature-hero-focus-x: 50%;
    --feature-hero-focus-y: 42%;
    min-height: auto;
  }

  .feature-hero {
    position: relative;
    top: auto;
  }
}

@media (max-width: 760px) {
  .services-page .feature-hero-stage {
    --feature-hero-focus-x: 50%;
  }

  .about-page .feature-hero-stage {
    --feature-hero-focus-x: 58%;
  }

  .feature-hero {
    min-height: calc(100svh - var(--garage-header-height, 64px));
    align-items: start;
    padding-block: 3.5rem 7.4rem;
  }

  .feature-hero .feature-hero-image {
    height: 100%;
    margin-top: 0;
  }

  .feature-hero-scrim {
    background:
      linear-gradient(180deg, rgba(29, 34, 42, 0.88) 0%, rgba(29, 34, 42, 0.82) 58%, rgba(29, 34, 42, 0.95) 100%),
      linear-gradient(90deg, rgba(29, 34, 42, 0.42), rgba(29, 34, 42, 0.22));
    background-color: rgb(29 34 42 / var(--feature-hero-overlay));
  }

  .feature-hero h1 {
    max-width: 13ch;
    font-size: 2.45rem;
  }

  .feature-hero .hero-text {
    font-size: 1.04rem;
  }

  .feature-hero .feature-hero-media figcaption {
    right: 0.625rem;
    bottom: 0.75rem;
    left: 0.625rem;
    max-width: none;
    backdrop-filter: none;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .feature-hero .feature-hero-copy,
  .feature-hero .feature-hero-image {
    will-change: transform, opacity;
  }
}

@media (prefers-reduced-motion: reduce) {
  .feature-hero-stage {
    min-height: auto;
  }

  .feature-hero {
    position: relative;
    top: auto;
  }

  .feature-hero .feature-hero-copy,
  .feature-hero .feature-hero-image {
    will-change: auto;
  }
}