/* Ankauf und Kontakt: Gegenstaende statt Blaetter (Marlon 29.09.: 'zu viel Blaupause, genau die Wiederholung, die ich
   nicht will'). Kein Blau, kein Schriftfeld, keine Zonen: Handy, Emaille-Schild und Roadbook liegen auf dem Papier */
.gegenstand { position: relative; display: grid; grid-template-columns: 564px minmax(0, 1fr); min-height: calc(100 * var(--svh)); background: var(--seite); }
/* Ein Rahmen fuer die ganze Seite (Richtung A, 29.09.): rechts liegt ueberall dieselbe Tafel wie in Werkstatt und Bestand,
   gleiche Kante, gleiche Kopfzeile. Keine Zonen, kein Schriftfeld: die Gegenstaende liegen nur darauf */
.buehne-handy, .buehne-anfahrt { position: relative; margin: 16px 16px 16px 0; background: var(--papier);
  --text: var(--linie); --text-2: var(--linie-2); --seite: var(--papier); color: var(--text); }
:where(.buehne-handy, .buehne-anfahrt) > * { position: relative; z-index: 2; }
:where(.buehne-handy, .buehne-anfahrt) > .tafel-kopf { position: absolute; }
.knopf[aria-disabled="true"] { opacity: .35; pointer-events: none; }

/* Ankauf: Umschalter ueber dem Handy */
.buehne-handy { display: grid; justify-items: center; align-content: center; gap: 24px; padding: 112px 48px 72px; }
.umschalter { display: inline-flex; border: 1.5px solid var(--text); }
.umschalter button { padding: 10px 18px; border: 0; background: transparent; color: var(--text); cursor: pointer;
  font: 600 var(--t-label) var(--schrift); letter-spacing: .12em; text-transform: uppercase; transition: background-color .2s ease, color .2s ease; }
.umschalter button[aria-pressed="true"] { background: var(--text); color: var(--seite); }
.umschalter button[data-weg="kurvenwerk"][aria-pressed="true"] { background: var(--markierung); color: var(--auf-farbe); }
.umschalter button:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }
/* Nach sechs Nachrichten ohne Reaktion stupst der andere Weg an */
.umschalter .stupser { animation: stupsen 1.6s ease-in-out infinite; }
@keyframes stupsen { 50% { color: var(--akzent); box-shadow: inset 0 0 0 2px var(--akzent); } }

.handy { width: 310px; aspect-ratio: 330 / 690; padding: 11px; border-radius: 52px;
  background: linear-gradient(145deg, #2b2f36, #0f1114 40%, #1b1e23);
  box-shadow: 0 50px 90px -40px rgba(20, 23, 27, .55), 0 18px 30px -18px rgba(20, 23, 27, .35), inset 0 0 0 1.5px #3a3f47; }
.schirm { position: relative; height: 100%; border-radius: 42px; overflow: hidden; background: #f2f2f4; color: #111;
  font: 400 14px/1.35 system-ui, -apple-system, sans-serif; }
.schirm::after { content: ''; position: absolute; z-index: 3; left: 50%; bottom: 8px; width: 34%; height: 5px; border-radius: 3px; background: #111; translate: -50% 0; }
.statusleiste { display: flex; justify-content: space-between; align-items: center; height: 48px; padding: 0 28px 0 34px; font-weight: 600; }
.insel { width: 96px; height: 28px; border-radius: 20px; background: #000; }
.akku { position: relative; width: 24px; height: 11px; border: 1.5px solid #111; border-radius: 3px; }
.akku::after { content: ''; position: absolute; inset: 1.5px 5px 1.5px 1.5px; background: #111; border-radius: 1px; }
.app { position: absolute; inset: 48px 0 0; display: none; flex-direction: column; }
.buehne-handy[data-weg="inserat"] .app.inserat, .buehne-handy[data-weg="kurvenwerk"] .app.chat { display: flex; }

.inserat-kopf { padding: 6px 18px 14px; background: #fff; border-bottom: 1px solid #e3e3e8; }
.app-titel { font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.anzeige { display: flex; gap: 12px; align-items: center; margin-top: 12px; }
.anzeige .bild { width: 64px; height: 48px; flex-shrink: 0; border-radius: 8px; object-fit: cover; }
.anzeige b { display: block; font-size: 15px; } .anzeige span { display: block; font-size: 13px; color: #6b6f76; }
.anzeige em { font-style: normal; font-weight: 700; }
.werte { display: flex; gap: 14px; margin-top: 10px; font-size: 12px; color: #6b6f76; }
.postfach { display: flex; align-items: center; gap: 8px; padding: 14px 18px 8px; font-size: 15px; font-weight: 700; }
.postfach .zahl { min-width: 24px; padding: 0 7px; border-radius: 11px; background: #e5383b; color: #fff; font: 700 12px/22px system-ui, sans-serif; text-align: center; }
/* Neueste oben: column-reverse stellt die zuletzt eingeblendete Nachricht nach vorn, aeltere rutschen unten raus */
.nachrichten { flex: 1; list-style: none; padding: 0 10px; display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; overflow: hidden; }
.nachrichten li { display: none; grid-template-columns: 36px 1fr; column-gap: 10px; padding: 9px 10px; border-radius: 14px; background: #fff; transition: background-color .9s ease; }
.nachrichten li.da { display: grid; }
.nachrichten li.neu { background: #ffede4; animation: reinfallen .45s cubic-bezier(.2, .8, .2, 1); }
.nachrichten i { grid-row: span 2; width: 36px; height: 36px; border-radius: 50%; background: #dfe1e6; color: #555; font: normal 600 12px/36px system-ui, sans-serif; text-align: center; }
.nachrichten b { font-size: 13px; } .nachrichten span { color: #333; }
@keyframes reinfallen { from { opacity: 0; transform: translateY(-14px) scale(.98); } }

.app.chat { background: #efeae2; }
.chat-kopf { display: flex; gap: 10px; align-items: center; padding: 6px 16px 12px; background: #fff; border-bottom: 1px solid #e3e3e8; }
.avatar { width: 38px; height: 38px; border-radius: 50%; background: #14171b; color: #fff; font: 400 15px/38px var(--titel); letter-spacing: .04em; text-align: center; }
.chat-kopf b { display: block; font-size: 15px; } .chat-kopf span { font-size: 12px; color: #6b6f76; }
/* Neueste unten, aeltere laufen oben raus wie im echten Chat */
.verlauf { flex: 1; list-style: none; padding: 12px; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; overflow: hidden; }
.verlauf li { display: none; max-width: 80%; padding: 8px 12px; border-radius: 16px; }
.verlauf li.da { display: block; }
.verlauf .du { align-self: flex-end; background: #14171b; color: #fff; border-bottom-right-radius: 5px; transform-origin: 100% 100%; }
.verlauf .kw { align-self: flex-start; background: #fff; border-bottom-left-radius: 5px; transform-origin: 0 100%; }
.verlauf .tag { align-self: center; padding: 4px 10px; border-radius: 8px; background: rgba(0, 0, 0, .07); color: #555; font-size: 11px; font-weight: 600; }
/* Der Kunde schickt zwei Fotos, jedes als eigene Bildblase mit Uhrzeit und Lesehaken */
.verlauf .fotos.da { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; max-width: 74%; padding: 0; background: none; }
.verlauf .fotos .bild { position: relative; display: block; width: 100%; padding: 3px; border-radius: 14px 14px 5px 14px; background: #14171b; }
.verlauf .fotos img { display: block; width: 100%; height: auto; border-radius: 11px 11px 3px 11px; }
.verlauf .fotos time { position: absolute; right: 9px; bottom: 7px; display: flex; align-items: center; gap: 3px; padding: 2px 6px; border-radius: 8px;
  background: rgba(0, 0, 0, .38); color: #fff; font-size: 11px; font-weight: 500; line-height: 1.2; }
.verlauf .fotos time svg { width: 15px; height: 9px; }
.verlauf .fertig { align-self: center; margin-top: 8px; padding: 8px 14px; border-radius: 999px; background: #14171b; color: #fff;
  font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.verlauf li.neu { animation: aufploppen .35s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes aufploppen { from { opacity: 0; transform: scale(.85); } }
.verlauf .tippt { display: flex; gap: 4px; align-self: flex-start; padding: 12px 14px; border-radius: 16px; background: #fff; }
.tippt i { width: 7px; height: 7px; border-radius: 50%; background: #9a9ea6; animation: punkt 1s ease-in-out infinite; }
.tippt i:nth-child(2) { animation-delay: .15s; } .tippt i:nth-child(3) { animation-delay: .3s; }
@keyframes punkt { 40% { transform: translateY(-3px); background: #5c6068; } }

.bilanz { font: 600 var(--t-label) var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.bilanz span, .erklaerung span { display: none; }
/* Was man sieht und wie es auf der echten Seite laeuft: das Handy spielt nur vor, der WhatsApp-Knopf startet den echten Chat */
.vergleich { font: 600 var(--t-label) var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); margin-bottom: -8px; }
.erklaerung { max-width: 34ch; margin-top: -12px; text-align: center; font: 400 var(--t-ui)/1.45 var(--schrift); color: var(--text-2); }
.buehne-handy[data-weg="inserat"] .erklaerung [data-weg="inserat"], .buehne-handy[data-weg="kurvenwerk"] .erklaerung [data-weg="kurvenwerk"] { display: inline; }
/* Ablauf im Ankauf: alle drei Schritte gleich stark, keine Fuehrung */
.fuehrung.ablauf { margin-top: 40px; } .fuehrung.ablauf li { color: var(--text); } .fuehrung.ablauf span { color: var(--text-2); }
.ankauf .spalte .aktion { margin-top: 32px; }
.buehne-handy[data-weg="inserat"] .bilanz [data-weg="inserat"], .buehne-handy[data-weg="kurvenwerk"] .bilanz [data-weg="kurvenwerk"] { display: inline; }
.buehne-handy[data-weg="kurvenwerk"] .bilanz { color: var(--text); }

/* Kontakt: Mitnahme des Auftrags aus Halt 12 */
.mitnahme { display: grid; gap: 10px; justify-items: start; margin-top: 32px; padding: 16px 18px 18px; border: 1.5px solid var(--text); }
.mitnahme-kopf { font: 600 var(--t-label) var(--schrift); letter-spacing: .16em; text-transform: uppercase; color: var(--text-2); }
.kontakt .spalte .aktion { margin-top: 20px; }

/* Emaille-Schild vom Werkstatttor, leicht schief angeschraubt, halb ueber der Anfahrtskarte */
.buehne-anfahrt { display: grid; align-content: center; justify-items: center; padding: 112px 56px 72px; }
.schild { position: relative; z-index: 3; justify-self: end; width: min(380px, 100%); margin: 0 24px -36px 0; padding: 26px 32px 22px; border-radius: 14px;
  background: radial-gradient(120% 140% at 20% 0%, #2c3038, #121418 60%); color: #f1e9d6; transform: rotate(-1.6deg);
  box-shadow: 0 26px 40px -22px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .12); }
.schild::before { content: ''; position: absolute; inset: 9px; border: 2px solid rgba(241, 233, 214, .85); border-radius: 8px; pointer-events: none; }
.schild::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: radial-gradient(circle at 18px 18px, #cfc8b6 0 3.5px, #6d675a 4px, transparent 4.5px), radial-gradient(circle at calc(100% - 18px) 18px, #cfc8b6 0 3.5px, #6d675a 4px, transparent 4.5px),
    radial-gradient(circle at 18px calc(100% - 18px), #cfc8b6 0 3.5px, #6d675a 4px, transparent 4.5px), radial-gradient(circle at calc(100% - 18px) calc(100% - 18px), #cfc8b6 0 3.5px, #6d675a 4px, transparent 4.5px),
    linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .13) 46%, rgba(255, 255, 255, .04) 52%, transparent 60%); }
.schild-name { font: 400 var(--t-titel)/1 var(--titel); letter-spacing: .08em; text-transform: uppercase; text-align: center; }
.schild-unter { margin-top: 8px; font: 600 var(--t-label) var(--schrift); letter-spacing: .26em; text-transform: uppercase; text-align: center; opacity: .8; }
.schild-status { display: flex; justify-content: center; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(241, 233, 214, .3);
  font: 700 var(--t-ui) var(--schrift); letter-spacing: .1em; text-transform: uppercase; }
.lampe { width: 11px; height: 11px; border-radius: 50%; background: #c2573f; box-shadow: 0 0 0 3px rgba(194, 87, 63, .2); }
.schild.offen .lampe { background: #43d17a; box-shadow: 0 0 0 3px rgba(67, 209, 122, .22), 0 0 14px #43d17a; animation: glimmen 2.4s ease-in-out infinite; }
@keyframes glimmen { 50% { box-shadow: 0 0 0 3px rgba(67, 209, 122, .12), 0 0 6px #43d17a; } }

/* Anfahrtskarte: das Schild greift oben ueber die Kante (darum Luft im Kopf). Vorschau ohne Google, Karte erst nach Klick */
.karte-anfahrt { position: relative; width: min(560px, 100%); margin: 0; background: #f6efdc; color: #1a1c20; border: 1px solid rgba(26, 28, 32, .25);
  box-shadow: 0 30px 60px -36px rgba(20, 23, 27, .5), inset 0 12px 14px -12px rgba(0, 0, 0, .22); }
.karte-anfahrt figcaption { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 48px 16px 12px; border-bottom: 2px solid #1a1c20;
  font: 700 var(--t-label) var(--schrift); letter-spacing: .2em; text-transform: uppercase; }
.karte-flaeche { position: relative; aspect-ratio: 4 / 3; background: #e7e4da; overflow: hidden; }
.karte-flaeche iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
/* Anfahrtskarte: echter Stadtplan aus OpenStreetMap (werkzeuge/karte_a.py -> daten/anfahrt-karte.svg, von anfahrt.js inline
   eingesetzt, damit die Seitenschriften greifen). Marlon 30.09.: Skizze auf der Tafel 'verwaschen', Karte selbst wird der Hingucker */
.karte-vorschau { position: absolute; inset: 0; display: grid; align-content: end; background: #f1ead4; }
.karte-vorschau > svg:not(.nadel) { position: absolute; inset: 0; width: 100%; height: 100%; }
/* Nadel sitzt auf dem Routenende (Lage gibt karte_a.py aus) */
.karte-vorschau .nadel { position: absolute; left: 37.1%; top: 39.6%; width: 30px; height: 42px; translate: -50% -100%; filter: drop-shadow(0 4px 3px rgba(0, 0, 0, .35)); }
.nadel path { fill: #1a1c20; } .nadel circle { fill: #f6efdc; }
.karte-ziel { position: absolute; left: calc(37.1% + 22px); top: calc(39.6% - 50px); margin: 0; padding: 6px 10px 5px; border-radius: 3px; background: #1a1c20; color: #f6efdc;
  font: 700 var(--t-label)/1 var(--schrift); letter-spacing: .16em; text-transform: uppercase; }
.karte-ziel small { display: block; margin-top: 4px; font: 400 11px/1 var(--zahl); letter-spacing: .04em; text-transform: none; color: rgba(246, 239, 220, .7); }
.karte-quelle { position: absolute; right: 6px; top: 6px; margin: 0; padding: 2px 6px; background: rgba(246, 239, 220, .85); font: 400 11px/1.3 var(--schrift); color: rgba(26, 28, 32, .78); }
.karte-quelle a { color: inherit; }
/* Google-Hinweis + Knopf als ruhige Leiste unten statt Kasten mitten auf der Karte */
.karte-leiste { position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; background: rgba(246, 239, 220, .96); border-top: 1px solid rgba(26, 28, 32, .2); }
.karte-leiste p { margin: 0; font: 400 12px/1.35 var(--schrift); color: #1a1c20; }
.karte-leiste a { color: inherit; }
.karte-leiste .karte-laden { flex: none; margin-left: auto; padding: 8px 14px; color: #1a1c20; border-color: #1a1c20; background: #f6efdc; cursor: pointer; }
.karte-fuss { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 16px; border-top: 2px solid #1a1c20; }
.karte-fuss span { font: 400 var(--t-ui) var(--schrift); color: rgba(26, 28, 32, .65); }

@media (max-width: 1099px) { .gegenstand { grid-template-columns: 44% minmax(0, 1fr); } }
@media (max-width: 799px) {
  .gegenstand { grid-template-columns: 1fr; min-height: 0; }
  .buehne-handy, .buehne-anfahrt { margin: 0; } .buehne-handy { padding: 76px 20px 48px; } .handy { width: min(318px, 84vw); }
  .umschalter button { padding: 10px 12px; letter-spacing: .08em; }
  .buehne-anfahrt { padding: 76px 20px 48px; justify-items: center; }
  .karte-leiste { gap: 10px; padding: 8px 10px; } .karte-leiste p { font-size: 11px; } .karte-leiste .karte-laden { padding: 7px 12px; }
  .karte-anfahrt figcaption { padding-top: 40px; letter-spacing: .14em; } .karte-anfahrt figcaption span + span { letter-spacing: .06em; } .schild { justify-self: center; margin: 0 0 -28px; }
}
@media (prefers-reduced-motion: reduce) {
  .gegenstand * { animation: none !important; transition: none !important; }
}