/* ==============================================================
   stadt.css  ·  Besitzer: P8 Staedte & Region  ·  v4 „Passer“ (25.09.2026)
   Markup: includes/stadtseite.php (14 Staedteseiten) und region.php.
   Plan 8.6 (K50, K51, K53), 11.4, 11.6. Nur Tokens (tokens.css), keine
   eigenen Farben, Radien, Schatten, Easings. Nichts unter 14 px - auch
   auf dem Desktop (Plan 6).

   Inhalt
     1 K50 Staedte-Hero (Grundgeruest .u-hero aus leistung.css, damit
       Unterseiten und Staedteseiten gleich anfangen) + Passer-Entfernung
     2 Kurzantwort + Fakten (Datenzeile statt grauer Kaesten)
     3 K51 Angebot: Leuchtkasten-Karten, mobil "Weiterlesen"
     4 Referenzen aus der Naehe (Browser-Boegen) + Filme aus dem Ort
     5 Fragen (offene Liste wie K46)
     6 km-Strahl (Nachbarorte; senkrecht auf /region.php und mobil)
     7 Weiter-Zeilen in den Kapiteln
   Rueckbau v3 (25.09.2026): .stadt-kurz-grid, .fliess-block, .orts-raster
   und die grauen .ort-karte-Kaesten werden nicht mehr erzeugt.
   ============================================================== */

/* ---- 1 K50 Staedte-Hero --------------------------------------------- */
.s-hero-bild{display:grid;gap:clamp(.75rem, .5rem + 1vw, 1.25rem);min-width:0;align-content:center;max-width:36rem}
.s-hero-bild > *{min-width:0}
/* Entfernung als Passer-Zahl: "rund 6,0 km Luftlinie vom Laden" -
   Wert aus geo-daten.php (= Faktenpaket-Tabelle), Wortlaut in einer Zeile. */
.s-entfernung,.r-bis{
  display:flex;flex-wrap:wrap;align-items:baseline;column-gap:.6rem;row-gap:.1rem;margin:0;
}
.s-entfernung .etikett,.r-bis .etikett{color:var(--muted)}
.s-entfernung-text,.r-bis-text{
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem);line-height:1.3;color:var(--text);
}
/* Jüchen: Ladenfoto statt Karte (dort ist der Laden) */
.s-hero-bild > .bogen .bogen-bild img{aspect-ratio:3 / 2;object-fit:cover}

/* ---- 2 Kurzantwort + Fakten ------------------------------------------ */
.s-kurz-innen{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem, 1rem + 2vw, 3rem);align-items:start}
.s-kurz-innen > *{min-width:0}
@media (min-width:56rem){
  .s-kurz-innen{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
}
/* Kurzantwort zuerst - der Absatz, den KI-Antworten zitieren koennen */
.kurzantwort{
  font-size:clamp(1.125rem, 1.05rem + .35vw, 1.3rem);line-height:1.6;max-width:62ch;margin:0;
  padding-left:clamp(1rem, .8rem + .6vw, 1.4rem);border-left:3px solid var(--haar);color:var(--text);
}
.stadt-fakten{display:grid;gap:0 clamp(1rem, .6rem + 1.5vw, 2rem);grid-template-columns:minmax(0,1fr);margin:0}
.stadt-fakten{grid-template-columns:repeat(2,minmax(0,1fr))}
.stadt-fakten div{display:grid;gap:.2rem;align-content:start;padding:.8rem 0 .9rem;border-top:1px solid var(--line-2);min-width:0}
.stadt-fakten dt{
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.875rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.stadt-fakten dd{margin:0;font-family:var(--schrift-titel);font-weight:600;font-stretch:96%;font-size:1.0625rem;line-height:1.35;color:var(--text)}

/* ---- 3 K51 Angebot: Leuchtkasten-Karten -------------------------------- */
.s-karten{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1rem, .6rem + 1.6vw, 2rem);align-items:start}
@media (min-width:56rem){
  .s-karten[data-anzahl="2"],.s-karten[data-anzahl="4"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  .s-karten[data-anzahl="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
}
/* 56-64rem: drei Karten waeren zu schmal (unter 30 Zeichen je Zeile) */
@media (min-width:56rem) and (max-width:63.99rem){
  .s-karten[data-anzahl="3"]{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.s-karte{
  display:flex;flex-direction:column;gap:.85rem;min-width:0;
  padding:clamp(1.25rem, 1rem + 1vw, 2rem);
  background-color:var(--flaeche-licht);color:var(--text);
  border-radius:var(--r-karte);box-shadow:var(--sh-1);
}
/* Piktogramm: mobil neben der Ueberschrift (spart je Karte eine Zeile),
   ab 56rem darueber. */
.s-karte-kopf{display:flex;align-items:center;gap:1rem;min-width:0}
.s-karte-kopf > h2{min-width:0}
.s-karte .l-platte{width:2.75rem;height:2.75rem}
.s-karte .l-platte .l-symbol{width:1.6rem;height:1.6rem}
@media (min-width:56rem){
  .s-karte-kopf{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .s-karte .l-platte{width:3.5rem;height:3.5rem}
  .s-karte .l-platte .l-symbol{width:2.1rem;height:2.1rem}
}
.s-karte h2{
  font-size:clamp(1.25rem, 1.1rem + .6vw, 1.55rem);font-weight:680;font-stretch:94%;line-height:1.2;
  margin:0;max-width:none;
}
.s-karte .fliess{margin:0;max-width:66ch;color:var(--text)}
.s-mehr{display:block}
/* details legt seinen Inhalt in einen eigenen Schlitz - gap wirkt dort
   nicht, darum Abstaende als Rand. */
.s-mehr > .fliess,.s-mehr > .stadt-punkte{margin:.85rem 0 0}
.s-mehr > summary + .fliess{margin-top:0}
/* "Weiterlesen": karte.js schliesst details[data-zu] beim Laden (kern.js
   zusaetzlich mobil). Offen verschwindet der Knopf - ohne JS steht alles offen. */
.s-mehr[open] > summary{display:none}
.s-mehr > summary{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;cursor:pointer;list-style:none;width:max-content;
  font-family:var(--schrift-titel);font-weight:640;font-stretch:96%;font-size:1rem;color:var(--accent-text);
}
.s-mehr > summary::-webkit-details-marker{display:none}
.s-mehr > summary::after{content:"\2193" / "";display:inline-block}
.stadt-punkte{margin:0;padding-left:1.2rem;display:grid;gap:.35rem;color:var(--text)}
.stadt-punkte li::marker{color:var(--accent-text)}
/* Weiter-Link nach dem Text (Plan 11.4: Textlink mit Pfeil statt Knopf) */
.s-link{margin:0}
.s-karte .s-link{padding-top:.25rem}
.s-link a{
  display:inline-flex;align-items:center;gap:.4rem;min-height:24px;
  font-family:var(--schrift-titel);font-weight:640;font-stretch:96%;font-size:1.0625rem;
  color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
  text-decoration-color:var(--line-2);
}
.s-link a span{display:inline-block;transition:translate var(--t-kurz) var(--ease)}
.s-link a:hover{text-decoration-color:currentColor;text-decoration-thickness:2px}
@media (hover:hover) and (pointer:fine){
  .s-link a:hover span{translate:4px 0}
}

/* ---- 4 Referenzen aus der Naehe + Filme -------------------------------- */
.s-refs-kapitel h2,.s-fragen h2,.s-nachbarn h2{max-width:28ch}
.s-refs-kapitel .sub{margin-bottom:clamp(1.25rem, 1rem + 1vw, 2rem)}
.s-refs{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
  grid-template-columns:minmax(0,1fr)}
/* mobil ab zwei Referenzen: Wischreihe, Nachbarkarte schaut hervor
   (Laengenbudget); die Links darin sind per Tab erreichbar. */
@media (max-width:47.99rem){
  .s-refs:not([data-anzahl="1"]){
    grid-auto-flow:column;grid-auto-columns:min(78%, 20rem);grid-template-columns:none;
    overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;
    margin-inline:calc(var(--gut) * -1);padding:0 var(--gut) .75rem;scroll-padding-inline:var(--gut);
  }
  .s-refs:not([data-anzahl="1"]) > .s-ref{scroll-snap-align:start}
}
@media (min-width:48rem){
  .s-refs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (min-width:64rem){
  .s-refs[data-anzahl="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
  .s-refs[data-anzahl="1"],.s-refs[data-anzahl="2"]{grid-template-columns:repeat(2,minmax(0,26rem))}
}
/* position: haelt das .sr-only (absolut) in der Wischreihe - sonst liegt es
   ausserhalb des Scrollbereichs und weitet mobil die Seite (gemessen 619 px). */
.s-ref{min-width:0;position:relative}
.s-ref-link{display:grid;gap:.5rem;color:var(--text);text-decoration:none}
.s-ref-link .bogen-bild img{aspect-ratio:640 / 347;object-fit:cover;object-position:top}
.s-ref-text{display:grid;gap:.15rem;padding-inline:.5rem}
.s-ref-meta{
  display:block;font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.875rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.s-ref-name{display:block;font-family:var(--schrift-titel);font-weight:680;font-stretch:94%;font-size:1.2rem;line-height:1.25}
.s-ref-pfeil{color:var(--accent-text);display:inline-block;transition:translate var(--t-kurz) var(--ease)}
.s-ref-link:hover .s-ref-name{color:var(--accent-text)}
@media (hover:hover) and (pointer:fine){
  .s-ref-link:hover .s-ref-pfeil{translate:3px -3px}
}
/* Filme (kh_videos, fremder Baustein): Flaeche gibt die Vorlage, die
   v3-Haarlinie und das alte Passer-Symbol vor der H2 entfallen (Plan 8.8). */
.s-filme > .sect{border-top:0;padding-block:var(--abstand-klein)}
.s-refs-kapitel + .s-filme > .sect{padding-top:0}
.s-filme .sect-head > .passer{display:none}

/* ---- 5 Fragen (offene Liste, Antwort zuerst) ---------------------------- */
.s-fragen h2{margin-bottom:clamp(1.25rem, 1rem + 1vw, 2rem)}
.s-faq dd{max-width:60ch}

/* ---- 6 km-Strahl (Nachbarorte, Regionsliste) -----------------------------
   Orte nach Luftlinie sortiert an einer Linie, Jüchen (Laden) als
   Passerpunkt in Magenta. Mobil und auf /region.php senkrecht, sonst ab
   64rem waagerecht (Linie oben, Punkt je Ort). Die Linie ist Deko: die
   Reihenfolge traegt die Liste selbst (ol). */
.km-strahl{
  --ks-punkt: 14px;
  list-style:none;margin:0;padding:0;position:relative;display:grid;gap:0;isolation:isolate;
}
/* Linie als Teilstueck je Ort: vom eigenen Punkt bis zum naechsten */
.ks-ort{--ks-oben: 1.05rem;position:relative;min-width:0;padding-left:calc(var(--ks-punkt) + 1rem)}
.ks-ort:not(:last-child)::after{
  content:"";position:absolute;z-index:0;left:calc(var(--ks-punkt) / 2 - 1px);width:2px;
  top:calc(var(--ks-oben) + var(--ks-punkt) / 2);height:100%;background:var(--line-2);
}
.ks-ort::before{
  content:"";position:absolute;z-index:1;left:0;top:var(--ks-oben);width:var(--ks-punkt);height:var(--ks-punkt);border-radius:50%;
  background-color:var(--flaeche-licht);border:3px solid var(--accent-text);
  transition:background-color var(--t-kurz) var(--ease),scale var(--t-kurz) var(--ease);
}
.ks-laden::before{background-color:var(--magenta);border-color:var(--magenta);box-shadow:3px 3px 0 var(--platte)}
.ks-ort:has(.ort-karte:hover)::before,.ks-ort:has(.ort-karte:focus-visible)::before,
.ks-ort:has(.ort-karte.ist-hervor)::before{background-color:var(--accent-text);scale:1.25}
.ort-karte{
  display:grid;gap:.1rem;padding:.6rem 0 .75rem;min-width:0;color:var(--text);text-decoration:none;
}
.ok-k{
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.875rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.ok-name{
  font-family:var(--schrift-titel);font-weight:700;font-stretch:92%;font-size:1.2rem;line-height:1.2;
  min-width:0;hyphens:auto;overflow-wrap:break-word;
}
.ok-name::after{
  content:"\2192" / "";display:inline-block;margin-left:.4rem;color:var(--accent-text);
  transition:translate var(--t-kurz) var(--ease);
}
.ok-notiz{font-size:.875rem;line-height:1.4;color:var(--muted)}
.ort-karte:hover .ok-name,.ort-karte:focus-visible .ok-name,.ort-karte.ist-hervor .ok-name{color:var(--accent-text)}
@media (hover:hover) and (pointer:fine){
  .ort-karte:hover .ok-name::after{translate:4px 0}
}
/* waagerecht (Nachbarorte der Staedteseiten): ab 64rem alle in einer
   Reihe, darunter als Wischreihe mit Linie (Laengenbudget mobil). */
.km-strahl:not(.km-strahl--senkrecht){
  grid-auto-flow:column;grid-auto-columns:minmax(10.5rem, 1fr);column-gap:1.25rem;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;
  margin-inline:calc(var(--gut) * -1);padding:.25rem var(--gut) .75rem;scroll-padding-inline:var(--gut);
}
.km-strahl:not(.km-strahl--senkrecht) > .ks-ort{scroll-snap-align:start}
@media (min-width:64rem){
  .km-strahl:not(.km-strahl--senkrecht){grid-auto-columns:minmax(0,1fr);overflow:visible;margin-inline:0;padding:0}
}
.km-strahl:not(.km-strahl--senkrecht) .ks-ort{--ks-oben: 0px;padding-left:0;padding-top:calc(var(--ks-punkt) + .6rem)}
.km-strahl:not(.km-strahl--senkrecht) .ks-ort:not(:last-child)::after{
  left:calc(var(--ks-punkt) / 2);top:calc(var(--ks-punkt) / 2 - 1px);width:calc(100% + 1.25rem);height:2px;
}
.km-strahl:not(.km-strahl--senkrecht) .ort-karte{padding-top:0}
.km-strahl:not(.km-strahl--senkrecht) .ok-name{font-size:1.125rem}
.s-alle{margin:1.25rem 0 0}
.s-alle .ort-alle{display:inline-grid;padding:.25rem 0}
@media (prefers-reduced-motion:reduce){
  .ks-ort::before,.ok-name::after,.s-link a span,.s-ref-pfeil{transition:none}
}

/* ---- 7 Weiter-Zeilen in den Kapiteln ------------------------------------ */
:is(.s-angebot, .s-fragen, .r-karte) > .weiter{padding-block:clamp(1.25rem, .9rem + 1.5vw, 2rem) 0}

/* Kicker im Hero nie trennen (basis.css trennt p unter 40rem). */
.s-hero .kicker,.r-hero .kicker{hyphens:manual}