/*
Theme Name: CREATORWALL
Theme URI: https://creatorwall.de
Description: Landingpage-Theme fuer CREATORWALL - magnetische Studiosysteme fuer Creator, Agenturen und Marken.
Version: 3.0
Author: WESPRO Retaildesign
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: creatorwall
*/

/* ==========================================================================
   SCHRIFTEN - lokal eingebunden (DSGVO)
   Archivo und IBM Plex Mono liegen in /assets/fonts/ und werden vom eigenen
   Server ausgeliefert. Keine Anfrage an Google oder sonst jemanden.
   Beide unter SIL Open Font License, Lizenztexte im selben Ordner.
   ========================================================================== */
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo-600.woff2") format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo-700.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Archivo";src:url("assets/fonts/archivo-800.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("assets/fonts/plexmono-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("assets/fonts/plexmono-500.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}

:root{
  --paper:#F4F3F1;
  --paper-2:#EAE8E4;
  --ink:#131315;
  --ink-2:#1C1C20;
  --ink-3:#26262B;
  --muted:#75757C;
  --muted-lt:rgba(244,243,241,.58);
  --line:rgba(19,19,21,.13);
  --line-lt:rgba(244,243,241,.16);
  --brass:#A8935F;
  --r:6px;
  --r-lg:10px;
  --sans:"Archivo", -apple-system, "Segoe UI", Helvetica, sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, monospace;
  --pad:clamp(20px,4vw,44px);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.6; font-weight:400;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}
:focus-visible{outline:2px solid var(--brass); outline-offset:3px}
.wrap{max-width:1320px; margin:0 auto; padding:0 var(--pad)}
.sec{padding:clamp(72px,9vw,132px) 0}
.sec-tight{padding:0 0 clamp(72px,9vw,132px)}

/* ---------- type ---------- */
h1,h2,h3,h4{margin:0; font-weight:700; letter-spacing:-.025em; line-height:1.04}
.h-xl{font-size:clamp(38px,6.6vw,86px); font-weight:800; letter-spacing:-.038em; line-height:.94; text-transform:uppercase}
.h-lg{font-size:clamp(30px,3.9vw,54px); font-weight:700; letter-spacing:-.032em; line-height:1.02}
.h-md{font-size:clamp(22px,2.2vw,30px); font-weight:600; letter-spacing:-.02em}
.h-sm{font-size:18px; font-weight:600; letter-spacing:-.015em}
.label{font-family:var(--mono); font-size:11px; font-weight:400; letter-spacing:.16em; text-transform:uppercase; color:var(--muted)}
.label-lt{color:var(--muted-lt)}
.lead{font-size:clamp(16px,1.25vw,18px); color:var(--muted); max-width:62ch; line-height:1.62; margin:0}
.lead-lt{color:var(--muted-lt)}
.rule{height:1px; background:var(--line); border:0; margin:0}
.rule-lt{background:var(--line-lt)}

/* section header pattern */
.sec-head{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,80px); align-items:end; padding-bottom:44px}
.sec-head .label{display:block; margin-bottom:20px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:12px; font-family:var(--sans);
  font-size:14px; font-weight:600; letter-spacing:.01em; line-height:1;
  padding:17px 28px; border:1px solid transparent; border-radius:var(--r);
  cursor:pointer; text-decoration:none; transition:background .2s, color .2s, border-color .2s;
}
.btn .ar{font-family:var(--mono); font-size:13px; font-weight:400}
.btn-dark{background:var(--ink); color:var(--paper)}
.btn-dark:hover{background:var(--ink-3)}
.btn-brass{background:var(--brass); color:var(--ink)}
.btn-brass:hover{background:#B9A472}
.btn-line{background:transparent; border-color:var(--line); color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-line-lt{background:transparent; border-color:var(--line-lt); color:var(--paper)}
.btn-line-lt:hover{border-color:var(--paper)}
.btn-sm{padding:12px 20px; font-size:13px}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:80; background:rgba(244,243,241,.92); backdrop-filter:blur(12px); border-bottom:1px solid transparent; transition:border-color .3s}
.hdr.stuck{border-bottom-color:var(--line)}
.hdr-in{display:flex; align-items:center; gap:28px; height:74px}
.brand{display:flex; align-items:center; gap:11px; text-decoration:none; flex-shrink:0}
.brand svg{width:26px; height:26px; display:block}
.brand-word{font-size:16px; font-weight:700; letter-spacing:.16em; text-transform:uppercase}
.brand-word span{color:var(--brass)}
.nav{display:flex; gap:30px; margin-left:16px}
.nav a{text-decoration:none; font-size:14px; font-weight:500; color:var(--muted); transition:color .18s}
.nav a:hover{color:var(--ink)}
.hdr-right{margin-left:auto; display:flex; align-items:center; gap:14px}
.saved-pill{
  display:inline-flex; align-items:center; gap:9px; background:none; border:1px solid var(--line);
  border-radius:var(--r); padding:11px 16px; font-family:var(--sans); font-size:13px; font-weight:500;
  color:var(--ink); cursor:pointer; transition:border-color .18s;
}
.saved-pill:hover{border-color:var(--ink)}
.saved-pill b{font-family:var(--mono); font-weight:500; color:var(--brass)}
.burger{display:none; width:44px; height:44px; border:1px solid var(--line); border-radius:var(--r); background:none; cursor:pointer; align-items:center; justify-content:center}
.burger i{display:block; width:16px; height:1.5px; background:var(--ink); position:relative}
.burger i::before,.burger i::after{content:""; position:absolute; left:0; width:16px; height:1.5px; background:var(--ink)}
.burger i::before{top:-5px} .burger i::after{top:5px}

/* ---------- hero ---------- */
.hero{
  position:relative; background:var(--ink); color:var(--paper);
  display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;
  min-height:clamp(540px, 84vh, 880px);
}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media .hero-img{width:100%; height:100%; object-fit:cover; display:block}
/* Verlauf: links dunkel fuer den Text, unten dunkel fuer den Uebergang. */
.hero-veil{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(100deg, rgba(19,19,21,.94) 0%, rgba(19,19,21,.82) 34%, rgba(19,19,21,.34) 62%, rgba(19,19,21,.12) 100%),
    linear-gradient(to top, rgba(19,19,21,.92) 0%, rgba(19,19,21,0) 46%);
}
.hero-in{position:relative; z-index:2; width:100%; padding-top:clamp(90px,14vh,150px); padding-bottom:clamp(56px,8vh,96px)}
.hero-copy{max-width:660px}
.hero h1{margin:22px 0 26px}
.hero .accent{color:var(--brass)}
.hero .lead-lt{color:rgba(244,243,241,.78)}
.hero-actions{display:flex; flex-wrap:wrap; gap:12px; margin:34px 0 42px}
.trust{display:grid; grid-template-columns:repeat(3,auto); gap:clamp(24px,4vw,56px); justify-content:start; border-top:1px solid rgba(244,243,241,.22); padding-top:26px}
.trust div{display:flex; flex-direction:column; gap:5px}
.trust b{font-size:26px; font-weight:700; letter-spacing:-.02em}
.trust span{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:rgba(244,243,241,.62)}

/* Ohne hinterlegtes Bild bleibt eine ruhige dunkle Flaeche. */
.hero:not(.has-media){min-height:auto}
.hero:not(.has-media) .hero-in{padding-top:clamp(56px,7vw,96px)}

.hero-scroll{
  position:absolute; left:50%; bottom:22px; z-index:3; transform:translateX(-50%);
  width:26px; height:42px; border:1px solid rgba(244,243,241,.4); border-radius:14px;
  display:flex; justify-content:center; padding-top:8px;
}
.hero-scroll span{width:2px; height:8px; border-radius:1px; background:rgba(244,243,241,.75); animation:cwScroll 1.9s ease-in-out infinite}
@keyframes cwScroll{0%{transform:translateY(0); opacity:1}70%{transform:translateY(12px); opacity:0}100%{opacity:0}}
.hero:not(.has-media) .hero-scroll{display:none}

/* Zeichnung, jetzt in Abschnitt 01 */
.sys-draw{display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); gap:clamp(28px,4vw,56px); align-items:center; padding-bottom:clamp(44px,6vw,72px)}
.sys-note h3{margin-bottom:22px}
.sys-list{list-style:none; margin:0; padding:0; counter-reset:none}
.sys-list li{display:grid; grid-template-columns:auto 1fr; gap:4px 16px; padding:16px 0; border-top:1px solid var(--line)}
.sys-list li:last-child{border-bottom:1px solid var(--line)}
.sys-list i{grid-row:span 2; font-family:var(--mono); font-style:normal; font-size:11px; color:var(--brass); letter-spacing:.1em; padding-top:4px}
.sys-list b{font-size:15.5px; font-weight:600}
.sys-list span{font-size:14.5px; color:var(--muted); line-height:1.6}

/* Wandansicht mit antippbaren Punkten */
.wallview{position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2)}
.wallview img{display:block; width:100%; height:auto}
.wallview .pin{
  position:absolute; transform:translate(-50%,-50%); z-index:2;
  width:34px; height:34px; border-radius:50%; cursor:pointer; padding:0;
  background:rgba(19,19,21,.6); border:1.5px solid rgba(244,243,241,.75);
  backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  transition:background .2s, border-color .2s, transform .2s;
}
.wallview .pin span{font-family:var(--mono); font-size:10.5px; color:var(--paper); letter-spacing:.04em}
.wallview .pin::after{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:1px solid rgba(244,243,241,.4); opacity:0; transition:opacity .2s;
}
.wallview .pin:hover,.wallview .pin:focus-visible,.wallview .pin.hot{
  background:var(--brass); border-color:var(--brass); transform:translate(-50%,-50%) scale(1.12);
}
.wallview .pin:hover span,.wallview .pin.hot span{color:var(--ink)}
.wallview .pin.hot::after{opacity:1}
.wallview-cap{
  position:absolute; left:0; right:0; bottom:0; z-index:3;
  display:flex; justify-content:space-between; gap:16px; padding:26px 22px 16px;
  background:linear-gradient(to top, rgba(19,19,21,.82), rgba(19,19,21,0));
}
.wallview-cap span{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase}
.wv-hint{color:rgba(244,243,241,.6)}
.wv-read{color:var(--brass); text-align:right; transition:color .2s}
.wallview.probing .wv-read{color:var(--paper)}

/* Foto im Abschnitt „Das System" */
.sys-shot{margin:0 0 clamp(48px,6vw,80px); position:relative}
.sys-shot img{width:100%; height:auto; display:block; border-radius:var(--r-lg)}
/* Sicherheitsnetz: ein hochformatiges Bild wuerde den Abschnitt sprengen. */
@supports (aspect-ratio:1){
  .sys-shot img{aspect-ratio:16/9; object-fit:cover; object-position:center}
}
.sys-shot figcaption{
  margin-top:14px; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--muted);
}

/* Modulkatalog */
.modcat{padding-bottom:clamp(48px,6vw,80px)}
.modcat-head{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,80px); align-items:end; padding-bottom:30px}
.modcat-head .label{display:block}
.modgrid{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden}
.modtile{background:var(--paper); padding:22px 18px 20px; transition:background .2s}
.modtile:hover{background:#fff}
.modtile-art{margin-bottom:16px}
.modtile-art svg{display:block; width:100%; height:auto}
.modtile h4{font-size:14.5px; font-weight:600; letter-spacing:-.01em; margin:0 0 5px}
.modtile-spec{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

@media(max-width:1080px){
  .modgrid{grid-template-columns:repeat(4,1fr)}
}
@media(max-width:860px){
  .modcat-head{grid-template-columns:1fr; align-items:start; gap:14px}
  .modgrid{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:600px){
  .modgrid{grid-template-columns:repeat(2,1fr)}
  .modtile{padding:16px 14px 16px}
}

/* keyword band */
.band{border-top:1px solid var(--line-lt); border-bottom:1px solid var(--line-lt); background:var(--ink)}
.band-in{display:flex; flex-wrap:wrap; gap:clamp(18px,3vw,44px); justify-content:space-between; padding:20px 0}
.band-in span{font-family:var(--mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:var(--muted-lt)}

/* ---------- system / USP ---------- */
.usp{display:grid; grid-template-columns:repeat(5,1fr); gap:14px; margin-bottom:clamp(56px,7vw,96px)}
.uspcard{
  background:var(--paper-2); border-radius:var(--r-lg); padding:26px 22px 28px;
  display:flex; flex-direction:column; transition:background .2s, transform .2s;
}
.uspcard:hover{background:#fff; transform:translateY(-3px)}
.uspcard-icon{display:block; width:40px; height:40px; margin-bottom:22px}
.uspcard-icon svg{display:block; width:100%; height:100%}
.uspcard .n{font-family:var(--mono); font-size:10.5px; letter-spacing:.14em; color:var(--brass); display:block; margin-bottom:8px}
.uspcard h3{margin-bottom:10px}
.uspcard p{margin:0; font-size:14.5px; color:var(--muted); line-height:1.6}

/* ==========================================================================
   RHYTHMUS DER ABSCHNITTE
   Hell, dunkel, getönt im Wechsel — damit die Seite nach dem Kopfbereich
   nicht in eine Folge gleicher weißer Blöcke zerfällt.
   ========================================================================== */

/* Getönt: setzt sich vom Papierweiß ab, ohne hart zu werden */
.sec.tinted{background:var(--paper-2)}
.sec.tinted .card{background:var(--paper); border-color:rgba(19,19,21,.1)}
.sec.tinted .filters button{background:var(--paper)}
.sec.tinted .filters button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}

/* Dunkel: derselbe Aufbau, invertiert */
.sec.onnight{background:var(--ink); color:var(--paper)}
.sec.onnight .label{color:var(--muted-lt)}
.sec.onnight .lead{color:var(--muted-lt)}
.sec.onnight .aud-tabs button{border-color:var(--line-lt); color:rgba(244,243,241,.62)}
.sec.onnight .aud-tabs button:hover{color:var(--paper); border-color:var(--paper)}
.sec.onnight .aud-tabs button[aria-selected="true"]{background:var(--brass); color:var(--ink); border-color:var(--brass)}
.sec.onnight 
.sec.onnight .aud-meta{border-top-color:var(--line-lt)}
.sec.onnight .aud-meta dt{color:var(--muted-lt)}
.sec.onnight .btn-line{border-color:var(--line-lt); color:var(--paper)}
.sec.onnight .btn-line:hover{border-color:var(--paper)}
.sec.onnight .cw-empty{border-color:var(--line-lt); color:var(--muted-lt)}
.sec.onnight .card{background:var(--ink-2); border-color:rgba(244,243,241,.14)}
.sec.onnight .card:hover{border-color:rgba(244,243,241,.4)}
.sec.onnight .card-body h4{color:var(--paper)}
.sec.onnight .card-body .meta{color:rgba(244,243,241,.55)}
.sec.onnight .card-cat{background:rgba(19,19,21,.8); color:rgba(244,243,241,.85)}
.sec.onnight .card-save{background:rgba(19,19,21,.82); color:var(--paper)}
.sec.onnight .card.on .card-save{background:var(--brass); color:var(--ink)}

/* Bildband über die volle Fensterbreite */
.breakband{position:relative; display:flex; align-items:center; min-height:clamp(300px,46vh,560px); overflow:hidden; background:var(--ink)}
.breakband-media{position:absolute; inset:0}
.breakband-media img{width:100%; height:100%; object-fit:cover; display:block}
.breakband-veil{position:absolute; inset:0; background:linear-gradient(90deg, rgba(19,19,21,.78) 0%, rgba(19,19,21,.42) 55%, rgba(19,19,21,.12) 100%)}
.breakband-in{position:relative; z-index:2}
.breakband-in p{margin:0; color:var(--paper); max-width:18ch}

/* Abschluss: Messingfläche als Schlusspunkt. Sitzt direkt hinter dem
   dunklen Anfrageteil und bricht die Seite am Ende bewusst auf. */
.closing{background:var(--brass); color:var(--ink); text-align:center}
.closing .label{color:rgba(19,19,21,.6)}
.closing h2{font-size:clamp(42px,8vw,118px); margin-bottom:40px}
.closing .btn-dark{background:var(--ink); color:var(--paper)}
.closing .btn-dark:hover{background:var(--ink-3)}

/* Übergang vom Bildband in den dunklen Ablauf abfedern */

/* ---------- audience ---------- */
.aud-tabs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:clamp(40px,5vw,64px)}
.aud-tabs button{
  background:none; border:1px solid var(--line); border-radius:var(--pill);
  font-family:var(--sans); font-size:14px; font-weight:600; color:var(--muted);
  padding:13px 24px; cursor:pointer; letter-spacing:-.005em;
  transition:background .2s, color .2s, border-color .2s;
}
.aud-tabs button:hover{color:var(--ink); border-color:var(--ink)}
.aud-tabs button[aria-selected="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}

/* Reiterinhalt: Einordnung links, ein echtes Beispiel rechts */
.aud-panel{
  display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(30px,4.5vw,72px); align-items:center;
  padding:clamp(34px,4vw,54px) 0 clamp(48px,6vw,76px);
  border-top:1px solid var(--line);
}
.aud-panel.hide{display:none}
.sec.onnight .aud-panel{border-top-color:var(--line-lt)}
.aud-side .label{display:block; margin-bottom:14px}
.aud-side h3{margin-bottom:16px}
.aud-side .lead{margin-bottom:0}
.aud-meta{display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:30px 0 32px; border-top:1px solid var(--line); padding-top:24px}
.sec.onnight .aud-meta{border-top-color:var(--line-lt)}
.aud-meta div{display:flex; flex-direction:column; gap:7px}
.aud-meta dt{font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted)}
.sec.onnight .aud-meta dt{color:var(--muted-lt)}
.aud-meta dd{margin:0; font-size:15.5px; font-weight:500}

/* Das ausgewählte Beispiel */
.aud-lead{margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2); position:relative}
.aud-lead img,.aud-lead svg{display:block; width:100%; height:auto}
.aud-lead figcaption{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; flex-direction:column; gap:4px; padding:40px 20px 18px;
  background:linear-gradient(to top, rgba(19,19,21,.88), rgba(19,19,21,0));
}
.aud-lead figcaption b{font-size:16px; font-weight:600; color:var(--paper)}
.aud-lead figcaption span{font-family:var(--mono); font-size:10.5px; letter-spacing:.11em; text-transform:uppercase; color:rgba(244,243,241,.62)}

/* Beim Reiterwechsel blenden Text und Beispiel versetzt auf */
.aud-panel.swap .aud-side{animation:audIn .4s cubic-bezier(.2,.7,.2,1) both}
.aud-panel.swap .aud-lead{animation:audIn .4s cubic-bezier(.2,.7,.2,1) .08s both}
@keyframes audIn{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}

/* Weitere Beispiele */
.more{border-top:1px solid var(--line); padding-top:clamp(40px,5vw,60px)}
.sec.onnight .more{border-top-color:var(--line-lt)}
.more-head{display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:34px}
.more-head p{margin:0; font-size:clamp(15px,1.2vw,17px); line-height:1.6; color:var(--muted); max-width:46ch}
@media(max-width:860px){.more-head{grid-template-columns:1fr; align-items:start; gap:14px}}
.sec.onnight .more-head p{color:var(--muted-lt)}

/* Abschließender Aufhänger */
/* Abschließender Aufhänger: eigener Block, damit er nicht im Raum steht */
.more-cta{
  margin-top:clamp(44px,5vw,68px);
  border:1px solid var(--line-lt); border-radius:var(--r-lg);
  padding:clamp(30px,3.5vw,46px) clamp(26px,3vw,44px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
  background:rgba(244,243,241,.04);
}
.more-cta p{margin:0; max-width:22ch; font-size:clamp(26px,3vw,40px); line-height:1.08; letter-spacing:-.03em; font-weight:700}
.more-cta .btn{flex-shrink:0}

@media(max-width:860px){
  .aud-panel{grid-template-columns:1fr; gap:28px}
  .more-cta{flex-direction:column; align-items:flex-start}
}
@media(max-width:600px){
  .aud-meta{grid-template-columns:1fr; gap:18px}
}

/* ---------- inspiration / masonry ---------- */
.filters{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:34px}
.filters button{
  background:none; border:1px solid var(--line); border-radius:var(--r);
  font-family:var(--sans); font-size:13.5px; font-weight:500; color:var(--ink);
  padding:11px 18px; cursor:pointer; transition:background .2s, color .2s, border-color .2s;
}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.masonry{columns:4; column-gap:22px}
.card{
  break-inside:avoid; margin:0 0 22px; position:relative;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:var(--paper);
  transition:border-color .22s, transform .22s;
}
.card:hover{border-color:rgba(19,19,21,.34)}
.card-img{position:relative; display:block; line-height:0}
.card-img svg{width:100%; height:auto; display:block}
.card-cat{
  position:absolute; top:12px; left:12px; z-index:2;
  font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase;
  background:rgba(244,243,241,.93); color:var(--ink); padding:6px 10px; border-radius:3px;
}
.card-save{
  position:absolute; top:11px; right:11px; z-index:2; opacity:0;
  background:rgba(244,243,241,.93); border:0; border-radius:3px; padding:7px 12px;
  font-family:var(--sans); font-size:12px; font-weight:600; color:var(--ink); cursor:pointer;
  transition:opacity .2s, background .2s, color .2s;
}
.card:hover .card-save,.card:focus-within .card-save{opacity:1}
.card.on .card-save{opacity:1; background:var(--brass); color:var(--ink)}
.card.on{border-color:var(--brass)}
.card-body{padding:16px 18px 18px}
.card-body h4{font-size:15.5px; font-weight:600; margin-bottom:5px}
.card-body .meta{font-family:var(--mono); font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}

/* ---------- process ---------- */
/* Hell gehalten: davor liegen Bildband und dunkler Beispielteil,
   drei dunkle Blöcke am Stück wären zu viel. */
.proc{background:var(--paper-2)}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px}
.steps article{
  position:relative; background:var(--paper); border-radius:var(--r-lg);
  padding:28px 24px 30px; overflow:hidden;
  transition:transform .2s, box-shadow .2s;
}
.steps article:hover{transform:translateY(-3px); box-shadow:0 18px 40px -26px rgba(19,19,21,.5)}
.step-icon{display:block; width:40px; height:40px; margin-bottom:26px; position:relative; z-index:2}
.step-icon svg{display:block; width:100%; height:100%}
/* Große Ziffer als stille Nummerierung im Hintergrund */
.step-n{
  position:absolute; right:14px; top:2px; z-index:1;
  font-family:var(--sans); font-weight:800; font-size:76px; line-height:1;
  letter-spacing:-.05em; color:var(--ink); opacity:.07; pointer-events:none;
}
.steps h3{margin-bottom:11px; position:relative; z-index:2}
.steps p{margin:0; font-size:14.5px; color:var(--muted); line-height:1.6; position:relative; z-index:2}

@media(max-width:980px){
  .steps{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .steps{grid-template-columns:1fr}
  .step-n{font-size:58px}
}

/* ---------- brands ---------- */
.brandstage{margin-bottom:clamp(44px,5vw,68px)}

/* Ohne Bilder: Platzhalter, der sagt was hierhin gehört */
.compare-empty{
  border:1px dashed var(--line); border-radius:var(--r-lg);
  padding:clamp(44px,6vw,80px) clamp(26px,4vw,56px); text-align:center;
}
.compare-empty p:first-child{margin:0 0 12px}
.compare-empty p:last-child{margin:0 auto; max-width:52ch; font-size:14.5px; color:var(--muted); line-height:1.6}

/* Die vier Punkte als Karten statt als Liste */
.bgrid{list-style:none; margin:0 0 clamp(44px,5vw,64px); padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:14px}
.bgrid li{background:var(--paper-2); border-radius:var(--r-lg); padding:26px 24px 30px; display:flex; flex-direction:column; gap:16px}
.bgrid-n{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--brass)}
.bgrid p{margin:0; font-size:16px; line-height:1.5; letter-spacing:-.01em; font-weight:500}

/* Abschließender Aufhänger des Abschnitts */
.brandcta{
  border-top:1px solid var(--line); padding-top:clamp(34px,4vw,50px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px;
}
.brandcta p{margin:0; max-width:24ch}

@media(max-width:980px){
  .bgrid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:600px){
  .bgrid{grid-template-columns:1fr}
  .brandcta{flex-direction:column; align-items:flex-start}
}

/* Vorher/Nachher-Schieber */
.compare{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--paper-2); touch-action:pan-y; max-height:72vh}
.compare-layer{display:block}
.compare-layer img{display:block; width:100%; height:auto; max-height:72vh; object-fit:cover}
.compare-b{position:absolute; inset:0}
.compare-b img{height:100%; object-fit:cover}
/* Die zweite Kampagne wird von links freigegeben */
.compare-b{clip-path:inset(0 0 0 var(--pos))}

.compare-line{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:var(--paper); transform:translateX(-1px); pointer-events:none; z-index:3}
.compare-line i{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:42px; height:42px; border-radius:50%; background:var(--paper);
  box-shadow:0 6px 20px -6px rgba(19,19,21,.6);
}
.compare-line i::before,.compare-line i::after{
  content:""; position:absolute; top:50%; width:0; height:0;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
}
.compare-line i::before{left:11px; transform:translateY(-50%); border-right:7px solid var(--ink)}
.compare-line i::after{right:11px; transform:translateY(-50%); border-left:7px solid var(--ink)}

.compare-tag{
  position:absolute; bottom:16px; z-index:4;
  font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  background:rgba(19,19,21,.72); color:var(--paper); padding:7px 12px; border-radius:3px;
}
.compare-tag.is-a{left:16px}
.compare-tag.is-b{right:16px}

/* Der Regler liegt unsichtbar über dem Bild und bleibt bedienbar */
.compare-range{
  position:absolute; inset:0; z-index:5; width:100%; height:100%;
  margin:0; padding:0; background:none; border:0; cursor:ew-resize; appearance:none;
}
.compare-range:focus-visible{outline:2px solid var(--brass); outline-offset:3px}
.compare-range::-webkit-slider-thumb{appearance:none; width:46px; height:100%; cursor:ew-resize}
.compare-range::-moz-range-thumb{width:46px; height:100%; border:0; background:transparent; cursor:ew-resize}
.compare-range::-moz-range-track{background:transparent}

.compare-hint{margin:16px 0 0; text-align:center; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}

@media(max-width:600px){
  .compare-line i{width:34px; height:34px}
  .compare-tag{font-size:9.5px; padding:6px 9px}
}

/* ---------- form ---------- */
.plan{background:var(--ink); color:var(--paper)}
.plan-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(34px,5vw,80px); align-items:start}
.plan-side .lead{color:var(--muted-lt)}
.plan-note{margin-top:36px; padding-top:26px; border-top:1px solid var(--line-lt)}
.plan-note h4{font-size:14px; font-weight:600; margin-bottom:14px}
.chips-saved{display:flex; flex-wrap:wrap; gap:7px}
.chips-saved span{font-family:var(--mono); font-size:10.5px; letter-spacing:.09em; text-transform:uppercase; border:1px solid var(--line-lt); border-radius:3px; padding:7px 11px; color:var(--paper)}
.chips-empty{font-size:14px; color:var(--muted-lt)}
.form{background:var(--paper); color:var(--ink); border-radius:var(--r-lg); padding:clamp(26px,3vw,44px)}
.prog{display:flex; gap:6px; margin-bottom:30px}
.prog i{flex:1; height:2px; background:var(--line); transition:background .3s}
.prog i.on{background:var(--brass)}
.fstep{display:none} .fstep.on{display:block}
.fkick{font-family:var(--mono); font-size:10.5px; letter-spacing:.15em; text-transform:uppercase; color:var(--muted); margin:0 0 10px}
.fstep h3{margin-bottom:26px}
.grid-opt{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:28px}
.grid-opt.two{grid-template-columns:repeat(2,1fr)}
.opt{position:relative; display:block}
.opt input{position:absolute; opacity:0; width:0; height:0}
.opt span{
  display:flex; align-items:center; justify-content:center; text-align:center; min-height:54px;
  padding:12px 10px; border:1px solid var(--line); border-radius:var(--r);
  font-size:14px; font-weight:500; cursor:pointer; transition:border-color .18s, background .18s, color .18s;
}
.opt span:hover{border-color:var(--ink)}
.opt input:checked + span{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.opt input:focus-visible + span{outline:2px solid var(--brass); outline-offset:3px}
.frow{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.field{display:block; margin-bottom:16px}
.field > span{display:block; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.field input,.field select,.field textarea{
  width:100%; font-family:var(--sans); font-size:15px; color:var(--ink); background:var(--paper);
  padding:14px 15px; border:1px solid var(--line); border-radius:var(--r); transition:border-color .18s;
}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--ink); outline:none}
.field textarea{resize:vertical}
.upload{display:flex; flex-direction:column; gap:5px; padding:26px 22px; border:1px dashed var(--line); border-radius:var(--r); cursor:pointer; margin-bottom:22px; transition:border-color .18s}
.upload:hover{border-color:var(--ink)}
.upload input{position:absolute; opacity:0; width:0; height:0}
.upload b{font-size:15px; font-weight:600}
.upload small{font-size:13px; color:var(--muted)}
.consent{display:flex; gap:12px; align-items:flex-start; font-size:13.5px; color:var(--muted); margin:4px 0 24px; line-height:1.55}
.consent input{margin-top:3px; width:16px; height:16px; accent-color:var(--ink); flex-shrink:0}
.consent a{color:var(--ink)}
.fnav{display:flex; justify-content:space-between; gap:12px}
.errmsg{color:#9B3B2F; font-size:13.5px; margin:0 0 16px}
.done{display:none; padding:14px 0}
.done.on{display:block}
.done h3{margin-bottom:12px}
.done p{color:var(--muted); font-size:15px; max-width:48ch; margin:0 0 26px}

/* ---------- closing ---------- */
.closing{text-align:center}
.closing .label{display:block; margin-bottom:22px}
.closing h2{margin-bottom:34px}
footer{border-top:1px solid var(--line); padding:44px 0 56px}
.foot{display:flex; flex-wrap:wrap; gap:26px; align-items:center; justify-content:space-between}
.foot-nav{display:flex; flex-wrap:wrap; gap:26px; font-size:14px}
.foot-nav a{color:var(--muted); text-decoration:none}
.foot-nav a:hover{color:var(--ink)}
.foot-legal{width:100%; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted)}

/* ---------- reveal ---------- */
.rev{opacity:0; transform:translateY(14px)}
.rev.in{opacity:1; transform:none; transition:opacity .55s ease, transform .55s cubic-bezier(.2,.7,.2,1)}

/* ---------- responsive ---------- */
@media(max-width:1180px){
  .masonry{columns:3}
  .usp{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:980px){
  .nav{display:none}
  .burger{display:flex}
  .nav.open{display:flex; position:absolute; top:74px; left:0; right:0; flex-direction:column; gap:0; background:var(--paper); border-bottom:1px solid var(--line); padding:8px var(--pad) 18px; margin:0}
  .nav.open a{padding:14px 0; border-bottom:1px solid var(--line)}
  .brands,.plan-grid,.sec-head,.sys-draw{grid-template-columns:1fr}
  .sec-head{align-items:start}
}
@media(max-width:720px){
  .hero{min-height:clamp(480px,76vh,640px); align-items:flex-end}
  .hero-veil{background:linear-gradient(to top, rgba(19,19,21,.95) 0%, rgba(19,19,21,.72) 42%, rgba(19,19,21,.3) 100%)}
  .hero-in{padding-top:clamp(70px,16vh,120px)}
  .hero-scroll{display:none}
  .masonry{columns:2; column-gap:14px}
  .card{margin-bottom:14px}
  .usp{grid-template-columns:1fr}
  .wallview .pin{width:28px; height:28px}
  .wallview .pin span{font-size:9.5px}
  .aud-tabs button{padding:11px 18px; font-size:13.5px}
  .grid-opt{grid-template-columns:repeat(2,1fr)}
  .frow{grid-template-columns:1fr}
  .aud-meta{grid-template-columns:1fr}
  .trust{grid-template-columns:1fr 1fr}
  .fnav{flex-direction:column-reverse}
  .fnav .btn{width:100%; justify-content:center}
  .band-in{gap:14px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.001ms !important; animation-duration:.001ms !important}
  .hero-scroll span{opacity:1}
  html{scroll-behavior:auto}
  .rev{opacity:1; transform:none}
}

/* ==========================================================================
   WORDPRESS-ERGAENZUNGEN
   ========================================================================== */
.admin-bar .hdr{top:32px}
@media(max-width:782px){.admin-bar .hdr{top:46px}}
.card.hide{display:none}
.card-img img{width:100%; height:auto; display:block}
.cw-notice{border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; margin-bottom:26px; font-size:14.5px; line-height:1.5}
.cw-notice.ok{border-color:var(--brass); background:rgba(168,147,95,.12)}
.cw-notice.bad{border-color:#9B3B2F; color:#9B3B2F}
.screen-reader-text{position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap}
.cw-hp{position:absolute!important; left:-9999px; opacity:0}
.cw-empty{border:1px dashed var(--line); border-radius:var(--r-lg); padding:40px 28px; text-align:center; color:var(--muted); font-size:14.5px}
.cw-page{padding:clamp(56px,7vw,110px) 0}
.cw-page .entry-content{max-width:72ch}
.cw-page .entry-content h2{margin:40px 0 14px; font-size:clamp(22px,2.2vw,30px); font-weight:600; letter-spacing:-.02em}
.cw-page .entry-content h3{margin:30px 0 10px; font-size:18px; font-weight:600}
.cw-page .entry-content p,.cw-page .entry-content li{margin:0 0 16px; color:var(--muted); line-height:1.7}
.cw-page .entry-content a{color:var(--ink)}