/* Gennadis Bike-Wash – Ergänzungen V1.1 (29.09.2026) und V1.2 (20.10.2026, Abschnitt 9)
   Liegt bewusst außerhalb von /_astro/, damit ein späterer Astro-Build die
   Datei nicht überschreibt. Die Astro-Regeln tragen [data-astro-cid-…] im
   Selektor – wer sie hier überschreiben will, braucht dasselbe Attribut. */

/* ---------- 1. Kopfzeile: Menü am PC genau in der Seitenmitte ---------- */
@media (min-width: 820px) {
  .site-header { display: grid; grid-template-columns: 1fr auto 1fr; }
  .site-header .brand { justify-self: start; }
  .site-header .header-cta { justify-self: end; }
}

/* ---------- 2. Detailvergleiche: am Handy etwas größer als vorher ---------- */
.bw-wisch { display: none; }
@media (max-width: 999px) { .bw-wisch.bw-wisch-prozess { display: flex; margin-top: 1.2rem; } }
@media (max-width: 759px) {
  /* Ohne scroll-padding rastet die erste Karte bündig am Bildschirmrand ein */
  .detail-strip[data-astro-cid-j7pv25f6] { scroll-padding-inline: 1.25rem; }
  .detail-card[data-astro-cid-j7pv25f6] { flex: 0 0 min(86vw, 400px); padding: .7rem; }
  .detail-pair[data-astro-cid-j7pv25f6] img[data-astro-cid-j7pv25f6] { aspect-ratio: 1 / 1; }
  .detail-pair[data-astro-cid-j7pv25f6] figcaption[data-astro-cid-j7pv25f6] {
    left: .45rem; bottom: .45rem; font-size: .74rem; padding: .14rem .55rem;
  }
  .detail-card[data-astro-cid-j7pv25f6] h3[data-astro-cid-j7pv25f6] { font-size: 1.06rem; margin: .6rem .15rem .1rem; }

  .bw-wisch { display: flex; }
}

/* Wisch-Hinweis über einem Streifen (Detailvergleiche und fünf Stufen) */
.bw-wisch {
  align-items: center; gap: .55rem; margin: 1.6rem 0 .75rem;
  padding: .6rem .95rem; border-radius: 999px; background: var(--navy); color: #fff;
  font-weight: 900; font-size: .98rem; box-shadow: var(--shadow);
}
.bw-wisch-hand { font-size: 1.2rem; display: inline-block; animation: bw-wisch 1.8s var(--ease) infinite; }
.bw-wisch-zahl {
  margin-left: auto; background: var(--yellow); color: var(--navy-deep);
  border-radius: 999px; padding: .12rem .6rem; font-size: .88rem; font-variant-numeric: tabular-nums;
}
@keyframes bw-wisch { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(-9px); } }

/* ---------- 3. Instagram stärker zeigen ---------- */
.bw-ig {
  display: grid; grid-template-columns: auto 1fr; gap: .9rem 1rem; align-items: center;
  margin: 1.6rem 0 1.8rem; padding: 1.15rem 1.2rem; border-radius: var(--radius);
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(120deg, #833ab4, #e1306c 55%, #f77737) border-box;
  border: 3px solid transparent; box-shadow: var(--shadow);
}
.bw-ig-icon {
  width: 3.2rem; height: 3.2rem; border-radius: 14px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(45deg, #f77737, #e1306c 45%, #833ab4);
}
.bw-ig-text strong { display: block; color: var(--navy); font-size: 1.12rem; line-height: 1.3; }
.bw-ig-text span { display: block; margin-top: .2rem; color: #55617d; font-size: .95rem; line-height: 1.45; }
.bw-ig-text b { color: var(--navy); }
.bw-ig-btn {
  grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .85rem 1.4rem; border-radius: 999px; font-weight: 900; font-size: 1.02rem;
  text-decoration: none; color: #fff; background: linear-gradient(90deg, #833ab4, #e1306c 55%, #f77737);
  box-shadow: 0 8px 22px rgba(225, 48, 108, .3); transition: transform .18s ease, box-shadow .18s ease;
}
.bw-ig-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(225, 48, 108, .42); }
@media (min-width: 640px) {
  .bw-ig { grid-template-columns: auto 1fr auto; padding: 1.2rem 1.4rem; }
  .bw-ig-btn { grid-column: auto; }
}
/* kleiner Knopf im Kontaktbereich */
.btn.bw-ig-kontakt { color: #fff; background: linear-gradient(90deg, #833ab4, #e1306c 55%, #f77737); box-shadow: 0 4px 16px rgba(225, 48, 108, .3); }
@media (prefers-reduced-motion: reduce) {
  .bw-ig-btn { transition: none; }
  .bw-ig-btn:hover { transform: none; }
  .bw-wisch-hand { animation: none; }
}

/* ---------- 4. Fünf Stufen: Wisch-Streifen wie bei den Details, etwas größer ---------- */
/* Grundaufbau (flex, overflow, snap, negativer Rand) kommt aus der Astro-Datei;
   hier nur scroll-padding gegen das Kleben am Rand und die Größen. Diese Regel
   greift auch zwischen 900 und 999 px, wo Astro schon auf fünf Spalten schaltet. */
.prozess-strip[data-astro-cid-j7pv25f6] {
  display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1.25rem;
  margin: 0 -1.25rem; padding: .2rem 1.25rem .9rem;
}
.prozess-card[data-astro-cid-j7pv25f6] { flex: 0 0 min(72vw, 280px); padding: 1rem 1.05rem 1.1rem; }
.prozess-card[data-astro-cid-j7pv25f6] .pz-icon[data-astro-cid-j7pv25f6] {
  width: 2.6rem; height: 2.6rem; font-size: 1.55rem; margin-bottom: .6rem;
  display: grid; place-items: center; background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(8, 31, 74, .08);
}
.prozess-card[data-astro-cid-j7pv25f6] .schritt-nr[data-astro-cid-j7pv25f6] { top: .9rem; right: .9rem; width: 1.8rem; height: 1.8rem; font-size: .95rem; }
.prozess-card[data-astro-cid-j7pv25f6] h3[data-astro-cid-j7pv25f6] { font-size: 1.12rem; margin: 0 0 .3rem; }
.prozess-card[data-astro-cid-j7pv25f6] p[data-astro-cid-j7pv25f6] { font-size: .97rem; line-height: 1.5; }
@media (min-width: 1000px) {
  .prozess-strip[data-astro-cid-j7pv25f6] {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: .9rem;
    overflow: visible; scroll-snap-type: none; margin: 0; padding: 1.2rem 0 .9rem;
  }
  .prozess-card[data-astro-cid-j7pv25f6] { flex: none; }
}

/* ---------- 5. Terminanfrage Schritt für Schritt ---------- */
.bw-fortschritt { display: grid; gap: .45rem; }
.bw-fortschritt[hidden], .bw-steuerung[hidden] { display: none; }
.bw-schritt-text { margin: 0; font-size: .85rem; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; color: var(--blue); }
.bw-balken { height: 6px; border-radius: 999px; background: #e3ebf5; overflow: hidden; }
.bw-balken span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--yellow-deep); transition: width .35s var(--ease); }
.bw-vorgemerkt { margin: .2rem 0 0; font-size: .92rem; color: #1f5a37; background: #e8f7ee; border-radius: 10px; padding: .5rem .75rem; }
.bw-vorgemerkt[hidden] { display: none; }

.wa-widget.gefuehrt [data-schritt]:not(.aktiv) { display: none; }
.wa-widget.gefuehrt .step-nr { display: none; }
.wa-widget.gefuehrt[data-astro-cid-j7pv25f6] fieldset legend[data-astro-cid-j7pv25f6] { font-size: 1.25rem; }
.wa-widget legend:focus, .bw-fertig-titel:focus { outline: none; }
.wa-widget.gefuehrt .chip { font-size: 1.02rem; padding: .75rem 1.15rem; min-height: 50px; }

.bw-fertig { display: grid; gap: 1rem; }
.bw-fertig-titel { margin: 0; font-size: 1.25rem; font-weight: 900; color: var(--navy); }
.bw-fertig-titel[hidden] { display: none; }
.bw-aendern { margin: -.3rem 0 0; font-size: .9rem; color: #55617d; }
.bw-aendern[hidden] { display: none; }
.bw-aendern button {
  font: inherit; font-weight: 800; color: var(--navy); background: none; border: 0; padding: .15rem .1rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

.bw-fehler { margin: .5rem 0 0; font-size: .9rem; font-weight: 800; color: var(--red); }
.bw-fehler[hidden] { display: none; }
.wa-widget input[aria-invalid="true"] { border-color: var(--red) !important; }

.bw-steuerung { display: flex; gap: .6rem; }
.bw-steuerung button {
  font: inherit; font-weight: 900; font-size: 1.02rem; border-radius: 999px; padding: .8rem 1.3rem;
  min-height: 50px; cursor: pointer; transition: transform .12s var(--ease), filter .15s;
}
.bw-steuerung button:active { transform: scale(.97); }
.bw-steuerung button[hidden] { display: none; }
.bw-zurueck { background: #fff; color: var(--navy); border: 2px solid #cfdcec; }
.bw-weiter { flex: 1 1 auto; background: var(--yellow); color: var(--navy-deep); border: 2px solid var(--yellow); box-shadow: 0 4px 16px #f5b8004d; }
.bw-weiter:hover { filter: brightness(1.05); }
.bw-vorgemerkt button {
  font: inherit; font-weight: 800; color: inherit; background: none; border: 0; padding: 0;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* ---------- 6. Abstände zwischen den Abschnitten ----------
   Vorher 67 + 72 px zwischen zwei Abschnitten, jetzt etwa 52 + 52 px am PC.
   Über mich und Bewertungen haben denselben Hintergrund – dort nur 1rem oben
   (gemessen ~73 px), sonst sieht es wie ein Loch aus statt wie ein Abschnittswechsel. */
.section { padding-top: clamp(2.5rem, 5vw, 3.25rem); padding-bottom: clamp(2.5rem, 5vw, 3.25rem); }
#ueber + #bewertungen { padding-top: 1rem; }

/* ---------- 7. Terminbereich: am PC Ablauf links, Formular rechts ---------- */
.bw-ablauf { display: none; }
@media (min-width: 960px) {
  .bw-termin-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 540px); gap: 3.5rem; align-items: start; }
  .bw-termin-grid .wa-widget[data-astro-cid-j7pv25f6] { max-width: none; margin-top: 1.6rem; }
  .bw-ablauf { display: block; margin-top: 1.9rem; }
}
.bw-ablauf-titel {
  margin: 0 0 1rem; font-size: .82rem; font-weight: 900; letter-spacing: .13em;
  text-transform: uppercase; color: var(--yellow);
}
.bw-ablauf ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.1rem; counter-reset: ablauf; }
.bw-ablauf li { counter-increment: ablauf; display: grid; grid-template-columns: 2.3rem 1fr; column-gap: .95rem; }
.bw-ablauf li::before {
  content: counter(ablauf); grid-row: 1 / span 2; width: 2.3rem; height: 2.3rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--yellow); color: var(--navy-deep); font-weight: 900;
}
.bw-ablauf li strong { color: #fff; font-size: 1.08rem; line-height: 1.3; }
.bw-ablauf li span { color: #c9dcf5; font-size: .97rem; line-height: 1.45; }
.bw-ablauf-status.open-status[data-astro-cid-j7pv25f6] {
  display: inline-block; margin: 1.6rem 0 0; padding: .4rem .95rem; border-radius: 999px;
  background: rgba(255, 255, 255, .1); text-shadow: none; animation: none;
}
.bw-ablauf-status[hidden] { display: none !important; }
.bw-ablauf-tel { margin: .9rem 0 0; color: #dbeafe; }
.bw-ablauf-tel a { color: var(--yellow); font-weight: 900; text-decoration: none; }
.bw-ablauf-tel a:hover { text-decoration: underline; }

/* ---------- 8. Kontakt: vier gleich breite Knöpfe mit Symbol ---------- */
.kontakt-cta[data-astro-cid-j7pv25f6] { justify-items: stretch; }
.kontakt-cta[data-astro-cid-j7pv25f6] .btn { padding: .85rem 1.1rem; font-size: 1rem; }
.btn.bw-mail { background: #fff; color: var(--navy); border: 2px solid var(--navy); box-shadow: var(--shadow); }
@media (min-width: 1000px) {
  .kontakt-cta[data-astro-cid-j7pv25f6] { grid-template-columns: 1fr 1fr; }
  .kontakt-cta[data-astro-cid-j7pv25f6] p[data-astro-cid-j7pv25f6] { grid-column: 1 / -1; }
}

/* ---------- 9. Partnerleiste unter „Bekannt aus der Presse" (ab V1.2) ----------
   Vorbild ehrlicheinzigartig.de, dort im Fuß. Hier bewusst im Abschnitt
   „Der Mann hinter der Bürste": Presse und Partner sagen beide, wer hinter
   dem Betrieb steht, und ganz unten sieht es niemand. Gleiche Überschrift
   und Kartenform wie die Presse, aber gelber statt blauer Rand, damit
   Partner nicht wie ein weiterer Zeitungsartikel aussehen. Logos einfarbig
   in Navy; jedes Logo hat etwa dieselbe Fläche (Maße als width/height am
   Bild), die dünne Schreibschrift etwas größer, die Blockschrift kleiner.
   Drei Partner füllen dieselben drei Spalten wie die Presse darüber. */
.bw-partner { margin-top: 2rem; }
.bw-partner-links { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.bw-partner-karte { display: flex; flex-direction: column; gap: .55rem; background: #fff; border-radius: 14px; box-shadow: var(--shadow);
  padding: .95rem 1.1rem; text-decoration: none; border-left: 4px solid var(--yellow-deep); line-height: 1.35;
  transition: transform .15s var(--ease), box-shadow .15s var(--ease); }
.bw-partner-karte:hover { transform: translateY(-2px); box-shadow: var(--shadow-lift); }
.bw-partner-logo { display: flex; align-items: center; height: 36px; }
.bw-partner-logo img { max-width: 100%; height: auto; }
.bw-partner-text { display: flex; flex-direction: column; gap: .15rem; }
.bw-partner-text b { font-weight: 900; color: var(--navy); font-size: .95rem; }
.bw-partner-text span { font-size: .9rem; color: #55617d; font-weight: 600; }
@media (prefers-reduced-motion: reduce) { .bw-partner-karte:hover { transform: none; } }
/* Am Handy als Zeile: Logo links in festem Feld, Text rechts. */
@media (max-width: 599px) {
  .bw-partner-links { grid-template-columns: 1fr; }
  .bw-partner-karte { flex-direction: row; align-items: center; gap: .9rem; }
  .bw-partner-logo { flex: 0 0 104px; }
}