/* Ortsseiten (17.10.2026), gebaut von build/orte.py. Seit dem 19./20.10.2026
   stehen die Ortsseiten aus den Bausteinen der Startseite: HeroWorkspace,
   HomeReference, HomeSegments, HomePreis, HomeLeistungen und ProcessShowcase.
   Deren Markup und Stil kommen aus der Startseite und aus branche.css. Hier
   steht nur, was die Bausteine nicht mitbringen: die Adresszeile im Abschluss
   (ort-adresse), das Weiter-Band mit Branchen, Werkzeugen und den anderen
   Orten (ort-weiter) sowie Anpassungen an die Ortskarte (#ml-ort) und die
   Fallstudien-Galerie (#referenzen). */

/* Abschluss: die Adresse unter der Telefonnummer */
.dt-land .ort-adresse{margin:1rem 0 0;font-size:.9rem;color:var(--text-on-dark-muted,#9fb2c6)}

/* Weiter: Branchen, Werkzeuge, andere Orte */
.dt-land .ort-weiter{padding-block:clamp(3rem,6vw,5rem)}
.dt-land .ort-weiter__raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2rem;padding-top:2rem;border-top:1px solid var(--border-subtle)}
.dt-land .ort-weiter b{display:block;margin-bottom:.6rem;font-family:var(--font-display);font-size:var(--fs-eyebrow,.8rem);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--color-blue)}
.dt-land .ort-weiter ul{list-style:none;margin:0;padding:0;display:grid;gap:.1rem}
.dt-land .ort-weiter li a,.dt-land .ort-weiter li span{display:inline-flex;align-items:center;min-height:36px;font-size:.98rem;color:var(--text-muted);text-decoration:none}
.dt-land .ort-weiter li a:hover{color:var(--text-strong);text-decoration:underline;text-underline-offset:3px}
.dt-land .ort-weiter li span[aria-current]{color:var(--text-strong);font-weight:600}
@media (max-width:1000px){.dt-land .ort-weiter__raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .dt-land .ort-weiter__raster{grid-template-columns:minmax(0,1fr)}
  .dt-land .ort-weiter li a,.dt-land .ort-weiter li span{min-height:44px}
}

/* Die Karte des Orts (HomeSegments) traegt seit dem 19.10.2026 alle Kunden
   der Region, in Bern ueber zwanzig. Das Bildfeld der Startseite hat ein
   festes Seitenverhaeltnis 16:9 und schneidet ab, was nicht hineinpasst,
   ohne dass etwas ueberlaeuft (siehe CLAUDE.md, die Rechnung hinter jeder
   Branchenkarte). Hier waechst das Feld mit den Logos statt abzuschneiden,
   ab sieben Logos (drei Spalten). Ab dreizehn Logos vier Spalten auf dem
   Desktop, sonst stuende Bern in sieben Reihen. Die id schlaegt das
   Komponenten-CSS, das nach dieser Datei eingefuegt wird. */
#ml-ort .dt-nc[data-cols="3"] .dt-nc__art { aspect-ratio: auto; min-height: 16rem; }
#ml-ort .dt-nc[data-cols="3"] .dt-nc__logos { position: relative; inset: auto; }
@media (min-width: 1001px) {
  #ml-ort .dt-nc[data-cols="3"] .dt-nc__logos:has(> :nth-child(13)) > * { flex: 0 1 calc(25% - .53rem); }
}

/* ---------------------------------------------------------------------------
   19.10.2026, Ortsfaelle: die Fallstudien der Kunden am Ort (HomeReference,
   Karten mit nurIds). Wo es kein oeffentliches Portrait gibt, steht die Szene
   ohne Menschen (Regeln unten) oder mit einem runden Portrait, wo das Foto
   auf der Website des Kunden zu klein zum Freistellen ist (wie AddExpert auf
   /akquire/). Mit #referenzen davor, damit die Regeln gegen das <style> der
   Galerie gewinnen (CLAUDE.md, Kaskade). */
@media (min-width:901px){
  #referenzen .rk-rund--einzeln{height:62%;right:5%;top:auto;bottom:9%}
  #referenzen .rk-rund--einzeln figcaption{right:62%;bottom:4%}
}
/* Zollikon: zwei runde Portraits wie bei smino; der Titel bleibt links, das obere
   Namensschild steht unten statt oben, sonst laege es auf dem Titel. */
@media (min-width:901px){
  #referenzen .rk--ort-zollikon .rk-titel{width:40%}
  #referenzen .rk--ort-zollikon .rk-rund--a figcaption{top:auto;bottom:4%}
}
@media (max-width:900px){
  #referenzen .rk-rund--einzeln{height:46%;right:5%;top:auto;bottom:30%}
}
@media (min-width:901px){
  /* Ohne Menschen: das Fenster rechts und gross, wo sonst die Person steht,
     die Infokarte links unter dem Titel. Die Breite folgt der Hoehe der Karte
     (Bildschirmfotos 1440x900, also 1.6), damit es den Titel nie beruehrt. */
  #referenzen .rk--ohne-person .rk-titel{width:44%}
  #referenzen .rk--ohne-person .rk-fenster{left:auto;right:4.5%;width:min(46cqw,calc((84cqh - 34px) * 1.6))}
  #referenzen .rk--ohne-person .rk-info{left:4.5%;right:auto;bottom:7cqh;transform-origin:left bottom}
  #referenzen .rk--ohne-person .rk-kreis{opacity:.6}
}
@media (max-width:900px){
  #referenzen .rk--ohne-person .rk-fenster{right:12px;width:auto}
}
/* Bern hat 16 Fallstudien: 16 Punkte sind auf dem Telefon breiter als der
   Bildschirm (452 Punkte bei 390, seitlicher Ueberlauf). Ab zwoelf Punkten
   ruecken sie enger zusammen; jede Tippflaeche bleibt 44 Punkte breit, sie
   ueberlappen nur staerker (wie schon -10 px in der Galerie). */
@media (max-width:600px){
  #referenzen .dt-rg__pille:has(.dt-rg__punkt:nth-child(12)) .dt-rg__punkt:not(.is-aktuell){margin:0 -15px}
}