/* ============================================================================
   ORTSSEITEN  (/webdesign-niederkassel, -bonn, -koeln, -eifel)

   Diese Datei ist ein NACHTRAG zu websites.css, kein Ersatz. Die Ortsseiten
   laden beide und tragen ebenfalls body.web — dadurch gelten Kopfleiste,
   Farben, Knoepfe, .sec-head, .branchen__grid, .steps, .faq, .cta und der
   Fuss unveraendert. Hier steht nur, was es auf /websites nicht gibt.

   Der Orts-Hero zeigt eine verlinkte Projektvorschau als leichtes WebP.
   Kein zusaetzliches JavaScript oder eingebetteter Monitor erforderlich.
   ========================================================================= */

/* ---- 01 KOPF ---------------------------------------------------------------
   Ruhiger Einstieg statt Buehne. Der Verlauf nach unten ins Weisse setzt die
   Seite vom Kopfbereich ab, ohne eine harte Kante zu ziehen — dieselbe
   Cyan-Spur wie im Hero von /websites, nur flach. */
/* Innenabstand oben: war clamp(96px,12vw,150px) — 12vw ist ein BREITEN-Mass
   fuer einen HOEHEN-Abstand. Auf 1920px kamen so 150px zusammen, und der Kopf
   baute 965px. Zusammen mit Taskleiste und Browserleiste (nutzbar oft ~900px)
   rutschten die Zusagen und der Knopf unter die Falz — also genau das, was
   jemanden zum Anrufen bringt. Jetzt deutlich knapper. */
/* Rund 18% Hoehe raus: Der Handlungsaufruf sass sonst weit unten im Bild.
   Gekuerzt wurde an den Abstaenden, nicht an der Schriftgroesse — die
   Ueberschrift soll ihre Wirkung behalten. */
.ortkopf{position:relative;padding:clamp(84px,7.6vw,112px) var(--page) clamp(26px,2.8vw,38px);
  background:linear-gradient(180deg,var(--cyan-soft) 0%,#f7fbfe 46%,var(--white) 100%);
  border-bottom:1px solid var(--line);overflow:hidden}
/* Feiner Lichtkegel oben links — dieselbe Geste wie .szene__licht, aber als
   reiner Verlauf statt als Element. Rein dekorativ, deshalb pointer-events:none. */
.ortkopf::before{content:"";position:absolute;inset:-40% 40% 55% -20%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(25,191,244,.16),transparent 70%)}
.ortkopf__inner{position:relative;max-width:var(--wrap);margin:0 auto}

.ortkopf h1{max-width:16ch;font-size:clamp(2.3rem,5.4vw,4rem);line-height:1.03;
  letter-spacing:-.035em;font-weight:730;text-wrap:balance}
/* KEINE zusaetzliche Einfaerbung des Ortsnamens. .hl bringt aus websites.css
   bereits den Cyan-Balken mit; hier stand zusaetzlich color:var(--cyan-ink),
   also Balken UND blaue Schrift auf demselben Wort. Zwei Auszeichnungen fuer
   eine Betonung sind eine zu viel — und auf /websites traegt „Kunden bringt."
   ebenfalls nur den Balken bei dunkler Schrift. Eine Hervorhebung, ueberall
   dieselbe. */
.ortkopf .lead{margin:14px 0 0;max-width:56ch;
  font-size:clamp(1.06rem,1.5vw,1.22rem);line-height:1.55;color:var(--ink-soft);text-wrap:pretty}

/* Knopf und Telefonnummer nebeneinander: Auf einer Ortsseite ist der Anruf
   oft der kuerzere Weg als das Formular — er steht deshalb gleichberechtigt
   daneben und nicht erst im Fuss. */
.ortkopf__aktion{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px;margin:24px 0 0}

/* ---- FRUEHER EINSTIEG NACH /websites ---------------------------------------
   Direkt unter dem Hero, bevor der erste lange Abschnitt beginnt. Wer nach
   der Ueberschrift wissen will "und wie sieht das dann aus?", soll nicht
   erst durch die halbe Seite scrollen muessen, um zum Monitor zu kommen.

   Bewusst LEISE gehalten: eine Zeile, keine Flaeche, kein zweiter Knopf.
   Der Hero direkt darueber endet mit "Festpreis anfragen" — ein gleich
   lauter zweiter Handlungsaufruf wuerde ihn schwaechen statt ergaenzen. Das
   hier ist ein Hinweisschild, die dunkle .uebergabe weiter unten die Tuer. */
/* Der Seitenabstand gehoert AUSSEN an die Sektion, die Breitenbegrenzung
   INNEN — so macht es jeder andere Abschnitt (.ortkopf, .naehe, .branchen).
   Zuerst stand beides am selben Element: Der Abstand kam dadurch zusaetzlich
   zur zentrierten Breite und die Zeile begann 72px weiter rechts als jede
   andere Textkante der Seite. */
.fruehlink{border-bottom:1px solid var(--line);background:var(--white);
  padding:clamp(10px,1.2vw,15px) var(--page)}
.fruehlink__inner{max-width:var(--wrap);margin:0 auto;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.fruehlink p{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
/* Zielgroesse: Der Link war 256 x 20 px — WCAG 2.2 (2.5.8) verlangt
   mindestens 24 x 24 CSS-Pixel. Der Innenabstand hebt die Trefferflaeche auf
   34px, der gleich grosse negative Aussenabstand nimmt ihn optisch wieder
   zurueck: Die Zeile sitzt exakt wie vorher, nur die Flaeche ist groesser.
   Nichts Interaktives liegt daneben, deshalb ist die Ueberlappung
   unbedenklich. */
.fruehlink .web-link{font-size:.95rem;padding:7px 0;margin:-7px 0}

@media(max-width:560px){
  .fruehlink__inner{flex-direction:column;gap:8px}
}

/* ---- UEBERGABE AN /websites -------------------------------------------------
   Die Ortsseiten gewinnen die lokale Suche, ueberzeugen tut die Hauptseite:
   Dort laeuft der Monitor, der automatisch durch echte Kundenprojekte fuehrt
   und den man selbst weiterscrollen kann. Das ist das stark
   Ueberzeugungsstueck des Auftritts — und von hier fuehrte bisher nur ein
   Menuepunkt dorthin.

   Deshalb ein eigener, dunkler Abschnitt: Er ist die Tuer, nicht eine
   Randnotiz. Dunkel, weil die Seite sonst durchgehend hell ist — der Wechsel
   markiert "hier geht es weiter" staerker als jede Pfeilgrafik. Dieselbe
   Farbe wie .takt und .cta, also nichts Neues im Farbsystem.

   Bewusst KEIN eingebetteter Monitor: Er haengt an hero.js, rund 400 Zeilen
   Markup und drei iframes. Ihn hier zu wiederholen wuerde die Ortsseite
   verlangsamen — ausgerechnet auf der Seite, die mit Tempo wirbt. Die
   Ankuendigung ist leicht, das Erlebnis liegt einen Klick entfernt. */
.uebergabe{position:relative;padding:clamp(62px,8vw,112px) var(--page);background:var(--navy);
  color:#dbe6f2;overflow:hidden;border-top:1px solid rgba(255,255,255,.08)}
.uebergabe::before{content:"";position:absolute;top:0;left:var(--page);width:clamp(56px,7vw,104px);
  height:3px;background:var(--cyan)}
.uebergabe__inner{max-width:var(--wrap);margin:0 auto;display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(360px,.95fr);
  gap:clamp(52px,7vw,104px);align-items:start}
.uebergabe__text .eyebrow{margin:0 0 18px;color:var(--cyan)}
.uebergabe h2{margin:0;color:#fff;max-width:12ch;
  font-size:clamp(2.45rem,5.2vw,4.9rem);line-height:.98;letter-spacing:-.052em;
  font-weight:735;text-wrap:balance}
.uebergabe__detail{margin-top:clamp(34px,4vw,58px);padding-left:clamp(26px,3.2vw,48px);
  border-left:1px solid rgba(255,255,255,.16)}
.uebergabe__detail > p{margin:0;max-width:47ch;color:#afc0d1;
  font-size:clamp(1rem,1.35vw,1.11rem);line-height:1.65;text-wrap:pretty}
.uebergabe__merkmale{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:30px 0 0;
  padding:0;list-style:none;border-block:1px solid rgba(255,255,255,.14)}
.uebergabe__merkmale li{min-width:0;padding:16px 12px 17px 0;color:#eef5fb;
  font-size:.81rem;font-weight:650;line-height:1.25}
.uebergabe__merkmale li + li{padding-left:12px;border-left:1px solid rgba(255,255,255,.14)}
.uebergabe__merkmale span{display:block;margin-bottom:7px;color:var(--cyan);font-size:.66rem;
  font-weight:760;letter-spacing:.12em}
/* Pfeil direkt hinter dem Text statt an die rechte Spaltenkante geschoben.
   Mit justify-content:space-between stand er weit rechts, ohne Bezug zur
   Zeile davor — Text und Pfeil lasen sich als zwei Dinge. Jetzt eine
   Einheit: linksbuendig auf der Textachse, und die Unterlinie endet mit dem
   Inhalt statt quer durch die leere Spalte zu laufen. */
.uebergabe__link{display:flex;align-items:center;justify-content:flex-start;gap:14px;
  width:fit-content;max-width:100%;
  min-height:58px;margin-top:26px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.28);
  color:#fff;text-decoration:none;font-size:clamp(1rem,1.35vw,1.12rem);font-weight:700;
  transition:border-color .18s ease,color .18s ease}
/* Pfeil frei stehend, ohne Kasten. Der gefuellte Cyan-Block daneben las sich
   wie ein zweiter Knopf und stand damit in Konkurrenz zum Anfrage-Knopf im
   Hero. Ohne Flaeche bleibt die Geste — die Zeile ist ohnehin ueber ihre
   volle Breite anklickbar, die Trefferflaeche haengt an min-height:58px des
   Links und nicht am Pfeil. Dafuer groesser gesetzt, sonst verliert er ohne
   Flaeche zu viel Gewicht. */
.uebergabe__link::after{content:"↗";display:grid;place-items:center;flex:0 0 auto;
  color:var(--cyan);font-size:1.85rem;line-height:1;
  transition:transform .18s ease,color .18s ease}
.uebergabe__link:hover{border-color:var(--cyan)}
.uebergabe__link:hover::after{transform:translate(4px,-4px);color:#fff}
.uebergabe__link:focus-visible{outline:3px solid #fff;outline-offset:5px}

@media(max-width:900px){
  .uebergabe__inner{grid-template-columns:1fr;gap:0}
  .uebergabe h2{max-width:14ch}
  .uebergabe__detail{margin-top:32px;padding:28px 0 0;border-left:0;border-top:1px solid rgba(255,255,255,.16)}
}

@media(max-width:640px){
  .uebergabe{padding-block:54px}
  .uebergabe h2{font-size:clamp(2.2rem,11.5vw,3.15rem);line-height:1}
  .uebergabe__detail{margin-top:26px;padding-top:24px}
  .uebergabe__detail > p{font-size:1rem;line-height:1.58}
  .uebergabe__merkmale{margin-top:24px}
  .uebergabe__merkmale li{padding-block:14px;font-size:.75rem;overflow-wrap:normal}
  .uebergabe__merkmale li + li{padding-left:9px}
  .uebergabe__merkmale span{margin-bottom:6px}
  .uebergabe__link{margin-top:22px;font-size:.98rem}
}

@media(prefers-reduced-motion:reduce){
  .uebergabe__link,.uebergabe__link::after{transition:none}
}

/* ---- 02 ANTWORTBLOCK -------------------------------------------------------
   Der wichtigste Absatz der Seite: die Kurzantwort auf „Webdesign <Ort>" in
   40 bis 60 Woertern, mit allen harten Fakten (Ort, Preisform, Dauer,
   laufende Kosten, Referenz).

   Warum er sichtbar abgesetzt ist: Er richtet sich an zwei Leser gleichzeitig.
   Der Mensch, der in fuenf Sekunden wissen will, ob er hier richtig ist — und
   das Sprachmodell, das aus der Seite eine zitierfaehige Einheit herausloest.
   Beide brauchen denselben Absatz, und beide finden ihn leichter, wenn er
   nicht in der Flaeche verschwindet. */
.antwort{margin:26px 0 0;max-width:60ch;padding:22px clamp(20px,2.4vw,28px);
  background:var(--white);border:1px solid var(--line);border-left:3px solid var(--cyan);
  box-shadow:0 1px 2px rgba(13,24,38,.04),0 18px 38px -30px rgba(13,24,38,.5)}
.antwort p{margin:0;font-size:1.04rem;line-height:1.62;color:var(--ink)}
.antwort strong{font-weight:680}

/* ---- 03 NAEHE --------------------------------------------------------------
   Was „vor Ort" konkret heisst: Anfahrt, was ein Termin kostet (naemlich
   nichts), welche Orte dazugehoeren. Das ist der Abschnitt, der eine
   Ortsseite von einer allgemeinen Leistungsseite unterscheidet — er steht
   deshalb weit oben und nicht als Fussnote. */
.naehe{padding:clamp(52px,7vw,100px) var(--page);background:var(--paper)}
.naehe__grid{max-width:var(--wrap);margin:0 auto;display:grid;gap:clamp(16px,2vw,22px);
  grid-template-columns:repeat(3,1fr)}
.naehe__karte{padding:clamp(22px,2.6vw,30px);background:var(--white);
  border:1px solid var(--line);border-top:3px solid var(--cyan)}
.naehe__karte h3{margin:0 0 10px;font-size:1.14rem;font-weight:690;letter-spacing:-.01em}
.naehe__karte p{margin:0;font-size:.97rem;line-height:1.58;color:var(--ink-soft)}
/* Die Kennzahl (Fahrzeit, Entfernung) als eigene Zeile ueber der Ueberschrift:
   Sie ist die Information, wegen der jemand den Abschnitt ueberhaupt liest. */
.naehe__wert{display:block;margin:0 0 6px;font-size:.78rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--cyan-ink)}

/* Nachbarorte / Stadtteile. Bewusst KEINE Links: Es gibt keine eigenen Seiten
   dafuer, und Links ins Leere sind schlechter als reiner Text. Sie stehen
   hier, weil Leute mit dem Namen ihres Stadtteils suchen, nicht mit dem der
   Stadt. */
.nachbarn{max-width:var(--wrap);margin:clamp(26px,3vw,36px) auto 0;padding:0;list-style:none;
  display:flex;flex-wrap:wrap;gap:8px}
.nachbarn li{padding:7px 14px;background:var(--white);border:1px solid var(--line);
  color:var(--ink-soft);font-size:.9rem;font-weight:540}
.nachbarn__titel{max-width:var(--wrap);margin:clamp(30px,3.4vw,40px) auto 0;
  font-size:.82rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}


/* ---- 04 ORTSREFERENZ -------------------------------------------------------
   Ein einzelnes echtes Projekt, gross. Auf /websites stehen drei nebeneinander
   — hier zaehlt nur das eine, das mit diesem Ort zu tun hat. Bild links,
   Text rechts; auf dem Handy Bild oben. */
.ortcase{padding:clamp(52px,7vw,100px) var(--page);background:var(--white)}
.ortcase__box{max-width:var(--wrap);margin:0 auto;display:grid;gap:clamp(24px,3.4vw,48px);
  grid-template-columns:minmax(0,.92fr) minmax(0,1fr);align-items:center}
.ortcase__bild{margin:0;border:1px solid var(--line);background:var(--paper);overflow:hidden}
.ortcase__bild img{width:100%;height:auto}
.ortcase__tag{display:inline-block;margin:0 0 12px;font-size:.78rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--cyan-ink)}
.ortcase__box h3{margin:0 0 14px;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.1;
  letter-spacing:-.025em;font-weight:710}
.ortcase__box > div > p{margin:0 0 18px;font-size:1.02rem;line-height:1.6;color:var(--ink-soft)}
.ortcase__punkte{margin:0 0 22px;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
.ortcase__punkte li{position:relative;padding-left:24px;font-size:.97rem;line-height:1.5;color:var(--ink-soft)}
.ortcase__punkte li::before{content:"";position:absolute;left:0;top:.5em;
  width:9px;height:9px;background:var(--cyan);transform:rotate(45deg)}

/* Hier stand eine Variante ohne Bild (--solo), weil von Kegema kein
   Screenshot vorlag. Erledigt: assets/cases/kegema-web.webp existiert, alle
   Ortsseiten zeigen jetzt ein echtes Bild. Regel entfernt statt auskommentiert
   — tote Klassen sammeln sich sonst an. */

/* Wen du triffst. Auf einer Ortsseite ist das kein Beiwerk — die Frage
   „mit wem rede ich eigentlich" ist bei einem lokalen Betrieb oft die
   eigentliche Entscheidung. Deshalb Gesicht, Name, Nummer. */
.person{display:flex;align-items:center;gap:18px;
  grid-column:1/-1;padding:clamp(18px,2.2vw,24px);
  background:var(--white);border:1px solid var(--line);border-top:3px solid var(--cyan)}
.person__bild{flex:0 0 auto;width:76px;height:76px;margin:0;border-radius:50%;overflow:hidden;background:var(--paper)}
.person__bild img{width:100%;height:100%;object-fit:cover}
.person__wer{margin:0 0 4px;font-size:1.05rem;font-weight:690;letter-spacing:-.01em}
.person__rolle{margin:0 0 8px;font-size:.88rem;color:var(--muted)}
.person p:last-child{margin:0;font-size:.95rem;line-height:1.5;color:var(--ink-soft)}
/* Kontaktzeile statt Zitat. Hier stand ein erfundener Satz, der Sebastian
   zugeschrieben war — raus. Was bleibt, ist ueberpruefbar: Wer baut, und
   worueber man ihn erreicht. Beide Wege anklickbar, weil die Karte auf dem
   Handy oft der Punkt ist, an dem jemand tatsaechlich anruft. */
/* `p.person__kontakt` statt nur `.person__kontakt`: Die Regel darueber
   (.person p:last-child) traegt eine Klasse, eine Pseudoklasse und ein
   Element. Mit Element im Selektor steht es gleich, und die spaetere Regel
   gewinnt — kein !important noetig. */
.person p.person__kontakt{display:flex;flex-wrap:wrap;gap:4px 10px;margin:8px 0 0;
  font-size:.93rem;font-weight:600}
.person__kontakt a{color:var(--cyan-ink);text-decoration:none}
.person__kontakt a:hover{text-decoration:underline}

/* ---- 05 PREISTABELLE -------------------------------------------------------
   Die sechs Preisfragen als echte Tabelle statt als Karten.

   Grund: Vergleichbare Fakten in Fliesstext werden weder als Featured Snippet
   noch von einem Sprachmodell als Einheit ausgespielt — eine Tabelle schon.
   Es stehen bewusst KEINE Eurobetraege drin ausser den 49 €, die ohnehin
   ueberall genannt werden: Was nicht belegt ist, wird nicht behauptet. */
.preistab{padding:clamp(52px,7vw,100px) var(--page);background:var(--paper)}
/* Der Rahmen scrollt, nicht die Seite. Ohne das laeuft die Tabelle auf dem
   Handy quer aus dem Bild und zieht den ganzen Body mit. */
.preistab__rahmen{max-width:var(--wrap);margin:0 auto;overflow-x:auto;
  background:var(--white);border:1px solid var(--line)}
.preistab table{width:100%;min-width:620px;border-collapse:collapse;font-size:.97rem}
.preistab th{padding:15px clamp(14px,1.6vw,20px);text-align:left;vertical-align:bottom;
  background:var(--paper);border-bottom:1px solid var(--line);
  font-size:.78rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--muted)}
.preistab td{padding:15px clamp(14px,1.6vw,20px);vertical-align:top;
  border-bottom:1px solid var(--line);color:var(--ink-soft);line-height:1.5}
.preistab tr:last-child td{border-bottom:0}
.preistab td:first-child{color:var(--ink);font-weight:640}
.preistab__fuss{max-width:var(--wrap);margin:20px auto 0;font-size:.95rem;
  line-height:1.55;color:var(--ink-soft)}

/* Auf kleinen Bildschirmen wird aus der breiten Vergleichstabelle eine Folge
   lesbarer Preisfaktoren. Das Tabellen-Markup und seine Kopfzellen bleiben fuer
   assistive Technik erhalten; nur die visuelle Anordnung aendert sich. */
@media(max-width:700px){
  .preistab__rahmen{overflow:visible;background:transparent;border:0}
  .preistab table{min-width:0;border-collapse:separate;border-spacing:0}
  .preistab thead{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .preistab tbody{display:grid;gap:12px}
  .preistab tbody tr{display:grid;grid-template-columns:1fr;background:var(--white);
    border:1px solid var(--line);box-shadow:0 14px 28px -28px rgba(13,24,38,.5)}
  .preistab tbody td{border:0;padding:13px 16px}
  .preistab tbody td:first-child{padding-block:14px 12px;border-bottom:1px solid var(--line);
    font-size:1rem;font-weight:700}
  .preistab tbody td:nth-child(n+2){display:grid;grid-template-columns:minmax(82px,96px) minmax(0,1fr);
    gap:12px;align-items:start;color:var(--ink-soft)}
  .preistab tbody td:nth-child(n+2)::before{font-size:.7rem;line-height:1.35;font-weight:750;
    letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .preistab tbody td:nth-child(2)::before{content:"Weniger Aufwand"}
  .preistab tbody td:nth-child(3){padding-top:0}
  .preistab tbody td:nth-child(3)::before{content:"Mehr Aufwand"}
  .preistab tbody tr:last-child td:nth-child(2)::before{content:"Laufende Betreuung"}
}

/* ---- 06 SCHMALE ANSICHTEN --------------------------------------------------
   Zwei Bruchpunkte, nicht drei: bei 900px fallen die dreispaltigen Raster auf
   zwei, bei 640px alles auf eine Spalte. Dieselben Werte wie in websites.css,
   damit die Seiten beim Wechsel nicht an unterschiedlichen Stellen umbrechen. */
@media(max-width:900px){
  .naehe__grid{grid-template-columns:repeat(2,1fr)}
  .ortcase__box{grid-template-columns:1fr}
}
/* Sehr schmale Geraete (iPhone SE und aelter, 320px): Dort wird die
   Ueberschrift so hoch, dass selbst mit gedrehter Reihenfolge kein Knopf mehr
   ueber die Falz passt. Eine Stufe kleiner und etwas weniger Luft oben loest
   das, ohne auf normalen Handys etwas zu aendern. */
@media(max-width:360px){
  .ortkopf{padding-top:82px}
  .ortkopf h1{font-size:2rem;letter-spacing:-.03em}
  .ortkopf .lead{font-size:1rem}
  .preistab tbody td:nth-child(n+2){grid-template-columns:1fr;gap:6px}
}

@media(max-width:640px){
  .naehe__grid{grid-template-columns:1fr}
  .ortkopf h1{max-width:none}
  /* Im Hero von /websites duerfen die Zusagen nicht umbrechen, weil sie dort
     neben der Buehne stehen. Hier haben sie die volle Breite — nowrap wuerde
     sie auf schmalen Geraeten aus dem Bild schieben. */
  .ortkopf .trustmarks li{white-space:normal}
  .ortkopf__aktion .web-btn{width:100%}
}

/* ===== ZWEITER FALL AUF EINER ORTSSEITE (13.09.2026) =====
   Nach Erlkoenig folgt IBO; in der Eifel bleibt der Reifenservice.
   Zwei gleich gebaute Bloecke direkt untereinander lesen sich als
   Wiederholung, deshalb spiegelt der zweite die Spalten (Bild rechts) und
   steht auf --paper statt --white.
   Das order:2 wird unter 900px zurueckgenommen. Dort faellt das Raster
   ohnehin auf eine Spalte, und ohne die Ruecknahme rutschte das Bild unter
   den Text - auf dem Handy soll es weiter zuerst kommen, es ist das
   Argument, nicht die Beschriftung. */
.ortcase--zweit{background:var(--paper);border-top:1px solid var(--line)}
.ortcase--zweit .ortcase__box{grid-template-columns:minmax(0,1fr) minmax(0,.92fr)}
.ortcase--zweit .ortcase__bild{order:2;background:var(--white)}
@media(max-width:900px){
  .ortcase--zweit .ortcase__box{grid-template-columns:1fr}
  .ortcase--zweit .ortcase__bild{order:0}
}


/* ===== BROWSERLEISTE UEBER DEM FALLBILD (13.09.2026) =====
   Der Screenshot stand bisher nackt in einem 1px-Rahmen. Mit Leiste liest
   er sich als Website statt als Bild - dieselbe Idee wie .mock auf
   shops.html und software.html.
   NICHT .mock WIEDERVERWENDET, und das ist Absicht: die Klasse steht in
   shops.css UND software.css, keine der beiden wird auf den Ortsseiten
   geladen, und die zwei Kopien sind bereits auseinandergelaufen
   (software.css hat .mock--crop, eine Transition und eine Monospace-
   Adresse, shops.css nicht). Eine dritte Kopie derselben Klasse in einer
   dritten Datei waere die Falle, in die schon zweimal jemand getreten ist.
   Eine Klasse fuer beide Stellen, Hero und Fall - deshalb .browserleiste
   und nicht .ortcase__leiste, sie gehoert nicht mehr nur dorthin.
   ECKIG, anders als .mock mit seinen 12px: die Ortsseiten sind es ueberall,
   und .ortcase__bild war es vorher auch. Rund sind nur die drei Punkte,
   die sind Punkte und keine Flaeche. */
.browserleiste{display:flex;align-items:center;gap:7px;height:32px;padding:0 13px;
  background:#0b1422;border-bottom:1px solid #1b2942}
.browserleiste i{width:9px;height:9px;border-radius:50%;background:#233549;flex:0 0 auto}
.browserleiste em{margin-left:10px;font-style:normal;font-size:.73rem;color:#93a8bd;
  font-family:"Geist Mono",monospace;letter-spacing:.01em;overflow:hidden;
  white-space:nowrap;text-overflow:ellipsis}
.ortcase__bild{background:#0b1422}


/* ===== PROJEKT IM ORTS-HERO (13.09.2026) =====
   Text und Projekt teilen sich ein Raster. Dadurch kann auch eine lange
   Ortsueberschrift nicht ins Bild laufen. Auf kleinen Bildschirmen folgt
   der Beleg direkt auf den Anfragebereich, in derselben DOM-Reihenfolge.
   Die Infobox ueberlagert nur auf dem Desktop die untere Bildkante. */
.ortkopf__inner{display:grid;gap:32px;align-items:start}
.ortkopf__text,.ortkopf__projekt{min-width:0}
.ortkopf__fuss .trustmarks{margin-top:30px}
.ortkopf__projekt{width:100%;max-width:640px}
.ortkopf__bild{margin:0}
.ortkopf__projektlink{display:block;color:var(--ink);text-decoration:none}
.ortkopf__beleg{display:block;margin-bottom:11px;font-size:.88rem;line-height:20px;
  color:var(--ink-soft)}
.ortkopf__beleg strong{display:inline-block;color:var(--cyan-ink);font-weight:650}
.ortkopf__projektlink:hover .ortkopf__beleg strong{text-decoration:underline;text-underline-offset:3px}
.ortkopf__projektlink:focus-visible{outline:3px solid var(--ink);outline-offset:6px}
.ortkopf__fenster{display:block;background:#0b1422;
  box-shadow:0 3px 8px rgba(8,16,28,.10),0 34px 64px -26px rgba(8,16,28,.35)}
.ortkopf__bild img{display:block;width:100%;height:auto}
.ortkopf__projekt > .antwort{margin-top:24px;max-width:none}

@media(min-width:1100px){
  .ortkopf__inner{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:clamp(32px,3.5vw,56px)}
  .ortkopf h1{max-width:none;font-size:clamp(2.8rem,4.1vw,3.6rem)}
  .ortkopf .lead{max-width:none}
  .ortkopf__projekt{max-width:none}
  .ortkopf__projekt > .antwort{position:relative;margin:-76px 24px 0 auto;
    max-width:300px;padding:18px 20px;
    border-left:1px solid var(--line);border-top:3px solid var(--cyan);
    box-shadow:0 2px 4px rgba(8,16,28,.10),0 26px 50px -22px rgba(8,16,28,.55)}
  .ortkopf__projekt > .antwort p{font-size:.96rem;line-height:1.55}
}

/* Weiter zur gesamten Auswahl, direkt nach den beiden Projektbeispielen. */
.ortcase__mehr{max-width:var(--wrap);margin:32px auto 0;padding-top:24px;
  border-top:1px solid var(--line)}
.ortcase__mehr .web-link{display:inline-flex;align-items:center;min-height:32px}