/* ═══════════════════════════════════════════════════════════════════════
   Yui's Spidernet — Chat, optisches Update
   Nach chat-knoepfe.html. Reine Optik: keine Klassennamen, ids oder
   data-Attribute geändert, kein Markup, kein JS.

   Als LETZTES Stylesheet laden, nach brand.css. Wo brand.css mit
   !important arbeitet, steht hier ebenfalls !important — nur dort.

   NICHT ANGEFASST: die animierte Spinne in der Kopfzeile (A2, .head-avatar
   img, @keyframes yui-step) und die laufende Spinne im Denk-Zustand
   (C1, @keyframes yui-crawl).
   ═══════════════════════════════════════════════════════════════════════ */

:root{
  /* Der Chat lief weiß mit fast schwarzem Akzent und war damit die dritte
     Bildsprache neben Gastseite und Kasse. Nur diese Werte drehen ihn auf
     das gemeinsame System — alles darunter rechnet mit denselben Namen. */
  --ink:#F6F3F0;
  --paper:#121110;
  --paper-dim:#1C1A19;
  --stone:#B8B1AA;
  --coral:#FF3B24;
  --hairline:#332F2D;
  --surface:#161413;
  --surface-2:#1C1A19;
  --glow:rgba(0,0,0,0);
  --grad-1:#FF3B24;
  --grad-2:#FF3B24;
  --grad-3:#FF3B24;
  --gradient-island:#FF3B24;

  /* Neu, für die Regeln unten. */
  --sp-line-strong:#3A3533;
  --sp-line-btn:#463F3B;
  --sp-ink-2:#C4BDB6;
  --sp-ink-4:#9B948D;
  --sp-ink-5:#8F877F;
  --sp-red-hover:#FF5940;
  --sp-red-text:#FF8A78;
  --sp-on-red:#14110F;
  --sp-green:#7FC4A7;
  --sp-green-dot:#2E8B60;
}

/* ── Fort mit dem Dekor ───────────────────────────────────────────────
   Zwei 70px-Weichzeichner hinter der ganzen App: auf Weiß kaum sichtbar,
   auf dunklem Grund nur Rauschen. */
body::before,body::after{display:none !important;}

/* Schatten bleiben nur auf echten Überlagerungen. Auf Blasen und Karten
   erzeugen sie auf dunklem Grund keine Höhe, nur Schmutz. */
.ai-msg.bot,.ai-msg.user,.suggestion-card,#chatSend,#promoApplyBtn,
.install-sheet .close-btn,header{box-shadow:none !important;}

/* ── Fokus: einer für alles ───────────────────────────────────────────
   Vorher #6FD3A8, #FF8A6E und var(--coral) je nach Element. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
.qr-btn:focus-visible,.cancel-btn:focus-visible,.cancel-link:focus-visible,
.sr-consent-btn:focus-visible,.bike-cta:focus-visible,.loc-btn:focus-visible{
  outline:2px solid #FF3B24 !important;
  outline-offset:2px !important;
}

/* ── A · Kopfzeile ───────────────────────────────────────────────────── */
header{
  background:#121110 !important;
  border-bottom:1px solid #332F2D !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}
header a.back{color:#B8B1AA !important;opacity:1 !important;border-radius:13px;}
header a.back:hover{background:#1C1A19;color:#F6F3F0 !important;}

/* Rund → 13px, wie alle Icon-Knöpfe im Rest der App. 44px war schon richtig. */
.install-btn,.notify-btn,.lang-pick{
  border-radius:13px !important;
  background:transparent !important;
  border:1px solid #332F2D !important;
  color:#B8B1AA !important;
}
.install-btn:hover,.notify-btn:hover,.lang-pick:hover{
  background:#1C1A19 !important;color:#F6F3F0 !important;
}
.install-btn.subscribed{background:#2A2624 !important;color:#F6F3F0 !important;}
/* Eingeschaltet ist ein Zustand, nicht eine Hauptaktion — aber hier ist Rot
   richtig, weil es der einzige eingeschaltete Schalter der Kopfzeile ist. */
.notify-btn.subscribed{
  background:#FF3B24 !important;border-color:#FF3B24 !important;
  color:#14110F !important;
}
.notify-dot{border-color:#121110 !important;}

/* Auf dem Handy standen vier 44px-Knoepfe plus Sprachwahl in einer Zeile,
   die Glocke ragte 13px ueber den Bildschirmrand. Gemessen bei 390px:
   44+36+85(Schriftzug)+68+3x44 + 6 Luecken a 8 = 413px in 366px Platz.
   Die Knopfgroesse bleibt bei 44px; enger werden die Luecken, die
   Sprachwahl und der Schriftzug. */
@media (max-width:430px){
  header{gap:6px !important;padding-left:10px !important;padding-right:10px !important;}
  .lang-pick{min-width:52px !important;padding:0 7px !important;gap:4px;}
  .lang-pick::after{width:7px;height:7px;}
  .head-text{min-width:0;}
  header a.back{margin-left:-10px !important;}
  .head-text .yui-wordmark{height:17px !important;max-width:100%;}
}
@media (max-width:360px){
  .head-text .yui-wordmark{height:15px !important;}
  .lang-pick::after{display:none;}
  .lang-pick{min-width:44px !important;}
}

/* Sprachwahl: war ein Kreis mit unsichtbarem select und einem Kürzel darin —
   nichts deutete auf ein Aufklappen hin. Jetzt dieselbe Form wie im
   Gast-Header, mit Chevron. */
.lang-pick{
  width:auto !important;min-width:68px;height:44px;
  padding:0 10px !important;gap:6px;
}
.lang-pick-code{color:#F6F3F0 !important;font-size:12px;font-weight:600;}
.lang-pick::after{
  content:"";flex:0 0 auto;width:9px;height:9px;
  border-right:2px solid #8F877F;border-bottom:2px solid #8F877F;
  transform:rotate(45deg) translateY(-2px);
  pointer-events:none;
}

/* ── Blasen ──────────────────────────────────────────────────────────── */
.ai-msg{border-radius:20px !important;}
.ai-msg.bot{
  background:#1C1A19 !important;border:1px solid #332F2D !important;
  color:#F6F3F0 !important;border-bottom-left-radius:6px !important;
}
.ai-msg.user{
  background:#FF3B24 !important;color:#14110F !important;
  border:none !important;border-bottom-right-radius:6px !important;
}
/* Auf Rot steht dunkler Text — auch der Link darin. Vorher war er weiß auf
   Rot, das lag unter 3:1. */
.ai-msg.user .msg-link{
  color:#14110F !important;font-weight:800;
  text-decoration-color:rgba(20,17,15,.5) !important;
}
.msg-link{color:#FF8A78 !important;}
.ai-msg.typing{
  background:#1C1A19 !important;border:1px solid #332F2D !important;
  color:#B8B1AA !important;
}
.typing-dots span{background:#C4BDB6 !important;}
.bot-avatar{
  border:1px solid #332F2D !important;background-color:#1C1A19 !important;
}

/* ── B · Gutscheinleiste ─────────────────────────────────────────────── */
#promoBar{
  background:#161413 !important;border-bottom:1px solid #332F2D !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
  gap:8px;
}
#promoInput,#chatInput{
  background:#1C1A19 !important;border:1px solid #3A3533 !important;
  color:#F6F3F0 !important;
}
#promoInput::placeholder,#chatInput::placeholder{color:#8F877F !important;}
#promoInput{height:44px;padding:0 16px !important;}
#promoInput:focus,#chatInput:focus{
  border-color:#FF3B24 !important;box-shadow:none !important;background:#211E1C !important;
}

/* War gefüllt. Gefüllt ist im Chat nur die eine Hauptaktion pro Nachricht —
   „Code anwenden" ist eine Nebenhandlung. */
#promoApplyBtn{
  height:44px;padding:0 20px !important;
  background:transparent !important;
  border:1px solid #463F3B !important;
  color:#F6F3F0 !important;font-weight:700 !important;
  letter-spacing:.06em;text-transform:uppercase;
}
#promoApplyBtn:hover:not(:disabled){border-color:#F6F3F0 !important;}
#promoApplyBtn:disabled{opacity:.45 !important;}

/* Der aktive Code ist eine Erfolgsmeldung — grün, nicht im Akzent. */
.promo-chip{
  min-height:52px;
  background:rgba(95,169,140,.14) !important;
  border:1px solid rgba(95,169,140,.40) !important;
  color:#F6F3F0 !important;
  padding:0 6px 0 16px !important;
}
.promo-chip svg{color:#7FC4A7 !important;}
.promo-chip-code{color:#7FC4A7 !important;}
/* War 26px — unter dem Touch-Minimum. */
.promo-chip-remove{
  width:40px !important;height:40px !important;
  background:rgba(20,17,15,.5) !important;color:#C4BDB6 !important;
  font-size:0 !important;
}
.promo-chip-remove::before{content:"\00d7";font-size:19px;line-height:1;}
.promo-chip-remove:hover{background:#14110F !important;color:#F6F3F0 !important;}

/* ── C · Aktionskarten ───────────────────────────────────────────────── */
/* map, cal, bike: gleicher Kartenkörper, damit sie als eine Familie lesen. */
.map-cta,.cal-cta,.bike-cta{
  background:#1C1A19 !important;
  border:1px solid #332F2D !important;
  border-radius:16px !important;
  color:#F6F3F0 !important;
}
.map-cta:hover,.cal-cta:hover,.bike-cta:hover{
  border-color:#4E4741 !important;background:#211E1C !important;
}
.map-cta:active,.cal-cta:active,.bike-cta:active{transform:scale(.99);}
.map-cta-img,.bike-cta-img{
  background-color:#2A2624 !important;border-radius:13px !important;
  color:#8F877F !important;
}
.cal-day{
  background:#14110F !important;border:1px solid #3A3533 !important;
  border-radius:13px !important;
}
/* War im Akzent gefüllt: ein roter Block in einer Karte, die nicht die
   Hauptaktion ist. */
.cal-day-m{background:#332F2D !important;color:#C4BDB6 !important;}
.cal-day-d{color:#F6F3F0 !important;}
.map-cta-arrow,.cal-cta svg,.bike-cta svg{color:#8F877F !important;}

/* Zahlen weiß mit tabellarischen Ziffern. Alle fünf standen vorher im
   Akzent und konkurrierten damit mit jedem Knopf. */
.map-cta-sub,.cal-sub{color:#B8B1AA !important;}
.bike-cta-price,.suggestion-price,.bs-price{
  color:#F6F3F0 !important;font-variant-numeric:tabular-nums;
}
.bike-cta-meta{color:#8F877F !important;}

/* Verfügbarkeit: grün für frei, neutral für vermietet. Bernstein (#E0A94A)
   war eine fünfte Signalfarbe ohne eigene Bedeutung. */
.bike-cta-avail.free,.bs-avail.free{color:#7FC4A7 !important;}
.bike-cta-avail.out,.bs-avail.out{color:#B8B1AA !important;}

/* .wa-cta bleibt unverändert — Farbe, 2px-Rand, 20px Radius, weiße Schrift,
   Leuchten und 52px-Zeichen wie in der Vorlage. Hier steht bewusst NICHTS
   dazu, damit brand.css und die Grundregel im Chat weiter gelten. */

/* Messenger ist der zweite Weg und wird Outline. Vorher waren beide gefüllt,
   nur unterschiedlich groß — zwei Hauptaktionen nebeneinander. */
.wa-cta.msg-cta{
  background:transparent !important;
  border:1px solid #463F3B !important;
  border-radius:16px !important;
  color:#F6F3F0 !important;
}
.wa-cta.msg-cta:hover{
  border-color:#F6F3F0 !important;background:#1C1A19 !important;
}
.msg-logo svg{opacity:.8;}

/* ── C12 · Standort ──────────────────────────────────────────────────── */
.loc-btn{
  min-height:44px;border-radius:16px !important;
  background:transparent !important;
  border:1px solid #463F3B !important;
  color:#F6F3F0 !important;
}
.loc-btn:hover{border-color:#F6F3F0 !important;}
.loc-btn.primary{
  background:#FF3B24 !important;border-color:#FF3B24 !important;
  color:#14110F !important;
}
.loc-btn.primary:hover{background:#FF5940 !important;filter:none !important;}
.loc-hint{color:#B8B1AA !important;}
.loc-hint.warn{color:#FF8A78 !important;}

/* ── C8/C9 · Stornieren ──────────────────────────────────────────────── */
.cancel-link{color:#B8B1AA !important;text-underline-offset:3px;}
.cancel-link:hover{color:#F6F3F0 !important;}
.cancel-ask{color:#F6F3F0 !important;}
.cancel-btn{border:1px solid #463F3B !important;}
.cancel-btn.no{background:transparent !important;color:#F6F3F0 !important;}
.cancel-btn.no:hover{border-color:#F6F3F0 !important;}
/* War #A32A1E gefüllt: ein zweites Dunkelrot neben dem Markenrot, und ein
   gefüllter Knopf für die zerstörende Wahl. Jetzt Outline-Rot. */
.cancel-btn.yes{
  background:transparent !important;
  border-color:#FF3B24 !important;
  color:#FF8A78 !important;
}
.cancel-btn.yes:hover{background:rgba(255,59,36,.12) !important;}

/* ── C13 · Vorschlagskarten ──────────────────────────────────────────── */
.suggestion-card{
  width:132px !important;
  background:#1C1A19 !important;
  border:1px solid #332F2D !important;
  border-radius:16px !important;
}
.suggestion-img{background-color:#2A2624 !important;height:84px !important;}
.suggestion-name{color:#F6F3F0 !important;}

/* ── D · Schnellantworten ────────────────────────────────────────────── */
.qr-btn{
  min-height:44px;padding:0 17px !important;
  background:transparent !important;
  border:1px solid #3A3533 !important;
  color:#F6F3F0 !important;
}
.qr-btn:hover{border-color:#F6F3F0 !important;background:#1C1A19 !important;color:#F6F3F0 !important;}
.qr-btn:active{background:#FF3B24 !important;border-color:#FF3B24 !important;color:#14110F !important;}

/* ── E · Eingabezeile ────────────────────────────────────────────────── */
#chatFoot{
  background:#161413 !important;
  border-top:1px solid #262322 !important;
  backdrop-filter:none !important;-webkit-backdrop-filter:none !important;
}
#chatInput{height:52px;padding:0 18px !important;}
/* Kreis bleibt — ein runder Senden-Knopf ist eine gelernte Form. */
#chatSend{
  width:52px !important;height:52px !important;
  background:#FF3B24 !important;border-radius:50% !important;
}
#chatSend svg{color:#14110F !important;}
#chatSend:hover{background:#FF5940 !important;filter:none !important;}
/* War scale(0.93) — der Knopf sprang. */
#chatSend:active{transform:scale(.96) !important;}
#chatSend:disabled{opacity:.4 !important;}

/* ── F · Datenblatt ──────────────────────────────────────────────────── */
.bs-back{background:rgba(8,7,6,.78) !important;}
.bs-sheet{
  background:#1C1A19 !important;border:1px solid #3A3533 !important;
  border-radius:24px !important;color:#F6F3F0 !important;
}
/* War 34px. */
.bs-x{
  width:44px !important;height:44px !important;
  background:#2A2624 !important;border:1px solid #3A3533 !important;
  color:#F6F3F0 !important;
}
.bs-x:hover{background:#332F2D !important;}
.bs-photo{background:#14110F !important;border-radius:18px !important;color:#8F877F !important;}
.bs-brand{color:#9B948D !important;}
.bs-name{color:#F6F3F0 !important;}
.bs-badge{
  background:#2A2624 !important;border:1px solid #3A3533 !important;
  color:#F6F3F0 !important;
}
.bs-light{background:#14110F !important;border:1px solid #332F2D !important;border-radius:14px !important;}
.bs-light b{color:#F6F3F0 !important;}
.bs-light span{color:#C4BDB6 !important;}
.bs-light.good b{color:#7FC4A7 !important;}
.bs-light.bad b{color:#9B948D !important;}
.bs-specs div{border-bottom:1px solid #2B2827 !important;}
.bs-specs dt{color:#9B948D !important;}
.bs-specs dd{color:#F6F3F0 !important;}
.bs-blurb{color:#C4BDB6 !important;}
.bs-note{color:#9B948D !important;}
.bs-act{
  min-height:44px;background:#FF3B24 !important;
  border-radius:16px !important;color:#14110F !important;
  letter-spacing:.05em;text-transform:uppercase;
}
.bs-act:hover{background:#FF5940 !important;}

/* ── G1 · Install-Blatt ──────────────────────────────────────────────── */
.install-overlay{background:rgba(8,7,6,.72) !important;backdrop-filter:blur(4px);}
.install-sheet{
  background:#161413 !important;border:1px solid #3A3533 !important;
  border-radius:26px 26px 0 0 !important;color:#F6F3F0 !important;
}
.install-sheet ol{color:#C4BDB6 !important;}
/* War gefüllt. Ein „Verstanden" ist kein Primärziel. */
.install-sheet .close-btn{
  min-height:44px;background:transparent !important;
  border:1px solid #463F3B !important;border-radius:16px !important;
  color:#F6F3F0 !important;
}
.install-sheet .close-btn:hover{border-color:#F6F3F0 !important;background:#1C1A19 !important;}
/* Schrift der Bedienelemente - aus den Vorlagen 15 und 18. */
.install-sheet .close-btn,.wa-cta .wa-title{
  font-family:var(--yui-head) !important;font-weight:600 !important;
  letter-spacing:.06em;text-transform:uppercase;
}
.wa-cta .wa-title{font-weight:700 !important;}

/* ── G2 · Cookie-Frage ───────────────────────────────────────────────── */
/* „Annehmen" war grün gefüllt, „Ablehnen" transparent — ein Dark Pattern
   und in der EU angreifbar. Beide identisch. */
.sr-consent-text{color:#C4BDB6 !important;}
.sr-consent-btn{
  border:1px solid #463F3B !important;
  background:transparent !important;
  color:#F6F3F0 !important;
}
.sr-consent-btn:hover{border-color:#F6F3F0 !important;}
.sr-consent-no,.sr-consent-yes{
  background:transparent !important;border-color:#463F3B !important;
  color:#F6F3F0 !important;
}
.sr-consent-link{color:#B8B1AA !important;text-underline-offset:3px;}
.sr-consent-link:hover{color:#F6F3F0 !important;}

/* ── Scrollbar, Auswahl ──────────────────────────────────────────────── */
#chatBody{scrollbar-color:#3A3533 transparent !important;}
#chatBody::-webkit-scrollbar-thumb{background:#3A3533 !important;}
::selection{background:#FF3B24 !important;color:#14110F !important;}

/* ── Animationen ─────────────────────────────────────────────────────── */
/* Skalierte den ganzen body von 0.97 und schob ihn 14px: beim Öffnen
   zoomte die App. Nur noch einblenden. */
body{animation:sp-chat-open .2s ease both !important;}
@keyframes sp-chat-open{from{opacity:0}to{opacity:1}}

/* 10px Versatz war ein sichtbarer Sprung pro Nachricht. */
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* Blinkte auf 0.35 Deckkraft — das liest sich als Fehler, nicht als
   „arbeitet". */
@keyframes locPulse{0%,100%{opacity:1}50%{opacity:.55}}

/* Die Spinnen-Animationen (yui-step, yui-crawl, yui-spin-thread) und
   typingBounce sind bewusst nicht überschrieben. */

@media(prefers-reduced-motion:reduce){
  body{animation:none !important;}
  .msg-row,.ai-msg.user,.suggestion-row{animation:none !important;}
}

/* ═══════════════════════════════════════════════════════════════════════
   Desktop-Ergänzung — nicht Teil des Handoffs
   Die Vorlagen sind alle 390px breit. Verlauf, Gutscheinleiste,
   Schnellantworten und Eingabezeile stehen schon in einer 720px-Spalte in
   der Mitte; nur die Kopfzeile lief über die volle Fensterbreite: Marke
   ganz links, Knöpfe ganz rechts, dazwischen ein Meter Leere. Ihr Grund
   bleibt durchgehend, ihr Inhalt sitzt jetzt über derselben Spalte.
   684px = 720px Spalte minus 2x18px Innenabstand der anderen Leisten.
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width:820px){
  header{
    padding-left:calc((100% - 684px) / 2) !important;
    padding-right:calc((100% - 684px) / 2) !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   Aus dem Audit vom 16.09.2026
   ═══════════════════════════════════════════════════════════════════════ */
/* Die Einwilligung liegt fest am unteren Rand und deckte Eingabefeld und
   Senden-Knopf zu, bis der Gast geantwortet hat. Die Hoehe misst das
   Skript in chat.html und legt sie hier ab. */
body.sr-consent-open #chatFoot{
  padding-bottom:calc(14px + var(--sr-consent-h, 0px) + env(safe-area-inset-bottom)) !important;
}
body.sr-consent-open .quick-replies{padding-bottom:8px;}
/* Der Link war 19px hoch. */
#srConsentMore,.sr-consent-link{
  min-height:44px !important;display:inline-flex !important;align-items:center;
}