/* Blatt 1: eine Buehne ab Seitenanfang (Titel, Drehen an Halt 0, Scroll-Explosion), danach Bestand, Ankauf, Kontakt.
   Text links auf Papier, Tafel rechts ab 564 px (Titel 72 + 460 + 32) */

/* Hoehe = Zeitleiste (Einheiten aus strecke.js) x 60svh + eine Bildschirmhoehe fuer die fixierte Buehne
   + eine, in der Blatt 2 sich ueber die stehende Buehne schiebt (Blattwechsel, blaetter.css).
   svh statt vh: iOS rechnet vh beim Ein- und Ausblenden der Adressleiste neu, die Strecke wuerde springen.
   Ueber --svh (stil.css): Brave/iOS rechnet auch svh neu, dort friert index.html den Wert in px ein */
.strecke { position: relative; height: calc(var(--einheiten, 13) * 60 * var(--svh) + 200 * var(--svh)); }
.strecke .ballon { cursor: pointer; }
.buehne { position: sticky; top: 0; height: calc(100 * var(--svh)); display: grid; grid-template-columns: 564px 1fr; }
.tafel { position: relative; grid-area: 1 / 2; margin: 16px 16px 16px 0; background: var(--papier); overflow: hidden; }
.tafel canvas, .tafel svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tafel svg { z-index: 2; }

.seite-text { grid-area: 1 / 1; display: flex; flex-direction: column; padding: 104px 48px 56px 72px; min-height: 0; min-width: 0; }
.karten { position: relative; flex: 1; }
.karte { position: absolute; left: 0; right: 0; top: 50%; max-width: 440px; opacity: 0; visibility: hidden; transform: translateY(calc(-50% + 16px));
  transition: opacity .2s ease, transform .3s cubic-bezier(.2, .7, .2, 1), visibility 0s .3s; }
/* Einfuehrung nur mobil: am Desktop steht an Halt 0 der Titel in der linken Spalte */
.karte.nur-mobil { display: none; }
.seite-text > .kicker { transition: opacity .2s ease; }
.strecke.titelkarte .seite-text > .kicker { opacity: 0; }
.karte.an { opacity: 1; visibility: visible; transform: translateY(-50%); transition-delay: .06s, .06s, 0s; }
.karte .pos { font: 600 var(--t-label) var(--schrift); letter-spacing: .2em; text-transform: uppercase; color: var(--text-2); margin-bottom: 16px; }
.karte h2 { font: 400 var(--t-titel)/.92 var(--titel); text-transform: uppercase; }
.karte h3 { font: 400 var(--t-titel)/.95 var(--titel); text-transform: uppercase; letter-spacing: .01em; text-wrap: balance; }
.karte > p:not(.pos) { margin-top: 20px; font: 400 var(--t-text)/1.5 var(--schrift); color: var(--text-2); max-width: 38ch; text-wrap: pretty; }

/* Kennwerte wie Felder im Schriftfeld: kleine Bezeichnung oben, Wert darunter */
.daten { display: grid; grid-template-columns: repeat(3, auto); margin-top: 28px; border-top: 1px solid var(--tabelle-linie); }
.daten > div { padding: 12px 16px 0 0; }
.daten > div + div { padding-left: 16px; border-left: 1px solid var(--tabelle-linie); }
.daten dt { font: 600 var(--t-label) var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.daten dd { margin-top: 6px; font: 400 var(--t-ui) var(--zahl); }
.daten .preis { font-weight: 700; font-size: var(--t-zahl); line-height: 1; }

/* Positionsleiste = Stueckliste zum Anklicken: Name und Preis immer sichtbar, aktive Zeile fuellt sich mit dem Zerlegen (--p) */
/* Halt 0 zeigt nur Titel, Zeichnung und einen Knopf: die Stueckliste kommt mit der ersten Position */
.positionen { margin-top: 24px; transition: opacity .3s ease, visibility 0s; }
.strecke.titelkarte .positionen { opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s; }
.bedienung { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 8px; border-bottom: 2px solid var(--text);
  font: 600 var(--t-label) var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.bedienung span:first-child::before { content: ''; display: inline-block; width: 7px; height: 7px; margin: 0 8px 1px 0; vertical-align: middle;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-2px, -2px); animation: tippen 1.6s ease-in-out infinite; }
@keyframes tippen { 50% { transform: rotate(45deg) translate(1px, 1px); } }
.positionen ol { list-style: none; padding: 0; }
.positionen button { position: relative; display: grid; grid-template-columns: 40px 1fr auto; align-items: center; width: 100%; height: 30px; padding: 0 8px 0 0;
  border: 0; border-bottom: 1px solid var(--tabelle-linie); background: transparent; color: var(--text-2); cursor: pointer; text-align: left;
  font: 500 var(--t-ui) var(--schrift); transition: color .15s ease, background-color .15s ease; isolation: isolate; }
.positionen button::before { content: ''; position: absolute; inset: 0; transform-origin: left; transform: scaleX(0); }
.positionen .nr { font: 700 var(--t-label) var(--zahl); letter-spacing: .06em; text-align: center; }
.positionen .ab { font: 400 var(--t-ui) var(--zahl); }
.positionen button:hover { color: var(--text); background: rgba(20, 23, 27, .04); }
/* Pfeil je Zeile: zeigt, dass die Zeile ein Sprungziel ist, nicht nur Inhaltsverzeichnis */
.positionen .ab::after { content: ''; display: inline-block; width: 6px; height: 6px; margin: 0 2px 2px 12px; vertical-align: middle;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: rotate(45deg); opacity: .45; transition: transform .15s ease, opacity .15s ease; }
.positionen button:hover .ab::after { opacity: 1; transform: translateX(3px) rotate(45deg); }
.positionen button[aria-current] .ab::after { opacity: 1; }
/* Erledigt: Haken statt Nummer, Text wieder voll */
.positionen button.erledigt { color: var(--text); }
.positionen button.erledigt .nr { color: transparent; position: relative; }
.positionen button.erledigt .nr::after { content: ''; position: absolute; left: 50%; top: 50%; width: 5px; height: 10px; margin: -7px 0 0 -3px;
  border-right: 2px solid var(--text); border-bottom: 2px solid var(--text); transform: rotate(45deg); }
/* Aktiv: voll orange mit weisser Schrift, die helle Linie unten laeuft mit dem Zerlegen mit */
.positionen button[aria-current] { color: var(--auf-farbe); font-weight: 600; background: var(--markierung); border-bottom-color: var(--markierung); }
.positionen button[aria-current]::before { z-index: 0; top: auto; height: 2px; background: rgba(20, 23, 27, .6); transform: scaleX(var(--p, 0)); }
.positionen button[aria-current] .ab { font-weight: 700; }
.positionen button:focus-visible, .lager a:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* Werkstattauftrag (Halt 12): Symptome ankreuzen, Kilometer schieben, die Stueckliste wird zum Zettel.
   Gewaehlt = orange wie das Teil in der Zeichnung; Hover zieht nur den Rand an (Kladde-Muster) */
.symptome { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.symptome button { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; border: 1px solid var(--tabelle-linie); background: transparent;
  color: var(--text-2); font: 500 var(--t-ui) var(--schrift); cursor: pointer; transition: border-color .15s ease, color .15s ease, background-color .15s ease; }
.symptome button::before { content: ''; width: 10px; height: 10px; border: 1.5px solid currentColor; flex-shrink: 0; }
.symptome button:hover { border-color: var(--text); color: var(--text); }
.symptome button[aria-pressed="true"] { border-color: var(--markierung); color: var(--auf-farbe); background: var(--markierung); }
.symptome button[aria-pressed="true"]::before { border-color: var(--auf-farbe); background: var(--auf-farbe);
  box-shadow: inset 0 0 0 2px var(--markierung); }
.symptome button:active { transform: translateY(1px); }
.km { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 24px;
  font: 600 var(--t-label) var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.km output { font: 700 var(--t-ui) var(--zahl); letter-spacing: 0; color: var(--text); text-transform: none; white-space: nowrap; }
#km { width: 100%; margin-top: 8px; accent-color: var(--markierung); cursor: pointer; }
.symptome button:focus-visible, #km:focus-visible, .auftrag-fuss .knopf:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

.nur-auftrag, .auftrag-fuss { display: none; }
.strecke.auftrag .nur-tour { display: none; } .strecke.auftrag .nur-auftrag { display: inline; }
.strecke.auftrag .auftrag-fuss { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 12px; }
.auftrag-summe { font: 400 var(--t-ui)/1.4 var(--schrift); color: var(--text-2); }
.auftrag-summe span { color: var(--text); font-weight: 600; }
.auftrag-summe b { font: 700 var(--t-zahl) var(--zahl); }
.auftrag-fuss .knopf { flex-shrink: 0; cursor: pointer; }
.auftrag-fuss .knopf[aria-disabled="true"] { opacity: .35; pointer-events: none; }
.strecke.auftrag .positionen button.gewaehlt { color: var(--auf-farbe); font-weight: 600; background: var(--markierung); border-bottom-color: rgba(20, 23, 27, .25); }
.strecke.auftrag .positionen button.gewaehlt .ab { font-weight: 700; }
.strecke.auftrag .positionen .ab::after { display: none; }
/* Teil unter dem Zeiger ist antippbar */
.strecke.auftrag .tafel.zeigt { cursor: pointer; }

.fuss { padding: 32px 72px 48px; border-top: 1px solid var(--tabelle-linie); font: 400 var(--t-ui)/1.6 var(--schrift); color: var(--text-2); }
.fuss a { color: var(--text-2); }
.fuss .lizenz { margin-top: 8px; font-size: var(--t-label); }

@media (max-width: 1099px) { .buehne { grid-template-columns: 44% 1fr; } .seite-text { padding-left: 48px; } }
/* Laptop-Hoehen: Stueckliste enger, damit die Karte darueber Platz behaelt */
@media (min-width: 800px) and (max-height: 860px) {
  .seite-text { padding-top: 88px; padding-bottom: 32px; } .positionen button { height: 26px; } .positionen { margin-top: 16px; }
  .karte > p:not(.pos) { margin-top: 14px; } .daten { margin-top: 18px; }
}
@media (max-width: 799px) {
  /* Tafel oben, Karte darunter. Kein festes 60/40: mit Safari-Leisten (393x659) waren alle Karten hoeher als ihr
     Bereich und liefen ueber den Kicker. Jetzt ist der Textbereich so hoch wie die hoechste Karte (strecke.js misst) */
  .buehne { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .karten { flex: none; height: var(--karten-h, calc(40 * var(--svh))); margin-top: 4px; }
  .karte { top: 0; transform: translateY(16px); } .karte.an { transform: none; }
  .tafel { grid-area: 1 / 1; margin: 0; }
  .seite-text { grid-area: 2 / 1; padding: 16px 28px 16px; }
  .seite-text > .kicker { margin-bottom: 0; }
  .karte.nur-mobil { display: block; } .strecke.titelkarte .seite-text > .kicker { opacity: 1; }
  .karte .pos { margin-bottom: 8px; }
  .karte > p:not(.pos) { margin-top: 10px; line-height: 1.45; }
  .karte .aktion { margin-top: 16px; }
  .daten { margin-top: 12px; } .daten > div { padding-top: 8px; }
  /* Mobil: waagerechte Chip-Leiste mit Namen, aktive Position scrollt strecke.js in die Mitte */
  .positionen { margin: 8px -28px 0; } .bedienung { margin: 0 28px; padding-bottom: 6px; border-bottom-width: 1px; }
  .positionen ol { position: relative; display: flex; gap: 6px; overflow-x: auto; padding: 8px 28px 2px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .positionen ol::-webkit-scrollbar { display: none; }
  /* Rand blendet aus = sichtbar mehr Positionen; Abstandshalter, weil Chrome das Innenpolster rechts beim Scrollen ignoriert */
  .positionen ol { mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent); }
  .positionen ol::after { content: ''; flex: 0 0 22px; }
  .positionen li { flex-shrink: 0; }
  .positionen button { display: flex; gap: 6px; width: auto; height: 32px; padding: 0 12px 0 10px; border: 1px solid var(--tabelle-linie); white-space: nowrap; overflow: hidden; }
  .positionen .nr { text-align: left; } .positionen .ab { display: none; }
  .positionen button[aria-current] { border-color: var(--markierung); }
  .strecke.auftrag .positionen button.gewaehlt { border-color: var(--markierung); }
  /* Mobil: Symptome als waagerechte Leiste wie die Positionen, Summe und Knopf untereinander knapp */
  .symptome { flex-wrap: nowrap; overflow-x: auto; margin: 12px -28px 0; padding: 0 28px 2px; scrollbar-width: none; }
  .symptome::-webkit-scrollbar { display: none; } .symptome button { flex-shrink: 0; white-space: nowrap; }
  /* Rand blendet aus wie bei den Positionen: zeigt, dass es seitlich weitergeht */
  .symptome { mask-image: linear-gradient(90deg, transparent, #000 24px, #000 calc(100% - 40px), transparent); }
  .symptome::after { content: ''; flex: 0 0 22px; }
  .km { margin-top: 12px; } #km { margin-top: 4px; }
  /* Auftrag mobil: die Karte nennt sich selbst ('Werkstattauftrag'), der Blatt-Kicker darueber macht nur Platz streitig */
  .strecke.auftrag .seite-text > .kicker { display: none; }
  .strecke.auftrag .auftrag-fuss { margin: 0 28px; padding-top: 8px; }
  .auftrag-fuss .knopf { padding: 10px 14px; }

  .fuss { padding: 28px 28px 40px; }
}
@media (prefers-reduced-motion: reduce) { .karte { transition: none; transform: translateY(-50%); } }
@media (prefers-reduced-motion: reduce) and (max-width: 799px) { .karte { transform: none; } }
/* Kurze Handys (Safari-Leisten, iPhone SE ~548 px sichtbar): Karten knapper setzen, sonst bleibt fuer die Tafel nichts */
@media (max-width: 799px) and (max-height: 700px) {
  .strecke .seite-text { --t-titel: 22px; --t-text: 14px; padding-top: 12px; padding-bottom: 10px; }
  .karte .pos { margin-bottom: 4px; } .karte > p:not(.pos) { margin-top: 6px; line-height: 1.4; }
  .daten { margin-top: 8px; } .daten > div { padding-top: 6px; }
}
/* iPhone SE mit Safari (~548 px): Dreh-Hinweis raus, die Einfuehrungskarte nennt die Schritte; gibt dem Motorrad 32 px */
@media (max-width: 799px) and (max-height: 600px) { .strecke .dreh-hinweis { display: none; } }

/* Demo-Hinweis zur Landingpage (Pflicht bei allen Konzept-Demos). Graphit wie das Schriftfeld, Gelb = Markierung */
.demo-pill {
  position: fixed; left: 16px; bottom: 16px; z-index: 20; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 999px; background: rgba(20, 23, 27, .92); color: #f3f1ec;
  font: 600 12px/1.3 var(--schrift); text-decoration: none; box-shadow: 0 4px 16px rgba(20, 23, 27, .18);
  transition: transform 200ms cubic-bezier(.23, 1, .32, 1), opacity 200ms ease;
}
.demo-pill:hover { transform: translateY(-2px); }
.demo-pill:active { transform: scale(.97); }
.demo-pill-punkt { width: 8px; height: 8px; border-radius: 50%; background: var(--markierung); flex: none; }
@media (max-width: 799px) { .demo-pill { left: 12px; bottom: 12px; font-size: 11px; padding: 8px 12px; } }
/* Nur am Seitenanfang: weiter unten laege die Pill auf Auftragsleiste und Knoepfen (gemessen 02.10.), der Footer verlinkt dann */
.demo-pill.weg { opacity: 0; transform: translateY(8px); pointer-events: none; }
.pill-kurz { display: none; }
@media (max-width: 799px) { .pill-lang { display: none; } .pill-kurz { display: inline; } }
/* Auch fuer Tastatur und Vorleser weg, sobald unsichtbar; visibility erst nach dem Ausblenden umschalten */
.demo-pill { transition: transform 200ms cubic-bezier(.23, 1, .32, 1), opacity 200ms ease, visibility 0s linear 0s; }
.demo-pill.weg { visibility: hidden; transition: transform 200ms cubic-bezier(.23, 1, .32, 1), opacity 200ms ease, visibility 0s linear 200ms; }