/*
  CBJ Productions – main.css v1.1
  
  FONTS (nach Kauf einkommentieren):
  @font-face { font-family:'Owners';    font-weight:900; src:url('/wp-content/fonts/Owners-Black.woff2') format('woff2'); font-display:swap; }
  @font-face { font-family:'Owners';    font-weight:700; src:url('/wp-content/fonts/Owners-Bold.woff2')  format('woff2'); font-display:swap; }
  @font-face { font-family:'NeueHaas';  font-weight:400; src:url('/wp-content/fonts/NeueHaasGrotesk-55Roman.woff2') format('woff2'); font-display:swap; }
*/

:root {
  --accent: #2581c4;
  --green:  #2581c4;
  --glow:   rgba(37,129,196,.1);
  --bg:     #090909;
  --s1:     #111;
  --s2:     #191919;
  --white:  #EDEAE4;
  --muted:  #666;
  --sep:    rgba(255,255,255,.07);
  --fh:     'Owners','Manrope',sans-serif;
  --fb:     'NeueHaas','Manrope',sans-serif;
  --ease:   cubic-bezier(.4,0,.2,1);
}

/* ── LIGHT MODE ── */
[data-theme="light"] {
  --bg:    #F5F4F0;
  --s1:    #EAE9E5;
  --s2:    #DDDCDA;
  --white: #111111;
  --muted: #555;
  --sep:   rgba(0,0,0,.08);
}

*,*::before,*::after { margin:0; padding:0; box-sizing:border-box }
html { font-size:16px; scroll-behavior:smooth }
body { background:var(--bg); color:var(--white); font-family:var(--fb);
  font-weight:400; line-height:1.6; overflow-x:clip; cursor:none;
  -webkit-font-smoothing:antialiased }
@media(hover:none) { body { cursor:auto } }
img  { display:block; max-width:100%; height:auto }
a    { color:inherit; text-decoration:none }
ul   { list-style:none }

/* ── LOGO ── */
.cbj-logo-link { display:inline-flex; align-items:center; flex-shrink:0 }
.cbj-logo-img { display:block; width:70px; height:auto;
  transition:opacity .25s }
.cbj-logo-img:hover { opacity:.75 }
/* Platzhalter-Bild zeigt Hinweistext bis Logo hochgeladen */
.cbj-logo-placeholder { width:70px; height:auto; opacity:.5 }
/* Footer-Logo etwas kleiner */
.cbj-logo-footer { width:50px; height:auto; opacity:.5 }
.cbj-logo-footer:hover { opacity:.75 }

/* ── CURSOR ── */
/* cursor:none auf allen Seiten – custom Dot übernimmt */
*, *::before, *::after { cursor: none !important }
#cbj-cursor { position:fixed; width:8px; height:8px; background:var(--accent);
  border-radius:50%; pointer-events:none; z-index:999999;
  transform:translate(-50%,-50%); opacity:0;
  transition:width .2s var(--ease), height .2s var(--ease), opacity .25s }
#cbj-cursor.grow { width:26px; height:26px; opacity:.35 }
/* Disable custom cursor on touch/mobile devices */
@media(hover:none) {
  *, *::before, *::after { cursor: auto !important }
  #cbj-cursor { display:none !important }
}

/* ── HEADER ── */
.cbj-header { position:fixed; top:0; left:0; right:0; z-index:800;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 3rem; height:68px;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s, backdrop-filter .4s }
.cbj-header.stuck { background:rgba(9,9,9,.9); backdrop-filter:blur(20px);
  border-color:var(--sep) }

.cbj-logo, .cbj-logo img { display:flex; align-items:center }
.cbj-logo img { height:26px; opacity:.9 }
.cbj-logo-text { font-family:var(--fh); font-weight:900; font-size:1.55rem;
  letter-spacing:-.03em }
.cbj-logo-text em { color:var(--green); font-style:normal }

.cbj-nav-list { display:flex; align-items:center; gap:.2rem }
.cbj-nav-list a { font-family:var(--fb); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); padding:.45rem 1rem; border-radius:3px;
  transition:color .25s, background .25s }
.cbj-nav-list a:hover { color:var(--white); background:var(--sep) }
.cbj-nav-cta { background:var(--green) !important; color:var(--bg) !important;
  font-weight:700; border-radius:100px !important; padding:.45rem 1.4rem !important }
.cbj-nav-cta:hover { opacity:.85 !important }

.cbj-burger { display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:.5rem }
.cbj-burger span { display:block; width:22px; height:1.5px; background:var(--white);
  transition:transform .3s, opacity .3s }
.cbj-burger.open span:first-child { transform:translateY(6.5px) rotate(45deg) }
.cbj-burger.open span:last-child  { transform:translateY(-6.5px) rotate(-45deg) }

/* ── HERO ── */
.cbj-hero { position:relative; min-height:100svh; display:flex;
  flex-direction:column; justify-content:flex-end; overflow:hidden }
.cbj-hero-video { position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:.28 }
.cbj-hero::after { content:''; position:absolute; inset:0;
  background:linear-gradient(to top, var(--bg) 0%, rgba(9,9,9,.2) 60%, transparent 100%) }

.cbj-hero-content { position:relative; z-index:2;
  display:grid; grid-template-columns:1fr 360px; gap:4rem; align-items:flex-end;
  max-width:1380px; margin:0 auto; padding:0 3rem 7rem; width:100% }

.cbj-kicker { display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--fb); font-size:.65rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--green); margin-bottom:2rem;
  opacity:0; animation:cbj-up .6s .2s forwards }
.cbj-kicker::before { content:''; width:22px; height:1px; background:var(--green) }

.cbj-hero-h1 { font-family:var(--fh); font-weight:900; line-height:.9;
  letter-spacing:-.03em; margin-bottom:3rem;
  opacity:0; animation:cbj-up .8s .35s forwards }
.cbj-hero-h1 .line-normal { display:block; font-size:clamp(4rem,10vw,10rem); color:var(--white) }
.cbj-hero-h1 .line-accent  { display:block; font-size:clamp(2.5rem,5.5vw,5.5rem);
  color:var(--green); font-weight:700; margin-top:.5rem }

.cbj-hero-actions { display:flex; gap:1rem;
  opacity:0; animation:cbj-up .7s .55s forwards }
.cbj-hero-right { display:flex; flex-direction:column; gap:2rem;
  opacity:0; animation:cbj-up .7s .65s forwards }
.cbj-hero-stat { border-top:1px solid var(--sep); padding-top:1.5rem }
.cbj-stat-big { font-family:var(--fh); font-weight:900; font-size:3rem;
  line-height:1; color:var(--white); letter-spacing:-.03em }
.cbj-stat-big .g { color:var(--green) }
.cbj-stat-label { font-family:var(--fb); font-size:.63rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted); margin-top:.4rem }

.cbj-hero-scroll { position:absolute; bottom:2.5rem; left:3rem; z-index:3;
  display:flex; align-items:center; gap:.75rem;
  opacity:0; animation:cbj-fade .8s 1.2s forwards }
.cbj-hero-scroll span { font-family:var(--fb); font-size:.6rem; letter-spacing:.25em;
  text-transform:uppercase; color:var(--muted) }
.cbj-hero-line { width:40px; height:1px;
  background:linear-gradient(to right, var(--green), transparent);
  animation:cbj-pulse 2.5s ease-in-out infinite }
@keyframes cbj-pulse { 0%,100%{opacity:.3;transform:scaleX(.5);transform-origin:left}
  50%{opacity:1;transform:scaleX(1)} }

/* ── BUTTONS ── */
.cbj-btn-green { display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 2rem; background:var(--green); color:var(--bg);
  font-family:var(--fb); font-weight:700; font-size:.75rem;
  letter-spacing:.14em; text-transform:uppercase; border-radius:100px;
  border:none; cursor:pointer;
  transition:opacity .25s, transform .2s var(--ease) }
.cbj-btn-green:hover { opacity:.88; transform:translateY(-2px) }
.cbj-btn-line { display:inline-flex; align-items:center; gap:.5rem;
  padding:.85rem 1.8rem; border:1px solid var(--sep); color:var(--muted);
  font-family:var(--fb); font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; border-radius:100px;
  transition:border-color .25s, color .25s }
.cbj-btn-line svg { width:16px; height:16px }
.cbj-btn-line:hover { border-color:rgba(255,255,255,.2); color:var(--white) }

/* ── TICKER ── */
.cbj-ticker { overflow:hidden; padding:.8rem 0; background:var(--s1);
  border-top:1px solid var(--sep); border-bottom:1px solid var(--sep) }
.cbj-ticker-inner { display:flex; width:max-content;
  animation:cbj-ticker 24s linear infinite }
.cbj-tick-item { display:inline-flex; align-items:center; gap:2rem;
  padding:0 2rem; font-family:var(--fb); font-size:.7rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted); white-space:nowrap }
.cbj-tick-item i { display:inline-block; width:4px; height:4px;
  background:var(--green); border-radius:50%; font-style:normal }
@keyframes cbj-ticker { from{transform:translateX(0)} to{transform:translateX(-50%)} }

/* ── EYEBROW ── */
.cbj-eyebrow { display:inline-flex; align-items:center; gap:.6rem;
  font-family:var(--fb); font-size:.65rem; letter-spacing:.28em;
  text-transform:uppercase; color:var(--green); margin-bottom:1.2rem }
.cbj-eyebrow::before { content:''; width:18px; height:1px; background:var(--green) }

/* ── SECTION TITLE ── */
.cbj-section-title { font-family:var(--fh); font-weight:900;
  font-size:clamp(2.8rem,5.5vw,5.5rem); line-height:.93;
  letter-spacing:-.025em; color:var(--white) }
.cbj-section-title em { font-style:normal; color:var(--green) }

/* ── SERVICES ── */
.cbj-services { padding:8rem 3rem; max-width:1380px; margin:0 auto }
.cbj-services-head { display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; margin-bottom:4.5rem; align-items:start }
.cbj-services-intro { font-family:var(--fb); font-size:1rem; line-height:1.8;
  color:var(--muted); max-width:380px; align-self:flex-end }
.cbj-services-list { display:flex; flex-direction:column }
.cbj-svc-row { display:grid; grid-template-columns:80px 1fr 52px;
  gap:3rem; align-items:center;
  padding:2.5rem 0; border-top:1px solid var(--sep);
  transition:background .3s }
.cbj-svc-row:last-child { border-bottom:1px solid var(--sep) }
.cbj-svc-row:hover { background:rgba(255,255,255,.015) }
.cbj-svc-num { font-family:var(--fh); font-weight:900; font-size:.95rem;
  color:var(--muted); letter-spacing:.1em; transition:color .3s }
.cbj-svc-row:hover .cbj-svc-num { color:var(--green) }
.cbj-svc-title { font-family:var(--fh); font-weight:700;
  font-size:clamp(1.4rem,2.5vw,2rem); color:var(--white);
  letter-spacing:-.01em; margin-bottom:.5rem; transition:color .3s }
.cbj-svc-row:hover .cbj-svc-title { color:var(--green) }
.cbj-svc-desc { font-family:var(--fb); font-size:.95rem; line-height:1.75; color:var(--muted) }
.cbj-svc-arrow { display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; border:1px solid var(--sep); border-radius:50%;
  color:var(--muted); flex-shrink:0;
  transition:border-color .3s, color .3s, transform .3s }
.cbj-svc-arrow svg { width:18px; height:18px }
.cbj-svc-row:hover .cbj-svc-arrow { border-color:var(--green); color:var(--green); transform:rotate(-45deg) }

/* ── SERVICE ROW: ABO (hervorgehoben) ── */
.cbj-svc-abo {
  display:grid;
  grid-template-columns:80px 1fr auto;
  gap:3rem;
  align-items:center;
  padding:3rem 2.5rem;
  margin-top:1.5rem;
  background:linear-gradient(135deg, rgba(37,129,196,.07) 0%, rgba(37,129,196,.02) 100%);
  border:1px solid rgba(37,129,196,.25);
  border-radius:8px;
  text-decoration:none;
  color:inherit;
  cursor:pointer;
  transition:background .3s, border-color .3s, transform .3s var(--ease);
}
.cbj-svc-abo:hover {
  background:linear-gradient(135deg, rgba(37,129,196,.13) 0%, rgba(37,129,196,.05) 100%);
  border-color:rgba(37,129,196,.6);
  transform:translateY(-3px);
}
.cbj-svc-abo-left {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.6rem;
}
.cbj-svc-abo-badge {
  background:var(--green);
  color:var(--bg);
  font-family:var(--fh);
  font-weight:900;
  font-size:.55rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  padding:.25rem .6rem;
  border-radius:100px;
}
.cbj-svc-abo-num {
  font-family:var(--fh);
  font-weight:900;
  font-size:.95rem;
  color:var(--green);
  letter-spacing:.1em;
}
.cbj-svc-abo-tag {
  font-family:var(--fb);
  font-size:.58rem;
  letter-spacing:.25em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:.5rem;
}
.cbj-svc-abo-title {
  font-size:clamp(1.8rem,3.5vw,2.8rem) !important;
  color:var(--white) !important;
  margin-bottom:.7rem;
}
.cbj-svc-abo:hover .cbj-svc-abo-title { color:var(--green) !important; }
.cbj-svc-abo-pills {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
}
.cbj-svc-abo-pills span {
  font-family:var(--fb);
  font-size:.65rem;
  letter-spacing:.1em;
  color:var(--green);
  border:1px solid rgba(37,129,196,.3);
  padding:.3rem .8rem;
  border-radius:100px;
}
.cbj-svc-abo-arrow {
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.5rem;
  border:1px solid rgba(37,129,196,.3);
  border-radius:8px;
  padding:1rem 1.2rem;
  color:var(--green);
  flex-shrink:0;
  transition:background .3s, border-color .3s, transform .3s;
  min-width:80px;
  text-align:center;
}
.cbj-svc-abo-arrow svg { width:20px; height:20px }
.cbj-svc-abo-arrow span {
  font-family:var(--fb);
  font-size:.58rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  white-space:nowrap;
}
.cbj-svc-abo:hover .cbj-svc-abo-arrow {
  background:rgba(37,129,196,.1);
  border-color:var(--green);
  transform:rotate(-5deg);
}

/* ── ABO PAGE ── */
.abo-main { padding-top:68px }

/* Ticker auf der Abo-Seite – gleicher Style, eigene Farb-Variante */
.abo-ticker { background:var(--bg); border-top:1px solid var(--sep); border-bottom:1px solid var(--sep) }

/* Hero */
.abo-hero {
  position:relative;
  min-height:90svh;
  display:flex;
  align-items:center;
  padding:8rem 3rem 7rem;
  overflow:hidden;
  border-bottom:1px solid var(--sep);
}
.abo-hero-orb {
  position:absolute;
  width:700px; height:700px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(37,129,196,.07) 0%, transparent 70%);
  top:50%; right:-10%;
  transform:translateY(-50%);
  pointer-events:none;
  animation:cbj-pulse 6s ease-in-out infinite;
}
.abo-hero-inner {
  position:relative;
  z-index:2;
  max-width:900px;
  margin:0 auto;
}
.abo-hero-tag {
  display:inline-flex;
  align-items:center;
  gap:.7rem;
  font-family:var(--fb);
  font-size:.65rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:2rem;
  opacity:0;
  animation:cbj-up .6s .2s forwards;
}
.abo-hero-tag::before { content:''; width:22px; height:1px; background:var(--green) }
.abo-hero-h1 {
  font-family:var(--fh);
  font-weight:900;
  font-size:clamp(3.5rem,9vw,9rem);
  line-height:.9;
  letter-spacing:-.03em;
  color:var(--white);
  margin-bottom:2.5rem;
  opacity:0;
  animation:cbj-up .8s .35s forwards;
}
.abo-hero-h1 em { color:var(--green); font-style:normal; display:block }
.abo-hero-sub {
  font-family:var(--fb);
  font-size:1.1rem;
  line-height:1.8;
  color:var(--muted);
  max-width:600px;
  margin-bottom:3rem;
  opacity:0;
  animation:cbj-up .7s .5s forwards;
}
.abo-hero-actions {
  display:flex;
  gap:1rem;
  flex-wrap:wrap;
  opacity:0;
  animation:cbj-up .7s .65s forwards;
}
.abo-hero-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:2rem;
  margin-top:5rem;
  padding-top:4rem;
  border-top:1px solid var(--sep);
  opacity:0;
  animation:cbj-up .7s .8s forwards;
}
.abo-stat-num {
  font-family:var(--fh);
  font-weight:900;
  font-size:2.5rem;
  color:var(--green);
  line-height:1;
  letter-spacing:-.02em;
}
.abo-stat-label {
  font-family:var(--fb);
  font-size:.65rem;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--muted);
  margin-top:.4rem;
}

/* Problem */
.abo-problem {
  padding:8rem 3rem;
  max-width:1380px;
  margin:0 auto;
}
.abo-section-label {
  display:flex;
  align-items:center;
  gap:1rem;
  font-family:var(--fb);
  font-size:.62rem;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--green);
  margin-bottom:2rem;
}
.abo-section-label::after { content:''; flex:1; height:1px; background:var(--sep) }
.abo-section-title {
  font-family:var(--fh);
  font-weight:900;
  font-size:clamp(2.5rem,5vw,5rem);
  line-height:.93;
  letter-spacing:-.025em;
  color:var(--white);
  margin-bottom:1.5rem;
}
.abo-section-sub {
  font-family:var(--fb);
  font-size:1rem;
  line-height:1.8;
  color:var(--muted);
  max-width:600px;
  margin-bottom:4rem;
}
.abo-problem-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5px;
  background:var(--sep);
  border:1px solid var(--sep);
  border-radius:8px;
  overflow:hidden;
}
.abo-problem-card {
  background:var(--s1);
  padding:3rem;
  transition:background .3s;
}
.abo-problem-card:hover { background:var(--s2) }
.abo-problem-num {
  font-family:var(--fh);
  font-weight:900;
  font-size:2.5rem;
  color:rgba(37,129,196,.15);
  line-height:1;
  margin-bottom:1.2rem;
}
.abo-problem-card h3 {
  font-family:var(--fh);
  font-weight:700;
  font-size:1.3rem;
  color:var(--white);
  margin-bottom:.8rem;
  letter-spacing:-.01em;
}
.abo-problem-card p {
  font-family:var(--fb);
  font-size:.95rem;
  line-height:1.75;
  color:var(--muted);
}

/* Prozess */
.abo-process {
  background:var(--s1);
  border-top:1px solid var(--sep);
  border-bottom:1px solid var(--sep);
  padding:8rem 3rem;
}
.abo-process-inner { max-width:1380px; margin:0 auto }
.abo-process-steps {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:2rem;
  margin-top:4rem;
  position:relative;
}
.abo-process-steps::before {
  content:'';
  position:absolute;
  top:28px;
  left:10%;
  right:10%;
  height:1px;
  background:linear-gradient(to right, var(--sep), rgba(37,129,196,.3), var(--sep));
}
.abo-step { text-align:center; position:relative; z-index:1 }
.abo-step-circle {
  width:56px; height:56px;
  border-radius:50%;
  border:1px solid var(--sep);
  background:var(--bg);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 1.2rem;
  font-family:var(--fh);
  font-weight:900;
  font-size:.85rem;
  color:var(--muted);
  letter-spacing:.05em;
  transition:border-color .3s, color .3s, background .3s;
}
.abo-step-circle.active {
  border-color:var(--green);
  color:var(--green);
  background:rgba(37,129,196,.08);
}
.abo-step h4 {
  font-family:var(--fh);
  font-weight:700;
  font-size:1rem;
  color:var(--white);
  margin-bottom:.5rem;
}
.abo-step p {
  font-family:var(--fb);
  font-size:.85rem;
  line-height:1.65;
  color:var(--muted);
}

/* Pakete */
.abo-pricing {
  padding:8rem 3rem;
  max-width:1380px;
  margin:0 auto;
}
.abo-toggle {
  display:inline-flex;
  background:var(--s1);
  border:1px solid var(--sep);
  border-radius:100px;
  padding:4px;
  gap:4px;
  margin-bottom:4rem;
}
.abo-toggle-btn {
  background:none;
  border:none;
  color:var(--muted);
  font-family:var(--fb);
  font-size:.75rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  padding:.6rem 1.4rem;
  border-radius:100px;
  cursor:pointer;
  transition:background .25s, color .25s;
  display:flex;
  align-items:center;
  gap:.5rem;
}
.abo-toggle-btn.active {
  background:var(--green);
  color:var(--bg);
  font-weight:700;
}
.abo-toggle-badge {
  background:rgba(37,129,196,.2);
  color:var(--green);
  font-size:.55rem;
  padding:.15rem .5rem;
  border-radius:100px;
  letter-spacing:.1em;
}
.abo-toggle-btn.active .abo-toggle-badge {
  background:rgba(0,0,0,.2);
  color:var(--bg);
}
.abo-pricing-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.abo-price-card {
  background:var(--s1);
  border:1px solid var(--sep);
  border-radius:8px;
  padding:2.5rem;
  display:flex;
  flex-direction:column;
  gap:1rem;
  transition:border-color .3s, transform .3s;
}
.abo-price-card:hover { border-color:rgba(37,129,196,.25); transform:translateY(-4px) }
.abo-price-card.featured {
  border-color:rgba(37,129,196,.4);
  background:linear-gradient(135deg, rgba(37,129,196,.06) 0%, var(--s1) 100%);
  position:relative;
}
.abo-price-card.featured::before {
  content:'EMPFOHLEN';
  position:absolute;
  top:-12px;
  left:50%;
  transform:translateX(-50%);
  background:var(--green);
  color:var(--bg);
  font-family:var(--fh);
  font-weight:900;
  font-size:.5rem;
  letter-spacing:.25em;
  padding:.3rem .9rem;
  border-radius:100px;
}
.abo-price-name {
  font-family:var(--fh);
  font-weight:900;
  font-size:1.1rem;
  color:var(--white);
  letter-spacing:.08em;
}
.abo-price-sub {
  font-family:var(--fb);
  font-size:.78rem;
  color:var(--muted);
  margin-top:-.5rem;
}
.abo-price-amount {
  display:flex;
  align-items:baseline;
  gap:.4rem;
  margin:.5rem 0;
}
.abo-price-big {
  font-family:var(--fh);
  font-weight:900;
  font-size:3rem;
  color:var(--white);
  line-height:1;
  letter-spacing:-.02em;
}
.abo-price-unit {
  font-family:var(--fb);
  font-size:.8rem;
  color:var(--muted);
}
.abo-price-saving {
  font-family:var(--fb);
  font-size:.75rem;
  color:var(--green);
  min-height:1.2em;
}
.abo-price-divider {
  height:1px;
  background:var(--sep);
  margin:.5rem 0;
}
.abo-price-features {
  display:flex;
  flex-direction:column;
  gap:.7rem;
  flex:1;
}
.abo-price-features li {
  font-family:var(--fb);
  font-size:.88rem;
  color:var(--muted);
  display:flex;
  align-items:flex-start;
  gap:.6rem;
}
.abo-feat-arrow { color:var(--green); flex-shrink:0; font-weight:700 }
.abo-price-cta {
  display:block;
  text-align:center;
  padding:.85rem 1.5rem;
  border:1px solid var(--sep);
  border-radius:100px;
  font-family:var(--fb);
  font-weight:700;
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--muted);
  transition:border-color .3s, color .3s, background .3s;
  margin-top:.5rem;
}
.abo-price-cta:hover { border-color:var(--green); color:var(--green) }
.abo-price-card.featured .abo-price-cta {
  background:var(--green);
  border-color:var(--green);
  color:var(--bg);
}
.abo-price-card.featured .abo-price-cta:hover { opacity:.85 }

/* Warum */
.abo-why {
  background:var(--s1);
  border-top:1px solid var(--sep);
  border-bottom:1px solid var(--sep);
  padding:8rem 3rem;
}
.abo-why-inner { max-width:1380px; margin:0 auto }
.abo-why-grid {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.5rem;
  margin-top:4rem;
}
.abo-why-card {
  background:var(--bg);
  border:1px solid var(--sep);
  border-radius:8px;
  padding:2.5rem;
  display:flex;
  gap:1.5rem;
  align-items:flex-start;
  transition:border-color .3s, transform .3s;
}
.abo-why-card:hover { border-color:rgba(37,129,196,.2); transform:translateY(-3px) }
.abo-why-icon {
  font-size:1.8rem;
  flex-shrink:0;
  line-height:1;
}
.abo-why-card h3 {
  font-family:var(--fh);
  font-weight:700;
  font-size:1.2rem;
  color:var(--white);
  margin-bottom:.5rem;
  letter-spacing:-.01em;
}
.abo-why-card p {
  font-family:var(--fb);
  font-size:.9rem;
  line-height:1.75;
  color:var(--muted);
}

/* Testimonial */
.abo-testimonial {
  padding:8rem 3rem;
  text-align:center;
  max-width:900px;
  margin:0 auto;
}
.abo-testimonial-quote {
  font-family:var(--fh);
  font-weight:700;
  font-size:clamp(1.5rem,3vw,2.5rem);
  line-height:1.3;
  color:var(--white);
  letter-spacing:-.02em;
  margin-bottom:2rem;
}
.abo-testimonial-quote strong { color:var(--green); font-weight:900 }
.abo-testimonial-author {
  font-family:var(--fb);
  font-size:.72rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}

/* Kontakt Abo */
.abo-contact {
  padding:8rem 0;
  border-top:1px solid var(--sep);
}
.abo-contact-inner {
  max-width:1380px;
  margin:0 auto;
  padding:0 3rem;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7rem;
  align-items:start;
}
.abo-form-title {
  font-family:var(--fh);
  font-weight:700;
  font-size:1.2rem;
  color:var(--white);
  letter-spacing:-.01em;
  margin-bottom:2rem;
  padding-bottom:1rem;
  border-bottom:1px solid var(--sep);
}
.abo-form {
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.abo-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.abo-field { display:flex; flex-direction:column; gap:.5rem }
.abo-field label {
  font-family:var(--fb);
  font-size:.62rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--muted);
}
.abo-field input, .abo-field select, .abo-field textarea {
  background:var(--s2);
  border:1px solid rgba(255,255,255,.13);
  border-radius:6px;
  padding:.9rem 1.1rem;
  color:var(--white);
  font-family:var(--fb);
  font-size:.95rem;
  outline:none;
  width:100%;
  transition:border-color .25s, box-shadow .25s;
}
.abo-field input, .abo-field textarea {
  appearance:none; -webkit-appearance:none;
}
.abo-field select {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
}
.abo-field input:focus, .abo-field select:focus, .abo-field textarea:focus {
  border-color:rgba(37,129,196,.5);
  box-shadow:0 0 0 3px rgba(37,129,196,.09);
}
.abo-field select option { background:var(--s2) }
.abo-field textarea { min-height:120px; resize:vertical }

/* Responsive Abo */
@media(max-width:1100px) {
  .abo-hero-stats { grid-template-columns:repeat(2,1fr) }
  .abo-pricing-grid { grid-template-columns:1fr; max-width:520px; margin-left:auto; margin-right:auto }
  .abo-contact-inner { grid-template-columns:1fr; gap:4rem }
  .abo-process-steps { grid-template-columns:repeat(3,1fr) }
  .abo-process-steps::before { display:none }
}
@media(max-width:768px) {
  .abo-hero { padding:6rem 1.5rem 5rem }
  .abo-hero-h1 { font-size:clamp(2.8rem,12vw,5rem) }
  .abo-hero-stats { grid-template-columns:repeat(2,1fr); margin-top:3rem }
  .abo-problem, .abo-pricing, .abo-testimonial { padding:5rem 1.5rem }
  .abo-process { padding:5rem 1.5rem }
  .abo-why { padding:5rem 1.5rem }
  .abo-contact { padding:5rem 0 }
  .abo-contact-inner { padding:0 1.5rem }
  .abo-problem-grid { grid-template-columns:1fr }
  .abo-why-grid { grid-template-columns:1fr }
  .abo-form-row { grid-template-columns:1fr }
  .abo-process-steps { grid-template-columns:repeat(2,1fr) }
  .abo-pricing-grid { max-width:100% }
  .abo-testimonial-quote { font-size:1.2rem }
  .cbj-svc-abo { grid-template-columns:60px 1fr; }
  .cbj-svc-abo-arrow { display:none }
}
@media(max-width:480px) {
  .abo-hero-stats { grid-template-columns:repeat(2,1fr) }
  .abo-section-title { font-size:2.2rem }
  .abo-toggle { flex-direction:column; align-items:stretch }
  .abo-toggle-btn { justify-content:center }
}

/* ── CLIENTS ── */
.cbj-clients { padding:8rem 0; background:var(--s1);
  border-top:1px solid var(--sep); border-bottom:1px solid var(--sep) }
.cbj-clients-head { padding:0 3rem 4rem; max-width:1380px; margin:0 auto }
.cbj-carousel-wrap { position:relative; overflow:hidden }
.cbj-carousel-wrap::before, .cbj-carousel-wrap::after { content:''; position:absolute;
  top:0; bottom:0; width:120px; z-index:2; pointer-events:none }
.cbj-carousel-wrap::before { left:0;  background:linear-gradient(to right, var(--s1), transparent) }
.cbj-carousel-wrap::after  { right:0; background:linear-gradient(to left,  var(--s1), transparent) }
.cbj-clients-carousel { display:flex; width:max-content; gap:14px; padding:4px 0;
  animation:cbj-carousel 32s linear infinite }
.cbj-clients-carousel:hover { animation-play-state:paused }
@keyframes cbj-carousel { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.cbj-client-card { width:260px; flex-shrink:0; background:var(--s2);
  border:1px solid var(--sep); border-radius:6px; padding:2rem 1.8rem;
  display:flex; flex-direction:column; gap:.9rem;
  transition:border-color .3s, transform .3s }
.cbj-client-card:hover { border-color:rgba(37,129,196,.2); transform:translateY(-3px) }
.cbj-client-top { display:flex; align-items:center; gap:.5rem }
.cbj-client-dot { width:6px; height:6px; background:var(--green); border-radius:50%; flex-shrink:0 }
.cbj-client-industry { font-family:var(--fb); font-size:.58rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--muted) }
.cbj-client-name { font-family:var(--fh); font-weight:700; font-size:1.2rem;
  color:var(--white); letter-spacing:-.01em; line-height:1.1 }
.cbj-client-quote { font-family:var(--fb); font-size:.85rem; line-height:1.65;
  color:var(--muted); font-style:italic;
  border-left:2px solid var(--green); padding-left:.8rem }

/* ── ABOUT ── */
.cbj-about { display:grid; grid-template-columns:1fr 1fr; gap:7rem;
  align-items:center; max-width:1380px; margin:0 auto; padding:9rem 3rem }
.cbj-about-visual { position:relative }
.cbj-about-visual img { width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:4px;
  filter:grayscale(70%) brightness(.75);
  transition:filter .7s var(--ease), transform .7s var(--ease) }
.cbj-about-visual:hover img { filter:grayscale(20%) brightness(.9); transform:scale(1.02) }
.cbj-about-badge { position:absolute; bottom:2rem; right:-1.8rem;
  background:var(--bg); border:1px solid var(--sep); border-radius:6px;
  padding:1.3rem 1.6rem; display:flex; flex-direction:column; gap:.25rem }
.cbj-badge-num { font-family:var(--fh); font-weight:900; font-size:2.4rem;
  line-height:1; color:var(--white); letter-spacing:-.02em }
.cbj-badge-num em { color:var(--green); font-style:normal }
.cbj-badge-txt { font-family:var(--fb); font-size:.6rem; letter-spacing:.2em;
  text-transform:uppercase; color:var(--muted) }
.cbj-about-text { display:flex; flex-direction:column; gap:1.2rem }
.cbj-about-body { font-family:var(--fb); font-size:1rem; line-height:1.85; color:var(--muted) }
.cbj-about-body strong { color:var(--white); font-weight:400 }

/* ── SHOWREEL ── */
.cbj-showreel { position:relative; overflow:hidden; padding:10rem 3rem; text-align:center;
  background:var(--s1); border-top:1px solid var(--sep) }
.cbj-showreel-bg { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  font-family:var(--fh); font-weight:900; font-size:clamp(6rem,17vw,17rem);
  white-space:nowrap; letter-spacing:-.04em;
  color:rgba(255,255,255,.02); pointer-events:none; user-select:none }
.cbj-showreel-content { position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:3rem }
.cbj-showreel-title { font-family:var(--fh); font-weight:900;
  font-size:clamp(3.5rem,9vw,9.5rem); line-height:.9; letter-spacing:-.03em; color:var(--white) }
.cbj-showreel-title em { color:var(--green); font-style:normal; display:block }
.cbj-play-btn { display:inline-flex; align-items:center; gap:1.2rem;
  padding:1rem 2.5rem; border:1px solid rgba(37,129,196,.3); color:var(--white);
  border-radius:100px; font-family:var(--fb); font-size:.78rem;
  letter-spacing:.16em; text-transform:uppercase;
  transition:background .3s, border-color .3s, color .3s }
.cbj-play-icon { width:36px; height:36px; background:var(--green); border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  transition:transform .3s var(--ease) }
.cbj-play-icon svg { width:12px; height:12px; fill:var(--bg) }
.cbj-play-btn:hover { background:var(--glow); border-color:var(--green); color:var(--green) }
.cbj-play-btn:hover .cbj-play-icon { transform:scale(1.12) }

/* ── CONTACT ── */
/* altes .cbj-contact bleibt für Rückwärtskompatibilität */
.cbj-contact { padding:9rem 0; border-top:1px solid var(--sep) }
.cbj-contact-inner { max-width:1380px; margin:0 auto; padding:0 3rem;
  display:grid; grid-template-columns:1fr 1fr; gap:7rem; align-items:start }
.cbj-contact-title { font-family:var(--fh); font-weight:900;
  font-size:clamp(2.8rem,5vw,5rem); line-height:.93; letter-spacing:-.025em;
  color:var(--white); margin:1.2rem 0 1.5rem }
.cbj-contact-title em { color:var(--green); font-style:normal }
.cbj-contact-sub { font-family:var(--fb); font-size:1rem; line-height:1.8;
  color:var(--muted); margin-bottom:2rem }
.cbj-detail-label { display:block; font-family:var(--fb); font-size:.6rem;
  letter-spacing:.22em; text-transform:uppercase; color:var(--green); margin-bottom:.3rem }
.cbj-detail-val { font-family:var(--fh); font-weight:700; font-size:1.1rem;
  color:var(--white); transition:color .25s }
a.cbj-detail-val:hover { color:var(--green) }

/* ── CTA-Block Hauptseite (ersetzt Formular) ── */
.cbj-contact-cta { padding:9rem 0; border-top:1px solid var(--sep) }
.cbj-contact-cta-inner {
  max-width:1380px; margin:0 auto; padding:0 3rem;
  display:grid; grid-template-columns:1fr 1fr; gap:7rem; align-items:center;
}
.cbj-contact-cta-right { display:flex; flex-direction:column; gap:2rem }
.cbj-contact-cta-btn {
  display:flex; align-items:center; justify-content:space-between;
  gap:2rem; padding:2rem 2.5rem;
  border:1px solid var(--sep); border-radius:8px;
  background:var(--s1);
  transition:border-color .3s, background .3s, transform .3s var(--ease);
}
.cbj-contact-cta-btn:hover {
  border-color:var(--green); background:var(--glow);
  transform:translateY(-3px);
}
.cbj-contact-cta-btn-text { display:flex; flex-direction:column; gap:.4rem }
.cbj-contact-cta-btn-label {
  font-family:var(--fh); font-weight:900; font-size:1.6rem;
  color:var(--white); letter-spacing:-.02em;
  transition:color .3s;
}
.cbj-contact-cta-btn:hover .cbj-contact-cta-btn-label { color:var(--green) }
.cbj-contact-cta-btn-sub {
  font-family:var(--fb); font-size:.72rem;
  letter-spacing:.1em; color:var(--muted);
}
.cbj-contact-cta-btn svg {
  width:32px; height:32px; color:var(--muted); flex-shrink:0;
  transition:transform .3s var(--ease), color .3s;
}
.cbj-contact-cta-btn:hover svg { transform:translateX(6px) rotate(-45deg); color:var(--green) }
.cbj-contact-cta-meta {
  display:flex; gap:3rem; padding-top:1.5rem;
  border-top:1px solid var(--sep);
}

/* ── PAGE TEMPLATE (Impressum, Datenschutz, etc.) ── */
.cbj-page-main { padding-top:68px }
.cbj-page-hero { padding:6rem 3rem 4rem; border-bottom:1px solid var(--sep) }
.cbj-page-hero-inner { max-width:800px; margin:0 auto }
.cbj-page-title { font-family:var(--fh); font-weight:900;
  font-size:clamp(3rem,7vw,7rem); line-height:.9; letter-spacing:-.03em; color:var(--white) }
.cbj-page-content { padding:5rem 3rem 8rem }
.cbj-page-content-inner { max-width:800px; margin:0 auto }

/* Prose styles for page content */
.cbj-page-content-inner h2 { font-family:var(--fh); font-weight:700;
  font-size:1.6rem; color:var(--white); margin:3rem 0 1rem; letter-spacing:-.01em }
.cbj-page-content-inner h3 { font-family:var(--fh); font-weight:700;
  font-size:1.2rem; color:var(--white); margin:2rem 0 .8rem }
.cbj-page-content-inner p { font-family:var(--fb); font-size:1rem;
  line-height:1.85; color:var(--muted); margin-bottom:1.2rem }
.cbj-page-content-inner p strong { color:var(--white); font-weight:400 }
.cbj-page-content-inner a { color:var(--green); text-decoration:underline;
  text-underline-offset:3px; transition:opacity .2s }
.cbj-page-content-inner a:hover { opacity:.75 }
.cbj-page-content-inner ul, .cbj-page-content-inner ol { padding-left:1.5rem;
  margin-bottom:1.2rem }
.cbj-page-content-inner li { font-family:var(--fb); font-size:1rem;
  line-height:1.8; color:var(--muted); margin-bottom:.4rem }
.cbj-page-content-inner hr { border:none; border-top:1px solid var(--sep); margin:3rem 0 }

/* ── FOOTER ── */
.cbj-footer { background:var(--s1); border-top:1px solid var(--sep); padding:3.5rem 3rem 2.5rem }
.cbj-footer-inner { max-width:1380px; margin:0 auto; display:flex;
  align-items:flex-start; justify-content:space-between; flex-wrap:wrap; gap:2rem;
  padding-bottom:2.5rem; border-bottom:1px solid var(--sep) }
.cbj-footer-tag { font-family:var(--fh); font-weight:700; font-size:.8rem;
  color:var(--muted); margin-top:.4rem }
.cbj-footer-links { display:flex; gap:2rem }
.cbj-footer-links a { font-family:var(--fb); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--muted); transition:color .25s }
.cbj-footer-links a:hover { color:var(--white) }
.cbj-footer-bottom { max-width:1380px; margin:2rem auto 0;
  display:flex; align-items:center; justify-content:space-between; gap:1rem }
.cbj-footer-bottom span { font-family:var(--fb); font-size:.65rem;
  letter-spacing:.08em; color:rgba(255,255,255,.2) }
.cbj-footer-dot { width:6px; height:6px; background:var(--green); border-radius:50%;
  animation:cbj-blink 2.8s ease-in-out infinite }
@keyframes cbj-blink { 0%,100%{opacity:1} 50%{opacity:.15} }

/* ── REVEAL ── */
.cbj-reveal { opacity:0; transform:translateY(26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0s) }
.cbj-reveal.on { opacity:1; transform:none }
.cbj-reveal-x { opacity:0; transform:translateX(-26px);
  transition:opacity .9s var(--ease), transform .9s var(--ease) }
.cbj-reveal-x.on { opacity:1; transform:none }

@keyframes cbj-up   { from{opacity:0;transform:translateY(22px)} to{opacity:1;transform:none} }
@keyframes cbj-fade { from{opacity:0} to{opacity:1} }

/* ── RESPONSIVE ── */
@media(max-width:1100px) {
  .cbj-hero-content { grid-template-columns:1fr }
  .cbj-hero-right { display:none }
  .cbj-services-head { grid-template-columns:1fr }
  .cbj-about { grid-template-columns:1fr; gap:4rem; padding:6rem 3rem }
  .cbj-about-badge { right:1rem }
  .cbj-contact-inner { grid-template-columns:1fr; gap:4rem }
  .cbj-contact-cta-inner { grid-template-columns:1fr; gap:4rem }
}
@media(max-width:768px) {
  .cbj-header { padding:0 1.5rem }
  .cbj-burger { display:flex }
  .cbj-nav { position:fixed; top:68px; left:0; right:0; background:var(--bg);
    border-bottom:1px solid var(--sep); padding:1.5rem;
    transform:translateY(-110%); opacity:0; pointer-events:none;
    transition:transform .4s var(--ease), opacity .3s }
  .cbj-nav.open { transform:translateY(0); opacity:1; pointer-events:all }
  .cbj-nav-list { flex-direction:column; align-items:flex-start; gap:.2rem }
  .cbj-nav-list a { font-size:.85rem; padding:.75rem 1rem; width:100% }
  .cbj-nav-cta { display:inline-flex; width:auto !important; max-width:100% !important; box-sizing:border-box }
  .cbj-hero-content { padding:0 1.5rem 5rem }
  .cbj-services { padding:5rem 1.5rem }
  .cbj-svc-row { grid-template-columns:48px 1fr 44px; gap:1rem }
  .cbj-clients-head { padding:0 1.5rem 3rem }
  .cbj-about { padding:5rem 1.5rem }
  .cbj-about-badge { position:static; margin-top:1.5rem; align-self:flex-start }
  .cbj-showreel { padding:6rem 1.5rem }
  .cbj-contact { padding:6rem 0 }
  .cbj-contact-inner { padding:0 1.5rem }
  .cbj-form-row { grid-template-columns:1fr }
  .cbj-footer { padding:2.5rem 1.5rem }
  .cbj-footer-inner { flex-direction:column }
  .cbj-page-hero { padding:5rem 1.5rem 3rem }
  .cbj-page-content { padding:3rem 1.5rem 5rem }
  /* Kontakt-CTA auf Mobile: einspaltiger Stack */
  .cbj-contact-cta { padding:5rem 0 }
  .cbj-contact-cta-inner { padding:0 1.5rem; grid-template-columns:1fr; gap:3rem }
  .cbj-contact-cta-meta { flex-wrap:wrap; gap:2rem }
}

/* ════════════════════════════════════════════════════════════
   SHOWREEL & PORTFOLIO-SEITE
   ════════════════════════════════════════════════════════════ */
.sr-main { padding-top:68px }

/* ── Hero ── */
.sr-hero {
  position:relative;
  height:calc(100svh - 68px);
  display:flex; align-items:flex-end;
  overflow:hidden;
}
.sr-hero-bg { position:absolute; inset:0 }
.sr-video { width:100%; height:100%; object-fit:cover; display:block }
.sr-hero-overlay {
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(9,9,9,.9) 0%, rgba(9,9,9,.25) 55%, transparent 100%);
}
.sr-hero-content {
  position:relative; z-index:2;
  padding:0 3rem 5.5rem;
  max-width:1380px; width:100%; margin:0 auto;
}
.sr-title {
  font-family:var(--fh); font-weight:900;
  font-size:clamp(3.5rem,9vw,9rem);
  line-height:.9; letter-spacing:-.03em;
  color:var(--white); margin:.8rem 0 1.5rem;
  opacity:0; animation:cbj-up .8s .3s forwards;
}
.sr-subtitle {
  font-family:var(--fb); font-size:1.05rem;
  color:var(--muted); max-width:550px; line-height:1.75;
  margin-bottom:2.5rem;
  opacity:0; animation:cbj-up .7s .5s forwards;
}
.sr-controls {
  display:flex; gap:.75rem; flex-wrap:wrap; align-items:center;
  opacity:0; animation:cbj-up .7s .65s forwards;
}
.sr-ctrl-btn {
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.65rem 1.2rem; border:1px solid var(--sep);
  background:rgba(9,9,9,.65); backdrop-filter:blur(10px);
  color:var(--muted); border-radius:100px;
  font-family:var(--fb); font-size:.7rem;
  letter-spacing:.12em; text-transform:uppercase;
  transition:border-color .25s, color .25s;
}
.sr-ctrl-btn:hover { border-color:rgba(255,255,255,.3); color:var(--white) }
.sr-ctrl-btn svg { width:14px; height:14px; flex-shrink:0 }
.sr-ctrl-label { display:inline }
.sr-scroll-hint {
  position:absolute; bottom:2.2rem; right:3rem; z-index:3;
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--fb); font-size:.6rem;
  letter-spacing:.25em; text-transform:uppercase; color:var(--muted);
}

/* ── Stats-Bar ── */
.sr-stats-bar {
  background:var(--s1);
  border-top:1px solid var(--sep); border-bottom:1px solid var(--sep);
}
.sr-stats-inner {
  max-width:1380px; margin:0 auto;
  padding:2.5rem 3rem;
  display:grid; grid-template-columns:repeat(4,1fr); gap:2rem;
}
.sr-stat { display:flex; flex-direction:column; gap:.35rem }
.sr-stat-num {
  font-family:var(--fh); font-weight:900;
  font-size:2.2rem; color:var(--white); letter-spacing:-.02em; line-height:1;
}
.sr-stat-g { color:var(--green) }
.sr-stat-label {
  font-family:var(--fb); font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
}

/* ── Projekte-Grid ── */
.sr-projects {
  padding:8rem 3rem;
  max-width:1380px; margin:0 auto;
}
.sr-projects-head {
  display:grid; grid-template-columns:1fr 1fr;
  gap:4rem; margin-bottom:5rem; align-items:end;
}
.sr-projects-intro {
  font-family:var(--fb); font-size:1rem;
  line-height:1.8; color:var(--muted);
  align-self:flex-end;
}
/* ── Portfolio: Logo-Karten ── */
.sr-projects-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1.5rem;
}
.sr-project-card {
  background:var(--s1); border:1px solid var(--sep); border-radius:8px;
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .3s, transform .35s var(--ease);
}
.sr-project-card--clickable { cursor:pointer }
.sr-project-card--clickable:hover {
  border-color:rgba(37,129,196,.3); transform:translateY(-4px);
}

/* Logo-Bereich (obere Hälfte) */
.sr-card-logo-area {
  position:relative;
  display:flex; align-items:center; justify-content:center;
  height:150px; background:var(--s2);
  border-bottom:1px solid var(--sep); overflow:hidden;
}
.sr-card-logo {
  max-height:56px; max-width:65%; width:auto; object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.75; transition:opacity .3s;
}
.sr-project-card--clickable:hover .sr-card-logo { opacity:1 }
.sr-card-wordmark {
  font-family:var(--fh); font-weight:900;
  font-size:clamp(1rem,2.5vw,1.6rem);
  letter-spacing:-.01em; color:var(--white);
  text-align:center; padding:0 1.5rem; line-height:1.15;
  opacity:.65; transition:opacity .3s; word-break:break-word;
}
.sr-project-card--clickable:hover .sr-card-wordmark { opacity:.9 }

/* Play-Badge (nur wenn Medien vorhanden) */
.sr-card-play-badge {
  position:absolute; bottom:.7rem; right:.7rem;
  display:inline-flex; align-items:center; gap:.35rem;
  background:var(--green); color:var(--bg);
  font-family:var(--fb); font-weight:700; font-size:.58rem;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.28rem .65rem .28rem .5rem; border-radius:100px;
  transition:transform .2s;
}
.sr-project-card--clickable:hover .sr-card-play-badge { transform:scale(1.06) }

/* Info-Bereich (untere Hälfte) */
.sr-card-info { padding:1.25rem 1.4rem 1.5rem; flex:1; display:flex; flex-direction:column }
.sr-card-meta {
  display:flex; align-items:center; gap:.5rem; margin-bottom:.55rem;
}
.sr-card-cat {
  font-family:var(--fb); font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--green);
}
.sr-card-year {
  font-family:var(--fb); font-size:.6rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--muted);
}
.sr-card-year::before { content:'·'; margin-right:.5rem; color:var(--muted) }
.sr-card-title {
  font-family:var(--fh); font-weight:700;
  font-size:1.05rem; color:var(--white); margin-bottom:.45rem;
  transition:color .25s;
}
.sr-project-card--clickable:hover .sr-card-title { color:var(--green) }
.sr-card-desc {
  font-family:var(--fb); font-size:.85rem;
  line-height:1.65; color:var(--muted);
}
.sr-projects-hint {
  margin-top:3rem; text-align:center;
  font-family:var(--fb); font-size:.82rem; color:var(--muted);
  border:1px dashed var(--sep); border-radius:4px; padding:1rem;
}

/* ── Lightbox ── */
.sr-lightbox {
  position:fixed; inset:0; z-index:10000;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease);
}
.sr-lightbox--open { opacity:1; pointer-events:all }
.sr-lightbox-overlay {
  position:absolute; inset:0;
  background:rgba(9,9,9,.92);
  backdrop-filter:blur(14px);
}
.sr-lightbox-box {
  position:relative; z-index:1;
  width:min(880px,92vw);
  background:var(--s1); border:1px solid var(--sep); border-radius:8px;
  overflow:hidden;
  transform:translateY(20px);
  transition:transform .35s var(--ease);
}
.sr-lightbox--open .sr-lightbox-box { transform:translateY(0) }
.sr-lightbox-head {
  display:flex; align-items:center; justify-content:space-between;
  padding:.9rem 1.25rem; border-bottom:1px solid var(--sep);
}
.sr-lightbox-title {
  font-family:var(--fh); font-weight:700;
  font-size:1rem; letter-spacing:-.01em; color:var(--white);
}
.sr-lightbox-close {
  background:none; border:1px solid var(--sep);
  color:var(--muted); width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
  border-radius:4px; flex-shrink:0;
  transition:color .2s, border-color .2s, background .2s;
}
.sr-lightbox-close:hover { color:var(--white); border-color:rgba(255,255,255,.2); background:var(--s2) }
.sr-lightbox-media { padding:1.25rem; overflow:hidden }
.sr-lightbox-media video { width:100%; border-radius:4px; max-height:68vh }
.sr-lightbox-media img  { width:100%; height:auto; border-radius:4px; max-height:75vh; object-fit:contain }
.sr-lb-iframe-wrap { position:relative; padding-bottom:56.25%; height:0; overflow:hidden; border-radius:4px }
.sr-lb-iframe-wrap iframe { position:absolute; inset:0; width:100%; height:100%; border:none }

/* ── Leistungen ── */
.sr-leistungen {
  background:var(--s1);
  border-top:1px solid var(--sep); border-bottom:1px solid var(--sep);
  padding:8rem 3rem;
}
.sr-leistungen-inner {
  max-width:1380px; margin:0 auto;
  display:grid; grid-template-columns:1fr 1.2fr; gap:8rem; align-items:start;
}
.sr-leistungen-list { display:flex; flex-direction:column }
.sr-l-item {
  display:grid; grid-template-columns:52px 1fr; gap:1.5rem;
  padding:2rem 0; border-top:1px solid var(--sep);
  transition:background .3s;
}
.sr-l-item:last-child { border-bottom:1px solid var(--sep) }
.sr-l-item:hover { background:rgba(255,255,255,.015) }
.sr-l-num {
  font-family:var(--fh); font-weight:900;
  font-size:.9rem; color:var(--muted); letter-spacing:.1em;
  transition:color .3s; padding-top:.15rem;
}
.sr-l-item:hover .sr-l-num { color:var(--green) }
.sr-l-title {
  font-family:var(--fh); font-weight:700;
  font-size:1.2rem; color:var(--white); margin-bottom:.4rem;
  transition:color .3s;
}
.sr-l-item:hover .sr-l-title { color:var(--green) }
.sr-l-desc {
  font-family:var(--fb); font-size:.9rem; line-height:1.7; color:var(--muted);
}

/* ── CTA ── */
.sr-cta {
  padding:9rem 3rem; text-align:center;
}
.sr-cta-inner { max-width:720px; margin:0 auto }
.sr-cta-title {
  font-family:var(--fh); font-weight:900;
  font-size:clamp(2.8rem,5.5vw,5.5rem);
  line-height:.93; letter-spacing:-.025em; color:var(--white);
}
.sr-cta-title em { font-style:normal; color:var(--green) }
.sr-cta-sub {
  font-family:var(--fb); font-size:1rem; color:var(--muted);
  margin-top:1.2rem; line-height:1.7;
}
.sr-cta-btns {
  display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.5rem;
}

/* ── Responsive ── */
@media(max-width:1100px) {
  .sr-stats-inner { grid-template-columns:repeat(2,1fr) }
  .sr-projects-head { grid-template-columns:1fr }
  .sr-projects-grid { grid-template-columns:repeat(2,1fr) }
  .sr-leistungen-inner { grid-template-columns:1fr; gap:4rem }
}
@media(max-width:768px) {
  .sr-hero-content { padding:0 1.5rem 4.5rem }
  .sr-title { font-size:clamp(2.8rem,12vw,5rem) }
  .sr-scroll-hint { display:none }
  .sr-stats-inner { grid-template-columns:repeat(2,1fr); padding:2rem 1.5rem }
  .sr-projects { padding:5rem 1.5rem }
  .sr-projects-grid { grid-template-columns:1fr }
  .sr-leistungen { padding:5rem 1.5rem }
  .sr-cta { padding:5rem 1.5rem }
}


/* ════════════════════════════════════════════════════════════
   KONTAKTSEITE
   ════════════════════════════════════════════════════════════ */
.kon-main { padding-top:68px }

/* ── Hero ── */
.kon-hero {
  position:relative;
  min-height:70svh;
  display:flex; align-items:center;
  padding:8rem 3rem 7rem;
  overflow:hidden;
  border-bottom:1px solid var(--sep);
}
.kon-hero-orb {
  position:absolute;
  width:600px; height:600px; border-radius:50%;
  background:radial-gradient(circle, rgba(37,129,196,.06) 0%, transparent 70%);
  top:50%; right:-5%; transform:translateY(-50%);
  pointer-events:none;
}
.kon-hero-inner {
  position:relative; z-index:2;
  max-width:1380px; width:100%; margin:0 auto;
}
.kon-hero-title {
  font-family:var(--fh); font-weight:900;
  font-size:clamp(3.5rem,9vw,9rem); line-height:.9;
  letter-spacing:-.03em; color:var(--white);
  margin:.8rem 0 1.8rem;
  opacity:0; animation:cbj-up .8s .25s forwards;
}
.kon-hero-title em { font-style:normal; color:var(--green) }
.kon-hero-sub {
  font-family:var(--fb); font-size:1.05rem;
  color:var(--muted); line-height:1.8; max-width:560px;
  margin-bottom:2.5rem;
  opacity:0; animation:cbj-up .7s .4s forwards;
}
.kon-hero-actions {
  display:flex; gap:1rem; flex-wrap:wrap;
  opacity:0; animation:cbj-up .7s .55s forwards;
}
.kon-hero-scroll {
  position:absolute; bottom:2rem; right:3rem;
  display:flex; align-items:center; gap:.75rem;
  font-family:var(--fb); font-size:.6rem;
  letter-spacing:.25em; text-transform:uppercase; color:var(--muted);
}

/* ── Trust-Bar ── */
.kon-trust {
  background:var(--s1);
  border-bottom:1px solid var(--sep);
}
.kon-trust-inner {
  max-width:1380px; margin:0 auto;
  padding:2.5rem 3rem;
  display:flex; align-items:center; gap:0;
}
.kon-trust-item {
  flex:1; display:flex; flex-direction:column; gap:.35rem;
  padding:0 2rem;
}
.kon-trust-item:first-child { padding-left:0 }
.kon-trust-item:last-child  { padding-right:0 }
.kon-trust-num {
  font-family:var(--fh); font-weight:900;
  font-size:2rem; color:var(--white); line-height:1; letter-spacing:-.02em;
}
.kon-trust-label {
  font-family:var(--fb); font-size:.6rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--muted);
}
.kon-trust-divider {
  width:1px; height:48px; background:var(--sep); flex-shrink:0;
}

/* ── Hauptbereich ── */
.kon-body { padding:7rem 3rem; max-width:1380px; margin:0 auto }
.kon-body-inner {
  display:grid; grid-template-columns:1fr 1.35fr;
  gap:8rem; align-items:start;
}

/* ── Info-Spalte ── */
.kon-info { display:flex; flex-direction:column; gap:5rem }
.kon-info-title {
  font-family:var(--fh); font-weight:900;
  font-size:clamp(2rem,3.5vw,3rem); line-height:.95;
  letter-spacing:-.025em; color:var(--white);
  margin:.6rem 0 2rem;
}
.kon-info-title em { font-style:normal; color:var(--green) }

.kon-contact-list { display:flex; flex-direction:column; gap:.75rem }
.kon-contact-item {
  display:flex; align-items:center; gap:1.2rem;
  padding:1.2rem 1.4rem;
  border:1px solid var(--sep); border-radius:6px;
  background:var(--s1);
  transition:border-color .25s, transform .25s var(--ease);
}
.kon-contact-item:hover { border-color:rgba(37,129,196,.2); transform:translateX(4px) }
.kon-contact-icon {
  width:40px; height:40px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid var(--sep); border-radius:6px;
  color:var(--green);
  transition:background .25s, border-color .25s;
}
.kon-contact-item:hover .kon-contact-icon { background:var(--glow); border-color:var(--green) }
.kon-contact-icon svg { width:18px; height:18px }
.kon-contact-label {
  font-family:var(--fb); font-size:.6rem;
  letter-spacing:.2em; text-transform:uppercase; color:var(--muted);
  margin-bottom:.2rem;
}
.kon-contact-val {
  font-family:var(--fb); font-size:.95rem; color:var(--white);
  transition:color .25s;
}
.kon-contact-item:hover .kon-contact-val { color:var(--green) }

/* ── FAQ ── */
.kon-faq { display:flex; flex-direction:column; gap:1.5rem }
.kon-faq-heading {
  font-family:var(--fh); font-weight:900;
  font-size:clamp(1.8rem,3vw,2.5rem); line-height:.95;
  letter-spacing:-.025em; color:var(--white);
  margin:.6rem 0 .5rem;
}
.kon-faq-heading em { font-style:normal; color:var(--green) }
.kon-faq-list { display:flex; flex-direction:column; gap:.5rem }
.kon-faq-item {
  border:1px solid var(--sep); border-radius:6px; overflow:hidden;
  transition:border-color .25s;
}
.kon-faq-item[open] { border-color:rgba(37,129,196,.3) }
.kon-faq-item summary {
  padding:1.1rem 1.4rem;
  font-family:var(--fb); font-size:.92rem; color:var(--white);
  list-style:none; display:flex; align-items:center;
  justify-content:space-between; gap:1rem;
}
.kon-faq-item summary::-webkit-details-marker { display:none }
.kon-faq-item summary::after {
  content:'+'; font-size:1.3rem; color:var(--green);
  flex-shrink:0; line-height:1;
  transition:transform .25s var(--ease);
}
.kon-faq-item[open] summary::after { transform:rotate(45deg) }
.kon-faq-item p {
  padding:.5rem 1.4rem 1.2rem;
  font-family:var(--fb); font-size:.88rem;
  color:var(--muted); line-height:1.75;
}

/* ── Formular ── */
.kon-form-wrap {
  position:sticky; top:90px;
  background:var(--s1); border:1px solid var(--sep);
  border-radius:8px; padding:3rem;
}
.kon-form-header { margin-bottom:2.2rem; padding-bottom:2rem; border-bottom:1px solid var(--sep) }
.kon-form-title {
  font-family:var(--fh); font-weight:700; font-size:1.5rem;
  color:var(--white); margin-bottom:.5rem; letter-spacing:-.01em;
}
.kon-form-sub {
  font-family:var(--fb); font-size:.9rem; color:var(--muted); line-height:1.6;
}
.kon-success {
  display:flex; align-items:center; gap:.75rem;
  background:rgba(37,129,196,.08); border:1px solid rgba(37,129,196,.25);
  border-radius:6px; padding:1rem 1.2rem; margin-bottom:1.5rem;
  font-family:var(--fb); font-size:.9rem; color:var(--green);
}
.kon-form { display:flex; flex-direction:column; gap:1.1rem }
.kon-form-row { display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.kon-field { display:flex; flex-direction:column; gap:.45rem }
.kon-label {
  font-family:var(--fb); font-size:.65rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
}
.kon-input {
  background:var(--s2); border:1px solid rgba(255,255,255,.13);
  border-radius:6px; padding:.9rem 1rem;
  font-family:var(--fb); font-size:.92rem; color:var(--white);
  transition:border-color .25s, box-shadow .25s; width:100%;
}
input.kon-input, textarea.kon-input {
  appearance:none; -webkit-appearance:none;
}
select.kon-input {
  appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  padding-right:2.5rem;
}
.kon-input:focus {
  outline:none; border-color:rgba(37,129,196,.5);
  box-shadow:0 0 0 3px rgba(37,129,196,.09);
}
.kon-input::placeholder { color:rgba(102,102,102,.6) }
.kon-input option { background:var(--s2) }
.kon-textarea { min-height:140px; resize:vertical }
/* ── Datenschutz-Checkbox ──
   .kon-field.kon-check = flex-Row-Container
   Direktes Kind 1 = Checkbox (input oder wpcf7-form-control-wrap)
   Direktes Kind 2 = Textspan (kon-check-span oder label[for])
   → kein Text-Node und kein <a> als direktes Flex-Kind → kein Auseinanderreißen
*/
.kon-check {
  flex-direction: row !important;
  align-items: flex-start;
  gap: .7rem;
}
/* Nativer Checkbox-Input als direktes Kind */
.kon-field.kon-check > input[type="checkbox"] {
  flex-shrink: 0;
  margin-top: .2rem;
  width: 15px; height: 15px;
  accent-color: var(--green);
}
/* CF7: wpcf7-form-control-wrap als direktes Kind */
.kon-field.kon-check > .wpcf7-form-control-wrap {
  flex-shrink: 0 !important;
  width: auto !important;
  display: inline-flex !important;
}
.kon-field.kon-check > .wpcf7-form-control-wrap input[type="checkbox"] {
  display: block;
  width: 15px; height: 15px;
  margin-top: .2rem;
  accent-color: var(--green);
}
/* Text-Span (natives Formular: <label for="...">, CF7: <span class="kon-check-span">) */
.kon-check-span,
.kon-check-label {
  font-family:var(--fb); font-size:.82rem;
  color:var(--muted); line-height:1.6;
  display: block;
}
.kon-check-span a,
.kon-check-label a { color:var(--green); text-decoration:underline; text-underline-offset:2px }
.kon-submit { width:100%; justify-content:center; margin-top:.5rem; font-size:.8rem }
.kon-form-note {
  text-align:center; font-family:var(--fb); font-size:.72rem;
  color:var(--muted); margin-top:.75rem;
}

/* ── Responsive ── */
@media(max-width:1100px) {
  .kon-body-inner { grid-template-columns:1fr; gap:5rem }
  .kon-form-wrap { position:static }
  .kon-trust-inner { flex-wrap:wrap; gap:2rem }
  .kon-trust-divider { display:none }
  .kon-trust-item { flex:0 0 calc(50% - 1rem); padding:0 }
}
@media(max-width:768px) {
  .kon-hero { padding:6rem 1.5rem 5rem; min-height:auto }
  .kon-hero-scroll { display:none }
  .kon-trust-inner { padding:2rem 1.5rem }
  .kon-body { padding:5rem 1.5rem }
  .kon-form-row { grid-template-columns:1fr }
  .kon-form-wrap { padding:1.8rem }
  .kon-trust-item { flex:0 0 100% }
}

/* ═══════════════════════════════════════════════════════════
   CONTACT FORM 7 – Design-Override
   Macht CF7-Felder identisch mit nativen .kon-input / .abo-field Stilen
   ═══════════════════════════════════════════════════════════ */

/* Wrapper-Spans der CF7-Felder auf volle Breite */
.wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

/* Alle Texteingaben, E-Mail, Tel, URL, Number, Select, Textarea */
.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
  width: 100%;
  background: var(--s2);
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 6px;
  padding: .9rem 1rem;
  font-family: var(--fb);
  font-size: .92rem;
  color: var(--white);
  transition: border-color .25s, box-shadow .25s;
}

/* Text-Inputs + Textareas: natives Aussehen entfernen */
.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):not(select) {
  appearance: none;
  -webkit-appearance: none;
}
/* Select: Custom-Pfeil */
.wpcf7-form-control select,
select.wpcf7-form-control {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23666' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus {
  outline: none;
  border-color: rgba(37,129,196,.5);
  box-shadow: 0 0 0 3px rgba(37,129,196,.09);
}

.wpcf7-form-control::placeholder { color: rgba(102,102,102,.6) }
.wpcf7-form-control option { background: var(--s2) }

/* Textarea */
.wpcf7-form-control.wpcf7-textarea {
  min-height: 140px;
  resize: vertical;
}

/* Checkbox / Acceptance */
.wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
  display: flex;
  align-items: flex-start;
  gap: .75rem;
}

.wpcf7-acceptance input[type="checkbox"] {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: .15rem;
  accent-color: var(--green);
  cursor: pointer;
}

.wpcf7-acceptance .wpcf7-list-item-label {
  font-family: var(--fb);
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.5;
}

.wpcf7-acceptance .wpcf7-list-item-label a {
  color: var(--green);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Submit-Button */
.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 2rem;
  background: var(--green);
  color: #000;
  font-family: var(--fb);
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: .04em;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  width: 100%;
  transition: opacity .2s, transform .2s;
}

.wpcf7-submit:hover { opacity: .88; transform: translateY(-2px) }
.wpcf7-submit:disabled { opacity: .5; cursor: not-allowed; transform: none }

/* Spinner (CF7 Loading-Indikator) */
.wpcf7-spinner {
  display: none !important;
}

/* Validierungs-Meldungen */
.wpcf7-not-valid-tip {
  font-family: var(--fb);
  font-size: .75rem;
  color: #ff4d4d;
  margin-top: .3rem;
  display: block;
}

.wpcf7-response-output {
  font-family: var(--fb);
  font-size: .85rem;
  padding: .9rem 1rem;
  border-radius: 4px;
  margin-top: 1rem;
  border: 1px solid;
}

.wpcf7-form.sent .wpcf7-response-output {
  background: rgba(37,129,196,.08);
  border-color: rgba(37,129,196,.3);
  color: var(--green);
}

.wpcf7-form.failed .wpcf7-response-output,
.wpcf7-form.invalid .wpcf7-response-output {
  background: rgba(255,77,77,.08);
  border-color: rgba(255,77,77,.3);
  color: #ff4d4d;
}

/* Abo-Seite: CF7 innerhalb .abo-form-wrap – Felder auf abo-style anpassen */
.abo-contact-section .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]) {
  background: var(--s1);
  border-color: var(--sep);
}

.abo-contact-section .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]):focus {
  border-color: rgba(37,129,196,.4);
  box-shadow: none;
}

/* CF7-Formular: vertikales Layout mit Abständen zwischen den Feldern */
.wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

/* p-Tags die CF7 um Felder wrappt – als abo-field / kon-field stylen */
.wpcf7-form p {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  margin: 0;
}

.wpcf7-form p > label:first-child:not(.wpcf7-list-item-label) {
  font-family: var(--fb);
  font-size: .65rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ── SMOOTH THEME TRANSITION ── */
body, .cbj-header, .cbj-nav, .cbj-footer,
.abo-main, .sr-main, .kon-main,
.cbj-ticker, .cbj-services, .cbj-about, .cbj-contact,
.cbj-svc-row, .cbj-client-card, .abo-problem-card,
.abo-why-card, .kon-contact-item, .kon-form-wrap,
.wpcf7-form-control {
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}

/* ── DARK / LIGHT MODE TOGGLE ── */
#cbj-theme-toggle {
  position: fixed;
  bottom: 1.8rem;
  left: 1.8rem;
  z-index: 99999;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--accent);
  border: none;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer !important;
  box-shadow: 0 4px 20px rgba(37,129,196,.5);
  transition: background .3s, box-shadow .3s, transform .2s;
}
#cbj-theme-toggle:hover {
  transform: scale(1.12);
  box-shadow: 0 6px 28px rgba(37,129,196,.65);
}
#cbj-theme-toggle svg {
  width: 22px;
  height: 22px;
  stroke: #fff;
}
#cbj-theme-toggle .icon-moon { display:block }
#cbj-theme-toggle .icon-sun  { display:none }
[data-theme="light"] #cbj-theme-toggle { background: #555; box-shadow:0 4px 20px rgba(0,0,0,.3) }
[data-theme="light"] #cbj-theme-toggle:hover { box-shadow:0 6px 28px rgba(0,0,0,.45) }
[data-theme="light"] #cbj-theme-toggle .icon-moon { display:none }
[data-theme="light"] #cbj-theme-toggle .icon-sun  { display:block }

/* Light mode overrides for elements with hardcoded dark values */
[data-theme="light"] .cbj-header {
  background: rgba(245,244,240,.0);
}
[data-theme="light"] .cbj-header.stuck {
  background: rgba(245,244,240,.92);
  border-color: rgba(0,0,0,.08);
}
[data-theme="light"] .cbj-hero::after {
  background: linear-gradient(to top, var(--bg) 0%, rgba(245,244,240,.2) 60%, transparent 100%);
}
[data-theme="light"] .abo-hero-orb,
[data-theme="light"] .kon-hero-orb { opacity:.5 }

/* Forms in light mode */
[data-theme="light"] .wpcf7-form-control:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
[data-theme="light"] .kon-input,
[data-theme="light"] .kon-select,
[data-theme="light"] .abo-field {
  background: var(--s2);
  color: var(--white);
  border-color: rgba(0,0,0,.13);
}
[data-theme="light"] .wpcf7-form-control::placeholder { color: rgba(80,80,80,.6) }
[data-theme="light"] .wpcf7-form-control option { background: var(--s2) }

/* Ensure text in process/cards is readable */
[data-theme="light"] .abo-process { background: var(--s1) }
[data-theme="light"] .cbj-ticker  { background: var(--s1) }

/* Burger icon visibility in light mode */
[data-theme="light"] .cbj-burger span { background: var(--white) }

/* Nav-Hintergrund nur auf Mobile setzen (nicht auf Desktop – sonst weißes Rechteck) */
@media(max-width:768px) {
  [data-theme="light"] .cbj-nav,
  [data-theme="light"] .cbj-nav.open { background: var(--bg) }
}

/* Accessibility: sufficient contrast for accent buttons on light bg */
[data-theme="light"] .cbj-nav-cta,
[data-theme="light"] .cbj-btn-green,
[data-theme="light"] .wpcf7-submit {
  color: #fff !important;
}

/* Logo text readability */
[data-theme="light"] .cbj-logo-text { color: var(--white) }

/* Logo invertieren im Light Mode (weißes Logo → dunkel) */
[data-theme="light"] .cbj-logo-img,
[data-theme="light"] .cbj-logo-footer { filter: invert(1) }