/* =============================================================
   STANDORTE PAGE  (template-standorte-page.php)

   Rebuilt on the same system as the home, about and service pages:

     - ONE RHYTHM. --st-section-y is the space above and below every section,
       and .st-bg-white / .st-bg-cream are the grounds. Two neighbours on the
       same ground collapse the doubled gap between them.
     - ONE SECTION HEADER. .st-head — eyebrow, title, lead — instead of three
       sections each spacing their own heading by hand.
     - ONE CARD. The region tabs, the promise cards and the closing card are
       the cards used everywhere else on the site.
     - SHARED BUTTONS. .fr-btn from theme.css; this file defines none.

   The behaviour hooks belong to assets/js/standorte.js and are load-bearing:
   [data-st-tab] / [data-st-panel] / .is-active drive the tabs, [data-st-name]
   and .is-filtering / .is-filtered drive the search, and the script sets
   `hidden` on individual [data-st-name] items — so every display rule here
   has to yield to [hidden].
   ============================================================= */

:root {
  --st-orange: #f2a820;
  --st-orange-soft: var(--icon-bg);   /* Symbolfläche, siehe theme.css */
  --st-ink: #2a2e34;
  --st-muted: #5c5a5a;
  --st-cream: #fdf7ec;
  --st-cream-2: #fdfaf5;
  --st-border: #e5e7eb;
  --st-edge: 15px;
  --st-section-y: 4rem;
  --st-head-gap: 2.5rem;
  --st-card-radius: 16px;
}

/* `clip`, not `hidden`: hidden on one axis promotes the other to `auto`,
   which would make this wrapper its own scroll container. */
.st-page {
  overflow-x: clip;
}

.st-page .st-section {
  position: relative;
  width: 100%;
  max-width: 100vw;
}

.st-page .st-inner {
  position: relative;
  z-index: 1;
  padding: var(--st-section-y) var(--st-edge);
}

.st-page .st-bg-white + .st-bg-white > .st-inner,
.st-page .st-bg-cream + .st-bg-cream > .st-inner {
  padding-top: 0;
}

.st-page .st-bg-white {
  background-color: #fff;
}

.st-page .st-bg-cream {
  background-color: var(--st-cream);
}

/* =============================================================
   SECTION HEADER
   ============================================================= */

.st-page .st-head {
  max-width: 880px;
  margin: 0 auto var(--st-head-gap);
  text-align: center;
}

.st-page .st-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 14px;
  color: #b8790a;
  font-family: 'Inter';
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
}

.st-page .st-eyebrow::before,
.st-page .st-eyebrow::after {
  content: '';
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--st-orange);
}

/* clamp() statt fester Pixel und eigener Verkleinerungsstufen: eine Zeile
   trägt Telefon bis Desktop, und die Größe folgt derselben Kurve wie h2 in
   theme.css. */
.st-page .st-section-title {
  width: auto; /* theme.css sets width:100% on every heading */
  margin: 0 auto;
  font-size: clamp(25px, 2.6vw, 36px);
  line-height: 1.25;
  text-wrap: balance;
}

.st-page .st-lead {
  max-width: 760px;
  margin: 14px auto 0;
  color: var(--st-muted);
  font-size: var(--fs-md);
  line-height: 1.75;
  text-align: center;
}

/* =============================================================
   1. HERO

   A photograph under the site's standard three-layer scrim. It was a flat
   #55554e fill with a tint on top and no picture at all, which is why this
   hero looked like it belonged to a different site.
   ============================================================= */

.st-hero {
  min-height: 520px;
  display: flex;
  align-items: center;
  color: #fff;
}

.st-hero-media,
.st-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.st-hero-media img {
  position: relative;
  object-fit: cover;
}

.st-hero-overlay {
  position: absolute;
  inset: 0;
  background: var(--fr-scrim);
}

.st-hero .st-inner {
  width: 100%;
  padding-top: 4.5rem;
  padding-bottom: 4.5rem;
}

.st-hero-copy {
  max-width: 720px;
}

.st-hero-copy h1 {
  width: auto;
  margin: 0 0 16px;
  color: #fff;
  line-height: 1.14;
  letter-spacing: -.015em;
  text-wrap: balance;
}

.st-hero-lead {
  max-width: 620px;
  margin: 0;
  color: rgba(255, 255, 255, .88);
  font-size: var(--fs-md);
  line-height: 1.75;
}

.st-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.st-hero-phone {
  display: inline-flex;
  align-items: center;
  gap: 13px;
  min-height: var(--btn-h);
  padding: 8px 22px 8px 12px;
  border: 1px solid rgba(255, 255, 255, .34);
  border-radius: var(--btn-radius);
  background-color: rgba(255, 255, 255, .12);
  color: #fff !important; /* beats theme.css's orange global a colour */
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background-color .25s ease, border-color .25s ease,
              transform .25s ease, box-shadow .25s ease;
}

/* Orange, like every control on a dark ground. */
/* Überfahren grün — dieselbe Regel wie bei den Schaltflächen. */
.st-hero-phone:hover,
.st-hero-phone:focus-visible {
  background-color: var(--brand-green);
  border-color: var(--brand-green);
  transform: translateY(-2px);
  box-shadow: 0 16px 30px -14px rgba(47, 93, 52, .8);
}

.st-hero-phone:hover .st-hero-phone-ico,
.st-hero-phone:focus-visible .st-hero-phone-ico {
  background-color: rgba(255, 255, 255, .22);
}

.st-hero-phone:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.st-hero-phone-ico {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: var(--st-orange);
  color: #fff;
  transition: background-color .25s ease;
}

.st-hero-phone-ico svg {
  display: block;
  width: 18px;
  height: 18px;
}

.st-hero-phone-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.st-hero-phone-label {
  color: rgba(255, 255, 255, .78);
  font-family: 'Inter';
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.st-hero-phone-number {
  font-family: 'Inter';
  font-size: 18px;
  font-weight: 800;
  line-height: 1.2;
}

/* The three figures: one strip with hairlines between, not three grey boxes
   dropped on the photograph. */
.st-hero-stats {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin: 34px 0 0;
  padding: 0;
}

.st-hero-stats li {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 30px;
  color: #fff !important;  /* beats theme.css's global li colour */
  border-left: 1px solid rgba(255, 255, 255, .22);
}

.st-hero-stats li:first-child {
  padding-left: 0;
  border-left: 0;
}

.st-stat-num {
  font-family: 'Inter';
  font-size: 32px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.02em;
}

.st-stat-label {
  color: rgba(255, 255, 255, .72);
  font-family: 'Inter';
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
}

/* When the browser is embedded (home page, Kontakt page) its wrapper is a
   plain block inside the host section's .fp-inner, which already provides the
   container and the section padding. It contributes nothing of its own. */
.st-embed {
  width: 100%;
}

/* =============================================================
   2. DER FINDER

   Suchzeile, Regionenreiter und Ergebnis in EINER Tafel.

   Vorher waren das drei lose Objekte untereinander: ein Suchfeld ohne
   Rahmen, drei Karten und darunter die Liste. Man sucht ODER wählt eine
   Region, und beides führt zur selben Liste — als drei schwebende Elemente
   war dieser Zusammenhang aber nicht ablesbar, und das Suchfeld sah aus, als
   durchsuchte es die ganze Website.

   Die Reiter sind deshalb auch keine Karten mehr. Eine Karte sieht aus, als
   führte sie woanders hin; ein Reiter sieht aus, als wechselte er den Inhalt
   unter sich. Genau das ist ihre Aufgabe.
   ============================================================= */

/* Kein Schlagschatten.
   Die Tafel steht in einem Abschnitt, nicht über ihm — ein Schatten unter der
   Unterkante lässt sie schweben, obwohl nichts unter ihr liegt. Die Kante
   allein genügt, um sie vom Grund zu lösen. */
.st-finder {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #f0e5d1;
  border-radius: 20px;
}

/* ---------- die Suchzeile ---------- */

.st-finder-bar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 18px;
  background-color: var(--st-cream);
  border-bottom: 1px solid #f2e4d1;
}

/* Das Skript nimmt `hidden` beim Start weg. Ohne diese Regel würde
   display:flex die Voreinstellung des Attributs überschreiben und die Zeile
   wäre auch ohne JavaScript sichtbar — als Feld, das nichts tut. */
.st-finder-bar[hidden] {
  display: none;
}

.st-filter {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
}

.st-filter-icon {
  position: absolute;
  left: 17px;
  display: inline-flex;
  color: #b0a794;
  pointer-events: none;
}

.st-filter-icon svg {
  display: block;
  width: 19px;
  height: 19px;
}

.st-filter-input {
  width: 100%;
  height: 50px;
  padding: 0 46px 0 47px;
  background-color: #fff;
  border: 1px solid #eae1d0;
  border-radius: 999px;
  color: var(--st-ink);
  font-family: 'Inter';
  font-size: var(--fs-sm);
  box-shadow: 0 1px 2px rgba(96, 58, 20, .04);
  transition: border-color .22s ease, box-shadow .22s ease;
  -webkit-appearance: none;
  appearance: none;
}

.st-filter-input::placeholder {
  color: #a99f8e;
}

.st-filter-input:focus {
  outline: 0;
  border-color: var(--st-orange);
  box-shadow: 0 0 0 4px rgba(242, 168, 32, .2);
}

/* Das eigene Löschzeichen des Browsers läge auf unserem. */
.st-filter-input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.st-filter-clear {
  position: absolute;
  right: 8px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: #f2ece3;
  color: #6b6152;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}

/*
 * display:grid schlägt die Voreinstellung des `hidden`-Attributs — ohne diese
 * Regel stand das Löschzeichen von Anfang an im leeren Feld und lud dazu ein,
 * eine Suche zurückzusetzen, die niemand begonnen hatte.
 */
.st-filter-clear[hidden] {
  display: none;
}

.st-filter-clear:hover,
.st-filter-clear:focus-visible {
  background-color: var(--st-orange);
  color: #fff;
}

.st-filter-clear svg {
  display: block;
  width: 14px;
  height: 14px;
}

/* Die Gesamtzahl rechts in der Zeile. */
.st-finder-total {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 0;
  padding-left: 18px;
  border-left: 1px solid #ebdfc8;
  color: var(--st-muted);
  font-family: 'Inter';
  font-size: 13px;
  line-height: 1.2;
  white-space: nowrap;
}

.st-finder-total strong {
  color: var(--st-ink);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -.01em;
}

/* =============================================================
   3. DIE REGIONENREITER
   ============================================================= */

/* Eine Spalte je Reiter, gleich breit — nicht fest drei. Die Reiter kommen aus
   frieden_location_groups(); fällt dort eine Region weg, ließ ein festes
   Dreierraster eine leere Spalte samt Trennlinie stehen. */
.st-tablist {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  margin: 0;
  background-color: #fdfaf6;
  border-bottom: 1px solid #f2e4d1;
}

.st-tab {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  border-right: 1px solid #f2e4d1;
  background: transparent;
  color: var(--st-ink);
  font-family: 'Inter';
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .22s ease;
}

.st-tab:last-child {
  border-right: 0;
}

/*
 * Der aktive Reiter: weißer Grund und eine kräftige Linie unten, die in die
 * Fläche darunter übergeht. Das ist die eine Geste, die „dieser Reiter gehört
 * zu dem, was hier steht“ sagt — ein Häkchen sagt nur „ausgewählt“ und ist
 * dafür ein schwächeres Signal. Das Häkchen ist deshalb aus dem Markup raus.
 */
.st-tab::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 3px;
  background-color: var(--st-orange);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}

.st-tab:hover {
  background-color: #fff;
}

.st-tab.is-active {
  background-color: #fff;
}

.st-tab.is-active::after {
  transform: scaleX(1);
}

.st-tab:focus-visible {
  outline: 2px solid var(--st-orange);
  outline-offset: -3px;
}

/* Symbol eines Schalters, nicht eines Inhalts — siehe --icon-bg-control in
   theme.css. */
.st-tab-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background-color: var(--icon-bg-control);
  color: var(--icon-fg-control);
  transition: background-color .22s ease, color .22s ease;
}

/* Der AKTIVE Reiter bleibt orange. Nach der Regel oben steht Grün für
   Information und Orange für Handlung — und welcher Reiter gerade gewählt
   ist, gehört zur Handlungsebene, nicht zur Beschreibung. Dasselbe gilt für
   den offenen Eintrag im Mega-Menü und im mobilen Menü. */
.st-tab.is-active .st-tab-icon {
  background-color: var(--st-orange);
  color: #fff;
}

.st-tab-icon svg {
  display: block;
  width: 21px;
  height: 21px;
}

.st-tab-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.st-tab-label {
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.25;
}

.st-tab-meta {
  color: var(--st-muted);
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1.3;
}

.st-tab.is-active .st-tab-meta {
  color: #b8790a;
}

/* =============================================================
   4. PANELS
   ============================================================= */

/* An anchor with no height, offset so a deep link (/standorte/#europa) does
   not land under the fixed header. */
.st-anchor {
  display: block;
  height: 0;
  scroll-margin-top: 140px;
}

.st-panel[hidden] {
  display: none;
}

.st-panel:focus-visible {
  outline: 2px solid var(--st-orange);
  outline-offset: 6px;
  border-radius: 8px;
}

/* While a search is running every region shows at once, so each panel after
   the first needs a rule above it to separate one region's hits from the
   next. */
.st-panel.is-filtered + .st-panel.is-filtered {
  margin-top: 2.5rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--st-border);
}

/* Die Panels liegen innerhalb der Tafel, brauchen also eigenen Innenabstand
   statt eines eigenen Rahmens. */
.st-panels {
  padding: 24px;
}

/* Der Panelkopf ist keine eigene Karte mehr — er stünde als Kasten in einem
   Kasten. Eine Überschrift mit Trennlinie reicht. */
.st-panel-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid #f2e4d1;
}

.st-panel-icon {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background-color: var(--st-cream);
  border: 1px solid #f0dcc0;
  color: var(--icon-fg);
}

.st-panel-icon svg {
  display: block;
  width: 21px;
  height: 21px;
}

.st-panel-headings {
  flex: 1 1 auto;
  min-width: 0;
}

.st-panel-title {
  width: auto;
  margin: 0 0 5px;
  font-size: 19px;
  line-height: 1.3;
}

.st-panel-intro {
  margin: 0;
  color: var(--st-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}


/* =============================================================
   5. THE LOCATION DIRECTORY

   Equal columns, not flowing chips.

   Chips were each exactly as wide as their own name, which packed the rows
   tightly but left nothing to scan down: 27 districts in ragged rows of five,
   six and four read as a tag cloud rather than as a directory you look
   yourself up in. Equal columns give the eye a column edge to follow, and the
   rows line up.
   ============================================================= */

.st-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px;
  margin: 0;
  padding: 0;
}

/* The filter script sets `hidden` on individual items, and a display value
   here would override the browser's default `display: none` for it — hence
   the explicit rule below rather than trusting the default. */
.st-grid-item {
  display: block;
  min-width: 0;
}

.st-grid-item[hidden] {
  display: none;
}

.st-link {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 100%;
  padding: 13px 14px;
  background-color: #fff;
  border: 1px solid var(--st-border);
  border-radius: 12px;
  color: var(--st-ink) !important; /* beats theme.css's orange global a colour */
  font-family: 'Inter';
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none;
  transition: background-color .22s ease, border-color .22s ease,
              transform .22s ease, box-shadow .22s ease;
}

.st-link:hover,
.st-link:focus-visible {
  background-color: var(--st-cream-2);
  border-color: var(--st-orange);
  transform: translateY(-2px);
  box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 14px 28px -20px rgba(242, 168, 32, .7);
}

.st-link:focus-visible {
  outline: 2px solid var(--st-orange);
  outline-offset: 2px;
}

.st-link-pin {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background-color: var(--st-orange-soft);
  color: var(--icon-fg);
  transition: background-color .22s ease, color .22s ease;
}

.st-link:hover .st-link-pin,
.st-link:focus-visible .st-link-pin {
  background-color: var(--icon-bg-hover);
  color: var(--icon-fg-hover);
}

.st-link-pin svg {
  display: block;
  width: 14px;
  height: 14px;
}

.st-link-text {
  flex: 1 1 auto;
  min-width: 0;
}

/* Held back until hover, so 27 arrows are not competing with 27 names. */
.st-link-arrow {
  flex: 0 0 auto;
  display: inline-flex;
  color: var(--st-orange);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity .22s ease, transform .22s ease;
}

.st-link:hover .st-link-arrow,
.st-link:focus-visible .st-link-arrow {
  opacity: 1;
  transform: translateX(0);
}

.st-link-arrow svg {
  display: block;
  width: 16px;
  height: 16px;
}

.st-empty {
  margin: 1.5rem 0 0;
  padding: 18px 20px;
  background-color: var(--st-cream);
  border: 1px solid #f2e4d1;
  border-radius: 12px;
  color: var(--st-muted);
  font-size: var(--fs-sm);
  line-height: 1.7;
  text-align: center;
}

.st-empty[hidden] {
  display: none;
}

/* =============================================================
   6. PROMISES
   ============================================================= */

.st-promise-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}

.st-promise-card {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 26px 58px 28px 24px;
  background-color: #fff;
  border: 1px solid #f3e9d6;
  border-radius: var(--st-card-radius);
  box-shadow: 0 1px 2px rgba(96, 58, 20, .04), 0 16px 34px -28px rgba(96, 58, 20, .35);
  transition: box-shadow .28s ease, transform .28s ease;
}

.st-promise-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background-color: var(--st-orange);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .45s cubic-bezier(.22, .61, .36, 1);
}

.st-promise-card:hover::before {
  transform: scaleX(1);
}

.st-promise-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 2px 6px rgba(29, 35, 38, .05), 0 22px 40px -24px rgba(242, 168, 32, .65);
}

.st-promise-num {
  position: absolute;
  top: 20px;
  right: 22px;
  color: #f0e2cd;
  font-family: 'Inter';
  font-size: 30px;
  font-weight: 800;
  line-height: 1;
  transition: color .28s ease;
}

.st-promise-card:hover .st-promise-num {
  color: var(--st-orange);
}

.st-icon-badge {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
  border-radius: 13px;
  background-color: var(--st-orange-soft);
  color: var(--icon-fg);
  transition: background-color .28s ease, color .28s ease;
}

.st-promise-card:hover .st-icon-badge {
  background-color: var(--icon-bg-hover);
  color: var(--icon-fg-hover);
}

.st-icon-badge svg {
  display: block;
  width: 23px;
  height: 23px;
}

.st-promise-card h3 {
  width: auto;
  margin: 0 0 8px;
  font-size: 17px;
  line-height: 1.35;
}

.st-promise-card p {
  margin: 0;
  color: var(--st-muted);
  font-size: var(--fs-sm);
  line-height: 1.65;
}

/* =============================================================
   7. CLOSING
   ============================================================= */

/* The closing block is the shared .fr-cta--panel from theme.css. Only two
   things are local: the ground, and the reassurance line under the copy.

   .fr-cta--panel is a WHITE card, and this section is white — so it takes the
   cream instead. Same trade the front page's FAQ panel makes on its white
   section: the panel is always whichever ground its section is not. */
.st-closing-cta {
  background-color: var(--st-cream);
  border-color: #f2e4d1;
}

.st-closing-note {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 24px;
  margin: 16px 0 0;
  color: var(--st-muted);
  font-size: 13.5px;
  line-height: 1.4;
}

.st-closing-note span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.st-closing-note svg {
  display: block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  color: var(--st-orange);
}

/* =============================================================
   RESPONSIVE
   ============================================================= */

@media only screen and (max-width: 1200px) {
  :root {
    --st-section-y: 3.5rem;
  }


  .st-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 1024px) {
  :root {
    --st-section-y: 3rem;
    --st-head-gap: 2rem;
  }

  .st-hero {
    min-height: 0;
  }

  .st-hero .st-inner {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  /* Stacked, so the scrim no longer needs to be heaviest on one side. */
  .st-hero-overlay {
    background: var(--fr-scrim-stacked);
  }

  .st-promise-grid,
  .st-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  /* Drei Reiter nebeneinander lassen hier je rund 210px — schmaler, als
     „Berlin & Umland“ mit Symbol und Zahl braucht. Sie rücken untereinander
     und werden zur Liste; die aktive Linie wandert dabei von unten an den
     linken Rand, weil „unten“ bei gestapelten Reitern nicht mehr auf den
     Inhalt zeigt. */
  .st-tablist {
    grid-auto-flow: row;
    grid-template-columns: minmax(0, 1fr);
  }

  .st-tab {
    border-right: 0;
    border-bottom: 1px solid #f2e4d1;
  }

  .st-tab:last-child {
    border-bottom: 0;
  }

  .st-tab::after {
    left: 0;
    right: auto;
    top: 0;
    bottom: 0;
    width: 3px;
    height: auto;
    transform: scaleY(0);
    transform-origin: center;
  }

  .st-tab.is-active::after {
    transform: scaleY(1);
  }

  .st-finder-bar {
    flex-wrap: wrap;
  }
}

@media only screen and (max-width: 767px) {
  :root {
    --st-section-y: 2.5rem;
    --st-head-gap: 1.75rem;
  }


  .st-hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .st-hero-phone {
    justify-content: flex-start;
  }

  /* The strip wraps here, and a left border on every item would put a rule on
     whichever item starts the second row — separating it from nothing. Even
     padding and a row gap carry it instead. */
  .st-hero-stats {
    gap: 16px 0;
  }

  .st-hero-stats li {
    flex: 1 0 40%;
    padding: 0 16px;
  }

  .st-hero-stats li:first-child {
    padding-left: 0;
  }

  .st-stat-num {
    font-size: 27px;
  }

  .st-promise-grid,
  .st-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /*
   * Die Regionen bleiben zu zweit nebeneinander.
   *
   * Untereinander gestapelt nähmen die Reiter den halben Bildschirm ein,
   * bevor überhaupt ein Ortsname zu sehen wäre — und der Sinn der Reihe ist,
   * dass man die Regionen auf einen Blick vergleicht. Mehr als zwei pro Zeile
   * wird hier zu eng (je rund 100px für Symbol, Name und Zahl); ein
   * überzähliger Reiter steht deshalb allein in der zweiten Zeile und wird
   * zentriert, bei gleicher Breite wie die beiden darüber — nicht über die
   * volle Breite gezogen, sonst sähe er wie eine andere Art von Element aus.
   */
  .st-tablist {
    grid-auto-flow: row;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 12px;
    background-color: transparent;
    border-bottom: 1px solid #f2e4d1;
  }

  /*
   * Auf dem Telefon sind es wieder KARTEN, keine Reiter.
   *
   * Als Reiter funktionieren sie, solange sie eine durchgehende Leiste bilden
   * — die Trennlinien und die Linie am unteren Rand tragen die Bedeutung. Im
   * zweispaltigen Raster stehen sie mit Abstand voneinander; ohne eigenen
   * Rahmen schweben dann drei randlose Flächen im Nichts, und beim dritten
   * sah der orange Balken links aus wie ein Fehler.
   *
   * Mit Rahmen, Radius und einer Markierung an der Oberkante sind sie wieder
   * als Schalter erkennbar.
   */
  .st-tab {
    /* Kompakter, damit zwei nebeneinander nicht gedrängt wirken: Symbol
       kleiner, Zahl unter den Namen statt daneben. */
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 13px;
    border: 1px solid #f0e5d1;
    border-radius: 12px;
    background-color: #fff;
  }

  .st-tab.is-active {
    border-color: var(--st-orange);
  }

  /* Die Markierung zurück an die Oberkante — innerhalb des Radius, sonst
     steht sie über die abgerundete Ecke hinaus. */
  .st-tab::after {
    left: 12px;
    right: 12px;
    top: 0;
    bottom: auto;
    width: auto;
    height: 3px;
    border-radius: 0 0 3px 3px;
    transform: scaleX(0);
  }

  .st-tab.is-active::after {
    transform: scaleX(1);
  }

  /* Der dritte steht allein in der zweiten Zeile, mittig und so breit wie
     die beiden darüber. */
  .st-tab:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - 5px);
  }

  .st-finder {
    border-radius: 16px;
  }

  .st-finder-bar {
    padding: 14px;
  }

  /* Die Zahl rückt über das Feld: nebeneinander bleiben für das Suchfeld
     keine sinnvollen 200px übrig. */
  .st-finder-total {
    order: -1;
    width: 100%;
    padding-left: 0;
    border-left: 0;
  }

  .st-panels {
    padding: 18px 16px 20px;
  }

  .st-tab-icon {
    width: 38px;
    height: 38px;
    border-radius: 11px;
  }

  .st-tab-icon svg {
    width: 19px;
    height: 19px;
  }

  .st-tab-label {
    font-size: 14.5px;
  }

  .st-tab-meta {
    font-size: 12px;
  }

  .st-panel-head {
    flex-wrap: wrap;
  }

  .st-promise-card {
    padding: 22px 54px 24px 20px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .st-hero-phone,
  .st-hero-phone-ico,
  .st-tab,
  .st-tab::after,
  .st-tab-icon,
  .st-link,
  .st-link-pin,
  .st-link-arrow,
  .st-promise-card,
  .st-promise-card::before,
  .st-promise-num,
  .st-icon-badge {
    transition: none;
  }

  .st-hero-phone:hover,
  .st-link:hover,
  .st-promise-card:hover {
    transform: none;
  }
}