@import 'basis.css';

/* =====================================================================
   Halden & Co. — Immobilien am Zugersee
   Haltung: diskret, ortskundig, kompromisslos in der Vorbereitung.
   Paradigma: DAS BILD ZUERST, DIE ZAHL DANEBEN. Immobilien werden über
   das Auge verkauft und über die Zahl entschieden. Also: grossformatige
   Fotografie über die volle Breite, und direkt daneben eine nüchterne
   Datenspalte. Kein Kartenraster, keine Icons.
   ===================================================================== */

:root {
  --grund: oklch(0.155 0 0);
  --flaeche: oklch(0.205 0.002 90);
  --flaeche-2: oklch(0.26 0.003 90);
  --tinte: oklch(0.965 0.002 90);
  --leise: oklch(0.74 0.004 90);
  --linie: oklch(0.32 0.004 90);
  --akzent: oklch(0.83 0.065 84);
  --auf-akzent: oklch(0.2 0.02 84);
  --hell: oklch(0.965 0.004 84);
  --hell-tinte: oklch(0.2 0.008 84);

  --serif: 'Italiana', Georgia, serif;
  --grotesk: 'Jost', system-ui, sans-serif;
  --anzeige: 'Italiana', Georgia, serif;

  --mass: 82rem;
  --luft: clamp(3.5rem, 8vw, 7rem);
  --rand: clamp(1.25rem, 5vw, 3.5rem);
  --rundung: 0px;
  --weich: cubic-bezier(0.22, 1, 0.36, 1);
  --balken: oklch(0.1 0 0);
  --vorhang-grund: oklch(0.12 0 0);
  --vorhang-tinte: var(--tinte);
}

body {
  background: var(--grund);
  color: var(--tinte);
  font-family: var(--grotesk);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.28vw, 1.1rem);
  line-height: 1.72;
}

h1,
h2,
h3 {
  font-family: var(--anzeige);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: 0.005em;
}
h1 {
  font-size: clamp(2.8rem, 1.8rem + 4.6vw, 5.6rem);
}
h2 {
  font-size: clamp(2.1rem, 1.5rem + 2.6vw, 3.4rem);
}
h3 {
  font-family: var(--grotesk);
  font-weight: 500;
  font-size: clamp(1.1rem, 1.02rem + 0.5vw, 1.3rem);
  letter-spacing: 0.01em;
}

.marke {
  font-family: var(--anzeige);
  font-size: 1.3rem;
  letter-spacing: 0.04em;
  line-height: 1;
}
.marke small {
  margin-top: 0.35rem;
  font-family: var(--grotesk);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--akzent);
}

.merk {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--akzent);
}

/* ---------- Auftritt: ganzflächig, Text unten links ------------------ */

.auftritt {
  position: relative;
  isolation: isolate;
  min-height: min(92svh, 52rem);
  display: grid;
  align-items: end;
  padding-block: 6rem clamp(2.5rem, 6vw, 4.5rem);
  overflow: hidden;
}
.auftritt-bild {
  position: absolute;
  inset: -6% 0;
  z-index: -2;
}
.auftritt-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.auftritt::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    180deg,
    color-mix(in oklch, black 52%, transparent) 0%,
    color-mix(in oklch, black 26%, transparent) 22%,
    color-mix(in oklch, black 68%, transparent) 46%,
    color-mix(in oklch, black 88%, transparent) 70%,
    color-mix(in oklch, black 95%, transparent) 100%
  );
}
.auftritt h1 {
  max-width: 13ch;
  margin-top: 1.2rem;
}
.auftritt .lauf {
  max-width: 44ch;
  margin-top: 1.5rem;
  color: oklch(0.92 0.004 90);
}
.auftritt-tun {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------- Laufband mit Kennzahlen ---------------------------------- */

.leiste {
  display: grid;
  border-block: 1px solid var(--linie);
}
.leiste > div {
  padding: 1.1rem var(--rand);
  border-bottom: 1px solid var(--linie);
}
.leiste dt {
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--leise);
}
.leiste dd {
  margin: 0.4rem 0 0;
  font-family: var(--anzeige);
  font-size: 1.7rem;
  line-height: 1;
}

/* ---------- Objekt: Bild links, Daten rechts -------------------------- */

.objekte {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4.5rem);
}
.objekt {
  display: grid;
  gap: 1.5rem;
}
.objekt .bild {
  background: var(--flaeche);
}
.objekt .stand {
  display: inline-block;
  margin-bottom: 0.9rem;
  padding: 0.28rem 0.75rem;
  border: 1px solid var(--akzent);
  color: var(--akzent);
  font-size: 0.66rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.objekt .ort {
  color: var(--leise);
  font-size: 0.92rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.objekt h3 {
  font-family: var(--anzeige);
  font-weight: 400;
  font-size: clamp(1.7rem, 1.4rem + 1.4vw, 2.4rem);
  letter-spacing: 0.01em;
  margin-top: 0.4rem;
}
.objekt p {
  color: var(--leise);
  margin-top: 1rem;
  max-width: 52ch;
}
.daten {
  display: grid;
  margin: 1.4rem 0 0;
  border-top: 1px solid var(--linie);
}
.daten > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.93rem;
}
.daten dt {
  color: var(--leise);
  letter-spacing: 0.04em;
}
.daten dd {
  margin: 0;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.preis-gross {
  margin-top: 1.4rem;
  font-family: var(--anzeige);
  font-size: clamp(1.8rem, 1.5rem + 1.4vw, 2.6rem);
  line-height: 1;
  color: var(--akzent);
}

/* ---------- Heller Abschnitt ------------------------------------------ */

.hell {
  background: var(--hell);
  color: var(--hell-tinte);
  --tinte: var(--hell-tinte);
  --leise: oklch(0.44 0.01 84);
  --linie: oklch(0.86 0.008 84);
  --flaeche: oklch(0.93 0.006 84);
  --feld-grund: #fff;
  --feld-tinte: var(--hell-tinte);
}
.hell .merk {
  color: oklch(0.5 0.09 70);
}
.hell p {
  color: var(--leise);
}

/* ---------- Ablauf in Schritten --------------------------------------- */

.schritte {
  display: grid;
  gap: 0;
  margin-top: clamp(2rem, 5vw, 3rem);
  border-top: 1px solid var(--linie);
}
.schritt {
  display: grid;
  gap: 0.5rem;
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--linie);
}
.schritt .nr {
  font-family: var(--anzeige);
  font-size: 1.5rem;
  color: var(--akzent);
  line-height: 1;
}
.schritt p {
  margin: 0;
  color: var(--leise);
  max-width: 58ch;
}

/* ---------- Personen ---------------------------------------------------- */

.leute {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2rem, 5vw, 3rem);
}
.person .bild {
  background: var(--flaeche);
}
.person h3 {
  margin-top: 1.1rem;
  font-family: var(--anzeige);
  font-weight: 400;
  font-size: 1.55rem;
}
.person .rolle {
  margin-top: 0.3rem;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--akzent);
}
.person p {
  margin-top: 0.8rem;
  color: var(--leise);
  font-size: 0.95rem;
}

/* ---------- Karten ------------------------------------------------------- */

.karte {
  padding: clamp(1.5rem, 4vw, 2rem);
  border: 1px solid var(--linie);
  background: var(--flaeche);
}
.zeiten {
  display: grid;
  margin: 0.9rem 0 0;
}
.zeiten div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--linie);
  font-size: 0.93rem;
}
.zeiten div:last-child {
  border-bottom: 0;
}
.zeiten dd {
  margin: 0;
  color: var(--leise);
  text-align: right;
}

.seitenkopf {
  padding-block: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 4vw, 2.75rem);
  border-bottom: 1px solid var(--linie);
}
.seitenkopf p {
  max-width: 58ch;
  margin-top: 1.2rem;
  color: var(--leise);
  font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.15rem);
}
.brotkrume {
  margin-bottom: 1rem;
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--leise);
}
.brotkrume a {
  color: var(--akzent);
  text-decoration: none;
}
.satz {
  font-family: var(--anzeige);
  font-size: clamp(1.7rem, 1.3rem + 1.9vw, 2.7rem);
  line-height: 1.15;
  max-width: 24ch;
}

/* ---------- Pakete --------------------------------------------------------- */

.pakete {
  background: oklch(0.12 0 0);
  padding-bottom: clamp(2.5rem, 5vw, 3.5rem);
}
.pakete-kopf {
  max-width: 46rem;
}
.pakete-kopf p {
  margin-top: 1rem;
  color: var(--leise);
}
.paketreihe {
  display: grid;
  gap: 1px;
  margin-top: clamp(2rem, 5vw, 3rem);
  background: var(--linie);
  border: 1px solid var(--linie);
}
.paket {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 4vw, 2rem);
  background: oklch(0.155 0 0);
}
.paket[data-beliebt] {
  background: oklch(0.2 0.002 84);
}
.paket-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.paket h3 {
  font-family: var(--anzeige);
  font-weight: 400;
  font-size: 1.6rem;
}
.marke-beliebt {
  padding: 0.22rem 0.6rem;
  background: var(--akzent);
  color: var(--auf-akzent);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.paket .preis {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  margin: 1rem 0 0.4rem;
  font-family: var(--anzeige);
  font-size: clamp(2rem, 1.6rem + 1.5vw, 2.7rem);
  line-height: 1;
  color: var(--akzent);
}
.paket .preis span {
  font-family: var(--grotesk);
  font-size: 0.76rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
}
.paket > p {
  color: var(--leise);
  font-size: 0.93rem;
}
.paket ul {
  list-style: none;
  margin: 1rem 0 1.4rem;
  padding: 0;
  display: grid;
  gap: 0.5rem;
  font-size: 0.91rem;
  color: var(--leise);
}
.paket li {
  display: grid;
  grid-template-columns: 0.9rem 1fr;
  gap: 0.6rem;
}
.paket li::before {
  content: '';
  width: 0.9rem;
  height: 0.9rem;
  margin-top: 0.35rem;
  background: var(--akzent);
  clip-path: polygon(14% 46%, 6% 58%, 40% 90%, 96% 22%, 86% 12%, 39% 68%);
}
.paket .knopf {
  margin-top: auto;
  width: 100%;
}
.pakete-fuss {
  margin-top: 1.5rem;
  max-width: 60ch;
  font-size: 0.85rem;
  color: var(--leise);
}

.fuss {
  background: oklch(0.1 0 0);
  color: var(--leise);
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.6rem;
}
.fuss .marke {
  display: inline-flex;
  flex-direction: column;
  color: var(--tinte);
  margin-bottom: 0.9rem;
}
.fuss a:hover {
  color: var(--tinte);
}

@media (min-width: 46rem) {
  .leiste {
    grid-template-columns: repeat(4, 1fr);
  }
  .leiste > div {
    border-right: 1px solid var(--linie);
  }
  .leiste > div:last-child {
    border-right: 0;
  }
  .leute {
    grid-template-columns: repeat(3, 1fr);
  }
  .paketreihe {
    grid-template-columns: repeat(3, 1fr);
  }
  .schritt {
    grid-template-columns: 4rem 1fr;
    gap: 2rem;
    align-items: baseline;
  }
  .schritt .nr {
    grid-row: 1 / span 2;
  }
}

@media (min-width: 62rem) {
  .objekt {
    grid-template-columns: 1.45fr 1fr;
    gap: 3rem;
    align-items: center;
  }
  .objekt:nth-child(even) {
    grid-template-columns: 1fr 1.45fr;
  }
  .objekt:nth-child(even) .bild {
    order: 2;
  }
}

/* Kontaktseite: Formular links, Angaben rechts. */
@media (min-width: 62rem) {
  .kontaktraster {
    grid-template-columns: 1.15fr 0.85fr;
  }
}


/* =====================================================================
   Feinschliff — ui-ux-pro-max (Kontrast) + impeccable (Craft)
   Gemessene Werte und Begründung: _SKILLS-ANGEWENDET.md
   Feldrand   1.55:1 → 3.20:1  (WCAG 1.4.11, Bedienelement-Rand ≥3:1)
   Platzhalter          → 8.52:1  (WCAG 1.4.3, Fliesstext ≥4.5:1)
   Akzent als Text 11.51:1 → 11.51:1
   Knopfbeschriftung 10.69:1 → 10.69:1
   ===================================================================== */
:root {
  --feld-linie: oklch(0.495 0.012 90);
  --platzhalter: oklch(0.740 0.004 90);
  --akzent-text: var(--akzent);
}

/* Ein Formularfeld muss man sehen, bevor man hineinklickt. */
.feld input,
.feld select,
.feld textarea {
  border-color: var(--feld-linie);
}
.feld input::placeholder,
.feld textarea::placeholder {
  color: var(--platzhalter);
  opacity: 1;
}
.feld > label {
  font-size: 0.9rem;
}

/* Sichtbarer Fokus auf allem, was man bedienen kann. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 2px;
}

/* Kein Inhalt darf auf ein Skript warten, um sichtbar zu werden. */
@media (prefers-reduced-motion: reduce) {
  [data-auftritt],
  [data-auftritt] > *,
  [data-schnitt] {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
}


/* ---------------------------------------------------------------------
   Gemessene Einzelkorrekturen. Jede Textfarbe dieser Demo wurde auf
   allen fünf Seiten gegen ihren tatsächlichen Hintergrund gerechnet
   (`_kontrast.html`); diese Paare lagen unter der Schwelle. Der neue
   Wert ist der kleinste, der sie erreicht — die Farbe bleibt also so
   nah am Original wie möglich.
   --------------------------------------------------------------------- */
.hell .nr {
  color: #9a8a6a; /* vorher 1.53:1 */
}


/* =====================================================================
   Auftritt als Kamerafahrt.
   Die Blende öffnet sich, die Zeile wird von unten freigewischt, das
   Schild läuft ein. GRUNDZUSTAND HIER IST: alles offen, alles sichtbar.
   Das Skript schliesst die Blende erst, wenn ein echter Frame lief —
   ohne JavaScript, im Druck und in Vorschaudiensten steht der Auftritt
   vollständig da.
   ===================================================================== */

.fahrt {
  position: relative;
  background: var(--grund);
}
.fahrt-buehne {
  position: relative;
  min-height: 100svh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}
.fahrt-blende {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  clip-path: inset(0% 0 0% 0);
}
.fahrt-blende img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: 50% 58%;
}
.fahrt-buehne::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      color-mix(in oklch, black 34%, transparent) 0%,
      transparent 18%,
      transparent 42%,
      color-mix(in oklch, black 46%, transparent) 68%,
      color-mix(in oklch, black 78%, transparent) 100%
    ),
    radial-gradient(130% 95% at 50% 34%, transparent 58%, color-mix(in oklch, black 30%, transparent) 100%);
}

/* ---- Schild: was man sieht, benannt wie im Abspann ------------------- */
.fahrt-schild {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.4rem 1.5rem;
  margin: 0;
  padding: clamp(1.1rem, 3vw, 1.9rem) var(--rand) 0;
  font-family: var(--grotesk);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: color-mix(in oklch, var(--tinte) 78%, transparent);
}
.fahrt-schild-obj {
  color: var(--akzent);
}

/* ---- Satz ------------------------------------------------------------ */
/* Der Satz bringt seine Abdunklung selbst mit — nicht die ganze Fläche.
   Global abdunkeln hiesse das Foto ersaufen lassen (das war der erste
   Fehler); gar nicht abdunkeln hiesse, die dünnen Italiana-Haarstriche
   auf dem beleuchteten Dach verschwinden zu lassen (der zweite). Also
   ein Scrim, der genau dort liegt, wo Text steht, und nach oben weich
   ausläuft. */
.fahrt-satz::before {
  content: '';
  position: absolute;
  inset: -3rem -50vw -4rem;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    transparent 0%,
    color-mix(in oklch, black 34%, transparent) 20%,
    color-mix(in oklch, black 56%, transparent) 52%,
    color-mix(in oklch, black 62%, transparent) 100%
  );
}
.fahrt-satz {
  position: relative;
  z-index: 2;
  align-self: end;
  width: 100%;
  max-width: var(--mass);
  margin-inline: auto;
  padding: 0 var(--rand);
}
.fahrt-satz h1 {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2.4rem, 1.5rem + 4.4vw, 7rem);
  line-height: 0.94;
  letter-spacing: -0.01em;
}
.fahrt-satz h1 .zeile {
  display: block;
  clip-path: inset(0 0 0% 0);
}
.fahrt-lauf {
  max-width: 40ch;
  margin: clamp(1.1rem, 2.5vw, 1.7rem) 0 0;
  font-size: clamp(1rem, 0.95rem + 0.35vw, 1.18rem);
  line-height: 1.55;
  color: oklch(0.93 0.004 90);
  text-wrap: pretty;
}
.fahrt-knopf {
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
  /* Gleicher Shrink-to-fit-Effekt wie bei der Sprungmarke: ein
     inline-flex-Element rechnet seine Wunschbreite zu klein und bricht
     um, obwohl daneben 400 px frei sind. */
  white-space: nowrap;
}

/* ---- Kennzahlen: das Filmschild unten -------------------------------- */
.fahrt-daten {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin: clamp(2rem, 5vw, 3.4rem) 0 0;
  padding: 0;
  background: color-mix(in oklch, var(--tinte) 16%, transparent);
  border-top: 1px solid color-mix(in oklch, var(--tinte) 16%, transparent);
}
.fahrt-daten > div {
  padding: clamp(0.9rem, 2.2vw, 1.3rem) var(--rand);
  background: color-mix(in oklch, black 52%, transparent);
  backdrop-filter: blur(3px);
}
.fahrt-daten dt {
  font-family: var(--grotesk);
  font-size: 0.78rem;
  letter-spacing: 0.03em;
  color: var(--leise);
}
.fahrt-daten dd {
  margin: 0.3rem 0 0;
  font-family: var(--anzeige);
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--tinte);
}

/* ---- Laufspur am linken Rand ----------------------------------------- */
.fahrt-spur {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  z-index: 3;
  background: color-mix(in oklch, var(--tinte) 12%, transparent);
}
.fahrt-spur i {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 0;
  background: var(--akzent);
}

@media (min-width: 46rem) {
  .fahrt-daten {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Ab hier klebt die Bühne und der Scroll wird zur Kamera. Darunter
   bleibt der Auftritt ein gewöhnlicher, ruhiger Abschnitt: auf dem
   Handy kämpft eine klebende Bühne gegen den Schwung des Fingers. */
@media (min-width: 62rem) {
  .fahrt[data-fahrt='an'] {
    height: 178svh;
  }
  .fahrt[data-fahrt='an'] .fahrt-buehne {
    position: sticky;
    top: 0;
    height: 100svh;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fahrt[data-fahrt='an'] {
    height: auto;
  }
  .fahrt[data-fahrt='an'] .fahrt-buehne {
    position: relative;
    height: auto;
  }
  .fahrt-blende {
    clip-path: none;
  }
  .fahrt-satz h1 .zeile {
    clip-path: none;
  }
}

/* Niedriges Fenster (Laptop im Querformat, Handy quer): der Auftritt
   muss ganz hineinpassen — sonst schneidet die Bühne den Knopf und das
   Kennzahlen-Schild ab. Gemessen bei 909×540. */
@media (max-height: 46rem) {
  .fahrt-schild {
    padding-top: 0.8rem;
  }
  .fahrt-satz h1 {
    font-size: clamp(2.1rem, 1.3rem + 3.2vw, 3.4rem);
  }
  .fahrt-lauf {
    margin-top: 0.85rem;
    font-size: 1rem;
  }
  .fahrt-knopf {
    margin-top: 1rem;
  }
  .fahrt-daten {
    margin-top: 1.4rem;
  }
  .fahrt-daten > div {
    padding-block: 0.7rem;
  }
  .fahrt-daten dd {
    font-size: 1.3rem;
  }
  .fahrt-daten dt {
    font-size: 0.72rem;
  }
}

/* Unterhalb von 62rem klebt die Bühne nicht — sie muss also von sich aus
   in den sichtbaren Bereich passen. Über ihr stehen der Rückbalken und
   der Kopf (zusammen rund 7 rem), unter ihr die feste Handleiste. Beides
   muss von der Bühnenhöhe abgezogen werden, sonst liegt das Kennzahlen-
   Schild unter dem Falz und der Knopf hinter der Leiste.
   `--chrome-oben` misst `grund.js` nach; der Wert hier trägt allein,
   falls kein Skript läuft. */
@media (max-width: 61.99rem) {
  .fahrt-buehne {
    min-height: calc(100svh - var(--chrome-oben, 7rem));
    padding-bottom: calc(4.3rem + env(safe-area-inset-bottom));
  }
  /* Die Laufspur gehört zur Scrollkamera. Ohne sie ist sie nur ein
     Strich ohne Aufgabe. */
  .fahrt-spur {
    display: none;
  }
}


/* ---------- Navigation auf schmalen Schirmen --------------------------
   Kein Hamburger: die Abschnitte stehen als eigene Zeile unter der Marke,
   immer sichtbar und immer klickbar. Fünf Links hinter zwei Klicks zu
   verstecken kostet Aufrufe der Unterseiten.

   Diese Regeln stehen bewusst in stil.css: sie wird nach basis.css
   geladen und hat damit das letzte Wort.
   ---------------------------------------------------------------------- */
@media (max-width: 55.99rem) {
  .kopf-in {
    flex-wrap: wrap;
    row-gap: 0;
  }
  .menue {
    display: flex;
    order: 3;
    width: 100%;
    gap: 0.15rem;
    margin: 0 calc(var(--rand, 1.25rem) * -1);
    padding: 0 var(--rand, 1.25rem);
    overflow-x: auto;
    scrollbar-width: none;
    border-top: 1px solid var(--linie, rgba(128, 128, 128, 0.25));
  }
  .menue::-webkit-scrollbar {
    display: none;
  }
  .menue a {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
    padding: 0 0.7rem;
    font-family: var(--grotesk, system-ui, sans-serif);
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--leise, currentColor);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    opacity: 1;
  }
  .menue a:first-child {
    padding-left: 0;
  }
  .menue a[aria-current='page'] {
    color: var(--akzent, currentColor);
    font-weight: 600;
    border-bottom-color: currentColor;
  }
}


/* ---------- Wegweiser zwischen den Abschnitten --------------------------- */
/* Eine kurze Linie mit Spitze, die sich zeichnet, wenn die Grenze zwischen
   zwei Abschnitten in Sicht kommt. Sie sitzt in einem Kasten ohne eigene
   Höhe, mitten auf der Grenze — die Seite verschiebt sich dadurch nicht.
   Der Kasten steht nicht im HTML; wegweiser.js baut ihn. */

.wegweiser {
  position: relative;   /* eigener Bezug, damit kein Abschnitt umgestellt wird */
  height: 0;
  width: 100%;
  pointer-events: none;
  z-index: 2;
}
.wegweiser svg {
  position: absolute;
  left: 50%;
  top: 0;
  translate: -50% -50%;
  display: block;
  overflow: visible;
}
.wegweiser-linie {
  stroke: var(--weg-ton, currentColor);
  stroke-width: 1.4;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.05s cubic-bezier(.22, .61, .36, 1);
}
.wegweiser-spitze {
  stroke: var(--weg-ton, currentColor);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  translate: 0 -5px;
  transition: opacity 0.4s ease-out 0.75s, translate 0.5s cubic-bezier(.22, .61, .36, 1) 0.75s;
}
.wegweiser[data-an] .wegweiser-linie { stroke-dashoffset: 0 !important; }
.wegweiser[data-an] .wegweiser-spitze { opacity: 1; translate: 0 0; }

/* Die Naht ist gestrichelt — dafür zeichnet nicht der Strich, sondern die
   Deckkraft, sonst frisst die Strichelung den dashoffset. */
.wegweiser[data-art="naht"] .wegweiser-linie {
  stroke-dasharray: 5 4 !important;
  stroke-dashoffset: 0 !important;
  opacity: 0;
  transition: opacity 0.8s ease-out;
}
.wegweiser[data-art="naht"][data-an] .wegweiser-linie { opacity: 1; }

@media (max-width: 45.99rem) { .wegweiser svg { width: 18px; height: 52px; } }


/* ---------- Gezeichneter Rahmen und antwortende Zeilen ------------------- */
/* Beim Überfahren zeichnet sich ein Rahmen: erst laufen die waagrechten
   Linien aus der Mitte nach aussen, dann wachsen die senkrechten dazu. Zwei
   Pseudoelemente, kein SVG. Der Rahmen liegt 5 px ausserhalb und fängt
   keine Zeiger ab — das Trefferfeld bleibt, wie es war. */

.knopf { position: relative; }
.knopf::before,
.knopf::after {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 7px;
  pointer-events: none;
  border: 1.5px solid transparent;
}
.knopf::before {
  border-top-color: var(--akzent);
  border-bottom-color: var(--akzent);
  transform: scaleX(0);
  transition: transform 0.26s cubic-bezier(.22, .61, .36, 1);
}
.knopf::after {
  border-left-color: var(--akzent);
  border-right-color: var(--akzent);
  transform: scaleY(0);
  transition: transform 0.26s cubic-bezier(.22, .61, .36, 1) 0.14s;
}
.knopf:hover::before, .knopf:focus-visible::before { transform: scaleX(1); }
.knopf:hover::after,  .knopf:focus-visible::after  { transform: scaleY(1); }

/* Die Zeilen der Preiskarte antworten nacheinander, nicht alle zugleich —
   45 ms Abstand liest sich als Bewegung, gleichzeitig wäre es ein Ruck. */
.paket li { transition: transform 0.34s cubic-bezier(.22, .61, .36, 1); }
.paket:hover li { transform: translateX(4px); }
.paket:hover li:nth-child(1) { transition-delay: 0s; }
.paket:hover li:nth-child(2) { transition-delay: 0.045s; }
.paket:hover li:nth-child(3) { transition-delay: 0.09s; }
.paket:hover li:nth-child(4) { transition-delay: 0.135s; }
.paket:hover li:nth-child(5) { transition-delay: 0.18s; }

@media (prefers-reduced-motion: reduce) {
  .knopf::before, .knopf::after { display: none; }
  .paket li, .paket:hover li { transform: none; transition: none; }
}