/* ============================================================
   Datenstrategie — Datenstrategien für digitale Unternehmensentwicklung
   Strategic modern · light + slate · cyan/teal · framework + sticky roadmap
   ============================================================ */
:root{
  --ds-bg:#f1f5f9; --ds-white:#ffffff; --ds-dark:#1e293b; --ds-dark2:#0f172a; --ds-line:#e2e8f0;
  --ds-cyan:#22d3ee; --ds-teal:#0891b2; --ds-cyan-l:#a5f3fc;
  --ds-ink:#1e293b; --ds-muted:#64748b; --ds-slate:#94a3b8; --ds-green:#16a34a;
}
*{ -webkit-font-smoothing:antialiased; }
.font-display{ font-family:'Bricolage Grotesque','Inter',sans-serif; letter-spacing:-0.02em; }
.font-label{ font-family:'Bricolage Grotesque','Inter',sans-serif; letter-spacing:.14em; text-transform:uppercase; }
body.ds-body{ font-family:'Inter',system-ui,sans-serif; color:var(--ds-ink); background:var(--ds-bg); }

.ds-dark{ background:var(--ds-dark); color:#f1f5f9; } .ds-dark2{ background:var(--ds-dark2); color:#f1f5f9; } .ds-white{ background:var(--ds-white); }
.text-cyan{ color:var(--ds-teal); } .text-slate{ color:var(--ds-slate); } .text-muted{ color:var(--ds-muted); }
.text-grad{ background:linear-gradient(100deg,var(--ds-cyan),var(--ds-teal)); -webkit-background-clip:text; background-clip:text; color:transparent; }

.ds-grid{ position:relative; }
.ds-grid::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background-image:linear-gradient(var(--ds-line) 1px,transparent 1px),linear-gradient(90deg,var(--ds-line) 1px,transparent 1px);
  background-size:40px 40px; opacity:.55; mask-image:radial-gradient(ellipse at 70% 20%, black, transparent 75%); }

.ds-card{ background:var(--ds-white); border:1px solid var(--ds-line); border-radius:1rem; box-shadow:0 1px 2px rgba(15,23,42,.04); transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease; }
.ds-card:hover{ transform:translateY(-4px); box-shadow:0 22px 44px -24px rgba(8,145,178,.4); border-color:var(--ds-cyan-l); }
.ds-card-dark{ background:var(--ds-dark2); border:1px solid #334155; border-radius:1rem; transition:transform .25s ease,border-color .25s ease; }
.ds-card-dark:hover{ transform:translateY(-4px); border-color:var(--ds-teal); }

.ds-icon{ width:48px; height:48px; border-radius:.7rem; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg, rgba(34,211,238,.16), rgba(8,145,178,.16)); color:var(--ds-teal); }
.ds-badge{ display:inline-flex; align-items:center; gap:.4rem; padding:.32rem .8rem; border-radius:999px; background:rgba(34,211,238,.14); color:var(--ds-teal); font-size:.72rem; font-weight:600; }
.ds-stat{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; letter-spacing:-0.03em; }
.ds-eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-family:'Bricolage Grotesque',sans-serif; text-transform:uppercase; letter-spacing:.14em; font-size:.72rem; font-weight:700; color:var(--ds-teal); }
.ds-eyebrow::before{ content:""; width:22px; height:2px; background:var(--ds-teal); display:inline-block; }

.ds-pillar{ background:var(--ds-white); border:1px solid var(--ds-line); border-top:3px solid var(--ds-teal); border-radius:.9rem; transition:transform .25s ease,box-shadow .25s ease; }
.ds-pillar:hover{ transform:translateY(-5px); box-shadow:0 22px 44px -24px rgba(8,145,178,.4); }

.ds-phase-link{ display:flex; gap:.9rem; align-items:flex-start; padding:.9rem 1rem; border-left:2px solid var(--ds-line); color:var(--ds-muted); transition:all .25s ease; }
.ds-phase-link .pn{ font-family:'Bricolage Grotesque',sans-serif; font-weight:800; color:var(--ds-slate); }
.ds-phase-link.is-active{ border-left-color:var(--ds-teal); color:var(--ds-ink); background:rgba(34,211,238,.06); }
.ds-phase-link.is-active .pn{ color:var(--ds-teal); }

.btn-teal{ background:linear-gradient(100deg,var(--ds-cyan),var(--ds-teal)); color:#04222a; font-weight:700; transition:transform .2s ease, box-shadow .3s ease, filter .2s ease; }
.btn-teal:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(8,145,178,.55); filter:brightness(1.05); }
.btn-dark{ background:var(--ds-dark); color:#fff; font-weight:600; transition:transform .2s ease,background .2s ease; }
.btn-dark:hover{ transform:translateY(-2px); background:#0f172a; }
.btn-ghost{ border:1px solid var(--ds-line); color:var(--ds-ink); font-weight:600; transition:background .2s ease,border-color .2s ease; }
.btn-ghost:hover{ background:#fff; border-color:var(--ds-teal); color:var(--ds-teal); }
.btn-ghost-light{ border:1px solid rgba(255,255,255,.28); color:#fff; font-weight:600; transition:background .2s ease; }
.btn-ghost-light:hover{ background:rgba(255,255,255,.1); }

.ds-prose h2{ font-family:'Bricolage Grotesque',sans-serif; color:var(--ds-ink); font-size:1.45rem; margin:2rem 0 .6rem; }
.ds-prose h3{ font-family:'Bricolage Grotesque',sans-serif; color:var(--ds-ink); font-size:1.1rem; margin:1.4rem 0 .4rem; }
.ds-prose p,.ds-prose li{ color:var(--ds-muted); line-height:1.85; }
.ds-prose ul{ list-style:disc; padding-left:1.25rem; }
.ds-prose a{ color:var(--ds-teal); text-decoration:underline; }
.ds-prose table{ width:100%; border-collapse:collapse; margin:1rem 0; }
.ds-prose th,.ds-prose td{ border:1px solid var(--ds-line); padding:.7rem .9rem; text-align:left; font-size:.9rem; color:var(--ds-muted); }
.ds-prose th{ color:var(--ds-ink); font-family:'Bricolage Grotesque',sans-serif; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }

.cookie-banner-hover-effect:hover{ filter:brightness(.98); }