/* Layout: ruhige, helle Beraterseite. Kopfzeile mit CKS-Würfel, Einstieg zweispaltig (Aussage links, Porträt rechts),
   danach klar getrennte Bänder. Der Würfel aus dem Logo ist das einzige Schmuckelement. */
@font-face{font-family:"Poppins";font-weight:300;font-style:normal;font-display:swap;src:url("Poppins-Light.woff") format("woff")}
@font-face{font-family:"Poppins";font-weight:400;font-style:normal;font-display:swap;src:url("Poppins-Regular.woff") format("woff")}
@font-face{font-family:"Poppins";font-weight:500;font-style:normal;font-display:swap;src:url("Poppins-Medium.woff") format("woff")}

:root{
  --blue:#267EB8;        /* CKS-Blau aus dem Logo */
  --blue-ink:#1D6699;    /* Blau für Text auf Hell */
  --slate:#595959;       /* dunkle Würfelfläche */
  --stone:#838383;       /* helle Würfelfläche */
  --bg:#F8F8F8;
  --surface:#FFFFFF;
  --band:#EFF2F5;
  --ink:#22292F;
  --muted:#5B6670;
  --line:#DFE4E9;
  --tint:#E8F1F8;
  --todo:#FFF1B8;
  --todo-ink:#5A4500;
  --display:"Poppins","Segoe UI","Helvetica Neue",Arial,sans-serif;
  --body:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  --step--1:.875rem; --step-0:1.0625rem; --step-1:1.3rem; --step-2:1.75rem; --step-3:clamp(2rem,4.2vw,3.1rem);
  --wrap:72rem;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--body);font-size:var(--step-0);line-height:1.6}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-ink)}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--blue);outline-offset:3px;border-radius:4px}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.2;text-wrap:balance;margin:0}
h1{font-size:var(--step-3);font-weight:300;letter-spacing:-.01em}
h2{font-size:var(--step-2);font-weight:300}
h3{font-size:var(--step-1);font-weight:500}
p{margin:0}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.eyebrow{font-family:var(--display);font-size:var(--step--1);font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--blue-ink)}
.lead{font-size:var(--step-1);color:var(--muted);max-width:38rem;line-height:1.5}
.offen{background:var(--todo);color:var(--todo-ink);padding:.05em .3em;border-radius:3px;font-style:normal}

/* Kopfzeile */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:10;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding-block:.8rem}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:var(--ink)}
.brand svg{width:2.4rem;height:auto;flex:none}
.brand b{font-family:var(--display);font-weight:400;font-size:1.35rem;color:var(--blue);letter-spacing:.04em;display:block;line-height:1}
.brand span{font-family:var(--display);font-weight:300;font-size:.8rem;color:var(--muted);display:block;line-height:1.3}
.nav{display:flex;flex-wrap:wrap;gap:.25rem 1.4rem;font-family:var(--display);font-size:.95rem}
.nav a{color:var(--ink);text-decoration:none;padding-block:.3rem;border-bottom:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--blue)}

.cube-a{fill:var(--stone)} .cube-b{fill:var(--blue)} .cube-c{fill:var(--slate)}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--display);font-weight:500;font-size:1rem;text-decoration:none;border-radius:4px;padding:.8rem 1.4rem;transition:background .15s}
.btn-primary{background:var(--blue);color:#fff}
.btn-primary:hover{background:var(--blue-ink)}
.btn-ghost{color:var(--blue-ink);border:1px solid var(--line);background:var(--surface)}
.btn-ghost:hover{border-color:var(--blue)}

/* Einstieg */
.hero{padding-block:clamp(2.5rem,6vw,5rem)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.hero-text{display:grid;gap:1.4rem;min-width:0}
.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:.4rem}
.hero-figure{position:relative;margin:0}
.hero-figure img{border-radius:4px;aspect-ratio:4/5;object-fit:cover;width:100%}
.hero-figure::before{content:"";position:absolute;inset:auto -1rem -1rem auto;width:55%;height:45%;background:var(--blue);opacity:.14;border-radius:4px;z-index:-1}
.hero-figure figcaption{font-size:var(--step--1);color:var(--muted);margin-top:.7rem}

/* Kennzahlen */
.facts{border-block:1px solid var(--line);background:var(--band)}
.facts dl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0}
.facts div{padding:1.6rem 1.2rem;border-left:1px solid var(--line)}
.facts div:first-child{border-left:0}
.facts dt{font-family:var(--display);font-weight:300;font-size:2.4rem;line-height:1;color:var(--blue-ink);font-variant-numeric:tabular-nums}
.facts dd{margin:.5rem 0 0;color:var(--muted);font-size:var(--step--1);line-height:1.4}

/* Abschnitte */
section{scroll-margin-top:5rem}
.band{padding-block:clamp(3rem,7vw,5.5rem)}
.band-alt{background:var(--band);border-block:1px solid var(--line)}
.head{display:grid;gap:.8rem;margin-bottom:2.4rem;max-width:44rem;align-content:start}
.head .btn{justify-self:start}

/* Kurzprofil */
.intro .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(2rem,5vw,4rem)}
.intro-copy{display:grid;gap:1rem;min-width:0}

/* Branchen */
.sectors{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.sector{background:var(--surface);padding:1.6rem 1.4rem;display:grid;gap:.8rem;align-content:start;min-width:0}
.sector svg{width:2rem;height:2rem}
.sector p{color:var(--muted);font-size:.98rem}
.sector .ref{font-size:var(--step--1);color:var(--ink);border-top:1px solid var(--line);padding-top:.8rem;margin-top:.2rem}

/* Warengruppen */
.goods{margin-top:2.6rem}
.goods h3{font-size:var(--step-0);margin-bottom:1rem}
.goods ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.5rem}
.goods li{font-size:.92rem;padding:.35rem .8rem;border:1px solid var(--line);border-radius:100px;background:var(--surface);white-space:nowrap}

/* Grundsätze */
.principles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem 3rem}
.principle{display:grid;gap:.7rem;align-content:start;min-width:0;padding-top:1.2rem;border-top:2px solid var(--blue)}
.principle p{color:var(--muted)}

/* Leistungen */
.services{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.6rem 3.5rem}
.service{display:grid;gap:.7rem;align-content:start;min-width:0;padding-top:1.2rem;border-top:2px solid var(--ink)}
.service p{color:var(--muted)}
.service .goal{color:var(--ink);font-weight:600}

/* Arbeitsweise */
.work .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.work img{border-radius:4px;aspect-ratio:3/2;object-fit:cover;width:100%}
.checks{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:.8rem}
.checks li{display:grid;grid-template-columns:1.1rem 1fr;gap:.8rem;align-items:baseline}
.checks li::before{content:"";width:.7rem;height:.7rem;background:var(--blue);transform:rotate(45deg) translateY(-.1rem)}
.norms{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.4rem}
.norms span{font-family:var(--display);font-size:.85rem;font-weight:500;padding:.3rem .7rem;background:var(--tint);color:var(--blue-ink);border-radius:3px}

/* Kontakt */
.contact{background:var(--tint);color:var(--ink)}
.contact .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.contact h2{color:var(--ink)}
.contact .lead{color:var(--muted)}
.contact .eyebrow{color:var(--blue-ink)}
.contact-list{display:grid;gap:1.2rem;margin:0}
.contact-list div{display:grid;gap:.15rem}
.contact-list dt{font-size:var(--step--1);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.contact-list dd{margin:0;font-family:var(--display);font-size:1.25rem;font-weight:300;overflow-wrap:anywhere}
.contact-list a{color:var(--ink);text-decoration-color:var(--blue);text-underline-offset:.2em}
.contact .btn-primary{margin-top:1.4rem}

/* Fußzeile */
.site-foot{padding-block:2rem;border-top:1px solid var(--line);font-size:var(--step--1);color:var(--muted)}
.site-foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem}
.site-foot nav{display:flex;flex-wrap:wrap;gap:1.2rem}
.site-foot a{color:var(--muted)}

/* Über mich */
.page-hero{padding-block:clamp(2.5rem,6vw,4.5rem) 0}
.page-hero .wrap{display:grid;gap:1rem}
.wide-photo{margin-top:2.5rem}
.wide-photo img{width:100%;aspect-ratio:21/9;object-fit:cover;object-position:50% 40%;border-radius:4px}
.cv{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem)}
.cv ul{padding-left:1.1rem;margin:1rem 0 0;display:grid;gap:.6rem;color:var(--muted)}
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:4px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:40rem;font-size:.97rem}
th,td{text-align:left;vertical-align:top;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
th{font-family:var(--display);font-weight:500;font-size:var(--step--1);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);background:var(--bg)}
tr:last-child td{border-bottom:0}
td:first-child{white-space:nowrap}
td:nth-child(2){min-width:12rem}
td:first-child{color:var(--blue-ink);font-weight:600}

/* Rechtstexte */
.legal{padding-block:clamp(2.5rem,6vw,4rem)}
.legal .wrap{max-width:46rem}
.legal h1{margin-bottom:2rem}
.legal h2{font-size:var(--step-1);font-weight:500;margin:2.2rem 0 .7rem}
.legal p+p{margin-top:.8rem}
.legal ul{padding-left:1.2rem}
.legal address{font-style:normal}

@media (max-width:860px){
  .hero .wrap,.intro .wrap,.work .wrap,.contact .wrap,.cv{grid-template-columns:minmax(0,1fr)}
  .hero-figure{max-width:24rem}
  .sectors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .services,.principles{grid-template-columns:minmax(0,1fr)}
  .facts dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .facts div:nth-child(3){border-left:0}
  .facts div:nth-child(n+3){border-top:1px solid var(--line)}
}
@media (max-width:520px){
  .sectors{grid-template-columns:minmax(0,1fr)}
  .brand span{display:none}
  .facts dt{font-size:2rem}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}