/* =========================================================================
ZONING · Konstruktiv auf den Bestandsseiten
Wird NACH css/styles.css und NACH css/konstruktiv-base.css geladen.
Warum so und nicht als Neubau: styles.css ist durchgehend token-getrieben,
die Marken-Hexes stehen dort jeweils genau einmal, nämlich in :root. Ein
Umbelegen dieser Token kippt Farbe, Schrift, Radius und Schatten auf allen
Seiten auf einmal, ohne eine einzige Zeile Markup anzufassen. Alles, was
Token nicht können (Knopfbau, Kartenmaterial, Rhythmus), steht darunter.
Reihenfolge im Blatt:
1 Token umbelegen
2 Schrift und Überschriften
3 Flächen und Kanten (Radius raus, Schatten raus)
4 Kopfzeile
5 Knopf "Kippung" (Markup baut js/konstruktiv-upgrade.js)
6 Karten, Kacheln, Listen
7 Seitenköpfe und Bänder
8 Formular, FAQ, Modal
9 Fusszeile
10 Bewegung und Umbruch
========================================================================= */
/* ---------- 1 · Token umbelegen ---------------------------------------- */
:root{
--white: #F0EFE9; /* Grundfläche, war Weiss */
--bg-soft: #DEDCD3; /* zweite Fläche */
--blue: #111111; /* Masse, war Navy */
--blue-dark: #111111;
--blue-light: #DEDCD3;
--red: #C4000F;
--red-dark: #A2000C;
--ink: #111111;
--muted: #58585B;
--border: #C9C7BE;
--font-sans: 'Manrope',system-ui,-apple-system,sans-serif;
--font-serif: 'Unbounded',system-ui,-apple-system,sans-serif;
--radius: 0px;
--radius-sm: 0px;
--shadow-sm: none;
--shadow-md: none;
--shadow-lg: none;
--ease: cubic-bezier(.23,1,.32,1);
}
/* ---------- 2 · Schrift und Überschriften ------------------------------ */
body{font-family:var(--body);font-size:16.5px;line-height:1.62;background:var(--bone)}
h1,h2,h3,h4,h5{font-family:var(--disp);font-weight:800;letter-spacing:-.036em;line-height:.98;color:var(--black)}
h4,h5{letter-spacing:-.028em}
/* Unbounded läuft breiter als die alte Serife: Display-Grade eine Stufe zurück */
h1{font-size:clamp(2.1rem,1rem + 3.1vw,3.4rem)}
h2{font-size:clamp(1.8rem,1.2rem + 2.4vw,3rem)}
h3{font-size:clamp(1.25rem,1rem + 1.1vw,1.85rem)}
h4{font-size:clamp(1.05rem,.98rem + .55vw,1.35rem)}
p,li,dd,dt,figcaption{font-family:var(--body)}
strong,b{font-weight:800}
.section-title,.page-hero h1,.hero h1{font-family:var(--disp)}
/* Die alte Serifen-Kursive gibt es in Unbounded nicht; aufrecht und schwerer */
em,i,.section-title em{font-style:normal;font-weight:800;color:var(--red-t)}
.eyebrow,.kicker{font-family:var(--body);font-weight:800;letter-spacing:.22em;
text-transform:uppercase;color:var(--red-t);font-size:.78rem}
/* Der rote Strich über zentrierten Überschriften war die alte Grammatik */
.section-title::before,.faq2-title::before{display:none!important}
/* Sektionsköpfe stehen links, nicht zentriert */
.section-title,.section-intro,.faq2-head,.faq2-title,.faq2-sub{text-align:left}
.section-intro,.faq2-sub{color:var(--grey);max-width:56ch;margin-left:0;margin-right:0}
/* ---------- 3 · Flächen und Kanten ------------------------------------- */
*,*::before,*::after{box-shadow:none}
.card,.wd-card,.sw-card,.mk-card,.its-card,.ka-card,.lp-card,.uu-card,
.ref-card,.ev-card,.pt-card,.ins-card,.svc-row,.price-card,.stat,.box{
border-radius:0!important;box-shadow:none!important}
img,svg{border-radius:0}
[style*="border-radius"]{border-radius:0}
/* Runde Formen, die zur Welt gehören, bleiben rund */
.brand-o,.foot-social,.ts-btn,.kb-dot,.faq2-ic,.uu-dot,.ka-step-pop,
circle,.to-top,[class*="round"],[class*="circle"]{border-radius:50%}
.faq2-ic{border-radius:50%!important}
/* ---------- 4 · Kopfzeile ---------------------------------------------- */
.site-header{background:var(--bone);border-bottom:4px solid var(--black);box-shadow:none}
.site-header .container{height:var(--hdrh)}
.brand{font-family:var(--body);font-weight:800;letter-spacing:.2em;color:var(--black)}
.nav a:not(.btn){font-family:var(--body);font-size:.88rem;font-weight:700;letter-spacing:.03em;
color:var(--black-2);position:relative}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;bottom:-2px;width:7px;height:7px;
border-radius:50%;background:var(--red);transform:scale(0);transition:transform .24s var(--ease)}
@media (hover:hover) and (pointer:fine){.nav a:not(.btn):hover::after{transform:scale(1)}}
.nav a.active::after,.nav a[aria-current=page]::after{transform:scale(1)}
.nav a.active{color:var(--black);border-bottom:0}
.nav-toggle .nt-bar{background:var(--black);height:3px;border-radius:0}
/* ---------- 5 · Knopf "Kippung" -----------------------------------------
Das Markup baut js/konstruktiv-upgrade.js: aus Text
wird eine Kachel mit zwei Seiten. Fällt das Skript aus, greift der
Rückfall ganz unten: flache schwarze Fläche, weiterhin bedienbar. */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
height:var(--kh,56px);padding:0 var(--kp,30px);border:0;border-radius:0;cursor:pointer;
text-decoration:none;background:transparent;perspective:620px;overflow:visible;
font-family:var(--body);font-weight:800;font-size:var(--kf,.94rem);letter-spacing:.03em;
box-shadow:none;transform:none;-webkit-tap-highlight-color:transparent}
.btn .kb-tile{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .42s var(--ease-tile)}
.btn .kb-face{position:absolute;inset:0;display:grid;place-items:center;
backface-visibility:hidden;white-space:nowrap;font-size:inherit;letter-spacing:inherit}
.btn .kb-face.f{background:var(--black);color:var(--bone);transform:translateZ(calc(var(--kh,56px) / 2))}
.btn .kb-face.b{background:var(--red);color:#fff;transform:rotateX(90deg) translateZ(calc(var(--kh,56px) / 2))}
.btn .kb-lbl{visibility:hidden;white-space:nowrap;position:relative}
@media (hover:hover) and (pointer:fine){
.btn:hover .kb-tile{transform:rotateX(-90deg)}
.btn:hover{background:transparent;transform:none;box-shadow:none}
}
.btn:active .kb-tile{transform:rotateX(-90deg) scale(.975)}
.btn:focus-visible{outline:3px solid var(--red);outline-offset:5px}
.btn:focus-visible .kb-tile{transform:rotateX(-90deg)}
/* Zweitrang: Vorderseite als Kontur */
.btn-ghost .kb-face.f,.btn-outline .kb-face.f{background:transparent;color:var(--black);
box-shadow:inset 0 0 0 3px var(--black)}
/* Auf schwarzer oder roter Fläche dreht sich der Wert um */
.contact .btn .kb-face.f,.site-footer .btn .kb-face.f,
.band .btn .kb-face.f,[class*="--dark"] .btn .kb-face.f{background:var(--bone);color:var(--black)}
.contact .btn .kb-face.b,.site-footer .btn .kb-face.b,
.band .btn .kb-face.b,[class*="--dark"] .btn .kb-face.b{background:var(--red);color:#fff}
@supports (-moz-appearance:none){
.btn{overflow:hidden;perspective-origin:center center;isolation:isolate;--moz-btn-label:var(--bone)}
.btn .kb-tile{width:100%;height:100%;will-change:transform;z-index:0}
.btn .kb-face{width:100%;height:100%;color:transparent!important;text-shadow:none!important;-moz-backface-visibility:hidden}
.btn .kb-lbl{visibility:visible;position:relative;z-index:1;color:var(--moz-btn-label);pointer-events:none}
.btn-ghost,.btn-outline,.contact .btn,.site-footer .btn,.band .btn,[class*="--dark"] .btn{--moz-btn-label:var(--black)}
.btn:hover,.btn:focus-visible,.btn:active,.btn[data-state=ok]{--moz-btn-label:#fff}
}
/* Zustände */
.btn[data-state=busy]{opacity:.6;pointer-events:none}
.btn[data-state=ok] .kb-tile{transform:rotateX(-90deg)}
.btn[data-state=ok] .kb-face.b{background:var(--green)}
/* Kopfzeile und enge Stellen kleiner */
.nav .btn,.nav-cta{--kh:46px;--kp:20px;--kf:.85rem}
.faq2 .btn,.card .btn,.svc-row .btn{--kh:50px;--kp:24px}
/* Pfeil-Textlink: Scheibe kippt von Rot auf Schwarz */
.btn-link{display:inline-flex;align-items:center;gap:.7em;font-family:var(--body);font-weight:800;
font-size:.92rem;letter-spacing:.03em;color:var(--black);text-decoration:none;perspective:400px}
.btn-link .ic-arrow{width:18px;height:18px;position:relative;transform-style:preserve-3d;flex:0 0 auto;
transition:transform .38s var(--ease-tile)}
.btn-link .ic-arrow path{display:none}
.btn-link .ic-arrow::before,.btn-link .ic-arrow::after{content:"";position:absolute;inset:0;
border-radius:50%;backface-visibility:hidden}
.btn-link .ic-arrow::before{background:var(--red);transform:translateZ(9px)}
.btn-link .ic-arrow::after{background:var(--black);transform:rotateX(90deg) translateZ(9px)}
@media (hover:hover) and (pointer:fine){.btn-link:hover .ic-arrow{transform:rotateX(-90deg)}}
.btn .ic-arrow,.btn svg{display:none}
/* ---------- 6 · Karten, Kacheln, Listen -------------------------------- */
.card,.wd-card,.sw-card,.mk-card,.its-card,.lp-card,.ins-card,.pt-card,.ev-card{
background:var(--bone-2);border:0;padding:clamp(22px,2.6vw,34px);transition:transform .24s var(--ease)}
@media (hover:hover) and (pointer:fine){
.card:hover,.wd-card:hover,.sw-card:hover,.mk-card:hover,.its-card:hover,
.lp-card:hover,.ins-card:hover,.pt-card:hover,.ev-card:hover{transform:translateY(-5px)}
}
/* Jede zweite Kachel als schwarze Masse: aus dem Raster wird eine Komposition */
.wd-card:nth-child(2n),.sw-card:nth-child(2n),.mk-card:nth-child(2n),.its-card:nth-child(2n),
.card:nth-child(3n+2){background:var(--black);color:var(--bone)}
.wd-card:nth-child(2n) h3,.sw-card:nth-child(2n) h3,.mk-card:nth-child(2n) h3,
.its-card:nth-child(2n) h3,.card:nth-child(3n+2) h3{color:var(--bone)}
.wd-card:nth-child(2n) p,.sw-card:nth-child(2n) p,.mk-card:nth-child(2n) p,
.its-card:nth-child(2n) p,.card:nth-child(3n+2) p{color:#C9C8C2}
/* Icon-Plättchen: Kreis in Signalfarbe statt getönter Kasten */
.wd-card__ico,.sw-card__ico,.mk-card__ico,.its-card__ico,.lsg-card-ico,.faq2-ic,.lp-channel-ic{
background:var(--red);color:#fff;border-radius:50%;display:grid;place-items:center}
.wd-card:nth-child(2n) [class$="__ico"],.sw-card:nth-child(2n) [class$="__ico"],
.mk-card:nth-child(2n) [class$="__ico"],.its-card:nth-child(2n) [class$="__ico"]{background:var(--bone);color:var(--black)}
/* Grosse Ordnungszahlen bleiben, aber in der Werkschrift */
[class*="num"],[class*="__no"],[class*="-no"],.step-n{font-family:var(--disp);font-weight:800;letter-spacing:-.03em}
/* ---------- 7 · Seitenköpfe und Bänder --------------------------------- */
.page-hero,.hero{background:var(--bone);position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;right:-8%;top:-14%;width:52%;height:128%;
background:var(--bone-2);transform:rotate(9deg);z-index:0;pointer-events:none}
.page-hero>*{position:relative;z-index:1}
.band,.section--dark,.strategy,.reviews{background:var(--black);color:var(--bone)}
.band h2,.section--dark h2,.strategy h2,.reviews h2{color:var(--bone)}
.band p,.section--dark p,.strategy p,.reviews p{color:var(--grey-d)}
.sep{background:var(--black);height:4px;border:0}
/* ---------- 8 · Formular, FAQ, Modal ------------------------------------ */
input,select,textarea{border-radius:0!important;font-family:var(--body)}
.cmodal-input,.cmodal-select,.cmodal-textarea,.ck-field,.ck-area{
background:var(--bone);border:3px solid transparent;color:var(--black)}
.cmodal-input:focus,.cmodal-select:focus,.cmodal-textarea:focus,.ck-field:focus{
outline:0;border-color:var(--red);box-shadow:none}
.cmodal-field label,.f label{font-family:var(--body);font-size:.72rem;font-weight:800;
letter-spacing:.14em;text-transform:uppercase;color:var(--black-2)}
.cmodal__dialog,.cmodal__panel{border-radius:0;background:var(--bone)}
.cmodal__panel--info,.contact .cmodal__panel--info{background:var(--red);color:#fff}
.faq-q{font-family:var(--disp);font-weight:600;letter-spacing:-.034em;color:var(--black)}
.faq-q .icon{color:var(--red);font-family:var(--body);font-weight:800}
.faq-item{border-color:var(--bone-3)}
.faq-a p{color:var(--grey)}
/* ---------- 9 · Fusszeile ---------------------------------------------- */
.site-footer{background:var(--black);color:var(--bone)}
.site-footer h4{font-family:var(--body);font-size:.74rem;font-weight:800;letter-spacing:.2em;
text-transform:uppercase;color:var(--grey-d)}
.site-footer a{color:#C2C2BE}
@media (hover:hover) and (pointer:fine){.site-footer a:hover{color:var(--red)}}
.footer-brand{font-family:var(--body);font-weight:800;letter-spacing:.2em;color:var(--bone)}
.footer-about,.footer-bottom{color:var(--grey-d)}
.footer-social{background:var(--red);color:var(--bone);border-radius:50%}
.footer-cta{background:var(--bone);color:var(--black)}
.footer-cta h2{color:var(--black)}
.footer-cta p{color:var(--black-2)}
.footer-cta .accent,.accent{color:var(--red)}
/* ---------- 10 · Bewegung und Umbruch ---------------------------------- */
.reveal{transition:opacity .62s var(--ease),transform .62s var(--ease)}
@media (prefers-reduced-motion: reduce){
*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
transition-duration:.001ms!important}
.btn .kb-tile{transition:none}
}
@media (max-width:720px){
.nav{background:var(--bone);border-bottom:4px solid var(--black)}
.nav .btn{width:100%}
}
@media (max-width:420px){.btn{--kp:20px;--kf:.88rem}}
/* ---------- Rückfall ohne JavaScript ------------------------------------
Ohne das Upgrade-Skript gibt es keine Kachel. Dann ist der Knopf eine
flache schwarze Fläche mit Knochenweiss darauf, weiterhin voll bedienbar. */
.no-kb .btn{background:var(--black);color:var(--bone);perspective:none}
.no-kb .btn .kb-lbl{visibility:visible}
.no-kb .btn-ghost{background:transparent;color:var(--black);box-shadow:inset 0 0 0 3px var(--black)}
/* ---------- Nachtrag aus der Sichtprüfung ------------------------------ */
/* Der Bestand markierte die aktive Seite mit einem roten Strich, die neue
Welt mit einem Punkt. Beides zusammen liest sich als Fehler. */
.nav a.active:not(.btn)::after{width:7px;height:7px;left:0;right:auto;border-radius:50%;
background:var(--red);transform:scale(1);bottom:-2px}
/* Gezeichneter Knopf im Abschluss-Band: scharfe Ecke statt Radius */
.fcta-btn{rx:0}
.footer-cta-media:has(.footer-cta-hit:hover) .fcta-btn{fill:#A2000C}
.footer-cta-img text{font-family:var(--body)!important;font-weight:800}
/* Umschalter auf der Referenzen-Seite: Kachel statt Pille */
.sw-toggle{background:var(--bone-2);border-radius:0;box-shadow:inset 0 0 0 3px var(--black);padding:4px}
.sw-toggle__thumb{background:var(--black);border-radius:0}
.sw-toggle button,.sw-toggle [role=tab]{font-family:var(--body);font-weight:800;border-radius:0}
/* Zustandsmarke an Referenzen: eckig, in der Signalfarbe */
.ref-badge{border-radius:0;font-family:var(--body);font-weight:800;letter-spacing:.14em}
.ref-badge--live{background:var(--red);color:#fff}
/* Coming-Soon-Teaser: schwarze Marke, stiller Hinweis statt Live-Link */
.ref-badge--soon{background:var(--black);color:var(--bone)}
.btn-live--soon,.btn-live--soon:hover{color:var(--grey);cursor:default}
/* Das Abschluss-Band steckt im