/*
 * Patrick Krisch Website
 * Datei: assets/css/ki-systeme-page.css
 * Bereich: KI-Systeme Hub
 * Stand: 2026-09-10
 */

.ki-page main{background:linear-gradient(180deg,var(--surface) 0,var(--surface) 24px,#fbfdff 190px,var(--page-bg) 440px,var(--page-bg) 100%)}
.ki-hero{padding:var(--subpage-hero-padding-top) 0 var(--subpage-hero-padding-bottom)}
.ki-breadcrumb{display:flex;align-items:center;gap:10px;margin-bottom:var(--subpage-breadcrumb-gap);font-size:12px;color:#52657f}.ki-breadcrumb a{color:var(--navy)}.ki-breadcrumb a:hover{text-decoration:underline}
.ki-hero-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(390px,1.05fr);gap:54px;min-height:var(--subpage-hero-min-height);align-items:start}
.ki-hero-copy{max-width:640px}.ki-kicker{display:block;margin:0 0 14px;color:#007b91;font-size:12px;font-weight:850;letter-spacing:.08em}.ki-hero-copy h1{margin:0;color:var(--subpage-title-color);font-size:var(--subpage-title-size);line-height:.98;letter-spacing:-.045em}.ki-hero-copy h1 span{color:#008f93}.ki-accent{display:block;width:46px;height:2px;margin:22px 0;background:#089bb0}.ki-lead{max-width:610px;margin:0;color:#253b5d;font-size:var(--hero-copy-size);line-height:1.7}.ki-hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ki-trust{display:flex;flex-wrap:nowrap;align-items:center;gap:0;margin-top:24px}.ki-trust>span{display:inline-flex;align-items:center;gap:7px;padding:0 12px;color:#455b78;font-size:11.5px;font-weight:650;white-space:nowrap}.ki-trust>span:first-child{padding-left:0}.ki-trust>span+span{border-left:1px solid var(--line)}.ki-trust .ui-icon{flex:0 0 auto;width:16px;height:16px;color:#078a9d}

.ki-hero-visual{position:relative;min-height:340px;align-self:center}.ki-system-panel{position:absolute;inset:14px 18px 18px 42px;padding:22px;border:1px solid var(--card-border);border-radius:var(--radius);background:linear-gradient(145deg,#ffffff,#f5faff);box-shadow:var(--shadow);overflow:hidden}.ki-system-panel:before{content:"";position:absolute;inset:-90px -70px auto auto;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(0,164,170,.16),rgba(14,100,216,0) 70%)}.ki-system-top{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:22px}.ki-system-top strong{color:var(--navy);font-size:13px}.ki-system-status{display:inline-flex;align-items:center;gap:6px;color:#087d8f;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase}.ki-system-status:before{content:"";width:7px;height:7px;border-radius:50%;background:#08a89b;box-shadow:0 0 0 4px rgba(8,168,155,.10)}
.ki-flow{position:relative;display:grid;gap:10px}.ki-flow-row{display:grid;grid-template-columns:42px minmax(0,1fr) auto;gap:12px;align-items:center;min-height:58px;padding:9px 11px;border:1px solid #dfebf5;border-radius:11px;background:rgba(255,255,255,.92)}.ki-flow-icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:linear-gradient(145deg,#eef7fb,#eaf1fb);color:#0b6fd7}.ki-flow-icon .ui-icon{width:20px;height:20px}.ki-flow-copy{display:flex;min-width:0;flex-direction:column}.ki-flow-copy strong{color:var(--navy);font-size:12.5px}.ki-flow-copy span{margin-top:2px;color:#6b7d93;font-size:10.5px}.ki-flow-step{color:#8aa0b7;font-size:10px;font-weight:800}.ki-flow-line{position:absolute;left:31px;top:55px;bottom:55px;width:1px;background:linear-gradient(#8bd7d3,#9dbfe6);z-index:0}.ki-flow-row{position:relative;z-index:1}.ki-system-note{position:absolute;right:0;bottom:2px;display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid #d6e6f5;border-radius:10px;background:var(--surface);box-shadow:0 10px 28px rgba(7,31,77,.12);color:#315a78;font-size:11px;font-weight:750}.ki-system-note .ui-icon{width:17px;height:17px;color:#078d9e}

.ki-intro{padding:18px 0 6px}.ki-section-heading{max-width:760px;margin-bottom:24px}.ki-section-heading .ki-kicker{margin-bottom:10px}.ki-section-heading h2{margin:0;color:var(--navy);font-size:clamp(30px,4vw,42px);line-height:1.08;letter-spacing:-.035em}.ki-section-heading h2 span{color:#008f93}.ki-section-heading p{margin:14px 0 0;color:#405775;font-size:16px;line-height:1.7}
.ki-capability-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.ki-capability-card{position:relative;display:grid;grid-template-columns:62px minmax(0,1fr) 22px;gap:16px;align-items:start;padding:22px;border:1px solid var(--card-border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--card-shadow);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.ki-capability-card:hover{transform:translateY(-2px);border-color:#bed5e7;box-shadow:0 17px 34px rgba(26,66,111,.09)}.ki-capability-card>a{position:absolute;inset:0;border-radius:inherit;z-index:2}.ki-capability-card>a:focus-visible{outline:2px solid #079699;outline-offset:3px}.ki-capability-icon{width:58px;height:58px;display:grid;place-items:center;border:1px solid #d7e6f3;border-radius:12px;background:linear-gradient(145deg,#f7fcff,#edf5fb);color:#0b6fd7}.ki-capability-icon .ui-icon{width:28px;height:28px}.ki-capability-copy{min-width:0}.ki-capability-copy small{display:block;margin-bottom:5px;color:#078c98;font-size:10px;font-weight:850;letter-spacing:.06em;text-transform:uppercase}.ki-capability-copy h3{margin:0;color:var(--navy);font-size:19px;line-height:1.25}.ki-capability-copy p{margin:8px 0 0;color:#52657f;font-size:13px;line-height:1.6}.ki-capability-arrow{width:18px;height:18px;margin-top:3px;color:#7b92aa;transition:transform .18s ease}.ki-capability-card:hover .ki-capability-arrow,.ki-capability-card:focus-within .ki-capability-arrow{transform:translateX(4px);color:#078d98}

.ki-use-cases{padding:54px 0 0}.ki-example-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}.ki-example-card{padding:26px;border:1px solid var(--card-border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--card-shadow)}.ki-example-card--dark{position:relative;overflow:hidden;background:linear-gradient(135deg,#071f4d,#075d8f 66%,#078f94);color:#fff;border:0}.ki-example-card--dark:after{content:"";position:absolute;right:-70px;bottom:-100px;width:260px;height:260px;border:1px solid rgba(255,255,255,.18);border-radius:50%;box-shadow:0 0 0 38px rgba(255,255,255,.04),0 0 0 76px rgba(255,255,255,.03)}.ki-example-label{display:inline-flex;align-items:center;gap:8px;color:#078c98;font-size:11px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}.ki-example-card--dark .ki-example-label{color:#91ece5}.ki-example-label .ui-icon{width:17px;height:17px}.ki-example-card h3{margin:12px 0 8px;color:var(--navy);font-size:24px;line-height:1.2}.ki-example-card--dark h3{color:#fff}.ki-example-card p{margin:0;color:#52657f;font-size:14px;line-height:1.7}.ki-example-card--dark p{position:relative;z-index:1;color:#e3eef7}.ki-example-list{display:grid;gap:11px;margin:20px 0 0;padding:0;list-style:none}.ki-example-list li{display:grid;grid-template-columns:22px minmax(0,1fr);gap:8px;align-items:start;color:#385370;font-size:13px}.ki-example-list .ui-icon{width:17px;height:17px;margin-top:2px;color:#078d9e}.ki-example-card--dark .ki-example-list li{position:relative;z-index:1;color:#eaf4fb}.ki-example-card--dark .ki-example-list .ui-icon{color:#7fe0da}

.ki-process{padding:54px 0 0}.ki-process-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;counter-reset:ki-step}.ki-process-card{position:relative;min-height:190px;padding:22px;border:1px solid var(--card-border);border-radius:var(--radius);background:var(--surface);box-shadow:var(--card-shadow);counter-increment:ki-step}.ki-process-card:before{content:"0" counter(ki-step);display:block;margin-bottom:22px;color:#0b6fd7;font-size:12px;font-weight:900;letter-spacing:.08em}.ki-process-card h3{margin:0;color:var(--navy);font-size:17px}.ki-process-card p{margin:8px 0 0;color:#5b6e86;font-size:13px;line-height:1.6}

.ki-privacy{padding:54px 0 0}.ki-privacy-card{display:grid;grid-template-columns:74px minmax(0,1fr) auto;gap:24px;align-items:center;padding:26px 28px;border:1px solid #cfe3eb;border-radius:var(--radius);background:linear-gradient(90deg,#f8fdff,#eef9f8);box-shadow:var(--card-shadow)}.ki-privacy-icon{width:68px;height:68px;display:grid;place-items:center;border-radius:50%;background:var(--primary-gradient);color:#fff}.ki-privacy-icon .ui-icon{width:31px;height:31px}.ki-privacy-card h2{margin:0;color:var(--navy);font-size:24px}.ki-privacy-card p{max-width:720px;margin:7px 0 0;color:#4e637e;font-size:14px;line-height:1.65}.ki-privacy-card .btn{white-space:nowrap}

.ki-cta{padding:54px 0 0}.ki-cta-card{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center;padding:34px;border-radius:var(--radius);background:linear-gradient(120deg,#061d43,#075f91 65%,#07928f);color:#fff;box-shadow:0 18px 42px rgba(7,31,77,.18)}.ki-cta-card:after{content:"";position:absolute;right:-85px;top:-130px;width:330px;height:330px;border-radius:50%;border:1px solid rgba(255,255,255,.16);box-shadow:0 0 0 45px rgba(255,255,255,.035),0 0 0 90px rgba(255,255,255,.025)}.ki-cta-copy{position:relative;z-index:1}.ki-cta-card .ki-kicker{margin-bottom:8px;color:#8eebe4}.ki-cta-card h2{margin:0;color:#fff;font-size:30px;line-height:1.15}.ki-cta-card p{max-width:720px;margin:10px 0 0;color:#e5eff7;font-size:14px;line-height:1.65}.ki-cta-card .btn{position:relative;z-index:1;background:#fff;color:#073668;box-shadow:0 10px 28px rgba(0,0,0,.12)}

@media(max-width:1040px){.ki-hero-grid{grid-template-columns:1fr .9fr;gap:30px;min-height:var(--subpage-hero-tablet-min-height)}.ki-trust>span{gap:5px;padding:0 8px;font-size:10.5px}.ki-trust .ui-icon{width:15px;height:15px}.ki-process-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ki-privacy-card{grid-template-columns:64px minmax(0,1fr)}.ki-privacy-card>.btn{grid-column:1/-1;width:100%}}
@media(max-width:820px){.ki-hero-grid{grid-template-columns:1fr;min-height:0}.ki-hero-visual{min-height:330px}.ki-capability-grid,.ki-example-grid{grid-template-columns:1fr}.ki-cta-card{grid-template-columns:1fr}.ki-cta-card .btn{width:100%}}
@media(max-width:720px){.ki-hero{padding:24px 0 28px}.ki-breadcrumb{margin-bottom:18px}.ki-hero-copy h1{font-size:44px}.ki-hero-actions{display:grid}.ki-hero-actions .btn{width:100%}.ki-trust{display:grid;gap:10px}.ki-trust>span,.ki-trust>span:first-child{padding:0;border:0;font-size:11.5px}.ki-intro{padding-top:4px}.ki-use-cases,.ki-process,.ki-privacy,.ki-cta{padding-top:38px}}
@media(max-width:620px){.ki-hero-visual{min-height:300px}.ki-system-panel{inset:10px 0 18px 14px;padding:16px}.ki-system-note{right:0}.ki-flow-row{grid-template-columns:38px minmax(0,1fr);gap:9px}.ki-flow-step{display:none}.ki-flow-icon{width:36px;height:36px}.ki-capability-card{grid-template-columns:52px minmax(0,1fr) 18px;padding:16px;gap:12px}.ki-capability-icon{width:50px;height:50px}.ki-capability-copy h3{font-size:17px}.ki-process-grid{grid-template-columns:1fr}.ki-process-card{min-height:0}.ki-privacy-card{grid-template-columns:1fr;padding:22px}.ki-privacy-icon{width:58px;height:58px}.ki-cta-card{padding:26px 22px}.ki-cta-card h2{font-size:26px}}