/* Plattform-Seite: Technologie, Integrationen, Sicherheit, Vorteile, Implementierung */
.pf-hero { position: relative; overflow: hidden; background: #FFFFFF; border-bottom: 1px solid #E8EAED; padding: clamp(56px, 8vw, 104px) 0 clamp(28px, 4vw, 44px); text-align: center; }
.pf-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(45% 70% at 20% 0%, rgba(46, 107, 127, 0.12), transparent 70%), radial-gradient(40% 60% at 85% 10%, rgba(250, 169, 60, 0.16), transparent 70%); }
.pf-hero .container { position: relative; }
.pf-hero h1 { margin: 0 auto; max-width: 13em; font-size: clamp(2.5rem, 1.3rem + 3.8vw, 4.5rem); font-weight: 600; line-height: 1.02; letter-spacing: -0.045em; color: #031E3F; text-wrap: balance; }
.pf-hero .lead { margin: 20px auto 0; max-width: 40em; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: #5B6472; }
.kicker { margin: 0 0 14px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #2E6B7F; }
.pf-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 30px; }
.btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; box-sizing: border-box; padding: 0 22px; border-radius: 10px; font-size: 15.5px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap; }
.btn-primary { background: #031E3F; color: #FFFFFF; }
.btn-primary:hover { background: #134A7A; color: #FFFFFF; }
.btn-secondary { border: 1px solid #D5D9DF; background: #FFFFFF; color: #031E3F; }
.btn-secondary:hover { border-color: #031E3F; color: #031E3F; }
.pf-subnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 36px; }
.pf-subnav a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 16px; border-radius: 999px; border: 1px solid #E8EAED; background: #FFFFFF; font-size: 14px; color: #031E3F; text-decoration: none; }
.pf-subnav a:hover { border-color: #031E3F; }

.pf-section { padding: clamp(72px, 9vw, 120px) 0; background: #FFFFFF; }
.pf-section-soft { background: #F6F7F9; border-top: 1px solid #E8EAED; border-bottom: 1px solid #E8EAED; }
.pf-head { max-width: 46em; }
.pf-head-center { margin-left: auto; margin-right: auto; text-align: center; }
.pf-head h2 { margin: 0; font-size: clamp(1.875rem, 1.25rem + 2vw, 2.875rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.035em; color: #031E3F; text-wrap: balance; }
.pf-head .lead { margin: 16px 0 0; font-size: clamp(1rem, 0.95rem + 0.3vw, 1.125rem); line-height: 1.6; color: #5B6472; }
.pf-note { max-width: 60em; margin: 28px 0 0; font-size: 15px; line-height: 1.6; color: #6B7480; }

.pf-cards { display: grid; gap: 16px; margin-top: 40px; }
.pf-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pf-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pf-card { padding: 24px; border-radius: 16px; border: 1px solid #E8EAED; background: #FFFFFF; }
.pf-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: #EEF5F7; margin-bottom: 16px; }
.pf-card h3 { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.35; color: #031E3F; }
.pf-card p { margin: 0; font-size: 15px; line-height: 1.6; color: #5B6472; }
@media (max-width: 960px) { .pf-cards-3, .pf-cards-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pf-cards-3, .pf-cards-4 { grid-template-columns: minmax(0, 1fr); } }

/* ---- Architektur-Diagramm ---- */
.arch { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1.15fr) 72px minmax(0, 1.2fr); gap: 12px 0; align-items: stretch; margin-top: 44px; padding: clamp(16px, 3vw, 32px); border-radius: 24px; border: 1px solid #E8EAED; background: #F6F7F9 radial-gradient(60% 80% at 10% 0%, rgba(46, 107, 127, 0.1), transparent 60%); }
.arch-col { display: grid; grid-template-rows: auto repeat(3, minmax(0, 1fr)); gap: 12px; }
.arch-title { margin: 0 0 2px; min-height: 28px; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7480; }
.arch-tag { display: inline-block; margin-left: 6px; padding: 2px 8px; border-radius: 999px; background: #E7F4EE; color: #1F7A55; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; text-transform: none; vertical-align: middle; }
.arch-card { display: flex; flex-direction: column; justify-content: center; gap: 4px; padding: 14px 16px; border-radius: 14px; border: 1px solid #E8EAED; background: #FFFFFF; }
.arch-card strong { font-size: 15px; font-weight: 600; color: #031E3F; }
.arch-card span { font-size: 13px; line-height: 1.45; color: #6B7480; }
.arch-app { padding: 10px; border-radius: 18px; border: 1px solid #C8D2DA; background: rgba(255, 255, 255, 0.6); }
.arch-app .arch-title { color: #031E3F; }
.arch-env .arch-card { align-self: center; min-height: 76px; }
.arch-card-app { border-color: #D5D9DF; box-shadow: 0 10px 24px -18px rgba(3, 30, 63, 0.4); }
.arch-links { display: grid; grid-template-rows: auto repeat(3, minmax(0, 1fr)); gap: 12px; }
.arch-links::before { content: ""; min-height: 28px; }
.arch-link { position: relative; display: flex; align-items: center; justify-content: center; }
.arch-link::before { content: ""; position: absolute; left: 6px; right: 6px; top: 50%; height: 2px; background: #B9C2CC; }
.arch-link::after { content: ""; position: absolute; top: 50%; left: 6px; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #2E6B7F; box-shadow: 0 0 0 3px rgba(46, 107, 127, 0.18); animation: arch-dot 3.6s cubic-bezier(0.45, 0, 0.3, 1) infinite both; animation-delay: calc(var(--i, 0) * 0.9s); }
.arch-link-label { position: relative; z-index: 1; padding: 2px 8px; border-radius: 999px; background: #F6F7F9; font-size: 11.5px; font-weight: 600; color: #6B7480; white-space: nowrap; }
.arch-links-sdk { grid-template-rows: auto minmax(0, 1fr); }
.arch-link-tall::after { animation-duration: 2.4s; animation-delay: 0.3s; background: #FAA93C; box-shadow: 0 0 0 3px rgba(250, 169, 60, 0.25); }
@keyframes arch-dot { 0% { left: 6px; opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 14px); opacity: 0; } }
.arch-core { grid-template-rows: auto minmax(0, 1fr); }
.arch-mods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.arch-mod { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 12px 14px; border-radius: 14px; border: 1px solid #E8EAED; background: #FFFFFF; animation: arch-mod 9s ease infinite; animation-delay: calc(var(--i, 0) * 1.5s); }
.arch-mod i { display: block; width: 7px; height: 7px; margin: 0 0 6px; border-radius: 50%; background: var(--c, #6B7480); }
.arch-mod strong { font-size: 14px; font-weight: 600; color: #031E3F; }
.arch-mod span { font-size: 12.5px; line-height: 1.4; color: #6B7480; }
.mod-id { --c: #4C8DFF; } .mod-vault { --c: #1F7A55; } .mod-search { --c: #2E6B7F; } .mod-ai { --c: #FAA93C; } .mod-voice { --c: #7B5EA7; } .mod-access { --c: #C9473F; }
@keyframes arch-mod { 0%, 12%, 100% { border-color: #E8EAED; box-shadow: none; transform: none; } 3%, 9% { border-color: var(--c, #031E3F); box-shadow: 0 16px 28px -22px rgba(3, 30, 63, 0.5); transform: translateY(-2px); } }
/* Mini-Visuals: Oberflaeche, laufender Workflow, strukturierter Datensatz */
.arch-mini { display: flex; align-items: center; gap: 6px; margin-top: 10px; }
.ui-mini { gap: 5px; }
.ui-bar { flex: 1; height: 6px; border-radius: 3px; background: #E8EAED; }
.ui-bar-w { flex: 1.6; background: #CDD3DA; }
.ui-btn { flex: 0 0 34px; height: 12px; border-radius: 4px; background: #031E3F; animation: ui-btn 6s ease infinite; }
@keyframes ui-btn { 0%, 60%, 100% { opacity: 1; transform: none; } 66% { opacity: 0.6; transform: scale(0.94); } 72% { opacity: 1; transform: none; } }
.wf-step { flex: 1 1 0; min-width: 0; padding: 4px 3px; border-radius: 6px; border: 1px solid #E8EAED; background: #FFFFFF; font-size: 10px; font-weight: 600; line-height: 1.2; color: #6B7480; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: wf-step 6s ease infinite; animation-delay: calc(var(--s, 0) * 1.6s); }
.wf-arrow { flex: 0 0 8px; height: 2px; background: #CDD3DA; }
@keyframes wf-step { 0%, 4%, 44%, 100% { background: #FFFFFF; border-color: #E8EAED; color: #6B7480; } 10%, 36% { background: #031E3F; border-color: #031E3F; color: #FFFFFF; } }
.data-mini { flex-direction: column; align-items: stretch; gap: 0; }
.data-row { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; border-top: 1px dashed #E8EAED; font-family: "Geist Mono", ui-monospace, monospace; font-size: 10.5px; color: #6B7480; animation: data-row 6s ease infinite; animation-delay: calc(var(--s, 0) * 1.6s); }
.data-row b { font-weight: 500; color: #031E3F; white-space: nowrap; }
@keyframes data-row { 0%, 8% { opacity: 0.3; } 16%, 94% { opacity: 1; } 100% { opacity: 0.3; } }
@media (max-width: 900px) {
  .arch { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .arch-col { grid-template-rows: none; }
  .arch-links { display: none; }
  .arch-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 480px) { .arch-mods { grid-template-columns: minmax(0, 1fr); } }

/* ---- Logo-Leiste ---- */
.pf-logos { overflow: hidden; margin-top: 40px; padding: 18px 0; border-top: 1px solid #E8EAED; border-bottom: 1px solid #E8EAED; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.pf-logos-track { display: flex; align-items: center; gap: 56px; width: max-content; }
.pf-logos-track img { display: block; width: 56px; height: 56px; object-fit: contain; }

/* ---- Sicherheit ---- */
.sec-layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-items: stretch; margin-top: 40px; }
.sec-graphic { display: flex; padding: clamp(16px, 3vw, 28px); border-radius: 24px; background: linear-gradient(160deg, #134A7A 0%, #031E3F 100%); color: #FFFFFF; }
.sec-dc { display: flex; flex-direction: column; justify-content: center; gap: 16px; width: 100%; padding: 18px; border-radius: 18px; border: 1px dashed rgba(255, 255, 255, 0.35); }
.sec-dc-title { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }
.sec-tenants { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sec-tenant { padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); animation: sec-tenant 7.5s ease infinite; animation-delay: calc(var(--i, 0) * 2.5s); }
.sec-tenant-title { margin: 0 0 10px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.9); }
.sec-box { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 10px; border-radius: 10px; background: #FFFFFF; color: #031E3F; font-size: 12.5px; font-weight: 600; }
.sec-dc-foot { margin: 0; font-size: 12.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.75); }
@keyframes sec-tenant { 0%, 30%, 100% { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.08); } 8%, 22% { border-color: #FAA93C; background: rgba(250, 169, 60, 0.16); } }
.cert-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cert { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px; border-radius: 16px; border: 1px solid #E8EAED; background: #FFFFFF; }
.cert strong { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: #031E3F; }
.cert p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #5B6472; }
.cert-badge { display: inline-flex; align-items: center; gap: 6px; width: max-content; padding: 3px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; }
.cert-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.is-cert .cert-badge { background: #E7F4EE; color: #1F7A55; }
.is-pending .cert-badge { background: #FFF4E2; color: #B9700E; }
@media (max-width: 900px) { .sec-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .sec-tenants { grid-template-columns: minmax(0, 1fr); } .cert-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---- Roadmap ---- */
.roadmap { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; list-style: none; margin: 48px 0 0; padding: 0; }
.roadmap-line { position: absolute; left: 0; right: 0; top: 9px; height: 2px; background: #E8EAED; }
.roadmap-line::after { content: ""; position: absolute; inset: 0; background: #031E3F; transform-origin: left center; transform: scaleX(0); transition: transform 2.4s cubic-bezier(0.4, 0, 0.2, 1) 0.2s; }
.roadmap.is-visible .roadmap-line::after { transform: scaleX(1); }
.roadmap-step { position: relative; padding-top: 34px; }
.roadmap-dot { position: absolute; left: 0; top: 0; width: 20px; height: 20px; border-radius: 50%; border: 2px solid #CDD3DA; background: #FFFFFF; box-sizing: border-box; transition: border-color 0.4s ease, background 0.4s ease, transform 0.4s ease; transition-delay: calc(0.25s + var(--i, 0) * 0.5s); }
.roadmap.is-visible .roadmap-dot { border-color: #031E3F; background: #031E3F; box-shadow: 0 0 0 4px rgba(3, 30, 63, 0.12); }
.roadmap-num { display: block; font-family: "Geist Mono", ui-monospace, monospace; font-size: 12.5px; letter-spacing: 0.08em; color: #2E6B7F; }
.roadmap-step h3 { margin: 6px 0 8px; font-size: 17px; font-weight: 600; line-height: 1.3; color: #031E3F; }
.roadmap-step p { margin: 0; font-size: 14.5px; line-height: 1.6; color: #5B6472; }
.roadmap-result { margin-top: 12px !important; padding-top: 12px; border-top: 1px solid #E8EAED; font-size: 13.5px !important; }
.roadmap-result span { display: block; font-size: 11.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6B7480; }
@media (max-width: 960px) {
  .roadmap { grid-template-columns: minmax(0, 1fr); gap: 28px; padding-left: 34px; }
  .roadmap-line { left: 9px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .roadmap-line::after { transform-origin: top center; transform: scaleY(0); }
  .roadmap.is-visible .roadmap-line::after { transform: scaleY(1); }
  .roadmap-step { padding-top: 0; }
  .roadmap-dot { left: -34px; top: 2px; }
}

/* ---- CTA ---- */
.pf-cta { position: relative; overflow: hidden; padding: clamp(80px, 10vw, 140px) 0; text-align: center; border-top: 1px solid #E8EAED; }
.pf-cta::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(45% 70% at 35% 100%, rgba(46, 107, 127, 0.16), transparent 70%), radial-gradient(40% 60% at 68% 100%, rgba(250, 169, 60, 0.2), transparent 70%); }
.pf-cta .container { position: relative; }
.pf-cta h2 { margin: 0 auto; max-width: 13em; font-size: clamp(2.25rem, 1.3rem + 3.2vw, 4rem); font-weight: 600; line-height: 1.04; letter-spacing: -0.04em; color: #031E3F; text-wrap: balance; }
.pf-cta p { margin: 18px auto 0; max-width: 30em; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem); line-height: 1.55; color: #5B6472; }