.elementor-kit-6{--e-global-color-primary:#0A201F;--e-global-color-secondary:#33433F;--e-global-color-text:#33433F;--e-global-color-accent:#7E8E12;--e-global-color-6566ffd:#C1D236;--e-global-color-959b142:#EC663B;--e-global-color-429c666:#E9E3D5;--e-global-color-bf05353:#F3EFE6;--e-global-typography-primary-font-family:"QUABLO";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"QUABLO";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"Attractive";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Attractive";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1180px;}.e-con{--container-max-width:1180px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* =========================================================
   CP2 – Individuelles CSS  (Elementor → Website-Einstellungen → Individuelles CSS)
   ========================================================= */

/* ---- 1) Fehlende Token-Farbe (Karten) ---- */
:root{--card:#FBF9F3}

/* ---- 2) Sichtbarer Fokusrahmen (Tastatur/Screenreader) ---- */
:focus-visible{outline:3px solid var(--green-deep);outline-offset:2px;border-radius:2px}

/* ---- 3) Header-Trennlinie: eine randlose Linie (kein Doppel) ---- */
header{border-bottom:none !important}
.nav{border-bottom:none !important;position:relative}
.nav::after{content:"";position:absolute;left:calc(50% - 50vw);width:100vw;bottom:0;height:1px;background:var(--line)}
html,body{overflow-x:clip}

/* ---- 4) Buttons: Textfarbe in allen Zuständen halten ---- */
a.btn-fill{color:var(--paper)!important}
a.btn-line{color:var(--ink)!important}

/* ---- 5) Leistungs-Zeilen (Links): Hover hell, kein Unterstrich ---- */
.srow{color:var(--ink)!important;text-decoration:none!important}
.srow:hover,.srow:focus{color:var(--paper)!important}
.srow:hover .de,.srow:focus .de{color:var(--paper)!important}

/* ---- 6) Referenz-Links + „Alle Referenzen" ---- */
.clients a{color:var(--ink)!important}
.clients a:hover{color:var(--green-deep)!important}
.work-cta{color:var(--ink)!important}
.work-cta:hover{color:var(--green-deep)!important}

/* ---- 7) CTA-Pills ---- */
.pill.g{color:var(--ink)!important}
.pill.line{color:var(--paper)!important}
.pill.line:hover{color:var(--ink)!important;background:var(--paper)!important}

/* ---- 8) HERO: volle Höhe, Glow-Puls, Headline & Scroll-Hinweis ---- */
.hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;
      box-sizing:border-box;min-height:calc(100svh - 78px);padding:clamp(64px,8vh,118px) 0 clamp(92px,12vh,118px)}
.hero .glow{will-change:opacity;animation:glowPulse 9s ease-in-out infinite alternate}
@keyframes glowPulse{from{opacity:.78}to{opacity:1}}

.hero h1>span{animation:rise .8s cubic-bezier(.16,1,.3,1) .25s forwards}

@keyframes scrollFade{from{opacity:0}to{opacity:1}}
.hero-scroll{position:absolute;left:50%;bottom:34px;transform:translateX(-50%);display:flex;flex-direction:column;
      align-items:center;gap:6px;color:var(--ink-2);text-decoration:none;font-size:11px;letter-spacing:.18em;
      text-transform:uppercase;font-weight:600;opacity:0;animation:scrollFade .8s ease 1s forwards}
.hero-scroll svg{width:20px;height:20px;animation:scrollBounce 2s ease-in-out infinite}
.hero-scroll:hover{color:var(--ink)}
@keyframes scrollBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(max-width:760px){.hero-scroll{display:none}}

/* ---- 9) Burger + Skip-Link ---- */
.burger{background:transparent!important;border:0!important;border-radius:0!important;padding:0!important;
        box-shadow:none!important;cursor:pointer;-webkit-appearance:none;appearance:none}
.burger span{background:var(--ink)!important}
.nav-toggle{position:absolute;width:1px;height:1px;opacity:0;margin:0}

.skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--ink);color:var(--paper);
           padding:10px 16px;text-decoration:none;border-radius:0 0 8px 0}
.skip-link:focus{left:0}

/* ---- 10) Mobiles Vollbild-Menü (JS-frei, Checkbox-Toggle) ---- */
@media(max-width:820px){
  .burger{display:flex!important;flex-direction:column;gap:5px;z-index:130}

  .menu{position:fixed!important;inset:0!important;z-index:120!important;background:var(--ink)!important;
        display:flex!important;flex-direction:column!important;justify-content:center!important;
        align-items:flex-start!important;gap:4px!important;padding:0 clamp(30px,9vw,60px)!important;
        counter-reset:navi;transform:translateY(-100%);opacity:0;pointer-events:none;
        transition:transform .5s cubic-bezier(.7,0,.2,1),opacity .4s ease}

  .menu a{color:var(--paper)!important;font-family:var(--head)!important;
          font-size:clamp(36px,11vw,58px)!important;font-weight:700!important;letter-spacing:-.02em!important;
          display:flex!important;align-items:baseline;gap:16px;padding:9px 0!important;
          opacity:0;transform:translateY(22px);transition:opacity .45s ease,transform .45s ease,color .2s}
  .menu a::after{display:none!important}

  .menu a::before{content:counter(navi,decimal-leading-zero);counter-increment:navi;
          font-family:var(--body);font-size:14px;font-weight:600;color:var(--green);opacity:.85;letter-spacing:.04em}

  .menu a:not(.cta):hover,.menu a:not(.cta):active{color:rgba(243,239,230,.5)!important}

  #cp2-nav ~ .menu a.cta{background:none!important;color:var(--green)!important;padding:9px 0!important;border-radius:0!important}
  #cp2-nav ~ .menu a.cta:hover{color:#cfe04f!important}

  #cp2-nav:checked ~ .menu{transform:none;opacity:1;pointer-events:auto}
  #cp2-nav:checked ~ .menu a{opacity:1;transform:none}
  #cp2-nav:checked ~ .menu a:nth-of-type(1){transition-delay:.10s}
  #cp2-nav:checked ~ .menu a:nth-of-type(2){transition-delay:.16s}
  #cp2-nav:checked ~ .menu a:nth-of-type(3){transition-delay:.22s}
  #cp2-nav:checked ~ .menu a:nth-of-type(4){transition-delay:.28s}

  #cp2-nav:checked ~ .burger span:nth-child(1){transform:translateY(7px) rotate(45deg);background:var(--paper)!important}
  #cp2-nav:checked ~ .burger span:nth-child(2){opacity:0}
  #cp2-nav:checked ~ .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg);background:var(--paper)!important}
}


/* =========================================================
   CP2 – KONTAKT-SEITE  (ans Ende deines Custom-CSS anhängen)
   ========================================================= */

/* ---- Hero ---- */
.khero{position:relative;padding:96px 0 56px;overflow:hidden}
.khero .glow{position:absolute;width:680px;height:680px;border-radius:50%;
  background:radial-gradient(circle,rgba(193,210,55,.5),transparent 62%);filter:blur(30px);
  top:-300px;right:-160px;z-index:0;pointer-events:none}
.khero .wrap{position:relative;z-index:1}
.khero .lbl{display:block;margin-bottom:22px}
.khero h1{font-size:clamp(44px,7vw,92px);max-width:15ch;text-wrap:balance}
.khero p{font-size:19px;color:var(--ink-2);max-width:54ch;margin-top:24px}

/* ---- Kontaktkanäle (linke Spalte) ---- */
.chan{display:flex;align-items:center;gap:18px;padding:18px 22px;border:1px solid var(--line);
  border-radius:16px;background:var(--card);transition:border-color .25s,transform .25s;
  margin-bottom:14px;text-decoration:none!important}
.chan:hover{border-color:var(--ink);transform:translateX(4px)}
.chan .ic{width:48px;height:48px;border-radius:13px;background:rgba(193,210,55,.15);
  display:grid;place-items:center;flex:0 0 auto;transition:background .25s;color:var(--ink)}
.chan:hover .ic{background:rgba(193,210,55,.3)}
.chan .ic svg{width:24px;height:24px;display:block}
.chan .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.chan .t .lab{font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-2);font-weight:600}
.chan .t .val{font-family:var(--head);font-weight:600;font-size:20px;color:var(--ink)!important;margin-top:1px}
.chan .ar{color:var(--ink-2);transition:.25s;display:flex}
.chan:hover .ar{color:var(--green-deep);transform:rotate(-45deg)}

/* ---- Zusicherungen ---- */
.kassure{margin-top:28px;display:flex;flex-direction:column;gap:13px}
.kassure .it{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--ink-2)}
.kassure .it .x{width:13px;height:13px;color:var(--green-deep);margin-top:5px;flex:0 0 auto}
.kassure .it b{color:var(--ink);font-weight:600}

/* ---- Elementor-Pro-Formular im CP2-Look ----
   Dem Container UM das Formular die CSS-Klasse  cp2-formcard  geben. */
.cp2-formcard{background:var(--card);border:1px solid var(--line);border-radius:24px;padding:clamp(28px,4vw,44px)}
.cp2-formcard .elementor-field-label{font-size:13px!important;font-weight:600!important;color:var(--ink)!important;margin-bottom:7px!important}
.cp2-formcard .elementor-field-textual{font-family:var(--body)!important;font-size:16px!important;color:var(--ink)!important;
  background:var(--paper)!important;border:1.5px solid var(--line)!important;border-radius:12px!important;
  padding:14px 16px!important;width:100%!important;transition:border-color .2s,box-shadow .2s}
.cp2-formcard textarea.elementor-field-textual{min-height:150px!important;resize:vertical}
.cp2-formcard .elementor-field-textual:focus{outline:none!important;border-color:var(--green-deep)!important;
  box-shadow:0 0 0 3px rgba(193,210,55,.28)!important}
.cp2-formcard .elementor-button{background:var(--ink)!important;color:var(--paper)!important;font-family:var(--body)!important;
  font-weight:600!important;font-size:15px!important;border:0!important;border-radius:100px!important;
  padding:15px 30px!important;transition:.25s;width:auto}
.cp2-formcard .elementor-button:hover{background:var(--green-deep)!important;transform:translateY(-2px)}
.cp2-formcard .elementor-field-type-acceptance,
.cp2-formcard .elementor-field-subgroup label{font-size:13px!important;color:var(--ink-2)!important;font-weight:500!important}

/* Tablet & schmaler (bis 1024px) */
@media (max-width: 1024px) {
  .sec      { padding-top: 56px !important; padding-bottom: 56px !important; }
  .sec-head { margin-bottom: 36px !important; }
  .ahero    { padding: 64px 0 28px !important; }
  .cta-wrap { padding-bottom: 56px !important; }
}
/* Handy (bis 760px) */
@media (max-width: 760px) {
  .sec      { padding-top: 36px !important; padding-bottom: 36px !important; }
  .sec-head { margin-bottom: 26px !important; }
  .ahero    { padding: 44px 0 20px !important; }
  .cta-wrap { padding-bottom: 40px !important; }
  .hero { min-height: auto !important; justify-content: flex-start !important; padding-top: 36px !important; padding-bottom: 40px !important; }
}

/* Kontakt: 2-Spalten unter 1024px sauber stapeln */
@media (max-width: 1024px) {
  *:has(> .cp2-formcard), *:has(> .g-6cb76dd) {
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 26px !important;            /* Abstand Info ↔ Formular */
    padding-left: 24px !important;   /* nicht am Rand kleben */
    padding-right: 24px !important;
  }
  .cp2-formcard, .g-6cb76dd {
    width: 100% !important;
    min-width: 0 !important;         /* hebt das erzwungene 60% auf */
    margin-top: 0 !important;
  }
}

@media (max-width: 760px) {
  .chan        { padding: 16px 16px !important; gap: 14px !important; }
  .chan .ic    { width: 42px !important; height: 42px !important; }
  .chan .ic svg{ width: 22px !important; height: 22px !important; }
  .chan .t .lab{ font-size: 10px !important; }
  .chan .t .val{ font-size: 17px !important; white-space: nowrap !important; }
}

.cp2-formcard input[type="checkbox"],
.cp2-formcard input[type="radio"] {
  accent-color: #7E8E12;
}

@media (max-width: 1024px) {
  /* Info-Spalte ebenfalls auf volle Breite (war noch 40%) */
  *:has(> .cp2-formcard) > *:has(.kinfo) {
    width: 100% !important;
    min-width: 0 !important;
  }
}


.cs-next .nm,
.cs-next:hover .nm { color: var(--paper) !important; }
.cs-next .k,
.cs-next:hover .k  { color: var(--green) !important; }


.w-card .w-name,
.w-card:hover .w-name { color: var(--paper) !important; }


/* === Kontakt-Block exakt wie der Hero (.wrap) === */
.cp2-kwrap{
  max-width:1180px !important;
  margin-left:auto !important; margin-right:auto !important;
  padding-left:clamp(22px,5vw,48px) !important;
  padding-right:clamp(22px,5vw,48px) !important;
  box-sizing:border-box !important;
}
@media (min-width:1025px){
  .cp2-kwrap{ display:flex !important; flex-direction:row !important; gap:50px !important; align-items:flex-start !important; }
  .cp2-kwrap > :first-child{ flex:0 0 40% !important; max-width:40% !important; min-width:0 !important; }  /* Info */
  .cp2-kwrap > :last-child { flex:1 1 auto !important; width:auto !important; min-width:0 !important; flex-direction:column !important; }  /* Formular */
}
b, strong{ font-family:var(--head); font-weight:700; }

/* =========================================================
   CP2 – HERO-AUFTRITT: Upgrade der BESTEHENDEN Choreografie
   ========================================================= */

@media (prefers-reduced-motion:no-preference){

/* ---- A) Headline: Masken-Enthüllung -------------------- */
.hero .hero-h1{overflow:hidden}
.hero .hero-h1>span{
  opacity:1;
  transform:translateY(112%);
  transition:none;
  animation:cp2HeroLine 1s cubic-bezier(.16,1,.3,1) .3s forwards;
}
@keyframes cp2HeroLine{to{transform:translateY(0)}}

/* ---- B) hero-row: Kinder gestaffelt statt en bloc ------ */
.hero .hero-row{opacity:1;animation:none}
.hero .hero-sub{opacity:0;transform:translateY(18px);
  animation:rise .7s cubic-bezier(.2,.7,.2,1) .75s forwards}
.hero .hero-cta{opacity:0;transform:translateY(18px);
  animation:rise .7s cubic-bezier(.2,.7,.2,1) .92s forwards}
.hero .hero-meta{opacity:0;transform:translateY(18px);
  animation:rise .7s cubic-bezier(.2,.7,.2,1) 1.1s forwards}

} /* ende no-preference */

/* ---- BUGFIX Reduced Motion ------------------------------ */
@media (prefers-reduced-motion:reduce){
  .hero .lbl,.hero .hero-row,.hero .hero-scroll,
  .hero .hero-sub,.hero .hero-cta,.hero .hero-meta,
  .hero .hero-h1>span{
    opacity:1!important;transform:none!important;animation:none!important;
  }
}

/* =========================================================
   CP2 – MOBILE FEINSCHLIFF: Abstände & Hero entschlacken
   ========================================================= */
@media (max-width:760px){

  .sec      { padding-top:72px !important; padding-bottom:72px !important; }
  .sec-head { margin-bottom:42px !important; }

  .hero        { padding-top:40px !important; padding-bottom:56px !important; }
  .hero .lbl   { font-size:10px; letter-spacing:.11em; margin-bottom:22px; }
  .hero-sub    { margin-top:4px; }
  .hero-row    { margin-top:34px !important; gap:34px !important; }
  .hero-cta    { margin-top:26px !important; }
  .hero-meta   { display:none; }

  .hero .glow,
  .khero .glow,
  .ahero .glow { width:380px !important; height:380px !important;
                 top:-180px !important; right:-140px !important; opacity:.5 !important; }

  .kgrid    { gap:16px !important; }
  .kcard    { padding:22px !important; }
  .sheet    { gap:2px !important; }
  .srow     { padding-top:20px !important; padding-bottom:20px !important; }
  .clients  { gap:14px !important; }
  .about-grid { gap:28px !important; }
  .points   { gap:16px !important; }

}
@media (max-width:820px){
  .menu{ visibility:hidden; }
  #cp2-nav:checked ~ .menu{ visibility:visible; }
}

@media (max-width:760px){
  .srow .i{ font-size:24px !important; }
}

/* Sticky-Blocker neutralisieren + Header sticky */
.elementor,
.elementor-location-header,
.elementor-location-header > .e-con,
.e-con.e-parent,
#content{
  overflow:visible !important;
  transform:none !important;
}
header{
  position:sticky !important;
  top:0 !important;
  z-index:100 !important;
  background:rgba(243,239,230,.85) !important;
  backdrop-filter:saturate(140%) blur(10px);
  -webkit-backdrop-filter:saturate(140%) blur(10px);
}
@media(max-width:820px){
  header{backdrop-filter:none;-webkit-backdrop-filter:none}
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'QUABLO';
	font-style: normal;
	font-weight: 700;
	font-display: auto;
	src: url('https://www.cp2consulting.de/wp-content/uploads/2026/06/Quablo-Bold.woff2') format('woff2');
}
@font-face {
	font-family: 'QUABLO';
	font-style: normal;
	font-weight: 600;
	font-display: auto;
	src: url('https://www.cp2consulting.de/wp-content/uploads/2026/06/Quablo-SemiBold.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Attractive';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://www.cp2consulting.de/wp-content/uploads/2026/06/Attractive-Regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Attractive';
	font-style: normal;
	font-weight: 300;
	font-display: auto;
	src: url('https://www.cp2consulting.de/wp-content/uploads/2026/06/Attractive-SemiLight.woff2') format('woff2');
}
@font-face {
	font-family: 'Attractive';
	font-style: italic;
	font-weight: 500;
	font-display: auto;
	src: url('https://www.cp2consulting.de/wp-content/uploads/2026/06/Attractive-MediumItalic.woff2') format('woff2');
}
/* End Custom Fonts CSS */