/* padan+ — gemeinsame Gestaltung fuer alle Seiten.
   Quelle: padanplus_Website_Prototyp_v6.html, unveraendert uebernommen.
   Angepasst wurde nur: Prototyp-Banner entfernt, Seitenumschaltung entfernt,
   Navigation von <button> auf <a>, Grundregel fuer Verweise. */

:root{
  /* Farbwelt seit 20.08.2026: Tinte + Limette.
     --acc      Flaeche  (Schaltflaechen, Balken, Marken)  Text darauf: --onacc
     --acc-mid  Linien und Rahmen auf hellem Grund
     --ink      Text, Zahlen, Zeichen auf hellem Grund     (Limette waere unlesbar)
     --acc2     Akzent auf dunklem Grund */
  --navy:#0F1C2E; --navy2:#1A2E48; --navy3:#2B4368;
  --acc:#C8F14A; --acc-d:#B5E02E; --acc-mid:#A8D62B; --ink:#41600A;
  --onacc:#0F1C2E; --acc2:#C8F14A; --accsoft:#F4FBE2;
  --warn:#FF6B4A;
  --text:#171A1F; --grey:#4A5260; --grey2:#6E7684;
  --bg:#F7F8FA; --bg2:#EFF2F7; --line:#E2E6ED; --white:#fff;
  --sans:system-ui,"Segoe UI Variable Text","Segoe UI",Inter,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono","SF Mono",Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--text);font:17px/1.65 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:1120px;margin:0 auto;padding:0 30px}
.narrow{max-width:760px}
h1,h2,h3{letter-spacing:-.025em;color:var(--navy);margin:0;font-weight:670}
h1{font-size:clamp(36px,5.4vw,62px);line-height:1.03}
h2{font-size:clamp(26px,3.4vw,40px);line-height:1.12;margin-bottom:14px}
h3{font-size:20px;line-height:1.3}
p{margin:0 0 14px}
.kicker{font:700 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--acc);
  display:flex;align-items:center;gap:11px;margin-bottom:18px}
.kicker:before{content:"";flex:0 0 26px;height:2px;background:var(--acc)}
.lead{font-size:21px;line-height:1.5;color:var(--grey)}
.sm{font-size:16px;color:var(--grey)}
.xs{font-size:14px;color:var(--grey2)}
b,strong{font-weight:660;color:var(--navy)}
a{color:var(--acc);text-decoration:none;cursor:pointer}

header{position:sticky;top:0;z-index:30;background:rgba(255,255,255,.95);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-top:16px;padding-bottom:16px;flex-wrap:wrap}
.logo{display:inline-block;text-decoration:none;line-height:normal;font-size:25px;font-weight:720;letter-spacing:-.04em;color:var(--navy);cursor:pointer;background:none;border:0;font-family:var(--sans);padding:0}
.logo i{color:var(--acc);font-style:normal}
nav{display:flex;align-items:center;gap:2px;flex-wrap:wrap}
nav a{background:none;border:0;font:520 15px var(--sans);color:var(--grey);cursor:pointer;padding:8px 12px;border-radius:3px}
nav a:hover{color:var(--navy);background:var(--bg)}
nav a.on{color:var(--navy);font-weight:640;box-shadow:inset 0 -2.5px 0 var(--acc)}
.btn{display:inline-block;background:var(--acc);color:#fff;border:1.5px solid var(--acc);text-decoration:none;
  font:640 16px var(--sans);padding:13px 24px;border-radius:3px;cursor:pointer;transition:.13s}
.btn:hover{background:#B5E02E;border-color:#B5E02E}
.btn.ghost{background:none;color:var(--navy);border-color:#C7CEDA}
.btn.ghost:hover{background:var(--bg);border-color:var(--navy)}
.btn.dark{background:var(--navy);border-color:var(--navy)}
.btn.dark:hover{background:var(--navy2)}
.btn.sm{font-size:14.5px;padding:9px 16px}
/* Kopfzeile: <a> statt <button> — gleiche Hoehe wie im Prototyp */
header .btn{line-height:normal}

.page{display:block}
section{padding:84px 0}
section+section{border-top:1px solid var(--line)}
section.dark{background:var(--navy);color:#E9EDF5;border-top:0}
section.dark h2,section.dark h3{color:#fff}
section.dark .lead,section.dark .sm{color:#BCC8DC}
section.dark .xs{color:#93A2BE}
section.tint{background:var(--bg);border-top:0}
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.g2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
@media(max-width:900px){.split,.g3,.g2{grid-template-columns:1fr;gap:32px}}

.card{border:1px solid var(--line);border-radius:4px;padding:26px 26px 28px;background:#fff}
.card.hi{border:1.5px solid var(--navy)}
.res{margin-top:16px;padding-top:14px;border-top:2px solid var(--accsoft);font-size:16px;color:var(--navy);font-weight:620}
.res b{color:var(--acc);font:700 11.5px var(--mono);letter-spacing:.13em;text-transform:uppercase;display:block;margin-bottom:5px}
.num{font:720 clamp(34px,4.6vw,54px)/1 var(--mono);letter-spacing:-.04em;color:var(--navy)}
.num em{font-style:normal;color:var(--acc)}
section.dark .num{color:#fff}

/* Rollenwahl */
.roles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media(max-width:980px){.roles{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.roles{grid-template-columns:1fr}}
.role{text-align:left;background:#fff;border:1.5px solid var(--line);border-radius:4px;padding:20px;
  cursor:pointer;font:inherit;color:inherit;transition:.14s}
.role:hover{border-color:var(--acc2);transform:translateY(-2px)}
.role b{display:block;font-size:17px;line-height:1.25;color:var(--navy);margin-bottom:8px}
.role span{display:block;font-size:14.5px;line-height:1.45;color:var(--grey)}
.role.on{background:var(--navy);border-color:var(--navy)}
.role.on b{color:#fff} .role.on span{color:#B9C6DC}
.role.on:after{content:"ausgewählt";display:block;margin-top:12px;font:700 11px var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--acc2)}
.rolebar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:20px;font-size:15px;color:var(--grey)}
.reset{background:none;border:0;font:inherit;color:var(--acc);text-decoration:underline;cursor:pointer;padding:0}
.hide{display:none !important}

/* Itemliste statt Bulletpoints */
.items{display:grid;gap:2px;margin:18px 0}
.item{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:14px 4px;border-top:1px solid var(--line);align-items:baseline}
.item:last-child{border-bottom:1px solid var(--line)}
.item i{font:700 12px var(--mono);color:var(--acc);font-style:normal;letter-spacing:.04em}
.item b{display:block;font-size:17px;color:var(--navy);margin-bottom:2px}
.item span{display:block;font-size:15.5px;color:var(--grey);line-height:1.5}
.items.tight .item{padding:11px 4px}
.item>b,.item>span{grid-column:2}
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:0;margin:8px 0 44px}
.flow div{border-top:2px solid var(--line);padding:14px 16px 0}
.flow div:nth-child(n+4){border-top-color:var(--acc)}
.flow b{display:block;font-size:17px;color:var(--navy)}
.flow span{font-size:13.5px;color:var(--grey2)}
@media(max-width:800px){.flow{grid-template-columns:1fr 1fr}}
.g2.one{grid-template-columns:1fr}
.split.wide{grid-template-columns:1.45fr 1fr}
.check{transition:.15s;text-align:left;font:inherit;color:inherit;width:100%;cursor:pointer;position:relative;
  padding-bottom:56px}
.check:hover{border-color:#C7CEDA}
.check.on{border:2px solid var(--acc);box-shadow:0 6px 24px rgba(20,33,61,.07)}
.ckpick{position:absolute;left:26px;bottom:24px;font:700 11px var(--mono);letter-spacing:.13em;
  text-transform:uppercase;color:var(--grey2);border:1px solid var(--line);border-radius:99px;padding:7px 14px}
.check.on .ckpick{background:var(--acc);border-color:var(--acc);color:#fff}
.check.on .ckpick:after{content:" ✓"}
.kunden{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:28px}
@media(max-width:900px){.kunden{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.kunden{grid-template-columns:1fr}}
.kunde{border:1px solid var(--line);border-left:4px solid var(--navy);border-radius:4px;padding:20px 22px}
.kunde b{display:block;font-size:19px;color:var(--navy);letter-spacing:-.02em}
.kunde span{display:block;font:600 13px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);margin:6px 0 10px}
.kunde em{display:block;font-style:normal;font-size:15px;color:var(--grey)}
.kunde.tbd{border-left-color:#C6CDDA;border-style:dashed;opacity:.75}
.kunde.tbd span{color:var(--grey2)}
.nlbox{margin-top:34px;background:var(--navy);border-radius:4px;padding:34px 36px;
  display:grid;grid-template-columns:1.1fr .9fr;gap:30px;align-items:center;
  border-left:6px solid var(--acc)}
.nlform{display:flex;gap:10px;flex-wrap:wrap}
.nlform input{flex:1;min-width:200px;padding:14px 16px;border:1px solid #2B4368;background:#1A2E48;
  color:#fff;border-radius:3px;font:inherit;font-size:16px}
.nlform input::placeholder{color:#8FA0BE}
.nlform input:focus{outline:2px solid var(--acc);border-color:var(--acc)}
@media(max-width:820px){.nlbox{grid-template-columns:1fr}}
.rv:not(.on){display:none !important}
.check .items{grid-template-columns:none}
.check .item{grid-template-columns:96px 1fr;gap:12px}
.check .item i{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--grey2)}
.ckhead{display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:22px}
.ckbadge{display:none;background:var(--acc);color:#fff;font:700 10.5px var(--mono);letter-spacing:.12em;
  text-transform:uppercase;padding:4px 9px;border-radius:2px}

@media(max-width:900px){.split.wide{grid-template-columns:1fr}}
.stufen{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin:0 0 18px}
.stufen a{display:block;text-decoration:none;border:1.5px solid var(--line);border-radius:4px;
  padding:16px 18px;cursor:pointer;transition:.13s}
.stufen a:hover{border-color:var(--acc)}
.stufen i{display:block;font:700 11px var(--mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--acc);font-style:normal;margin-bottom:6px}
.stufen b{display:block;font-size:17px;color:var(--navy)}
.stufen span{display:block;font-size:14px;color:var(--grey)}
@media(max-width:800px){.stufen{grid-template-columns:1fr 1fr}}

/* Aufklappbar */
.acc{border-top:1px solid var(--line)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;
  gap:16px;padding:22px 0;font:660 21px var(--sans);color:var(--navy);letter-spacing:-.02em}
.acc summary::-webkit-details-marker{display:none}
.acc summary:after{content:"+";color:var(--acc);font-weight:600;font-size:26px;line-height:1}
.acc details[open] summary:after{content:"–"}
.acc .body{padding:0 0 26px}
.bno{font:700 13px var(--mono);color:var(--acc);margin-right:14px;font-style:normal}

/* Slider */
.slider{position:relative}
.track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;gap:0;
  scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;scroll-snap-align:start;padding:4px 2px}
.snav{display:flex;gap:10px;align-items:center;margin-top:26px}
.snav button{width:40px;height:40px;border:1.5px solid #2B4368;background:none;color:#fff;
  font-size:17px;border-radius:50%;cursor:pointer;line-height:1}
.snav button:hover{border-color:var(--acc);color:var(--acc2)}
.sdots{display:flex;gap:7px;margin-left:8px}
.sdots i{width:8px;height:8px;border-radius:50%;background:#2B4368;display:block;cursor:pointer}
.sdots i.on{background:var(--acc)}

.blk{background:var(--bg);border-radius:4px;padding:26px}
.blk.acc2{background:var(--accsoft)}
.blk.dk{background:var(--navy2);color:#DCE4F0}
.blk.dk h3{color:#fff}
.quote{border-left:3px solid var(--acc);padding:4px 0 4px 18px;color:var(--navy);font-size:18px;line-height:1.5;margin:20px 0}
.pill{display:inline-block;border:1px solid var(--line);border-radius:99px;padding:7px 15px;font-size:14px;color:var(--grey);margin:0 8px 8px 0}
.tag{display:inline-block;background:var(--navy);color:#fff;font:700 11px var(--mono);letter-spacing:.13em;
  text-transform:uppercase;padding:5px 10px;border-radius:2px}
.tag.acc{background:var(--acc)}
.tag.gr{background:none;color:var(--grey2);border:1px solid var(--line)}
.price{font:720 30px var(--mono);color:var(--acc);letter-spacing:-.03em;display:block}
.ph{border:1.5px dashed #C6CDDA;border-radius:4px;background:var(--bg);color:var(--grey2);
  display:flex;align-items:center;justify-content:center;text-align:center;
  font:600 13px var(--mono);letter-spacing:.05em;padding:20px;min-height:130px}
figure{margin:0}
figcaption{font-size:13.5px;color:var(--grey2);margin-top:10px}
/* ---- Modellbilder Fall 01 (ab 20.08.2026) ---- */
.bilder4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px}
.bilder4 img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;object-position:center;display:block;
  border:1px solid var(--line);border-radius:4px;background:#fff}
@media(max-width:900px){.bilder4{grid-template-columns:1fr 1fr;gap:16px}}
@media(max-width:520px){.bilder4{grid-template-columns:1fr}}
table{width:100%;border-collapse:collapse;font-size:15.5px;margin:14px 0}
th,td{text-align:left;padding:12px 12px;border-bottom:1px solid var(--line);vertical-align:top}
th{font:700 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--grey2)}
footer{background:var(--navy);color:#B3C0D6;padding:56px 0 44px;font-size:15px}
footer a{color:#fff;text-decoration:none;margin-right:22px;display:inline-block;margin-bottom:10px;cursor:pointer}
footer a:hover{color:var(--acc2)}
.anchors{display:flex;gap:8px;flex-wrap:wrap;margin-top:26px}
.anchors a{font:640 14px var(--sans);color:var(--grey);text-decoration:none;padding:8px 16px;
  border:1px solid var(--line);border-radius:99px;cursor:pointer}
.anchors a:hover{color:#fff;background:var(--navy);border-color:var(--navy)}
/* ---- Blogliste (ab 19.08.2026, erzeugt aus den Wix-Blogdaten) ---- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:30px}
@media(max-width:940px){.posts{grid-template-columns:1fr 1fr}}
@media(max-width:620px){.posts{grid-template-columns:1fr}}
.post{display:flex;flex-direction:column;padding:0;overflow:hidden;transition:.14s;color:inherit}
.post:hover{border-color:var(--acc);transform:translateY(-2px)}
.post img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;background:var(--bg2)}
.post .meta{font:700 11.5px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey2);padding:20px 22px 0;display:block}
.post h3{padding:8px 22px 0;font-size:18px;line-height:1.32}
.post p{padding:8px 22px 24px;margin:0}
.katfilter{font:640 14px var(--sans);color:var(--grey);background:none;
  border:1px solid var(--line);border-radius:99px;padding:8px 16px;cursor:pointer}
.katfilter:hover{color:#fff;background:var(--navy);border-color:var(--navy)}
.katfilter.on{color:#fff;background:var(--acc);border-color:var(--acc)}

/* ---- Beitragstext (erzeugt von blog-bauen.mjs) ---- */
.beitrag{margin-top:34px;font-size:18px;line-height:1.72;color:#2A2F38}
.beitrag>*:first-child{margin-top:0}
.beitrag p{margin:0 0 20px}
.beitrag h2{font-size:clamp(24px,3vw,32px);margin:44px 0 14px}
.beitrag h3{font-size:22px;margin:40px 0 12px}
.beitrag h4{font-size:19px;margin:32px 0 10px}
.beitrag ul,.beitrag ol{margin:0 0 22px;padding-left:24px}
.beitrag li{margin-bottom:9px}
.beitrag li>p{margin:0 0 8px}
.beitrag li ul,.beitrag li ol{margin-top:9px}
.beitrag a{text-decoration:underline;text-underline-offset:3px}
.beitrag mark{padding:1px 3px;border-radius:2px}
.beitrag figure{margin:32px 0;padding:0}
.beitrag figure img,.beitrag figure video{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:4px}
.beitrag figcaption{margin-top:10px;font-size:14px;color:var(--grey2);line-height:1.45}
.beitrag blockquote{margin:28px 0;padding:4px 0 4px 22px;border-left:3px solid var(--acc);
  font-size:19px;line-height:1.55;color:var(--navy)}
.beitrag blockquote p:last-child{margin:0}
.beitrag pre{background:var(--bg2);border:1px solid var(--line);border-radius:4px;
  padding:16px 18px;overflow-x:auto;font:14px/1.6 var(--mono)}
.beitrag hr{border:0;border-top:1px solid var(--line);margin:38px 0}

/* ---- Zertifikate mit Nachweis (ueber-mich.html) ---- */
.zert{display:flex;gap:18px;align-items:flex-start;padding:22px 22px 24px}
.zert-logo{flex:0 0 56px;width:56px;min-height:56px;display:flex;align-items:center;justify-content:center}
.zert-logo img{max-width:100%;max-height:56px;object-fit:contain}
.zert-txt{min-width:0}
.zert-txt>b{display:block;font-size:17px;line-height:1.25;color:var(--navy);margin-bottom:4px}
.zert-txt>.xs{display:block;line-height:1.4}
.nachweis{display:inline-block;margin-top:12px;font:640 14px var(--sans);color:var(--acc);
  text-decoration:underline;text-underline-offset:3px}
.nachweis:hover{color:#B5E02E}
.code{display:block;margin-top:5px;font:500 12.5px var(--mono);color:var(--grey2);letter-spacing:.02em}
.code b{color:var(--navy);font-weight:700;-webkit-user-select:all;user-select:all}

/* ---- Kundenkarten als Verweis ---- */
a.kunde{display:block;text-decoration:none;color:inherit;
  transition:border-color .14s,box-shadow .14s,transform .14s}
a.kunde:hover{border-left-color:var(--acc);box-shadow:0 6px 22px rgba(20,33,61,.08);transform:translateY(-2px)}
a.kunde:hover b{color:var(--acc)}

/* ---- Einwilligungsbanner ---- */
#cc{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--navy);color:#E9EDF5;
  border-top:3px solid var(--acc);box-shadow:0 -8px 30px rgba(20,33,61,.18);display:none}
#cc.on{display:block}
#cc .wrap{display:flex;gap:26px;align-items:flex-start;justify-content:space-between;
  flex-wrap:wrap;padding-top:22px;padding-bottom:22px}
#cc .cc-t{max-width:64ch}
#cc h2{color:#fff;font-size:19px;line-height:1.3;margin-bottom:8px}
#cc p{margin:0;font-size:14.5px;line-height:1.55;color:#BCC8DC}
#cc a{color:var(--acc2);text-decoration:underline;text-underline-offset:3px}
#cc .cc-b{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
#cc .btn.ghost{color:#fff;border-color:#2B4368;background:none}
#cc .btn.ghost:hover{background:#1A2E48;border-color:#3E5A85}
@media(max-width:760px){#cc .wrap{flex-direction:column;gap:16px}#cc .cc-b{width:100%}}

/* ---- Korrektur: Aufzählungen auf dunklem Grund ----
   .item b stand auf var(--navy) — dunkelblau auf dunkelblau, also unsichtbar.
   Betraf den vierten Block auf referenzen.html. */
section.dark .item b{color:#fff}
section.dark .item span{color:#BCC8DC}


/* ---- Referenzseite: Kennzahlen gross ---- */
.items.zahl .item{grid-template-columns:minmax(96px,max-content) 1fr;gap:22px;padding:18px 4px}
.items.zahl .item i{font:700 clamp(28px,3.8vw,44px)/1 var(--mono);letter-spacing:-.02em;white-space:nowrap}
.items.zahl .item b{font-size:18px}
.items.zahl .item.nn i{font:700 12px var(--mono);letter-spacing:.04em}
@media(max-width:560px){
  .items.zahl .item{grid-template-columns:1fr;gap:4px}
  .items.zahl .item>i,.items.zahl .item>div{grid-column:1}
}

/* ---- Spaltenzuordnung: Quelle -> Feld ---- */
.mapping{display:grid;grid-template-columns:1fr 30px 1fr;gap:6px 10px;align-items:center;margin:0}
.mapping .q,.mapping .z{padding:9px 12px;border:1px solid var(--line);background:#fff;
  font:13.5px/1.35 var(--mono);color:var(--navy);overflow-wrap:anywhere}
.mapping .z{border-color:var(--navy)}
.mapping .p{text-align:center;color:var(--acc);font-weight:700}
.mapping .hd{font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;
  color:var(--grey2);padding:0 0 2px}
@media(max-width:520px){
  .mapping{grid-template-columns:1fr}
  .mapping .hd,.mapping .p{display:none}
  .mapping .q{border-bottom:0}
}

/* =====================================================================
   Farbwelt "Tinte + Limette" — Nachzug (20.08.2026)
   ---------------------------------------------------------------------
   Limette ist eine FLAECHENfarbe. Als Text auf Weiss waere sie nicht
   lesbar (Kontrast rund 1,5:1). Deshalb gilt:
     Text/Zahlen auf hellem Grund .......... var(--ink)   dunkles Limette
     duenne Linien auf hellem Grund ........ var(--acc-mid)
     Text auf einer Limettenflaeche ........ var(--onacc) dunkelblau
     Akzent auf dunklem Grund .............. var(--acc2)  volle Limette
   ===================================================================== */
a{color:var(--ink)}
.kicker{color:var(--ink)}
.kicker:before{background:var(--acc-mid)}
.res b,.num em,.reset,.item i,.kunde span,.stufen i,.bno,.price{color:var(--ink)}
.acc summary:after{color:var(--ink)}
.quote{border-left-color:var(--acc-mid)}
.beitrag blockquote{border-left-color:var(--acc-mid)}
.flow div:nth-child(n+4){border-top-color:var(--acc-mid)}
.check.on{border-color:var(--acc-mid)}
.stufen a:hover,.role:hover,.post:hover{border-color:var(--acc-mid)}

/* Text auf Limettenflaeche */
.tag.acc,.ckbadge,.check.on .ckpick,.katfilter.on{color:var(--onacc)}

/* Akzent auf dunklem Grund bleibt volle Limette */
section.dark .kicker,.nlbox .kicker,.blk.dk .kicker{color:var(--acc2)}
section.dark .kicker:before,.nlbox .kicker:before,.blk.dk .kicker:before{background:var(--acc2)}
section.dark .item i,section.dark .num em,.blk.dk .item i{color:var(--acc2)}

/* =====================================================================
   Bewegung, Hintergrund und Mouseover (20.08.2026)
   Stufe "mittel": ruhige Farbschleier, Punktraster, Einblenden beim
   Scrollen, Hochzaehlen der Kennzahlen, deutliche Mouseover-Reaktion.
   Wer im Betriebssystem weniger Bewegung eingestellt hat, bekommt alles
   ohne Animation — siehe ganz unten.
   ===================================================================== */
:root{--rad:12px;--rad-sm:8px;--ease:cubic-bezier(.22,.8,.3,1)}

/* etwas luftiger */
section{padding:96px 0}
.wrap{max-width:1160px}
.card,.role,.blk,.nlbox,.ph,.kunde,.stufen a{border-radius:var(--rad)}
.btn,.tag,.ckbadge{border-radius:var(--rad-sm)}
.beitrag figure img,.beitrag figure video,.beitrag pre{border-radius:var(--rad-sm)}
@media(max-width:700px){section{padding:66px 0}}

/* ---- Kopfzeile: Unterstrich waechst von links ---- */
nav a:not(.btn){position:relative;transition:color .2s var(--ease)}
nav a:not(.btn):after{content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px;
  background:var(--acc-mid);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease)}
nav a:not(.btn):hover{background:none;color:var(--navy)}
nav a:not(.btn):hover:after{transform:scaleX(1)}
nav a.on{box-shadow:none}
nav a.on:after{transform:scaleX(1)}
header{transition:box-shadow .25s var(--ease),background .25s var(--ease)}
header.gescrollt{box-shadow:0 6px 24px -18px rgba(15,28,46,.55)}

/* ---- Schaltflaechen ----
   Wichtig: die Schriftfarbe wechselt beim Ueberfahren NICHT.
   Vorher lief eine Fuellung von unten durch und die Schrift sprang sofort auf
   Weiss — waehrend der drei Zehntelsekunden stand weisse Schrift auf Limette
   und war nicht zu lesen. Jetzt bleibt die Schrift, und nur die Flaeche wird
   eine Spur dunkler. Wer hier etwas aendert, prueft beide Zustaende. */
.btn{background-image:none;background-color:var(--acc);color:var(--onacc);border-color:var(--acc);
  transition:background-color .18s var(--ease),border-color .18s var(--ease),
             transform .18s var(--ease),box-shadow .2s var(--ease)}
.btn:hover,.btn:focus-visible{background-color:var(--acc-d);border-color:var(--acc-d);color:var(--onacc);
  transform:translateY(-2px);box-shadow:0 14px 28px -16px rgba(15,28,46,.55)}
.btn.ghost{background-image:none;background-color:transparent;color:var(--navy);border-color:#CBD2DE}
.btn.ghost:hover,.btn.ghost:focus-visible{background-color:var(--accsoft);color:var(--navy);border-color:var(--acc-mid)}
.btn.dark{background-image:none;background-color:var(--navy);border-color:var(--navy);color:#fff}
.btn.dark:hover,.btn.dark:focus-visible{background-color:var(--navy2);border-color:var(--navy2);color:#fff}
#cc .btn.ghost{background-image:none;color:#fff;border-color:#3E5A85;background-color:transparent}
#cc .btn.ghost:hover{background-color:var(--navy2);border-color:#54739E;color:#fff}

/* ---- Pfeil im Verweis wandert (Zeichen wird von seite.js eingepackt) ---- */
.pf{font-style:normal;display:inline-block;transition:transform .26s var(--ease)}
a:hover .pf,button:hover .pf,.card:hover .pf{transform:translateX(5px)}

/* ---- Karten heben sich, Akzentkante faehrt aus ---- */
.card{position:relative;overflow:hidden;
  transition:transform .26s var(--ease),box-shadow .26s var(--ease),border-color .26s var(--ease)}
.card:before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc);
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.card:hover{transform:translateY(-5px);box-shadow:0 22px 46px -28px rgba(15,28,46,.5);border-color:#D6DCE6}
.card:hover:before{transform:scaleY(1)}
.card.hi:hover{border-color:var(--navy)}
.post:before{display:none}
.post img{transition:transform .5s var(--ease)}
.post:hover img{transform:scale(1.05)}
.role{transition:transform .22s var(--ease),border-color .22s var(--ease),box-shadow .22s var(--ease)}
.role:hover{transform:translateY(-3px);box-shadow:0 16px 34px -26px rgba(15,28,46,.5)}
.stufen a{transition:transform .2s var(--ease),border-color .2s var(--ease)}
.stufen a:hover{transform:translateY(-3px)}
.kunde{transition:transform .22s var(--ease),border-left-color .22s var(--ease)}
.kunde:hover{transform:translateX(4px);border-left-color:var(--acc-mid)}

/* ---- Kennzahlenzeilen faerben sich ---- */
.item{border-radius:6px;transition:background .22s var(--ease),padding-left .22s var(--ease)}
.items:not(.tight) .item:hover{background:var(--accsoft);padding-left:14px}
section.dark .items:not(.tight) .item:hover{background:rgba(200,241,74,.10)}

/* ---- Aufklappbar: Zeichen dreht ---- */
.acc summary{transition:color .2s var(--ease)}
.acc summary:hover{color:var(--ink)}
.acc summary:after{transition:transform .3s var(--ease);display:inline-block}
.acc details[open] summary:after{content:"+";transform:rotate(45deg)}

/* ---- Abstrakte Hintergrundelemente ---- */
.page>section:first-of-type{position:relative;overflow:hidden;isolation:isolate}
.page>section:first-of-type:before{content:"";position:absolute;z-index:-1;pointer-events:none;
  width:46vw;max-width:580px;aspect-ratio:1;border-radius:50%;background:var(--acc);
  opacity:.30;filter:blur(72px);top:-20%;right:-8%;
  animation:padanZug 24s ease-in-out infinite alternate}
.page>section:first-of-type:after{content:"";position:absolute;z-index:-1;inset:0;pointer-events:none;
  background-image:radial-gradient(#C9D1DE 1px,transparent 1px);background-size:26px 26px;opacity:.55;
  -webkit-mask-image:linear-gradient(to bottom,#000,transparent 72%);
          mask-image:linear-gradient(to bottom,#000,transparent 72%)}
section.dark{position:relative;overflow:hidden;isolation:isolate}
section.dark:before{content:"";position:absolute;z-index:-1;pointer-events:none;
  width:440px;height:440px;border-radius:50%;background:var(--acc);opacity:.15;filter:blur(84px);
  right:-110px;top:-150px;animation:padanZug 27s ease-in-out infinite alternate}
.nlbox{position:relative;overflow:hidden;isolation:isolate}
.nlbox:before{content:"";position:absolute;z-index:-1;pointer-events:none;width:300px;height:300px;
  border-radius:50%;background:var(--acc);opacity:.14;filter:blur(64px);right:-70px;bottom:-120px;
  animation:padanZug 22s ease-in-out infinite alternate}
@keyframes padanZug{from{transform:translate3d(0,0,0) scale(1)}
                    to{transform:translate3d(-34px,28px,0) scale(1.14)}}

/* ---- Einblenden beim Scrollen ---- */
.rvl{opacity:0;transform:translateY(18px);
  transition:opacity .6s var(--ease),transform .6s var(--ease)}
.rvl.sicht{opacity:1;transform:none}

/* ---- Weniger Bewegung, wenn im System so eingestellt ---- */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before,*:after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
  .rvl{opacity:1;transform:none}
}

/* =====================================================================
   Tool-Liste auf tools.html — der Block zwischen den Marken wird von
   tools-bauen.mjs erzeugt. Diese Regeln gehoeren dazu.
   ===================================================================== */
/* Kein Uebergang auf Farbe und Flaeche — sonst steht kurz Grau auf Grau. */
.tlfilter{font:640 14px var(--sans);color:var(--grey);background:none;
  border:1px solid var(--line);border-radius:99px;padding:8px 16px;cursor:pointer;
  transition:border-color .18s var(--ease)}
.tlfilter:hover{color:#fff;background:var(--navy);border-color:var(--navy)}
.tlfilter.on{color:var(--onacc);background:var(--acc);border-color:var(--acc)}
.tlkarte{display:flex;flex-direction:column;color:inherit;text-decoration:none}
.tlkarte h3{color:var(--navy)}
.tlkarte .res{margin-top:16px}
.tlrollen{display:block;margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--grey2)}
.tlkarte:hover .tlrollen{color:var(--ink)}

/* =====================================================================
   Mobil: Nachbesserungen vom 20.08.2026
   ---------------------------------------------------------------------
   1) Zweispaltige Bloecke stapeln. Das !important ist noetig, weil auf
      index.html die Spaltenteilung als style="" direkt im HTML steht —
      eine Media Query allein kommt dagegen nicht an.
   2) Kopfzeile: das Menue passt auf schmalen Geraeten nicht in eine
      Zeile. Statt drei Zeilen laeuft es waagrecht scrollbar durch.
   ===================================================================== */
@media(max-width:900px){
  .split,.split.wide,.g3,.g2{grid-template-columns:1fr !important;gap:30px}
  .split figure{order:2}
}
@media(max-width:760px){
  header .wrap{gap:10px;padding-top:12px;padding-bottom:12px;flex-wrap:nowrap}
  .logo{font-size:22px;flex:0 0 auto}
  nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
    gap:0;margin-left:auto;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);
            mask-image:linear-gradient(to right,#000 88%,transparent)}
  nav::-webkit-scrollbar{display:none}
  nav a{flex:0 0 auto;padding:8px 9px;font-size:14.5px}
  nav a:not(.btn):after{left:9px;right:9px}
  header .btn.sm{margin-left:6px !important;padding:8px 13px}
}
@media(max-width:560px){
  h1{font-size:clamp(29px,8.4vw,38px) !important}
  .lead{font-size:18px}
  .wrap{padding:0 20px}
  .card{padding:22px 20px 24px}
  .blk{padding:22px 20px}
  .nlbox{padding:26px 22px}
  .btn{padding:13px 18px}
  section{padding:56px 0}
  .quote{font-size:17px;padding-left:14px}
  figure svg{max-width:100%}
}
/* Spaltenzuordnung: auf schmalen Geraeten Paare sichtbar halten */
@media(max-width:520px){
  .mapping .z{margin:0 0 10px 16px;position:relative}
  .mapping .z:before{content:"→";position:absolute;left:-16px;top:50%;transform:translateY(-50%);
    color:var(--ink);font-weight:700}
  .mapping .q{margin-bottom:0}
}
/* Standmarke in der Toolkarte nur so breit wie ihr Text */
.tlkarte>.tag{align-self:flex-start}
/* Lange Kicker brechen auf schmalen Geraeten sonst unruhig um */
@media(max-width:560px){.kicker{letter-spacing:.1em;font-size:11px;gap:8px}
  .kicker:before{flex:0 0 18px}}

/* =====================================================================
   Newsletter-Formular (Startseite und newsletter.html)
   Die Anmeldung selbst steht in seite.js, Block WIX.
   ===================================================================== */
.nlform{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-start}
.nlfeld{flex:1 1 190px;min-width:0}
.nlform input[type=text],.nlform input[type=email]{
  width:100%;padding:14px 16px;border:1px solid var(--navy3);background:var(--navy2);
  color:#fff;border-radius:var(--rad-sm);font:inherit;font-size:16px}
.nlform input::placeholder{color:#8FA3C2}
.nlform input:focus{outline:2px solid var(--acc);outline-offset:1px;border-color:var(--acc)}
.nlform button{flex:0 0 auto}
.nlcheck{flex:1 1 100%;display:flex;gap:10px;align-items:flex-start;
  font-size:14.5px;line-height:1.45;color:#BFCBDF;cursor:pointer}
.nlcheck input{margin-top:3px;width:16px;height:16px;min-width:0;flex:0 0 16px;
  accent-color:var(--acc);padding:0}
.nlmeld{flex:1 1 100%;margin:0;font-size:14.5px;line-height:1.45;min-height:1px}
.nlmeld:empty{display:none}
.nlmeld.ok{color:var(--acc2);font-weight:600}
.nlmeld.fehler{color:#FFB4A0}
/* auf hellem Grund — newsletter.html (.nlbox.nlhell) */
.nlhell .nlform input[type=text],.nlhell .nlform input[type=email]{
  background:#fff;border-color:#CBD2DE;color:var(--navy)}
.nlhell .nlform input::placeholder{color:var(--grey2)}
.nlhell .nlcheck{color:var(--grey)}
.nlhell .nlmeld.ok{color:var(--ink)}
.nlhell .nlmeld.fehler{color:#C2400F}
/* Toolkarte: Name gross, kurzer Teaser, Verweis unten */
.tlkarte .tlname{font-size:23px;line-height:1.2;letter-spacing:-.025em;margin:14px 0 8px}
.tlkarte .tlteaser{margin:0;flex:1}
.tlmehr{display:inline-flex;align-items:center;gap:6px;margin-top:16px;
  font:640 15px var(--sans);color:var(--ink)}