/* ============================================================
   COKUS Immobilien — Custom-Design (Marine) · /rp/cokus.css
   Geladen via Head-Tag. One-Pager-Styles gekapselt unter .cokus-one,
   damit immoprofessional-Unterseiten unberührt bleiben.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Inter:wght@400;500;600;700&family=Ubuntu:wght@500;700&display=swap');

:root{
  --m-accent:#284862; --m-accent-d:#1d3548; --m-bg:#f2f5f8; --m-paper:#fff;
  --m-stone:#e0e7ef; --m-ink:#1e2730; --m-muted:#62707e; --m-line:#d9e2ec;
  --m-foot:#161f29; --m-gold:#e8b007;
  /* Kontakt-Schnittstellen im Radialmenü: ruhigeres Blau (abgesetzt) + kräftiger Hover */
  --m-soft:#6f8aa0; --m-soft-h:#2f87b8; --m-accent-hi:#3a6ea0;
  --m-disp:'Fraunces',Georgia,serif; --m-sans:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
}

/* ---- GLOBAL (alle Seiten, dezent) ---- */
#wrapperall, #mainblock{ background:var(--m-bg)!important; }
/* immoprofessional/Admin setzt #wrapperall auf overflow:hidden → das BRICHT die sticky-Topbar.
   overflow-x:clip kappt weiterhin das überbreite Laufband, erzeugt aber KEINEN Scroll-Container → sticky klebt wieder oben. */
#wrapperall, #wrapperall.backend{ overflow-x:clip!important; overflow-y:visible!important; }
body{ font-family:var(--m-sans); color:var(--m-ink); }
/* Alten rotierenden Kopf-Bildstreifen + Admin-Interna ausblenden */
.header_container{ display:none!important; }
#navi_intern{ display:none!important; }
/* FOUC-Schutz Startseite: alten immoprofessional-Inhalt (Objektliste/SEO) SOFORT verbergen (vor erstem Paint),
   bis cokus.js den One-Pager `.cokus-one` injiziert → kein Aufblitzen mehr. Startseite = einziges #mainblock mit <aside>-Spalten;
   Listen/Detail haben das nicht → unberührt. (cokus.css+js werden vom selben Loader geladen → wenn diese Regel greift, läuft auch cokus.js.) */
#mainblock:has(> aside) > *:not(.cokus-one){ display:none !important; }
/* Navigation oben aufräumen (sticky, sauber) */
#navi_oben{ background:#fff!important; border-bottom:1px solid var(--m-line)!important; position:sticky; top:0; z-index:300; box-shadow:0 2px 14px rgba(20,32,46,.05); }
#navi_oben a, #menue_content a, .menue2 a{ font-family:var(--m-sans)!important; color:var(--m-ink)!important; font-weight:600!important; }
#navi_oben a:hover, #menue_content a:hover{ color:var(--m-accent)!important; }
/* Unterseiten bekommen wenigstens saubere Marine-Typo */
#mainblock h1, #mainblock h2, #mainblock h3, .h1style{ font-family:var(--m-disp)!important; font-weight:500!important; }
#mainblock > :not(.cokus-one) h1, #mainblock > :not(.cokus-one) h2, #mainblock > :not(.cokus-one) h3{ color:var(--m-ink); }

/* ============================================================
   ONE-PAGER  (.cokus-one … alles gekapselt)
   ============================================================ */
.cokus-one *{ margin:0; padding:0; box-sizing:border-box; }
.cokus-one{ font-family:var(--m-sans); color:var(--m-ink); line-height:1.65; -webkit-font-smoothing:antialiased; width:100%; max-width:100%; }
.cokus-one .hero, .cokus-one section, .cokus-one .trustband, .cokus-one .lb, .cokus-one .region, .cokus-one .val, .cokus-one .foot{ width:100%; max-width:100%; }
.cokus-one .lb-view{ max-width:100%; }
.cokus-one h1,.cokus-one h2,.cokus-one h3,.cokus-one h4{ font-family:var(--m-disp); font-weight:500; line-height:1.12; letter-spacing:-.01em; }
.cokus-one a{ color:inherit; text-decoration:none; }
.cokus-one img{ display:block; max-width:100%; }
.cokus-one .wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }
.cokus-one .eyebrow{ font-family:var(--m-sans); font-size:.78rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--m-accent); margin-bottom:16px; }
.cokus-one section{ padding:88px 0; }
.cokus-one .sec-head{ max-width:700px; margin:0 auto 52px; text-align:center; }
.cokus-one .sec-head h2{ font-size:2.7rem; color:var(--m-ink); }
.cokus-one .sec-head p{ color:var(--m-muted); font-size:1.08rem; margin-top:14px; }
.cokus-one .rule{ width:46px; height:2px; background:var(--m-accent); margin:18px auto 0; }
.cokus-one .center{ text-align:center; margin-top:46px; }
.cokus-one .gstars{ color:var(--m-gold); letter-spacing:1px; }

/* Buttons */
.cokus-one .btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 30px; font-family:var(--m-sans); font-weight:600; font-size:.98rem; border-radius:4px; transition:.2s; cursor:pointer; border:1.6px solid transparent; }
.cokus-one .btn svg{ width:18px; height:18px; }
.cokus-one .btn-accent{ background:var(--m-accent); color:#fff; }
.cokus-one .btn-accent:hover{ background:var(--m-accent-d); transform:translateY(-2px); box-shadow:0 12px 24px rgba(40,72,98,.28); }
.cokus-one .btn-out{ border-color:var(--m-accent); color:var(--m-accent); background:#fff; }
.cokus-one .btn-out:hover{ background:var(--m-accent); color:#fff; transform:translateY(-2px); }
.cokus-one .btn-white{ background:#fff; color:var(--m-accent-d); }
.cokus-one .btn-white:hover{ background:var(--m-bg); transform:translateY(-2px); }

/* Reveal-Animationen — nur aktiv wenn JS (.reveal-on) UND Nutzer Bewegung erlaubt (sonst immer sichtbar) */
@media (prefers-reduced-motion: no-preference){
  .cokus-one.reveal-on [data-reveal]{ opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
}
.cokus-one [data-reveal].in{ opacity:1; transform:none; }
.cokus-one [data-reveal][data-d="1"]{ transition-delay:.1s } .cokus-one [data-reveal][data-d="2"]{ transition-delay:.2s } .cokus-one [data-reveal][data-d="3"]{ transition-delay:.3s }

/* ---- TOP-BAR (Marine: Logo weiß links · Eckdaten mittig · Anruf rechts; schrumpft beim Scrollen) ---- */
.ck-topbar{ position:relative; position:sticky; top:0; z-index:400; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:16px; height:62px; padding:0 30px; background:var(--m-accent); transition:height .25s ease, background .25s ease, box-shadow .25s ease; }
.ck-topbar.scrolled{ height:56px; background:var(--m-accent-d); box-shadow:0 4px 22px rgba(16,26,38,.3); }
/* Beim Scrollen schrumpft die Telefon-Pill etwas mit → ringsum bleiben sichtbar ein paar Pixel Marine
   (Markus' Wunsch: auch im verkleinerten Zustand „2–3 px blau unter der Telefon-Pill"). */
.ck-topbar.scrolled .ck-tb-call{ padding:8px 17px; font-size:.92rem; }
.ck-logo{ flex:none; display:flex; align-items:flex-end; align-self:stretch; }
.ck-logo img, .ck-logo svg{ height:178px; width:auto; display:block; margin-bottom:-106px; transition:height .25s ease, margin-bottom .25s ease; filter:drop-shadow(0 8px 18px rgba(0,0,0,.3)); }
.ck-logo img{ filter:brightness(0) invert(1) drop-shadow(0 8px 18px rgba(0,0,0,.28)); } /* Fallback weiß, falls SVG nicht inline */
.ck-logo svg .cls-1, .ck-logo svg .cls-3{ fill:#e3e9ef !important; }
.ck-logo svg .cls-2, .ck-logo svg .cls-7{ fill:#ffffff !important; }
.ck-topbar.scrolled .ck-logo img, .ck-topbar.scrolled .ck-logo svg{ height:46px; margin-bottom:0; filter:none; }
/* Zurück-Button (Detail- UND Listen-/Galerieseiten): dezent, RECHTS unter dem Telefon-Button (in der Topbar gestapelt) */
body.cokus-detail .ck-tb-right, body.cokus-sub .ck-tb-right, body.cokus-page .ck-tb-right{ display:flex; flex-direction:column; align-items:flex-end; gap:7px; }
/* Wie auf der Detailseite: vertikales Padding, damit die gestapelte rechte Gruppe (Telefon-Pill + Zurück)
   NICHT oben gekappt und unten gequetscht wird (Markus: „von oben Querschnitt, von unten eingequetscht"). */
body.cokus-sub .ck-topbar, body.cokus-page .ck-topbar{ height:auto!important; min-height:80px; padding-top:10px!important; padding-bottom:10px!important; }
.ck-back{ display:inline-flex; align-items:center; gap:6px; padding:5px 13px 5px 9px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.28); border-radius:30px; color:#dbe6f1; font-size:.76rem; font-weight:600; transition:.18s; white-space:nowrap; }
.ck-back:hover{ background:#fff; color:var(--m-accent); border-color:#fff; }
.ck-back svg{ width:14px; height:14px; }
/* Detail-Topbar etwas höher (gestapelte rechte Gruppe) – auch sticky/scrolled nicht zu flach, damit nichts in den Content ragt */
body.cokus-detail .ck-topbar{ height:auto!important; min-height:80px; padding-top:10px; padding-bottom:10px; }
body.cokus-detail .ck-topbar.scrolled{ min-height:72px; }
.ck-topbar.scrolled .ck-logo img{ filter:brightness(0) invert(1); }
.ck-tb-info{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); text-align:center; display:flex; flex-direction:column; line-height:1.28; pointer-events:none; }
.ck-tb-loc{ font-size:.73rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:#fff; }
.ck-tb-hours{ font-size:.82rem; color:#bcd0e2; }
.ck-tb-call{ flex:none; display:inline-flex; align-items:center; gap:9px; background:#fff; color:var(--m-accent); font-weight:700; font-size:.98rem; padding:10px 20px; border-radius:40px; transition:.2s; box-shadow:0 6px 16px rgba(16,26,38,.18); }
.ck-tb-call svg{ width:18px; height:18px; }
.ck-tb-call:hover{ background:var(--m-bg); transform:translateY(-1px); box-shadow:0 10px 22px rgba(16,26,38,.28); }

/* ---- HERO (hell, Altmarkt) ---- */
@keyframes ckZoom{ from{transform:scale(1)} to{transform:scale(1.07)} }
@keyframes ckUp{ from{opacity:0;transform:translateY(20px)} to{opacity:1;transform:none} }
/* Hero füllt die volle Browserhöhe (Topbar ~62 + Hero + Trust-Zeile ~78 = 100vh → Trust-Zeile sitzt unten als Basis im First View).
   Inhalt (Text + Team-Karte) vertikal zentriert im großen Bild. */
.cokus-one .hero{ position:relative; overflow:visible; z-index:5; min-height:calc(100vh - 140px); display:flex; flex-direction:column; justify-content:center; }
.cokus-one .hero .hmedia{ position:absolute; inset:0; overflow:hidden; z-index:0; }
.cokus-one .hero .hbg{ position:absolute; inset:0; background:url('https://www.cokus.immobilien/upload/KKTkr37.jpg') center 42%/cover no-repeat; animation:ckZoom 24s ease-in-out infinite alternate; }
.cokus-one .hero .hveil{ position:absolute; inset:0; background:linear-gradient(101deg, rgba(17,27,39,.93) 0%, rgba(17,27,39,.74) 38%, rgba(17,27,39,.34) 66%, rgba(17,27,39,.16) 100%); }
/* Content höher: weniger Luft oben → die Trust-/Expertisen-Zeile rückt above the fold in den First View. */
.cokus-one .hero .wrap{ position:relative; z-index:2; display:grid; grid-template-columns:1fr 1.08fr; gap:46px; align-items:stretch; padding:34px 24px 30px 32px; }
/* Textblock über die volle Höhe der Team-Karte verteilen → ausgewogen. align-items:flex-start = Pill bleibt KOMPAKT
   (sonst zieht der Flex-Stretch die Google-Pill auf volle Breite). */
.cokus-one .hero .htext{ display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between; }
.cokus-one .ck-foot-logo img{ filter:brightness(0) invert(1); }
.cokus-one .ck-foot-logo svg, .cokus-one img.ck-foot-logo{ height:64px; width:auto; display:block; margin-bottom:16px; }
.cokus-one .ck-foot-logo svg .cls-1, .cokus-one .ck-foot-logo svg .cls-3{ fill:#cdd7e1 !important; }
.cokus-one .ck-foot-logo svg .cls-2, .cokus-one .ck-foot-logo svg .cls-7{ fill:#ffffff !important; }
.cokus-one .hero h1{ font-size:2.75rem; line-height:1.1; color:#fff!important; text-shadow:0 2px 30px rgba(0,0,0,.3); }
.cokus-one .hero .sub{ font-size:1.14rem; color:#dce6f0; margin:16px 0 0; max-width:520px; }
.cokus-one .hero .eyebrow{ color:#bcd0e4; }
.cokus-one .hero .htrust a{ color:#fff; font-weight:600; text-shadow:0 1px 9px rgba(0,0,0,.55); }
.cokus-one .hero .htrust a:hover{ color:#fff; }
.cokus-one .hero .htrust .ihk{ color:#eaf0f6; font-size:.86rem; opacity:1; }
.cokus-one .hero .htrust .gstars{ text-shadow:0 1px 6px rgba(0,0,0,.4); }
.cokus-one .hero .hctas{ display:flex; gap:20px; flex-wrap:wrap; }
/* Haupt-Einstieg ins Angebot → bewusst prominent (Neuro: darf nicht untergehen). Größer, fetter, klar abgesetzt vom Hero. */
.cokus-one .hctas .hbtn{ padding:15px 32px; font-size:1.06rem; font-weight:700; gap:9px; line-height:1; white-space:nowrap; border-width:2px; box-shadow:0 12px 30px rgba(13,21,32,.42); }
/* Kaufangebote = WEISS (max. Kontrast auf dem dunklen Hero) + sanfter, langsamer Glow-Puls als Eyecatcher.
   !important nötig, weil immoprofessional global button{background:Marine!important} erzwingt (sonst dunkel-auf-dunkel). */
.cokus-one .hero .hctas .btn-accent.hbtn{ background:#fff!important; color:var(--m-accent-d)!important; border-color:#fff!important; }
.cokus-one .hero .hctas .btn-accent.hbtn:hover{ background:#fff!important; color:var(--m-accent-d)!important; transform:translateY(-2px); box-shadow:0 16px 38px rgba(13,21,32,.5); }
/* Mietangebote = klare weiße Outline, Glas-Look – gut sichtbar, aber sekundär */
.cokus-one .hero .hctas .btn-out.hbtn{ border:2px solid #fff!important; color:#fff!important; background:rgba(255,255,255,.14)!important; -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px); }
.cokus-one .hero .hctas .btn-out.hbtn:hover{ background:#fff!important; color:var(--m-accent)!important; border-color:#fff!important; transform:translateY(-2px); }
@media (prefers-reduced-motion: no-preference){
  .cokus-one .hero .hctas .btn-accent.hbtn{ animation:ckCtaGlow 2.8s ease-in-out infinite; }
}
@keyframes ckCtaGlow{ 0%,100%{ box-shadow:0 12px 30px rgba(13,21,32,.42); } 50%{ box-shadow:0 12px 30px rgba(13,21,32,.42), 0 0 24px 3px rgba(255,255,255,.42); } }
.cokus-one .hctas .hbtn .caret{ margin-left:3px; opacity:.85; font-size:.7em; }
.cokus-one .hero .htrust{ display:inline-flex; align-items:center; gap:12px; margin:0; flex-wrap:wrap; background:rgba(13,21,32,.84); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.22); padding:10px 18px; border-radius:32px; box-shadow:0 10px 26px rgba(13,21,32,.35); }
/* Eintrittsanimation nur wenn JS aktiv (.reveal-on) UND Bewegung erlaubt — sonst immer sichtbar */
@media (prefers-reduced-motion: no-preference){
  .cokus-one.reveal-on .hero h1{ opacity:0; animation:ckUp .8s .15s ease forwards; }
  .cokus-one.reveal-on .hero .sub{ opacity:0; animation:ckUp .8s .28s ease forwards; }
  .cokus-one.reveal-on .hero .hctas{ opacity:0; animation:ckUp .8s .4s ease forwards; }
  .cokus-one.reveal-on .hero .htrust{ opacity:0; animation:ckUp .8s .52s ease forwards; }
  .cokus-one.reveal-on .people{ opacity:0; animation:ckUp .9s .5s ease forwards; }
}
.cokus-one .hero .htrust a{ display:inline-flex; align-items:center; gap:9px; color:#fff; font-weight:600; font-size:.92rem; }
.cokus-one .hero .htrust a:hover{ color:#fff; }
.cokus-one .hero .htrust .ihk{ display:inline-flex; align-items:center; gap:6px; color:#eaf0f6; font-size:.86rem; font-weight:600; padding-left:12px; border-left:1px solid rgba(255,255,255,.28); }

/* People-Card */
.cokus-one .people{ background:var(--m-stone); border-radius:18px; border-top:4px solid var(--m-accent); padding:38px 36px 36px; text-align:center; position:relative; box-shadow:0 34px 64px rgba(20,40,60,.22); }
.cokus-one .people .gchip{ position:absolute; top:-17px; right:22px; background:#fff; border-radius:40px; padding:8px 15px; box-shadow:0 12px 26px rgba(20,40,60,.2); font-weight:700; font-size:.82rem; display:inline-flex; align-items:center; gap:8px; color:var(--m-ink); }
.cokus-one .people .gchip svg{ width:18px; height:18px; }
.cokus-one .people .lead{ font-family:var(--m-disp); font-size:1.3rem; color:var(--m-ink); margin-bottom:4px; }
.cokus-one .people .loc{ color:var(--m-accent); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; margin-bottom:24px; }
.cokus-one .people .two{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.cokus-one .people .p img{ width:194px; height:194px; border-radius:50%; object-fit:cover; margin:0 auto 13px; filter:drop-shadow(0 14px 26px rgba(20,40,60,.2)); transition:.25s; }
.cokus-one .people .p:hover img{ transform:translateY(-4px); }
.cokus-one .people .p:hover img{ transform:translateY(-4px); }
.cokus-one .people .p b{ display:block; font-family:var(--m-disp); font-size:1.12rem; color:var(--m-ink); }
.cokus-one .people .p small{ color:var(--m-muted); font-size:.8rem; }
.cokus-one .people .call{ display:inline-flex; align-items:center; gap:9px; margin-top:24px; background:#fff; border:1px solid var(--m-line); padding:11px 22px; border-radius:40px; font-weight:700; color:var(--m-ink); transition:.2s; }
.cokus-one .people .call:hover{ border-color:var(--m-accent); color:var(--m-accent); }

/* ---- TRUST-BAND ---- */
.cokus-one .trustband{ background:#fff; border-top:1px solid var(--m-line); border-bottom:1px solid var(--m-line); }
/* SCHLANK & dezent (max. ~Höhe des Menü-Buttons) – nur eine ruhige Basis-Zeile, feine Haarlinien-Trenner, kein Umbruch */
.cokus-one .trustband .wrap{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; padding:15px 32px; }
.cokus-one .tb{ display:flex; align-items:center; gap:12px; justify-content:center; padding:2px 14px; position:relative; }
.cokus-one .tb:not(:first-child)::before{ content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:30px; background:linear-gradient(transparent, var(--m-line) 20%, var(--m-line) 80%, transparent); }
.cokus-one .tb .ic{ width:25px; height:25px; color:var(--m-accent); flex:none; }
.cokus-one .tb b{ font-family:var(--m-disp); font-size:1.06rem; display:block; line-height:1.12; white-space:nowrap; }
.cokus-one .tb small{ color:var(--m-muted); font-size:.77rem; white-space:nowrap; }
.cokus-one a.tb{ transition:.2s; } .cokus-one a.tb:hover{ color:var(--m-accent); }

/* ---- LAUFBAND (Objekt-Karussell) ---- */
.cokus-one .lb{ background:var(--m-bg); border-bottom:1px solid var(--m-line); padding:34px 0 40px; overflow:hidden; }
.cokus-one .lb .lbhead{ max-width:1240px; margin:0 auto 20px; padding:0 32px; display:flex; justify-content:space-between; align-items:baseline; gap:16px; }
.cokus-one .lb .lbhead .t{ font-family:var(--m-disp); font-size:1.5rem; color:var(--m-ink); }
.cokus-one .lb .lbhead .all{ color:var(--m-accent); font-weight:700; font-size:.92rem; white-space:nowrap; }
.cokus-one .lb-view{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.cokus-one .lb-track{ display:flex; gap:22px; width:max-content; padding:6px 22px; animation:ckSlide 60s linear infinite; }
.cokus-one .lb-view:hover .lb-track{ animation-play-state:paused; }
@keyframes ckSlide{ from{transform:translateX(0)} to{transform:translateX(-50%)} }
.cokus-one .mcard{ width:310px; flex:none; background:#fff; border:1px solid var(--m-line); border-radius:10px; overflow:hidden; box-shadow:0 10px 26px rgba(20,32,46,.07); transition:.25s; }
.cokus-one .mcard:hover{ transform:translateY(-5px); box-shadow:0 22px 44px rgba(20,32,46,.15); }
.cokus-one .mcard .mph{ height:184px; position:relative; background:var(--m-stone); }
.cokus-one .mcard .mph img{ width:100%; height:100%; object-fit:cover; }
.cokus-one .mcard .mbadge{ position:absolute; top:10px; left:10px; background:var(--m-accent); color:#fff; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; padding:4px 10px; border-radius:3px; }
.cokus-one .mcard .mbadge.res{ background:rgba(255,255,255,.94); color:var(--m-muted); }
.cokus-one .mcard .mb{ padding:14px 18px 16px; }
.cokus-one .mcard .ml{ font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; color:var(--m-accent); font-weight:700; }
.cokus-one .mcard h4{ font-family:var(--m-disp); font-weight:500; font-size:1.08rem; margin:5px 0 10px; color:var(--m-ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:2.4em; }
.cokus-one .mcard .mf{ position:relative; display:flex; justify-content:center; align-items:center; border-top:1px solid var(--m-line); padding-top:11px; min-height:42px; }
.cokus-one .mcard .mp{ font-family:var(--m-disp); font-size:1.2rem; color:var(--m-ink); font-weight:600; }
.cokus-one .mcard .marrow{ position:absolute; right:0; bottom:6px; width:30px; height:30px; border-radius:50%; background:var(--m-bg); color:var(--m-accent); display:flex; align-items:center; justify-content:center; font-size:1.02rem; opacity:0; transform:translateX(-5px); transition:.22s; }
.cokus-one .mcard:hover .marrow{ opacity:1; transform:none; background:var(--m-accent); color:#fff; }

/* ---- ANGEBOTE (Kategorien) ---- */
.cokus-one .cats{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
.cokus-one .cat{ position:relative; display:block; border-radius:12px; overflow:hidden; min-height:150px; color:#fff; background:var(--m-accent); box-shadow:0 12px 30px rgba(20,32,46,.12); transition:.28s; }
.cokus-one .cat:hover{ transform:translateY(-6px); box-shadow:0 24px 50px rgba(20,32,46,.2); }
.cokus-one .cat .ci{ position:absolute; inset:0; background-size:cover; background-position:center; transition:.5s; }
.cokus-one .cat:hover .ci{ transform:scale(1.08); }
.cokus-one .cat .cv{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,32,46,.15), rgba(20,32,46,.78)); }
.cokus-one .cat .ct{ position:absolute; left:0; right:0; bottom:0; padding:20px 22px; z-index:2; }
.cokus-one .cat .ct b{ font-family:var(--m-disp); font-size:1.5rem; display:block; }
.cokus-one .cat .ct span{ font-size:.86rem; opacity:.9; display:inline-flex; align-items:center; gap:6px; margin-top:4px; }

/* ---- WHY ---- */
.cokus-one .why{ background:#fff; }
.cokus-one .why-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:38px; }
.cokus-one .why-card{ text-align:center; }
.cokus-one .why-card .ic{ width:52px; height:52px; color:var(--m-accent); margin:0 auto 18px; }
.cokus-one .why-card h3{ font-size:1.42rem; margin-bottom:10px; }
.cokus-one .why-card p{ color:var(--m-muted); }

/* ---- REGION BAND ---- */
.cokus-one .region{ position:relative; min-height:430px; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; padding:0;
  background:url('https://www.cokus.immobilien/upload/DZZbqq09.jpg') center 50%/cover no-repeat fixed; }
.cokus-one .region::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(16,26,38,.5), rgba(16,26,38,.7)); }
.cokus-one .region .inner{ position:relative; z-index:2; max-width:700px; padding:48px 40px; }
.cokus-one .region h2{ color:#fff!important; font-size:3rem; }
.cokus-one .region p{ color:#e6eef6; font-size:1.14rem; margin-top:14px; }

/* ---- VALUATION (dunkel) ---- */
.cokus-one .val{ background:var(--m-accent-d); color:#fff; text-align:center; }
.cokus-one .val .tag{ display:inline-block; background:rgba(255,255,255,.18); color:#fff; font-weight:700; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase; padding:7px 16px; border-radius:3px; margin-bottom:16px; }
.cokus-one .val h2{ color:#fff!important; font-size:2.6rem; }
.cokus-one .val p{ color:#cfe0ee; font-size:1.1rem; margin:16px auto 30px; max-width:580px; }

/* ---- PROZESS ---- */
.cokus-one .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.cokus-one .step{ position:relative; padding-top:8px; }
.cokus-one .step .n{ font-family:var(--m-disp); font-size:2.4rem; color:var(--m-accent); line-height:1; }
.cokus-one .step h3{ font-size:1.22rem; margin:8px 0; }
.cokus-one .step p{ color:var(--m-muted); font-size:.93rem; }

/* ---- WISSEN / RATGEBER (Akkordeon, SEO-Futter) ---- */
.cokus-one .know{ background:#fff; }
.cokus-one .acc{ max-width:880px; margin:0 auto; }
.cokus-one .ai{ border:1px solid var(--m-line); border-radius:10px; margin-bottom:14px; overflow:hidden; background:var(--m-bg); }
.cokus-one .ai > button{ width:100%; text-align:left; background:none; border:0; cursor:pointer; padding:20px 24px; font-family:var(--m-disp); font-size:1.18rem; color:var(--m-ink); display:flex; justify-content:space-between; align-items:center; gap:16px; }
.cokus-one .ai > button .pm{ flex:none; width:26px; height:26px; border-radius:50%; background:var(--m-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1.1rem; transition:.25s; }
.cokus-one .ai.open > button .pm{ transform:rotate(45deg); }
.cokus-one .ai .acont{ max-height:0; overflow:hidden; transition:max-height .4s ease; }
.cokus-one .ai.open .acont{ max-height:900px; }
.cokus-one .ai .acont .pad{ padding:0 24px 22px; color:#45525e; }
.cokus-one .ai .acont .pad p{ margin-bottom:12px; }

/* ---- TEAM ---- */
.cokus-one .team{ background:var(--m-stone); }
.cokus-one .team .wrap{ display:grid; grid-template-columns:1fr 1fr; gap:56px; align-items:center; }
.cokus-one .team h2{ color:var(--m-ink); font-size:2.6rem; }
.cokus-one .team p{ color:#46525e; margin:16px 0; font-size:1.05rem; }
.cokus-one .team .sig{ font-family:var(--m-disp); font-size:1.35rem; color:var(--m-ink); margin-top:6px; }
.cokus-one .portraits{ display:grid; grid-template-columns:1fr 1fr; gap:22px; text-align:center; }
.cokus-one .pcard img{ width:206px; height:206px; border-radius:50%; object-fit:cover; margin:0 auto; filter:drop-shadow(0 16px 28px rgba(20,40,60,.22)); }
.cokus-one .pcard .cap{ padding:16px 4px 0; }
.cokus-one .pcard .cap b{ display:block; color:var(--m-ink); font-family:var(--m-disp); font-size:1.22rem; white-space:nowrap; }
.cokus-one .pcard .cap small{ color:var(--m-accent); font-weight:600; }

/* ---- TESTIMONIALS ---- */
.cokus-one .tst{ background:var(--m-bg); }
.cokus-one .tst-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px; }
.cokus-one .quote{ background:#fff; border:1px solid var(--m-line); border-radius:10px; padding:30px 28px; }
.cokus-one .quote .stars{ color:var(--m-gold); letter-spacing:2px; margin-bottom:12px; }
.cokus-one .quote p{ font-style:italic; color:#45413a; margin-bottom:18px; font-size:1.02rem; }
.cokus-one .quote .who{ display:flex; align-items:center; gap:12px; }
.cokus-one .quote .av{ width:42px; height:42px; border-radius:50%; background:var(--m-accent); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; }
.cokus-one .quote .who b{ display:block; } .cokus-one .quote .who small{ color:var(--m-muted); }
.cokus-one .gnote{ text-align:center; margin-top:34px; color:var(--m-muted); font-size:.92rem; }
.cokus-one .gnote a{ color:var(--m-accent); font-weight:700; }

/* ---- FOOTER ---- */
.cokus-one .foot{ background:var(--m-foot); color:#9fb0c0; font-size:.93rem; padding:60px 0 0; }
.cokus-one .foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr 1.2fr; gap:40px; padding-bottom:42px; }
.cokus-one .foot h4{ color:#fff; font-family:var(--m-sans); font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; margin-bottom:16px; }
.cokus-one .foot .lead2{ max-width:280px; color:#aebccb; }
.cokus-one .foot ul{ list-style:none; } .cokus-one .foot li{ margin-bottom:10px; }
.cokus-one .foot a{ color:#cdd7e1; } .cokus-one .foot a:hover{ color:#fff; }
.cokus-one .foot .pill{ display:inline-block; border:1px solid #2c3a49; border-radius:4px; padding:5px 12px; margin:4px 6px 0 0; font-size:.8rem; color:#aebccb; }
.cokus-one .foot-bottom{ border-top:1px solid #2c3a49; padding:20px 0; text-align:center; font-size:.82rem; color:#7c8896; }
/* Social-Profile im Footer (Facebook · Instagram) */
.cokus-one .foot-social{ display:flex; align-items:center; gap:12px; margin-top:18px; }
.cokus-one .foot-social-l{ font-size:.82rem; color:#9fb0c0; }
.cokus-one .foot-social a{ width:36px; height:36px; border-radius:50%; border:1px solid #2c3a49; display:inline-flex; align-items:center; justify-content:center; color:#cdd7e1; transition:.18s; }
.cokus-one .foot-social a svg{ width:18px; height:18px; }
.cokus-one .foot-social a:hover{ background:var(--m-accent); border-color:var(--m-accent); color:#fff; transform:translateY(-2px); }

/* ============================================================
   RADIALMENÜ + BACK-TO-TOP (alle Seiten)
   ============================================================ */
#ck-fab{ position:fixed; right:22px; bottom:50px; z-index:9000; font-family:var(--m-sans); }
#ck-fab .ck-items{ position:absolute; right:4px; bottom:70px; display:flex; flex-direction:column-reverse; gap:12px; pointer-events:none; }
#ck-fab.open .ck-items{ pointer-events:auto; }
#ck-fab .ck-item{ display:flex; align-items:center; gap:10px; justify-content:flex-end; opacity:0; transform:translateY(14px) scale(.8); pointer-events:none; transition:.32s cubic-bezier(.2,.8,.2,1); text-decoration:none; }
/* nie unterstreichen (immoprofessional-Global-a setzt sonst „spuckige" Unterstriche aufs Menü) */
#ck-fab a, #ck-fab a:hover, #ck-fab a:focus{ text-decoration:none!important; }
#ck-fab.open .ck-item{ opacity:1; transform:none; pointer-events:auto; }
#ck-fab.open .ck-item:nth-child(1){ transition-delay:.02s } #ck-fab.open .ck-item:nth-child(2){ transition-delay:.06s } #ck-fab.open .ck-item:nth-child(3){ transition-delay:.1s } #ck-fab.open .ck-item:nth-child(4){ transition-delay:.14s } #ck-fab.open .ck-item:nth-child(5){ transition-delay:.18s } #ck-fab.open .ck-item:nth-child(6){ transition-delay:.22s } #ck-fab.open .ck-item:nth-child(7){ transition-delay:.26s } #ck-fab.open .ck-item:nth-child(8){ transition-delay:.3s }
/* Edel statt „Kindergarten": feiner 1px-Rand (wie die Hero-Google-Pill) statt 2px-Weiß + weicher, tieferer Schatten. */
#ck-fab .ck-item .lbl{ background:var(--m-accent); color:#fff; font-size:.82rem; font-weight:600; letter-spacing:.01em; padding:8px 15px; border-radius:22px; border:1px solid rgba(255,255,255,.22); box-shadow:0 10px 26px rgba(13,21,32,.42); white-space:nowrap; }
#ck-fab .ck-item .ico{ width:46px; height:46px; border-radius:50%; background:var(--m-accent); color:#fff; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.24); box-shadow:0 10px 24px rgba(13,21,32,.42); flex:none; }
#ck-fab .ck-item .ico svg{ width:20px; height:20px; }
#ck-fab .ck-item .ico, #ck-fab .ck-item .lbl{ transition:background .18s ease, border-color .18s ease, transform .18s ease; }
/* Hover: KRÄFTIGER Farbwechsel (nicht nur leicht) – Geschäftspunkte heben auf helleres Marine + leichtes Vergrößern */
#ck-fab .ck-item:hover .ico, #ck-fab .ck-item:hover .lbl{ background:var(--m-accent-hi); border-color:rgba(255,255,255,.5); }
#ck-fab .ck-item:hover .ico{ transform:scale(1.07); }
/* Kontakt-Schnittstellen (E-Mail · Kontakt · Anfahrt · Anrufen): ruhigeres, abgesetztes Blau → geringere mentale Last,
   trotzdem klar als Kontakt erkennbar; beim Hover voller Farbwechsel auf kräftiges Kontakt-Blau. */
#ck-fab .ck-item-contact .ico, #ck-fab .ck-item-contact .lbl{ background:var(--m-soft); }
#ck-fab .ck-item-contact:hover .ico, #ck-fab .ck-item-contact:hover .lbl{ background:var(--m-soft-h); border-color:rgba(255,255,255,.5); }
/* RUND (mit !important, sonst zwingt immoprofessionals button{border-radius:3px} es eckig) → hebt sich klar von den
   eckigen Kauf-/Miete-Buttons ab. Plus dezenter heller Ring + Glow = diskret auffällig (Neuro: erkennbar, nicht laut). */
#ck-fab .ck-main{ width:58px; height:58px; border-radius:50%!important; border:1px solid rgba(232,176,7,.45); cursor:pointer; background:var(--m-accent); color:#fff; box-shadow:0 14px 32px rgba(13,21,32,.5); display:flex; align-items:center; justify-content:center; transition:.3s; flex:none; position:relative; margin-left:auto; }
/* dezent pulsierender Gold-Ring (Navy+Gold = edel, „wow" ohne laut) – stoppt, sobald das Menü offen ist */
@media (prefers-reduced-motion: no-preference){
  #ck-fab .ck-main::before, #ck-fab .ck-main::after{ content:""; position:absolute; inset:-4px; border-radius:50%; border:2px solid rgba(232,176,7,.55); pointer-events:none; animation:ckFabPulse 2.8s ease-out infinite; }
  #ck-fab .ck-main::after{ animation-delay:1.1s; }
  #ck-fab.open .ck-main::before, #ck-fab.open .ck-main::after{ animation:none; opacity:0; }
}
@keyframes ckFabPulse{ 0%{ transform:scale(1); opacity:.6; } 100%{ transform:scale(1.5); opacity:0; } }
#ck-fab .ck-main:hover{ background:var(--m-accent-d); }
#ck-fab .ck-main svg{ width:26px; height:26px; }
#ck-fab .ck-main .ic-burger{ display:flex; transition:.25s; }
#ck-fab .ck-main .ic-close{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:.25s; }
#ck-fab.open .ck-main{ background:var(--m-accent-d); }
#ck-fab.open .ck-main .ic-burger{ opacity:0; }
#ck-fab.open .ck-main .ic-close{ opacity:1; }
/* Back-to-top: klein, rund, dezent – UNTER dem Menü-Button in der „Fußzeile" (Markus/KSB), nicht prominent darüber */
#ck-top{ position:fixed; right:33px; bottom:11px; z-index:9002; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.85); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:var(--m-accent); box-shadow:0 6px 16px rgba(20,32,46,.2); display:flex; align-items:center; justify-content:center; opacity:0; transform:translateY(10px); pointer-events:none; transition:.3s; }
#ck-top.show{ opacity:1; transform:none; pointer-events:auto; }
#ck-top:hover{ background:var(--m-accent); color:#fff; }
#ck-top svg{ width:22px; height:22px; }
/* Scroll-Button bleibt unten in der Ecke – unabhängig vom Menü-Zustand (kein Hochspringen mehr). */
#ck-top svg{ width:18px; height:18px; }

/* ---- Hero-Buttons Dropdown (Kaufen/Mieten) ---- */
.cokus-one .hbtn-wrap{ position:relative; }
.cokus-one .hbtn{ cursor:pointer; font-family:var(--m-sans); }
.cokus-one .hbtn .caret{ display:inline-block; transition:.25s; font-size:.8em; }
.cokus-one .hbtn-wrap.open .hbtn .caret{ transform:rotate(180deg); }
.cokus-one .hmenu{ position:absolute; top:calc(100% + 8px); left:0; min-width:240px; background:#fff; border:1px solid var(--m-line); border-radius:12px; box-shadow:0 24px 50px rgba(20,32,46,.24); padding:8px; opacity:0; transform:translateY(8px); pointer-events:none; transition:.22s; z-index:50; }
.cokus-one .hbtn-wrap.open .hmenu{ opacity:1; transform:none; pointer-events:auto; }
.cokus-one .hmenu a{ display:flex; align-items:center; gap:11px; padding:8px 14px; border-radius:8px; color:var(--m-ink); font-weight:600; font-size:.94rem; transition:.15s; }
.cokus-one .hmenu a .hi{ font-size:1.15rem; }
.cokus-one .hmenu a:hover{ background:var(--m-bg); color:var(--m-accent); transform:translateX(3px); }

/* ---- Kategorie-Icon (Watermark) ---- */
.cokus-one .cat{ display:flex; }
.cokus-one .cat .cic{ position:absolute; top:18px; left:20px; z-index:2; width:38px; height:38px; color:rgba(255,255,255,.9); transition:.3s; }
.cokus-one .cat:hover .cic{ transform:translateY(-3px) scale(1.06); }
.cokus-one .cat .cic svg{ width:100%; height:100%; }

/* ---- Kundenstimmen-Laufleiste ---- */
.cokus-one .tst-view{ overflow:hidden; padding:8px 0 6px; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.cokus-one .tst-track{ display:flex; gap:24px; width:max-content; padding:0 24px; animation:ckSlide 72s linear infinite; }
.cokus-one .tst-view:hover .tst-track{ animation-play-state:paused; }
.cokus-one .tst-track .quote{ width:380px; flex:none; }
.cokus-one .tst .gnote{ margin-top:30px; }

/* ---- dezente Mikro-Effekte (Hover-Unterstreichung) ---- */
.cokus-one .hero .htrust a, .cokus-one .gnote a, .cokus-one .lb .all{ background-image:linear-gradient(var(--m-accent),var(--m-accent)); background-size:0% 1.5px; background-position:0 100%; background-repeat:no-repeat; transition:background-size .3s, color .2s; }
.cokus-one .hero .htrust a:hover, .cokus-one .gnote a:hover, .cokus-one .lb .all:hover{ background-size:100% 1.5px; }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1024px){
  .cokus-one .hero .wrap{ grid-template-columns:1fr; gap:36px; text-align:center; padding:40px 28px 56px; align-items:center; }
  .cokus-one .hero .htext{ display:block; }
  .cokus-one .hero .sub{ margin:16px auto 22px; }
  /* Mobil: Google-Pill bekommt Luft (klebte sonst direkt auf dem Kaufangebote-Button) */
  .cokus-one .hero .htrust{ margin:6px auto 24px; }
  .cokus-one .hero h1{ font-size:3rem; }
  .cokus-one .hero .sub{ margin-left:auto; margin-right:auto; }
  .cokus-one .hero .hctas, .cokus-one .hero .htrust{ justify-content:center; }
  .cokus-one .people{ max-width:560px; margin:0 auto; }
  .cokus-one .trustband .wrap{ grid-template-columns:repeat(2,1fr); gap:26px; }
  .cokus-one .cats{ grid-template-columns:repeat(2,1fr); }
  .cokus-one .why-grid{ grid-template-columns:1fr; gap:32px; }
  .cokus-one .team .wrap{ grid-template-columns:1fr; gap:40px; }
  .cokus-one .steps{ grid-template-columns:repeat(2,1fr); gap:30px; }
  .cokus-one .tst-grid{ grid-template-columns:1fr; }
  .cokus-one .region{ background-attachment:scroll; }
  .cokus-one .sec-head h2{ font-size:2.2rem; }
  .cokus-one .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .cokus-one .wrap{ padding:0 18px; }
  .cokus-one section{ padding:60px 0; }
  .cokus-one .hero .wrap{ padding:34px 18px 46px; gap:26px; }
  /* H1 auf EINE Zeile (kein Umbruch) – skaliert mit der Breite, hebt den Content nach oben */
  .cokus-one .hero h1{ font-size:clamp(1.58rem, 6.3vw, 2.05rem); white-space:nowrap; letter-spacing:-.02em; }
  .cokus-one .hero .sub{ font-size:1.02rem; }
  .cokus-one .hero .hctas{ flex-direction:column; } .cokus-one .hero .hctas .btn{ width:100%; }
  .cokus-one .hveil{ background:linear-gradient(180deg, rgba(244,247,250,.92), rgba(244,247,250,.9)); }
  .cokus-one .people{ padding:28px 18px; } .cokus-one .people .two{ gap:14px; } .cokus-one .people .p img{ width:104px; height:104px; }
  .cokus-one .trustband .wrap{ grid-template-columns:1fr; gap:20px; padding:24px 18px; } .cokus-one .tb{ justify-content:flex-start; padding:2px 0; } .cokus-one .tb::before{ display:none; }
  .cokus-one .cats{ grid-template-columns:1fr; }
  .cokus-one .steps{ grid-template-columns:1fr; gap:24px; }
  .cokus-one .sec-head h2, .cokus-one .region h2, .cokus-one .val h2{ font-size:1.85rem; }
  /* Mobil: Footer NICHT komplett stapeln (wird ewig lang) – Logo + Kontakt voll-breit,
     die beiden Link-Spalten (Immobilien · Service) nebeneinander. */
  .cokus-one .foot-grid{ grid-template-columns:1fr 1fr; gap:22px 26px; }
  .cokus-one .foot-grid > :nth-child(1){ grid-column:1 / -1; }
  .cokus-one .foot-grid > :nth-child(4){ grid-column:1 / -1; }
  .cokus-one .hctas .hbtn-wrap{ width:100%; } .cokus-one .hctas .hbtn{ width:100%; justify-content:center; }
  /* Mobil: Dropdown schiebt Inhalt nach unten statt über die Team-Karte zu legen */
  .cokus-one .hmenu{ position:static; display:none; opacity:1; transform:none; min-width:0; left:0; right:0; margin-top:6px; box-shadow:0 12px 28px rgba(20,32,46,.16); }
  .cokus-one .hbtn-wrap.open .hmenu{ display:block; }
  .cokus-one .people{ margin-top:8px; }
  .cokus-one .tst-track .quote{ width:280px; }
  #ck-fab{ right:16px; bottom:48px; } #ck-top{ right:25px; bottom:9px; width:32px; height:32px; }
  #ck-fab .ck-tag{ font-size:.78rem; padding:8px 13px; }
  .ck-topbar{ height:56px; padding:0 16px; gap:10px; }
  .ck-logo img, .ck-logo svg{ height:90px; margin-bottom:-34px; }
  .ck-topbar.scrolled{ height:50px; }
  .ck-topbar.scrolled .ck-logo img, .ck-topbar.scrolled .ck-logo svg{ height:40px; margin-bottom:0; }
  .ck-tb-info{ display:none; }
  .ck-tb-call{ padding:9px 14px; font-size:.86rem; }
  /* Team-Karte: Namen sauber in einer Zeile, kein zerschossener Umbruch */
  .cokus-one .people .p img{ width:112px; height:112px; }
  .cokus-one .people .p b{ font-size:.98rem; line-height:1.15; }
  .cokus-one .people .p small{ font-size:.72rem; white-space:nowrap; }
  /* Laufband-Kopf: Überschrift oben, „Alle ansehen" darunter */
  .cokus-one .lb .lbhead{ flex-direction:column; align-items:flex-start; gap:6px; margin-bottom:16px; }
  .cokus-one .lb .lbhead .t{ font-size:1.4rem; }
  /* Google-Chip: nicht über den Rand wachsen — IHK bricht sauber in Zeile 2 um */
  .cokus-one .hero .htrust{ max-width:100%; flex-wrap:wrap; justify-content:center; gap:8px; row-gap:5px; padding:9px 14px; }
  .cokus-one .hero .htrust a{ flex-wrap:wrap; justify-content:center; gap:6px; font-size:.8rem; min-width:0; }
  .cokus-one .hero .htrust a svg{ width:17px!important; height:17px!important; }
  .cokus-one .hero .htrust .gstars{ font-size:.82rem; letter-spacing:-.5px; }
  .cokus-one .hero .htrust .ihk{ width:100%; justify-content:center; border-left:0; padding-left:0; padding-top:5px; font-size:.8rem; border-top:1px solid rgba(255,255,255,.22); }
}

/* ============================================================
   UNTERSEITEN — Objektlisten im Marine-Design (.cokus-sub)
   immoprofessional-Markup wird umgestylt: Voll-Breite + Karten-Grid.
   Karten-Inhalt wird von cokus.js zu .ck-ocard neu aufgebaut.
   ============================================================ */
body.cokus-sub{ background:var(--m-bg); max-width:none!important; width:auto!important; margin:0!important; }
/* Voll-Breite: immoprofessionals body{max-width:1280} + inline-block-Spalte aufheben → Marine-Bänder randlos, Grid zentriert via .ulist_wrapper */
body.cokus-sub #wrapperall, body.cokus-sub #mainblock, body.cokus-sub #mainblock > main, body.cokus-sub .lb9, body.cokus-sub .ulist_wrapper{
  max-width:none!important; width:auto!important; display:block!important; float:none!important; margin-left:0!important; margin-right:0!important; }
/* alte obere Navi / Reste verbergen — Top-Bar + Radialmenü übernehmen */
body.cokus-sub #navi_oben, body.cokus-sub #navi_intern, body.cokus-sub .header_container,
body.cokus-sub .wrapper_social, body.cokus-sub #mopv2_mobi, body.cokus-sub #mobi_menue{ display:none!important; }

/* ============================================================
   INHALTS-/FORMULARSEITEN (Kontakt, Anfahrt, …) — body.cokus-page
   ============================================================ */
body.cokus-page{ background:var(--m-bg); }
/* Topbar + Marine-Kopf RANDLOS (wie Listen-/Detailseiten) – immoprofessional boxt den Body sonst auf 1280px
   und zentriert ihn → die blauen Bänder bekommen links/rechts Ränder = Stilbruch. */
body.cokus-page, body.cokus-page #wrapperall{ max-width:none!important; width:auto!important; margin:0!important; }
body.cokus-page #navi_oben, body.cokus-page #navi_intern, body.cokus-page .header_container,
body.cokus-page .wrapper_social, body.cokus-page #mopv2_mobi, body.cokus-page #mobi_menue,
body.cokus-page .breadcrumb{ display:none!important; }
/* Flacher Kopf auf Inhaltsseiten → Inhalt kommt höher, weniger Scrollen (Markus).
   Doppelklasse, damit die später definierte Basis-.ck-subhead-Regel nicht gewinnt. */
.ck-subhead.ck-subhead-page{ padding:24px 28px 24px!important; }
.ck-subhead.ck-subhead-page .eyebrow{ margin-bottom:7px; }
.ck-subhead.ck-subhead-page h1{ font-size:2.05rem!important; margin-bottom:5px; }
.ck-subhead.ck-subhead-page p{ font-size:.98rem; }
/* Inhalt zentriert begrenzt + in eine helle Karte */
/* immoprofessional rendert #mainblock als inline-block (shrink-to-fit) → blieb schmal/„spuckig".
   display:block + margin:auto → füllt bis max-width und zentriert sauber. */
body.cokus-page #mainblock{ display:block!important; max-width:1100px!important; width:auto!important; margin:20px auto 56px!important; padding:0 26px!important; background:transparent!important; }
body.cokus-page #mainblock > main, body.cokus-page #mainblock > div{ background:var(--m-paper); border:1px solid var(--m-line); border-radius:16px; box-shadow:0 10px 30px rgba(20,40,60,.06); padding:34px 38px 40px; }
/* Karte füllt die breite Box, aber Einzel-Eingabefelder bleiben in lesbarer Spaltenbreite (sonst absurd breite Inputs). */
body.cokus-page #mainblock input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
body.cokus-page #mainblock select{ max-width:560px; }
/* Formular-Felder im Marine-Look */
body.cokus-page label{ display:block; font-size:.82rem; font-weight:600; color:var(--m-muted); margin:14px 0 5px; }
body.cokus-page input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
body.cokus-page select, body.cokus-page textarea{
  width:100%; box-sizing:border-box; padding:10px 13px; border:1px solid var(--m-line); border-radius:9px;
  font-family:inherit; font-size:.95rem; color:var(--m-ink); background:#fff; transition:border-color .15s, box-shadow .15s; }
body.cokus-page input:focus, body.cokus-page select:focus, body.cokus-page textarea:focus{ outline:none; border-color:var(--m-accent); box-shadow:0 0 0 3px rgba(40,72,98,.13); }
/* „Ihre Frage/Mitteilung": flacher, damit die Kontaktfelder darunter sofort sichtbar sind (Markus). Nutzer kann ziehen. */
body.cokus-page textarea{ min-height:72px; resize:vertical; }
/* NUR Formular-Buttons im Inhalt stylen – sonst schlägt das auf den FAB-Menü-Button (#ck-fab .ck-main),
   den Zurück-Button und Back-to-Top durch (machte den runden FAB-Button kaputt). */
body.cokus-page #mainblock button, body.cokus-page #mainblock input[type=submit], body.cokus-page #mainblock .btn{
  background:var(--m-accent)!important; color:#fff!important; border:0!important; border-radius:30px!important;
  padding:11px 26px!important; font-weight:600!important; font-size:.92rem!important; cursor:pointer; box-shadow:0 6px 18px rgba(20,40,60,.16); transition:.18s; }
body.cokus-page #mainblock button:hover, body.cokus-page #mainblock input[type=submit]:hover, body.cokus-page #mainblock .btn:hover{ background:var(--m-accent-d)!important; transform:translateY(-1px); }
/* Sektions-Überschriften (immoprofessional .mg15 graue Balken) → Marine-Serife */
body.cokus-page .mg15{ background:transparent!important; border:0!important; border-bottom:2px solid var(--m-stone)!important; border-radius:0!important;
  font-family:var(--m-disp)!important; font-size:1.2rem!important; font-weight:500!important; color:var(--m-ink)!important; padding:6px 0 8px!important; margin:26px 0 14px!important; }
/* immoprofessional-Formular = Tabellen mit grauen Header-Zellen (.mop_back2) + grauen Zeilen → entgraut + Marine-Sektionsköpfe */
body.cokus-page table{ width:100%!important; border-collapse:collapse!important; }
body.cokus-page tr, body.cokus-page td, body.cokus-page th, body.cokus-page .bestaetigung, body.cokus-page [bgcolor]{ background:transparent!important; }
body.cokus-page .mop_back2{ font-family:var(--m-disp)!important; font-weight:500!important; font-size:1.12rem!important; color:var(--m-ink)!important;
  border-bottom:2px solid var(--m-stone)!important; padding:9px 2px!important; margin-top:8px; letter-spacing:0!important; text-transform:none!important; }
/* Karten/Anfahrt-iframe sauber einrahmen */
body.cokus-page iframe, .ck-map{ width:100%!important; max-width:100%; min-height:420px; border:1px solid var(--m-line)!important; border-radius:14px; display:block; }
/* DSGVO-konforme Klick-zum-Laden-Karte */
.ck-mapwrap{ margin-top:20px; }
.ck-map-ph{ background:var(--m-bg); border:1px solid var(--m-line); border-radius:14px; padding:44px 24px; text-align:center; }
.ck-map-ico{ font-size:2.4rem; line-height:1; }
.ck-map-t{ font-family:var(--m-disp); font-size:1.15rem; color:var(--m-ink); margin:10px 0 18px; }
.ck-map-btn{ background:var(--m-accent); color:#fff; border:0; border-radius:30px; padding:11px 26px; font-weight:600; font-size:.92rem; cursor:pointer; box-shadow:0 6px 18px rgba(20,40,60,.16); transition:.18s; }
.ck-map-btn:hover{ background:var(--m-accent-d); transform:translateY(-1px); }
.ck-map-note{ font-size:.76rem; color:var(--m-muted); margin-top:14px; }

/* ---- Anfahrt-Sektion: Info-Karte neben der Karte ---- */
.ck-anfahrt{ display:grid; grid-template-columns:0.82fr 1.18fr; gap:30px; align-items:stretch; }
.ck-anf-info{ display:flex; flex-direction:column; }
.ck-anf-info h2{ font-family:var(--m-disp)!important; font-weight:500!important; font-size:1.6rem!important; color:var(--m-ink)!important; margin:0 0 10px!important; border:0!important; }
.ck-anf-lead{ color:var(--m-muted); margin:0 0 22px; line-height:1.6; font-size:.98rem; }
.ck-anf-list{ list-style:none; margin:0 0 24px; padding:0; display:flex; flex-direction:column; gap:15px; }
.ck-anf-list li{ display:flex; align-items:flex-start; gap:12px; color:var(--m-ink); line-height:1.4; }
.ck-anf-list li svg{ width:20px; height:20px; color:var(--m-accent); flex:none; margin-top:2px; }
.ck-anf-list a{ color:var(--m-ink); text-decoration:none; }
.ck-anf-list a:hover{ color:var(--m-accent); }
.ck-anf-route{ display:inline-flex; align-items:center; gap:9px; align-self:flex-start; margin-top:auto;
  background:var(--m-accent); color:#fff!important; padding:11px 22px; border-radius:30px; font-weight:600; font-size:.92rem;
  text-decoration:none; box-shadow:0 6px 18px rgba(20,40,60,.16); transition:.18s; }
.ck-anf-route svg{ width:18px; height:18px; }
.ck-anf-route:hover{ background:var(--m-accent-d); transform:translateY(-1px); }
.ck-anf-map{ display:flex; }
.ck-anf-map .ck-mapwrap{ margin-top:0; width:100%; display:flex; }
.ck-anf-map .ck-map-ph{ flex:1; min-height:360px; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.ck-anf-map .ck-map{ min-height:360px; }
@media(max-width:760px){ .ck-anfahrt{ grid-template-columns:1fr; gap:24px; } .ck-anf-route{ margin-top:4px; } .ck-anf-map .ck-map-ph,.ck-anf-map .ck-map{ min-height:300px; } }

/* ============================================================
   RESPONSIVE (vertieft) — Inhalts-/Formularseiten + Radialmenü, Tablet & Mobil
   ============================================================ */
@media(max-width:1024px){
  body.cokus-page #mainblock{ padding:0 22px!important; }
  body.cokus-page #mainblock > main, body.cokus-page #mainblock > div{ padding:30px 28px 34px; }
}
@media(max-width:768px){
  .ck-subhead.ck-subhead-page{ padding:20px 18px 18px!important; }
  .ck-subhead.ck-subhead-page h1{ font-size:1.74rem!important; }
  .ck-subhead.ck-subhead-page p{ font-size:.92rem; }
  body.cokus-page #mainblock{ margin:14px auto 44px!important; padding:0 14px!important; }
  body.cokus-page #mainblock > main, body.cokus-page #mainblock > div{ padding:22px 18px 26px; border-radius:14px; }
  /* Einzelfelder voll-breit auf Mobil (560px-Kappung weg) */
  body.cokus-page #mainblock input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]),
  body.cokus-page #mainblock select{ max-width:none; }
  .ck-anf-info h2{ font-size:1.4rem!important; }
  .ck-anf-map .ck-map-ph, .ck-anf-map .ck-map{ min-height:260px; }
}
/* Radialmenü auf Mobil kompakter (7 Einträge passen, bleiben im Bild, Daumen-erreichbar) */
@media(max-width:600px){
  #ck-fab .ck-item .ico{ width:42px; height:42px; }
  #ck-fab .ck-item .ico svg{ width:18px; height:18px; }
  #ck-fab .ck-item .lbl{ font-size:.78rem; padding:6px 11px; }
  #ck-fab .ck-items{ gap:10px; bottom:64px; }
  #ck-fab .ck-main{ width:54px; height:54px; }
}

/* ---- Kategorie-Kopf (von cokus.js eingesetzt) ---- */
.ck-subhead{ background:var(--m-accent); color:#fff; padding:50px 28px 42px; text-align:center; }
.ck-subhead .eyebrow{ font-size:.74rem; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:#bcd0e4; margin-bottom:10px; }
.ck-subhead h1{ font-family:var(--m-disp); font-weight:500; font-size:2.7rem; color:#fff!important; margin:0 0 8px; line-height:1.1; }
.ck-subhead p{ color:#cdd7e2; font-size:1.04rem; margin:0; }
.ck-subhead nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:22px; }
.ck-subhead nav a{ padding:8px 16px; border-radius:30px; font-size:.86rem; font-weight:600; color:#dbe6f1; border:1px solid rgba(255,255,255,.28); transition:.18s; }
.ck-subhead nav a:hover{ background:rgba(255,255,255,.12); color:#fff; }
.ck-subhead nav a.active{ background:#fff; color:var(--m-accent); border-color:#fff; }
/* Gesuche-Reiter: bewusst DEZENT/zurückgenommen – die Angebote sollen emotional im Fokus stehen, Gesuche sind Nebenschauplatz */
.ck-subhead nav a.ck-nav-gesuch{ margin-left:10px; opacity:.66; font-weight:500; border-color:rgba(255,255,255,.16); }
.ck-subhead nav a.ck-nav-gesuch:hover{ opacity:1; background:rgba(255,255,255,.1); color:#fff; }
.ck-subhead nav a.ck-nav-gesuch.active{ opacity:1; background:rgba(255,255,255,.14); color:#fff; border-color:rgba(255,255,255,.4); }

/* ---- native Sortier-/Ansicht-/Breadcrumb-Leiste ausblenden ----
   `.wrapper_sort` ist ein position:absolute-Popup (z999) → schwebte oben über den Top-Bar;
   `#galerieansicht` ist die ausgeblendete Zweit-Ansicht → NICHT mit-gridden (sonst Objekte doppelt). */
body.cokus-sub .ulist_wrapper > .mg15, body.cokus-sub .wrapper_sort, body.cokus-sub #sort_func1,
body.cokus-sub .galerieansicht_pfeil, body.cokus-sub #link_listenansicht, body.cokus-sub #link_galerieansicht,
body.cokus-sub .breadcrumb, body.cokus-sub #galerieansicht{ display:none!important; }
/* alte immoprofessional-Objekt-Titelzeile über der Karte (Wasungen… Objekt-Nr.) weg — meine Karte hat Titel+Ort schon */
body.cokus-sub .wrapper_liste > .mg15:not(.ex_wrapper){ display:none!important; }
body.cokus-sub .ulist_wrapper{ max-width:1336px; margin:0 auto!important; padding:30px 28px 76px!important; }

/* ---- Karten-Grid (nur die sichtbare Listen-Ansicht) ---- */
body.cokus-sub #listenansicht{ max-width:none!important; margin:0!important; padding:0!important;
  display:grid!important; grid-template-columns:repeat(auto-fill, minmax(300px,1fr)); gap:26px; }
body.cokus-sub .wrapper_liste{ margin:0!important; padding:0!important; min-width:0; }
body.cokus-sub .ex_wrapper.mg15{ margin:0!important; padding:0!important; border:0!important; background:none!important; box-shadow:none!important; min-width:0; }

/* immoprofessional-Karten-Container HINTER der ck-ocard neutralisieren:
   .wrapper_liste hatte graue eckige 1px-Border + 3px-Radius + Schatten → guckte an den Ecken/unten raus. */
body.cokus-sub #listenansicht .wrapper_liste, body.cokus-sub #galerieansicht .wrapper_liste,
body.cokus-sub #listenansicht .ex_wrapper, body.cokus-sub #galerieansicht .ex_wrapper,
body.cokus-sub .galerieansicht_rahmen, body.cokus-sub .galerieansicht_bilder{
  border:0!important; border-radius:0!important; box-shadow:none!important; background:transparent!important; padding:0!important; margin:0!important; overflow:visible!important; }
/* immoprofessionals zweite (Galerie-)Ansicht samt Umschalter komplett aus — meine Karten SIND die Galerie */
body.cokus-sub #galerieansicht{ display:none!important; }

/* die von cokus.js neu aufgebaute Objekt-Karte */
.ck-ocard{ display:flex; flex-direction:column; background:#fff; border:1px solid var(--m-line); border-radius:14px; overflow:hidden;
  box-shadow:0 6px 22px rgba(20,40,60,.07); height:100%; color:var(--m-ink); transition:transform .2s, box-shadow .2s; }
.ck-ocard:hover{ transform:translateY(-4px); box-shadow:0 18px 38px rgba(20,40,60,.15); }
.ck-ocard-img{ position:relative; aspect-ratio:3/2; background:var(--m-stone); overflow:hidden; }
.ck-ocard-img img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s; }
.ck-ocard:hover .ck-ocard-img img{ transform:scale(1.05); }
.ck-ocard-badge{ position:absolute; top:14px; left:0; background:var(--m-accent); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding:6px 13px 6px 12px; border-radius:0 30px 30px 0; box-shadow:0 4px 12px rgba(16,26,38,.28); }
.ck-ocard-badge.res{ background:#b4623f; }
.ck-ocard-badge.sold{ background:#7a8794; }
.ck-ocard-count{ position:absolute; bottom:12px; right:12px; display:inline-flex; align-items:center; gap:5px; background:rgba(13,21,32,.7); color:#fff; padding:4px 10px; border-radius:30px; font-size:.75rem; -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.ck-ocard-body{ padding:16px 18px 18px; display:flex; flex-direction:column; flex:1; }
.ck-ocard-loc{ font-size:.78rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--m-accent); }
.ck-ocard-title{ font-family:var(--m-disp); font-weight:500; font-size:1.12rem; line-height:1.28; color:var(--m-ink); margin:5px 0 0; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.ck-ocard-facts{ display:flex; flex-wrap:wrap; gap:7px; margin-top:12px; }
.ck-ocard-facts span{ background:var(--m-bg); border:1px solid var(--m-line); border-radius:8px; padding:4px 9px; font-size:.78rem; color:var(--m-ink); white-space:nowrap; }
/* Preisblock: Betrag oben, darunter Kaltmiete LINKS · zzgl. NK RECHTS daneben (statt dreizeilig untereinander). */
.ck-ocard-price{ margin-top:auto; padding-top:14px; border-top:1px solid var(--m-line); display:flex; flex-wrap:wrap; align-items:baseline; column-gap:10px; row-gap:1px; }
.ck-price-amt{ flex:0 0 100%; font-family:var(--m-disp); font-weight:600; font-size:1.5rem; line-height:1.08; color:var(--m-accent); }
.ck-price-lbl{ flex:1 1 auto; font-size:.72rem; font-weight:500; letter-spacing:.02em; color:var(--m-muted); }
.ck-price-nk{ margin-left:auto; text-align:right; white-space:nowrap; font-size:.7rem; font-weight:500; color:var(--m-muted); opacity:.9; }
/* Referenzen (vermittelte Objekte): kein Preis auf den Karten – Titel/Ort bleiben für SEO. */
body.cokus-ref .ck-ocard-price{ display:none!important; }
body.cokus-ref .ck-ocard-body{ padding-bottom:18px; }

@media (max-width:600px){
  .ck-subhead{ padding:34px 18px 30px; }
  .ck-subhead h1{ font-size:1.95rem; }
  .ck-subhead p{ font-size:.95rem; }
  body.cokus-sub .ulist_wrapper{ padding:22px 16px 60px!important; }
  body.cokus-sub #listenansicht, body.cokus-sub #galerieansicht{ grid-template-columns:1fr; padding:0!important; gap:20px; }
  .ck-subhead nav{ gap:6px; } .ck-subhead nav a{ padding:7px 12px; font-size:.8rem; }
}

/* ============================================================
   OBJEKT-DETAILSEITEN (modernes Bootstrap-Exposé) — Marine-Akzent
   Zentraler Hebel: Bootstrap-„primary" (Default-Blau) → Marine.
   ============================================================ */
body.cokus-detail{ background:var(--m-bg); }
/* Listen-/Galerie-Unterseiten: Logo GROSS wie Startseite — es ragt in den blauen Subhead-Block,
   beim Scrollen schrumpft es (scrolled). Maße kommen aus der globalen .ck-logo-Regel. */
body.cokus-sub .ck-topbar, body.cokus-page .ck-topbar{ align-items:flex-end!important; }
body.cokus-sub .ck-logo, body.cokus-page .ck-logo{ align-self:stretch!important; align-items:flex-end!important; }
/* Detailseite: KEIN blauer Block dahinter → Logo klein/gekappt in der Marine-Leiste (weiß auf hell wäre sonst unsichtbar) */
body.cokus-detail .ck-logo img, body.cokus-detail .ck-logo svg{ height:46px!important; margin-bottom:0!important; }
body.cokus-detail .ck-topbar{ align-items:center!important; }
body.cokus-detail .ck-logo{ align-self:center!important; align-items:center!important; }
body.cokus-detail .breadcrumb, body.cokus-detail #navi_oben, body.cokus-detail #navi_intern,
body.cokus-detail #mopv2_mobi, body.cokus-detail #mobi_menue{ display:none!important; }
/* Bootstrap-Primary auf Marine umfärben (greift auf der ganzen Seite) */
body.cokus-detail .text-primary{ color:var(--m-accent)!important; }
/* Fakten-Datenband: Marine-BG → Text MUSS hell sein (Bootstrap lässt ihn sonst dunkel = unlesbar) */
body.cokus-detail .bg-primary{ background-color:var(--m-accent)!important; }
body.cokus-detail .bg-primary, body.cokus-detail .bg-primary *{ color:#fff!important; }
body.cokus-detail .bg-primary .fw-semibold{ display:block; font-family:var(--m-sans)!important; font-size:.72rem!important; font-weight:700!important; letter-spacing:.09em; text-transform:uppercase; color:#a9c2da!important; margin-bottom:1px!important; line-height:1.1; }
body.cokus-detail .bg-primary [class*="fs-md-4"], body.cokus-detail .bg-primary .col{ font-family:var(--m-disp)!important; }
body.cokus-detail .bg-primary .col p{ line-height:1.15!important; font-size:1.18rem!important; }
.ck-db-ico{ display:block; margin:0 auto 5px; width:22px; height:22px; color:#9fbdda; }
.ck-db-ico svg{ width:24px; height:24px; display:block; }
/* flacher & edler statt fett – mehr First-View für die Zusatzinfos darunter */
body.cokus-detail .container-fluid.bg-primary{ padding-top:13px!important; padding-bottom:13px!important; }
/* kompakte Preis-Spalte: großer Betrag + kleines Label (Kaltmiete + NK) statt 3 Zeilen */
body.cokus-detail .bg-primary .ck-db-amt{ display:block; font-family:var(--m-disp)!important; font-size:1.5rem; font-weight:600; line-height:1.1; color:#fff!important; }
body.cokus-detail .bg-primary .ck-db-sub{ display:block; font-family:var(--m-sans)!important; font-size:.72rem; letter-spacing:.02em; color:#a9c2da!important; margin-top:3px; }
/* Sektions-Karten innen luftiger + Detailseiten-Inhalt zentriert begrenzt */
body.cokus-detail .card-body{ padding:24px 26px; }

/* ---- Kennzahlen-Grid (unter dem Datenband, „Kennzahlen oben") ---- */
.ck-keyfacts{ max-width:1280px; margin:0 auto; padding:0 24px; }
.ck-kf-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:1px; background:var(--m-line); border:1px solid var(--m-line); border-radius:14px; overflow:hidden; margin:22px 0 8px; box-shadow:0 8px 26px rgba(20,40,60,.07); }
.ck-kf{ background:#fff; padding:10px 16px; display:flex; flex-direction:column; justify-content:center; gap:1px; }
.ck-kf-l{ font-size:.68rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--m-muted); line-height:1.2; }
.ck-kf-v{ font-family:var(--m-disp); font-size:1.05rem; line-height:1.2; color:var(--m-ink); }
.ck-kf-v.ck-kf-v-long{ font-size:.9rem; line-height:1.3; }
/* ---- flache Sektions-Überschriften statt Tabs ---- */
body.cokus-detail .ck-sec-h{ font-family:var(--m-disp); font-size:1.45rem; color:var(--m-ink); margin:4px 0 12px; }
body.cokus-detail .tab-pane{ margin-bottom:10px; }
/* ---- „Exposé anfordern" dezent ---- */
.ck-expose-soft{ background:transparent!important; color:var(--m-accent)!important; border:1.5px solid var(--m-accent)!important; box-shadow:none!important; font-weight:600!important; }
.ck-expose-soft:hover{ background:var(--m-accent)!important; color:#fff!important; }

@media (max-width:600px){
  .ck-keyfacts{ padding:0 14px; }
  .ck-kf-grid{ grid-template-columns:1fr 1fr; margin:16px 0 6px; }
  .ck-kf-v{ font-size:1rem; }
  body.cokus-detail .ck-sec-h{ font-size:1.25rem; }
}
body.cokus-detail .btn-primary{ background-color:var(--m-accent)!important; border-color:var(--m-accent)!important; color:#fff!important; }
body.cokus-detail .btn-primary:hover{ background-color:var(--m-accent-d)!important; border-color:var(--m-accent-d)!important; }
body.cokus-detail .btn-outline-primary{ color:var(--m-accent)!important; border-color:var(--m-accent)!important; }
body.cokus-detail .btn-outline-primary:hover{ background-color:var(--m-accent)!important; color:#fff!important; }
body.cokus-detail .border-primary{ border-color:var(--m-accent)!important; }
body.cokus-detail .link-primary, body.cokus-detail a.text-primary{ color:var(--m-accent)!important; }
body.cokus-detail .badge.bg-primary, body.cokus-detail .badge.text-bg-primary{ background:var(--m-accent)!important; color:#fff!important; }
/* Akzent-Hintergründe/Trennlinien dezent angleichen */
body.cokus-detail hr{ border-color:var(--m-line); }
/* Überschriften in Serife (Fraunces) */
body.cokus-detail h1, body.cokus-detail h2, body.cokus-detail h3, body.cokus-detail h4,
body.cokus-detail .h1, body.cokus-detail .h2, body.cokus-detail .h3, body.cokus-detail .h4{ font-family:var(--m-disp)!important; font-weight:500; letter-spacing:-.01em; }
body.cokus-detail .webexpose_wrapper{ padding-top:16px; }
/* „Exposé anfordern" o.ä. CTA als satter Marine-Button */
body.cokus-detail .btn-primary{ border-radius:6px; font-weight:600; }
/* Sektions-Titel sind Divs mit fs-Klassen plus fw-semibold (keine h-Tags) - Fraunces-Serife */
body.cokus-detail .fs-3.fw-semibold, body.cokus-detail .fs-4.fw-semibold, body.cokus-detail .fs-5.fw-semibold{ font-family:var(--m-disp)!important; font-weight:500!important; letter-spacing:-.01em; }
/* Karten edler (weicher Schatten, Marine-Rahmen, mehr Radius) */
body.cokus-detail .card{ border:1px solid var(--m-line)!important; border-radius:13px!important; }
body.cokus-detail .card.shadow-sm, body.cokus-detail .card.shadow{ box-shadow:0 8px 26px rgba(20,40,60,.08)!important; }
body.cokus-detail .webexpose_wrapper{ padding-bottom:54px; }

/* ---- Mosaik-Galerie (1 groß + 2x2 klein) + Lightbox ---- */
body.cokus-detail .ck-gallery{ max-width:1280px; margin:18px auto 8px; padding:0 24px; }
.ck-gal-grid{ display:grid; grid-template-columns:1.7fr 1fr; gap:10px; height:470px; }
.ck-gal-main, .ck-gal-cell{ border:0; padding:0; margin:0; cursor:pointer; overflow:hidden; background:var(--m-stone); position:relative; }
.ck-gal-main img, .ck-gal-cell img{ width:100%!important; height:100%!important; object-fit:cover!important; display:block; transition:transform .3s; }
.ck-gal-main:hover img, .ck-gal-cell:hover img{ transform:scale(1.04); }
.ck-gal-main{ border-radius:16px; height:100%; }
.ck-gal-side{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr; gap:10px; }
.ck-gal-cell{ border-radius:12px; }
.ck-gal-more{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(13,21,32,.58); color:#fff; font-family:var(--m-sans); font-weight:600; font-size:1.05rem; border-radius:12px; -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px); }

.ck-lightbox{ position:fixed; inset:0; z-index:9999; background:rgba(9,14,22,.96); display:none; flex-direction:column; }
.ck-lightbox.open{ display:flex; }
.ck-lb-stage{ position:relative; flex:1; min-height:0; display:flex; align-items:center; justify-content:center; padding:46px 78px 12px; }
.ck-lb-img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; box-shadow:0 24px 70px rgba(0,0,0,.6); }
.ck-lb-close{ position:absolute; top:14px; right:26px; font-size:2.6rem; line-height:1; color:#fff; background:none; border:0; cursor:pointer; opacity:.85; z-index:3; }
.ck-lb-close:hover{ opacity:1; }
.ck-lb-prev, .ck-lb-next{ position:absolute; top:50%; transform:translateY(-50%); font-size:2.4rem; line-height:1; color:#fff; background:rgba(255,255,255,.12); border:0; width:54px; height:84px; cursor:pointer; border-radius:10px; transition:background .2s; z-index:2; }
.ck-lb-prev:hover, .ck-lb-next:hover{ background:rgba(255,255,255,.26); }
.ck-lb-prev{ left:18px; } .ck-lb-next{ right:18px; }
.ck-lb-count{ position:absolute; bottom:14px; left:50%; transform:translateX(-50%); color:#fff; font-size:.82rem; background:rgba(0,0,0,.5); padding:5px 13px; border-radius:20px; }
.ck-lb-strip{ flex:none; display:flex; gap:8px; overflow-x:auto; padding:11px 16px 14px; background:rgba(0,0,0,.4); }
.ck-lb-strip img{ height:62px; width:88px; flex:none; object-fit:cover; border-radius:6px; cursor:pointer; opacity:.5; border:2px solid transparent; transition:opacity .15s, border-color .15s; }
.ck-lb-strip img:hover{ opacity:.85; }
.ck-lb-strip img.active{ opacity:1; border-color:#fff; }

@media (max-width:600px){
  body.cokus-detail .ck-gallery{ padding:0 14px; margin-top:10px; }
  .ck-gal-grid{ grid-template-columns:1fr; height:auto; gap:8px; }
  .ck-gal-main{ height:230px; border-radius:12px; }
  .ck-gal-side{ grid-template-columns:1fr 1fr 1fr 1fr; grid-template-rows:1fr; height:74px; gap:8px; }
  .ck-lb-stage{ padding:40px 8px 6px; }
  .ck-lb-prev, .ck-lb-next{ width:38px; height:62px; font-size:1.7rem; }
  .ck-lb-prev{ left:6px; } .ck-lb-next{ right:6px; }
  .ck-lb-close{ right:14px; top:8px; }
  .ck-lb-strip img{ height:46px; width:64px; }
}

/* ============================================================
   UNTERSEITEN-FUSSZEILE — alte immoprofessional-Fußzeile in Marine
   (statt „spuckig" weiß; behält Adresse/Impressum/Datenschutz)
   ============================================================ */
/* Nativen immoprofessional-Footer auf Unterseiten KOMPLETT ausblenden – stattdessen wird der
   Startseiten-One-Pager-Footer per JS (injectSubFooter) als `.cokus-subfoot` eingeblendet. */
body.cokus-sub #IP_footer_address, body.cokus-sub #wrapper_footer,
body.cokus-detail #IP_footer_address, body.cokus-detail #wrapper_footer{ display:none!important; }
/* injizierter Startseiten-Footer auf Unterseiten: gleiche Optik wie Startseite, etwas Abstand zum Inhalt */
.cokus-subfoot{ margin-top:50px; }
.cokus-subfoot .foot{ padding-bottom:0; }
.cokus-subfoot .foot .ck-foot-logo{ filter:brightness(0) invert(1); }