/* ============================================================
   Zulassung Bund — Flaggschiff-Startseite „Light Premium Platform"
   Nur aktiv unter body.home-platform. Hell (weiß/hellgrau) wie die
   Konkurrenz digital-zulassen.de, aber professioneller: Grün-Akzent,
   Flaggen-Detail, Plattform-/Ketten-Erzählung, Dashboard-Mockup.
   ============================================================ */
body.home-platform {
  --bg: #FFFFFF;
  --bg-2: #F4F6F9;
  --surface: #FFFFFF;
  --line: #E6EAF0;
  --line-2: #D7DDE6;
  --text: #16202B;
  --text-soft: #5A6675;
  --green: #0F172A;
  --green-d: #1E293B;
  --green-br: #1E293B; /* Alias für Inline-Refs aus dem HTML */
  --green-soft: #EEF1F5;
  --green-line: rgba(15,23,42,.35);
  --card: #FFFFFF;

  --sh-sm: 0 1px 2px rgba(16,24,40,.05), 0 1px 3px rgba(16,24,40,.05);
  --sh-md: 0 8px 24px rgba(16,24,40,.08);
  --sh-lg: 0 24px 60px rgba(16,24,40,.14);

  background: var(--bg);
  color: var(--text);
  font-family: 'Hanken Grotesk', system-ui, sans-serif;
}
body.home-platform .container { max-width: 1200px; margin-inline: auto; padding-inline: 1.25rem; }
body.home-platform h1, body.home-platform h2, body.home-platform h3 { font-family: 'Outfit', system-ui, sans-serif; letter-spacing: -0.02em; color: var(--text); }

/* Flaggen-Streifen ganz oben */
body.home-platform .flag-top { height: 4px; display: flex; }
body.home-platform .flag-top i { flex: 1; }
body.home-platform .flag-top i:nth-child(1){ background:#000; }
body.home-platform .flag-top i:nth-child(2){ background:#DD0000; }
body.home-platform .flag-top i:nth-child(3){ background:#FFCE00; }

/* Header hell, sticky */
body.home-platform .ph-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85); backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}
body.home-platform .ph-inner { position: relative; max-width: 1200px; margin-inline: auto; padding: 0.85rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; }
body.home-platform .ph-logo { display: flex; align-items: center; gap: 0.6rem; text-decoration: none; color: var(--text); font-family: 'Outfit'; font-weight: 600; font-size: 1.1rem; }
body.home-platform .ph-logo .mark { width: 34px; height: 34px; border-radius: 9px; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 0 0 1px var(--line-2); }
body.home-platform .ph-logo .mark i { flex: 1; }
body.home-platform .ph-logo .mark i:nth-child(1){ background:#000; }
body.home-platform .ph-logo .mark i:nth-child(2){ background:#DD0000; }
body.home-platform .ph-logo .mark i:nth-child(3){ background:#FFCE00; }
body.home-platform .ph-logo strong { color: var(--green-d); font-weight: 700; }
body.home-platform .ph-logo small { display:block; font-size:.62rem; letter-spacing:.09em; text-transform:uppercase; color:var(--text-soft); font-weight:600; font-family:'Hanken Grotesk'; margin-top:-2px;}
body.home-platform .ph-nav { display: flex; gap: 1.4rem; margin-left: auto; }
body.home-platform .ph-nav a { color: var(--text-soft); text-decoration: none; font-size: .92rem; font-weight: 500; transition: color .15s; }
body.home-platform .ph-nav a:hover { color: var(--text); }
body.home-platform .ph-cta { background: var(--green); color:#fff; font-family:'Outfit'; font-weight:700; font-size:.9rem; padding:.6rem 1.15rem; border-radius:999px; text-decoration:none; box-shadow:0 6px 18px rgba(15,23,42,.28); white-space:nowrap; }
body.home-platform .ph-cta:hover { background: var(--green-d); }
body.home-platform .ph-burger { display:none; margin-left:auto; background:none; border:1px solid var(--line-2); color:var(--text); border-radius:10px; padding:.5rem .7rem; font-size:1.1rem; }

/* Buttons */
body.home-platform .btn2 { display:inline-flex; align-items:center; gap:.5rem; font-family:'Outfit'; font-weight:700; border-radius:999px; padding:.85rem 1.6rem; text-decoration:none; font-size:1rem; transition:transform .15s, background .15s; }
body.home-platform .btn2-green { background:var(--green); color:#fff; box-shadow:0 8px 22px rgba(15,23,42,.28); }
body.home-platform .btn2-green:hover { background:var(--green-d); transform:translateY(-1px); }
body.home-platform .btn2-ghost { background:#fff; color:var(--text); border:1px solid var(--line-2); }
body.home-platform .btn2-ghost:hover { border-color:var(--text-soft); }

/* Section-Grundlagen */
body.home-platform section { position: relative; }
body.home-platform .sec { padding: 5rem 0; }
body.home-platform .eyebrow2 { display:inline-flex; align-items:center; gap:.5rem; font-family:'Hanken Grotesk'; font-weight:700; font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--green-d); background:var(--green-soft); border:1px solid var(--green-line); padding:.35em .85em; border-radius:999px; }
body.home-platform .sec h2 { font-size: clamp(1.7rem,3.4vw,2.5rem); margin:.9rem 0 .6rem; }
body.home-platform .sec-lead { color:var(--text-soft); font-size:1.05rem; max-width:640px; line-height:1.6; }
body.home-platform .sec-head-center { text-align:center; }
body.home-platform .sec-head-center .sec-lead { margin-inline:auto; }

/* HERO */
body.home-platform .hero2 { padding: 4.5rem 0 4rem; overflow:hidden; }
body.home-platform .hero2::before { content:""; position:absolute; inset:0;
  background:
   radial-gradient(55% 55% at 18% 0%, rgba(15,23,42,.10), transparent 60%),
   linear-gradient(rgba(16,24,40,.035) 1px, transparent 1px) 0 0/100% 34px,
   linear-gradient(90deg, rgba(16,24,40,.035) 1px, transparent 1px) 0 0/34px 100%;
  -webkit-mask-image: linear-gradient(#000, transparent 85%); mask-image: linear-gradient(#000, transparent 85%);
  pointer-events:none; }
body.home-platform .hero2 .container { position:relative; display:grid; grid-template-columns: 1.05fr .95fr; gap:3.5rem; align-items:center; }
body.home-platform .hero2 h1 { font-size: clamp(2.4rem, 5vw, 3.7rem); line-height:1.05; margin:1.1rem 0 1.1rem; }
body.home-platform .hero2 h1 .accent { color: var(--text); } /* Slate: H1 einfarbig dunkel, kein Farb-Highlight */
body.home-platform .hero2 .hero-sub2 { color:var(--text-soft); font-size:1.12rem; line-height:1.6; max-width:540px; }
body.home-platform .hero2 .hero-cta2 { display:flex; gap:.9rem; flex-wrap:wrap; margin:1.8rem 0 1.4rem; }
body.home-platform .hero-chips { display:flex; flex-wrap:wrap; gap:.5rem .5rem; margin-top:1rem; }
body.home-platform .chip { display:inline-flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--text-soft); background:#fff; border:1px solid var(--line); border-radius:999px; padding:.4em .8em; box-shadow:var(--sh-sm); }
body.home-platform .chip .dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px var(--green-soft); }

/* Dashboard-Mockup (helle Card) */
body.home-platform .mock { background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sh-lg); overflow:hidden; }
body.home-platform .mock-bar { display:flex; align-items:center; gap:.5rem; padding:.7rem .9rem; border-bottom:1px solid var(--line); background:var(--bg-2); }
body.home-platform .mock-bar .d { width:10px; height:10px; border-radius:50%; }
body.home-platform .mock-bar .d1{background:#ff5f57;} .mock-bar .d2{background:#febc2e;} .mock-bar .d3{background:#28c840;}
body.home-platform .mock-bar span { margin-left:auto; font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-soft); }
body.home-platform .mock-body { padding:1.1rem; }
body.home-platform .mock-head { display:flex; align-items:center; gap:.6rem; margin-bottom:.9rem; }
body.home-platform .mock-head h4 { font-family:'Outfit'; font-weight:700; font-size:1.05rem; color:var(--text); margin:0; }
body.home-platform .mock-live { font-size:.62rem; font-weight:700; letter-spacing:.08em; color:#fff; background:var(--green); border-radius:5px; padding:.15em .5em; }
body.home-platform .mock-row { display:flex; align-items:center; gap:.75rem; padding:.7rem; border:1px solid var(--line); border-radius:12px; margin-bottom:.55rem; background:#fff; }
body.home-platform .mock-av { width:34px; height:34px; border-radius:9px; display:flex; align-items:center; justify-content:center; font-family:'Outfit'; font-weight:700; color:#fff; flex-shrink:0; }
body.home-platform .mock-row .n { font-weight:600; color:var(--text); font-size:.92rem; }
body.home-platform .mock-row .m { font-size:.76rem; color:var(--text-soft); }
body.home-platform .mock-tag { margin-left:auto; font-size:.64rem; font-weight:700; letter-spacing:.04em; border-radius:6px; padding:.28em .55em; white-space:nowrap; }
body.home-platform .tag-kba { color:var(--green-d); background:var(--green-soft); }
body.home-platform .tag-sig { color:#9A6B1F; background:#FBF1DE; }
body.home-platform .tag-ok { color:#1D6FB8; background:#E4F0FB; }

/* Ketten-Diagramm */
body.home-platform .chain { display:grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap:1rem; align-items:stretch; margin-top:2.5rem; }
body.home-platform .chain-node { background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:1.4rem 1.25rem; box-shadow:var(--sh-sm); }
body.home-platform .chain-node.is-core { border-color:var(--green-line); box-shadow:0 0 0 1px var(--green-line), 0 20px 46px rgba(15,23,42,.14); background:linear-gradient(180deg, var(--green-soft), #fff); }
body.home-platform .chain-node h3 { font-size:1.05rem; margin:0 0 .4rem; }
body.home-platform .chain-node p { color:var(--text-soft); font-size:.86rem; line-height:1.5; margin:0; }
body.home-platform .chain-node .k { font-size:.68rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--green-d); display:block; margin-bottom:.5rem; }
body.home-platform .chain-arrow { display:flex; align-items:center; color:var(--green); font-size:1.4rem; }

/* Vorgänge / Vorteile Cards */
body.home-platform .grid-cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1.1rem; margin-top:2.2rem; }
body.home-platform .dcard { background:var(--card); border:1px solid var(--line); border-radius:16px; padding:1.5rem 1.4rem; box-shadow:var(--sh-sm); transition:border-color .15s, box-shadow .15s, transform .15s; }
body.home-platform .dcard:hover { border-color:var(--green-line); box-shadow:var(--sh-md); transform:translateY(-2px); }
body.home-platform .dcard .ic { width:44px; height:44px; border-radius:11px; background:var(--green-soft); color:var(--green-d); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; }
body.home-platform .dcard .ic svg { width:24px; height:24px; }
body.home-platform .dcard h3 { font-size:1.12rem; margin:0 0 .4rem; }
body.home-platform .dcard p { color:var(--text-soft); font-size:.92rem; line-height:1.55; margin:0 0 .9rem; }
body.home-platform .dcard a { color:var(--green-d); text-decoration:none; font-weight:600; font-size:.9rem; }
body.home-platform .dcard a:hover { text-decoration:underline; }

/* Bänder */
body.home-platform .band-alt { background:var(--bg-2); border-block:1px solid var(--line); }

/* Ablauf */
body.home-platform .steps2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.5rem; margin-top:2.5rem; counter-reset:st; }
body.home-platform .step2 { position:relative; padding-top:1rem; }
body.home-platform .step2 .num { width:40px; height:40px; border-radius:11px; background:var(--green); color:#fff; font-family:'Outfit'; font-weight:800; display:flex; align-items:center; justify-content:center; margin-bottom:1rem; box-shadow:0 6px 16px rgba(15,23,42,.28); }
body.home-platform .step2 h3 { font-size:1.15rem; margin:0 0 .4rem; }
body.home-platform .step2 p { color:var(--text-soft); font-size:.92rem; line-height:1.55; margin:0; }

/* Gebühren-Tabelle */
body.home-platform .fee { background:var(--card); border:1px solid var(--line); border-radius:16px; overflow:hidden; max-width:720px; box-shadow:var(--sh-sm); }
body.home-platform .fee-row { display:flex; justify-content:space-between; align-items:center; padding:1rem 1.4rem; border-bottom:1px solid var(--line); }
body.home-platform .fee-row:last-child { border-bottom:0; }
body.home-platform .fee-row span { color:var(--text); }
body.home-platform .fee-row b { font-family:'Outfit'; font-weight:700; color:var(--green-d); }
body.home-platform .fee-note { color:var(--text-soft); font-size:.85rem; margin-top:1rem; max-width:720px; }

/* B2B-Band */
body.home-platform .b2b-band { background:linear-gradient(120deg, var(--green-soft), #fff 55%); border:1px solid var(--line); border-radius:22px; padding:2.5rem; display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:center; box-shadow:var(--sh-sm); }
body.home-platform .b2b-band h2 { margin-top:.6rem; }
body.home-platform .b2b-seg { display:flex; gap:.6rem; flex-wrap:wrap; margin-top:1.2rem; }
body.home-platform .b2b-seg span { background:#fff; border:1px solid var(--line-2); border-radius:10px; padding:.55rem .9rem; font-size:.88rem; color:var(--text); }

/* Final CTA */
body.home-platform .cta2 { text-align:center; }
body.home-platform .cta2 .box { background:linear-gradient(180deg, var(--green-soft), #fff); border:1px solid var(--green-line); border-radius:24px; padding:3.5rem 2rem; box-shadow:var(--sh-md); }
body.home-platform .cta2 h2 { font-size:clamp(1.8rem,3.5vw,2.6rem); }
body.home-platform .cta2 p { color:var(--text-soft); max-width:520px; margin:.8rem auto 1.8rem; }

/* Footer hell */
body.home-platform .pf { background:var(--bg-2); border-top:1px solid var(--line); padding:3rem 0 2rem; color:var(--text-soft); }
body.home-platform .pf-grid { display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2rem; }
body.home-platform .pf h4 { color:var(--text); font-family:'Outfit'; font-size:.95rem; margin:0 0 .9rem; }
body.home-platform .pf a { color:var(--text-soft); text-decoration:none; display:block; padding:.25rem 0; font-size:.9rem; }
body.home-platform .pf a:hover { color:var(--green-d); }
body.home-platform .pf-legal { border-top:1px solid var(--line); margin-top:2rem; padding-top:1.4rem; font-size:.82rem; }

/* Responsive */
@media (max-width: 900px) {
  body.home-platform .hero2 .container { grid-template-columns:1fr; gap:2.5rem; }
  body.home-platform .chain { grid-template-columns:1fr; }
  body.home-platform .chain-arrow { transform:rotate(90deg); justify-content:center; }
  body.home-platform .b2b-band { grid-template-columns:1fr; }
  body.home-platform .pf-grid { grid-template-columns:1fr 1fr; }
  body.home-platform .ph-nav { display:none; position:absolute; top:100%; left:0; right:0; flex-direction:column; background:#fff; border-bottom:1px solid var(--line); padding:.8rem 1.25rem; gap:.1rem; box-shadow:var(--sh-md); }
  body.home-platform .ph-nav a { padding:.6rem 0; }
  body.home-platform .ph-burger { display:inline-block; }
}
@media (max-width: 560px) {
  body.home-platform .pf-grid { grid-template-columns:1fr; }
  body.home-platform .sec { padding:3.5rem 0; }
}
@media (prefers-reduced-motion: reduce){ body.home-platform *{ transition:none!important; } }
/* ===== Consent-Banner (Cookie-Einwilligung) — GA4 nur mit Zustimmung ===== */
.consent-banner{
  position:fixed; left:16px; right:16px; bottom:16px; z-index:9999;
  max-width:560px; margin-left:auto;
  background:#fff; color:#16202B;
  border:1px solid #E6EAF0; border-radius:16px;
  box-shadow:0 18px 48px rgba(15,23,42,.22);
  padding:20px 22px; font-family:inherit; font-size:14.5px; line-height:1.55;
  animation:consent-in .28s ease-out both;
}
@keyframes consent-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.consent-banner p{margin:0 0 14px}
.consent-banner strong{color:#0F172A}
.consent-banner a{color:#0F172A; text-decoration:underline; text-underline-offset:2px}
.consent-knoepfe{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap}
.consent-banner .btn{
  appearance:none; -webkit-appearance:none; cursor:pointer; font:inherit; font-weight:600;
  padding:11px 20px; border-radius:999px; border:1px solid transparent; line-height:1;
}
.consent-banner .btn-primary{background:#0F172A; color:#fff}
.consent-banner .btn-primary:hover{background:#1E293B}
.consent-banner .btn-outline{background:#fff; color:#0F172A; border-color:#CBD5E1}
.consent-banner .btn-outline:hover{background:#F4F6F9}
.cookie-settings-link{cursor:pointer}
@media(max-width:560px){
  .consent-banner{left:10px; right:10px; bottom:10px; padding:16px 16px}
  .consent-knoepfe{justify-content:stretch}
  .consent-banner .btn{flex:1 1 auto; text-align:center}
}