/*
Theme Name: Connect 24 Business
Theme URI: https://connect24gmbh.de
Author: Sislak Design
Description: Schlankes Onepager-Theme für die Connect 24 Business-Landingpage. Kontaktformular via Contact Form 7, kompatibel mit Rank Math SEO und Borlabs Cookie, Fonts lokal (DSGVO).
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: connect24
*/

/* Fonts (lokal, DSGVO) */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/montserrat-v31-latin-500.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/montserrat-v31-latin-600.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/montserrat-v31-latin-700.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/montserrat-v31-latin-800.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/roboto-v51-latin-300.woff2') format('woff2')}
@font-face{font-family:'Roboto';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/roboto-v51-latin-regular.woff2') format('woff2')}

:root{
  --c-black:#111111; --c-anthracite:#3D3D3D; --c-grey-700:#54595F; --c-grey-500:#7A7A7A;
  --c-grey-300:#D6D8DC; --c-grey-100:#F4F5F7; --c-white:#FFFFFF;
  --c-accent:#00796B; --c-accent-d:#00564E;
  --f-head:'Montserrat','Helvetica Neue',Arial,sans-serif;
  --f-body:'Roboto','Helvetica Neue',Arial,sans-serif;
  --container:1400px; --radius:4px; --radius-card:8px;
  --shadow-card:0 6px 24px rgba(17,17,17,.08);
  --section-pad:96px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--f-body);font-size:17px;line-height:1.65;color:var(--c-grey-500);background:var(--c-white)}
img{max-width:100%}
.container{max-width:var(--container);margin:0 auto;padding:0 32px}
section{padding:var(--section-pad) 0}
section[id]{scroll-margin-top:104px}

/* Typografie */
h1,h2,h3,h4,h5{font-family:var(--f-head);color:var(--c-black)}
h1{font-size:52px;line-height:1.15;font-weight:700;letter-spacing:-.5px}
h2{font-size:38px;line-height:1.2;font-weight:600;letter-spacing:-.3px}
h3{font-size:26px;line-height:1.3;font-weight:600}
h4{font-size:20px;line-height:1.4;font-weight:600}
.lead{font-size:20px;line-height:1.6;font-weight:300}
.overline{font-family:var(--f-head);font-size:14px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--c-accent);display:block;margin-bottom:16px}
.hero .overline,.on-dark .overline{color:#4DB6AC}
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--c-white)}
.on-dark p{color:rgba(255,255,255,.75)}

/* Buttons */
.btn{font-family:var(--f-head);font-size:16px;font-weight:600;padding:16px 36px;border-radius:var(--radius);text-decoration:none;display:inline-block;transition:all .25s ease;cursor:pointer;border:2px solid transparent}
.btn-primary{background:var(--c-anthracite);color:var(--c-white);border-color:var(--c-anthracite)}
.btn-primary:hover{background:var(--c-black);border-color:var(--c-black);transform:translateY(-2px)}
.btn-accent{background:var(--c-accent);color:var(--c-white);border-color:var(--c-accent)}
.btn-accent:hover{background:var(--c-accent-d);border-color:var(--c-accent-d);transform:translateY(-2px)}
.btn-ghost{background:transparent;color:var(--c-white);border-color:var(--c-white)}
.btn-ghost:hover{background:var(--c-white);color:var(--c-black)}

/* Navigation */
.nav{position:sticky;top:0;background:var(--c-white);box-shadow:0 2px 12px rgba(17,17,17,.07);z-index:100}
.nav-inner{display:flex;align-items:center;justify-content:space-between;height:96px;gap:16px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{width:38px;height:38px;border-radius:50%;border:5px solid var(--c-black);position:relative}
.logo-mark::after{content:'';position:absolute;inset:7px;background:var(--c-black);border-radius:50%}
.logo-text{font-family:var(--f-head);font-weight:800;font-size:24px;color:var(--c-black);letter-spacing:-.5px;white-space:nowrap}
.logo-badge{font-family:var(--f-head);font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--c-accent);text-transform:uppercase;align-self:flex-end;margin-bottom:3px}
.custom-logo-link{display:flex;align-items:center}
.custom-logo{max-height:52px;width:auto}
.nav-brand{display:flex;align-items:center;gap:16px;min-width:0}
.nav-partner{height:56px;width:auto;border-left:1px solid var(--c-grey-300);padding-left:16px}
.nav-links{display:flex;gap:36px;list-style:none}
.nav-links a{font-family:var(--f-head);font-size:15px;font-weight:500;color:var(--c-black);text-decoration:none;transition:color .2s}
.nav-links a:hover{color:var(--c-accent)}
.nav .btn{padding:12px 26px;font-size:14px;white-space:nowrap}
#menu{display:none}
.burger{display:none;font-size:26px;color:var(--c-black);cursor:pointer;line-height:1}
.burger::before{content:'☰'}
#menu:checked ~ .burger::before{content:'✕'}

/* Hero */
.hero{padding:0;background:var(--c-anthracite);overflow:hidden}
.hero-grid{display:grid;grid-template-columns:1.1fr .9fr;min-height:620px}
.hero-content{display:flex;flex-direction:column;justify-content:center;padding:96px 48px 96px 0}
.hero-content h1{color:var(--c-white);margin-bottom:24px}
.hero-content .lead{color:rgba(255,255,255,.8);margin-bottom:40px;max-width:540px}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap}
.hero-visual{background:linear-gradient(100deg,rgba(35,35,38,.5) 0%,rgba(35,35,38,0) 55%),url('images/beratung.jpg') center/cover no-repeat;clip-path:polygon(18% 0,100% 0,100% 100%,0 100%)}

/* Partnerleiste */
.trust{background:var(--c-white);border-bottom:1px solid var(--c-grey-300)}
.trust-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.trust-label{font-family:var(--f-head);font-size:13px;font-weight:600;letter-spacing:1px;text-transform:uppercase}
.trust-logos{display:flex;gap:16px;flex-wrap:wrap;align-items:center}
.trust-logos img{height:64px;width:auto;filter:grayscale(1);opacity:.55;transition:all .2s}
.trust-logos img:hover{filter:none;opacity:1}

/* Förderung */
.funding{background:var(--c-accent);position:relative;overflow:hidden}
.funding::before{content:'';position:absolute;top:0;right:-8%;width:40%;height:100%;background:rgba(255,255,255,.07);clip-path:polygon(25% 0,100% 0,100% 100%,0 100%)}
.funding-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:64px;align-items:center;position:relative;z-index:2}
.funding .overline{color:rgba(255,255,255,.85)}
.funding p{color:rgba(255,255,255,.88);margin-top:16px}
.funding .check-list li{color:rgba(255,255,255,.92);margin-bottom:14px}
.funding .check{background:var(--c-white);color:var(--c-accent)}
.funding-card{background:var(--c-white);border-radius:var(--radius-card);overflow:hidden;box-shadow:0 20px 50px rgba(0,0,0,.2)}
.funding-card img{width:100%;height:210px;object-fit:cover;display:block}
.funding-card-body{padding:32px 32px 36px;text-align:center}
.funding-card-body .sum-label{font-family:var(--f-head);font-size:14px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--c-grey-700)}
.funding-card-body .sum{font-family:var(--f-head);font-size:46px;font-weight:700;color:var(--c-black);line-height:1.15}
.funding-card-body p{color:var(--c-grey-500);font-size:14px;margin:6px 0 24px}
.funding-card .btn{width:100%;text-align:center}

/* Leistungen */
.services{background:var(--c-grey-100)}
.section-head{text-align:center;max-width:680px;margin:0 auto 64px}
.section-head p{margin-top:16px}
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card{background:var(--c-white);border-radius:var(--radius-card);padding:40px 32px;box-shadow:var(--shadow-card);transition:transform .25s ease,box-shadow .25s ease;border-top:4px solid transparent}
.card:hover{transform:translateY(-6px);box-shadow:0 14px 34px rgba(17,17,17,.13);border-top-color:var(--c-accent)}
.card-icon{width:56px;height:56px;border-radius:var(--radius);background:var(--c-anthracite);color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:24px;margin-bottom:24px}
.card h4{margin-bottom:12px}
.card p{font-size:15px}

/* USP */
.usp{background:linear-gradient(rgba(61,61,61,.92),rgba(61,61,61,.92)),url('images/beratung.jpg') center/cover no-repeat;position:relative;overflow:hidden}
.usp::before{content:'';position:absolute;top:0;right:-10%;width:45%;height:100%;background:rgba(255,255,255,.04);clip-path:polygon(30% 0,100% 0,100% 100%,0 100%)}
.usp-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;position:relative;z-index:2}
.check-list{list-style:none;margin-top:32px}
.check-list li{display:flex;gap:16px;align-items:flex-start;margin-bottom:20px;color:rgba(255,255,255,.85);font-size:17px}
.check{width:26px;height:26px;min-width:26px;border-radius:50%;background:var(--c-accent);color:var(--c-white);display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;margin-top:2px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.stat{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--radius-card);padding:36px 28px;text-align:center}
.stat b{font-family:var(--f-head);font-size:42px;font-weight:700;color:var(--c-white);display:block;line-height:1.1}
.stat span{font-size:14px;color:rgba(255,255,255,.65)}

/* Detail */
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:center}
.detail-grid h2+p{margin-top:16px}
.detail-visual{background:url('images/produkte.jpg') center/cover no-repeat;border-radius:var(--radius-card);min-height:420px;box-shadow:var(--shadow-card)}
.feature-list{list-style:none;margin:28px 0 36px;display:grid;grid-template-columns:1fr 1fr;gap:14px 24px}
.feature-list li{display:flex;gap:10px;font-size:15px;align-items:center}
.feature-list .check{width:20px;height:20px;min-width:20px;font-size:11px;background:var(--c-anthracite);margin:0}

/* Kontakt */
.contact{background:var(--c-grey-100)}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}
.info-block{margin-top:36px}
.info-block h4{font-size:15px;text-transform:uppercase;letter-spacing:1.5px;color:var(--c-grey-700);margin-bottom:10px}
.info-block p{font-size:16px;color:var(--c-black)}
.info-block a{color:var(--c-black);text-decoration:none}
.contact-photo{width:100%;border-radius:var(--radius-card);margin-top:36px;box-shadow:var(--shadow-card);display:block}
.form-card{background:var(--c-white);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:48px}
.form-card h3{margin-bottom:8px}
.form-card>p{font-size:15px;margin-bottom:28px}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.form-field{display:flex;flex-direction:column;gap:8px}
.form-field.full{grid-column:1/-1}
.form-field label{font-family:var(--f-head);font-size:13px;font-weight:600;color:var(--c-black)}
.form-field input,.form-field select{font-family:var(--f-body);font-size:16px;padding:14px 16px;border:1px solid var(--c-grey-300);border-radius:var(--radius);color:var(--c-black);background:var(--c-white);outline:none;transition:border-color .2s,box-shadow .2s;width:100%}
.form-field input:focus,.form-field select:focus{border-color:var(--c-accent);box-shadow:0 0 0 3px rgba(0,121,107,.12)}
.radio-group{display:flex;gap:12px;flex-wrap:wrap}
.form-consent{grid-column:1/-1;font-size:13px}
.form-consent input{width:18px;height:18px;margin-top:2px;accent-color:var(--c-accent);flex:none}
.form-consent a{color:var(--c-accent)}
.form-grid .btn{width:100%;grid-column:1/-1;text-align:center}

/* Contact Form 7 Bridge */
.wpcf7 .hidden-fields-container{display:none}
.form-grid>*{min-width:0}
.form-field .wpcf7-form-control-wrap{display:block;width:100%}
.radio-group .wpcf7-form-control-wrap,
.radio-group .wpcf7-radio{display:contents}
.radio-group .wpcf7-list-item{margin:0}
.radio-group .wpcf7-list-item label{position:relative;display:block;cursor:pointer}
.radio-group .wpcf7-list-item input{position:absolute;opacity:0}
.radio-group .wpcf7-list-item-label{display:block;font-family:var(--f-head);font-size:14px;font-weight:600;color:var(--c-grey-700);border:1px solid var(--c-grey-300);border-radius:var(--radius);padding:12px 22px;transition:all .2s}
.radio-group .wpcf7-list-item:hover .wpcf7-list-item-label{border-color:var(--c-anthracite)}
.radio-group input:checked+.wpcf7-list-item-label{background:var(--c-anthracite);border-color:var(--c-anthracite);color:var(--c-white)}
.radio-group input:focus-visible+.wpcf7-list-item-label{box-shadow:0 0 0 3px rgba(0,121,107,.25)}
.form-consent .wpcf7-form-control-wrap{display:block}
.form-consent .wpcf7-list-item{margin:0}
.form-consent .wpcf7-list-item label{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.form-consent .wpcf7-list-item-label{display:block}
.wpcf7-not-valid-tip{display:block;font-size:13px;color:var(--c-accent);margin-top:6px}
.form-field .wpcf7-not-valid,.form-field .wpcf7-not-valid:focus{border-color:var(--c-accent)}
.form-grid .wpcf7-response-output{grid-column:1/-1;margin:0;padding:14px 16px;border:1px solid;border-radius:var(--radius);font-size:14px}
form.init .wpcf7-response-output,form.resetting .wpcf7-response-output,
form.submitting .wpcf7-response-output{display:none}
form.sent .wpcf7-response-output{border-color:#2E7D32;color:#2E7D32}
form.invalid .wpcf7-response-output,form.unaccepted .wpcf7-response-output,
form.failed .wpcf7-response-output,form.spam .wpcf7-response-output,
form.aborted .wpcf7-response-output{border-color:var(--c-accent);color:var(--c-accent-d)}
.wpcf7-spinner{display:none;grid-column:1/-1;margin:0 auto;width:24px;height:24px;border:3px solid var(--c-grey-300);border-top-color:var(--c-accent);border-radius:50%}
form.submitting .wpcf7-spinner{display:block;animation:c24-spin .8s linear infinite}
@keyframes c24-spin{to{transform:rotate(360deg)}}
.screen-reader-response{position:absolute !important;clip:rect(1px,1px,1px,1px);width:1px;height:1px;overflow:hidden;margin:0;padding:0;border:0}

/* Footer */
footer{background:var(--c-black);color:rgba(255,255,255,.6);padding:72px 0 32px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px}
.footer-brand{display:flex;align-items:center;gap:16px}
.footer-brand .nav-partner{border-left-color:rgba(255,255,255,.25)}
.footer-about p{font-size:14px;margin-top:16px}
footer h5{color:var(--c-white);font-size:15px;margin-bottom:20px;letter-spacing:.5px}
footer ul{list-style:none}
footer li{margin-bottom:10px}
footer a{color:rgba(255,255,255,.6);text-decoration:none;font-size:14px;transition:color .2s}
footer a:hover{color:var(--c-white)}
.footer-about .logo-mark{border-color:var(--c-white)}
.footer-about .logo-mark::after{background:var(--c-white)}
.footer-about .logo-text{color:var(--c-white)}
.footer-bottom{border-top:1px solid rgba(255,255,255,.12);padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;font-size:13px}
.legal-menu{list-style:none;display:flex;flex-wrap:wrap;align-items:center;margin:0;padding:0}
.legal-menu li{margin:0;display:flex;align-items:center}
.legal-menu li+li::before{content:'·';margin:0 10px;color:rgba(255,255,255,.35)}

/* Rechtstexte */
.legal{max-width:864px;padding-top:80px;padding-bottom:96px}
.legal h1{font-size:38px;margin-bottom:8px}
.legal h2{font-size:22px;margin:40px 0 12px}
.legal p{margin-bottom:12px;font-size:16px}
.legal a{color:var(--c-accent)}
.legal mark{background:rgba(0,121,107,.12);color:var(--c-accent-d);padding:2px 6px;border-radius:3px;font-size:14px}

/* Tablet */
@media (max-width:992px){
  :root{--section-pad:72px}
  body{font-size:16px}
  h1{font-size:42px;line-height:1.18}
  h2{font-size:32px;line-height:1.25}
  h3{font-size:24px}
  h4{font-size:19px}
  h5{font-size:16px}
  .lead{font-size:18px}
  .overline{font-size:13px;letter-spacing:1.75px}
  .btn{font-size:15px;padding:15px 30px}
  .burger{display:block}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--c-white);flex-direction:column;gap:0;padding:8px 0 12px;box-shadow:0 16px 24px rgba(17,17,17,.12)}
  #menu:checked ~ .nav-links{display:flex}
  .nav-links a{display:block;padding:14px 32px;font-size:17px;font-weight:600}
  .hero-grid{grid-template-columns:1fr}
  .hero-visual{min-height:320px;clip-path:polygon(0 18%,100% 0,100% 100%,0 100%);order:2}
  .hero-content{padding:72px 0 56px}
  .card-grid{grid-template-columns:repeat(2,1fr)}
  .usp-grid,.detail-grid,.contact-grid,.funding-grid{grid-template-columns:1fr;gap:48px}
  .footer-grid{grid-template-columns:1fr 1fr}
}

/* Mobile */
@media (max-width:600px){
  :root{--section-pad:56px}
  .container{padding-left:20px;padding-right:20px}
  h1{font-size:34px;line-height:1.2}
  h2{font-size:28px}
  h3{font-size:22px}
  h4{font-size:18px}
  .lead{font-size:17px}
  .overline{font-size:12px;letter-spacing:1.5px}
  .btn{width:100%;text-align:center;padding:15px 24px}
  .nav .btn{width:auto;padding:10px 14px;font-size:12px}
  .nav-inner{height:76px;gap:10px}
  .logo{gap:8px}
  .logo-text{font-size:18px}
  .logo-mark{width:30px;height:30px;border-width:4px}
  .logo-mark::after{inset:5px}
  .logo-badge{display:none}
  .custom-logo{max-height:36px}
  .nav-brand{gap:10px}
  .nav-partner{height:44px;padding-left:10px}
  .trust-inner{justify-content:center}
  .trust-logos{gap:4px;justify-content:center}
  .trust-logos img{height:48px}
  .card-grid,.form-grid,.stats{grid-template-columns:1fr}
  .feature-list{grid-template-columns:1fr}
  .detail-visual{min-height:300px}
  .form-card{padding:28px 22px}
  .funding-card img{height:170px}
  .funding-card-body .sum{font-size:38px}
  .radio-group{flex-direction:column}
  .radio-group .wpcf7-list-item-label{text-align:center}
  .footer-grid{grid-template-columns:1fr;gap:32px}
  .legal h1{font-size:30px}
  .legal h2{font-size:19px}
}