:root{
  --navy:#1a365d; --navy-2:#1e40af; --brand:#2563eb; --brand-2:#3b82f6;
  --ink:#0f172a; --muted:#475569; --line:#e2e8f0; --soft:#f8fafc; --softer:#f1f5f9;
  --ok:#0e7490; --green:#16a34a;
  --maxw:1400px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--soft); color:var(--ink);
  font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
a{color:var(--brand); text-decoration:none}
a:hover{text-decoration:underline}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px}

/* Header */
.site-header{position:sticky; top:0; z-index:30; background:rgba(255,255,255,.94); backdrop-filter:blur(8px); border-bottom:1px solid var(--line)}
.site-header .wrap{max-width:1400px; padding-left:24px; padding-right:24px}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; gap:16px; min-height:80px; flex-wrap:nowrap}
.brand-logo{display:flex; align-items:center; gap:11px; text-decoration:none; flex:0 0 auto}
.brand-logo img{height:54px; width:auto}
.brand-logo span{color:var(--brand); font-weight:700; font-size:1.2rem; letter-spacing:-.01em; white-space:nowrap}
.head-right{display:flex; align-items:center; gap:16px; flex:0 1 auto; min-width:0}
.nav{display:flex; gap:15px; font-size:13.5px; color:var(--muted)}
.nav a{color:var(--muted); white-space:nowrap} .nav a:hover{color:var(--navy); text-decoration:none}
.nav a.active{color:var(--brand); font-weight:700}
.lang{display:flex; align-items:center; gap:5px; color:var(--muted); font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap}
.lang:hover{color:var(--navy)}
.btn-head{background:#0f172a; color:#fff; font-weight:700; font-size:13px; padding:9px 14px; border-radius:10px; white-space:nowrap}
.btn-head:hover{background:#1e293b; text-decoration:none}
.btn-tv{background:var(--brand); color:#fff; font-weight:700; font-size:13px; padding:9px 14px; border-radius:10px; white-space:nowrap}
.btn-tv:hover{background:var(--navy-2); text-decoration:none}
.btn-chat{background:#0e7490; color:#fff; font-weight:700; font-size:13px; padding:9px 14px; border-radius:10px; white-space:nowrap}
.btn-chat:hover{background:#0b5563; text-decoration:none}
@media(max-width:1180px){.nav{display:none}}
@media(max-width:600px){.brand-logo span{font-size:.98rem} .head-right{gap:10px} .btn-head{display:none}}

/* Hero band */
.band{position:relative; overflow:hidden; color:#fff; background:linear-gradient(120deg,#1a365d,#1e40af 55%,#2563eb); background-size:200% 200%; animation:grad 14s ease infinite}
@keyframes grad{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
.band .wrap{padding:64px 22px}
.eyebrow{text-transform:uppercase; letter-spacing:.2em; font-size:12px; font-weight:700; color:#bfdbfe; margin:0 0 14px}
.band h1{font-size:clamp(1.9rem,4vw,3rem); line-height:1.12; margin:0 0 16px; font-weight:700; max-width:18ch}
.band p.lead{font-size:1.15rem; color:#dbeafe; max-width:60ch; margin:0}
.band .accent{color:#bfdbfe}

/* KPIs */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; max-width:760px; margin:36px 0 0}
.kpis .n{font-size:1.9rem; font-weight:700}
.kpis .l{color:#bcd3f5; font-size:.9rem}
@media(max-width:620px){.kpis{grid-template-columns:repeat(2,1fr)}}

/* Cards grid */
.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:22px}
.card{position:relative; background:#fff; border:1px solid var(--line); border-radius:16px; padding:26px; transition:transform .35s cubic-bezier(.2,.7,.2,1), box-shadow .35s}
.card:hover{transform:translateY(-7px); box-shadow:0 22px 48px -22px rgba(37,99,235,.45)}
.card .ic{width:46px; height:46px; border-radius:12px; background:#dbeafe; color:var(--brand); display:flex; align-items:center; justify-content:center; margin-bottom:16px}
.card h3{margin:0 0 6px; color:var(--navy); font-size:1.15rem}
.card .sub{color:#94a3b8; font-weight:600; font-size:.95rem}
.card p{color:var(--muted); margin:.4rem 0 0; font-size:.97rem}
.tags{display:flex; flex-wrap:wrap; gap:6px; margin:14px 0 0}
.tag{background:var(--softer); color:#334155; font-size:11.5px; padding:3px 9px; border-radius:999px}
.tag.green{background:#dcfce7; color:#166534}
.card .go{display:inline-block; margin-top:16px; color:var(--brand); font-weight:700; font-size:.95rem}

/* Section */
.section{padding:60px 0}
.section h2{font-size:clamp(1.5rem,2.6vw,2rem); color:var(--navy); font-weight:700; margin:0 0 6px; text-align:center}
.section .sub-h{color:var(--muted); text-align:center; margin:0 0 34px}
.eyebrow-c{text-align:center; color:var(--brand); text-transform:uppercase; letter-spacing:.18em; font-size:12px; font-weight:700; margin:0 0 8px}

/* Featured */
.featured{background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; display:grid; grid-template-columns:1.1fr 1fr; box-shadow:0 24px 50px -30px rgba(15,23,42,.35)}
.featured .img{background:linear-gradient(135deg,var(--navy),var(--brand)); min-height:260px; display:flex; align-items:center; justify-content:center; color:#dbeafe; font-size:.9rem}
.featured .img img{width:100%; height:100%; object-fit:cover}
.featured .body{padding:34px}
.featured .meta{display:flex; gap:10px; align-items:center; font-size:12.5px; color:#64748b; margin-bottom:12px}
.pill{background:#dbeafe; color:var(--brand); font-weight:700; padding:3px 10px; border-radius:999px; font-size:12px}
.featured h3{margin:0; color:var(--navy); font-size:1.5rem; line-height:1.25}
.featured p{color:var(--muted)}
@media(max-width:760px){.featured{grid-template-columns:1fr}}

/* Article */
.article{background:#fff; margin:0 auto; max-width:1400px; border-radius:0}
.breadcrumb{font-size:13px; color:#64748b; padding:20px 0 0}
.breadcrumb a{color:#64748b}
.article-hero{color:#fff; border-radius:20px; padding:48px 40px; margin:20px 0 34px; background:linear-gradient(135deg,var(--navy),var(--navy-2) 55%,var(--ok))}
.article-hero .eyebrow{color:#bfdbfe}
.article-hero h1{font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.15; margin:0 0 14px; font-weight:700}
.article-hero p{font-size:1.1rem; color:#e2e8f0; margin:0; max-width:62ch}
.prose{font-size:1.04rem}
.prose h2{font-size:clamp(1.3rem,2.3vw,1.7rem); color:var(--navy); font-weight:700; margin:42px 0 12px}
.prose h3{font-size:1.12rem; color:var(--navy-2); margin:24px 0 6px}
.prose p{color:var(--muted); margin:0 0 16px}
.prose strong{color:var(--ink)}
.prose ul,.prose ol{color:var(--muted); padding-left:22px; line-height:1.8}
.prose img{max-width:100%; border-radius:14px; border:1px solid var(--line); margin:10px 0 6px; display:block}
.figcap{font-size:13px; color:#94a3b8; margin:0 0 22px}
.callout{background:var(--soft); border-left:4px solid var(--brand); border-radius:12px; padding:18px 22px; margin:24px 0}
.callout p{margin:0; color:var(--ink)}
.feat-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; margin:22px 0}
.feat{border:1px solid var(--line); border-radius:14px; padding:20px; background:#fff}
.feat .num{display:inline-flex; width:32px; height:32px; align-items:center; justify-content:center; border-radius:9px; background:#dbeafe; color:var(--brand); font-weight:700; margin-bottom:10px}
.feat h3{margin:0 0 4px; color:var(--navy)}
.feat p{margin:0; font-size:.95rem}
.check{list-style:none; padding:0; margin:8px 0 0}
.check li{position:relative; padding-left:28px; margin-bottom:10px; color:var(--muted)}
.check li::before{content:"✓"; position:absolute; left:0; top:0; color:var(--ok); font-weight:700}
.tbl{width:100%; border-collapse:collapse; margin:16px 0; font-size:14.5px}
.tbl th{text-align:left; padding:9px 12px; border-bottom:2px solid var(--brand); color:var(--navy)}
.tbl td{padding:8px 12px; border-bottom:1px solid var(--line); color:var(--muted)}
.cta{margin:46px 0 10px; background:var(--ink); color:#fff; border-radius:18px; padding:36px; text-align:center}
.cta h2{color:#fff; margin:0 0 10px; font-size:1.5rem}
.cta p{color:#cbd5e1; max-width:56ch; margin:0 auto 22px}
.btn{display:inline-block; background:var(--brand); color:#fff; font-weight:700; padding:13px 26px; border-radius:999px}
.btn:hover{background:#1d4ed8; text-decoration:none}
.btn.ghost{background:transparent; border:1px solid #64748b; margin-left:8px}

/* Footer */
.site-footer{background:#fff; border-top:1px solid #e5e7eb; color:#020817; margin-top:64px}
.site-footer .wrap{max-width:1400px; margin:0 auto; padding:48px 24px}
.site-footer .foot-grid{display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1.5fr; gap:32px}
.site-footer h4{font-size:14px; font-weight:600; color:#0f172a; margin:0 0 14px}
.site-footer .foot-brand h4{font-size:18px}
.site-footer p{margin:0; font-size:14px; line-height:1.7; color:#4b5563}
.site-footer ul{list-style:none; margin:0; padding:0}
.site-footer li{margin:0 0 10px}
.site-footer a{font-size:14px; color:#4b5563; text-decoration:none}
.site-footer a:hover{color:#0f172a}
.site-footer .copy{margin-top:36px; padding-top:22px; border-top:1px solid #e5e7eb; font-size:14px; color:#64748b}
@media(max-width:900px){.site-footer .foot-grid{grid-template-columns:1fr 1fr; gap:28px} .site-footer .foot-brand{grid-column:1/-1}}
@media(max-width:560px){.site-footer .foot-grid{grid-template-columns:1fr}}

/* width-tune: zentrierte Anordnung wie Startseite */
.article-hero{text-align:center}
.article-hero h1{max-width:26ch; margin-left:auto; margin-right:auto}
.article-hero p{margin-left:auto; margin-right:auto}
.prose h2{text-align:center}
.prose > p{max-width:74ch; margin-left:auto; margin-right:auto}
.prose > ul,.prose > ol{max-width:74ch; margin-left:auto; margin-right:auto}
.prose > .tbl,.prose table{margin-left:auto; margin-right:auto}
.callout{max-width:860px; margin-left:auto; margin-right:auto}
.band .wrap{text-align:center}
.band h1{max-width:18ch; margin-left:auto; margin-right:auto}
.band p.lead{margin-left:auto; margin-right:auto}
.kpis{margin-left:auto; margin-right:auto}

/* AGB / Legal */
.legal{max-width:900px; margin:0 auto; padding:8px 0 26px}
.legal h1{font-size:1.9rem; color:var(--navy); font-weight:700; margin:6px 0 10px}
.legal h2{font-size:1.2rem; color:var(--navy); font-weight:700; margin:32px 0 10px}
.legal p{color:var(--muted); margin:0 0 12px; line-height:1.7}
.legal ul{color:var(--muted); margin:0 0 14px; padding-left:22px; line-height:1.7}
.legal li{margin:0 0 6px}
.legal a{color:var(--brand)}
.legal strong{color:var(--ink)}
.legal .lead-legal{font-size:1.05rem; color:var(--ink); margin-bottom:4px}
.legal .legal-foot{margin-top:28px; color:var(--muted)}