/* ================================================================
   SMARTTEC REPAIR PRO v4 – Frontend CSS
   Layout 1:1 nach Screenshots
   ================================================================ */

:root {
  --blue:      #1a73e8;
  --blue-d:    #1557b0;
  /* Helle Blau-Töne (Auswahl-/Hover-Hintergründe) werden bewusst aus --blue
     abgeleitet statt fest verdrahtet: ändert der Admin die Akzentfarbe in
     den Design-Einstellungen, bleiben Hover-/Auswahlzustände automatisch
     stimmig, statt an der alten Blau-Tönung hängenzubleiben. */
  --blue-lt:   color-mix(in srgb, var(--blue) 12%, white);
  --blue-bg:   color-mix(in srgb, var(--blue) 5%, white);
  /* Fortschrittsleiste (1-2-3): folgt standardmäßig der Primärfarbe, kann in
     den Design-Einstellungen aber unabhängig davon eingestellt werden. */
  --prog-color: var(--blue);
  --navy:      #1e2235;
  --green:     #22c55e;
  --red:       #e2001a;
  --gray:      #f8f9fa;
  --gray2:     #f1f3f4;
  --border:    #e5e7eb;
  --muted:     #6b7280;
  --text:      #111827;
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-base: 15px;
  --r:         14px;
  --r-sm:      calc(var(--r) * 0.57); /* folgt --r automatisch, kein eigenes Feld nötig */
  --sh:        0 2px 12px rgba(0,0,0,.07);
  --sh2:       0 4px 24px rgba(0,0,0,.12);
}

/* ── Base ──────────────────────────────────────────────── */
#sr-app *,#sr-app *::before,#sr-app *::after { box-sizing: border-box; }
#sr-app {
  font-family: var(--font-family);
  color: var(--text);
  font-size: var(--font-size-base);
  max-width: 1220px;
  margin: 0 auto;
  padding: 16px 16px 80px;
}
/* Weiße, abgerundete Karte um den gesamten Buchungsablauf (Desktop-Design-
   referenz) – bewusst als eigene Ebene innerhalb von #sr-app statt am
   Body/Theme anzusetzen, damit kein Konflikt mit fremden Theme-Hintergründen
   entsteht: die Karte erzeugt ihre eigene Abgrenzung per Schatten/Radius,
   unabhängig davon was dahinter liegt. */
.sr-card {
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 2px 8px rgba(20,30,45,.05), 0 12px 40px rgba(20,30,45,.08);
  padding: 30px 40px 40px;
}
@media (max-width: 900px) {
  /* Mobile: randloser Inhalt statt schwebender Karte (Referenzbilder zeigen
     hier keinen sichtbaren Radius/Schatten, sondern volle Bildschirmbreite). */
  .sr-card { padding: 16px 16px 24px; border-radius: 0; box-shadow: none; }
}

/* ── PROGRESS BAR ──────────────────────────────────────── */
.sr-prog {
  padding: 20px 0 24px;
  max-width: 640px;
  margin: 0 auto;
  position: relative;
}
@media (min-width: 600px) {
  .sr-prog { padding: 28px 0 32px; }
}
.sr-prog-track {
  position: absolute;
  top: 47px;
  left: calc(16% + 12px);
  right: calc(16% + 12px);
  height: 3px;
  background: var(--border);
  border-radius: 2px;
}
.sr-prog-fill {
  height: 100%;
  background: var(--prog-color);
  border-radius: 2px;
  transition: width .4s ease;
}
.sr-prog-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.sr-prog-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;           /* erlaubt dem Flex-Item zu schrumpfen, statt die Zeile zu sprengen */
  opacity: .5;             /* zukünftiger Schritt: dezent */
  transition: opacity .25s;
}
.sr-prog-step.active,
.sr-prog-step.done { opacity: 1; }  /* aktiver/abgeschlossener Schritt: volle Deutlichkeit */
.sr-step-dot {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 14px;
  color: var(--muted);
  transition: all .3s;
}
@media (min-width: 480px) {
  .sr-step-dot { width: 44px; height: 44px; font-size: 16px; }
}
.sr-prog-step.active .sr-step-dot {
  border-color: var(--prog-color);
  background: var(--prog-color);
  color: #fff;
}
.sr-prog-step.done .sr-step-dot {
  border-color: var(--prog-color);
  background: #fff;
  color: var(--prog-color);
}
/* sr-sn = Zahl, sr-sc = Haken, ersetzt sr-sn sobald der Schritt
   abgeschlossen ist. Beide werden ausschließlich über CSS anhand der von
   go() gesetzten Klasse .done umgeschaltet – an der bestehenden Step-Logik
   in booking.js ändert sich dadurch nichts. */
.sr-sn { display: block; }
.sr-sc { display: none; width: 16px; height: 14px; stroke: currentColor; }
.sr-prog-step.done .sr-sn { display: none; }
.sr-prog-step.done .sr-sc { display: block; }
/* sr-step-icon = optionales, im Admin hochgeladenes Symbol statt der Zahl.
   Wird nur gerendert, wenn der Admin ein Bild hinterlegt hat (sonst steht
   weiterhin die Zahl da) und verhält sich beim Abschließen des Schritts
   genau wie sr-sn: verschwindet zugunsten des Hakens. */
.sr-step-icon { display: block; width: 20px; height: 20px; object-fit: contain; }
@media (min-width: 480px) { .sr-step-icon { width: 24px; height: 24px; } }
.sr-prog-step.done .sr-step-icon { display: none; }
.sr-sl {
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;   /* "Wählen Gerät" etc. bleibt ein zusammenhängender Text */
  max-width: 100%;
}
@media (min-width: 480px) { .sr-sl { font-size: 14px; } }
@media (max-width: 380px) {
  /* Sehr schmale Displays: statt Überlauf/Kollision mit dem Nachbarschritt ein
     sauberer, zentrierter Zeilenumbruch – kein "Auseinanderbrechen" der Wörter. */
  .sr-sl { white-space: normal; line-height: 1.25; max-width: 82px; }
}
.sr-prog-step.active .sr-sl { color: var(--navy); }
.sr-prog-step.active .sr-sl strong { font-weight: 700; }
.sr-prog-step.done .sr-sl { color: var(--prog-color); }

/* ── Layout ────────────────────────────────────────────── */
.sr-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 900px) {
  .sr-layout { grid-template-columns: 1fr; }

  /* Mobile (Referenzdesign): Reparaturliste erscheint ganz normal im
     Seitenfluss unterhalb des Hauptinhalts – kein fixiertes/einklappbares
     Panel mehr. Der schnelle "Weiter"-Zugriff während des Scrollens bleibt
     über die bereits vorhandene separate #sr-mbar-Leiste erhalten
     (unverändert, siehe initMbar()/updateMbar() in booking.js). */
  .sr-sidebar { position: static; }
}
.sr-main { min-width: 0; }

/* ── Screens ────────────────────────────────────────────── */
.sr-screen { display: none; }
.sr-screen.active { display: block; }
.sr-sh {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
  min-height: 44px;
}
.sr-title {
  font-size: clamp(18px, 3vw, 24px);
  font-weight: 400;
  color: var(--navy);
  flex: 1;
}
.sr-title strong { font-weight: 700; }

.sr-back-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  background: var(--blue-lt);
  border: none;
  border-radius: 10px;
  font-size: 18px;
  color: var(--blue);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.sr-back-btn:hover { background: #d2e3fc; }
.sr-back-btn:active { transform: scale(.95); }

/* ── Sprachumschalter ───────────────────────────────────── */
.sr-lang-switch { position: relative; flex-shrink: 0; }
.sr-lang-current {
  display: flex; align-items: center; gap: 7px;
  background: none; border: none; cursor: pointer;
  padding: 6px; border-radius: 8px;
  color: var(--muted);
  -webkit-tap-highlight-color: transparent;
}
.sr-lang-current:hover { background: var(--gray); }
.sr-lang-flag-img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.sr-lang-flag-ph { width: 24px; height: 24px; border-radius: 50%; background: var(--gray2); flex-shrink: 0; }
.sr-lang-menu {
  position: absolute; top: calc(100% + 6px); right: 0;
  background: #fff; border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--sh2);
  min-width: 170px;
  padding: 6px;
  z-index: 50;
}
.sr-lang-opt {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  background: none; border: none; cursor: pointer;
  padding: 8px 10px; border-radius: 8px;
  font-size: 13px; color: var(--text);
  -webkit-tap-highlight-color: transparent;
}
.sr-lang-opt:hover { background: var(--gray); }
.sr-lang-opt.active { background: var(--blue-bg); color: var(--blue); font-weight: 600; }

/* ── Hinweis-Punkte ─────────────────────────────────────── */
.sr-dot-blue {
  display: inline-block;
  width: 10px; height: 10px;
  background: var(--blue);
  border-radius: 50%;
  margin-right: 6px;
  flex-shrink: 0;
}
.sr-sh-hint {
  font-size: 14px;
  color: var(--navy);
  display: flex;
  align-items: center;
  margin-bottom: 12px;
}

/* ── Suchfeld ───────────────────────────────────────────── */
.sr-search-box {
  background: var(--gray);
  border-radius: var(--r);
  padding: 18px;
  margin-bottom: 22px;
}
.sr-sf-row {
  display: flex;
  align-items: center;
  gap: 14px;
  position: relative;
}
.sr-sf-inner { flex: 1; position: relative; }
.sr-sf {
  width: 100%;
  padding: 14px 50px 14px 18px;
  border: 2px solid var(--blue);
  border-radius: 12px;
  font-size: 16px; /* >= 16px: kein Zoom auf iOS! */
  font-family: inherit;
  outline: none;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  transition: box-shadow .2s;
}
.sr-sf:focus { box-shadow: 0 0 0 3px rgba(26,115,232,.18); }

.sr-sf-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  background: var(--blue-lt);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  transition: background .15s;
}
.sr-sf-btn:hover { background: #c7daf8; }

/* "Finde mein Modell" Button */
.sr-find-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--muted);
  font-size: 11px;
  text-align: center;
  padding: 4px;
  min-width: 56px;
  line-height: 1.3;
  -webkit-tap-highlight-color: transparent;
}
.sr-find-btn:hover { color: var(--blue); }

/* Live-Suchergebnisse */
.sr-sdrop {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 56px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--sh2);
  z-index: 999;
  max-height: 320px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.sr-sdi {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 15px;
  cursor: pointer;
  border-bottom: 1px solid var(--border);
  transition: background .1s;
  -webkit-tap-highlight-color: transparent;
}
.sr-sdi:last-child { border-bottom: none; }
.sr-sdi:hover { background: var(--gray); }
.sr-sdi-img { width: 30px; height: 38px; object-fit: contain; flex-shrink: 0; }
.sr-sdi-ph { width: 30px; height: 38px; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.sr-sdi-text { min-width: 0; flex: 1; }
.sr-sdi-label { font-size: 13px; font-weight: 600; display: block; color: var(--navy); }
.sr-sdi-sub { font-size: 11px; color: var(--muted); }
.sr-sdi-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sr-sdi-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: var(--field-bg, #f2f2f2);
  color: var(--field-text, var(--text));
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.sr-sdi-chip-price { color: var(--blue); font-weight: 700; }
.sr-sdrop-msg { padding: 12px 16px; font-size: 13px; color: var(--muted); }

/* ── Geräte-Typen Grid ──────────────────────────────────── */
/* ── Geräte-Typen Grid ─────────────────────────────────────
   Mobile: immer 2 Spalten, große quadratische Karten
   Desktop: 4-5 Spalten
   ──────────────────────────────────────────────────────── */
.sr-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 600px) { .sr-type-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 900px) { .sr-type-grid { grid-template-columns: repeat(4, 1fr); gap: 18px; } }
@media (min-width: 1100px){ .sr-type-grid { grid-template-columns: repeat(5, 1fr); } }

.sr-tc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  aspect-ratio: 1;
  min-height: 140px;
  padding: 20px 12px;
  background: #fff;
  border: 1.5px solid #ebebeb;
  border-radius: 18px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.sr-tc:hover {
  border-color: var(--blue);
  background: var(--blue-bg);
  box-shadow: 0 4px 18px rgba(26,115,232,.12);
  transform: translateY(-2px);
}
.sr-tc.active {
  border-color: var(--blue);
  background: var(--blue-bg);
}
.sr-tc:active { transform: scale(.96); }

.sr-tc-icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #555;
}
.sr-tc:hover .sr-tc-icon { color: var(--blue); }
.sr-tc-icon img { width: 100%; height: 100%; object-fit: contain; }
.sr-tc-icon svg { width: calc(72px * var(--img-scale, 1)); height: calc(72px * var(--img-scale, 1)); }
@media (max-width: 380px) {
  .sr-tc-icon { width: 56px; height: 56px; }
  .sr-tc-icon svg { width: 56px; height: 56px; }
}

.sr-tc-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: .06em;
  text-transform: uppercase;
  text-align: center;
  line-height: 1.3;
  margin-top: 2px;
}
@media (min-width: 480px) { .sr-tc-label { font-size: 12px; } }

/* ── Marken Grid ────────────────────────────────────────────
   Mobile: IMMER 2 Spalten, große quadratische Karten
   Desktop: 5 Spalten
   ──────────────────────────────────────────────────────── */
.sr-brand-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
@media (min-width: 540px) { .sr-brand-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 760px) { .sr-brand-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 960px) { .sr-brand-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; } }

.sr-bc {
  aspect-ratio: 1;
  min-height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid #ebebeb;
  border-radius: 18px;
  cursor: pointer;
  padding: 24px 18px;
  transition: border-color .18s, box-shadow .18s, transform .12s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.sr-bc:hover {
  border-color: var(--blue);
  box-shadow: 0 4px 18px rgba(26,115,232,.12);
  transform: translateY(-2px);
}
.sr-bc:active { transform: scale(.96); }

.sr-brand-logo {
  max-width: 100%;
  max-height: calc(70px * var(--img-scale, 1));
  object-fit: contain;
  filter: grayscale(1);
  opacity: .65;
  transition: filter .2s, opacity .2s;
}
.sr-bc:hover .sr-brand-logo {
  filter: none;
  opacity: 1;
}
.sr-brand-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  text-align: center;
  line-height: 1.3;
}

/* ── Serien-Filter ──────────────────────────────────────── */
.sr-series-wrap { margin-bottom: 22px; }
.sr-series-scroll-outer {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}
.sr-series-list {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
}
.sr-series-list::-webkit-scrollbar { display: none; }
.sr-series-card {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s;
  min-width: 140px;
  -webkit-tap-highlight-color: transparent;
}
.sr-series-card:hover { border-color: var(--blue); }
.sr-series-card.active { border-color: var(--blue); background: var(--blue-bg); }
.sr-series-img { width: 44px; height: 54px; object-fit: contain; }
.sr-series-info { display: flex; flex-direction: column; }
.sr-series-name { font-size: 13px; font-weight: 600; color: var(--navy); }
.sr-series-cnt { font-size: 11px; color: var(--muted); margin-top: 2px; }

.sr-series-arrow {
  width: 32px; height: 32px;
  background: var(--blue-lt);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--blue);
  flex-shrink: 0;
  transition: background .15s;
}
.sr-series-arrow:hover { background: #c7daf8; }

/* ── Modell-Grid (2 auf Mobile!) ───────────────────────── */
.sr-model-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}
.sr-model-count { font-size: 15px; font-weight: 700; color: var(--navy); }
.sr-cnt-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  min-width: 26px;
  height: 26px;
  border-radius: 13px;
  padding: 0 7px;
  margin-left: 6px;
}
.sr-model-search {
  position: relative;
  min-width: 180px;
}
.sr-model-search svg {
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}
.sr-mfilter {
  width: 100%;
  padding: 10px 14px 10px 34px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-size: 16px; /* no zoom! */
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
}
.sr-mfilter:focus { border-color: var(--blue); }

.sr-model-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* Mobile: IMMER 2 */
  gap: 14px;
}
@media (min-width: 540px) { .sr-model-grid { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 780px) { .sr-model-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1000px){ .sr-model-grid { grid-template-columns: repeat(5, 1fr); gap: 18px; } }

/* Modellkarten: groß, quadratisch, großes Produktbild (wie Referenz) */
.sr-mc {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  aspect-ratio: 1 / 1.18;
  min-height: 230px;
  padding: 28px 14px 20px;
  background: #fff;
  border: 1.5px solid #ebebeb;
  border-radius: 18px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
  text-align: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  box-shadow: 0 1px 6px rgba(0,0,0,.05);
}
.sr-mc:hover {
  border-color: var(--blue);
  box-shadow: 0 6px 22px rgba(26,115,232,.13);
  transform: translateY(-3px);
}
.sr-mc:active { transform: scale(.97); }

.sr-mc-img-wrap {
  height: calc(130px * var(--img-scale, 1));
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.sr-mc-img-wrap img {
  max-width: 100%;
  max-height: calc(130px * var(--img-scale, 1));
  object-fit: contain;
}
@media (max-width: 480px) {
  .sr-mc { min-height: 190px; padding: 20px 10px 16px; }
  .sr-mc-img-wrap { height: 100px; }
  .sr-mc-img-wrap img { max-height: 100px; }
}
.sr-mc-placeholder { font-size: 48px; color: var(--border); }
.sr-mcn {
  font-size: 15px;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
  margin-top: auto;
}
@media (max-width: 480px) { .sr-mcn { font-size: 13px; } }
.sr-mc-nums { font-size: 12px; color: var(--blue); line-height: 1.4; }
@media (max-width: 480px) { .sr-mc-nums { font-size: 10px; } }

/* "Finde mein Modell" Karte */
.sr-mc-find .sr-mc-find-ico { opacity: .65; }
.sr-mc-find .sr-mcn { color: var(--navy); font-weight: 600; }

/* ── Gerät-Info (Reparatur-Screen) ─────────────────────── */
.sr-dev-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}
.sr-dthumb { width: 48px; height: 60px; object-fit: contain; }
.sr-dname { font-size: 18px; font-weight: 700; color: var(--navy); }
.sr-dtype { font-size: 13px; color: var(--blue); font-weight: 500; }
.sr-dnumbers { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
/* Gesamtpreis-Zeile in der Gerät-Info (Versand-/Checkout-Schritt) - zeigt
   Modell, Reparaturart und laufenden Gesamtpreis durchgehend oben an. */
.sr-dev-info-price { font-size: 13px; color: var(--muted); margin-top: 3px; }
.sr-dev-info-price-val { color: var(--navy); font-weight: 700; }
.sr-num-tag {
  font-size: 11px;
  color: var(--navy);
  background: var(--gray2);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 2px 7px;
  font-family: monospace;
}

/* ── Farbauswahl ───────────────────────────────────────── */
.sr-colors-sec { margin-bottom: 18px; }
.sr-color-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sr-cswatch {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 2px solid var(--border);
  border-radius: 22px;
  background: #fff;
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  transition: border-color .15s;
  -webkit-tap-highlight-color: transparent;
}
.sr-cswatch:hover, .sr-cswatch.sel { border-color: var(--navy); }
.sr-cdot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.1); flex-shrink: 0; }

/* ── Steuer-Toggle ──────────────────────────────────────── */
.sr-svc-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-wrap: wrap;
  gap: 10px;
}
.sr-tax-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
.sr-tax-lbl { font-size: 11px; font-weight: 700; color: var(--navy); letter-spacing: .03em; }
.sr-tog {
  width: 44px;
  height: 24px;
  background: var(--green);
  border-radius: 12px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
  flex-shrink: 0;
}
.sr-tog[data-on="false"] { background: var(--border); }
.sr-tog-knob {
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 3px; left: 3px;
  transition: transform .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
}
.sr-tog[data-on="true"] .sr-tog-knob { transform: translateX(20px); }

/* ── Reparatur-Liste ────────────────────────────────────── */
.sr-svc-list { display: flex; flex-direction: column; gap: 12px; }

/* Eigenständige Top-Reparaturen ohne Unterpunkte (z.B. "Untersuchung",
   "Wasserschaden") sowie geöffnete Kategorien: 2-spaltiges Karten-Raster
   passend zum Referenzdesign. */
.sr-svc-top,
.sr-svc-subs.open {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 640px) {
  .sr-svc-top, .sr-svc-subs.open { grid-template-columns: 1fr; }
}

/* Kategorie-Kopf (aufklappbar) – eigene, in sich geschlossene Karte;
   die zugehörigen Unterreparaturen (.sr-svc-subs) sitzen als eigenständiges
   Karten-Raster direkt darunter, nicht mehr optisch "angeklebt". */
.sr-svcg {
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sh);
}

/* Hauptreparatur Header */
.sr-svc-hd {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
  cursor: pointer;
  background: #fff;
  transition: background .15s;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sr-svc-hd:hover, .sr-svc-hd.open { background: var(--blue-bg); }
.sr-svc-hd-ico {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}
.sr-svc-hd-name { flex: 1; font-size: 15px; font-weight: 600; color: var(--navy); }
.sr-svc-cnt {
  font-size: 12px; font-weight: 700;
  background: var(--blue); color: #fff;
  padding: 3px 10px; border-radius: 11px;
  white-space: nowrap; flex-shrink: 0;
}
.sr-svc-arr {
  width: 18px; height: 18px;
  color: var(--muted);
  flex-shrink: 0;
  transition: transform .2s;
}
.sr-svc-hd.open .sr-svc-arr { transform: rotate(180deg); }

/* Unterreparaturen: display wird von .sr-svc-top/.sr-svc-subs.open oben
   auf grid gesetzt; hier nur der Default (geschlossen = unsichtbar). */
.sr-svc-subs { display: none; }
.sr-svc-empty { padding: 14px 18px; color: var(--muted); font-size: 13px; font-style: italic; grid-column: 1 / -1; }

/* Reparatur-Item: eigenständige Karte mit vollem Rahmen (Referenzdesign),
   passt sowohl im 2-Spalten-Raster als auch einzeln (flache Liste). */
.sr-svc-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 18px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: border-color .15s, background .1s, box-shadow .15s;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sr-svc-item:hover { border-color: var(--blue); }
.sr-svc-item.sel   { background: var(--blue-bg); border-color: var(--blue); box-shadow: 0 0 0 1px var(--blue); }
.sr-svc-ico {
  width: 42px; height: 42px;
  background: var(--gray);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  flex-shrink: 0;
}
.sr-svc-img { width: 42px; height: 42px; object-fit: contain; border-radius: 9px; flex-shrink: 0; }
.sr-svc-body { flex: 1; min-width: 0; }
.sr-svc-name { font-size: 15px; font-weight: 700; color: var(--navy); margin-bottom: 3px; }
.sr-svc-dur {
  font-size: 11px;
  color: var(--blue);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 5px;
}
.sr-svc-desc { font-size: 13px; color: var(--muted); line-height: 1.5; margin-bottom: 3px; }
.sr-svc-warr { font-size: 11px; color: var(--green); font-weight: 600; }
.sr-svc-date { font-size: 11px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 4px; }

/* Preis-Badge exakt wie Screenshots */
.sr-pbadge {
  flex-shrink: 0;
  border-radius: 9px;
  align-self: flex-start;
  display: flex;
}
.sr-pbadge-free {
  background: var(--blue-lt);
  color: var(--blue);
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}
.sr-pbadge-paid {
  background: var(--blue-lt);
  color: var(--blue);
  padding: 8px 12px;
  align-items: baseline;
}
.sr-pb-cur  { font-size: 13px; font-weight: 600; margin-right: 1px; }
.sr-pb-int  { font-size: 26px; font-weight: 800; line-height: 1; }
.sr-pb-dec  { font-size: 14px; font-weight: 600; }

@media (max-width: 380px) {
  .sr-pb-int { font-size: 22px; }
  .sr-svc-item { gap: 10px; padding: 13px 12px; }
}

/* ── Service-Methode (Versand) ──────────────────────────── */
.sr-section-label {
  font-size: 13px;
  color: var(--muted);
  margin-bottom: 14px;
  font-weight: 500;
}
.sr-ship-list { display: flex; flex-direction: column; gap: 10px; }
.sr-ship-card {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 18px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sr-ship-card:hover { border-color: var(--blue); }
.sr-ship-card.sel   { border-color: var(--blue); background: var(--blue-bg); }
.sr-ship-ico { width: 40px; height: 40px; flex-shrink: 0; color: var(--muted); }
.sr-ship-ico svg { width: 100%; height: 100%; }
.sr-ship-ico img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }
.sr-ship-info { flex: 1; }
.sr-ship-name { font-size: 15px; font-weight: 700; color: var(--navy); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sr-ship-desc { font-size: 12px; color: var(--muted); margin-top: 3px; display: block; }
.sr-ship-badge {
  font-size: 12px;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 12px;
  white-space: nowrap;
}
.sr-ship-badge-free { background: #dbeafe; color: #1e40af; }
.sr-ship-badge-paid { background: #eff6ff; color: #1e40af; }
.sr-ship-chk { flex-shrink: 0; color: var(--border); }
.sr-ship-chk svg { width: 16px; height: 16px; }
.sr-ship-card.sel .sr-ship-chk { color: var(--blue); }
.sr-chk-path { display: none; }
.sr-ship-card.sel .sr-chk-path { display: block; }

/* ── Standort-/Filialauswahl ────────────────────────────── */
.sr-shop-search {
  position: relative;
  margin-bottom: 12px;
}
.sr-shop-search svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.sr-shop-search-in {
  width: 100%;
  padding: 12px 14px 12px 40px;
  border: 1.5px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 14px;
  font-family: inherit;
  outline: none;
  transition: border-color .15s;
}
.sr-shop-search-in:focus { border-color: var(--blue); }
.sr-shop-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 360px;
  overflow-y: auto;
  padding-right: 2px;
}
.sr-shop-card {
  display: block;
  text-align: left;
  width: 100%;
  padding: 0;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.sr-shop-card:hover { border-color: var(--blue); }
.sr-shop-card.sel   { border-color: var(--blue); background: var(--blue-bg); }
.sr-shop-img { width: 100%; height: 90px; background: var(--gray2); overflow: hidden; }
.sr-shop-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sr-shop-body { padding: 12px 14px; }
.sr-shop-name { font-size: 14px; font-weight: 700; color: var(--navy); }
.sr-shop-phone { font-size: 13px; color: var(--blue); font-weight: 600; margin-top: 2px; }
.sr-shop-addr { font-size: 12px; color: var(--muted); margin-top: 3px; line-height: 1.4; }

/* Öffnungszeiten der gewählten Filiale (siehe renderShopHours() in booking.js) */
.sr-shop-hours {
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--gray2);
  border: 1px solid var(--border);
  border-radius: var(--r);
}
.sr-shop-hours-title { font-size: 13px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.sr-shop-hours-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  color: var(--text);
  padding: 3px 0;
}
.sr-shop-hours-row span:first-child { font-weight: 600; color: var(--navy); }
.sr-shop-continue-btn {
  margin-top: 12px;
  width: 100%;
  padding: 12px 16px;
  border-radius: var(--r);
  background: var(--blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
}
.sr-shop-continue-btn:hover { background: var(--blue-d); }

/* ── Checkout ───────────────────────────────────────────── */
.sr-ctype-row {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.sr-ctype {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: all .15s;
  -webkit-tap-highlight-color: transparent;
}
.sr-ctype.active { border-color: var(--blue); background: var(--blue-bg); color: var(--blue); }
.sr-ctype-chk { flex-shrink: 0; width: 16px; height: 16px; }
.sr-chk-mark { display: none; }
.sr-ctype.active .sr-chk-mark { display: block; }

.sr-b2b-fields { background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px; padding: 14px; margin-bottom: 14px; }

/* Floating Label Felder */
.sr-form-section { margin-bottom: 16px; }
.sr-frow { display: flex; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.sr-fl { position: relative; flex: 1; min-width: 120px; }
@media (max-width: 600px) {
  /* Referenzbilder zeigen Formularfelder auf Mobile durchgehend
     einspaltig (z. B. Vorname/Nachname je eigene Zeile) statt 2-up. */
  .sr-frow { flex-direction: column; }
  .sr-fl { min-width: 0; }
}
.sr-in {
  width: 100%;
  padding: 21px 14px 6px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 400;
  font-family: inherit;
  outline: none;
  background: #fff;
  -webkit-appearance: none;
  appearance: none;
  transition: border-color .2s;
  box-sizing: border-box;
}
.sr-in:focus { border-color: var(--blue); }

/* ── Einheitliches Pillen-Design für ALLE Text-/Auswahlfelder im
   Booking-Flow (Suche, Filter, Checkout, Angebots-Formular, Gutschein,
   Standortsuche, …) ─────────────────────────────────────────────────
   Zentral über hohe Selektor-Spezifität statt pro Feld einzeln, damit
   jedes bestehende und künftige Feld automatisch erfasst wird. Ändert
   bewusst NUR Optik (Füllfarbe/Rahmen/Rundung/Fokus) - Breite, Padding,
   Schriftgröße und Abstände jedes einzelnen Feldes bleiben unverändert,
   damit an Layout/Funktion nichts kaputt geht. Der Live-Chat (eigene,
   bewusst andere Optik) ist ausdrücklich ausgenommen. */
#sr-app input[type="text"]:not(.sr-chat-in):not(.sr-chat-msg-in),
#sr-app input[type="email"]:not(.sr-chat-in):not(.sr-chat-msg-in),
#sr-app input[type="tel"]:not(.sr-chat-in):not(.sr-chat-msg-in),
#sr-app input[type="number"]:not(.sr-chat-in):not(.sr-chat-msg-in),
#sr-app input[type="search"]:not(.sr-chat-in):not(.sr-chat-msg-in),
#sr-app input[type="url"]:not(.sr-chat-in):not(.sr-chat-msg-in),
#sr-app select,
#sr-app textarea {
  background: var(--field-bg, #f2f2f2);
  color: var(--field-text, var(--text));
  border: 1.5px solid transparent; /* reserviert die Breite, die der Fokus-Rahmen später braucht - kein Sprung im Layout */
  border-radius: 999px; /* Pillen-/Stadium-Form, passt sich automatisch an jede Feldhöhe an */
  /* Normale Schriftstärke erzwingen - manche Theme-Stylesheets machen
     Formularfelder standardmäßig fett; die hohe Spezifität dieser Regel
     stellt sicher, dass das hier zuverlässig überschrieben wird. */
  font-weight: 400;
}
#sr-app textarea {
  border-radius: 22px; /* echte Pille wäre bei mehrzeiligem Text unlesbar verzerrt - großzügig abgerundetes Rechteck stattdessen */
}
#sr-app input[type="text"]:not(.sr-chat-in):not(.sr-chat-msg-in):focus,
#sr-app input[type="email"]:not(.sr-chat-in):not(.sr-chat-msg-in):focus,
#sr-app input[type="tel"]:not(.sr-chat-in):not(.sr-chat-msg-in):focus,
#sr-app input[type="number"]:not(.sr-chat-in):not(.sr-chat-msg-in):focus,
#sr-app input[type="search"]:not(.sr-chat-in):not(.sr-chat-msg-in):focus,
#sr-app input[type="url"]:not(.sr-chat-in):not(.sr-chat-msg-in):focus,
#sr-app select:focus,
#sr-app textarea:focus {
  background: #fff;
  border-color: var(--field-focus, var(--blue-lt));
  box-shadow: 0 0 0 3px var(--field-focus, var(--blue-lt));
}
#sr-app input::placeholder,
#sr-app textarea::placeholder {
  color: var(--field-placeholder, var(--muted));
  opacity: 1; /* Firefox setzt Platzhalter sonst zusätzlich auf reduzierte Deckkraft */
}

.sr-fl label {
  position: absolute;
  left: 14px;
  top: 8px;
  font-size: 9px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .08em;
  text-transform: uppercase;
  pointer-events: none;
  white-space: nowrap;
}

/* Zusatzfelder (Formular-Baukasten) - Text-/Textarea-Felder nutzen die
   bestehenden .sr-frow/.sr-fl-Regeln oben, Checkboxen die bestehenden
   .sr-agb-*-Regeln (siehe AGB weiter unten). Hier nur der zusätzliche
   Zwischenraum je Feld und die Box für Checkbox-Gruppen. */
.sr-custom-fields { margin-bottom: 4px; }
.sr-cf-field { margin-bottom: 16px; }
.sr-cf-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm, 10px);
}
.sr-cf-group .sr-agb-label { margin: 0; }

/* Zahlungsmethoden */
.sr-pay-section { margin-bottom: 18px; }
.sr-pay-wc-note {
  margin: 0;
  padding: 12px 14px;
  background: #f8fafc;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-muted, #64748b);
}
/* AGB */
.sr-agb-label {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  color: var(--muted);
  cursor: pointer;
  margin-bottom: 18px;
  -webkit-tap-highlight-color: transparent;
}
.sr-agb-label a { color: var(--blue); }
.sr-agb-inp { position: absolute; opacity: 0; pointer-events: none; }
.sr-agb-chk { flex-shrink: 0; }
.sr-agb-chk svg { width: 16px; height: 16px; }
.sr-agb-mark { display: none; }
.sr-agb-inp:checked ~ .sr-agb-label .sr-agb-mark,
.sr-agb-label:has(.sr-agb-inp:checked) .sr-agb-mark { display: block; }

/* Checkout Footer */
.sr-checkout-footer { margin-top: 18px; }
.sr-co-total { font-size: 14px; color: var(--muted); text-align: right; margin-bottom: 12px; }
.sr-co-total strong { color: var(--navy); font-size: 17px; }
.sr-co-btns { display: flex; flex-direction: column; gap: 10px; }
.sr-btn-book {
  width: 100%;
  padding: 16px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--r);
  cursor: pointer;
  text-align: center;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.sr-btn-book:hover { background: var(--blue-d); }
.sr-btn-book strong { display: block; font-size: 16px; font-weight: 700; }
.sr-btn-book small { display: block; font-size: 11px; opacity: .75; margin-top: 3px; }

.sr-err {
  background: #fee2e2;
  border: 1px solid #fca5a5;
  color: var(--msg-color, #991b1b);
  padding: 11px 15px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 14px;
}

/* ── Sidebar ────────────────────────────────────────────── */
@media (min-width: 901px) { .sr-sidebar { position: sticky; top: 18px; } }
.sr-sb-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  overflow: hidden;
  box-shadow: var(--sh);
  margin-bottom: 10px;
}
/* display bewusst nicht unbedingt (Muster wie .sr-chat-popup oben):
   #sr-sb-dev wird per [hidden] ein-/ausgeblendet. */
.sr-sb-device {
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
}
.sr-sb-device:not([hidden]) { display: flex; }
.sr-sb-dimg { width: 28px; height: 36px; object-fit: contain; }
.sr-sb-dname { font-size: 13px; font-weight: 700; color: var(--navy); }
.sr-sb-dtype { font-size: 11px; color: var(--blue); }

.sr-sb-title {
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
  padding: 16px 18px 8px;
}
.sr-sb-model { font-size: 13px; color: var(--navy); padding: 0 18px 12px; }
.sr-sb-color-row { display: none; align-items: center; gap: 6px; padding: 0 18px 12px; font-size: 13px; color: var(--navy); }
.sr-sb-color-row:not([hidden]) { display: flex; }
.sr-sb-color-label { color: var(--muted); }
#sr-sb-items { padding: 0 18px 14px; min-height: 44px; }
.sr-sb-empty { color: var(--muted); font-size: 13px; font-style: italic; }
.sr-sb-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.sr-sb-item:last-child { border-bottom: none; }
.sr-sb-in { flex: 1; color: var(--navy); }
.sr-sb-ip { font-weight: 700; white-space: nowrap; }
.sr-sb-rm {
  background: none;
  border: none;
  color: var(--red);
  font-size: 16px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
}

.sr-sb-totals { padding: 14px 18px; background: var(--gray); border-top: 1px solid var(--border); }
/* display bewusst nicht unbedingt: .sr-sb-combo-row (#sr-sb-combo-r) wird
   per [hidden] gesteuert. */
.sr-sb-row { justify-content: space-between; font-size: 13px; color: var(--muted); padding: 3px 0; }
.sr-sb-row:not([hidden]) { display: flex; }
.sr-sb-combo-row { color: var(--red); }
.sr-combo-lbl { display: flex; align-items: center; gap: 5px; }
.sr-combo-val { font-weight: 700; }

/* Kombi-Rabatt Hinweis – display bewusst nicht unbedingt, #sr-combo-hint
   wird per [hidden] gesteuert. */
.sr-combo-hint {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  color: #15803d;
  margin: 8px 0;
  align-items: flex-start;
  gap: 6px;
}
.sr-combo-hint:not([hidden]) { display: flex; }
.sr-combo-hint svg { flex-shrink: 0; margin-top: 1px; }

/* Gutschein */
.sr-coupon-row { display: flex; gap: 8px; margin: 10px 0; }
.sr-coupon-in {
  flex: 1;
  padding: 9px 12px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  -webkit-appearance: none;
}
.sr-coupon-in:focus { border-color: var(--blue); }
.sr-coupon-btn {
  width: 36px;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s;
}
.sr-coupon-btn:hover { border-color: var(--blue); }

.sr-sb-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1.5px solid var(--border);
}
.sr-sb-total span { font-size: 18px; font-weight: 700; color: var(--navy); }
.sr-total-num { font-size: 28px; font-weight: 800; color: var(--navy); }
.sr-sb-tax { font-size: 11px; color: var(--muted); margin-top: 3px; }

/* display bewusst nicht unbedingt gesetzt (gleiches Kaskadenmuster wie bei
   .sr-chat-popup, siehe dortiger Kommentar): sonst bleibt der komplette
   Aktions-Block inkl. "Ein Angebot Erstellen" sichtbar, obwohl [hidden]
   gesetzt ist – u. a. schon vor Auswahl einer Reparatur. */
.sr-sb-actions { flex-direction: column; }
.sr-sb-actions:not([hidden]) { display: flex; }
.sr-sb-offer-btn {
  padding: 15px 18px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0 0 0 0;
  color: var(--blue);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background .15s;
  line-height: 1.4;
}
.sr-sb-offer-btn:hover { background: var(--gray); }
.sr-sb-offer-btn small { display: block; font-size: 11px; font-weight: 400; opacity: .8; margin-top: 2px; }
.sr-sb-book-btn {
  padding: 16px 18px;
  background: var(--blue);
  border: none;
  border-radius: 0 0 var(--r) var(--r);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  transition: background .15s;
  line-height: 1.4;
}
.sr-sb-book-btn:hover { background: var(--blue-d); }
.sr-sb-book-btn small { display: block; font-size: 11px; font-weight: 400; opacity: .8; margin-top: 2px; }

/* Angebot/Weiter oben im Reparatur-Auswahl-Bereich (Schritt 2) - eigene,
   vollständig abgerundete Button-Optik statt der sidebar-eigenen Klassen
   (die bewusst nur unten abgerundet sind, weil sie dort den Abschluss der
   Sidebar-Karte bilden - das passt hier nicht, da beide Buttons
   nebeneinander freistehend erscheinen). */
.sr-svc-top-actions { display: none; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.sr-svc-top-actions:not([hidden]) { display: flex; }
/* Ab Desktop/Laptop-Breite steht die Sidebar mit Gesamtsumme und den
   gleichen Aktionen ohnehin sichtbar daneben (siehe sticky-Regel oben) -
   die Buttons zusätzlich unter dem Produktbild/der Beschreibung zu zeigen
   ist dort redundant. Auf Mobile (Sidebar im Seitenfluss weiter unten)
   bleiben sie zum schnellen Zugriff erhalten. */
@media (min-width: 901px) {
  .sr-svc-top-actions:not([hidden]) { display: none; }
}
.sr-svc-top-offer,
.sr-svc-top-next {
  flex: 1;
  min-width: 200px;
  padding: 14px 18px;
  border-radius: var(--r);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  text-align: center;
  line-height: 1.4;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.sr-svc-top-offer small,
.sr-svc-top-next small { display: block; font-size: 11px; font-weight: 400; opacity: .8; margin-top: 2px; }
.sr-svc-top-offer {
  background: #fff;
  border: 1.5px solid var(--border);
  color: var(--blue);
}
.sr-svc-top-offer:hover { background: var(--gray); }
.sr-svc-top-next {
  background: var(--blue);
  border: none;
  color: #fff;
}
.sr-svc-top-next:hover { background: var(--blue-d); }

/* ── Erfolg ─────────────────────────────────────────────── */
.sr-success-wrap { text-align: center; padding: 40px 20px; }
.sr-success-icon {
  width: 72px; height: 72px;
  background: var(--green);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; color: #fff;
  margin: 0 auto 20px;
}
.sr-suc-label { font-size: 13px; color: var(--muted); margin-bottom: 4px; }
.sr-suc-number { font-size: 26px; font-weight: 700; color: var(--navy); }
.sr-suc-msg { color: var(--muted); font-size: 14px; }
.sr-track-link {
  display: inline-block;
  margin-top: 16px;
  padding: 12px 24px;
  background: var(--blue);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}

/* ── Angebot-Modal ──────────────────────────────────────── */
.sr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
}
.sr-modal-box {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 900px;
  position: relative;
  overflow: hidden;
  box-shadow: var(--sh2);
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.sr-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 34px; height: 34px;
  background: var(--gray);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--muted);
  transition: background .15s;
  z-index: 1;
}
.sr-modal-close:hover { background: var(--border); }
.sr-modal-head { padding: 28px 28px 0; }
.sr-modal-head h3 { font-size: 20px; font-weight: 400; margin-bottom: 5px; }
.sr-modal-head h3 strong { font-weight: 700; }
.sr-modal-sub { font-size: 13px; color: var(--blue); margin-bottom: 14px; }
.sr-modal-dev { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; border-bottom: 1px solid var(--border); }
.sr-modal-body { padding: 18px 28px; display: flex; flex-direction: column; gap: 12px; }
/* 2-spaltiges Layout: links Versandart/Shops zur Auswahl, rechts das
   eigentliche Kontaktformular - ab 720px nebeneinander, darunter
   gestapelt (Formular zuerst, damit der Kunde sofort mit dem Ausfüllen
   beginnen kann). */
.sr-modal-grid { display: flex; flex-direction: column-reverse; gap: 22px; }
.sr-modal-left { display: flex; flex-direction: column; }
.sr-modal-col-title { font-size: 12px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .04em; margin: 0 0 8px; }
.sr-modal-ship-list, .sr-modal-shops-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; padding-right: 2px; }
.sr-modal-ship-list .sr-ship-card { padding: 8px; }
.sr-modal-ship-list .sr-ship-ico { width: 32px; height: 32px; }
.sr-modal-shops-list .sr-shop-card { cursor: default; }
.sr-modal-shops-list .sr-shop-body { padding: 10px 12px; }
@media (min-width: 720px) {
  .sr-modal-grid { flex-direction: row; align-items: flex-start; }
  .sr-modal-left { flex: 0 0 260px; }
  .sr-modal-right { flex: 1; min-width: 0; }
}
/* display bewusst nicht unbedingt, #sr-off-ok wird per [hidden] gesteuert. */
.sr-modal-success {
  margin: 0 28px 14px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 12px 16px;
  color: #166534;
  font-size: 13px;
  align-items: flex-start; gap: 8px;
}
.sr-modal-success:not([hidden]) { display: flex; }
.sr-modal-pdf { padding: 0 28px 14px; }
.sr-pdf-btn {
  display: inline-block;
  padding: 12px 22px;
  background: var(--blue);
  color: #fff;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
}
.sr-modal-send-btn {
  display: block;
  width: 100%;
  padding: 18px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s;
  line-height: 1.4;
}
.sr-modal-send-btn:hover { background: var(--blue-d); }
.sr-modal-send-btn small { display: block; font-size: 11px; font-weight: 400; opacity: .8; margin-top: 2px; }

/* ── Mobile Bottom Bar ──────────────────────────────────── */
/* display bewusst nicht unbedingt: #sr-mbar wird per [hidden] gesteuert,
   sonst wäre die Bar auf Mobile schon vor Auswahl einer Reparatur sichtbar
   (gleiches Kaskadenmuster wie bei .sr-chat-popup, siehe dortiger Kommentar). */
.sr-mbar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 2px solid var(--border);
  padding: 12px 16px;
  padding-bottom: max(12px, env(safe-area-inset-bottom));
  align-items: center;
  gap: 14px;
  z-index: 100;
  box-shadow: 0 -3px 16px rgba(0,0,0,.09);
}
.sr-mbar:not([hidden]) { display: flex; }
.sr-mbar-cnt   { font-size: 12px; color: var(--muted); display: block; }
.sr-mbar-total { font-size: 17px; font-weight: 700; color: var(--navy); display: block; }
.sr-mbar-btn {
  margin-left: auto;
  padding: 13px 22px;
  background: var(--blue);
  color: #fff;
  border: none;
  border-radius: var(--r);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (min-width: 901px) { .sr-mbar { display: none !important; } }

/* ── Loader / Spinner ───────────────────────────────────── */
.sr-load { display: flex; justify-content: center; padding: 40px; }
/* 12-Speichen-Ladeanzeige (inline SVG, siehe SPIN_SVG in booking.js bzw.
   $sr_spinner in booking.php) statt des früheren Ring-Spinners. fill=
   "currentColor" im SVG selbst greift die hier gesetzte color aktiv auf -
   folgt so automatisch der Primärfarbe (--blue) bzw. der Textfarbe eines
   Buttons, in dem der Spinner eingefügt wird (siehe .sr-btn-spin). */
.sr-spin {
  width: 32px; height: 32px;
  color: var(--blue);
  animation: spin .9s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }
/* Kleinere Variante für den Ladezustand direkt in einem Button (siehe
   doSubmit() in booking.js) - erbt die Textfarbe des Buttons statt der
   Primärfarbe, damit sie z.B. auf blauem Button-Hintergrund weiß erscheint. */
.sr-btn-spin { width: 16px; height: 16px; color: currentColor; vertical-align: middle; margin-left: 8px; }
.sr-empty { color: var(--muted); font-size: 13px; }
.sr-info-box { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; padding: 13px 16px; border-radius: 10px; font-size: 13px; }

/* ── Livechat Widget ────────────────────────────────────────────────────
   Selektoren sind bewusst mit #sr-chat-widget vorangestellt (statt reiner
   Klasse): das erhöht die CSS-Spezifität gezielt, damit generische
   Theme-Regeln (z. B. "button" oder ".chat-*"-Resets) das Widget nicht
   versehentlich überschreiben – ohne pauschale !important-Regeln.
   Größe: 48px Desktop, 44px Mobile (Zielvorgabe 44–46px). Popup bleibt
   per [hidden] (siehe chat.js) standardmäßig geschlossen und öffnet sich
   erst nach Klick auf den Button – daran ändert dieser CSS-Block nichts.
   ────────────────────────────────────────────────────────────────────── */
#sr-chat-widget.sr-chat-w { position: fixed; bottom: 24px; right: 24px; z-index: 9900; }
@media (max-width: 900px) { #sr-chat-widget.sr-chat-w { bottom: 82px; } }

#sr-chat-widget .sr-chat-fab {
  width: 48px; height: 48px;
  border-radius: 50%;
  background: var(--blue);
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 14px rgba(26,115,232,.35);
  transition: transform .18s, box-shadow .18s;
  padding: 11px;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}
@media (max-width: 900px) {
  #sr-chat-widget .sr-chat-fab { width: 44px; height: 44px; padding: 10px; }
}
#sr-chat-widget .sr-chat-fab:hover { transform: scale(1.07); box-shadow: 0 4px 18px rgba(26,115,232,.45); }
#sr-chat-widget .sr-chat-fab:active { transform: scale(.95); }
#sr-chat-widget .sr-chat-fab-img { width: 100%; height: 100%; object-fit: contain; filter: invert(1) brightness(2); }
#sr-chat-widget .sr-chat-badge {
  position: absolute; top: -2px; right: -2px;
  width: 15px; height: 15px;
  background: var(--red);
  border-radius: 50%;
  font-size: 9px; font-weight: 700; color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
#sr-chat-widget .sr-chat-popup {
  position: absolute; bottom: 58px; right: 0;
  width: 306px; max-height: 480px;
  background: #fff; border-radius: 14px;
  box-shadow: 0 8px 32px rgba(20,30,45,.18);
  flex-direction: column; overflow: hidden;
  transform-origin: bottom right;
}
/* WICHTIG: "display" absichtlich NICHT in der Basisregel oben, sondern nur
   hier auf :not([hidden]) beschränkt. Ein unbedingtes "display:flex" auf
   einem Element, das per HTML-Attribut [hidden] gesteuert wird, gewinnt in
   der CSS-Kaskade grundsätzlich gegen die Browser-Standardregel
   "[hidden]{display:none}" – Autor-CSS schlägt User-Agent-CSS unabhängig
   von der Spezifität. Das war die tatsächliche Ursache dafür, dass das
   Popup (und dasselbe Muster bei .sr-chat-start / .sr-chat-input-area)
   beim Laden der Seite sichtbar war, obwohl [hidden] gesetzt ist. */
#sr-chat-widget .sr-chat-popup:not([hidden]) {
  display: flex;
  /* Dezente Öffnen-Animation – reine CSS-Einblendung beim Sichtbarwerden,
     keine JS-Änderung nötig, da chat.js weiterhin nur [hidden] umschaltet. */
  animation: sr-chat-pop .16s ease-out;
}
@keyframes sr-chat-pop {
  from { opacity: 0; transform: scale(.94) translateY(6px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  #sr-chat-widget .sr-chat-popup:not([hidden]) { animation: none; }
}
@media (max-width: 900px) { #sr-chat-widget .sr-chat-popup { bottom: 54px; } }
@media (max-width: 400px) { #sr-chat-widget .sr-chat-popup { width: calc(100vw - 14px); right: -7px; } }
#sr-chat-widget .sr-chat-ph {
  background: linear-gradient(135deg,var(--blue),var(--blue-d));
  padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
#sr-chat-widget .sr-chat-ph-left { display: flex; align-items: center; gap: 9px; }
#sr-chat-widget .sr-chat-ph-avatar { width: 34px; height: 34px; background: rgba(255,255,255,.2); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
#sr-chat-widget .sr-chat-ph-title { color: #fff; font-weight: 700; font-size: 13.5px; }
#sr-chat-widget .sr-chat-ph-sub { color: rgba(255,255,255,.8); font-size: 11.5px; margin-top: 2px; display: flex; align-items: center; gap: 5px; }
#sr-chat-widget .sr-chat-online-dot { width: 7px; height: 7px; background: #4ade80; border-radius: 50%; animation: cpulse 1.5s ease infinite; }
@keyframes cpulse { 0%,100%{opacity:1} 50%{opacity:.4} }
#sr-chat-widget .sr-chat-min-btn { background: none; border: none; color: rgba(255,255,255,.7); font-size: 17px; cursor: pointer; }
/* Gleiches Muster wie beim Popup: display nur bei :not([hidden]), sonst
   bleibt das Start-Formular auch nach Chat-Beginn sichtbar (siehe Hinweis
   bei .sr-chat-popup oben). */
#sr-chat-widget .sr-chat-start { padding: 16px; flex-direction: column; gap: 10px; flex: 1; overflow-y: auto; }
#sr-chat-widget .sr-chat-start:not([hidden]) { display: flex; }
#sr-chat-widget .sr-chat-welcome { text-align: center; padding: 4px 0 6px; }
#sr-chat-widget .sr-chat-welcome h4 { font-size: 14.5px; font-weight: 700; color: var(--navy); margin: 8px 0 5px; }
#sr-chat-widget .sr-chat-welcome p { font-size: 11.5px; color: var(--muted); margin: 0; line-height: 1.5; }
#sr-chat-widget .sr-chat-field { display: flex; flex-direction: column; gap: 4px; }
#sr-chat-widget .sr-chat-field label { font-size: 11px; font-weight: 600; color: var(--muted); }
#sr-chat-widget .sr-chat-in { padding: 9px 11px; border: 1.5px solid var(--border); border-radius: 9px; font-size: 13.5px; font-family: inherit; outline: none; -webkit-appearance: none; }
#sr-chat-widget .sr-chat-in:focus { border-color: var(--blue); }
#sr-chat-widget .sr-chat-start-btn { padding: 11px; background: var(--blue); color: #fff; border: none; border-radius: 10px; font-size: 13.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent; }
#sr-chat-widget .sr-chat-start-btn:hover { background: var(--blue-d); }
#sr-chat-widget .sr-chat-msgs { flex: 1; overflow-y: auto; max-height: 240px; -webkit-overflow-scrolling: touch; }
#sr-chat-widget .sr-chat-msgs-inner { padding: 11px; display: flex; flex-direction: column; gap: 7px; }
#sr-chat-widget .sr-cm { display: flex; flex-direction: column; }
/* Aus Sicht des Kunden (dieses Widget): eigene Nachricht rechts,
   Admin/System-Nachricht links. Sender-Rolle kommt zuverlässig aus der
   Datenbankspalte sr_chat_messages.sender_type (siehe chat.js appendMsg()),
   nicht aus Text oder Reihenfolge. Das Admin-Pendant in
   admin/views/livechat.php macht das Gegenteil (Admin=rechts, Kunde=links)
   – dort bereits korrekt, unverändert gelassen. */
#sr-chat-widget .sr-cm-customer { align-items: flex-end; }
#sr-chat-widget .sr-cm-agent, #sr-chat-widget .sr-cm-system { align-items: flex-start; }
#sr-chat-widget .sr-cm-bubble { padding: 8px 12px; border-radius: 13px; font-size: 12.5px; max-width: 84%; line-height: 1.5; word-break: break-word; }
/* Sprechblasen-"Schwänzchen" an die neue Position angepasst (Kunde jetzt
   rechts → Ecke oben rechts flach; Admin jetzt links → Ecke oben links flach). */
#sr-chat-widget .sr-cm-customer .sr-cm-bubble { background: var(--gray2); color: var(--navy); border-radius: 13px 3px 13px 13px; }
#sr-chat-widget .sr-cm-agent .sr-cm-bubble { background: var(--blue); color: #fff; border-radius: 3px 13px 13px 13px; }
#sr-chat-widget .sr-cm-system .sr-cm-bubble { background: #fffbeb; color: #92400e; font-size: 11.5px; border-radius: 8px; }
#sr-chat-widget .sr-cm-time { font-size: 10px; color: var(--muted); margin-top: 3px; padding: 0 2px; }
/* Gleiches Muster wie beim Popup: display nur bei :not([hidden]). */
#sr-chat-widget .sr-chat-input-area { padding: 9px 11px; border-top: 1px solid var(--border); gap: 8px; background: var(--gray); flex-shrink: 0; }
#sr-chat-widget .sr-chat-input-area:not([hidden]) { display: flex; }
#sr-chat-widget .sr-chat-msg-in { flex: 1; padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 22px; font-size: 13.5px; font-family: inherit; outline: none; -webkit-appearance: none; }
#sr-chat-widget .sr-chat-msg-in:focus { border-color: var(--blue); }
#sr-chat-widget .sr-chat-send { width: 34px; height: 34px; background: var(--blue); border: none; border-radius: 50%; color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; -webkit-tap-highlight-color: transparent; }

/* ── "Finde mein Modell" Seite ─────────────────────────── */
.sr-find-model { max-width: 800px; margin: 0 auto; padding: 20px 0; }
.sr-find-intro  { font-size: 16px; color: var(--muted); margin-bottom: 32px; line-height: 1.6; }
.sr-find-step {
  display: grid;
  grid-template-columns: 48px 1fr 1fr;
  gap: 18px;
  align-items: start;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--r);
  margin-bottom: 14px;
  box-shadow: var(--sh);
}
@media (max-width: 600px) {
  .sr-find-step { grid-template-columns: 40px 1fr; }
  .sr-find-step-img { grid-column: 2; }
}
.sr-find-step-num {
  width: 40px; height: 40px;
  background: var(--blue);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 700;
  flex-shrink: 0;
}
.sr-find-step-img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  background: var(--gray);
}
.sr-find-step-text h3 { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.sr-find-step-text p  { font-size: 14px; color: var(--muted); margin: 0; line-height: 1.6; }

/* ── Performance-Optimierungen ─────────────────────────── */
.sr-screen:not(.active) {
  content-visibility: auto;
}
.sr-sidebar {
  will-change: transform;
}
.sr-type-grid,
.sr-brand-grid,
.sr-model-grid {
  contain: layout style;
}
/* Schriften: optimale Abstände wie im Screenshot */
#sr-app {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.sr-title {
  line-height: 1.25;
  letter-spacing: -.01em;
}
.sr-sh-hint {
  line-height: 1.5;
  margin-bottom: 14px;
}
/* Suchfeld: optimaler Buchstabenabstand */
.sr-sf {
  letter-spacing: .01em;
  line-height: 1.4;
}
/* Marken-Label spacing */
.sr-bc .sr-brand-name {
  letter-spacing: .02em;
  line-height: 1.4;
}
/* Typ-Label spacing */
.sr-tc-label {
  letter-spacing: .06em;
  line-height: 1.35;
  word-spacing: .02em;
}

/* ── iPhone Auto-Zoom verhindern: 16px auf ALLEN Formularfeldern ── */
#sr-app input,
#sr-app select,
#sr-app textarea,
.sr-reg-wrap input,
.sr-reg-wrap select,
.sr-reg-wrap textarea,
.sr-find-model input {
  font-size: 16px !important;
}

/* ============================================================
   LIVE-CHAT · OpenAI-Style Redesign (v4.18)
   Überschreibt gezielt das ältere Chat-Popup-Design. Heller,
   klarer Look; großer zentrierter Support-Titel; Anmelde-Button
   oben rechts (nur ausgeloggt, via PHP); mobil mittig & größer.
   ============================================================ */

/* Popup größer, hellerer Rahmen */
#sr-chat-widget .sr-chat-popup {
  width: 380px;
  max-height: 560px;
  border-radius: 18px;
  box-shadow: 0 12px 48px rgba(20,30,45,.22);
  border: 1px solid #ececf1;
}

/* Header: heller statt Farbverlauf, dezente Trennlinie */
#sr-chat-widget .sr-chat-ph {
  background: #ffffff;
  border-bottom: 1px solid #ececf1;
  padding: 12px 14px;
}
#sr-chat-widget .sr-chat-ph-avatar {
  background: #f4f4f6;
}
#sr-chat-widget .sr-chat-ph-avatar img { filter: none !important; }
#sr-chat-widget .sr-chat-ph-title { color: #0d0d0d; font-size: 14px; }
#sr-chat-widget .sr-chat-ph-sub { color: #6b7280; }
#sr-chat-widget .sr-chat-online-dot { background: #10a37f; }

/* Kopf-Aktionen rechts: Anmelde-Button + Schließen */
#sr-chat-widget .sr-chat-ph-actions { display: flex; align-items: center; gap: 8px; }
#sr-chat-widget .sr-chat-login-btn {
  display: inline-flex; align-items: center;
  padding: 6px 14px;
  border: 1px solid #d9d9e3;
  border-radius: 999px;
  font-size: 13px; font-weight: 600;
  color: #0d0d0d; text-decoration: none;
  background: #fff; white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
#sr-chat-widget .sr-chat-login-btn:hover { background: #f7f7f8; }
#sr-chat-widget .sr-chat-min-btn {
  background: none; border: none; color: #8e8ea0;
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
}
#sr-chat-widget .sr-chat-min-btn:hover { background: #f0f0f4; color: #0d0d0d; }

/* Start-Bereich: großer zentrierter Titel wie OpenAI */
#sr-chat-widget .sr-chat-start { padding: 22px 20px; gap: 14px; justify-content: center; }
#sr-chat-widget .sr-chat-welcome { padding: 30px 6px 10px; }
#sr-chat-widget .sr-chat-welcome h4 {
  font-size: 26px; line-height: 1.25; font-weight: 700;
  color: #0d0d0d; margin: 0; letter-spacing: -.01em;
}

/* Eingabefelder heller/runder */
#sr-chat-widget .sr-chat-in {
  border: 1px solid #d9d9e3; border-radius: 12px;
  padding: 12px 14px; font-size: 14px; background: #fff;
}
#sr-chat-widget .sr-chat-in:focus { border-color: #10a37f; box-shadow: 0 0 0 3px rgba(16,163,127,.12); }

/* Start-Button: dunkel/pill wie OpenAI-Senden */
#sr-chat-widget .sr-chat-start-btn {
  padding: 14px 18px; border-radius: 999px;
  background: #0d0d0d; color: #fff; font-size: 15px; font-weight: 600;
}
#sr-chat-widget .sr-chat-start-btn:hover { background: #2a2a2a; }

/* Eingeloggt (kein Formular): Titel vertikal zentriert, Button unten */
#sr-chat-widget .sr-chat-start[data-logged-in="1"] { justify-content: space-between; }
#sr-chat-widget .sr-chat-start[data-logged-in="1"] .sr-chat-welcome {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}

/* Nachrichten-Eingabe unten: runde Pille, dunkler Senden-Knopf */
#sr-chat-widget .sr-chat-input-area { background: #fff; border-top: 1px solid #ececf1; padding: 12px; }
#sr-chat-widget .sr-chat-msg-in {
  border: 1px solid #d9d9e3; border-radius: 999px; padding: 12px 16px; font-size: 14px;
}
#sr-chat-widget .sr-chat-msg-in:focus { border-color: #10a37f; box-shadow: 0 0 0 3px rgba(16,163,127,.12); }
#sr-chat-widget .sr-chat-send { width: 40px; height: 40px; background: #0d0d0d; }
#sr-chat-widget .sr-chat-send:hover { background: #2a2a2a; }

/* Nachrichtenblasen an helleren Look angepasst */
#sr-chat-widget .sr-cm-agent .sr-cm-bubble { background: #f4f4f6; color: #0d0d0d; }
#sr-chat-widget .sr-cm-customer .sr-cm-bubble { background: #10a37f; color: #fff; }

/* ── MOBIL: mittig, größer, angenehm bedienbar ───────────── */
@media (max-width: 640px) {
  #sr-chat-widget .sr-chat-popup {
    position: fixed;
    left: 50%;
    right: auto;
    bottom: 0;
    top: auto;
    transform: translateX(-50%);
    width: 100vw;
    max-width: 100vw;
    height: 88vh;
    max-height: 88vh;
    border-radius: 18px 18px 0 0;
    border: none;
  }
  #sr-chat-widget .sr-chat-welcome h4 { font-size: 24px; }
  #sr-chat-widget .sr-chat-msgs { max-height: none; flex: 1; }
  /* FAB bleibt unten rechts als Auslöser */
}

/* Icon-Bilder (ersetzen die früheren Emojis) */
.sr-icon { display:inline-block; width:1em; height:1em; object-fit:contain; vertical-align:-0.15em; }