/* ==========================================================================
   K&P Website UI Kit — Component styles (webkit.css)
   Load AFTER ../../colors_and_type.css. Covers the page patterns from
   web-seiten-design.md: polygon hero, service+highlight, academy cards,
   typo divider, nav-tile grid, news grid, CTA arrow band, newsletter card,
   footer, testimonial slider, job cards, benefits grid, event/podcast lists,
   contact form, locations, masterclass rows, bubble nav, sand half-circle,
   tag pills, statement band, zig-zag hub.
   Skin via [data-theme="4good"] → magenta.
   ========================================================================== */

.wk { --accent: var(--kp-dunkelblau); --accent-ink:#fff; font-family: var(--font-sans); color: var(--kp-slate); background:#fff; }
.wk[data-theme="4good"] { --accent: var(--kp-magenta-web); }
.wk * { box-sizing: border-box; }
.wk img { display:block; max-width:100%; }
.wk-container { max-width: 1200px; margin: 0 auto; padding: 0 40px; }

/* ---- Buttons --------------------------------------------------------- */
.wk-btn{ font-family:var(--font-sans); font-weight:600; font-size:14px; letter-spacing:.04em;
  text-transform:uppercase; border-radius:12px; padding:14px 26px; border:1.5px solid transparent;
  cursor:pointer; display:inline-flex; align-items:center; gap:9px; transition:background .18s, color .18s;
  text-decoration:none; line-height:1; }
.wk-btn--primary{ background:var(--accent); color:var(--accent-ink); }
.wk-btn--primary:hover{ filter:brightness(.92); }
.wk-btn--secondary{ background:var(--kp-section); color:var(--accent); border-color:var(--accent); }
.wk-btn--secondary:hover{ background:#EAF2F9; }
.wk-btn--ondark{ background:#fff; color:var(--accent); }
.wk-btn--ondark:hover{ background:rgba(255,255,255,.88); }
.wk-btn .play{ width:18px;height:18px;border-radius:50%;background:currentColor;display:inline-flex;align-items:center;justify-content:center; }
.wk-btn .play::after{ content:""; border-left:6px solid var(--accent); border-top:4px solid transparent; border-bottom:4px solid transparent; margin-left:2px; }

/* ---- Header / nav ---------------------------------------------------- */
.wk-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.97); border-bottom:1px solid var(--kp-border); backdrop-filter:saturate(150%) blur(4px); }
.wk-header-in{ max-width:1280px; margin:0 auto; padding:0 40px; height:74px; display:flex; align-items:center; justify-content:space-between; }
.wk-logo-lockup{ display:flex; align-items:center; gap:10px; }
.wk-logo-lockup img{ height:40px; }
.wk-logo-lockup .sub{ font-weight:600; font-size:13px; line-height:1.1; color:var(--accent); border-left:2px solid var(--kp-border); padding-left:10px; max-width:120px; }
.wk-nav{ display:flex; align-items:center; gap:4px; }
.wk-nav a{ font-weight:400; font-size:15px; color:var(--kp-slate); text-decoration:none; padding:10px 12px; border-radius:8px; position:relative; }
.wk-nav a:hover{ color:var(--accent); }
.wk-nav a.active{ color:var(--accent); font-weight:600; }
.wk-nav a.active::after{ content:""; position:absolute; left:12px; right:12px; top:-1px; height:3px; border-radius:2px; background:var(--accent); }
.wk-breadcrumb{ background:#f1f1f1; }
.wk-breadcrumb .wk-container{ padding-top:9px; padding-bottom:9px; font-size:13px; color:var(--kp-grau); font-weight:300; }

/* ---- Polygon hero ---------------------------------------------------- */
.wk-hero{ background:#ECECEC; position:relative; overflow:hidden; }
.wk-hero-in{ max-width:1200px; margin:0 auto; padding:72px 40px 88px; display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.wk-hero h1{ font-weight:700; font-size:60px; line-height:1.05; color:var(--accent); margin:0; letter-spacing:-0.02em; }
.wk-hero .intro{ font-weight:300; font-size:18px; line-height:1.6; color:var(--kp-slate); margin:22px 0 30px; max-width:480px; }
.wk-hero-photo{ position:relative; aspect-ratio:4/3.2; }
.wk-hero-photo img{ width:100%; height:100%; object-fit:cover;
  clip-path: polygon(12% 0, 100% 4%, 96% 86%, 78% 100%, 0 92%, 4% 22%); }
.wk-hero-photo::before{ content:""; position:absolute; inset:-14px -10px -8px 24px; background:var(--kp-stahlblau); opacity:.55;
  clip-path: polygon(18% 0, 100% 8%, 92% 90%, 70% 100%, 0 86%, 8% 16%); z-index:0; }
.wk-hero-photo img{ position:relative; z-index:1; }

/* ---- Service list + highlight card ----------------------------------- */
.wk-services{ background:#fff; }
.wk-services .grid{ display:grid; grid-template-columns:1fr 1.05fr; gap:48px; align-items:center; margin-top:36px; }
.wk-service-links{ list-style:none; margin:0; padding:0; text-align:right; }
.wk-service-links li{ padding:12px 0; border-bottom:1px solid var(--kp-border); }
.wk-service-links a{ font-weight:600; font-size:19px; color:var(--accent); text-decoration:none; }
.wk-service-links a:hover{ text-decoration:underline; }
.wk-highlight{ background:var(--kp-section); border-radius:18px; padding:34px; position:relative; }
.wk-highlight h3{ font-weight:600; font-size:24px; color:var(--accent); margin:0 0 12px; }
.wk-highlight p{ font-weight:300; font-size:15px; line-height:1.6; color:var(--kp-slate); margin:0 0 18px; }
.wk-highlight .photo{ border-radius:12px; overflow:hidden; aspect-ratio:16/9; margin-bottom:18px; }
.wk-highlight .photo img{ width:100%; height:100%; object-fit:cover; }

/* ---- Section heading ------------------------------------------------- */
.wk-h2{ font-weight:700; font-size:42px; line-height:1.15; color:var(--accent); text-align:center; margin:0; letter-spacing:-0.015em; }
.wk-sub{ font-weight:300; font-size:16px; line-height:1.6; color:var(--kp-grau); text-align:center; max-width:680px; margin:14px auto 0; }
.wk-band{ background:#fff; padding:80px 0; }
.wk-band--subtle{ background:var(--kp-section); }

/* ---- Academy cards --------------------------------------------------- */
.wk-academy{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; max-width:760px; margin:40px auto 0; }
.wk-academy-card{ background:#fff; border:1px solid var(--kp-border); border-radius:16px; overflow:hidden; box-shadow:var(--shadow); }
.wk-academy-card .ph{ aspect-ratio:16/9; overflow:hidden; }
.wk-academy-card .ph img{ width:100%; height:100%; object-fit:cover; }
.wk-academy-card .bd{ padding:22px 24px 26px; }
.wk-academy-card h3{ font-weight:600; font-size:20px; color:var(--accent); margin:0 0 8px; }
.wk-academy-card p{ font-weight:300; font-size:14px; line-height:1.55; color:var(--kp-slate); margin:0 0 16px; }

/* ---- Giant typo divider ---------------------------------------------- */
.wk-typo-divider{ background:var(--kp-section); text-align:center; padding:60px 0; overflow:hidden; }
.wk-typo-divider .big{ font-weight:700; font-size:120px; line-height:1; color:var(--kp-stahlblau); letter-spacing:-0.02em; white-space:nowrap; }
.wk-typo-divider .cap{ font-weight:300; font-size:15px; line-height:1.7; color:var(--kp-slate); max-width:760px; margin:28px auto 0; }

/* ---- Nav-tile grid (polaroid) ---------------------------------------- */
.wk-navtiles{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; max-width:980px; margin:40px auto 0; }
.wk-navtile{ background:#fff; border-radius:6px; padding:10px 10px 0; box-shadow:0 8px 22px rgba(0,92,157,.12); text-align:center; }
.wk-navtile:nth-child(odd){ transform:rotate(-1.2deg); }
.wk-navtile:nth-child(even){ transform:rotate(1.2deg); }
.wk-navtile .ph{ aspect-ratio:1/1; overflow:hidden; border-radius:3px; }
.wk-navtile .ph img{ width:100%; height:100%; object-fit:cover; }
.wk-navtile .lb{ font-weight:600; font-size:16px; color:var(--accent); padding:16px 6px 18px; }

/* ---- News card grid (dark photo overlay) ----------------------------- */
.wk-news{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; max-width:1120px; margin:40px auto 0; }
.wk-news-card{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/11; color:#fff; }
.wk-news-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wk-news-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,40,75,.15),rgba(0,40,75,.85)); }
.wk-news-card .chip{ position:absolute; top:14px; left:14px; z-index:2; background:var(--accent); color:#fff; font-weight:600; font-size:11px; padding:5px 12px; border-radius:7px; }
.wk-news-card .t{ position:absolute; left:18px; right:18px; bottom:18px; z-index:2; font-weight:600; font-size:18px; line-height:1.3; }

/* ---- CTA arrow / chevron band ---------------------------------------- */
.wk-cta{ position:relative; max-width:1120px; margin:0 auto; display:flex; align-items:stretch; min-height:300px; padding:48px 0; }
.wk-cta-photo{ width:300px; flex:none; border-radius:0; overflow:hidden; position:relative; z-index:2; }
.wk-cta-photo img{ width:100%; height:100%; object-fit:cover; }
.wk-cta-flag{ flex:1; background:var(--accent); color:#fff; display:flex; flex-direction:column; justify-content:center; padding:48px 120px 48px 56px;
  clip-path: polygon(0 0, calc(100% - 90px) 0, 100% 50%, calc(100% - 90px) 100%, 0 100%); }
.wk-cta-flag h2{ font-weight:700; font-size:38px; line-height:1.1; margin:0 0 14px; letter-spacing:-0.01em; }
.wk-cta-flag p{ font-weight:300; font-size:16px; line-height:1.6; margin:0 0 24px; max-width:420px; color:rgba(255,255,255,.92); }

/* ---- Footer + overlapping newsletter card ---------------------------- */
.wk-footer-wrap{ position:relative; background:var(--accent); }
.wk-footer{ max-width:1200px; margin:0 auto; padding:64px 40px 48px; display:grid; grid-template-columns:1.2fr 1fr; gap:40px; color:#fff; }
.wk-footer h4{ font-weight:600; font-size:15px; margin:0 0 14px; }
.wk-footer a{ color:rgba(255,255,255,.85); text-decoration:none; font-weight:300; font-size:14px; display:block; padding:5px 0; }
.wk-footer a:hover{ color:#fff; }
.wk-foot-social{ display:flex; gap:10px; margin-bottom:10px; }
.wk-foot-social span{ width:34px; height:34px; border-radius:50%; background:rgba(255,255,255,.15); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:600; color:#fff; }
.wk-awards{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.wk-awards img{ height:60px; border-radius:6px; }
.wk-newsletter{ background:#fff; border-radius:18px 0 0 18px; box-shadow:-10px 0 40px rgba(0,0,0,.12); padding:36px 40px; }
.wk-newsletter h3{ font-weight:600; font-size:20px; color:var(--accent); margin:0 0 22px; line-height:1.3; }
.wk-nl-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.wk-nl-grid .full{ grid-column:1 / -1; }

/* ---- Inputs (rounded outline) ---------------------------------------- */
.wk-input, .wk-select, .wk-textarea{ width:100%; font-family:var(--font-sans); font-weight:300; font-size:15px;
  padding:14px 16px; border:1.5px solid var(--accent); border-radius:12px; color:var(--kp-slate); background:#fff; }
.wk-input::placeholder, .wk-textarea::placeholder{ color:#9aa3ad; }
.wk-select{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%); background-position:calc(100% - 20px) 20px,calc(100% - 14px) 20px; background-size:6px 6px,6px 6px; background-repeat:no-repeat; }
.wk-input:focus,.wk-select:focus,.wk-textarea:focus{ outline:3px solid var(--kp-dunkelblau-20); }
.wk-check{ display:flex; gap:10px; align-items:flex-start; font-weight:300; font-size:13px; line-height:1.5; color:var(--kp-slate); }
.wk-check input{ margin-top:3px; flex:none; width:16px; height:16px; accent-color:var(--accent); }

/* ---- Testimonial slider ---------------------------------------------- */
.wk-testi{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; max-width:1080px; margin:44px auto 0; }
.wk-testi-card{ background:#fff; border-radius:16px; box-shadow:var(--shadow); padding:28px; }
.wk-testi-card .q{ font-weight:400; font-size:16px; line-height:1.55; color:var(--kp-stahlblau); margin:0 0 18px; }
.wk-testi-card .who{ display:flex; align-items:center; gap:12px; }
.wk-testi-card .av{ width:46px; height:46px; border-radius:50%; object-fit:cover; }
.wk-testi-card .nm{ font-weight:600; font-size:15px; color:var(--accent); }
.wk-testi-card .ro{ font-weight:300; font-size:13px; color:var(--kp-grau); }
.wk-dots{ display:flex; gap:9px; justify-content:center; margin-top:28px; }
.wk-dots span{ width:10px; height:10px; border-radius:50%; background:var(--kp-dunkelblau-40); }
.wk-dots span.on{ background:var(--accent); }

/* ---- Job cards ------------------------------------------------------- */
.wk-jobs{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; max-width:1080px; margin:40px auto 0; }
.wk-job-card{ position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/9; color:#fff; }
.wk-job-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.wk-job-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg,rgba(0,60,110,.85),rgba(0,40,75,.45)); }
.wk-job-card .t{ position:absolute; inset:auto 20px 20px; z-index:2; font-weight:600; font-size:17px; line-height:1.3; }

/* ---- Benefits icon grid ---------------------------------------------- */
.wk-benefits{ display:grid; grid-template-columns:repeat(4,1fr); gap:30px 24px; max-width:980px; margin:40px auto 0; }
.wk-benefit{ text-align:center; }
.wk-benefit img{ width:64px; margin:0 auto 14px; }
.wk-benefit .lb{ font-weight:600; font-size:15px; color:var(--accent); }

/* ---- Event / course list rows ---------------------------------------- */
.wk-events{ max-width:1080px; margin:36px auto 0; display:flex; flex-direction:column; gap:18px; }
.wk-event-row{ display:grid; grid-template-columns:200px 1fr auto; gap:24px; align-items:center; background:#fff; border:1px solid var(--kp-border); border-radius:14px; padding:18px; box-shadow:var(--shadow-sm); }
.wk-event-row .ph{ width:200px; aspect-ratio:16/10; border-radius:10px; overflow:hidden; }
.wk-event-row .ph img{ width:100%; height:100%; object-fit:cover; }
.wk-event-row h3{ font-weight:600; font-size:19px; color:var(--accent); margin:0 0 6px; }
.wk-event-row p{ font-weight:300; font-size:14px; line-height:1.5; color:var(--kp-slate); margin:0 0 10px; }
.wk-meta{ display:flex; gap:8px; flex-wrap:wrap; }
.wk-tag{ font-weight:600; font-size:12px; padding:5px 12px; border-radius:7px; background:var(--kp-section); color:var(--accent); }
.wk-tag--rot{ background:#FBE7E7; color:#C0392B; }
.wk-event-side{ text-align:right; display:flex; flex-direction:column; gap:8px; align-items:flex-end; }
.wk-event-side .date{ font-weight:600; font-size:13px; color:var(--kp-slate); }

/* ---- Podcast list ---------------------------------------------------- */
.wk-podcast{ max-width:980px; margin:36px auto 0; display:flex; flex-direction:column; gap:16px; }
.wk-pod-row{ display:grid; grid-template-columns:96px 1fr auto; gap:20px; align-items:center; background:#fff; border:1px solid var(--kp-border); border-radius:14px; padding:16px; }
.wk-pod-row .cover{ width:96px; height:96px; border-radius:10px; overflow:hidden; background:var(--accent); }
.wk-pod-row .cover img{ width:100%; height:100%; object-fit:cover; }
.wk-pod-row h3{ font-weight:600; font-size:17px; color:var(--accent); margin:0 0 5px; }
.wk-pod-row p{ font-weight:300; font-size:13px; line-height:1.5; color:var(--kp-slate); margin:0 0 8px; }
.wk-play-btn{ flex:none; width:52px; height:52px; border-radius:50%; background:var(--accent); border:0; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.wk-play-btn::after{ content:""; border-left:16px solid #fff; border-top:10px solid transparent; border-bottom:10px solid transparent; margin-left:4px; }

/* ---- Locations band -------------------------------------------------- */
.wk-locations{ background:var(--kp-section); padding:72px 0; text-align:center; }
.wk-loc-cities{ display:flex; flex-wrap:wrap; justify-content:center; gap:18px 56px; margin-top:48px; }
.wk-loc-cities span{ font-weight:600; font-size:24px; color:var(--accent); }

/* ---- Masterclass video rows ------------------------------------------ */
.wk-mc-row{ display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; max-width:1080px; margin:0 auto 48px; }
.wk-video{ position:relative; aspect-ratio:16/9; border-radius:12px; overflow:hidden; background:#0b2238; }
.wk-video img{ width:100%; height:100%; object-fit:cover; opacity:.9; }
.wk-video .ov{ position:absolute; inset:0; display:flex; flex-direction:column; justify-content:space-between; padding:18px 20px; }
.wk-video .badge{ display:inline-flex; align-items:center; gap:7px; background:rgba(255,255,255,.92); color:var(--accent); font-weight:600; font-size:12px; padding:5px 10px; border-radius:7px; align-self:flex-start; }
.wk-video .badge img{ height:16px; width:auto; }
.wk-video .ttl{ font-weight:700; font-size:26px; color:#fff; line-height:1.1; text-shadow:0 2px 12px rgba(0,0,0,.5); max-width:70%; }
.wk-video .ytlogo{ position:absolute; right:12px; bottom:10px; font-weight:700; font-size:13px; color:#fff; background:rgba(0,0,0,.4); padding:2px 6px; border-radius:4px; }
.wk-play-red{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:74px; height:52px; border-radius:14px; background:#FF0000; display:flex; align-items:center; justify-content:center; }
.wk-play-red::after{ content:""; border-left:20px solid #fff; border-top:12px solid transparent; border-bottom:12px solid transparent; margin-left:4px; }
.wk-mc-row h2{ font-weight:700; font-size:32px; color:var(--accent); margin:0 0 16px; line-height:1.15; }
.wk-mc-row ul{ margin:0 0 18px; padding-left:20px; }
.wk-mc-row li{ font-weight:300; font-size:16px; line-height:1.6; color:var(--kp-slate); margin-bottom:6px; }

/* ---- Bubble nav (Beratungswelten overview) --------------------------- */
.wk-bubbles{ max-width:1000px; margin:20px auto 0; display:flex; flex-wrap:wrap; justify-content:center; gap:28px 40px; }
.wk-bubble{ width:170px; height:170px; border-radius:50%; background:var(--accent); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:16px; text-decoration:none; transition:transform .18s; }
.wk-bubble:hover{ transform:scale(1.05); }
.wk-bubble img{ width:46px; margin-bottom:10px; filter:brightness(0) invert(1); }
.wk-bubble .lb{ font-weight:600; font-size:15px; line-height:1.2; }
.wk-bubble:nth-child(even){ margin-top:48px; }

/* ---- Sand half-circle deco ------------------------------------------- */
.wk-sand{ position:absolute; right:0; top:80px; width:120px; height:240px; background:var(--kp-sand);
  border-radius:120px 0 0 120px; z-index:0; pointer-events:none; }

/* ---- Tag pill cloud -------------------------------------------------- */
.wk-tags{ display:flex; flex-wrap:wrap; gap:12px; justify-content:center; max-width:820px; margin:32px auto 0; }
.wk-pill{ font-weight:600; font-size:14px; padding:10px 20px; border-radius:24px; border:1.5px solid var(--accent); color:var(--accent); background:#fff; cursor:pointer; }
.wk-pill:hover{ background:var(--accent); color:#fff; }

/* ---- Full-width statement band --------------------------------------- */
.wk-statement{ background:var(--accent); color:#fff; padding:72px 0; }
.wk-statement .t{ font-weight:600; font-size:34px; line-height:1.3; max-width:900px; margin:0 auto; text-align:center; }

/* ---- Zig-zag hub teaser ---------------------------------------------- */
.wk-zig{ padding:72px 0; }
.wk-zig .row{ max-width:980px; margin:0 auto; text-align:center; }
.wk-zig.left .row{ text-align:left; max-width:560px; margin-left:auto; margin-right:auto; }
.wk-zig h2{ font-weight:700; font-size:36px; line-height:1.15; color:var(--accent); margin:0 0 12px; letter-spacing:-0.01em; }
.wk-zig .sl{ font-weight:600; font-size:15px; color:var(--kp-stahlblau); margin:0 0 10px; }
.wk-zig p{ font-weight:300; font-size:16px; line-height:1.6; color:var(--kp-slate); margin:0 0 22px; }

/* ==========================================================================
   Refinements (CD-Politur) — additiv ans Dateiende, ueberschreibt fruehere
   Defaults bewusst via Kaskade. Quelle: Design-Gap-Analyse gegen K+P-CD.
   ========================================================================== */

/* Card-Hover = Shadow-Lift (CD: KEIN Transform / keine Skalierung) */
.wk-academy-card, .blog-card, .wk-testi-card, .wk-event-row,
.wk-news-card, .wk-job-card, .wk-navtile{ transition: box-shadow .2s ease; }
.wk-academy-card:hover, .blog-card:hover, .wk-testi-card:hover, .wk-event-row:hover,
.wk-news-card:hover, .wk-job-card:hover, .wk-navtile:hover{ box-shadow: var(--shadow-lg); }
/* Foto-News-Cards: Overlay on hover etwas verdichten (CD-konforme Verdunkelung) */
.wk-news-card:hover::after{ background: linear-gradient(180deg, rgba(0,40,75,.22), rgba(0,40,75,.92)); }

/* Weiche Mikro-Interaktionen auf interaktiven Links (150-250ms ease) */
.wk-nav a, .wk-footer a, .wk-service-links a{ transition: color .18s ease; }

/* Konsistenter, sichtbarer Tastatur-Focus (Barrierefreiheit) */
.wk-btn:focus-visible{ outline: 3px solid var(--kp-dunkelblau-40); outline-offset: 2px; }
.wk-input:focus, .wk-select:focus, .wk-textarea:focus{ outline-offset: 1px; }

/* CTA-Pfeilband: ruhiger Section-Rahmen (statt Inline-Style) + Foto fuellt die Flag */
.wk-cta-section{ background:#fff; padding: 48px 0; }
.wk-cta-photo{ min-height: 300px; }

/* Statement-Band: warmer Beige-Akzent (CD: Beige nur auf dunklem Grund) */
.wk-statement .t::before{ content:""; display:block; width:48px; height:3px;
  background: var(--kp-beige); border-radius:2px; margin:0 auto 24px; }

/* Subtiler Section-Rhythmus: Akzent-Baender etwas luftiger */
.wk-band--subtle{ padding: 88px 0; }