/*
 * Standortseiten "KI-Beratung in <Ort>" und Übersicht /ki-beratung/.
 * Nur auf diesen Seiten geladen (inc/standorte.php). CI: Schwarz, Gold, Weiß.
 */

.st-anker { scroll-margin-top: 7rem; }

/* Breadcrumb */
.st-breadcrumb { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; font-size: .875rem; color: #6b7280; list-style: none; margin: 0; padding: 0; }
.st-breadcrumb a { color: #6b7280; text-decoration: none; transition: color .2s; }
.st-breadcrumb a:hover { color: #111827; }
.st-breadcrumb [aria-current] { color: #111827; }

/* Zweiter Button (weiß, schwarzer Text) */
.st-btn-zweit { display: inline-flex; align-items: center; gap: .5rem; padding: .875rem 2rem; border-radius: 9999px; font-size: .875rem; font-weight: 500; color: #111827; background: #fff; border: 1px solid #e5e7eb; text-decoration: none; transition: border-color .3s, color .3s; }
.st-btn-zweit:hover { border-color: #ECD26F; color: #96690A; }

/* Kennzahlen unter dem Hero */
.st-kennzahlen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; margin: 0 auto; max-width: 64rem; }
@media (min-width: 768px) { .st-kennzahlen { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.st-kennzahlen > div { background: #fff; border: 1px solid rgba(229, 231, 235, .6); border-radius: 1.5rem; padding: 1.25rem 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); }
.st-kennzahlen dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .05em; color: #6b7280; font-weight: 500; margin-bottom: .375rem; }
.st-kennzahlen dd { margin: 0; font-size: 1.25rem; font-weight: 500; color: #111827; letter-spacing: -.01em; line-height: 1.3; overflow-wrap: anywhere; }
.st-kennzahlen span { display: block; font-size: .875rem; color: #6b7280; font-weight: 300; margin-top: .25rem; }

/* Fließtext aus dem Meta */
.st-text p { font-size: 1.125rem; line-height: 1.8; color: #4b5563; font-weight: 300; margin: 0 0 1.25rem; }
.st-text p:last-child { margin-bottom: 0; }
.st-text strong { color: #111827; font-weight: 600; }

/* Icon-Kreis */
.st-icon { display: inline-flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 9999px; background: #FCF8E8; color: #96690A; }

.st-label { display: inline-flex; align-self: flex-start; font-size: .75rem; font-weight: 500; letter-spacing: .03em; color: #96690A; background: #FCF8E8; border: 1px solid #F3E3A4; border-radius: 9999px; padding: .25rem .75rem; }

/* Eckdaten */
.st-eckdaten { margin: 0; }
.st-eckdaten > div { display: grid; grid-template-columns: 7.5rem 1fr; gap: 1rem; padding: .75rem 0; border-bottom: 1px solid #f3f4f6; }
.st-eckdaten > div:last-child { border-bottom: 0; }
.st-eckdaten dt { color: #6b7280; font-size: .9375rem; }
.st-eckdaten dd { margin: 0; color: #111827; font-size: .9375rem; font-weight: 500; overflow-wrap: anywhere; }
.st-adresse { display: flex; gap: .75rem; margin-top: 1.5rem; padding: 1.25rem; border-radius: 1rem; background: #FCF8E8; color: #111827; }
.st-adresse i, .st-adresse svg { color: #96690A; flex-shrink: 0; margin-top: .125rem; }
.st-adresse p { margin: 0; font-size: .9375rem; line-height: 1.6; }
.st-adresse a { color: #96690A; }
.st-quelle { margin: 1.5rem 0 0; font-size: .875rem; color: #6b7280; font-weight: 300; }
.st-quelle a { color: #6b7280; text-decoration: underline; }
.st-quelle a:hover { color: #111827; }

/* Fristen und Programme */
.st-fristen { list-style: none; margin: 0; padding: 0; counter-reset: frist; }
.st-fristen li { position: relative; padding: 0 0 1rem 1.75rem; color: #4b5563; font-weight: 300; line-height: 1.7; }
.st-fristen li::before { content: ""; position: absolute; left: .25rem; top: .6rem; width: .5rem; height: .5rem; border-radius: 9999px; background: #D4AF37; }
.st-fristen li:last-child { padding-bottom: 0; }
.st-fristen strong { color: #111827; font-weight: 600; }
.st-programme { list-style: none; margin: 0; padding: 0; }
.st-programme li { padding: .875rem 0; border-bottom: 1px solid #f3f4f6; line-height: 1.6; }
.st-programme li:first-child { padding-top: 0; }
.st-programme li:last-child { border-bottom: 0; }

/* Haken-Liste */
.st-haken { list-style: none; margin: 0; padding: 0; }
.st-haken li { display: flex; gap: .75rem; align-items: flex-start; padding: .5rem 0; color: #111827; font-size: 1rem; line-height: 1.5; }
.st-haken i, .st-haken svg { color: #96690A; flex-shrink: 0; margin-top: .125rem; }

/* FAQ */
.st-faq details { background: #fff; border: 1px solid rgba(229, 231, 235, .6); border-radius: 1.5rem; padding: 0 1.75rem; margin-bottom: 1rem; transition: border-color .3s; }
.st-faq details[open] { border-color: #F3E3A4; }
.st-faq summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.375rem 0; font-size: 1.125rem; font-weight: 500; color: #111827; }
.st-faq summary::-webkit-details-marker { display: none; }
.st-faq summary i, .st-faq summary svg { flex-shrink: 0; color: #6b7280; transition: transform .3s; }
.st-faq details[open] summary i, .st-faq details[open] summary svg { transform: rotate(180deg); }
.st-faq summary:focus-visible { outline: 2px solid #B8860B; outline-offset: 4px; border-radius: .5rem; }
.st-faq details p { margin: 0; padding: 0 0 1.5rem; color: #4b5563; font-weight: 300; font-size: 1.0625rem; line-height: 1.75; }

/* Orte-Chips */
.st-orte-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .75rem; }
.st-orte-chips a { display: inline-flex; align-items: center; gap: .625rem; padding: .625rem 1.125rem; background: #fff; border: 1px solid #e5e7eb; border-radius: 9999px; color: #111827; font-weight: 500; text-decoration: none; transition: border-color .3s, color .3s; }
.st-orte-chips a:hover { border-color: #ECD26F; color: #96690A; }
.st-orte-chips span { font-size: .8125rem; color: #6b7280; font-weight: 400; }

/* Karte */
.st-karte { margin: 0; background: #fff; border: 1px solid rgba(229, 231, 235, .6); border-radius: 2rem; padding: 1.5rem; box-shadow: 0 2px 8px rgba(0, 0, 0, .04); }
.st-karte svg { display: block; width: 100%; height: auto; }
.st-karte figcaption { margin-top: .75rem; font-size: .875rem; color: #6b7280; font-weight: 300; text-align: center; }
.st-ring { fill: none; stroke: #e5e7eb; stroke-width: 1; stroke-dasharray: 4 5; }
.st-ring-text { font-size: 11px; fill: #6b7280; font-family: Inter, sans-serif; }
.st-punkt circle { fill: #111827; stroke: #fff; stroke-width: 1.5; transition: fill .2s; }
.st-punkt text { font-size: 12px; font-weight: 500; fill: #111827; font-family: Inter, sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 3px; stroke-linejoin: round; }
.st-punkt:hover circle, .st-punkt:focus circle { fill: #B8860B; }
.st-punkt:focus { outline: none; }
.st-punkt:focus-visible circle { stroke: #B8860B; stroke-width: 3; }
.st-punkt-sitz circle { fill: #D4AF37; stroke: #111827; stroke-width: 2; }
.st-punkt-sitz text { font-size: 13px; font-weight: 600; }

/* Suche und Regionen (Übersicht). Zwei IDs nicht nötig: kein <button>. */
.st-suche { position: relative; display: flex; align-items: center; width: 100%; max-width: 20rem; }
.st-suche i, .st-suche svg { position: absolute; left: 1rem; color: #6b7280; pointer-events: none; }
.st-suche input { width: 100%; padding: .75rem 1rem .75rem 2.75rem; border: 1px solid #e5e7eb; border-radius: .75rem; background: #fff; font-size: 1rem; color: #111827; }
.st-suche input:focus { outline: none; border-color: #ECD26F; box-shadow: 0 0 0 3px #F9F0CD; }
.st-regionen { display: grid; gap: 1.5rem; grid-template-columns: 1fr; }
@media (min-width: 768px) { .st-regionen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .st-regionen { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.st-region[hidden], .st-region li[hidden] { display: none !important; }
.st-region ul { list-style: none; margin: 0; padding: 0; }
.st-region li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid #f3f4f6; }
.st-region li:last-child { border-bottom: 0; }
.st-region a { color: #111827; text-decoration: none; font-weight: 500; transition: color .2s; }
.st-region a:hover { color: #96690A; }
.st-region li span { color: #6b7280; font-size: .875rem; white-space: nowrap; }