/* ============================================================
   Masum Consulting & Design – geteiltes Stylesheet
   Leitfarbe = Logo-Gold #BA9759
   ============================================================ */

:root, [data-theme="dark"] {
  --bg:#0c0d10; --bg-soft:#121419; --surface:#171a21;
  --ink:#f3f1ec; --ink-soft:#a3a39c; --line:rgba(255,255,255,.09);
  --gold:#c8a564; --gold-deep:#BA9759; --champagne:#e7d3a8; --bronze:#8a6d3a;
  --cool:#7f93b0; /* kühler Akzent für Consulting */
  --blob-op:.5; --grid-op:.5; --shadow:0 18px 50px -12px rgba(0,0,0,.6);
}
[data-theme="light"] {
  --bg:#faf8f3; --bg-soft:#f3efe6; --surface:#ffffff;
  --ink:#1c1b18; --ink-soft:#6b675e; --line:rgba(20,18,14,.10);
  --gold:#a8854a; --gold-deep:#8f6f37; --champagne:#cdae72; --bronze:#c8a564;
  --cool:#5b6f8c;
  --blob-op:.28; --grid-op:.6; --shadow:0 18px 50px -16px rgba(120,95,40,.25);
}

* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; line-height:1.6; overflow-x:hidden; -webkit-font-smoothing:antialiased; transition:background .5s ease,color .5s ease; }
a { color:inherit; text-decoration:none; }
::selection { background:var(--gold); color:#fff; }

/* ---------- Bewegtes Hintergrund-Motiv ---------- */
.bg-canvas { position:fixed; inset:0; z-index:-2; overflow:hidden; }
.blob { position:absolute; border-radius:50%; filter:blur(80px); opacity:var(--blob-op); will-change:transform; transition:opacity .5s ease; }
.blob.a { width:46vw; height:46vw; background:var(--gold); top:-10vw; left:-8vw; animation:drift1 22s cubic-bezier(.16,1,.3,1) infinite alternate; }
.blob.b { width:40vw; height:40vw; background:var(--champagne); top:30vh; right:-10vw; animation:drift2 26s cubic-bezier(.16,1,.3,1) infinite alternate; }
.blob.c { width:34vw; height:34vw; background:var(--bronze); bottom:-12vw; left:25vw; animation:drift3 30s cubic-bezier(.16,1,.3,1) infinite alternate; }
@keyframes drift1 { to { transform:translate(12vw,18vh) scale(1.15); } }
@keyframes drift2 { to { transform:translate(-14vw,-10vh) scale(1.1); } }
@keyframes drift3 { to { transform:translate(8vw,-16vh) scale(.9); } }
.grid-overlay { position:fixed; inset:0; z-index:-1; pointer-events:none; background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:64px 64px; mask-image:radial-gradient(ellipse at center,#000 30%,transparent 80%); opacity:var(--grid-op); }

/* ---------- Navigation ---------- */
header { position:fixed; top:0; left:0; right:0; z-index:50; display:flex; align-items:center; justify-content:space-between; padding:22px clamp(20px,5vw,60px); transition:background .4s,padding .4s,border-color .4s; border-bottom:1px solid transparent; }
header.scrolled { background:color-mix(in srgb,var(--bg) 72%,transparent); backdrop-filter:blur(14px); padding-top:14px; padding-bottom:14px; border-bottom:1px solid var(--line); }
.logo { font-weight:700; letter-spacing:.5px; font-size:1.05rem; display:flex; align-items:center; gap:10px; }
.logo .dot { width:10px; height:10px; border-radius:50%; background:var(--gold); box-shadow:0 0 14px var(--gold); }
.logo span { color:var(--ink-soft); font-weight:400; }
nav { display:flex; gap:26px; align-items:center; }
nav a.link { font-size:.92rem; color:var(--ink-soft); transition:color .25s; }
nav a.link:hover { color:var(--ink); }
.nav-cta { border:1px solid var(--line); border-radius:999px; padding:9px 18px; color:var(--ink) !important; transition:border-color .25s,background .25s; }
.nav-cta:hover { border-color:var(--gold); background:color-mix(in srgb,var(--gold) 12%,transparent); }
.nav-back { font-size:.9rem; color:var(--ink-soft); display:inline-flex; gap:7px; align-items:center; transition:color .25s; }
.nav-back:hover { color:var(--ink); }
.theme-toggle { width:40px; height:40px; border-radius:50%; border:1px solid var(--line); background:transparent; color:var(--ink); cursor:pointer; font-size:1.05rem; display:grid; place-items:center; transition:border-color .25s,transform .3s; flex-shrink:0; }
.burger { display:none; flex-direction:column; gap:4px; align-items:center; justify-content:center; width:42px; height:42px; border:1px solid var(--line); border-radius:10px; background:transparent; color:var(--ink); cursor:pointer; flex-shrink:0; }
.burger span { display:block; width:18px; height:2px; background:currentColor; border-radius:2px; transition:transform .25s, opacity .2s; }
.burger.open span:nth-child(1){ transform:translateY(6px) rotate(45deg); }
.burger.open span:nth-child(2){ opacity:0; }
.burger.open span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }
.theme-toggle:hover { border-color:var(--gold); transform:rotate(15deg); }

/* ---------- Layout ---------- */
section { position:relative; padding:clamp(80px,12vh,150px) clamp(20px,5vw,60px); }
.wrap { max-width:1180px; margin:0 auto; }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-size:.78rem; letter-spacing:2px; text-transform:uppercase; color:var(--gold); margin-bottom:20px; }
.eyebrow::before { content:""; width:24px; height:1px; background:var(--gold); display:inline-block; }
.eyebrow.cool { color:var(--cool); }
.eyebrow.cool::before { background:var(--cool); }
h1,h2,h3 { line-height:1.08; font-weight:700; letter-spacing:-.02em; }

/* ---------- Hero ---------- */
.hero { min-height:100vh; display:flex; align-items:center; padding-top:140px; }
.hero.short { min-height:78vh; }
.hero h1 { font-size:clamp(2.6rem,7vw,5.4rem); }
.hero h1 .grad { background:linear-gradient(100deg,var(--gold-deep),var(--champagne) 55%,var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero h1 .grad.cool { background:linear-gradient(100deg,var(--cool),#aebfd6); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.lead { font-size:clamp(1.05rem,1.6vw,1.3rem); color:var(--ink-soft); max-width:640px; margin:28px 0 40px; }
.hero-actions { display:flex; gap:16px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; gap:10px; padding:15px 28px; border-radius:999px; font-weight:600; font-size:.98rem; transition:transform .25s,box-shadow .25s,background .25s; }
.btn-primary { background:var(--gold-deep); color:#fff; box-shadow:0 10px 40px -10px var(--gold-deep); }
.btn-primary:hover { transform:translateY(-3px); box-shadow:0 18px 50px -12px var(--gold-deep); }
.btn-cool { background:var(--cool); color:#fff; box-shadow:0 10px 40px -10px var(--cool); }
.btn-cool:hover { transform:translateY(-3px); box-shadow:0 18px 50px -12px var(--cool); }
.btn-ghost { border:1px solid var(--line); color:var(--ink); }
.btn-ghost:hover { border-color:var(--ink-soft); transform:translateY(-3px); }
.scroll-hint { position:absolute; bottom:34px; left:50%; transform:translateX(-50%); color:var(--ink-soft); font-size:.8rem; letter-spacing:2px; text-transform:uppercase; }
.scroll-hint::after { content:""; display:block; width:1px; height:40px; margin:12px auto 0; background:linear-gradient(var(--ink-soft),transparent); animation:pulse 2s infinite; }
@keyframes pulse { 0%,100%{opacity:.3} 50%{opacity:1} }

/* ---------- Marquee ---------- */
.marquee { overflow:hidden; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:22px 0; }
.marquee-track { display:flex; gap:60px; white-space:nowrap; width:max-content; animation:scrollX 38s linear infinite; }
.marquee-track span { font-size:clamp(1.1rem,2vw,1.6rem); font-weight:700; color:var(--ink-soft); letter-spacing:-.01em; display:flex; align-items:center; gap:60px; }
.marquee-track span::after { content:"◆"; color:var(--gold); font-size:.7em; }
@keyframes scrollX { to { transform:translateX(-50%); } }

/* ---------- Reveal ---------- */
.reveal { opacity:0; transform:translateY(38px); transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1); }
.reveal.in { opacity:1; transform:none; }
.reveal.d1 { transition-delay:.08s; } .reveal.d2 { transition-delay:.16s; } .reveal.d3 { transition-delay:.24s; }

.section-head { max-width:760px; margin-bottom:60px; }
.section-head h2 { font-size:clamp(2rem,4.5vw,3.4rem); }
.section-head p { color:var(--ink-soft); margin-top:18px; font-size:1.1rem; }

/* ---------- Deep Topics ---------- */
.topic { margin-bottom:clamp(64px,9vh,110px); }
.topic:last-child { margin-bottom:0; }
.topic-head { max-width:780px; margin-bottom:38px; }
.topic-head .num { font-size:.8rem; color:var(--gold); font-weight:700; letter-spacing:2px; }
.topic-head h3 { font-size:clamp(1.6rem,3.6vw,2.5rem); margin:10px 0 0; }
.quote { font-size:clamp(1.1rem,1.7vw,1.3rem); color:var(--ink); border-left:2px solid var(--gold); padding-left:20px; margin:22px 0 0; line-height:1.5; }
.topic-intro { color:var(--ink-soft); margin-top:18px; font-size:1.05rem; max-width:760px; }

.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.cards.two { grid-template-columns:repeat(2,1fr); }
.card { background:var(--bg-soft); border:1px solid var(--line); border-radius:18px; padding:30px; transition:transform .4s cubic-bezier(.16,1,.3,1),border-color .4s,background .4s,box-shadow .4s; }
.card:hover { transform:translateY(-6px); border-color:color-mix(in srgb,var(--gold) 35%,var(--line)); background:var(--surface); box-shadow:var(--shadow); }
.card h4 { font-size:1.15rem; margin-bottom:10px; }
.card p { color:var(--ink-soft); font-size:.95rem; }

.checklist { list-style:none; display:grid; gap:12px; margin-top:24px; grid-template-columns:repeat(2,1fr); }
.checklist li { padding-left:28px; position:relative; color:var(--ink); }
.checklist li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--gold); font-weight:700; }

.groups { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.group { background:var(--bg-soft); border:1px solid var(--line); border-radius:18px; padding:28px; }
.group h4 { color:var(--gold); font-size:.95rem; letter-spacing:.5px; margin-bottom:16px; }
.group ul { list-style:none; display:grid; gap:9px; }
.group li { color:var(--ink-soft); font-size:.94rem; padding-left:16px; position:relative; }
.group li::before { content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--gold); }

/* ---------- Portfolio ---------- */
.gallery { display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:14px; }
.gallery-sub { font-size:1.25rem; margin:0 0 18px; color:var(--ink); display:flex; align-items:center; gap:12px; }
.gallery-sub::after { content:""; flex:1; height:1px; background:var(--line); }
.tile { position:relative; aspect-ratio:1/1; border-radius:16px; overflow:hidden; border:1px solid var(--line); background:var(--surface); display:grid; place-items:center; transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s; cursor:pointer; }
.tile:hover { transform:translateY(-4px) scale(1.01); box-shadow:var(--shadow); }
.tile img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s cubic-bezier(.16,1,.3,1); }
.tile:hover img { transform:scale(1.05); }
.tile .cap { position:absolute; left:0; right:0; bottom:0; padding:14px 14px 12px; font-size:.8rem; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.7)); opacity:0; transform:translateY(8px); transition:opacity .35s,transform .35s; }
.tile:hover .cap { opacity:1; transform:none; }
.tile .count { position:absolute; top:10px; right:10px; font-size:.72rem; font-weight:600; color:#fff; background:rgba(0,0,0,.55); border-radius:999px; padding:4px 10px; backdrop-filter:blur(4px); }

/* ---------- Lightbox ---------- */
.lb { position:fixed; inset:0; z-index:100; display:none; place-items:center; background:rgba(6,7,9,.92); backdrop-filter:blur(8px); padding:clamp(16px,4vw,48px); }
.lb.open { display:grid; }
.lb-stage { position:relative; width:100%; max-width:1000px; display:flex; flex-direction:column; gap:18px; align-items:center; }
.lb-imgwrap { position:relative; width:100%; display:grid; place-items:center; }
.lb-img { max-width:100%; max-height:68vh; border-radius:12px; box-shadow:0 30px 80px -20px rgba(0,0,0,.8); background:#fff; }
.lb-head { display:flex; justify-content:space-between; align-items:center; width:100%; color:var(--ink); padding-right:52px; }
.lb-title { font-weight:700; font-size:1.15rem; }
.lb-counter { color:var(--ink-soft); font-size:.9rem; }
.lb-nav { position:absolute; top:50%; transform:translateY(-50%); width:50px; height:50px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.4); color:#fff; font-size:1.4rem; cursor:pointer; display:grid; place-items:center; transition:background .2s,border-color .2s; }
.lb-nav:hover { background:var(--gold-deep); border-color:var(--gold-deep); }
.lb-prev { left:-8px; } .lb-next { right:-8px; }
@media (min-width:1100px){ .lb-prev { left:-66px; } .lb-next { right:-66px; } }
.lb-close { position:absolute; top:-6px; right:-6px; width:44px; height:44px; border-radius:50%; border:1px solid rgba(255,255,255,.2); background:rgba(0,0,0,.5); color:#fff; font-size:1.3rem; cursor:pointer; display:grid; place-items:center; z-index:2; }
.lb-close:hover { background:var(--gold-deep); }
.lb-thumbs { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; max-width:100%; }
.lb-thumbs img { width:54px; height:54px; object-fit:cover; border-radius:8px; cursor:pointer; opacity:.45; border:2px solid transparent; transition:opacity .2s,border-color .2s; background:#fff; }
.lb-thumbs img:hover { opacity:.85; }
.lb-thumbs img.active { opacity:1; border-color:var(--gold); }

/* ---------- Kennzahlen ---------- */
.stats { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
.stat .big { font-size:clamp(2.2rem,5vw,3.4rem); font-weight:700; background:linear-gradient(120deg,var(--gold-deep),var(--champagne)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.stat .lbl { color:var(--ink-soft); font-size:.92rem; margin-top:6px; }

/* ---------- Prozess ---------- */
.steps { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; counter-reset:step; }
.step { position:relative; padding-top:28px; border-top:1px solid var(--line); }
.step::before { counter-increment:step; content:"0" counter(step); position:absolute; top:-16px; font-size:.85rem; color:var(--gold); font-weight:700; }
.step h3 { font-size:1.15rem; margin-bottom:10px; }
.step p { color:var(--ink-soft); font-size:.94rem; }

/* ---------- Team / Person ---------- */
.member { background:var(--surface); border:1px solid var(--line); border-radius:24px; padding:40px; transition:border-color .4s,box-shadow .4s,transform .4s; }
.member:hover { border-color:color-mix(in srgb,var(--gold) 40%,var(--line)); box-shadow:var(--shadow); transform:translateY(-4px); }
.member .role { color:var(--gold); font-size:.78rem; letter-spacing:2px; text-transform:uppercase; }
.member h3 { font-size:1.6rem; margin:10px 0 16px; }
.member-head { display:flex; gap:20px; align-items:center; margin-bottom:22px; }
.member-head .avatar { width:96px; height:96px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid var(--line); background:#fff; box-shadow:var(--shadow); }
.member-head h3 { margin:6px 0 0; }
.member-head .role { display:block; }
@media (max-width:480px){ .member-head { flex-direction:column; align-items:flex-start; gap:14px; } }
.member p { color:var(--ink-soft); margin-bottom:22px; font-size:.97rem; }
.contacts { display:flex; flex-wrap:wrap; gap:10px; }
.contacts a { font-size:.86rem; border:1px solid var(--line); border-radius:999px; padding:8px 15px; color:var(--ink); transition:border-color .25s,background .25s; }
.contacts a:hover { border-color:var(--gold); background:color-mix(in srgb,var(--gold) 10%,transparent); }

/* ---------- Teaser (Design auf Consulting-Seite) ---------- */
.teaser { position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--line); border-radius:28px; padding:clamp(34px,5vw,64px); display:grid; grid-template-columns:1.2fr 1fr; gap:40px; align-items:center; }
.teaser .glow { position:absolute; inset:0; background:radial-gradient(500px at 85% 20%,color-mix(in srgb,var(--gold) 18%,transparent),transparent 70%); pointer-events:none; }
.teaser h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); margin-bottom:16px; }
.teaser p { color:var(--ink-soft); margin-bottom:26px; }
.teaser-thumbs { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.teaser-thumbs img { width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:12px; border:1px solid var(--line); background:#fff; }

/* ---------- CTA + Formular ---------- */
.cta-band { text-align:center; }
.cta-band h2 { font-size:clamp(2.2rem,5vw,3.6rem); max-width:900px; margin:0 auto 24px; }
.cta-band p { color:var(--ink-soft); font-size:1.15rem; margin-bottom:36px; }
.contact-form { max-width:640px; margin:0 auto; text-align:left; display:grid; gap:18px; }
.field { display:grid; gap:8px; }
.field.row { grid-template-columns:1fr 1fr; gap:18px; }
.field label { font-size:.85rem; color:var(--ink-soft); letter-spacing:.3px; }
.field input,.field textarea { width:100%; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:14px 16px; color:var(--ink); font:inherit; font-size:.98rem; transition:border-color .25s,box-shadow .25s; }
.field textarea { min-height:140px; resize:vertical; }
.field input:focus,.field textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 3px color-mix(in srgb,var(--gold) 22%,transparent); }
.consent { display:flex; align-items:flex-start; gap:12px; font-size:.85rem; color:var(--ink-soft); text-align:left; }
.consent input { width:18px; height:18px; margin-top:3px; accent-color:var(--gold-deep); flex-shrink:0; }
.consent a { color:var(--gold); text-decoration:underline; }
.hp { position:absolute; left:-9999px; top:-9999px; }
.form-note { font-size:.85rem; color:var(--ink-soft); text-align:center; }
.form-status { padding:14px 16px; border-radius:12px; font-size:.95rem; display:none; }
.form-status.ok { display:block; background:color-mix(in srgb,var(--gold) 14%,transparent); border:1px solid var(--gold); color:var(--ink); }
.form-status.err { display:block; background:rgba(220,80,60,.12); border:1px solid rgba(220,80,60,.5); color:var(--ink); }

/* ---------- Footer ---------- */
footer { border-top:1px solid var(--line); padding:60px clamp(20px,5vw,60px) 40px; }
.foot-grid { max-width:1180px; margin:0 auto; display:flex; justify-content:space-between; flex-wrap:wrap; gap:30px; }
footer a { color:var(--ink-soft); transition:color .2s; }
footer a:hover { color:var(--ink); }
.foot-links { display:flex; gap:28px; flex-wrap:wrap; }
.foot-bottom { max-width:1180px; margin:40px auto 0; color:var(--ink-soft); font-size:.85rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; border-top:1px solid var(--line); padding-top:24px; }

/* ============================================================
   LANDING-HUB (Split-Screen)
   ============================================================ */
.hub-brand { position:fixed; top:0; left:0; right:0; z-index:20; display:flex; align-items:center; justify-content:space-between; padding:22px clamp(20px,5vw,60px); }
.hub { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.door { position:relative; min-height:100vh; display:flex; flex-direction:column; justify-content:flex-start; padding:clamp(120px,22vh,240px) clamp(32px,6vw,90px) clamp(32px,6vw,90px); overflow:hidden; transition:flex-grow .5s; isolation:isolate; }
.door::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.0; transition:opacity .5s; }
.door.c::before { background:radial-gradient(700px at 30% 40%,color-mix(in srgb,var(--cool) 22%,transparent),transparent 70%); }
.door.d::before { background:radial-gradient(700px at 70% 40%,color-mix(in srgb,var(--gold) 24%,transparent),transparent 70%); }
.door:hover::before { opacity:1; }
.door .kicker { font-size:.8rem; letter-spacing:3px; text-transform:uppercase; color:var(--ink-soft); margin-bottom:16px; }
.door h1 { font-size:clamp(2.4rem,5vw,4rem); margin-bottom:18px; }
.door.c h1 .accent { color:var(--cool); }
.door.d h1 .accent { color:var(--gold); }
.door p { color:var(--ink-soft); max-width:420px; font-size:1.05rem; margin-bottom:30px; }
.door .enter { display:inline-flex; align-items:center; gap:10px; font-weight:600; color:var(--ink); transition:gap .25s; }
.door .enter::after { content:"→"; transition:transform .25s; }
.door:hover .enter { gap:16px; }
.door .enter.c-ink { color:var(--cool); }
.door .enter.d-ink { color:var(--gold); }
.door + .door { border-left:1px solid var(--line); }
.door .door-thumbs { display:flex; gap:8px; margin-top:34px; flex-wrap:wrap; }
.door .door-thumbs img { width:60px; height:60px; object-fit:cover; border-radius:10px; border:1px solid var(--line); background:#fff; opacity:.85; }
.hub-foot { position:fixed; bottom:0; left:0; right:0; z-index:20; display:flex; justify-content:center; gap:22px; padding:16px; font-size:.82rem; color:var(--ink-soft); }
.hub-foot a:hover { color:var(--ink); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:860px){
  .burger { display:flex; }
  header nav { display:none; }
  header nav.open { display:flex; flex-direction:column; align-items:stretch; gap:0; position:absolute; top:100%; left:0; right:0; background:color-mix(in srgb,var(--bg) 97%,transparent); backdrop-filter:blur(14px); border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:6px 0; box-shadow:var(--shadow); }
  header nav.open .link, header nav.open .nav-cta { display:block; padding:14px clamp(20px,5vw,60px); border:none; border-radius:0; background:transparent; color:var(--ink); font-size:1.02rem; }
  header nav.open .nav-cta { color:var(--gold); }
  header nav.open .theme-toggle { margin:10px clamp(20px,5vw,60px) 4px; }
  .cards,.cards.two,.groups,.stats,.steps { grid-template-columns:1fr; }
  .stats { grid-template-columns:1fr 1fr; }
  .checklist { grid-template-columns:1fr; }
  .gallery { grid-template-columns:1fr 1fr; }
  .teaser { grid-template-columns:1fr; }
  .team { grid-template-columns:1fr !important; }
  .lb-img { max-height:56vh; }
  .hub { grid-template-columns:1fr; }
  .door { min-height:auto; padding-top:90px; padding-bottom:60px; }
  .door + .door { border-left:none; border-top:1px solid var(--line); }
  .door:first-of-type { padding-top:120px; }
  .hub-foot { position:static; flex-wrap:wrap; gap:8px 18px; padding:26px 20px 34px; border-top:1px solid var(--line); }
  .hub-foot span { flex-basis:100%; text-align:center; }
}
@media (max-width:560px){ .field.row { grid-template-columns:1fr; } }
@media (prefers-reduced-motion:reduce){
  .blob,.marquee-track,.scroll-hint::after { animation:none !important; }
  .reveal { opacity:1; transform:none; }
  html { scroll-behavior:auto; }
}

/* ============================================================
   CHARTS & DATENTABELLEN (lokal, ohne externe Bibliothek)
   ============================================================ */
.text-link { color:var(--cool); font-weight:600; font-size:.9rem; display:inline-flex; gap:8px; align-items:center; margin-top:14px; transition:gap .25s; }
.text-link::after { content:"→"; transition:transform .25s; }
.text-link:hover { gap:14px; }
.example-badge { display:inline-block; font-size:.72rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-deep); background:color-mix(in srgb,var(--gold) 14%,transparent); border:1px solid color-mix(in srgb,var(--gold) 45%,transparent); border-radius:999px; padding:5px 13px; margin-bottom:22px; }

.chart-row { display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,60px); align-items:center; margin-bottom:clamp(48px,8vh,90px); }
.chart-row:last-child { margin-bottom:0; }
.chart-row p { color:var(--ink-soft); font-size:1.05rem; }
.chart-row h3 { font-size:clamp(1.4rem,3vw,2rem); margin-bottom:16px; }
@media (max-width:860px){ .chart-row { grid-template-columns:1fr; } }

.chart-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:clamp(20px,3vw,32px); }
.chart-title { font-weight:700; font-size:1.05rem; margin-bottom:20px; text-align:center; color:var(--ink); }
.donut-wrap { display:flex; gap:30px; align-items:center; flex-wrap:wrap; justify-content:center; }
.donut-wrap svg { flex-shrink:0; }
.legend { list-style:none; display:grid; gap:11px; min-width:200px; }
.legend li { display:flex; align-items:center; gap:10px; font-size:.92rem; color:var(--ink-soft); }
.legend .sw { width:14px; height:14px; border-radius:4px; flex-shrink:0; }
.legend .val { margin-left:auto; color:var(--ink); font-variant-numeric:tabular-nums; padding-left:14px; font-weight:600; }
.bars-scroll { overflow-x:auto; }
.bar-svg { display:block; }
.bar-svg text { fill:var(--ink-soft); }
.bar-svg .axis { stroke:var(--line); }
.bar-svg .bar { fill:var(--gold-deep); transition:fill .2s; }
.bar-svg .bar:hover { fill:var(--gold); }
.bar-svg .vlabel { fill:var(--ink); font-weight:600; }

/* Datentabelle */
.data-controls { display:flex; gap:20px; flex-wrap:wrap; margin-bottom:20px; align-items:flex-end; }
.data-controls label { display:grid; gap:7px; font-size:.85rem; color:var(--ink-soft); }
.data-controls select { background:var(--surface); border:1px solid var(--line); border-radius:10px; padding:11px 14px; color:var(--ink); font:inherit; min-width:230px; cursor:pointer; }
.data-controls select:focus { outline:none; border-color:var(--gold); }
.table-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:16px; }
table.data { width:100%; border-collapse:collapse; font-size:.92rem; }
table.data th, table.data td { padding:13px 18px; text-align:left; border-bottom:1px solid var(--line); white-space:nowrap; }
table.data th { background:var(--bg-soft); color:var(--ink); font-weight:600; position:sticky; top:0; }
table.data td { color:var(--ink-soft); }
table.data tbody tr:last-child td { border-bottom:none; }
table.data tbody tr:hover td { background:color-mix(in srgb,var(--gold) 7%,transparent); }
table.data .num { text-align:right; font-variant-numeric:tabular-nums; }
.thumb-yes { color:var(--gold-deep); font-weight:700; }
.pager { display:flex; gap:14px; justify-content:space-between; align-items:center; margin-top:18px; flex-wrap:wrap; }
.pager .pages { display:flex; gap:6px; flex-wrap:wrap; }
.pager button { border:1px solid var(--line); background:var(--surface); color:var(--ink); border-radius:8px; padding:8px 13px; cursor:pointer; font:inherit; font-size:.88rem; transition:border-color .2s,background .2s,color .2s; }
.pager button:hover:not(:disabled):not(.active) { border-color:var(--gold); }
.pager button.active { background:var(--gold-deep); color:#fff; border-color:var(--gold-deep); }
.pager button:disabled { opacity:.4; cursor:default; }
.pager .info { color:var(--ink-soft); font-size:.85rem; }
.chart-legend-h { display:flex; gap:20px; justify-content:center; flex-wrap:wrap; margin-top:12px; font-size:.85rem; color:var(--ink-soft); }
.chart-legend-h span { display:flex; align-items:center; gap:7px; }
.chart-legend-h i { width:16px; height:3px; border-radius:2px; display:inline-block; }
table.data tr.win td { background:color-mix(in srgb,var(--gold) 13%,transparent); font-weight:600; color:var(--ink); }

/* Klartext-Übersetzer */
.translate { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:760px){ .translate { grid-template-columns:1fr; } }
.tcard { background:var(--surface); border:1px solid var(--line); border-radius:18px; overflow:hidden; }
.tcard .it { padding:18px 22px; border-bottom:1px solid var(--line); color:var(--ink-soft); font-style:italic; }
.tcard .it::before { content:"IT sagt"; display:block; font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-soft); font-style:normal; margin-bottom:6px; opacity:.7; }
.tcard .biz { padding:18px 22px; color:var(--ink); }
.tcard .biz::before { content:"Heißt für Sie"; display:block; font-size:.7rem; letter-spacing:1.5px; text-transform:uppercase; color:var(--gold-deep); margin-bottom:6px; }