/* =========================================================================
   Pamela Beckmann – Stylesheet
   Mobile First. Alle Werte kommen aus tokens.css.

   Breakpoints (in em, damit sie bei vergrößerter Standardschrift mitwandern):
     48em  (768 px)  Tablet: Karten/Kacheln 2-spaltig, „Weiterlesen“ ausgeklappt
     60em  (960 px)  Header-Navigation statt Menü-Button
     64em  (1024 px) Desktop: 12-Spalten-Raster
     72em  (1152 px) 4-spaltige Kachelreihen (Aufgaben, Ablauf)
   ========================================================================= */

/* ---------- Schriften (lokal, WOFF2, SIL Open Font License) ---------- */
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/barlow-latin-ext-400.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/barlow-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-latin-600.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-latin-ext-600.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Barlow Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/barlow-condensed-latin-ext-700.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* „PB Mono“ = Teilmenge von IBM Plex Mono 500 inkl. Pfeile (U+2190–2199; Barlow hat keine Pfeile).
   Umbenannt, weil die OFL den Namen „Plex“ für veränderte Fassungen reserviert. */
@font-face {
  font-family: 'PB Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/pb-mono-latin-500.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2190-2199, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'PB Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/pb-mono-latin-ext-500.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

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

html {
  background-color: var(--color-asphalt);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background-color: var(--color-sand);
  color: var(--color-asphalt);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: var(--leading-body-mobile);
  overflow-wrap: break-word;
}

h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote {
  margin: 0;
}

h1, h2, h3 {
  overflow-wrap: break-word;
  hyphens: auto;
}

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

strong {
  font-weight: 600;
}

a {
  color: inherit;
  text-underline-offset: var(--space-1);
}

a:hover {
  color: var(--color-orange);
}

.on-dark a:hover,
.section--dark a:hover {
  color: var(--color-orange-light);
}

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

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Pfeile → ↗ ↓ in Plex Mono (Barlow hat keine Pfeil-Glyphen) */
.arrow {
  font-family: var(--font-mono);
  font-weight: 500;
  line-height: 1;
}

/* Lange E-Mail-Adressen und URLs dürfen umbrechen statt überzulaufen */
.breakable {
  overflow-wrap: anywhere;
}

/* Ziel eines Sprungs aus dem Menü – nur programmatisch fokussiert */
[tabindex="-1"]:focus {
  outline: none;
}

@media (min-width: 64em) {
  body {
    line-height: var(--leading-body);
  }
}

/* ---------- Sprunglink ---------- */
.skip-link {
  position: absolute;
  top: var(--space-2);
  left: var(--space-2);
  z-index: 100;
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-orange);
  color: var(--color-white);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

.skip-link:hover {
  color: var(--color-white);
}

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

.section {
  padding-block: var(--section-padding-y);
}

.section--dark {
  background-color: var(--color-asphalt);
  color: var(--color-sand);
}

.section--dust {
  background-color: var(--color-dust);
}

.stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.flow {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Kopf (Label + H2) und Inhalt: mobil gestapelt, Desktop im 12er-Raster */
.split {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

@media (min-width: 48em) {
  .split {
    gap: var(--space-8);
  }

  .stack {
    gap: var(--space-10);
  }
}

@media (min-width: 64em) {
  .stack {
    gap: var(--space-12);
  }

  .stack--tight {
    gap: var(--space-10);
  }

  .stack--loose {
    gap: var(--space-20);
  }

  .split {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: start;
  }

  .split > :first-child {
    grid-column: 1 / span 5;
  }

  .split > :last-child {
    grid-column: 7 / span 6;
  }

  .split--end {
    align-items: end;
  }

  .split--list > :first-child {
    grid-column: 1 / span 4;
  }

  .split--list > :last-child {
    grid-column: 6 / span 7;
  }

  .split--tasks > :first-child {
    grid-column: 1 / span 6;
  }

  .split--tasks > :last-child {
    grid-column: 8 / span 5;
  }
}

/* ---------- Typografie ---------- */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  line-height: inherit;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-orange);
}

.section--dark .label {
  color: var(--color-orange-light);
}

.h1,
.h2,
h2 {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
}

.h1 {
  font-size: var(--text-h1);
  line-height: var(--leading-h1);
}

.h2,
h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
}

h3 {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-h3);
  text-transform: uppercase;
}

.lead {
  font-size: var(--text-lead);
  line-height: var(--leading-lead);
}

.item-text {
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: var(--leading-item);
}

.muted-on-dark {
  color: var(--color-text-on-dark);
}

/* ---------- Buttons ---------- */
.btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  width: 100%;
  min-height: var(--button-height);
  padding: calc(var(--space-4) - var(--border-strong)) calc(var(--space-5) - var(--border-strong));
  border: var(--border-strong) solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-h3);
  text-decoration: none;
  cursor: pointer;
}

.btn--primary {
  background-color: var(--color-orange);
  color: var(--color-white);
}

.btn--primary:hover {
  background-color: var(--color-orange-hover);
  color: var(--color-white);
}

.btn--secondary {
  border-color: var(--color-asphalt);
  color: var(--color-asphalt);
}

.btn--secondary:hover {
  border-color: var(--color-orange);
  color: var(--color-orange);
}

.btn--secondary-dark {
  border-color: var(--color-sand);
  color: var(--color-sand);
}

.btn--secondary-dark:hover {
  border-color: var(--color-orange-light);
  color: var(--color-orange-light);
}

@media (min-width: 48em) {
  .btn {
    display: inline-flex;
    justify-content: flex-start;
    width: auto;
    padding-inline: calc(var(--space-6) - var(--border-strong));
  }

  .btn--block {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
}

.text-link {
  font-weight: 600;
  text-decoration: underline;
}

/* ---------- Header ---------- */
.site-header {
  background-color: var(--color-asphalt);
  color: var(--color-sand);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: var(--space-1);
  row-gap: var(--space-1);
  padding-block: var(--space-2);
  padding-right: var(--space-2);
}

.site-header__inner > .brand {
  margin-right: auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
  font-family: var(--font-display);
  font-size: var(--text-lead);
  font-weight: 700;
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-brand);
  text-transform: uppercase;
  text-decoration: none;
}

.main-nav__list,
.lang-switch {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.main-nav__list {
  column-gap: var(--space-8);
}

.main-nav__list a,
.lang-switch a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--touch-min);
  min-height: var(--touch-min);
  text-decoration: none;
}

.lang-switch {
  gap: var(--space-2);
}

.lang-switch a[aria-current] {
  text-decoration: underline;
}

.lang-switch a:not([aria-current]) {
  color: var(--color-meta-on-dark);
}

.lang-switch a:not([aria-current]):hover {
  color: var(--color-orange-light);
}

.header-cta {
  display: inline-flex;
  align-items: center;
  min-height: var(--button-height-header);
  padding: var(--space-3) var(--space-5);
  background-color: var(--color-orange);
  color: var(--color-white);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  text-decoration: none;
}

.site-header .header-cta:hover {
  background-color: var(--color-orange-hover);
  color: var(--color-white);
}

.menu-button,
.menu__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--menu-button-size);
  height: var(--menu-button-size);
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-sand);
  cursor: pointer;
}

.menu-button:hover,
.menu__close:hover {
  color: var(--color-orange-light);
}

.menu-button svg,
.menu__close svg {
  width: var(--space-6);
  height: var(--space-6);
}

/* Unterhalb 60em: Menü-Button statt Navigation, Sprachumschalter nur mit der anderen Sprache */
@media (max-width: 59.99em) {
  .main-nav,
  .site-header .header-cta,
  .lang-switch a[aria-current],
  .lang-switch__sep {
    display: none;
  }

  .lang-switch a:not([aria-current]) {
    color: var(--color-sand);
  }
}

@media (min-width: 60em) {
  .site-header__inner {
    column-gap: var(--space-8);
    padding-block: var(--space-5);
    padding-right: var(--page-gutter);
  }

  .menu-button {
    display: none;
  }

  .lang-switch a {
    min-width: var(--space-6);
  }
}

/* ---------- Mobiles Menü (modaler <dialog>) ---------- */
.menu {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background-color: var(--color-asphalt);
  color: var(--color-sand);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.menu::backdrop {
  background-color: var(--color-asphalt);
}

html:has(.menu[open]) {
  overflow: hidden;
}

.menu__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  min-height: 100%;
  padding-bottom: var(--space-10);
}

.menu__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-2);
  padding-right: var(--space-2);
}

.menu__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.menu__list a {
  display: flex;
  align-items: center;
  min-height: var(--touch-min);
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 700;
  line-height: var(--leading-h2);
  text-transform: uppercase;
  text-decoration: none;
}

.menu__lang {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  min-height: var(--touch-min);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.menu__cta {
  margin-top: auto;
}

/* ---------- Hero ---------- */
.hero {
  background-color: var(--color-asphalt);
  color: var(--color-sand);
}

/* Smartphone: Bild randlos über dem Text, feste Höhe, ganze Person mit Händen */
.hero__media {
  display: block;
  margin-inline: calc(var(--page-gutter) * -1);
}

.hero__img {
  width: 100%;
  height: var(--img-hero-mobile);
  object-fit: cover;
  object-position: 42% 50%;
}

.hero__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-top: var(--space-8);
  padding-bottom: var(--space-12);
}

.hero__intro,
.hero__aside {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.hero__role {
  color: var(--color-orange-light);
  font-size: var(--text-lead);
  font-weight: 600;
  line-height: var(--leading-item);
  hyphens: auto;
}

.hero__role span {
  color: var(--color-text-on-dark);
  font-weight: 500;
}

.hero__lead {
  color: var(--color-text-on-dark);
}

.hero__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

/* Ab Tablet geteilt, alles im Container: Text Spalten 1–6, Porträt 4:5 Spalten 7–12,
   beide vertikal zentriert. Bild steht im HTML zuerst (mobil oben), das Raster setzt es nach rechts. */
@media (min-width: 48em) {
  .hero__inner {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
    align-items: center;
    padding-block: var(--section-padding-y);
  }

  .hero__media {
    grid-column: 7 / span 6;
    grid-row: 1;
    margin-inline: 0;
  }

  .hero__img {
    height: auto;
    aspect-ratio: var(--hero-ratio);
    object-position: 36% 0%;
  }

  .hero__body {
    grid-column: 1 / span 6;
    grid-row: 1;
    gap: var(--space-8);
    padding-block: 0;
    container-type: inline-size;
  }

  /* In der halben Spalte (Tablet) passt „MOTORCYCLE“ in voller H1-Größe nicht: H1 auf die
     Spaltenbreite deckeln (längstes Wort ≈ 4,5 em). Ab ca. 1100 px greift wieder --text-h1. */
  .hero__body .h1 {
    font-size: min(var(--text-h1), var(--hero-h1-max));
  }

  .hero__intro {
    gap: var(--space-6);
  }

  .hero__aside {
    gap: var(--space-8);
  }

  .hero__actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-3);
  }
}

/* Smartphone quer bzw. 400 % Zoom (wenig Höhe): Bild nicht höher als 75 % des Fensters */
@media (max-height: 30em) and (max-width: 47.99em) {
  .hero__img {
    max-height: var(--hero-max-height);
  }
}

/* ---------- Kennzahlen ---------- */
.facts__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: var(--border-strong) solid var(--color-asphalt);
}

.fact dt {
  color: var(--color-grey);
}

.fact dd {
  margin-top: var(--space-1);
}

.fact--figure {
  padding: var(--space-6) var(--space-2) var(--space-5) var(--space-3);
  border-right: var(--border-thin) solid var(--color-line);
  border-bottom: var(--border-thin) solid var(--color-line);
}

.fact--figure:first-child {
  padding-left: 0;
}

.fact--figure:nth-child(3) {
  padding-right: 0;
  border-right: 0;
}

.fact--figure dd {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
}

.fact__num {
  font-size: var(--text-h2);
  line-height: var(--leading-h2);
}

.fact__unit {
  font-size: var(--text-lead);
  line-height: var(--leading-item);
}

.fact--text {
  grid-column: 1 / -1;
  padding-top: var(--space-4);
}

.fact--text:nth-child(4) {
  padding-top: var(--space-5);
}

.fact--text:last-child {
  padding-bottom: var(--space-8);
}

.fact--text dd {
  font-weight: 600;
}

.fact__long {
  display: none;
}

/* Sehr schmal oder stark vergrößerte Schrift: Kennzahlen untereinander */
@media (max-width: 18.99em) {
  .facts__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .fact--figure,
  .fact--figure:first-child,
  .fact--figure:nth-child(3) {
    padding-inline: 0;
    border-right: 0;
  }
}

@media (min-width: 48em) {
  .fact__long {
    display: inline;
  }

  .fact__short {
    display: none;
  }

  .fact--figure,
  .fact--text,
  .fact--text:nth-child(4),
  .fact--text:last-child {
    grid-column: auto;
    padding: var(--space-10) var(--space-8) var(--space-8);
    border-right: var(--border-thin) solid var(--color-line);
    border-bottom: 0;
  }

  .fact--text,
  .fact--text:nth-child(4),
  .fact--text:last-child {
    padding-top: var(--space-6);
    padding-bottom: var(--space-10);
    border-top: var(--border-thin) solid var(--color-line);
  }

  .fact:nth-child(3n + 1) {
    padding-left: 0;
  }

  .fact:nth-child(3n) {
    padding-right: 0;
    border-right: 0;
  }

  .fact--figure dd {
    display: block;
    margin-top: var(--space-2);
  }

  .fact__unit {
    font-size: inherit;
    line-height: inherit;
  }

  .fact--figure dd {
    font-size: var(--text-h2);
    line-height: var(--leading-h2);
  }

  .fact--text dd {
    margin-top: var(--space-2);
  }
}

/* ---------- 01 Anlässe ---------- */
.occasions li {
  display: flex;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: var(--border-thin) solid var(--color-line);
}

.occasions li:last-child {
  border-bottom: var(--border-thin) solid var(--color-line);
}

.num {
  flex: none;
  padding-top: var(--space-1);
  color: var(--color-grey);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  line-height: inherit;
}

@media (min-width: 48em) {
  .occasions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .occasions li {
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-6) 0 var(--space-8) var(--space-6);
  }

  .occasions li:nth-child(odd) {
    padding-left: 0;
    padding-right: var(--space-6);
    border-right: var(--border-thin) solid var(--color-line);
  }

  .occasions li:last-child {
    border-bottom: 0;
  }

  .occasions .num {
    padding-top: 0;
  }
}

/* ---------- 02 Leistungen ---------- */
.cards {
  display: grid;
  gap: var(--space-6);
}

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  border: var(--border-thin) solid var(--color-line-dark);
}

.card p,
.card .more {
  color: var(--color-text-on-dark);
}

.card .btn {
  margin-top: auto;
}

.photo {
  width: 100%;
  object-fit: cover;
}

.photo--team {
  height: var(--img-team-mobile);
  object-position: 40% 30%;
}

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

  .card .btn {
    align-self: flex-start;
  }

  .photo--team {
    height: var(--img-team);
    object-position: 40% 25%;
  }
}

@media (min-width: 64em) {
  .card {
    gap: var(--space-5);
    padding: var(--space-10);
  }
}

/* ---------- „Weiterlesen“ (nur Smartphone eingeklappt) ---------- */
.more > summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  color: var(--color-orange);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.section--dark .more > summary {
  color: var(--color-orange-light);
}

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

.more > summary .arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}

.more[open] > summary .arrow {
  transform: rotate(180deg);
}

.more > p {
  margin-top: var(--space-4);
}

.more > summary + p {
  margin-top: var(--space-2);
}

/* Ab Tablet ausgeklappt: per CSS, wo ::details-content unterstützt wird, sonst per JS (main.js) */
@media (min-width: 48em) {
  @supports selector(::details-content) {
    .more > summary {
      display: none;
    }

    .more::details-content {
      content-visibility: visible;
      display: block;
    }
  }

  .more--expanded > summary {
    display: none;
  }

  .more > p,
  .more > summary + p {
    margin-top: var(--space-5);
  }

  .more > summary + p {
    margin-top: 0;
  }
}

/* ---------- 03 Aufgaben ---------- */
.tasks {
  display: grid;
  gap: var(--space-2);
}

.task {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  background-color: var(--color-sand);
  font-weight: 600;
}

.task__bullet {
  flex: none;
  width: var(--bullet-size-mobile);
  height: var(--bullet-size-mobile);
  margin-top: var(--space-2);
  background-color: var(--color-orange);
}

.task--cta {
  flex-direction: column;
  gap: var(--space-1);
  background-color: var(--color-asphalt);
  color: var(--color-sand);
}

.task--cta .task__text {
  font-size: var(--text-lead);
  line-height: var(--leading-item);
}

.task--cta a {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2);
  min-height: var(--touch-min);
  color: var(--color-orange-light);
  font-size: var(--text-body);
  font-weight: 600;
  line-height: var(--leading-h3);
}

.task--cta a:hover {
  color: var(--color-sand);
}

@media (min-width: 48em) {
  .tasks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .task {
    flex-direction: column;
    justify-content: space-between;
    min-height: var(--tile-min-height);
    padding: var(--space-7) var(--space-6);
    font-size: var(--text-lead);
    line-height: var(--leading-item);
  }

  .task__text {
    hyphens: auto;
  }

  .task__bullet {
    width: var(--bullet-size);
    height: var(--bullet-size);
    margin-top: 0;
  }
}

@media (min-width: 64em) {
  .tasks {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

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

/* ---------- 04 Dauer ---------- */
.route {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding-left: var(--space-5);
  border-left: var(--border-dashed) dashed var(--color-asphalt);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-h3);
  text-transform: uppercase;
}

@media (min-width: 48em) {
  .route {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding-top: var(--space-5);
    padding-left: 0;
    border-top: var(--border-dashed) dashed var(--color-asphalt);
    border-left: 0;
  }
}

/* ---------- 05 Über mich ---------- */
.about {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.photo--about {
  height: var(--img-about-mobile);
  object-position: 31% center;
}

@media (min-width: 64em) {
  .about {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto 1fr;
    column-gap: var(--grid-gap);
    row-gap: var(--space-8);
  }

  .about__figure {
    grid-column: 1 / span 5;
    grid-row: 1 / span 2;
  }

  .about__head,
  .about__text {
    grid-column: 7 / span 6;
  }

  .photo--about {
    height: var(--img-about);
  }
}

/* ---------- 06 Motorradbranche ---------- */
.moto {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.photo--moto {
  height: var(--img-moto-mobile);
  object-position: 50% 0%;
}

.fazit {
  padding: var(--space-5);
  background-color: var(--color-asphalt);
  color: var(--color-sand);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-fazit);
}

@media (min-width: 48em) {
  .photo--moto {
    height: var(--img-moto);
  }

  .fazit {
    padding: var(--space-10) var(--space-12);
  }
}

@media (min-width: 64em) {
  .moto {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    column-gap: var(--grid-gap);
    row-gap: 0;
  }

  .moto__head,
  .moto__figure {
    grid-column: 1 / span 5;
  }

  .moto__figure {
    margin-top: var(--space-10);
  }

  .moto__text {
    grid-column: 7 / span 6;
    grid-row: 1 / span 2;
  }

  .fazit {
    grid-column: 1 / -1;
    margin-top: var(--space-10);
  }
}

/* ---------- 07 Haltung ---------- */
.photo--rally {
  height: var(--img-rally-mobile);
  object-position: 45% 60%;
}

.quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  max-width: var(--quote-max);
  margin-inline: auto;
  text-align: center;
}

.quote__mark {
  color: var(--color-orange);
  font-family: var(--font-display);
  font-size: var(--text-h1);
  font-weight: 700;
  line-height: var(--leading-quote-mark);
}

.quote p {
  font-family: var(--font-display);
  font-size: var(--text-h2);
  font-weight: 600;
  line-height: var(--leading-quote);
}

@media (min-width: 48em) {
  .photo--rally {
    height: var(--img-rally);
    object-position: 50% 55%;
  }

  .quote {
    gap: var(--space-6);
  }
}

/* ---------- 08 Ablauf ---------- */
.steps {
  display: grid;
  gap: var(--space-2);
}

.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  border-left: var(--border-accent) solid var(--color-orange);
  background-color: var(--color-sand);
}

.step .num {
  padding-top: 0;
  color: var(--color-orange);
}

@media (min-width: 48em) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
  }

  .step {
    gap: var(--space-3);
    padding: var(--space-7) var(--space-6) var(--space-8);
    border-top: var(--border-accent) solid var(--color-orange);
    border-left: 0;
  }
}

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

/* ---------- Kontakt ---------- */
.contact__links {
  display: flex;
  flex-direction: column;
  padding-top: var(--space-2);
  border-top: var(--border-thin) solid var(--color-line);
}

.contact__links a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
  font-weight: 600;
}

.contact__actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

@media (min-width: 48em) {
  .contact__actions {
    max-width: calc(var(--contact-text-max) - var(--space-24));
  }
}

@media (min-width: 64em) {
  .split--contact {
    align-items: end;
  }

  .split--contact > :first-child {
    grid-column: 1 / span 7;
  }

  .split--contact > :last-child {
    grid-column: 9 / span 4;
  }

  .contact__title {
    font-size: var(--text-h1);
    line-height: var(--leading-h1);
  }

  .contact__text {
    max-width: var(--contact-text-max);
    font-size: var(--text-lead);
    line-height: var(--leading-lead);
  }

  .contact__actions {
    max-width: none;
  }

  .contact__links {
    padding-top: var(--space-4);
  }

  .contact__links a {
    min-height: var(--space-8);
  }
}

/* ---------- Footer ---------- */
.site-footer {
  padding-block: var(--space-10) var(--space-8);
  background-color: var(--color-asphalt);
  color: var(--color-text-on-dark);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.site-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.site-footer__name {
  color: var(--color-sand);
  font-family: var(--font-display);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-h3);
  letter-spacing: var(--tracking-brand);
  text-transform: uppercase;
}

.site-footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-4);
}

.footer-col {
  display: flex;
  flex-direction: column;
}

.footer-col__title {
  margin-bottom: var(--space-1);
  color: var(--color-meta-on-dark);
}

.footer-col a {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-height: var(--touch-min);
}

.footer-col--contact {
  display: none;
}

.site-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: var(--border-thin) solid var(--color-line-dark);
  font-family: var(--font-mono);
  font-size: var(--text-meta);
  font-weight: 500;
  letter-spacing: var(--tracking-label);
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  column-gap: var(--space-7);
}

.legal-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-min);
}

@media (min-width: 48em) {
  .site-footer {
    padding-top: var(--space-16);
  }

  .site-footer__inner {
    gap: var(--space-12);
  }

  .site-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--grid-gap);
  }

  .footer-col--contact {
    display: flex;
  }

  .site-footer__bottom {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-6);
  }
}

@media (min-width: 64em) {
  .site-footer__top {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--grid-gap);
  }

  .site-footer__brand {
    grid-column: 1 / span 4;
    gap: var(--space-3);
  }

  .site-footer__cols {
    grid-column: 6 / span 7;
    grid-template-columns: 2fr 3fr 2fr;
  }

  .footer-col {
    gap: var(--space-3);
  }

  .footer-col a {
    min-height: 0;
  }

  .footer-col__title {
    margin-bottom: var(--space-1);
  }
}

/* ---------- Unterseiten (Impressum, Datenschutz, 404) ---------- */
.page {
  min-height: 60vh;
}

.page__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

/* Unterseiten: Inhalt bündig mit dem Raster (Container), Lesebreite begrenzt nur der Text */
.page__body > * {
  max-width: var(--quote-max);
}

.placeholder {
  font-weight: 600;
}

/* Rechtstexte (Impressum, Datenschutz): ruhige Lesespalte, kleine Zwischenüberschriften */
.legal {
  max-width: var(--text-max);
}

.legal > * + * {
  margin-top: var(--space-4);
}

.legal h2 {
  margin-top: var(--space-10);
  font-size: var(--text-h3);
  font-weight: 600;
  line-height: var(--leading-h3);
}

.legal h2:first-child {
  margin-top: 0;
}

.legal ul {
  padding-left: var(--space-6);
}

.legal a {
  font-weight: 600;
}

.legal-note {
  max-width: var(--text-max);
  color: var(--color-grey);
}