/* Branchenseiten (Muster: Thai-Massage).
   Nur, was style.css nicht schon kann. Farben ausschließlich über die Tokens aus style.css,
   damit die Seite mit der Startseite mitzieht, wenn sich dort etwas ändert.
   Kandidaten für einen späteren Umzug nach style.css: siehe Kommentar je Block. */

/* ── Hero: Startseiten-Hero ist auf volle Bildschirmhöhe und Emblem links gebaut.
   Hier Text links, Bild rechts, und nur so hoch wie der Inhalt. ── */
.hero-branche { min-height: auto; padding-top: 150px; padding-bottom: 100px; }
/* Zweispaltig nur ab 881px: style.css stapelt den Hero darunter, und dieser Selektor
   ist spezifischer, würde das Stapeln sonst also aushebeln */
@media (min-width: 881px) {
  .hero-branche .hero-inner { grid-template-columns: 1.05fr .95fr; }
}
.hero-branche .hero-head { max-width: 600px; }
.branche-cta { margin-top: 34px; }
.branche-cta .hero-note { margin-top: 18px; }
.wa-cta.wa-cta-hero { padding: 17px 32px; font-size: clamp(16px, 1.6vw, 19px); }
.wa-cta.wa-cta-hero svg { width: 22px; height: 22px; }
.branche-hero-media {
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(var(--shadow-rgb), .16);
}
/* Das Spa-Bild ist ein Querband (960 x 405); im Hero als ruhiges Format zugeschnitten,
   Mitte bleibt (Steine und Orchidee) */
.branche-hero-media img {
  width: 100%;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  object-position: 55% 50%;
}
@media (max-width: 880px) {
  .hero-branche .hero-inner { gap: 36px; }
  .hero-branche .hero-head { max-width: 560px; }
  .branche-hero-media { max-width: 560px; width: 100%; margin: 0 auto; }
  .branche-hero-media img { aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
  .hero-branche { padding-top: 108px; padding-bottom: 64px; }
  .branche-cta { margin-top: 26px; }
}

/* ── Typische Probleme: 2 x 2 Karten, mobil einspaltig.
   Später nach style.css, wenn weitere Branchenseiten folgen. ── */
.section-probleme { background: var(--bg-white); }
.section-probleme .section-inner { max-width: 1160px; }
.probleme-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.problem {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 28px 30px;
  border-left: 3px solid var(--accent);
}
.problem h3 {
  font-size: clamp(18px, 1.8vw, 21px);
  font-weight: 650;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin-bottom: 10px;
}
.problem p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }

/* ── Was wir machen: fünf kompakte Bausteine statt der großen Leistungsblöcke ── */
.section-branche-leistungen { background: var(--bg); }
.section-branche-leistungen .section-inner { max-width: 1160px; }
.bausteine {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.baustein {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 26px;
}
/* Der fünfte Baustein über die volle Breite, damit kein Loch im Raster bleibt */
.baustein:last-child:nth-child(odd) { grid-column: 1 / -1; }
.baustein img {
  width: 72px;
  height: 72px;
  flex-shrink: 0;
  border-radius: 16px;
  object-fit: cover;
  background: var(--amber-soft);
}
.baustein h3 {
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -.02em;
  margin-bottom: 6px;
}
.baustein p { font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.branche-more { margin-top: 30px; font-size: 15px; }
.branche-more a { color: var(--accent-strong); font-weight: 600; }
.branche-more a:hover { text-decoration: underline; }

/* ── Referenzen: nur zwei Karten, style.css rechnet mit drei Spalten ── */
.refs.refs-zwei { grid-template-columns: repeat(2, 1fr); }
.refs-zwei .ref-body p { min-height: 0; }
/* Zahlenzeile Korni; gleiche Optik ist für Schritt C der Startseite vorgesehen,
   dann gehört sie nach style.css */
.ref-zahlen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 8px;
}
.ref-zahl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  background: var(--amber-soft);
  border-radius: 12px;
}
.ref-zahl strong { font-size: 22px; font-weight: 700; letter-spacing: -.02em; color: var(--text); }
.ref-zahl span { font-size: 12.5px; line-height: 1.4; color: var(--muted); }
.ref-body p.ref-stand { font-size: 12px; margin-bottom: 14px; min-height: 0; }

/* ── Ablauf: vier Schritte, Desktop in einer Reihe, mobil untereinander ── */
.section-branche-ablauf { background: var(--bg-white); }
.section-branche-ablauf .section-inner { max-width: 1160px; }
.ablauf-schritte {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.ablauf-schritt {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px 24px 28px;
}
.ablauf-nr {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 16px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.ablauf-schritt h3 { font-size: 18px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.ablauf-schritt p { font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ── Umbrüche ── */
@media (max-width: 1000px) {
  .ablauf-schritte { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .refs.refs-zwei { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .probleme-grid,
  .bausteine,
  .ablauf-schritte { grid-template-columns: 1fr; gap: 14px; margin-top: 36px; }
  .problem { padding: 22px 22px 24px; }
  .baustein { padding: 22px; gap: 16px; }
  .baustein img { width: 56px; height: 56px; border-radius: 13px; }
}
/* Handy: Bild über den Text, sonst bleibt neben dem Bild nur eine schmale Textspalte */
@media (max-width: 480px) {
  .baustein { flex-direction: column; gap: 12px; }
  .baustein img { width: 52px; height: 52px; border-radius: 12px; }
}
@media (max-width: 380px) {
  .ref-zahlen { grid-template-columns: 1fr; }
}