/* Köln-Hub · Art Direction 06.10.2026
   Leitidee „Rheinisch, ruhig, klar“: Markenfarben der Startseite, große Bildflächen für Anliegen,
   eine dunkle Rhein-Sektion als Ortsbezug. Nur auf /standorte/koeln/ geladen. */
.koeln-polished, .overview-refined, .koeln-needs, .koeln-veedel {
  --ka-ink:#16344b; --ka-muted:#536574; --ka-paper:#f4f6f8; --ka-line:#d8e0e7;
  --ka-blue:#215d85; --ka-magenta:#a61657; --ka-hero:#102b40; --ka-river:#6aa9d3;
}

/* Hero: Keyword-Zeile über dem Kölsch-Satz */
.koeln-art-hero .koeln-art-hero__keyword {
  display:block; margin-bottom:16px; color:#d5e5f0;
  font-family:Inter,sans-serif; font-size:clamp(1rem,1.5vw,1.3rem); font-weight:600;
  letter-spacing:0; line-height:1.35;
}
.koeln-art-hero .koeln-cinema-hero__copy { max-width:720px; }
.koeln-art-hero .koeln-cinema-hero__copy > p { max-width:540px; }

/* Anliegen-Raster */
.koeln-needs { padding:clamp(72px,9vw,124px) 0; background:var(--ka-paper); }
.koeln-needs__head { max-width:720px; margin:0 auto clamp(36px,5vw,56px); text-align:center; }
.koeln-needs__head h2 { margin:14px 0 18px; color:var(--ka-ink); font-family:Barlow,sans-serif; font-weight:600; font-size:clamp(2.3rem,4.4vw,4rem); line-height:1.02; letter-spacing:-.02em; }
.koeln-needs__head p { margin:0 auto; max-width:58ch; color:var(--ka-muted); line-height:1.75; }
.koeln-needs__grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); grid-auto-rows:minmax(260px,auto); gap:18px; }
.koeln-need { position:relative; isolation:isolate; overflow:hidden; display:flex; align-items:flex-end; grid-column:span 4; min-height:260px; border-radius:20px; background:var(--ka-hero); color:#fff; text-decoration:none; box-shadow:0 18px 40px -26px rgba(16,43,64,.55); transition:transform .25s ease, box-shadow .25s ease; }
.koeln-need:nth-child(2), .koeln-need:nth-child(3) { grid-column:span 5; }
.koeln-need--hero { grid-column:span 7; grid-row:span 2; }
.koeln-need > img { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.koeln-need:has(> img)::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,rgba(16,43,64,.05) 20%,rgba(16,43,64,.55) 55%,rgba(16,43,64,.94) 100%); }
.koeln-need:hover { transform:translateY(-5px); box-shadow:0 28px 54px -28px rgba(16,43,64,.6); color:#fff; }
.koeln-need:hover > img { transform:scale(1.05); }
.koeln-need:focus-visible { outline:3px solid var(--ka-blue); outline-offset:4px; }
.koeln-need__body { display:grid; gap:10px; width:100%; padding:clamp(22px,2.6vw,32px); }
.koeln-need__tag { display:inline-flex; align-items:center; gap:7px; justify-self:start; padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.16); backdrop-filter:blur(6px); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.koeln-need__tag svg { width:14px; height:14px; }
.koeln-need strong { font-family:Barlow,sans-serif; font-weight:600; font-size:clamp(1.4rem,2vw,1.85rem); line-height:1.1; letter-spacing:-.01em; }
.koeln-need--hero strong { font-size:clamp(2rem,3.2vw,3rem); }
.koeln-need__text { max-width:46ch; color:rgba(255,255,255,.86); font-size:.92rem; line-height:1.6; }
.koeln-need--hero .koeln-need__text { font-size:1.02rem; }
.koeln-need__chips { display:flex; flex-wrap:wrap; gap:7px; margin-top:4px; }
.koeln-need__chips span { padding:6px 12px; border-radius:999px; background:rgba(255,255,255,.14); font-size:.76rem; font-weight:600; }
.koeln-need__more { display:inline-flex; align-items:center; gap:7px; margin-top:6px; font-size:.86rem; font-weight:700; }
.koeln-need__more svg { width:16px; height:16px; transition:transform .2s ease; }
.koeln-need:hover .koeln-need__more svg { transform:translate(2px,-2px); }
.koeln-need--plain { align-items:stretch; background:#fff; color:var(--ka-ink); box-shadow:0 1px 2px rgba(16,43,64,.06); border:1px solid var(--ka-line); }
.koeln-need--plain:hover { color:var(--ka-ink); }
.koeln-need--plain .koeln-need__body { align-content:end; }
.koeln-need--plain .koeln-need__tag { background:#edf3f7; color:var(--ka-blue); }
.koeln-need--plain .koeln-need__text { color:var(--ka-muted); }
.koeln-need--plain .koeln-need__more { color:var(--ka-blue); }
.koeln-need--ask { align-items:stretch; background:linear-gradient(140deg,#0f2a3f 0%,#173f5c 60%,#1f5378 100%); }
.koeln-need--ask .koeln-need__body { align-content:end; }

/* Über Krause: Faktenbox statt Werbezahlen */
.koeln-about-hero { background:#fff; }
.koeln-about-hero__cta-badge { background:var(--ka-magenta); }
.koeln-facts { margin:30px 0 0; border-top:1px solid var(--ka-line); }
.koeln-facts > div { display:grid; grid-template-columns:132px minmax(0,1fr); gap:18px; padding:14px 0; border-bottom:1px solid var(--ka-line); }
.koeln-facts dt { padding-top:3px; color:var(--ka-blue); font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase; }
.koeln-facts dd { margin:0; color:var(--ka-ink); font-size:.92rem; line-height:1.6; }

/* Ablauf + Formular */
.koeln-overview { background:var(--ka-paper); }
.koeln-steps { padding:0; list-style:none; }
.koeln-steps > li { display:flex; gap:18px; padding:22px 0; border-top:1px solid #e1e7ec; }
.koeln-steps > li:first-child { padding-top:0; border-top:0; }
.koeln-steps > li:last-child { padding-bottom:0; }
.koeln-steps .koeln-overview__feature-icon { padding:0; background:var(--ka-ink); color:#fff; font-family:Barlow,sans-serif; font-size:1.1rem; font-weight:700; }
.koeln-overview__actions { display:flex; flex-wrap:wrap; gap:14px 28px; }

/* Rhein-Sektion */
.koeln-veedel { padding:clamp(80px,10vw,132px) 0; background:linear-gradient(160deg,#0f2a3f 0%,var(--ka-hero) 55%,#173f5c 100%); color:#fff; }
.koeln-veedel__head { max-width:640px; margin:0 0 clamp(40px,5vw,64px) auto; text-align:right; }
.koeln-veedel .detail-kicker { color:#9fc4de; }
.koeln-veedel__head h2 { margin:14px 0 18px; color:#fff; font-family:Barlow,sans-serif; font-weight:600; font-size:clamp(2.3rem,4.4vw,4rem); line-height:1.02; letter-spacing:-.02em; }
.koeln-veedel__head p { margin:0 0 0 auto; max-width:52ch; color:#c9d9e5; line-height:1.75; }
.koeln-veedel__map { display:grid; grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr); align-items:stretch; }
.koeln-veedel__label { display:block; margin-bottom:10px; color:#9fc4de; font-size:.7rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.koeln-veedel__side:first-child { text-align:right; }
.koeln-veedel__side ul { margin:0; padding:0; list-style:none; }
.koeln-veedel__side li { padding:15px 0; border-bottom:1px solid rgba(255,255,255,.12); }
.koeln-veedel__side strong { display:block; color:#fff; font-family:Barlow,sans-serif; font-weight:600; font-size:clamp(1.25rem,1.8vw,1.55rem); line-height:1.2; }
.koeln-veedel__side small { display:block; margin-top:3px; color:#b9cddb; font-size:.82rem; }
.koeln-veedel__river { position:relative; display:flex; justify-content:center; }
.koeln-veedel__river svg { width:60px; height:100%; overflow:visible; }
.koeln-veedel__river path { fill:none; stroke:var(--ka-river); stroke-width:7; stroke-linecap:round; vector-effect:non-scaling-stroke; }
.koeln-veedel__river span { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); padding:12px 6px; background:var(--ka-hero); color:#9fc4de; font-size:.72rem; font-weight:700; letter-spacing:.38em; text-transform:uppercase; writing-mode:vertical-rl; }
.koeln-veedel__quote { margin:34px 0 0; padding:24px 26px; border-radius:18px; background:rgba(255,255,255,.07); }
.koeln-veedel__quote p { margin:0 0 8px; color:#fff; font-family:Barlow,sans-serif; font-size:clamp(1.35rem,2vw,1.7rem); font-weight:600; line-height:1.25; }
.koeln-veedel__quote footer { color:#b9cddb; font-size:.84rem; line-height:1.6; }

/* FAQ weiß, Abschluss bleibt dunkel */
.koeln-veedel + .service-master-faq { background:#fff; }

@media (max-width:1100px) {
  .koeln-needs__grid { grid-template-columns:repeat(6,minmax(0,1fr)); }
  .koeln-need, .koeln-need:nth-child(2), .koeln-need:nth-child(3) { grid-column:span 3; }
  .koeln-need--hero { grid-column:span 6; grid-row:auto; min-height:440px; }
}
@media (max-width:760px) {
  .koeln-veedel__head { margin-left:0; text-align:left; }
  .koeln-veedel__head p { margin-left:0; }
  .koeln-veedel__map { grid-template-columns:1fr; }
  .koeln-veedel__side:first-child { text-align:left; }
  .koeln-veedel__river { align-items:center; gap:14px; height:64px; }
  .koeln-veedel__river svg { display:none; }
  .koeln-veedel__river::before, .koeln-veedel__river::after { content:""; flex:1; height:4px; border-radius:4px; background:var(--ka-river); }
  .koeln-veedel__river span { position:static; transform:none; writing-mode:horizontal-tb; padding:0; background:none; }
  .koeln-facts > div { grid-template-columns:1fr; gap:4px; }
}
@media (max-width:640px) {
  .koeln-needs__grid { grid-template-columns:1fr; grid-auto-rows:auto; gap:14px; }
  .koeln-need, .koeln-need:nth-child(2), .koeln-need:nth-child(3), .koeln-need--hero { grid-column:auto; min-height:230px; }
  .koeln-need--hero { min-height:380px; }
  .koeln-need--plain, .koeln-need--ask { min-height:0; }
  .koeln-need__chips span { font-size:.72rem; }
}
@media (prefers-reduced-motion:reduce) {
  .koeln-need, .koeln-need > img, .koeln-need__more svg { transition:none; }
  .koeln-need:hover, .koeln-need:hover > img { transform:none; }
}

/* Köln-Unterseiten: „Auf einen Blick“ mit Preistabelle (06.10.2026) */
.koeln-quick { --ka-ink:#16344b; --ka-muted:#536574; --ka-paper:#f4f6f8; --ka-line:#d8e0e7; --ka-blue:#215d85; padding:clamp(64px,8vw,104px) 0; background:var(--ka-paper); }
.koeln-quick__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(32px,6vw,80px); align-items:center; }
.koeln-quick h2 { margin:14px 0 20px; color:var(--ka-ink); font-family:Barlow,sans-serif; font-weight:600; font-size:clamp(2.1rem,3.6vw,3.3rem); line-height:1.05; letter-spacing:-.02em; }
.koeln-quick__lead { margin:0 0 24px; color:var(--ka-ink); font-size:1.02rem; line-height:1.75; }
.koeln-quick__facts { display:grid; gap:12px; margin:0; padding:0; list-style:none; }
.koeln-quick__facts li { display:flex; align-items:flex-start; gap:12px; color:var(--ka-muted); font-size:.92rem; line-height:1.55; }
.koeln-quick__facts svg { flex:0 0 auto; width:32px; height:32px; padding:7px; border-radius:50%; background:#fff; color:var(--ka-blue); }
.koeln-quick__prices { padding:clamp(20px,3vw,32px); border-radius:20px; background:#fff; box-shadow:0 24px 50px -30px rgba(16,43,64,.45); }
.koeln-quick__table { width:100%; border-collapse:collapse; color:var(--ka-ink); font-size:.95rem; }
.koeln-quick__table caption { caption-side:top; padding:0 0 14px; color:var(--ka-blue); font-size:.72rem; font-weight:700; letter-spacing:.1em; text-align:left; text-transform:uppercase; }
.koeln-quick__table thead th { padding:0 0 10px; border-bottom:1px solid var(--ka-line); color:var(--ka-muted); font-size:.7rem; font-weight:700; letter-spacing:.08em; text-align:left; text-transform:uppercase; }
.koeln-quick__table thead th:last-child, .koeln-quick__table td { text-align:right; }
.koeln-quick__table tbody th, .koeln-quick__table td { padding:15px 0; border-bottom:1px solid var(--ka-line); vertical-align:middle; }
.koeln-quick__table tbody tr:last-child :is(th,td) { border-bottom:0; }
.koeln-quick__table tbody th { padding-right:16px; font-weight:600; text-align:left; }
.koeln-quick__table tbody th small { display:block; margin-top:3px; color:var(--ka-muted); font-size:.78rem; font-weight:400; line-height:1.45; }
.koeln-quick__table td { font-family:Barlow,sans-serif; font-size:1.3rem; font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.koeln-quick__note { margin:16px 0 0; padding-top:14px; border-top:1px solid var(--ka-line); color:var(--ka-muted); font-size:.78rem; line-height:1.6; }
.koeln-quick__note a { color:var(--ka-blue); font-weight:600; }
@media (max-width:900px) { .koeln-quick__grid { grid-template-columns:1fr; } }
@media (max-width:480px) { .koeln-quick__table td { font-size:1.1rem; } .koeln-quick__table tbody th small { font-size:.74rem; } }

/* Köln-Unterseiten: Kacheln + Rhythmus (06.10.2026) */
.koeln-needs--sub { background:#fff; }
@media (min-width:1101px) {
  .koeln-needs--sub .koeln-need:nth-child(4), .koeln-needs--sub .koeln-need:nth-child(5) { grid-column:span 6; min-height:230px; }
}
.koeln-veedel ~ .service-direct--cross { background:#f4f6f8; }
.koeln-veedel .koeln-veedel__quote p { font-size:clamp(1.15rem,1.6vw,1.35rem); }

/* Köln-Landingpages (06.10.2026): Anruf + Bewertung im Hero, Formular-Anker, Kontaktleiste, Werbe-Modus */
#lp-form { scroll-margin-top:calc(var(--header-total,110px) + 20px); }
.koeln-lp-hero-actions { display:flex; flex-wrap:wrap; gap:14px; margin:30px 0 0; }
.koeln-lp-call { display:inline-flex; align-items:center; gap:14px; min-height:64px; padding:10px 24px 10px 14px; border-radius:12px; background:#a61657; color:#fff; text-decoration:none; box-shadow:0 18px 40px -18px rgba(166,22,87,.7); transition:background .2s ease, transform .2s ease; }
.koeln-lp-call:hover { background:#891246; color:#fff; transform:translateY(-2px); }
.koeln-lp-call svg { width:40px; height:40px; padding:10px; border-radius:50%; background:rgba(255,255,255,.18); }
.koeln-lp-call small { display:block; font-size:.72rem; font-weight:600; opacity:.85; }
.koeln-lp-call b { display:block; font-family:Barlow,sans-serif; font-size:1.45rem; font-weight:600; letter-spacing:.01em; line-height:1.1; }
.koeln-lp-rating { display:inline-flex; align-items:center; gap:12px; min-height:64px; padding:10px 18px; border:1px solid rgba(255,255,255,.28); border-radius:12px; background:rgba(16,43,64,.45); backdrop-filter:blur(8px); color:#fff; text-decoration:none; }
.koeln-lp-rating:hover { background:rgba(16,43,64,.65); color:#fff; }
.koeln-lp-rating__stars { color:#f5c451; font-size:1.05rem; letter-spacing:2px; }
.koeln-lp-rating b { display:block; font-size:.95rem; }
.koeln-lp-rating small { display:block; color:#cfe0ec; font-size:.72rem; }
.service-lead__copy ul.koeln-lp-proof { gap:10px 24px; margin-top:26px; padding-top:20px; }
.service-lead__copy .koeln-lp-proof li { font-size:.82rem; }
.lead-form label small { font-weight:400; opacity:.7; }

.koeln-quick__cta { display:flex; flex-wrap:wrap; align-items:center; gap:12px 22px; margin-top:20px; }
.koeln-quick__call { display:inline-flex; align-items:center; gap:8px; color:#16344b; font-weight:700; text-decoration:none; }
.koeln-quick__call svg { width:18px; height:18px; color:#215d85; }
.koeln-quick__call:hover { color:#215d85; }

.koeln-lp-bar { position:fixed; z-index:1030; left:50%; bottom:18px; transform:translateX(-50%); display:flex; align-items:center; gap:14px; width:min(820px,calc(100% - 32px)); padding:12px 12px 12px 22px; border-radius:16px; background:rgba(16,43,64,.96); color:#fff; box-shadow:0 18px 50px rgba(7,29,51,.35); backdrop-filter:blur(14px); }
.koeln-lp-bar[hidden] { display:none; }
.koeln-lp-bar__copy { margin-right:auto; }
.koeln-lp-bar__copy strong { display:block; font-family:Barlow,sans-serif; font-size:1.15rem; font-weight:600; }
.koeln-lp-bar__copy small { color:#b9cddb; font-size:.76rem; }
.koeln-lp-bar a { display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:48px; padding:0 18px; border-radius:10px; color:#fff; font-size:.9rem; font-weight:700; text-decoration:none; white-space:nowrap; }
.koeln-lp-bar a svg { width:18px; height:18px; }
.koeln-lp-bar__call { border:1px solid rgba(255,255,255,.3); }
.koeln-lp-bar__call:hover { background:rgba(255,255,255,.1); color:#fff; }
.koeln-lp-bar__form { background:#a61657; }
.koeln-lp-bar__form:hover { background:#891246; color:#fff; }
.koeln-lp-bar a:focus-visible { outline:3px solid #f0a7c8; outline-offset:3px; }

/* Werbe-Modus: keine Ausstiege, Fokus auf Anruf und Formular */
.is-ad-landing .topbar-utility, .is-ad-landing .topbar-links, .is-ad-landing .site-nav .navbar-nav,
.is-ad-landing .navbar-toggler, .is-ad-landing .eco-breadcrumbs,
.is-ad-landing .koeln-needs--sub, .is-ad-landing .service-direct--cross,
.is-ad-landing .eco-footer-grid, .is-ad-landing .eco-footer-proof { display:none !important; }
.is-ad-landing .koeln-veedel { padding-top:clamp(64px,8vw,104px); }

@media (max-width:767.98px) {
  .koeln-lp-hero-actions { flex-direction:column; align-items:stretch; }
  .koeln-lp-call, .koeln-lp-rating { justify-content:flex-start; }
  .koeln-lp-bar { bottom:calc(10px + env(safe-area-inset-bottom,0px)); width:calc(100% - 20px); padding:8px; gap:8px; border-radius:14px; }
  .koeln-lp-bar__copy { display:none; }
  .koeln-lp-bar a { flex:1; padding:0 10px; font-size:.86rem; }
}
@media (prefers-reduced-motion:reduce) { .koeln-lp-call, .koeln-lp-call:hover { transition:none; transform:none; } }

/* Kein Auto-Zoom auf dem iPhone in den Köln-Formularen */
@media (max-width:991.98px) { #lp-form :is(input,select,textarea), #kontakt .lead-form :is(input,select,textarea) { font-size:16px !important; } }

/* Köln-Foto im Hero (Dom rechts im Bild, Text links über dem Rhein) */
.koeln-cinema-hero__media img.koeln-hero-photo { object-position:60% 42%; }

/* Düsseldorf: rechtsrheinisch viele Stadtteile → zwei Spalten; linksrheinisch Oberkassel + Zitat */
.koeln-veedel__map--dus { grid-template-columns:minmax(0,.8fr) 120px minmax(0,1.6fr); }
.koeln-veedel__list--two { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:32px; }
.koeln-veedel__map--dus .koeln-veedel__side:first-child .koeln-veedel__quote { text-align:left; }
@media (max-width:760px) {
  .koeln-veedel__map--dus { grid-template-columns:1fr; }
  .koeln-veedel__list--two { grid-template-columns:1fr; }
}

/* A/B-Test (z. B. Essen-Hero): Elemente nur für die aktive Variante zeigen. Ohne Zuordnung gilt A. */
html:not([data-ab-variant="b"]) .ab-b { display:none !important; }
html[data-ab-variant="b"] .ab-a { display:none !important; }
/* Variante B: Zollverein, Fördergerüst links frei → Text rechts, Verlauf von rechts */
html[data-ab-variant="b"] .koeln-art-hero .koeln-cinema-hero__copy { margin-left:auto; }
html[data-ab-variant="b"] .koeln-art-hero .koeln-cinema-hero__media::after { background:
  linear-gradient(180deg, rgba(7,29,51,.1) 0%, rgba(7,29,51,.35) 50%, rgba(7,29,51,.92) 100%),
  linear-gradient(270deg, rgba(7,29,51,.88) 0%, rgba(7,29,51,.35) 45%, rgba(7,29,51,0) 70%); }
@media (max-width:767.98px) {
  html[data-ab-variant="b"] .koeln-art-hero .koeln-cinema-hero__copy { margin-left:0; }
  html[data-ab-variant="b"] .koeln-art-hero .koeln-cinema-hero__media::after { background:linear-gradient(180deg, rgba(7,29,51,.15) 0%, rgba(7,29,51,.75) 45%, rgba(7,29,51,.95) 100%); }
}

/* Vorher/Nachher-Regler (Doppelbild: links vorher, rechts nachher) – genutzt mit before-after-slider.js */
.ba-compare { position:relative; overflow:hidden; background:#dce5ec; touch-action:pan-y; cursor:ew-resize; }
.ba-compare--portrait { width:100%; aspect-ratio:1672 / 1880; border-radius:22px; box-shadow:0 30px 60px -36px rgba(16,43,64,.6); }
.ba-compare__layer { position:absolute; inset:0; background-repeat:no-repeat; background-size:200% auto; pointer-events:none; user-select:none; }
.ba-compare__layer--before { background-position:left center; clip-path:inset(0 50% 0 0); }
.ba-compare__layer--after { background-position:right center; }
.ba-compare__tag { position:absolute; top:16px; z-index:2; padding:6px 11px; border-radius:6px; background:rgba(22,52,75,.85); color:#fff; font-size:12px; font-weight:600; pointer-events:none; }
.ba-compare__tag--before { left:16px; }
.ba-compare__tag--after { right:16px; }
.ba-compare__handle { position:absolute; top:0; bottom:0; left:50%; z-index:3; width:44px; padding:0; transform:translateX(-50%); border:0; background:transparent; color:#16344b; cursor:ew-resize; touch-action:none; }
.ba-compare__handle::before { content:""; position:absolute; top:0; bottom:0; left:21px; width:2px; background:#fff; box-shadow:0 0 8px rgba(22,52,75,.3); }
.ba-compare__handle > span { position:absolute; top:50%; left:0; display:grid; place-items:center; width:44px; height:44px; transform:translateY(-50%); border-radius:50%; background:#fff; box-shadow:0 3px 18px rgba(22,52,75,.3); font-size:1.3rem; }
.ba-compare__handle:focus-visible > span { outline:3px solid #215d85; outline-offset:2px; }
/* im Notfall-Bereich füllt der Regler die Bildfläche */
.ksl-emergency__media .ba-compare { position:absolute; inset:0; }
.ksl-emergency__media figcaption { z-index:4; pointer-events:none; }

/* Bad: Vorher/Nachher-Sektion */
.koeln-bath-ba { padding:clamp(64px,8vw,112px) 0; background:#f4f6f8; }
.koeln-bath-ba__grid { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1fr); gap:clamp(32px,6vw,88px); align-items:center; }
.koeln-bath-ba__media { margin:0; }
.koeln-bath-ba__media figcaption { margin-top:12px; color:#536574; font-size:12px; }
.koeln-bath-ba__copy h2 { margin:12px 0 18px; color:#16344b; font-family:Barlow,sans-serif; font-weight:600; font-size:clamp(2.1rem,3.8vw,3.4rem); line-height:1.05; }
.koeln-bath-ba__copy p { color:#536574; line-height:1.75; }
.koeln-bath-ba__legend { margin:22px 0 28px; }
.koeln-bath-ba__legend > div { padding:14px 0; border-top:1px solid #d8e0e7; }
.koeln-bath-ba__legend dt { margin-bottom:4px; color:#215d85; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; }
.koeln-bath-ba__legend dd { margin:0; color:#16344b; }
@media (max-width:991.98px) { .koeln-bath-ba__grid { grid-template-columns:1fr; } }
@media (max-width:575.98px) { .ba-compare__tag { top:12px; font-size:11px; } .ba-compare__tag--before { left:12px; } .ba-compare__tag--after { right:12px; } }
/* Jede Bildhälfte füllt die Fläche randlos (wie object-fit:cover), unabhängig vom Seitenverhältnis:
   Die Ebene zeichnet ihr Hintergrundbild nicht selbst, sondern ein 200 % breites ::before mit cover. */
.ba-compare__layer { background-size:0 0; }
.ba-compare__layer::before { content:""; position:absolute; top:0; bottom:0; width:200%; background-image:inherit; background-size:cover; background-position:center; background-repeat:no-repeat; }
.ba-compare__layer--before::before { left:0; }
.ba-compare__layer--after::before { left:-100%; }
.ba-compare__layer { overflow:hidden; }

/* Bildhinweis im Hero (z. B. „Illustration“) */
.koeln-cinema-hero__credit { position:absolute; right:16px; bottom:12px; z-index:2; color:rgba(255,255,255,.72); font-size:12px; }
/* Oberhausen: nur drei Bezirke – Trennlinie wächst mit dem Inhalt statt eigene Höhe zu erzwingen */
.koeln-veedel__map--ob .koeln-veedel__river svg { position:absolute; inset:0; margin:auto; height:100%; }