@font-face{font-family:"Geist Variable";font-style:normal;font-display:swap;font-weight:100 900;src:url(../fonts/geist-variable.woff2) format("woff2-variations")}
@font-face{font-family:"Cal Sans";font-style:normal;font-display:swap;font-weight:400;src:url(../fonts/cal-sans.woff2) format("woff2")}

:root{
  color-scheme:light;
  --bg:#fafcff;--bg-elevated:#eef2f9;--fg:#0c121a;--fg-muted:#4c5666;
  --border:#00000014;--border-strong:#00000024;
  --accent:#296cd8;--accent-2:#1034b1;--accent-contrast:#fcfcfc;
  --grad-hero:radial-gradient(120% 80% at 50% 0%, #7caeff73 0%, #cbdfff40 40%, transparent 75%);
  --grad-text:linear-gradient(180deg, #0c1a32 0%, #1156c1 100%);
  --shadow-soft:0 1px 0 #ffffffb3 inset, 0 24px 60px -28px #0c1a3240;
  --radius:.75rem;--container:72rem;
  --font-sans:"Geist Variable",ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  --font-display:"Cal Sans","Geist Variable",ui-sans-serif,system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);color:var(--fg);font-family:var(--font-sans);font-feature-settings:"ss01","cv11";-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);font-size:1.0625rem;line-height:1.6}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,figure{margin:0}
ul{padding:0;list-style:none}
.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(1rem,4vw,2rem)}
.text-gradient{background:var(--grad-text);-webkit-background-clip:text;background-clip:text;color:transparent}

/* Kopfzeile */
.top{border-bottom:1px solid var(--border)}
.top .container{display:flex;align-items:center;justify-content:space-between;gap:1rem;height:3.5rem}
.logo{display:inline-flex;align-items:center;gap:.375rem;text-decoration:none;color:var(--fg)}
.logo-mark{height:1.25rem;width:auto;flex:none}
.logo span{font-size:1.25rem;font-weight:500;letter-spacing:-.025em;line-height:1}
.top-meta{font-size:.8125rem;color:var(--fg-muted)}

/* Einstieg */
.hero{position:relative;overflow:hidden;padding-block:clamp(4rem,10vw,7.5rem) clamp(3rem,7vw,5rem)}
.hero::before{content:"";position:absolute;inset:0;background:var(--grad-hero);pointer-events:none}
.hero .container{position:relative}
.eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
h1{font-family:var(--font-display);font-weight:400;font-size:clamp(2.75rem,7.2vw,5.25rem);line-height:1.02;letter-spacing:-.01em;margin-top:1.25rem;padding-bottom:.08em}
.lead{margin-top:1.75rem;max-width:44rem;font-size:clamp(1.125rem,1.6vw,1.3125rem);line-height:1.55;color:var(--fg-muted)}
.jump{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2.5rem}
.btn{display:inline-flex;align-items:center;gap:.5rem;height:2.75rem;padding-inline:1.25rem;border-radius:999px;border:1px solid var(--border-strong);background:var(--bg);font-size:.9375rem;font-weight:500;text-decoration:none;transition:border-color .15s,background .15s}
.btn:hover{border-color:var(--fg)}
.btn-primary{background:var(--fg);border-color:var(--fg);color:var(--accent-contrast)}
.btn-primary:hover{background:var(--accent-2);border-color:var(--accent-2)}
.btn .n{font-variant-numeric:tabular-nums;opacity:.6}

.toc{display:none}

/* Kundenstimme (Video) */
.videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;margin-top:3.5rem}
.video-card{display:block;padding:.5rem;border:1px solid var(--border-strong);border-radius:calc(var(--radius) + .5rem);background:color-mix(in srgb,var(--bg) 80%,transparent);box-shadow:var(--shadow-soft);text-decoration:none;transition:border-color .15s,transform .3s cubic-bezier(.2,.7,.2,1)}
.video-card:hover{border-color:var(--accent);transform:translateY(-2px)}
.video-thumb{position:relative;display:block;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;background:var(--bg-elevated)}
.video-thumb img{width:100%;height:100%;object-fit:cover}
.video-play{position:absolute;left:.625rem;bottom:.625rem;display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:50%;background:var(--accent-contrast);color:var(--accent-2);box-shadow:0 8px 24px -6px #0c1a3280;transition:transform .2s}
.video-play svg{margin-left:2px}
.video-card:hover .video-play{transform:scale(1.08)}
.video-dur{position:absolute;right:.5rem;bottom:.5rem;padding:.0625rem .375rem;border-radius:.375rem;background:#0c121acc;color:#fff;font-size:.75rem;font-variant-numeric:tabular-nums}
.video-text{display:grid;gap:.125rem;padding:.75rem .5rem .375rem;font-size:.8125rem;line-height:1.45;color:var(--fg-muted)}
.video-text .eyebrow{font-size:.6875rem;margin-bottom:.25rem}
.video-text b{font-size:.9375rem;font-weight:600;color:var(--fg)}

/* Abschnitte */
.section{padding-block:clamp(3.5rem,8vw,6rem);border-top:1px solid var(--border)}
.section-head{display:grid;gap:1rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
h2{font-family:var(--font-display);font-weight:400;font-size:clamp(2rem,4.4vw,3.25rem);line-height:1.08}
.section-head p{max-width:44rem;color:var(--fg-muted);font-size:1.125rem}

/* Software */
.product + .product{margin-top:clamp(4rem,8vw,6.5rem)}
.product-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1rem}
h3{font-family:var(--font-display);font-weight:400;font-size:clamp(1.625rem,3vw,2.25rem);line-height:1.15}
.chip{display:inline-flex;align-items:center;height:1.625rem;padding-inline:.625rem;border-radius:999px;border:1px solid var(--border-strong);font-size:.75rem;font-weight:500;color:var(--fg-muted);white-space:nowrap}
.chip-accent{border-color:color-mix(in srgb,var(--accent) 35%,transparent);color:var(--accent-2);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.tagline{margin-top:.625rem;font-size:1.1875rem;font-weight:500}
.product-text{margin-top:.875rem;max-width:46rem;color:var(--fg-muted)}
.points{display:grid;gap:1rem 2rem;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));margin-top:1.75rem}
.points li{padding-top:.875rem;border-top:1px solid var(--border-strong);font-size:.9375rem;line-height:1.5}
.points strong{display:block;font-weight:600;margin-bottom:.125rem}
.points span{color:var(--fg-muted)}
.link{display:inline-flex;align-items:center;gap:.375rem;margin-top:1.5rem;font-size:.9375rem;font-weight:500;color:var(--accent-2);text-decoration:none;border-bottom:1px solid color-mix(in srgb,var(--accent-2) 30%,transparent)}
.link:hover{border-bottom-color:var(--accent-2)}
.shots{display:grid;gap:1rem;grid-template-columns:1fr 1fr;margin-top:2.25rem}
.shot{min-width:0}
.shot:first-child{grid-column:1/-1}
.shot button{display:block;width:100%;padding:0;border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;background:var(--bg-elevated);box-shadow:var(--shadow-soft);cursor:zoom-in;font:inherit}
.shot button:focus-visible,.btn:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.shot img{width:100%}
.shot figcaption{margin-top:.625rem;font-size:.8125rem;color:var(--fg-muted)}

/* Webseiten: Bild und Text nebeneinander, Seiten wechseln je Zeile */
.grid{display:grid;gap:clamp(3rem,6vw,5rem)}
.card{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);grid-template-rows:1fr auto auto auto auto 1fr;column-gap:clamp(1.5rem,4vw,3.5rem);min-width:0}
.card > *{grid-column:2}
.card-img{grid-column:1;grid-row:1/-1;align-self:center;display:block;aspect-ratio:16/10;border:1px solid var(--border-strong);border-radius:var(--radius);overflow:hidden;background:var(--bg-elevated);box-shadow:var(--shadow-soft)}
.card:nth-child(even){grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
.card:nth-child(even) > *{grid-column:1}
.card:nth-child(even) .card-img{grid-column:2}
.card-img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
a.card-img:hover img{transform:scale(1.025)}
.meta{grid-row:2;font-size:.8125rem;color:var(--fg-muted)}
.card h3{grid-row:3;margin-top:.5rem;font-size:clamp(1.5rem,2.4vw,2rem)}
.card p:not(.meta){grid-row:4;margin-top:.75rem;color:var(--fg-muted);font-size:1rem;line-height:1.6}
.card-links{grid-row:5;display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1.5rem;margin-top:1.25rem}
.card-links .link{margin-top:0}

/* Abschluss */
.outro{background:var(--bg-elevated)}
.outro-note{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.125rem);line-height:1.15;margin-bottom:2.5rem;padding-bottom:2.5rem;border-bottom:1px solid var(--border-strong)}
.contact{display:grid;gap:1.5rem 3rem;grid-template-columns:repeat(auto-fit,minmax(14rem,1fr));margin-top:2.5rem}
.contact dt{font-size:.75rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-muted)}
.contact dd{margin:.375rem 0 0;font-size:1.125rem;font-weight:500}
.contact a{text-decoration:none;border-bottom:1px solid var(--border-strong)}
.contact a:hover{border-bottom-color:var(--fg)}
.foot{padding-block:1.75rem;font-size:.8125rem;color:var(--fg-muted);border-top:1px solid var(--border)}
.foot .container{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem 2rem}

/* Vergrößerung */
.lightbox{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:clamp(.75rem,3vw,2.5rem);background:#0c121ae6;cursor:zoom-out}
.lightbox.open{display:grid}
.lightbox img,.lightbox video{max-width:100%;max-height:100%;width:auto;border-radius:.5rem;box-shadow:0 30px 80px -20px #000}
.lightbox video{width:min(100%,72rem);background:#000;cursor:auto}
.lightbox [hidden]{display:none}

@media screen and (max-width:900px){
  .videos{gap:.75rem;margin-top:2.5rem}
  .video-card{display:grid;grid-template-columns:9.5rem minmax(0,1fr);align-items:center;gap:.5rem}
  .video-text{padding:.25rem .5rem}
  .video-play{width:2rem;height:2rem;left:.375rem;bottom:.375rem}
  .video-play svg{width:12px;height:12px}
  .video-dur{display:none}
}
@media screen and (max-width:760px){
  .card,.card:nth-child(even){grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .card > *,.card:nth-child(even) > *,.card .card-img,.card:nth-child(even) .card-img{grid-column:1;grid-row:auto}
  .meta{margin-top:1.125rem}
  .shots{grid-template-columns:1fr}
  .videos{grid-template-columns:minmax(0,1fr)}
  .top-meta{display:none}
}

/* Druck und PDF (A4 hoch) */
@page{size:A4;margin:14mm 15mm 15mm}
@media print{
  html,body{background:#fff;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  body{font-size:9.5pt;line-height:1.5}
  .container{max-width:none;padding-inline:0}
  .jump,.lightbox{display:none!important}
  .top{border:0}
  .top .container{height:auto;padding-bottom:4mm;border-bottom:1px solid var(--border-strong)}
  .top-meta{font-size:8pt}
  .hero{padding-block:42mm 0;overflow:visible}
  .hero::before{display:none}
  h1{font-size:44pt;margin-top:4mm}
  .text-gradient{background:none;color:#0f2f6b}
  .lead{font-size:12.5pt;margin-top:8mm;max-width:150mm}
  .videos{display:block;margin-top:0}
  .video-card{display:grid;grid-template-columns:48mm minmax(0,1fr);align-items:center;gap:4mm;width:120mm;margin-top:12mm;padding:2mm;box-shadow:none;break-inside:avoid}
  .video-card.video-local{display:none}
  .video-card::after{content:"Video ansehen: " attr(href);grid-column:2;padding-left:.5rem;font-size:8pt;color:var(--accent-2)}
  .video-text{padding:0 .5rem;font-size:8pt}
  .video-text b{font-size:10pt}
  .video-play{width:9mm;height:9mm}
  .video-dur{font-size:7pt}
  .video-card:not(.video-local) ~ .toc{margin-top:20mm}
  .toc{display:grid;grid-template-columns:5fr 7fr;gap:12mm;margin-top:38mm;padding-top:8mm;border-top:1px solid var(--border-strong)}
  .toc ul{margin-top:4mm}
  .toc li{padding-block:1.6mm;border-bottom:1px solid var(--border);font-size:10.5pt;font-weight:500}
  .toc li span{display:block;font-size:8.5pt;font-weight:400;color:var(--fg-muted)}
  .toc-cols{columns:2;column-gap:8mm}
  .toc-cols li{break-inside:avoid}
  .toc.single{grid-template-columns:1fr}
  .toc.single .toc-cols{columns:3}
  .web-first .toc{grid-template-columns:7fr 5fr}
  .software-last .outro{margin-top:5mm;padding:4mm 6mm}
  .software-last .outro-note,.software-last .outro > .container > .eyebrow{display:none}
  .software-last .contact{margin-top:0!important}
  .section{padding-block:0;border:0}
  .section-head{gap:2.5mm;margin-bottom:8mm}
  #software,#webseiten{break-before:page}
  h2{font-size:22pt}
  .section-head p{font-size:10.5pt;max-width:150mm}
  .product{break-inside:avoid}
  .product + .product{margin-top:0;break-before:page}
  h3{font-size:17pt}
  .tagline{font-size:11pt}
  .product-text{max-width:150mm}
  .points{grid-template-columns:repeat(3,1fr);gap:4mm 6mm;margin-top:6mm}
  .points li{font-size:8.5pt;padding-top:2.5mm}
  .shots{margin-top:7mm;gap:4mm}
  .shot{break-inside:avoid}
  .shot button,.card-img{box-shadow:none}
  .shot figcaption{font-size:8pt;margin-top:1.5mm}
  .link{font-size:9pt;margin-top:4mm}
  .chip{font-size:7.5pt;height:auto;padding-block:.6mm}
  .grid{gap:7mm}
  .card{break-inside:avoid;column-gap:8mm;grid-template-columns:98mm minmax(0,1fr)}
  .card:nth-child(even){grid-template-columns:minmax(0,1fr) 98mm}
  .card:nth-child(3n+4){break-before:page}
  .meta{font-size:8pt}
  .card h3{font-size:14pt;margin-top:1mm}
  .card p:not(.meta){font-size:9pt;line-height:1.5;margin-top:1.5mm}
  .card-links{margin-top:3mm;gap:1mm 5mm}
  .outro{break-inside:avoid;margin-top:7mm;padding:5mm 8mm;border-radius:var(--radius)}
  .outro-note{font-size:13pt;margin-bottom:3.5mm;padding-bottom:3.5mm}
  .contact{grid-template-columns:repeat(4,auto);gap:4mm 8mm}
  .contact dt{font-size:7pt}
  .contact dd{font-size:10pt}
  .foot{border:0;padding-block:4mm 0;font-size:7.5pt;break-before:avoid}
}