/*
Theme Name: JW Management
Theme URI: https://jansenwinkeln.com
Author: JW Management GmbH
Author URI: https://jansenwinkeln.com
Description: Corporate One-Pager mit Mobile-Menü, Auto-Slider, Flat-Icons und SEO-Basics (Meta/OG/Twitter/Canonical/JSON-LD).
Version: 1.8.1
Requires at least: 5.8
Tested up to: 6.6
Requires PHP: 7.4
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jw-management
*/

:root{ --bg:#0b0c0f; --text:#eef2f7; --muted:#aab4c2; --card:#12161c; --line:#233141; --brand:#0f2741; --brand-2:#6b7683; --brand-accent:#1e5aa6; }
@media (prefers-color-scheme: light){ :root{ --bg:#ffffff; --text:#0b1724; --muted:#5a6a7c; --card:#f6f9fc; --line:#e4ebf3; } }
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial}
a{color:var(--brand-accent);text-decoration:none} a:hover{text-decoration:underline}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

header{position:sticky;top:0;backdrop-filter:saturate(180%) blur(8px);background:color-mix(in oklab, var(--bg) 85%, transparent);border-bottom:1px solid var(--line);z-index:20}
.nav{display:flex;align-items:center;justify-content:space-between;height:68px;position:relative}
.brand{display:flex;gap:.75rem;align-items:center} .brand img.logo{height:40px;width:auto;display:block}

/* Desktop links */
.menu-panel{display:flex;gap:.5rem}
.menu-panel a.btn{padding:.55rem .9rem;border:1px solid var(--line);border-radius:10px;background:var(--card)}

/* Mobile menu */
.menu-toggle{display:none;align-items:center;gap:.5rem;border:1px solid var(--line);background:var(--card);color:var(--text);padding:.55rem .9rem;border-radius:10px;cursor:pointer}
.menu-toggle:focus{outline:2px solid var(--brand-accent)}
.menu-close{display:none;position:absolute;top:10px;right:10px;background:transparent;border:0;color:#fff;font-size:22px;opacity:0;transition:opacity .2s ease}
.nav.open .menu-close{display:block;opacity:1}
@media(max-width:820px){
  .menu-toggle{display:inline-flex}
  .menu-panel{display:none}
  .nav.open .menu-panel{display:block;position:absolute;top:68px;right:20px;background:var(--card);border:1px solid var(--line);border-radius:12px;padding:10px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  .nav.open .menu-panel a{display:block;margin:6px 0;padding:.55rem .8rem;border:1px solid var(--line);border-radius:10px;background:transparent}
}

.hero{padding:96px 0 64px;display:grid;gap:1.2rem;background:
  radial-gradient(1200px 600px at 80% -10%, color-mix(in oklab, var(--brand) 22%, transparent) 0, transparent 60%),
  radial-gradient(1000px 500px at 10% -20%, color-mix(in oklab, var(--brand-2) 18%, transparent) 0, transparent 60%);
  border-bottom:1px solid var(--line)}
.hero h1{font-size:clamp(36px,5.5vw,60px);line-height:1.05;margin:0}
.hero p.hero-subline{font-size:clamp(18px,2.4vw,22px);font-weight:600;color:var(--muted);margin:0}
.cta{display:flex;gap:.8rem;flex-wrap:wrap;margin-top:1rem}
.btn-primary{background:linear-gradient(135deg,var(--brand-accent),#1c3d62);color:#ffffff;font-weight:700;padding:.9rem 1.1rem;border:0;border-radius:12px;cursor:pointer}
.btn-ghost,.btn-cta{background:transparent;color:var(--text);border:1px solid var(--line);padding:.9rem 1.1rem;border-radius:12px;cursor:pointer}

section{padding:64px 0;border-bottom:1px solid var(--line)}
h2{margin:0 0 20px;font-size:clamp(24px,3.2vw,32px)}
.grid{display:grid;gap:20px}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:900px){.cols-3{grid-template-columns:1fr}.cols-2{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px}
ul.clean{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.note{font-size:13px;color:var(--muted)}
.foot{display:grid;gap:8px;color:var(--muted);font-size:14px} .legal{font-size:13px;color:var(--muted)}
input,textarea{width:100%;padding:.8rem;border-radius:10px;border:1px solid var(--line);background:transparent;color:var(--text)}
.success,.error{margin-top:10px;padding:.8rem;border-radius:10px} .success{background:#103b29;color:#a6f0c6;border:1px solid #2b6e55} .error{background:#3b1010;color:#ffb4b4;border:1px solid #6e2b2b}

/* Leistungen – Farbhintergründe & Trenner */
.services .card:nth-child(1){background:linear-gradient(180deg,rgba(30,90,166,0.08),transparent)}
services .card:nth-child(2){background:linear-gradient(180deg,rgba(15,39,65,0.10),transparent)}
.services .card:nth-child(3){background:linear-gradient(180deg,rgba(107,118,131,0.10),transparent)}

/* "Das macht uns aus" – Icons + Nummerierung */
.usp .u-grid{display:grid;gap:20px;grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.usp .u-grid{grid-template-columns:1fr}}
.usp .u-item{display:flex;gap:14px;align-items:flex-start;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px}
.usp .u-num{font-weight:700;font-size:12px;background:rgba(30,90,166,.18);padding:.25rem .5rem;border-radius:999px;min-width:34px;text-align:center;color:var(--text)}

/* Testimonials – Slider */
.slider{position:relative;overflow:hidden} .slides{display:flex;transition:transform .6s ease;will-change:transform}
.slide{min-width:100%;padding:10px 0} .slide .t-grid{display:grid;gap:16px;grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.slide .t-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:800px){.slide .t-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.slide .t-grid{grid-template-columns:1fr}}
.t-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:16px;padding:20px;min-height:150px}
.t-quote{font-size:15px;line-height:1.5;margin:0 0 12px} .t-meta{font-size:13px;color:var(--muted)}
.t-mark{position:absolute;font-size:60px;line-height:1;color:color-mix(in oklab, var(--brand-accent) 30%, transparent);top:-8px;left:12px;opacity:.35;pointer-events:none}
.slider-dots{display:flex;gap:8px;justify-content:center;margin-top:12px}
.slider-dots button{width:8px;height:8px;border-radius:50%;border:0;background:#4a5664;opacity:.6;cursor:pointer}
.slider-dots button.active{opacity:1;background:var(--brand-accent)}