/* SH-Beratungsstellen: übernommen aus dem Child-Theme (inc/sh-bs-suche.php, Stand 23.10.2026). */
/* Die Basis traegt nur die Schriftfassung - den Hintergrund bringt die
   jeweilige Variante mit, oder eben die Section darunter. */
.sh-bse{color:var(--sh-on-navy);}
.sh-bse--navy{background:var(--sh-navy-gradient);}
/* Offen: kein Kasten, kein Rahmen, kein Radius. Der Inhalt richtet sich an
   der Divi-Zeile aus statt einen eigenen Container aufzuspannen. */
.sh-bse--offen .sh-bse__inner{width:auto;padding-inline:0;}
.sh-bse .sh-bse__inner{padding-block:clamp(2.2rem,5vw,3.4rem);}
.sh-bse .sh-bse__title{
	font-family:var(--sh-font-head);font-weight:800;color:var(--sh-on-navy);
	font-size:clamp(1.5rem,3vw,2.1rem);line-height:1.2;
	margin:0 0 .5rem;text-wrap:balance;
}
.sh-bse .sh-bse__intro{
	color:var(--sh-on-navy-soft);font-size:clamp(.98rem,1.4vw,1.1rem);
	line-height:1.6;max-width:56ch;margin:0 0 1.6rem;
}

/* Eine Zeile aus drei Rollen: Feld (die Eingabe), heller Knopf (die Aktion),
   Geisterknopf (die Abkuerzung). Der weisse Knopf ist gefuellt, weil er die
   Hauptaktion ist; der Standort steht bewusst leiser daneben. */
.sh-bse .sh-bse__form{
	display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;
}
.sh-bse .sh-bse__field{
	position:relative;display:flex;align-items:center;
	flex:1 1 300px;min-width:0;
}
.sh-bse .sh-btn--light{flex:0 0 auto;}
.sh-bse .sh-btn--light svg{width:1em;height:1em;}

.sh-bse .sh-bse__geo{
	display:inline-flex;align-items:center;gap:.45rem;flex:0 0 auto;
	min-height:48px;padding:0 1rem;cursor:pointer;
	font-family:var(--sh-font-body);font-size:.9rem;font-weight:700;
	color:var(--sh-on-navy);background:transparent;
	border:2px solid rgba(255,255,255,.5);border-radius:var(--sh-r-pill);
	transition:border-color var(--sh-dur-fast) ease,background-color var(--sh-dur-fast) ease,color var(--sh-dur-fast) ease;
}
.sh-bse .sh-bse__geo svg{width:19px;height:19px;flex:0 0 19px;}
@media (hover:hover){
	.sh-bse .sh-bse__geo:hover{background:#fff;border-color:#fff;color:var(--sh-navy);}
}
.sh-bse .sh-bse__geo[aria-busy="true"]{opacity:.6;pointer-events:none;}

.sh-bse .sh-bse__status{
	min-height:1.3em;margin:.9rem 0 0;
	font-size:.9rem;line-height:1.5;color:var(--sh-on-navy-soft);
}

/* Der Fokusring des Design-Systems ist navy und waere hier unsichtbar. */
.sh-bse a:focus-visible,
.sh-bse button:focus-visible,
.sh-bse input:focus-visible{outline-color:#fff;}
.sh-bse .sh-field:focus{border-color:#fff;box-shadow:0 0 0 4px rgba(255,255,255,.24);}

/* ------------------------------------------------------------------
   Helle Variante: die blaugraue Bestandsflaeche #9fabb3.
   Weisse Schrift ist hier ausgeschlossen - gemessen 2,21:1 (DESIGN.md,
   Die Tonflaechen-Regel). Ueberschrift navy (5,3:1), Fliesstext Ink (6,2:1).
   Die Hauptaktion wechselt von weiss gefuellt auf navy gefuellt: ein weisser
   Knopf haette auf Grau kaum Kontrast und wuerde mit dem weissen Feld
   verschwimmen.
   ------------------------------------------------------------------ */
.sh-bse--hell{background:#9fabb3;border-radius:6px;}
.sh-bse--hell .sh-bse__inner{width:auto;padding-inline:clamp(1.2rem,4vw,2.4rem);}
.sh-bse--hell .sh-bse__title{color:var(--sh-navy);}
.sh-bse--hell .sh-bse__intro{color:var(--sh-ink);}
.sh-bse--hell .sh-bse__status{color:var(--sh-navy);font-weight:600;}
.sh-bse--hell .sh-btn--light{background:var(--sh-navy);color:var(--sh-on-navy);}
.sh-bse--hell .sh-bse__geo{color:var(--sh-navy);border-color:rgba(22,57,93,.55);}
@media (hover:hover){
	.sh-bse--hell .sh-btn--light:hover{background:var(--sh-navy-deep);}
	.sh-bse--hell .sh-bse__geo:hover{background:var(--sh-navy);border-color:var(--sh-navy);color:var(--sh-on-navy);}
}
/* Auf heller Flaeche traegt der navyfarbene Fokusring wieder - die weisse
   Ausnahme oben gilt nur fuer die dunkle Variante. */
.sh-bse--hell a:focus-visible,
.sh-bse--hell button:focus-visible,
.sh-bse--hell input:focus-visible{outline-color:var(--sh-navy);}
.sh-bse--hell .sh-field:focus{border-color:var(--sh-navy);box-shadow:var(--sh-focus-ring);}

/* Unter 620px bekommt jede Rolle ihre eigene Zeile: nebeneinander bliebe
   fuer das Feld zu wenig, und getippt wird hier am meisten. */
@media (max-width:620px){
	.sh-bse .sh-bse__form{display:grid;grid-template-columns:1fr;gap:.6rem;}
	.sh-bse .sh-btn--light,
	.sh-bse .sh-bse__geo{width:100%;justify-content:center;}
}