/* ============================================================
   EK Schulterblick – Stylesheet
   Mobile First. Reihenfolge:
   1 Tokens · 2 Basis · 3 Typografie · 4 Layout · 5 Buttons
   6 Chips · 7 Karten · 8 Header/Navigation · 9 Hero
   10 Sektionen · 11 Standort/Karte · 12 Footer
   13 Kontaktleiste · 14 Utilities
   ============================================================ */

/* ---------- 1 · Design-Tokens ---------- */
:root {
  /* Farben */
  --c-black: #000;            /* ausschliesslich Logo-Flaeche */
  --c-ink: #0b0d0e;           /* Dunkelflaechen */
  --c-ink-2: #14181a;         /* Fliesstext auf Hell */
  --c-ink-3: #4a5459;         /* Sekundaertext */
  --c-surface: #fff;
  --c-surface-2: #f4f6f7;
  --c-line: #dde3e5;
  --c-line-soft: #eaeff0;     /* sehr dezente Trennung innerhalb von Karten */
  --c-accent: #1ef2f6;        /* nur auf Dunkel */
  --c-accent-deep: #0a5f63;   /* Text/Icons auf Hell */
  --c-accent-deeper: #073f42;
  --c-accent-soft: #62d9de;   /* ruhigeres Tuerkis fuer grosse Schrift auf Dunkel */
  --c-on-dark: #eef4f5;
  --c-on-dark-2: #a8b6b9;

  /* Typografie */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-h1: clamp(2.1rem, 1.35rem + 3.4vw, 3.6rem);
  --fs-h2: clamp(1.6rem, 1.25rem + 1.6vw, 2.35rem);
  --fs-h3: clamp(1.12rem, 1.06rem + 0.3vw, 1.3rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;

  /* Abstaende */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;

  --radius: 14px;
  --radius-btn: 10px;
  --container: 1180px;
  --bar-h: 66px;              /* Hoehe der mobilen Kontaktleiste */
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--c-ink-2);
  background: var(--c-surface);
  overflow-x: hidden;
  /* Platz fuer die fixierte Kontaktleiste */
  padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom, 0px));
}

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

a { color: var(--c-accent-deep); text-underline-offset: 3px; }
a:hover { color: var(--c-accent-deeper); }

ul, ol { margin: 0; padding: 0; list-style: none; }

/* Sichtbarer Fokus – nie entfernen */
:focus-visible {
  outline: 3px solid var(--c-accent-deep);
  outline-offset: 3px;
  border-radius: 4px;
}
.section--dark :focus-visible,
.header :focus-visible,
.footer :focus-visible,
.contactbar :focus-visible,
.hero :focus-visible { outline-color: var(--c-accent); }

.skip-link {
  position: absolute; left: 0; top: -120px; z-index: 100;
  background: var(--c-accent); color: #000; font-weight: 700;
  padding: var(--sp-3) var(--sp-4); border-radius: 0 0 var(--radius-btn) 0;
}
.skip-link:focus { top: 0; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.icon {
  width: 22px; height: 22px; flex: none;
  fill: none; stroke: currentColor; stroke-width: 1.75;
  stroke-linecap: round; stroke-linejoin: round;
}

/* ---------- 3 · Typografie ---------- */
h1, h2, h3 { line-height: 1.2; margin: 0 0 var(--sp-4); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: var(--fs-h1); letter-spacing: -0.025em; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.02em; }
h3 { font-size: var(--fs-h3); }

p { margin: 0 0 var(--sp-4); max-width: 68ch; }
p:last-child { margin-bottom: 0; }

strong { font-weight: 700; }

.lead { font-size: 1.125rem; }

.kicker {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-3);
  font-size: 0.8125rem; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--c-accent-deep);
}
.kicker::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }
.section--dark .kicker, .hero .kicker { color: var(--c-accent); }

.note {
  font-size: var(--fs-small);
  color: var(--c-ink-3);
  border-left: 3px solid var(--c-line);
  padding-left: var(--sp-4);
  margin-top: var(--sp-5);
}

.more { margin-top: var(--sp-6); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-weight: 700; text-decoration: none;
  border-bottom: 2px solid var(--c-accent-deep);
  padding-bottom: 2px;
}
.link-arrow .icon { width: 20px; height: 20px; transition: transform .2s ease; }
.link-arrow:hover .icon { transform: translateX(4px); }

.address { font-style: normal; margin: 0 0 var(--sp-5); }

/* ---------- 4 · Layout ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 20px;
}

.section { padding-block: var(--sp-7); }
.section--alt { background: var(--c-surface-2); }
.section--dark { background: var(--c-ink); color: var(--c-on-dark); }
.section--dark p { color: var(--c-on-dark-2); }
.section--dark h2, .section--dark h3 { color: #fff; }

.grid { display: grid; gap: var(--sp-4); }

/* ---------- 5 · Buttons (alle drei Kontaktwege gleich gewichtet) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-2);
  min-height: 52px;
  padding: 13px 20px;
  border: 2px solid transparent;
  border-radius: var(--radius-btn);
  font: inherit; font-weight: 700; font-size: 1rem;
  text-align: center; text-decoration: none;
  cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.btn .icon { color: var(--c-accent); }
.btn:disabled { opacity: .5; cursor: default; }

/* auf hellem Grund */
.btn--dark {
  background: var(--c-ink); color: #fff; border-color: var(--c-ink);
}
.btn--dark:hover { background: var(--c-accent-deep); border-color: var(--c-accent-deep); color: #fff; }

/* auf dunklem Grund */
.btn--light {
  background: var(--c-ink); color: #fff; border-color: var(--c-accent);
}
.btn--light:hover { background: var(--c-accent); color: #000; }
.btn--light:hover .icon { color: #000; }

.btn-row {
  display: grid; gap: var(--sp-3);
  margin: var(--sp-5) 0 0;
}
.btn-row .btn { width: 100%; height: 100%; }

/* ---------- 6 · Chips ---------- */
.chips {
  display: flex; flex-wrap: wrap; gap: var(--sp-2);
  margin: 0 0 var(--sp-4);
}
.chips li {
  font-size: 0.875rem; font-weight: 600;
  padding: 6px 12px; border-radius: 999px;
  background: var(--c-surface-2); border: 1px solid var(--c-line);
  color: var(--c-ink-2);
}
.chips--dark li {
  background: rgba(30, 242, 246, .07);
  border-color: rgba(30, 242, 246, .45);
  color: #d9fcfd;
}
.chips--lg li { font-size: 1rem; padding: 9px 18px; }
/* Zuordnungszeile ueber den Sprach-Chips. Erbt die Textfarbe, damit sie
   auf hellem wie auf dunklem Grund funktioniert. */
.chips-label { font-size: 0.875rem; font-weight: 600; margin: 0 0 var(--sp-2); }

/* ---------- 6b · Theoriekurstermine ---------- */
.kursbloecke {
  display: grid; gap: var(--sp-5);
  margin-top: var(--sp-6);
}

.kursblock {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  box-shadow: 0 1px 2px rgba(11, 13, 14, .04),
              0 14px 30px -18px rgba(11, 13, 14, .18);
}

/* Kopf: Blockname gross, darunter der Zeitraum mit dem Strich-Motiv
   der uebrigen Seite (siehe .kicker). */
.kursblock__kopf {
  padding-bottom: var(--sp-4);
  border-bottom: 1px solid var(--c-line);
  margin-bottom: var(--sp-2);
}
.kursblock__titel { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.kursblock__zeitraum {
  display: flex; align-items: center; gap: var(--sp-2);
  font-size: var(--fs-small); font-weight: 600;
  color: var(--c-accent-deep);
  font-variant-numeric: tabular-nums;
}
.kursblock__zeitraum::before {
  content: ""; flex: none;
  width: 24px; height: 2px; background: currentColor;
}

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

/* Mobil: Zeile 1 Wochentag und Datum, Zeile 2 das Thema,
   rechts daneben die Uhrzeit als ruhige Plakette. */
.termin {
  display: grid;
  /* Feste Breite fuer den Wochentag, damit Datum und Uhrzeit untereinander fluchten */
  grid-template-columns: 5.2em auto 1fr;
  gap: 2px var(--sp-3);
  align-items: center;
  padding: var(--sp-3) 0;
  border-top: 1px solid var(--c-line-soft);
}
.kursblock__liste > .termin:first-child { border-top: 0; }

.termin__tag {
  grid-column: 1; grid-row: 1;
  font-size: var(--fs-small); font-weight: 600;
  color: var(--c-ink-3);
}
.termin__datum {
  grid-column: 2; grid-row: 1;
  font-weight: 700; color: var(--c-ink);
  font-variant-numeric: tabular-nums;
}
.termin__thema {
  grid-column: 1 / 3; grid-row: 2;
  font-size: var(--fs-small); color: var(--c-ink-3);
}
.termin__zeit {
  grid-column: 3; grid-row: 1 / span 2;
  justify-self: start; align-self: center;
  font-size: 0.8125rem; color: var(--c-ink-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  padding: 5px 11px; border-radius: 999px;
  background: var(--c-surface-2); border: 1px solid var(--c-line);
}

/* ---------- 7 · Karten ---------- */
.cards { margin-top: var(--sp-5); }
/* Klassenkarten wachsen mit ihrem Text, statt auf gleiche Hoehe gedehnt zu werden */
.grid--2.cards { align-items: start; }

.card {
  position: relative;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  padding: var(--sp-5) var(--sp-5) var(--sp-5);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--c-accent-deep);
}
.card h3 { margin-bottom: var(--sp-2); }
.card .btn { margin-top: auto; }
.card__icon {
  width: 34px; height: 34px; margin-bottom: var(--sp-3);
  fill: none; stroke: var(--c-accent-deep); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.card__lead { font-weight: 700; color: var(--c-ink-2); margin-bottom: var(--sp-2); }
.card p + .btn { margin-top: var(--sp-4); }

.card--num { padding-top: var(--sp-4); }
.num {
  font-size: 2rem; font-weight: 800; line-height: 1;
  color: var(--c-accent-deep); opacity: .55;
  margin: 0 0 var(--sp-2); letter-spacing: -0.03em;
}
.card--person h3 { margin-bottom: 2px; }
.card--person p { color: var(--c-ink-3); font-size: var(--fs-small); }
.card--person .classcode { margin: 0; }
/* Abstand zwischen Teamkarten und dem folgenden Absatz */
.team__more { margin-top: var(--sp-5); }

/* ---------- 8 · Header & Navigation ---------- */
.header { background: var(--c-ink); color: #fff; }
.header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4);
  min-height: 92px;
}

.logo { display: inline-flex; text-decoration: none; }
.logo__plate {
  display: flex; align-items: center; justify-content: center;
  background: var(--c-black);      /* exakt Schwarz: der schwarze Bildgrund verschwindet */
  border-radius: 50%;              /* runder Ausschnitt: keine sichtbare rechteckige Kante */
  width: 76px; height: 76px;
  padding: 0;
  overflow: hidden;
}
.logo__plate--sm { width: 64px; height: 64px; }
.logo__img { width: 100%; height: 100%; object-fit: cover; }

/* Rueckfallebene, solange keine Logodatei vorliegt */
.logo__fallback { display: none; }
.logo__plate.is-fallback { width: auto; min-width: 64px; padding: 6px 14px; border-radius: 12px; }
.logo__plate.is-fallback .logo__fallback {
  display: block; text-align: center; line-height: 1.05;
  font-weight: 800; letter-spacing: .04em; color: var(--c-accent);
  font-size: 1.1rem;
}
.logo__plate.is-fallback .logo__fallback span {
  display: block; font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: #fff; font-weight: 700;
}

.nav {
  position: fixed; inset: 0; z-index: 50;
  background: var(--c-ink);
  padding: 96px 20px calc(var(--bar-h) + 32px);
  overflow-y: auto;
  display: none;
}
.nav.is-open { display: block; }

.nav__list { margin-bottom: var(--sp-6); }
.nav__list a {
  display: block;
  padding: 16px 0;
  min-height: 56px;
  font-size: 1.25rem; font-weight: 700;
  color: #fff; text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.nav__list a:hover { color: var(--c-accent); }
.nav__list a[aria-current="page"] { color: var(--c-accent); }

.header__contact { display: grid; gap: var(--sp-3); }
.header__contact .btn {
  width: 100%;
  background: transparent; color: #fff; border-color: var(--c-accent);
}
.header__contact .btn:hover { background: var(--c-accent); color: #000; }
.header__contact .btn:hover .icon { color: #000; }

.nav-toggle {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 48px; padding: 10px 14px;
  background: transparent; color: #fff;
  border: 2px solid rgba(255, 255, 255, .35); border-radius: var(--radius-btn);
  font: inherit; font-weight: 700; cursor: pointer;
}
.nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] {
  position: relative; z-index: 60;
  border-color: var(--c-accent); color: var(--c-accent);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

body.is-locked { overflow: hidden; }

/* ---------- 9 · Hero ---------- */
.hero {
  position: relative;
  background: var(--c-ink);
  color: var(--c-on-dark);
  padding-block: var(--sp-7) var(--sp-8);
  overflow: hidden;
}
.hero h1 { color: #fff; margin-bottom: var(--sp-4); }
.hero h1 .h1-ort { color: var(--c-accent-soft); }
.hero__sub {
  font-size: 1.125rem; color: var(--c-on-dark-2);
  max-width: 56ch; margin-bottom: var(--sp-5);
}
.hero .chips { margin-bottom: var(--sp-5); }
.hero__note {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-6); font-size: var(--fs-small);
  color: var(--c-on-dark-2);
}
.hero__note .icon { color: var(--c-accent); }
.hero__deco-arc { display: none; }
.hero__logo { display: none; }

/* Ring-Motiv aus dem Logo – rein per CSS, dekorativ */
.hero__deco, .cta__deco {
  position: absolute; pointer-events: none;
  width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(30, 242, 246, .16);
  right: -150px; bottom: -170px;
}
.hero__deco::before, .cta__deco::before {
  content: ""; position: absolute; inset: 40px; border-radius: 50%;
  border: 1px solid rgba(30, 242, 246, .12);
}
.hero__deco::after, .cta__deco::after {
  content: ""; position: absolute; inset: 80px; border-radius: 50%;
  border: 2px solid transparent;
  border-top-color: rgba(30, 242, 246, .5);
  border-right-color: rgba(30, 242, 246, .22);
  transform: rotate(-24deg);
}

/* ---------- 10 · Sektionen ---------- */
.band__inner { display: grid; gap: var(--sp-5); }
.band .chips { margin-bottom: 0; }

.cta { position: relative; overflow: hidden; }
.cta__inner { position: relative; }
.cta__deco { right: auto; left: -160px; top: -180px; bottom: auto; }

/* ---------- 11 · Standort & Karte ---------- */
.split { display: grid; gap: var(--sp-6); margin-top: var(--sp-5); }
.split__text h3 {
  display: flex; align-items: center; gap: var(--sp-2);
  margin-top: var(--sp-5);
}
.split__text h3:first-child { margin-top: 0; }
.icon--head { color: var(--c-accent-deep); }

.map {
  border: 1px solid var(--c-line);
  border-radius: var(--radius);
  background: var(--c-surface);
  overflow: hidden;
}
.map__placeholder {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--sp-3);
  aspect-ratio: 4 / 3;
  padding: var(--sp-5);
  background:
    linear-gradient(rgba(10, 95, 99, .06) 1px, transparent 1px) 0 0 / 100% 28px,
    linear-gradient(90deg, rgba(10, 95, 99, .06) 1px, transparent 1px) 0 0 / 28px 100%,
    var(--c-surface-2);
}
.map__pin {
  width: 44px; height: 44px;
  fill: none; stroke: var(--c-accent-deep); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.map__text { font-weight: 700; text-align: center; margin: 0; }
.map__bar { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.map__hint, .map__status {
  margin: 0; padding: var(--sp-4) var(--sp-4) 0;
  font-size: var(--fs-small); color: var(--c-ink-3);
}
.map__status {
  color: var(--c-ink-2); font-weight: 600;
  border-top: 1px solid var(--c-line);
  padding: var(--sp-4);
}
.map__frame { width: 100%; aspect-ratio: 4 / 3; border: 0; display: block; }

/* ---------- 12 · Footer ---------- */
.footer { background: var(--c-ink); color: var(--c-on-dark-2); padding-top: var(--sp-7); }
.footer__inner { display: grid; gap: var(--sp-6); }
.footer h3 { color: #fff; font-size: 1rem; margin-bottom: var(--sp-3); }
.footer a { color: #fff; text-decoration: none; border-bottom: 1px solid rgba(30, 242, 246, .5); }
.footer a:hover { color: var(--c-accent); }
.footer .address { color: var(--c-on-dark-2); margin-top: var(--sp-4); }
.footer .address strong { color: #fff; }
.footer__list li { margin-bottom: var(--sp-2); }
.footer__list li:last-child { margin-bottom: 0; }
.footer__hours { margin-top: var(--sp-4); font-size: var(--fs-small); }
.footer__bottom {
  margin-top: var(--sp-6); padding-block: var(--sp-4);
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: var(--fs-small);
}

/* ---------- 13 · Mobile Kontaktleiste ---------- */
.contactbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--c-ink);
  border-top: 1px solid rgba(30, 242, 246, .35);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.contactbar a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  min-height: var(--bar-h);
  color: #fff; text-decoration: none;
  font-size: 0.8125rem; font-weight: 700;
}
.contactbar a + a { border-left: 1px solid rgba(255, 255, 255, .12); }
.contactbar .icon { color: var(--c-accent); }
.contactbar a:hover { background: rgba(30, 242, 246, .1); }

/* ---------- 14 · Unterseiten: Seitenkopf, Sprungmarken, Klassen ---------- */
.pagehead {
  position: relative;
  background: var(--c-ink);
  color: var(--c-on-dark);
  padding-block: var(--sp-7);
  overflow: hidden;
}
.pagehead::after {          /* weicher Markenschimmer rechts, gleiche Familie wie im Hero */
  content: ""; position: absolute; pointer-events: none;
  right: -160px; top: -120px; width: 460px; height: 460px; border-radius: 50%;
  background: radial-gradient(circle, rgba(30, 242, 246, .10), rgba(30, 242, 246, 0) 64%);
}
.pagehead h1 { color: #fff; position: relative; }
.pagehead__sub {
  position: relative;
  font-size: 1.0625rem; color: var(--c-on-dark-2); max-width: 60ch;
  margin-bottom: var(--sp-5);
}

.jumplinks { position: relative; display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.jumplinks a {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  min-height: 48px; padding: 10px 18px;
  border: 2px solid rgba(30, 242, 246, .45); border-radius: 999px;
  color: #fff; text-decoration: none; font-weight: 700;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.jumplinks a:hover { background: var(--c-accent); border-color: var(--c-accent); color: #000; }
.jumplinks .icon { color: var(--c-accent); }
.jumplinks a:hover .icon { color: #000; }

.classcode {
  display: inline-block;
  margin-right: var(--sp-2);
  padding: 3px 11px;
  border: 1px solid var(--c-line); border-radius: 999px;
  background: var(--c-surface-2);
  color: var(--c-accent-deep);
  font-size: 0.8125rem; font-weight: 700; letter-spacing: .04em;
  vertical-align: 2px; white-space: nowrap;
}
.card h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px var(--sp-1); }

.callout {
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-accent-deep);
  border-radius: var(--radius);
  padding: var(--sp-5);
}
.callout h2 { margin-bottom: var(--sp-3); }

/* Hinweiskasten mit grosser Kennziffer (z. B. Theoriekurs in sieben Tagen) */
.callout--figure { display: flex; gap: var(--sp-5); align-items: flex-start; }
.figure {
  flex: none; margin: 0;
  font-size: 3.25rem; font-weight: 800; line-height: .9;
  letter-spacing: -0.04em;
  color: var(--c-accent-deep); opacity: .5;
}

/* ---------- Rechtsseiten ---------- */
.legal { max-width: 68ch; margin-top: var(--sp-5); }
.legal h2 {
  font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--c-line);
}
.legal > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal__list { list-style: disc; padding-left: var(--sp-5); margin: 0 0 var(--sp-4); }
.legal__list li { margin-bottom: var(--sp-2); }

/* Entwurfsmarkierung: klar als offene Stelle erkennbar, nicht als Fliesstext */
.marker {
  margin: var(--sp-3) 0 0;
  padding: var(--sp-3) var(--sp-4);
  border: 1px dashed var(--c-ink-3);
  border-radius: var(--radius-btn);
  background: var(--c-surface-2);
  color: var(--c-ink-2);
  font-size: var(--fs-small);
  font-weight: 600;
}

/* ---------- Kontaktliste (E-Mail, Instagram) ---------- */
.contactlist { display: grid; gap: var(--sp-4); margin-top: var(--sp-5); }
.contactlist li { display: flex; gap: var(--sp-3); align-items: flex-start; }
.contactlist .icon { margin-top: 2px; }

/* ---------- Formular ---------- */
.callout--draft { border-left-color: var(--c-ink); margin-bottom: var(--sp-5); }

.form { max-width: 640px; margin-top: var(--sp-5); }
.field { margin-bottom: var(--sp-5); }
.field label,
.fieldset legend {
  display: block; margin-bottom: var(--sp-2);
  font-weight: 700;
}
.req {
  display: inline-block; margin-left: var(--sp-2);
  font-size: 0.75rem; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--c-ink-3);
}
.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--c-line); border-radius: var(--radius-btn);
  background: var(--c-surface);
  font: inherit; color: var(--c-ink-2);
}
.field textarea { min-height: 150px; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible { border-color: var(--c-accent-deep); }

.fieldset {
  margin: 0 0 var(--sp-5);
  padding: var(--sp-4) var(--sp-4) 2px;
  border: 1px solid var(--c-line); border-radius: var(--radius);
  background: var(--c-surface);
}
.fieldset legend { padding: 0 var(--sp-2); }

.field--check { margin-bottom: var(--sp-4); }
.checkbox {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  font-weight: 400; cursor: pointer;
  min-height: 44px;
}
.checkbox input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--c-accent-deep); }

/* Fehler: nie nur ueber Farbe – Zeichen, fette Schrift und Text */
.field__error {
  margin: var(--sp-2) 0 0;
  font-size: var(--fs-small); font-weight: 700;
  color: #8a1c1c;
}
.field__error::before { content: "! "; }
.field.has-error input,
.field.has-error select,
.field.has-error textarea,
.fieldset.has-error { border-color: #8a1c1c; }

.form__submit { margin-top: var(--sp-3); }

.form__status {
  margin-top: var(--sp-5);
  padding: var(--sp-4);
  border: 1px solid var(--c-line);
  border-left: 4px solid var(--c-ink);
  border-radius: var(--radius);
  background: var(--c-surface);
  font-weight: 600;
}
/* Rueckmeldung nach dem Versand – gleiche Form, nur die Kante faerbt sich. */
.form__status.is-ok    { border-left-color: var(--c-accent-deep); }
.form__status.is-error { border-left-color: #b3261e; }

/* Honeypot: fuer Menschen unsichtbar, aber nicht per display:none,
   damit einfache Bots das Feld ausfuellen. Nicht fokussierbar. */
.hp {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Raster mit einer laengeren Schwerpunktkarte:
   ab Tablet stehen die kompakten Karten links untereinander, die ausfuehrliche
   Karte fuellt die rechte Spalte. Verhindert eine Leerflaeche unter der kurzen
   Karte, ohne Text zu kuerzen. Auf Mobile bleibt alles untereinander. */
@media (min-width: 768px) {
  .grid--feature .card--feature {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: stretch;
  }
}

/* Sprungziele nicht unter der klebenden Kopfzeile verstecken */
#auto, #motorrad, #anhaenger,
#ausbildung, #theoriekurs, #umschreibung,
#auffrischungsfahrten, #automatik-b197, #sprachen,
#fahrschule, #team, #standort,
#kontaktwege, #nummern, #weitere, #anfahrt, #formular { scroll-margin-top: 24px; }

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

/* ============================================================
   BREAKPOINTS
   ============================================================ */

/* ---- ab 600 px ---- */
@media (min-width: 600px) {
  .map__bar { grid-auto-flow: column; grid-auto-columns: 1fr; }

  /* Ab hier steht der Wochentag in einer eigenen Spalte links,
     in der Mitte Datum und darunter das Thema, rechts die Uhrzeit. */
  .termin {
    grid-template-columns: 8em minmax(0, 1fr) auto;
    gap: var(--sp-1) var(--sp-4);
    padding: var(--sp-4) 0;
  }
  .termin__tag   { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .termin__datum { grid-column: 2; grid-row: 1; }
  .termin__thema { grid-column: 2; grid-row: 2; }
  .termin__zeit  { grid-column: 3; grid-row: 1 / span 2; justify-self: end; }
}

/* ---- ab 768 px (Tablet) ---- */
@media (min-width: 768px) {
  :root { --fs-body: 1.125rem; }
  .container { padding-inline: 32px; }
  .section { padding-block: var(--sp-8); }
  .btn-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr 1fr; align-items: start; gap: var(--sp-7); }
  .band__inner { grid-template-columns: 1.4fr 1fr; align-items: center; }
  .footer__inner { grid-template-columns: repeat(3, 1fr); }
  .hero { padding-block: var(--sp-8) var(--sp-9); }
}

/* ---- ab 1024 px (Desktop) ---- */
@media (min-width: 1024px) {
  body { padding-bottom: 0; }                 /* Kontaktleiste entfaellt */
  .contactbar { display: none; }
  .nav-toggle { display: none; }

  .container { padding-inline: 40px; }
  .header { position: sticky; top: 0; z-index: 50; }
  .header__inner { min-height: 104px; }
  .logo__plate { width: 88px; height: 88px; }

  .nav {
    position: static; display: flex; align-items: center; gap: var(--sp-6);
    background: none; padding: 0; overflow: visible; inset: auto;
  }
  .nav__list { display: flex; gap: var(--sp-4); margin: 0; }
  .nav__list a { white-space: nowrap; }
  .nav__list a {
    padding: 6px 0; min-height: 0; font-size: 1rem;
    border-bottom: 2px solid transparent;
  }
  .nav__list a:hover { border-bottom-color: var(--c-accent); }
  .nav__list a[aria-current="page"] { border-bottom-color: var(--c-accent); }

  .nav__list a { font-size: 0.9375rem; }
  .header__contact { display: flex; gap: var(--sp-2); }
  .header__contact .btn { min-height: 46px; padding: 9px 14px; font-size: 0.9375rem; }

  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid { gap: var(--sp-5); }
  .section { padding-block: var(--sp-9); }

  .pagehead { padding-block: var(--sp-8); }
  .pagehead__sub { font-size: 1.125rem; }
  #auto, #motorrad, #anhaenger,
  #ausbildung, #theoriekurs, #umschreibung,
  #auffrischungsfahrten, #automatik-b197, #sprachen,
  #fahrschule, #team, #standort,
  #kontaktwege, #nummern, #weitere, #anfahrt, #formular { scroll-margin-top: 116px; }
  .hero__inner { max-width: 1000px; }
  .btn-row { grid-template-columns: repeat(3, minmax(0, 340px)); justify-content: start; }
  .cta__deco { width: 560px; height: 560px; }

  /* ---- Desktop-Hero: groessere Typo, zweizeilige Ueberschrift ---- */
  .hero { padding-block: var(--sp-9) 118px; }
  .hero h1 {
    font-size: clamp(3.2rem, 2rem + 2.4vw, 4.5rem);
    line-height: 1.06;
    margin-bottom: var(--sp-5);
  }
  .hero h1 .h1-ort { display: block; }
  .hero__sub { font-size: 1.1875rem; }
  .hero .btn-row { grid-template-columns: repeat(3, minmax(0, 300px)); }

  /* ---- Markenmotiv rechts: Ring mit hellem Bogen ("Schulterblick") ----
     Rein per CSS gezeichnet, dekorativ, ohne Bilddatei. */
  .hero__deco {
    width: 780px; height: 780px;
    right: -240px; top: 50%; bottom: auto;
    transform: translateY(-50%);
    border-color: rgba(30, 242, 246, .13);
  }
  .hero__deco::before {
    inset: 118px;
    border-color: rgba(30, 242, 246, .09);
  }
  /* heller, auslaufender Bogen auf dem aeusseren Ring */
  .hero__deco::after {
    inset: 0;
    border: 0;
    transform: none;
    background: conic-gradient(from -85deg,
      rgba(30, 242, 246, 0) 0deg,
      rgba(30, 242, 246, .8) 38deg,
      rgba(30, 242, 246, .28) 78deg,
      rgba(30, 242, 246, 0) 132deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
            mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px));
  }
  .hero__deco-arc { display: block; position: absolute; inset: 0; border-radius: 50%; }
  /* weicher Lichtkern, gibt dem Motiv Tiefe */
  .hero__deco-arc::before {
    content: ""; position: absolute; inset: 118px; border-radius: 50%;
    background: radial-gradient(circle at 34% 30%,
      rgba(30, 242, 246, .12), rgba(30, 242, 246, 0) 62%);
  }
  /* Markierungspunkt am hellen Bogenende */
  .hero__deco-arc::after {
    content: ""; position: absolute;
    top: 14.6%; left: 14.6%; margin: -6px 0 0 -6px;
    width: 12px; height: 12px; border-radius: 50%;
    background: var(--c-accent);
    box-shadow: 0 0 0 7px rgba(30, 242, 246, .14);
  }
}

/* ---- 1024–1199 px: enger Desktop, Header-Buttons nur als Symbol ----
   Die Beschriftung bleibt fuer Screenreader erhalten. */
@media (min-width: 1024px) and (max-width: 1199px) {
  .header__contact .btn { padding: 9px 12px; }
  .header__contact .btn__label {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%); overflow: hidden; white-space: nowrap;
  }
}

/* ---- ab 1200 px: echtes Logo als Markenelement im Hero ----
   Der CSS-Ring weicht dem Logo. Eingebunden als Hintergrundbild, damit
   schmalere Geraete die Datei gar nicht erst laden.
   Die Breite waechst stufenlos von 270 px (1200 px Fenster) auf 360 px (ab 1400 px),
   damit das Logo weder Ueberschrift noch Chips noch Buttons beruehrt. */
@media (min-width: 1200px) {
  /* Erst hier sind die Karten breit genug fuer zwei Spalten */
  .kursbloecke { grid-template-columns: repeat(2, 1fr); align-items: start; }

  .hero__deco { display: none; }
  .hero__logo {
    display: block;
    position: absolute;
    top: 78px; right: 30px;
    width: clamp(270px, calc(45vw - 270px), 360px);
    aspect-ratio: 1;
    /* runder Ausschnitt exakt in Bildgroesse: keine sichtbare schwarze Kante */
    border-radius: 50%;
    background: #000 url("../images/logo/logo-800.webp") center / cover no-repeat;
    box-shadow: 0 0 120px 26px rgba(30, 242, 246, .07);
    pointer-events: none;
  }
}

@media (min-width: 1400px) {
  .hero__logo { right: 40px; }
}

/* ---- Bewegung reduzieren ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* ---- Druck ---- */
@media print {
  .contactbar, .nav-toggle, .nav, .map__bar, .hero__deco, .cta__deco { display: none !important; }
  body { padding-bottom: 0; color: #000; background: #fff; }
  .hero, .section--dark, .footer, .header { background: #fff !important; color: #000 !important; }
  .hero h1, .section--dark h2, .footer h3 { color: #000 !important; }
}

/* ==========================================================================
   9b · HERO-VIDEO (TEST vom 12.09.2026)
   --------------------------------------------------------------------------
   Bewusst als geschlossener Block ganz am Dateiende, damit der Test in einem
   Schritt zurueckgebaut werden kann:
   1. diesen Block ab "9b" bis zum Dateiende loeschen
   2. in index.html den Block HERO-VIDEO-TEST:START ... :END loeschen
   Sicherungskopien: _backup/hero-vor-video-2026-09-12/
   Es werden keine Farben, Abstaende oder Schriftgroessen des Heros geaendert.
   ========================================================================== */

/* Videoflaeche fuellt den bestehenden Hero, ohne seine Hoehe zu veraendern.
   Das Standbild liegt zusaetzlich als Hintergrund darunter: So ist die Flaeche
   sofort gefuellt und Mobilgeraete, die kein Video laden, sehen trotzdem ein Bild. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--c-ink) url("../images/hero/hero-video-poster.webp") center 42% / cover no-repeat;
}

.hero__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* etwas oberhalb der Mitte: Strasse und Fahrzeug bleiben im Bild,
     angeschnitten wird nur Himmel bzw. Armaturenbrett */
  object-position: center 42%;
  border: 0;
}

/* Dunkle Ebene ueber dem Video. Der Hero war vorher durchgehend --c-ink;
   die Ebene bleibt bewusst dicht, damit Ueberschrift, Chips und Buttons
   genauso gut lesbar sind wie ohne Video. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(11, 13, 14, .84) 0%,
    rgba(11, 13, 14, .76) 45%,
    rgba(11, 13, 14, .92) 100%);
}

/* Inhalt und Markenmotive liegen ueber dem Video.
   Die Reihenfolge Motiv ueber Text entspricht dem bisherigen Zustand. */
.hero .hero__inner { position: relative; z-index: 1; }
.hero .hero__deco,
.hero .hero__logo { z-index: 2; }

/* Ab Tablet laeuft der Text nicht mehr ueber die volle Breite.
   Links bleibt es dicht, rechts darf das Video staerker durchkommen. */
@media (min-width: 900px) {
  .hero__media::after {
    background:
      linear-gradient(96deg,
        rgba(11, 13, 14, .93) 0%,
        rgba(11, 13, 14, .86) 36%,
        rgba(11, 13, 14, .62) 74%,
        rgba(11, 13, 14, .70) 100%),
      linear-gradient(180deg,
        rgba(11, 13, 14, .30) 0%,
        rgba(11, 13, 14, 0) 34%,
        rgba(11, 13, 14, .42) 100%);
  }
}

/* Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt das Standbild.
   Das Video wird durch das media-Attribut der Quellen ohnehin nicht geladen. */
@media (prefers-reduced-motion: reduce) {
  .hero__video { display: none; }
}

/* Im Ausdruck bleibt der Hero weiss wie bisher. */
@media print {
  .hero__media { display: none !important; }
}