/* ===== LT AI-Solutions — shared design system ===== */
:root{
  --bg: oklch(0.17 0.025 255);
  --bg-2: oklch(0.21 0.03 255);
  --ink: oklch(0.96 0.012 255);
  --muted: oklch(0.66 0.03 255);
  --accent: oklch(0.76 0.155 62);
  --line: oklch(0.30 0.03 255);
  --maxw: 1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:
    radial-gradient(135% 55% at 50% 0%, oklch(0.225 0.05 262 / .5), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, oklch(0.152 0.024 258) 100%);
  color:var(--ink); font-family:"Inter",system-ui,sans-serif;
  font-size:18px; line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden; overflow-wrap:break-word}
body::after{content:""; position:fixed; inset:0; pointer-events:none; z-index:3; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:170px 170px}
h1,h2,h3,.display{font-family:"Space Grotesk",sans-serif; line-height:1.06; letter-spacing:-0.02em; font-weight:600}
img,video{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px}
.eyebrow{font-family:"Space Grotesk"; font-size:13px; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); font-weight:500}
.muted{color:var(--muted)} .accent{color:var(--accent)}

/* nav */
.nav{position:fixed; top:0; left:0; right:0; z-index:50; display:flex; justify-content:space-between; align-items:center;
  padding:16px 28px; pointer-events:none; transition:background .4s, backdrop-filter .4s, padding .4s}
.nav.scrolled{background:oklch(0.15 0.025 255 / .72); backdrop-filter:blur(10px); padding:10px 28px}
.nav .brand{pointer-events:auto; display:flex; align-items:center}
.nav .brand img{height:40px; width:auto; display:block; transition:height .4s}
.nav.scrolled .brand img{height:32px}
.nav .navlinks{display:flex; gap:26px; align-items:center; pointer-events:auto}
.nav .navlinks a{font-family:"Space Grotesk"; font-size:14.5px; font-weight:500; color:var(--ink); opacity:.85; transition:opacity .25s, color .25s}
.nav .navlinks a:hover{opacity:1; color:var(--accent)}
.nav .navcta{font-family:"Space Grotesk"; font-size:14px; font-weight:500; letter-spacing:.02em;
  border:1px solid oklch(0.85 0.02 255 / .5); color:var(--ink); padding:9px 16px; border-radius:100px; background:oklch(0.15 0.03 255 / .3)}
.nav .navcta:hover{border-color:var(--accent); color:var(--accent)}
.nav .navlinks a.navlang{opacity:1; font-size:13px; font-weight:600; letter-spacing:.06em; color:var(--muted);
  border:1px solid oklch(0.85 0.02 255 / .35); border-radius:8px; padding:6px 10px}
.nav .navlinks a.navlang:hover{border-color:var(--accent); color:var(--accent)}
.navtoggle{display:none; pointer-events:auto; flex-direction:column; gap:5px; width:42px; height:42px;
  align-items:center; justify-content:center; background:oklch(0.15 0.03 255 / .5);
  border:1px solid oklch(0.85 0.02 255 / .3); border-radius:11px; cursor:pointer}
.navtoggle span{width:18px; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .3s}
.nav.nav-open .navtoggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.nav-open .navtoggle span:nth-child(2){opacity:0}
.nav.nav-open .navtoggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:760px){
  .navtoggle{display:flex}
  .nav .navlinks{position:fixed; top:64px; left:14px; right:14px; flex-direction:column; align-items:stretch; gap:4px;
    background:oklch(0.15 0.028 255 / .97); backdrop-filter:blur(14px); border:1px solid var(--line);
    border-radius:16px; padding:8px; box-shadow:0 24px 50px oklch(0.05 0.02 255 / .55);
    transition:opacity .25s, transform .25s}
  .nav:not(.nav-open) .navlinks{opacity:0; transform:translateY(-10px); pointer-events:none}
  .nav .navlinks a{display:block; padding:13px 16px; font-size:16px; opacity:1; border-radius:10px; border:none; background:none}
  .nav .navlinks a:hover{background:oklch(0.22 0.03 255 / .6); color:var(--ink)}
  .nav .navlinks .navcta{background:var(--accent); color:oklch(0.20 0.04 60); text-align:center; margin-top:4px}
}

/* buttons */
.btn{display:inline-flex; align-items:center; gap:10px; font-family:"Space Grotesk"; font-weight:600; font-size:15px;
  padding:15px 26px; border-radius:100px; transition:transform .35s cubic-bezier(.2,.7,.2,1), background .3s, color .3s, border-color .3s; cursor:pointer}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:var(--accent); color:oklch(0.20 0.04 60)}
.btn-primary:hover{background:oklch(0.82 0.15 62)}
.btn-ghost{border:1px solid var(--line); color:var(--ink)}
.btn-ghost:hover{border-color:var(--ink)}
.btn .ar{transition:transform .35s}
.btn:hover .ar{transform:translateX(4px)}

/* subpage hero */
.subhero{position:relative; padding:24vh 0 12vh; overflow:hidden}
.subhero::before{content:""; position:absolute; inset:0; z-index:0;
  background:radial-gradient(80% 70% at 75% 10%, oklch(0.27 0.07 255 / .7), transparent 60%),
             radial-gradient(60% 60% at 5% 90%, oklch(0.24 0.05 60 / .25), transparent 60%)}
.subhero .wrap{position:relative; z-index:1}
.subhero h1{font-size:clamp(38px,6vw,76px); max-width:16ch; margin-top:18px}
.subhero .lede{margin-top:24px; max-width:54ch; font-size:clamp(17px,1.5vw,21px); color:var(--muted)}
.subhero .cta-row{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap}
.crumbs{font-size:13px; letter-spacing:.04em; color:var(--muted)}
.crumbs a:hover{color:var(--accent)}

/* subhero with background video */
.subhero.has-video{padding:30vh 0 14vh; min-height:78vh; display:flex; align-items:flex-end}
.subhero.has-video::before{display:none}
.subhero video{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transform:scale(1.04)}
.subhero.has-video .wrap{position:relative; z-index:2}
.subhero .vgrade{position:absolute; inset:0; z-index:1;
  background:
    radial-gradient(120% 95% at 15% 95%, oklch(0.13 0.03 255 / .94), transparent 60%),
    linear-gradient(to top, oklch(0.12 0.025 255 / .96) 0%, oklch(0.14 0.025 255 / .45) 42%, oklch(0.12 0.02 255 / .35) 100%)}

/* video hero (voice subpage) */
.voicehero{position:relative; min-height:88vh; display:flex; align-items:flex-end; overflow:hidden; padding:30vh 0 12vh}
.voicehero .vh-media{position:absolute; inset:0; z-index:0; overflow:hidden; background:oklch(0.10 0.02 255)}
.voicehero .vh-media video,
.voicehero .vh-media img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.voicehero .vh-grade{position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(100deg, oklch(0.10 0.03 255 / .92) 0%, oklch(0.11 0.03 255 / .6) 40%, oklch(0.11 0.02 255 / .12) 72%, transparent 100%),
    linear-gradient(to top, oklch(0.10 0.025 255 / .94) 0%, oklch(0.12 0.025 255 / .35) 50%, transparent 82%)}
.voicehero .wrap{position:relative; z-index:2; width:100%}
.voicehero h1{font-size:clamp(38px,6.2vw,82px); max-width:15ch; margin-top:16px;
  text-shadow:0 2px 34px oklch(0.08 0.02 255 / .55)}
.voicehero .lede{margin-top:24px; max-width:50ch; font-size:clamp(17px,1.5vw,21px); color:var(--ink)}
.voicehero .cta-row{margin-top:34px; display:flex; gap:14px; flex-wrap:wrap}
@media(max-width:680px){.voicehero{min-height:76vh; padding:26vh 0 10vh}}
@media(prefers-reduced-motion:reduce){
  .voicehero .vh-media video{display:none}
}

/* split video hero (text left, video panel right) */
.vhero{position:relative; padding:19vh 0 9vh}
.vhero .grid{display:grid; grid-template-columns:1.05fr 0.95fr; gap:56px; align-items:center}
.vhero h1{font-size:clamp(34px,4.6vw,64px); max-width:15ch; margin-top:16px}
.vhero .lede{margin-top:22px; max-width:46ch; font-size:clamp(16px,1.4vw,20px); color:var(--muted)}
.vhero .cta-row{margin-top:30px; display:flex; gap:14px; flex-wrap:wrap}
.vhero .panel{position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/11;
  border:1px solid var(--line); background:var(--bg-2); box-shadow:0 30px 70px oklch(0.06 0.02 255 / .5)}
.vhero .panel video{width:100%; height:100%; object-fit:cover; display:block}
.vhero .panel::after{content:""; position:absolute; inset:0; border-radius:16px;
  box-shadow:inset 0 0 0 1px oklch(0.55 0.07 255 / .3); pointer-events:none}
@media (max-width:880px){
  .vhero{padding:16vh 0 6vh}
  .vhero .grid{grid-template-columns:1fr; gap:30px}
  .vhero .panel{aspect-ratio:16/11}
}

/* generic section */
.section{padding:9vh 0; border-top:1px solid transparent;
  border-image:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent) 1}
.section-head{max-width:26ch; margin-bottom:40px}
.section-head h2{font-size:clamp(26px,3.4vw,44px); margin-top:14px}
.lead{color:var(--muted); max-width:56ch; font-size:18px; margin-top:16px}

/* case / step list */
.cases{list-style:none}
.case{display:grid; grid-template-columns:72px 1fr; gap:30px; padding:44px 0; border-top:1px solid var(--line)}
.cases .case:last-child{border-bottom:1px solid var(--line)}
.case .ci{font-family:"Space Grotesk"; font-weight:600; font-size:22px; color:var(--accent)}
.case h3{font-size:clamp(22px,2.4vw,30px)}
.case .sub{color:var(--muted); font-size:14px; font-family:"Space Grotesk"; letter-spacing:.04em; text-transform:uppercase; margin-bottom:14px}
.case .pair{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:18px}
.case .pair .k{font-family:"Space Grotesk"; font-weight:600; font-size:14px; color:var(--ink); margin-bottom:6px; display:flex; align-items:center; gap:9px}
.case .pair .k::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--accent); display:inline-block}
.case .pair p{color:var(--muted); font-size:16px}
.case .result{margin-top:20px; font-size:17px}
.case .result b{color:var(--accent)}
@media (max-width:760px){.case{grid-template-columns:1fr; gap:14px} .case .pair{grid-template-columns:1fr; gap:18px}}

/* use-case overview cards */
.uc-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px}
.uc-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; overflow:hidden;
  background:var(--bg-2); transition:transform .35s, border-color .35s, box-shadow .35s}
.uc-card:hover{transform:translateY(-4px); border-color:oklch(0.46 0.07 255); box-shadow:0 26px 55px oklch(0.06 0.02 255 / .5)}
.uc-card-img{aspect-ratio:3/2; overflow:hidden; background:oklch(0.12 0.02 255)}
.uc-card-img img{width:100%; height:100%; object-fit:cover; transition:transform .5s}
.uc-card:hover .uc-card-img img{transform:scale(1.04)}
.uc-card-body{padding:22px 26px 26px; display:flex; flex-direction:column; gap:10px; flex:1}
.uc-card-meta{font-family:"Space Grotesk"; font-size:12.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.uc-card-title{font-size:clamp(20px,2vw,24px); line-height:1.22}
.uc-card-teaser{font-size:15.5px; line-height:1.5; color:var(--muted)}
.uc-card-link{font-family:"Space Grotesk"; font-size:14px; font-weight:500; color:var(--accent); margin-top:auto; padding-top:4px}
.uc-card:hover .uc-card-link{color:oklch(0.82 0.15 62)}
@media (max-width:760px){.uc-grid{grid-template-columns:1fr; gap:20px}}

/* use-case article (single page) */
.uc-wrap{max-width:820px; padding-top:18vh; padding-bottom:2vh}
.uc-meta{font-family:"Space Grotesk"; font-size:14px; margin:-6px 0 26px}
.uc-hero-img{border-radius:16px; overflow:hidden; border:1px solid var(--line); aspect-ratio:3/2; margin-bottom:36px}
.uc-hero-img img{width:100%; height:100%; object-fit:cover}
.uc-prose{max-width:none; padding:0}
.uc-article .ctaband{margin-top:6vh}

/* feature list (benefits) */
.flist{list-style:none; columns:2; column-gap:60px}
.flist li{break-inside:avoid; padding:18px 0; border-top:1px solid var(--line)}
.flist li:first-child,.flist li:nth-child(4){border-top:none}
.flist .fn{display:block; font-family:"Space Grotesk"; font-weight:600; font-size:18px}
.flist .fn::before{content:""; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--accent); margin-right:11px; vertical-align:middle; transform:translateY(-2px)}
.flist .fd{display:block; color:var(--muted); font-size:15px; margin-top:5px; padding-left:17px}
@media (max-width:760px){.flist{columns:1} .flist li:nth-child(4){border-top:1px solid var(--line)}}

/* steps (numbered) */
.steps{list-style:none}
.step{display:grid; grid-template-columns:90px 1fr; gap:28px; align-items:baseline; padding:34px 0; border-top:1px solid var(--line)}
.steps .step:last-child{border-bottom:1px solid var(--line)}
.step .sn{font-family:"Space Grotesk"; font-weight:600; font-size:clamp(28px,3vw,40px); color:var(--accent)}
.step h3{font-size:clamp(20px,2.2vw,27px)}
.step p{color:var(--muted); margin-top:10px; max-width:48ch; font-size:17px}
@media (max-width:760px){.step{grid-template-columns:56px 1fr; gap:16px}}

/* option cards (passende Basis) */
.optgrid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:8px}
.optcard{background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:26px 24px}
.optcard .opttag{display:inline-block; font-family:"Space Grotesk"; font-size:12px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
  border:1px solid oklch(0.76 0.155 62 / .3); border-radius:100px; padding:4px 12px}
.optcard h3{font-size:21px; margin-top:16px}
.optcard p{color:var(--muted); font-size:15.5px; line-height:1.55; margin-top:10px}
@media (max-width:860px){.optgrid{grid-template-columns:1fr; gap:16px}}

/* CTA band */
.ctaband{padding:14vh 0; text-align:center; border-top:1px solid var(--line)}
.ctaband h2{font-size:clamp(28px,4.4vw,58px); max-width:18ch; margin:0 auto}
.ctaband p{color:var(--muted); max-width:46ch; margin:22px auto 0}
.ctaband .btn{margin-top:36px}

/* prose (legal) */
.prose{max-width:760px; padding:24vh 0 12vh}
.prose .eyebrow{margin-bottom:14px}
.prose h1{font-size:clamp(34px,5vw,56px); margin-bottom:30px}
.prose h2{font-size:clamp(20px,2.4vw,28px); margin:46px 0 14px}
.prose h3{font-size:18px; margin:26px 0 8px}
.prose h4{font-family:"Space Grotesk"; font-size:16px; font-weight:600; margin:20px 0 8px; color:var(--accent)}
.prose h5{font-family:"Inter"; font-size:15px; font-weight:600; margin:16px 0 6px; color:var(--ink)}
.prose p,.prose li{color:oklch(0.78 0.02 255); font-size:16.5px; margin-bottom:12px}
.prose ul{padding-left:22px; margin-bottom:14px}
.prose a{color:var(--accent)}
.prose .note{border:1px solid var(--line); background:var(--bg-2); border-radius:12px; padding:18px 20px; font-size:14.5px; color:var(--muted); margin:22px 0}
/* Bilder & eingebettete Grafiken im Artikel */
.prose img{display:block; max-width:100%; height:auto; border-radius:12px; border:1px solid var(--line); margin:30px auto}
.prose figure{margin:30px 0}
.prose figure img{margin:0}
.prose figcaption{color:var(--muted); font-size:14px; text-align:center; margin-top:10px}
.prose iframe{max-width:100%; border:1px solid var(--line); border-radius:12px; margin:30px 0}
.prose pre{background:oklch(0.13 0.02 255); border:1px solid var(--line); border-radius:12px; padding:18px 20px; overflow-x:auto; margin:24px 0; font-size:14px}
.prose code{font-family:"Space Grotesk",ui-monospace,monospace; font-size:.92em}
.prose :not(pre) > code{background:oklch(0.22 0.03 255); padding:2px 6px; border-radius:6px}

/* footer */
footer{position:relative; padding:0 0 50px; overflow:hidden; margin-top:8vh;
  border-top:1px solid transparent;
  border-image:linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent) 1}
.footlogo{padding:7vh 0 2vh; text-align:center}
.footlogo img{height:clamp(90px,15vw,160px); width:auto; display:inline-block; opacity:.92}
.footgrid{display:flex; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top:24px; color:var(--muted); font-size:14px; align-items:center; position:relative; z-index:10000}
.footgrid a:hover{color:var(--accent)}
.footnav{display:flex; gap:22px; flex-wrap:wrap}
.footright{display:flex; align-items:center; gap:18px; flex-wrap:wrap}
.footsocial{display:flex; gap:12px}
.footsocial a{display:inline-flex; color:var(--muted); transition:color .25s}
.footsocial a:hover{color:var(--accent)}
.footsocial svg{width:20px; height:20px; fill:currentColor; display:block}
.footdot{display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent); margin-right:9px;
  box-shadow:0 0 12px var(--accent); animation:pulse 2.6s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* reveal — hidden only when JS is active, so no-JS stays fully visible */
html.js .reveal{opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.2,.7,.2,1), transform .8s cubic-bezier(.2,.7,.2,1)}
html.js .reveal.in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){html.js .reveal{opacity:1; transform:none; transition:none}}