/* fortschrittdigital · Stadtseiten „KI-Automatisierung <Stadt>“
   Alle Sektionen nutzen Bausteine aus styles.css. Hier nur, was es noch nicht gibt:
   Footer mit fünfter Spalte „Einzugsgebiet“ (beim Go-live nach styles.css übernehmen) und Umbruchschutz. */

.fuss__spalte a[aria-current="page"]{color:var(--akzent)}

/* kurze KI-Wörter nicht nach „KI-“ umbrechen */
.nb{white-space:nowrap}

/* 1:1 aus dem Inline-Stil der Startseite (version-z, User 30.10.2026), damit Quiz, Orange und Use Case gleich aussehen.
   Ändert sich der Block in index.html, hier nachziehen. */
:root{--hl-orange:#D96F00}
.hl,h3 .hl,.dunkel .hl,.hl--dunkel,.cta-band .hl,.praxis__inhalt h3 .hl{color:var(--hl-orange)!important}
.hl:not(.w__i)::after,.dunkel .hl::after,.cta-band .hl::after{background:var(--hl-orange)!important}
.quiz .quiz__intro:not(#_){justify-content:center;min-height:0}
.quiz .quiz__intro .quiz__meta{margin-top:.5rem}
#praxis .praxis__bild{position:relative;align-self:start;width:200px;aspect-ratio:4/5;min-height:0;border-radius:18px;overflow:hidden;margin:clamp(1.5rem,1rem + 2.5vw,3rem) 0 0 clamp(1.5rem,1rem + 2.5vw,3rem)}
@media (min-width:900px){#praxis .praxis{grid-template-columns:auto minmax(0,1fr)}}
#praxis .praxis__link{display:inline;align-self:flex-start}
#praxis .praxis__link svg{display:inline-block;vertical-align:middle;margin-left:.35rem}

/* Fakten-Block wie „Richtiger Weg“ der Startseite (Regeln dort inline unter #richtiger-weg) */
#in-zahlen .weg2{max-width:var(--max);display:grid;gap:clamp(1.5rem,3.5vw,3rem);align-items:stretch;padding:clamp(1.5rem,3.5vw,3rem);border-radius:var(--r-block);background:var(--flaeche);text-align:left}
@media (min-width:981px){#in-zahlen .weg2{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
#in-zahlen .weg2__text{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:1rem;text-align:left}
#in-zahlen .weg2__text p:not(.eyebrow){font-size:var(--fs-text)}
#in-zahlen .weg2__antwort{padding:.1rem 0 .1rem 1rem;border-left:3px solid var(--hl-orange)}
#in-zahlen .weg2__antwort strong{color:var(--akzent-dunkel)}
@media (max-width:600px){#in-zahlen .weg2{padding:1.25rem 1rem}}

/* Grafik-Karte „Wer in Heidelberg arbeitet“: Personen-Raster, Balken, Rang. Keine exakten Zahlen (User 31.10.2026) */
.sf{display:flex;flex-direction:column;justify-content:space-between;gap:clamp(1.1rem,2vw,1.5rem);align-self:stretch;margin:0;box-shadow:none}
.sf .graf__titel{margin-bottom:0}
.sf__block{display:grid;gap:.75rem;padding-bottom:clamp(1.1rem,2vw,1.5rem);border-bottom:1px solid var(--linie)}
.sf__kopf{display:flex;align-items:baseline;flex-wrap:wrap;gap:.25rem .75rem;margin:0}
.sf__kopf strong{font:700 clamp(1.6rem,1.2rem + 1.2vw,2.25rem)/1 var(--head);letter-spacing:-.02em;color:var(--tinte)}
.sf__kopf span{font-size:.9375rem;color:var(--text-2)}
.sf__personen{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:clamp(4px,1vw,10px);max-width:440px}
.sf__p svg{display:block;width:100%;height:auto;fill:var(--grau-hell)}
.sf__p--an svg{fill:var(--akzent)}
.sf__balken{height:14px;border-radius:999px;background:var(--grau-hell);overflow:hidden}
.sf__balken i{display:block;width:var(--w);height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--anthrazit),var(--akzent))}
.sf__skala{display:flex;justify-content:space-between;margin:0;font:600 .75rem/1.2 var(--head);letter-spacing:.04em;text-transform:uppercase;color:var(--text-3)}
.sf__skala span:first-child{color:var(--akzent-dunkel)}
.sf__rang{display:flex;align-items:center;gap:1rem}
.sf__rang b{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:var(--anthrazit);color:var(--weiss);font:700 1.5rem/1 var(--head)}
.sf__rang p{display:grid;gap:.15rem;margin:0}
.sf__rang strong{font:700 1.0625rem/1.3 var(--head);color:var(--tinte)}
.sf__rang span{font-size:.9375rem;color:var(--text-2)}
.sf__quelle{margin:0;font-size:.75rem;line-height:1.5;color:var(--text-3)}
.sf__quelle a{color:var(--akzent-dunkel)}


/* Werte-Zeile unter der Grafik (gerundet) */
.sf__werte{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.75rem 1.25rem;padding-top:clamp(1rem,2vw,1.25rem);border-top:1px solid var(--linie)}
.sf__werte p{display:grid;gap:.2rem;margin:0}
.sf__werte strong{font:700 clamp(1.15rem,1rem + .5vw,1.4rem)/1.1 var(--head);color:var(--tinte)}
.sf__werte span{font-size:.8125rem;line-height:1.4;color:var(--text-2)}

/* Ludwigshafen: Industrie gegen Büro */
.sf__split{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:stretch;gap:.75rem}
.sf__seite{display:flex;flex-direction:column;gap:.5rem;padding:clamp(1rem,2vw,1.25rem);border-radius:var(--r-innen);border:1px solid var(--linie)}
.sf__seite--aus{background:var(--flaeche);color:var(--text-3)}
.sf__seite--an{border-color:rgba(var(--akzent-rgb),.55);background:var(--weiss);box-shadow:0 18px 36px -24px rgba(var(--akzent-rgb),.6)}
.sf__seite-label{margin:0;font:700 .6875rem/1.2 var(--head);letter-spacing:.08em;text-transform:uppercase}
.sf__seite--an .sf__seite-label{color:var(--akzent-dunkel)}
.sf__seite-titel{margin:0 0 .25rem;font:700 1rem/1.3 var(--head);color:var(--tinte)}
.sf__seite--aus .sf__seite-titel{color:var(--text-2)}
.sf__seite ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.sf__seite li{display:flex;align-items:center;gap:.6rem;font:600 .9375rem/1.3 var(--head)}
.sf__seite--aus li{color:var(--text-3);text-decoration:line-through;text-decoration-color:rgba(0,0,0,.25)}
.sf__seite--an li{color:var(--tinte)}
.sf__seite svg{flex:none;width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.sf__seite--an svg{stroke:var(--akzent)}
.sf__pfeil{display:grid;place-items:center}
.sf__pfeil svg{width:26px;height:26px;fill:none;stroke:var(--akzent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.sf__split{grid-template-columns:1fr}.sf__pfeil svg{transform:rotate(90deg)}}

/* Rhein-Neckar: schematische Karte */
.sk{display:block;width:100%;height:auto}
.sk__land{fill:var(--flaeche);stroke:var(--weiss);stroke-width:3}
.sk__land--he{fill:var(--grau-hell)}
.sk__land--bw{fill:#E8E8EA}
.sk__rhein{fill:none;stroke:#9A9DA3;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 7}
.sk__fluss{font:600 11px var(--body);fill:var(--text-3);font-style:normal}
.sk__land-name{font:700 10.5px var(--head);letter-spacing:.08em;text-transform:uppercase;fill:var(--text-3)}
.sk__ort circle{fill:var(--akzent)}
.sk__ort text{font:600 11px var(--body);fill:var(--text-2)}
.sk__gross circle{fill:var(--anthrazit);stroke:var(--weiss);stroke-width:2.5}
.sk__gross text{font:700 11.5px var(--head);fill:var(--tinte)}

/* Frankfurt: Skyline */
.sl{display:block;width:100%;height:auto}
.sl__turm{fill:#C9CBD0}
.sl__buero{fill:var(--akzent);opacity:.9}
.sl__boden{stroke:var(--tinte);stroke-width:2;stroke-linecap:round}
.sl__label path{stroke:#9A9DA3;stroke-width:1.2;stroke-dasharray:3 4}
.sl__label text{font:600 11.5px var(--body);fill:var(--text-2)}
.sl__label--an text{font:700 12.5px var(--head);fill:var(--akzent-dunkel)}
.sl__fenster{stroke:var(--weiss);stroke-width:2;stroke-linecap:round;opacity:.7}
.sl__tuer{fill:var(--weiss);opacity:.85}

/* Werte-Zeile mobil: gleich breite Zeilen statt 2 + 1 */
@media (max-width:560px){
  .sf__werte{grid-template-columns:1fr;gap:.6rem}
  .sf__werte p{grid-template-columns:8.5rem minmax(0,1fr);align-items:baseline;gap:.75rem}
}

.sf__werte span{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}

/* Kennzahlen in der Textspalte (Rhein-Neckar, Frankfurt): ohne Trennlinie oben, volle Spaltenbreite */
.weg2__text .sf__werte{width:100%;padding-top:0;border-top:0}
@media (min-width:561px){.weg2__text .sf__werte{grid-template-columns:repeat(auto-fit,minmax(0,1fr));gap:.75rem 1.5rem}}
.weg2__text .sf__werte strong{white-space:nowrap}
.weg2__text .sf__werte strong{font-size:clamp(1.05rem,.9rem + .45vw,1.3rem)}
@media (min-width:561px){.weg2__text .sf__werte{gap:.75rem 1rem}.weg2__text .sf__werte strong{font-size:clamp(1rem,.85rem + .4vw,1.2rem)}}
@media (min-width:561px){.weg2__text .sf__werte{gap:.75rem 1rem}.weg2__text .sf__werte strong:not(#_){font-size:clamp(1rem,.8rem + .45vw,1.2rem)}}
@media (min-width:981px){#in-zahlen .weg2__text:not(#_):not(#__){justify-content:space-between}}