/*
Theme Name: Christoffers
Theme URI: https://christoffers-gebaeudereinigung.de
Description: Schlankes, lizenzfreies Block-Theme (Child von Twenty Twenty-Five) für Christoffers Glas- & Gebäudereinigung GmbH. Onepager mit Impressum/Datenschutz, ohne Page-Builder und ohne kostenpflichtige Plugins.
Author: becoo
Template: twentytwentyfive
Version: 1.0.0
Requires at least: 6.5
Requires PHP: 7.4
Text Domain: christoffers
*/

/* ============================================================
   Basis
   ============================================================ */
:root{
  --chr-blue:#2b4898; --chr-blue-dark:#1e3369; --chr-sky:#eaf1fb;
  --chr-ink:#1a2233; --chr-gray:#5b6472; --chr-line:#e2e8f0; --chr-white:#fff;
}
html{scroll-behavior:smooth}
body{overflow-x:hidden}
/* Sprungmarken nicht unter den Sticky-Header rutschen */
:where(#ueberuns,#leistungen,#jobs,#kontakt){scroll-margin-top:96px}

/* ============================================================
   Header / Navigation
   ============================================================ */
.chr-header{position:sticky;top:0;z-index:50;background:#fff;border-bottom:1px solid var(--chr-line);box-shadow:0 1px 12px rgba(20,30,60,.05)}
.chr-header-in{max-width:1280px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:12px 32px}
.chr-logo img{height:82px;width:auto;display:block}
.chr-nav{display:flex;gap:26px;font:600 15px/1 'Work Sans',system-ui,sans-serif}
.chr-nav a{color:var(--chr-ink);text-decoration:none}
.chr-nav a:hover{color:var(--chr-blue)}
.chr-actions{display:flex;align-items:center;gap:18px}
.chr-header .chr-cta{background:var(--chr-blue);color:#fff;font:700 14px/1 'Work Sans',sans-serif;padding:12px 20px;border-radius:30px;text-decoration:none;white-space:nowrap}
.chr-header .chr-cta:hover{background:var(--chr-blue-dark)}
.chr-header .chr-phone{font:700 16px/1 'Work Sans',sans-serif;color:var(--chr-blue);text-decoration:none;white-space:nowrap}
/* Burger (mobil) */
.chr-nav-toggle{display:none}
.chr-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:46px;height:46px;cursor:pointer;border-radius:8px}
.chr-burger span{display:block;width:26px;height:2.5px;background:var(--chr-ink);border-radius:2px;transition:.2s ease}
.chr-nav-toggle:checked ~ .chr-burger span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.chr-nav-toggle:checked ~ .chr-burger span:nth-child(2){opacity:0}
.chr-nav-toggle:checked ~ .chr-burger span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
@media(max-width:860px){
  .chr-header-in{flex-wrap:wrap;padding:12px 20px}
  .chr-logo{margin-right:auto}
  .chr-logo img{height:64px}
  .chr-burger{display:flex}
  .chr-nav,.chr-actions{display:none;width:100%}
  .chr-nav-toggle:checked ~ .chr-nav{display:flex;flex-direction:column;gap:0;margin-top:8px;padding-top:6px;border-top:1px solid var(--chr-line)}
  .chr-nav-toggle:checked ~ .chr-nav a{padding:13px 4px;border-bottom:1px solid #f0f2f5;font-size:16px}
  .chr-nav-toggle:checked ~ .chr-actions{display:flex;flex-direction:column;align-items:stretch;gap:12px;padding:14px 0 4px}
  .chr-actions .chr-phone{font-size:18px}
  .chr-actions .chr-cta{text-align:center;padding:14px 20px}
}

/* ============================================================
   Sektionen / allgemein  (Inhalt = Core-Blöcke)
   Abstände steuern wir bewusst per Margin – deshalb Block-Gap in
   unseren Sektionen und in post-content auf 0 setzen.
   ============================================================ */
.wp-block-post-content{--wp--style--block-gap:0}
.chr-hero,.chr-section,.chr-bg-sky,.chr-legal{--wp--style--block-gap:0}
.chr-bg-sky{background:var(--chr-sky)}
.chr-section{max-width:1280px;margin:0 auto;padding:72px 32px}
.chr-eyebrow{font:700 12px/1 'Work Sans',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--chr-blue);margin:0 0 18px}
.chr-section h2{font-size:30px;margin:0 0 10px}
.chr-prose{max-width:820px;margin:14px 0 0}
.chr-prose p{color:var(--chr-gray);font-size:17px;line-height:1.75;margin:0 0 16px}
.chr-prose p:last-child{margin-bottom:0}

/* Hero */
.chr-hero{background:linear-gradient(rgba(20,30,60,.60),rgba(30,51,105,.74)),url(assets/img/hero.jpg);background-size:cover;background-position:center;color:#fff}
.chr-hero .chr-section{padding-top:132px;padding-bottom:132px}
.chr-hero .chr-eyebrow{color:#bcd0f5}
.chr-hero h1{color:#fff;max-width:820px;margin:0 0 16px;text-shadow:0 2px 18px rgba(0,0,0,.28)}
.chr-hero p{color:#eaf1fb;max-width:660px;font-size:19px;line-height:1.65;margin:0 0 24px;text-shadow:0 1px 10px rgba(0,0,0,.25)}

/* Core-Button: Textfarbe auch im Hover/Focus weiß halten (sonst wird sie vom Parent-Theme dunkel) */
.wp-block-button__link:hover,.wp-block-button__link:focus,.wp-block-button__link:active{color:#fff}
/* Helle Variante auf blauem/dunklem Grund */
.wp-block-button.chr-btn-light .wp-block-button__link{background:#fff;color:var(--chr-blue)}
.wp-block-button.chr-btn-light .wp-block-button__link:hover,.wp-block-button.chr-btn-light .wp-block-button__link:focus{background:var(--chr-sky);color:var(--chr-blue)}

/* Leistungen-Grid */
.chr-services{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px;align-items:stretch}
.chr-card{background:#fff;border:1px solid var(--chr-line);border-radius:16px;padding:26px 24px;box-shadow:0 4px 18px rgba(20,30,60,.05);display:flex;flex-direction:column;height:100%}
/* WP-Flow-Layout gibt jeder Kachel außer der ersten margin-block-start:1.2rem (Spezifität 0,1,0).
   Mit zwei Klassen (0,2,0) neutralisieren wir das sicher – Reihenabstand kommt aus dem Grid-gap. */
.chr-services .chr-card{margin-block:0}
.chr-card .chr-card-icon{margin:0 0 16px}
.chr-card .chr-card-icon img{height:60px;width:auto;display:block}
.chr-card h3{font:700 19px/1.25 'Work Sans',sans-serif;color:var(--chr-blue);margin:0 0 10px}
.chr-card p{font:400 14.5px/1.6 'Work Sans',sans-serif;color:var(--chr-gray);margin:0}
.chr-card-hl{background:var(--chr-blue);border-color:var(--chr-blue)}
.chr-card-hl h3{color:#fff}
.chr-card-hl p{color:#cfe0fb;margin:0 0 14px}

/* Zertifikate */
.chr-certs{margin-top:42px;padding-top:30px;border-top:1px solid var(--chr-line)}
.chr-certs .chr-eyebrow{margin:0 0 6px}
.chr-certs-lead{margin:0 0 16px;color:var(--chr-gray);font:400 15px/1.6 'Work Sans',sans-serif;max-width:640px}
.chr-cert-logos{display:flex;gap:34px;align-items:center;flex-wrap:wrap}
.chr-cert-logos .wp-block-image{margin:0}
.chr-cert-logos img{height:90px;width:auto;display:block;transition:transform .15s ease}
.chr-cert-logos a:hover img{transform:scale(1.05)}

/* Jobs */
.chr-jobs{margin-top:30px;display:grid;gap:16px}
.chr-job{background:#fff;border:1px solid var(--chr-line);border-radius:16px;padding:26px 28px;box-shadow:0 4px 18px rgba(20,30,60,.05);display:flex;justify-content:space-between;align-items:center;gap:24px;flex-wrap:wrap}
.chr-job-main{max-width:680px}
.chr-job-main .chr-job-tag{display:inline-block;background:var(--chr-sky);color:var(--chr-blue);font:600 10px/1.4 'Work Sans',sans-serif;letter-spacing:.02em;padding:4px 11px;border-radius:20px;margin:0 0 20px}
.chr-job-main h3{font:700 20px/1.3 'Work Sans',sans-serif;color:var(--chr-ink);margin:0 0 6px}
.chr-job-main .chr-job-loc{font:600 14px/1.4 'Work Sans',sans-serif;color:var(--chr-gray);margin:0 0 10px}
.chr-job-main p{font:400 15px/1.65 'Work Sans',sans-serif;color:var(--chr-gray);margin:0}
.chr-job-apply{flex:none;margin:0}
.chr-job-note{margin:18px 0 0;background:var(--chr-sky);border-radius:12px;padding:18px 22px;font:400 15px/1.7 'Work Sans',sans-serif;color:#3a4557}
.chr-job-note a{color:var(--chr-blue);font-weight:600}
.chr-job-initiative{max-width:700px;margin:22px 0 0;font:400 15px/1.7 'Work Sans',sans-serif;color:var(--chr-gray)}
.chr-job-initiative a{color:var(--chr-blue);font-weight:600}
@media(max-width:640px){.chr-job{flex-direction:column;align-items:flex-start}}

/* Kontakt */
.chr-contact{display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:start;margin-top:30px}
.chr-formcard{background:#fff;border:1px solid var(--chr-line);border-radius:16px;padding:30px 28px;box-shadow:0 4px 18px rgba(20,30,60,.05)}
.chr-info{font:400 16px/1.9 'Work Sans',sans-serif;color:var(--chr-gray)}
.chr-info h3{font:700 15px/1 'Work Sans',sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--chr-blue);margin:0 0 12px}
.chr-info p{margin:0 0 22px}
.chr-info p:last-child{margin-bottom:0}
.chr-info a{color:var(--chr-blue);text-decoration:none}
.chr-info a:hover{text-decoration:underline}

/* ============================================================
   Fluent Forms – dezent an die Marke angepasst
   ============================================================ */
.frm-fluent-form .ff-el-input--label label,.frm-fluent-form label{font:600 14px/1.4 'Work Sans',sans-serif;color:var(--chr-ink)}
.frm-fluent-form input[type=text],.frm-fluent-form input[type=email],.frm-fluent-form textarea{
  border:1px solid var(--chr-line);border-radius:10px;padding:12px 14px;font:400 15px/1.4 'Work Sans',sans-serif;background:#fff}
.frm-fluent-form input:focus,.frm-fluent-form textarea:focus{border-color:var(--chr-blue);outline:none;box-shadow:0 0 0 3px rgba(43,72,152,.12)}
.frm-fluent-form .ff-btn-submit{background:var(--chr-blue);color:#fff !important;border:none;border-radius:30px;font:700 15px/1 'Work Sans',sans-serif;padding:14px 30px}
.frm-fluent-form .ff-btn-submit:hover{background:var(--chr-blue-dark);color:#fff !important}

/* ============================================================
   Rechtsseiten (Impressum / Datenschutz)
   ============================================================ */
.wp-block-post-title{color:var(--chr-blue)}
/* Rechtsseiten: nur EINE Außen-Polsterung (Root-Padding von main), vertikal per CSS */
.chr-legal-main{padding-top:44px;padding-bottom:72px}
.chr-legal-main .wp-block-post-title{margin:0 0 6px}
.chr-legal>:first-child{margin-top:0}
.chr-legal{max-width:860px;font:400 16px/1.75 'Work Sans',sans-serif;color:#4a5261}
.chr-legal h2{color:var(--chr-blue);font-size:24px;margin:40px 0 14px;font-weight:700}
.chr-legal h3{color:var(--chr-blue);font-size:19px;margin:30px 0 10px;font-weight:700}
.chr-legal h4{color:var(--chr-blue);font-size:17px;margin:26px 0 8px;font-weight:700}
.chr-legal p{margin:0 0 16px}
.chr-legal ul{margin:0 0 18px 22px;padding:0}
.chr-legal li{margin:0 0 10px;line-height:1.7}
.chr-legal .chr-q{color:var(--chr-blue);font-weight:700;margin:20px 0 6px}
.chr-legal a{color:var(--chr-blue)}
.chr-imp-logo{margin:0 0 20px}
.chr-imp-logo img{height:78px;width:auto;display:block}
.chr-imp-address{font-size:17px;line-height:1.75;margin:0 0 26px;color:#1a2233}

/* ============================================================
   Footer
   ============================================================ */
.chr-footer{background:var(--chr-ink);color:#c3ccdb}
.chr-footer-grid{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding:56px 32px}
.chr-footer h4{font:700 13px/1 'Work Sans',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:#fff;margin:0 0 16px}
.chr-footer a{color:#c3ccdb;text-decoration:none;display:block;margin-bottom:10px}
.chr-footer a:hover{color:#fff}
.chr-logo-chip{display:inline-block;background:#fff;padding:12px 16px;border-radius:12px;margin-bottom:18px}
.chr-logo-chip img{height:50px;width:auto;display:block;margin:0}
.chr-footbottom{border-top:1px solid rgba(255,255,255,.12)}
.chr-footbottom-in{max-width:1280px;margin:0 auto;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:18px 32px;font:400 13px/1.5 'Work Sans',sans-serif}
.chr-footbottom-in a{color:#c3ccdb;text-decoration:none}
.chr-footbottom-in a:hover{color:#fff}

/* ============================================================
   Responsive
   ============================================================ */
@media(max-width:900px){
  .chr-services{grid-template-columns:repeat(2,1fr)}
  .chr-contact{grid-template-columns:1fr}
  .chr-footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  .chr-section{padding:52px 20px}
  .chr-services{grid-template-columns:1fr}
  .chr-footer-grid{grid-template-columns:1fr}
  .chr-legal-main{padding-top:28px;padding-bottom:52px}
}