/* =========================================
   Argon Analytik – Styles (extern)
   ========================================= */
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-Thin.otf") format("opentype");
  font-weight:100;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-Thin-Italic.otf") format("opentype");
  font-weight:100;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-Light.otf") format("opentype");
  font-weight:300;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-Light-Italic.otf") format("opentype");
  font-weight:300;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-Regular.otf") format("opentype");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-Italic.otf") format("opentype");
  font-weight:400;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-Medium.otf") format("opentype");
  font-weight:500;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-Medium-Italic.otf") format("opentype");
  font-weight:500;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-SemiBold.otf") format("opentype");
  font-weight:600;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-SemiBold-Italic.otf") format("opentype");
  font-weight:600;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-Bold.otf") format("opentype");
  font-weight:700;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-Bold-Italic.otf") format("opentype");
  font-weight:700;
  font-style:italic;
  font-display:swap;
}
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-Black.otf") format("opentype");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}
@font-face{
  font-family:"Indivisible";
  src:url("/assets/fonts/indivisible/Indivisible-Black-Italic.otf") format("opentype");
  font-weight:900;
  font-style:italic;
  font-display:swap;
}
:root{
  --bg: #020617;
  --bg-2:rgba(3, 7, 18, .62);
  --card:rgba(3, 7, 18, .62);
  --text:#e7ecf3;
  --muted:#a9b4c3;
  --line:#253144;

  /* CMY Kernfarben */
  --cyan:#10d2ff;
  --mag:#ff2d9b;
  --ylw:#ffdf00;   /* leuchtendes Gelb */

  /* Kontaktfarben */
  --imsg:#0a84ff;     /* iMessage Blau (iOS) */
  --wa:#25D366;       /* WhatsApp Grün */
  --mail:#ff8a00;     /* Mail/Orange */

  --radius:14px;
  --shadow:0 10px 30px rgba(0,0,0,.25);
  --card-radius:16px;
  --card-padding:24px;
  --control-height:42px;
  --control-radius:12px;
  --grid-gap:24px;
  --focus-ring:0 0 0 3px color-mix(in oklab, var(--cyan), transparent 85%);
  --gutter:20px;
  --maxw:1160px;
  --maxw-text:var(--maxw);
  --maxw-narrow:var(--maxw);
  --section-pad:clamp(48px,6.5vw,88px);
  --section-pad-tight:clamp(28px,3.8vw,46px);
  --stack-gap:18px;
  --stack-gap-lg:26px;
  --kicker-gap:6px;
  --page-bg-image:
    radial-gradient(circle at 12% 0%, rgba(16,210,255,.24), transparent 55%),
    radial-gradient(circle at 88% 8%, rgba(255,45,155,.20), transparent 55%),
    radial-gradient(circle at 50% 96%, rgba(255,223,0,.14), transparent 60%);
  --hero-bg-image:
    radial-gradient(1200px 500px at 15% -100px, rgba(16,210,255,.15), transparent 60%),
    radial-gradient(1000px 400px at 85% -120px, rgba(255,45,155,.12), transparent 60%),
    radial-gradient(900px 300px at 50% -80px, rgba(255,223,0,.12), transparent 55%);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth; scrollbar-gutter:stable}
body{
  margin:0;
  min-height:100vh;
  background-color:var(--bg);
  background-image:var(--page-bg-image);
  background-size:auto,auto,auto;
  background-attachment:fixed,fixed,fixed;
  color:var(--text);
  font:16px/1.55 "Indivisible",-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif;
  overflow-x:hidden;
  position:relative;
}
body.page-404{
  display:flex;
  flex-direction:column;
}
body.page-404 > main{
  flex:1;
}
body.nav-open{overflow:hidden}
img{max-width:100%; height:auto; display:block}
a{color:inherit; text-decoration:none}
html.no-js .nav-toggle{display:none}
.brand{display:inline-flex; align-items:center; gap:12px; font-weight:700; letter-spacing:.01em; color:var(--text)}
.brand__logo{display:block; height:40px; width:auto}
.skip-link{
  position:absolute;
  left:-9999px;
  top:auto;
  width:1px;
  height:1px;
  overflow:hidden;
}
.skip-link:focus{
  position:fixed;
  left:16px;
  top:16px;
  width:auto;
  height:auto;
  padding:.6rem .8rem;
  border-radius:10px;
  background:color-mix(in oklab, var(--bg-2), transparent 10%);
  border:1px solid color-mix(in oklab, var(--line), var(--text) 30%);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--line), transparent 80%);
  z-index:9999;
}
.container{max-width:var(--maxw); margin-inline:auto; padding:0 var(--gutter)}
.container.container--text{max-width:var(--maxw-text)}
.container.container--narrow{max-width:var(--maxw-narrow)}
section{padding:var(--section-pad) 0}
h1{font-size:clamp(2rem,4vw,3rem); line-height:1.15; margin:0 0 var(--stack-gap)}
.hero-title-break--mobile{display:none}
.hero-title-break--desktop{display:inline}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem); margin:0 0 var(--stack-gap)}
h3{font-size:1.15rem; margin:.2rem 0 .6rem}
p{margin:0 0 var(--stack-gap)}
:where(section) .container > :last-child{margin-bottom:0}
:where(p, .lead, .note, ul, ol, blockquote) + :where(.cta-row, .btn){
  margin-top:var(--stack-gap);
}
:where(h2, h3) + :where(.cta-row, .btn){
  margin-top:var(--stack-gap);
}
:where(section, .legal-section, .blog-detail)[id]{
  scroll-margin-top:96px;
}
.lead{color:var(--muted); max-width:60ch}
.kicker{letter-spacing:.12em; text-transform:uppercase; font-size:.85rem; color:var(--muted); margin:0 0 var(--kicker-gap)}
.cards{display:grid; gap:var(--grid-gap)}
@media(min-width:900px){ .cards{grid-template-columns:repeat(3,1fr)} }

@media(max-width:768px){
  .hero-title-break--mobile{display:inline}
  .hero-title-break--desktop{display:none}
}

/* Header / Nav */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:
    linear-gradient(180deg,
      rgb(11 15 20 / .82),
      rgb(11 15 20 / .64),
      rgb(11 15 20 / 0));
  border-bottom:1px solid color-mix(in oklab, var(--line), var(--text) 20%);
  box-shadow:0 18px 40px rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  transition:transform .32s ease, background .3s ease,
    border-color .3s ease, box-shadow .3s ease,
    backdrop-filter .3s ease;
  will-change:transform;
}
.site-header.nav--elevated{
  background:
    linear-gradient(180deg,
      rgb(11 15 20 / .90),
      rgb(11 15 20 / .78),
      rgb(11 15 20 / .40));
  border-color:color-mix(in oklab, var(--line), var(--text) 35%);
  box-shadow:0 18px 40px rgba(0,0,0,.55);
  backdrop-filter:blur(18px) saturate(180%);
}
.site-header.nav--hidden{
  transform:translateY(-100%);
  box-shadow:none;
}
.nav{display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:76px}
.nav-drawer{display:flex; align-items:center;}
.nav-toggle{display:none; align-items:center; gap:0; padding:0; border:1px solid var(--line);
  border-radius:12px; background:transparent; color:var(--text); cursor:pointer; font-weight:600;
  transition:background .2s ease, border-color .2s ease; width:44px; height:44px; justify-content:center; line-height:0}
.nav-toggle:hover,
.nav-toggle:focus-visible{background:var(--bg-2); border-color:color-mix(in oklab, var(--line), var(--text) 25%)}
.nav-toggle__icon{position:relative; width:20px; height:2px; border-radius:2px; background:currentColor;
  transition:background .2s ease}
.nav-toggle__icon::before,
.nav-toggle__icon::after{content:""; position:absolute; left:0; width:20px; height:2px; border-radius:2px;
  background:currentColor; transition:transform .2s ease, opacity .2s ease}
.nav-toggle__icon::before{top:-6px}
.nav-toggle__icon::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before{transform:translateY(6px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after{transform:translateY(-6px) rotate(-45deg)}
.links{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.nav-dropdown{position:relative}
.nav-dropdown__toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:.6rem .7rem;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:inherit;
  font:inherit;
  cursor:pointer;
  opacity:.95;
  transition:background .2s ease, border-color .2s ease,
    box-shadow .2s ease, color .2s ease, opacity .2s ease;
}
.nav-dropdown__toggle:hover,
.nav-dropdown__toggle:focus-visible{
  background:color-mix(in oklab, var(--bg-2), transparent 20%);
  border-color:color-mix(in oklab, var(--line), var(--text) 28%);
  outline:none;
  box-shadow:0 0 0 2px color-mix(in oklab, var(--line), transparent 85%);
  opacity:1;
}
.nav-dropdown__caret{
  width:8px;
  height:8px;
  border-radius:2px;
  border:2px solid currentColor;
  border-top:0;
  border-left:0;
  transform:rotate(45deg);
  margin-top:-2px;
}
.nav-dropdown__menu{
  position:absolute;
  top:calc(100% + 6px);
  left:0;
  min-width:200px;
  padding:6px;
  border-radius:12px;
  background:color-mix(in oklab, var(--bg), var(--bg-2) 65%);
  border:1px solid var(--line);
  box-shadow:0 18px 34px rgba(0,0,0,.45);
  display:none;
  flex-direction:column;
  gap:2px;
  z-index:50;
}
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown.is-open .nav-dropdown__menu{
  display:flex;
}

.links a{
  padding:.6rem .7rem;
  border-radius:10px;
  opacity:.95;
  border:1px solid transparent;
  transition:background .2s ease, border-color .2s ease,
    box-shadow .2s ease, color .2s ease, opacity .2s ease;
}
.links a:hover,
.links a:focus-visible{
  background:color-mix(in oklab, var(--bg-2), transparent 20%);
  border-color:color-mix(in oklab, var(--line), var(--text) 28%);
  outline:none;
  box-shadow:0 0 0 2px color-mix(in oklab, var(--line), transparent 85%);
  opacity:1;
}
/* Active nav item (current section/page) */
.links a.is-active{
  background:color-mix(in oklab, var(--bg-2), transparent 10%);
  border-color:color-mix(in oklab, var(--line), var(--text) 40%);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--line), transparent 80%);
  opacity:1;
}
.nav-dropdown__toggle.is-active{
  background:color-mix(in oklab, var(--bg-2), transparent 10%);
  border-color:color-mix(in oklab, var(--line), var(--text) 40%);
  box-shadow:0 0 0 2px color-mix(in oklab, var(--line), transparent 80%);
  opacity:1;
}

/* Subtle CTA styling for the 'Contact' link */
.nav-cta{
  font-weight:600;
  border:1px solid color-mix(in oklab, var(--line), var(--cyan) 45%);
  background:color-mix(in oklab, var(--cyan), transparent 92%);
  color:var(--text);
}
.nav-cta:hover,
.nav-cta:focus-visible{
  background:color-mix(in oklab, var(--cyan), transparent 88%);
  border-color:color-mix(in oklab, var(--line), var(--cyan) 55%);
}

@media (max-width:768px){
  .nav{position:relative}
  .nav-toggle{display:inline-flex}
  .nav-drawer{position:absolute; top:100%; left:calc(-1 * var(--gutter)); right:calc(-1 * var(--gutter)); padding:18px var(--gutter) 22px;
    border:1px solid color-mix(in oklab, var(--line), var(--text) 14%);
    background-color:rgb(11 15 20 / .96);
    background-image:
      linear-gradient(180deg,
        rgb(11 15 20 / .90),
        rgb(11 15 20 / .78),
        rgb(11 15 20 / .60));
    box-shadow:0 24px 52px rgba(0,0,0,.68);
    -webkit-backdrop-filter:blur(18px) saturate(170%);
    backdrop-filter:blur(18px) saturate(170%);
    display:none; flex-direction:column; z-index:40; border-radius:16px}
  .nav-drawer.is-open{display:block}
	  .nav-drawer .links{flex-direction:column; align-items:stretch; flex-wrap:nowrap; gap:6px}
	  .nav-drawer .links a{display:block; padding:.9rem 1rem; border-radius:12px}
	  .nav-drawer .nav-dropdown{width:100%}
	  .nav-drawer .nav-dropdown__toggle{
	    justify-content:space-between;
	    width:100%;
	    padding:.9rem 1rem;
	    border-radius:12px;
	  }
	  .nav-drawer .nav-dropdown__menu{
	    position:static;
	    margin-top:4px;
	    border-radius:14px;
    background:
      linear-gradient(180deg,
        rgb(11 15 20 / .88),
        rgb(11 15 20 / .74));
    border:1px solid color-mix(in oklab, var(--line), var(--text) 14%);
    box-shadow:0 18px 40px rgba(0,0,0,.55);
    -webkit-backdrop-filter:blur(16px) saturate(160%);
    backdrop-filter:blur(16px) saturate(160%);
    padding:8px;
  }
  .nav-drawer .nav-cta{
    font-weight:inherit;
    border:1px solid transparent;
    background:transparent;
    color:inherit;
  }
  .nav-drawer .nav-cta:hover,
  .nav-drawer .nav-cta:focus-visible{
    background:color-mix(in oklab, var(--bg-2), transparent 20%);
    border-color:color-mix(in oklab, var(--line), var(--text) 28%);
  }
}

@media (max-width:768px){
  html.no-js .nav-drawer{position:static; display:flex; padding:0; background:transparent; box-shadow:none; border-bottom:none}
  html.no-js .nav-drawer .links{flex-direction:column; align-items:flex-start; gap:8px}
}

/* Buttons – Outline weiss/Markenfarben */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem; min-height:var(--control-height); padding:.7rem 1rem;
  border-radius:var(--control-radius); font:inherit; font-weight:600; border:1.5px solid currentColor; background:transparent; color:var(--text);
  cursor:pointer; text-align:center;
  transition:background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .15s ease}
.btn:hover{background:color-mix(in oklab, currentColor, transparent 92%); transform:translateY(-1px)}
.btn:active{transform:none}
.btn:focus-visible{
  outline:none;
  box-shadow:var(--focus-ring);
}
.btn--white{background:#ffffff; color:#0b1220; border-color:#ffffff}
.btn--white:hover{background:#ffffff; filter:brightness(0.95)}
.btn--cyan{color:var(--cyan)}
.btn--mag{color:var(--mag)}
.btn--ylw{color:var(--ylw)}
.btn--imsg{color:var(--imsg)}
.btn--wa{color:var(--wa)}
.btn--mail{color:var(--mail)}
.btn--medium{padding:.75rem 1.2rem}

/* Icon helper */
.icon{
  display:inline-block;
  width:18px; height:18px;
  background:currentColor;
  mask:var(--icon) no-repeat center/contain;
  -webkit-mask:var(--icon) no-repeat center/contain;
  flex-shrink:0;
}
.btn .icon{margin-right:8px; width:24px; height:24px}
.btn .icon:last-child{margin-right:0}
.btn--white-outline .icon,
.btn--white-outline .icon-img{width:24px; height:24px}
.btn .icon-img{width:20px; height:20px}
.btn:disabled,
.btn[aria-disabled="true"]{opacity:.45; pointer-events:none; cursor:not-allowed; transform:none}

/* Icon-only buttons */
.btn--icon{
  width:var(--control-height);
  height:var(--control-height);
  padding:0;
  justify-content:center;
  gap:0;
  line-height:0;
}
.btn--icon :is(.icon, .icon-img){
  margin:0;
  width:20px;
  height:20px;
}

/* Typomat – Aktionen & Status */
.typomat-layout{
  display:flex;
  flex-direction:column;
  gap:16px;
}
.typomat-field{
  display:flex;
  flex-direction:column;
}
.typomat-field textarea{resize:none}
.typomat-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
  align-items:flex-start;
}
.typomat-actions-main{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:0;
}
.typomat-actions .btn{white-space:nowrap}

@media (max-width:768px){
  .typomat-layout{
    gap:20px;
  }
  .typomat-field{
    order:1;
  }
  .typomat-actions{
    order:2;
    justify-content:flex-start;
    align-items:center;
    width:100%;
    gap:10px;
  }
  .typomat-actions-main{
    width:auto;
    gap:10px;
  }
  .typomat-actions .btn{
    width:auto;
  }
  .typomat-actions .btn--icon{
    width:var(--control-height);
  }
  .typomat-copy-btn{
    margin-left:0;
  }
}

.typomat-toast{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translate3d(-50%, 20px, 0);
  padding:.5rem .9rem;
  border-radius:999px;
  background:color-mix(in oklab, var(--bg-2), var(--cyan) 10%);
  border:1px solid color-mix(in oklab, var(--line), var(--cyan) 40%);
  color:var(--text);
  font-size:.85rem;
  box-shadow:0 14px 30px rgba(0,0,0,.45);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease, transform .2s ease;
  z-index:80;
}
.typomat-toast.is-visible{
  opacity:1;
  transform:translate3d(-50%, 0, 0);
}

/* Globale Farbschimmer (wie im ersten Entwurf) */
.glows{
  position:fixed; inset:-20vh -10vw auto -10vw; height:60vh; pointer-events:none; z-index:0;
  background:
    radial-gradient(35vw 35vh at 15% 10%, color-mix(in oklab, var(--cyan), transparent 88%), transparent 60%),
    radial-gradient(32vw 32vh at 85% 12%, color-mix(in oklab, var(--mag),  transparent 90%), transparent 60%),
    radial-gradient(30vw 30vh at 50% -5%, color-mix(in oklab, var(--ylw),  transparent 90%), transparent 55%);
  opacity:.85;
}
section, footer{ position:relative; z-index:1 }

/* FAQ */
.faq-section{
  --faq-accent:var(--cyan);
}
.faq-layout{
  display:grid;
  grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr);
  gap:clamp(28px, 6vw, 84px);
  align-items:start;
}
.faq-intro{
  max-width:440px;
}
.faq-intro .lead{
  margin-top:1rem;
}
.faq-list{
  border-top:1px solid color-mix(in oklab, var(--line), var(--text) 12%);
}
.faq-item{
  border-bottom:1px solid color-mix(in oklab, var(--line), var(--text) 12%);
}
.faq-item summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  min-height:72px;
  padding:20px 0;
  font-weight:600;
  font-size:clamp(1rem, .96rem + .18vw, 1.12rem);
  line-height:1.35;
  cursor:pointer;
  list-style:none;
  color:var(--text);
  transition:color .18s ease;
}
.faq-item summary:hover{
  color:var(--faq-accent);
}
.faq-item summary::-webkit-details-marker{
  display:none;
}
.faq-item summary::after{
  content:"";
  flex-shrink:0;
  width:9px;
  height:9px;
  border:1.5px solid color-mix(in oklab, var(--muted), transparent 15%);
  border-left:0;
  border-top:0;
  transform:rotate(45deg);
  transition:transform .18s ease;
  margin-top:-4px;
}
.faq-item[open] summary{
  padding-bottom:10px;
}
.faq-item[open] summary::after{
  transform:rotate(-135deg);
  margin-top:4px;
}
.faq-item p{
  max-width:68ch;
  margin:0;
  padding:0 0 22px;
  color:var(--muted);
  font-size:.98rem;
  line-height:1.7;
}
.faq-item a{
  color:var(--faq-accent);
  text-decoration-thickness:1px;
  text-underline-offset:4px;
}
@media(max-width:760px){
  .faq-layout{
    grid-template-columns:1fr;
    gap:22px;
  }
  .faq-intro{
    max-width:none;
  }
  .faq-item summary{
    min-height:64px;
    padding:18px 0;
  }
  .faq-item p{
    font-size:.95rem;
    padding-bottom:20px;
  }
}

/* Space-Layer für Three.js */
.space-layer{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
}

/* Futuristischer Space-Layer mit Polygon-Scherben */
body::before,
body::after{
  content:"";
  position:fixed;
  inset:-15vh -20vw auto;
  pointer-events:none;
  z-index:0;
  mix-blend-mode:screen;
  opacity:.75;
  transform:translate3d(0,0,0);
  filter:drop-shadow(0 28px 60px rgba(0,0,0,.7));
}
body::before{
  background:
    linear-gradient(135deg, rgba(16,210,255,.65), rgba(16,210,255,.05)),
    linear-gradient(150deg, rgba(255,45,155,.38), rgba(255,45,155,.02));
  background-repeat:no-repeat;
  background-size:40vw 40vw, 26vw 26vw;
  background-position:-6vw 8vh, 70vw 22vh;
  clip-path:polygon(10% 0%, 100% 6%, 86% 100%, 0% 94%);
  animation:space-orbit-a 26s ease-in-out infinite alternate;
}
body::after{
  background:
    linear-gradient(165deg, rgba(255,223,0,.55), rgba(255,223,0,.04));
  background-repeat:no-repeat;
  background-size:46vw 46vw;
  background-position:60vw 70vh;
  clip-path:polygon(4% 14%, 78% 0%, 100% 65%, 18% 100%);
  opacity:.6;
  animation:space-orbit-b 32s ease-in-out infinite alternate;
}

@keyframes space-orbit-a{
  0%{transform:translate3d(-10px,4px,0) rotateZ(-2deg)}
  50%{transform:translate3d(8px,-6px,0) rotateZ(-4deg)}
  100%{transform:translate3d(-6px,-10px,0) rotateZ(-6deg)}
}
@keyframes space-orbit-b{
  0%{transform:translate3d(4px,-6px,0) rotateZ(1deg)}
  50%{transform:translate3d(-4px,4px,0) rotateZ(0deg)}
  100%{transform:translate3d(6px,10px,0) rotateZ(-1deg)}
}

@media(max-width:900px){
  body{
    background-image:none;
    background-attachment:scroll;
  }
  html::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background-color:var(--bg);
    background-image:var(--page-bg-image);
    background-size:auto,auto,auto;
    background-repeat:no-repeat;
  }
  body::before,
  body::after{
    inset:-10vh -30vw auto;
    filter:drop-shadow(0 18px 40px rgba(0,0,0,.7));
  }
  body::before{
    background-size:70vw 70vw, 52vw 52vw;
    background-position:-16vw 10vh, 35vw 28vh;
  }
  body::after{
    background-size:70vw 70vw;
    background-position:32vw 72vh;
  }
}

/* iOS Safari: `background-attachment: fixed` ist unzuverlässig (v.a. iPad) */
@supports (-webkit-touch-callout: none) and (-webkit-overflow-scrolling: touch){
  body{
    background-image:none;
    background-attachment:scroll;
  }
  html::before{
    content:"";
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:-1;
    background-color:var(--bg);
    background-image:var(--page-bg-image);
    background-size:auto,auto,auto;
    background-repeat:no-repeat;
  }
}

/* Hero */
.hero{background:var(--hero-bg-image)}
.hero-grid{
  display:grid;
  gap:28px;
  align-items:start;
  position:relative;
  perspective:1400px;
  transform-origin:50% 40%;
  transform:rotateX(var(--hero-tilt-x, 0deg)) rotateY(var(--hero-tilt-y, 0deg));
  transition:transform .65s cubic-bezier(.19,1,.22,1);
}
.hero-grid :is(.hero-copy, .ai-hero__copy){
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--stack-gap);
}
.hero-grid :is(.hero-copy, .ai-hero__copy) > :where(h1, h2, h3, p, blockquote, .cta-row, .kicker){
  margin:0;
}
@media(min-width:980px){
  .hero-grid{
    grid-template-columns:minmax(0,1fr);
    gap:44px 36px;
  }
  .hero-features{grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
}
.features{display:grid; gap:var(--grid-gap); align-items:stretch}
.hero-features{gap:28px}
.feature{
  padding:var(--card-padding);
  border-radius:var(--card-radius);
  border:1px solid var(--line);
  background:var(--card);
  display:flex;
  flex-direction:column;
  gap:18px;
  align-items:flex-start;
  min-height:200px;
  height:100%;
}
.feature > div{display:flex; flex-direction:column; gap:10px; width:100%}
.feature > div > :where(h3, p){margin:0}
.feature p.mt-1{margin-top:0}
@media(max-width:979px){
  .feature{min-height:auto}
}
/* Responsive video embed */
.video-embed{position:relative; width:100%; padding-bottom:56.25%; height:0; border:1px solid var(--line); border-radius:var(--card-radius); background:var(--card); overflow:hidden}
.video-embed iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.video-wrapper{position:relative; width:100%; aspect-ratio:16/9; border:1px solid var(--line); border-radius:var(--card-radius); overflow:hidden; background:var(--card)}
.video-wrapper video{position:absolute; inset:0; width:100%; height:100%; display:block; background:#000}
/* CMY Gradient accents */
.accent--cyan,
.accent--mag,
.accent--ylw{
  background:linear-gradient(160deg,
      color-mix(in oklab, var(--accent-color), transparent 86%),
      color-mix(in oklab, var(--accent-color), transparent 96%)), var(--card);
  border-color:color-mix(in oklab, var(--accent-color), var(--line) 55%);
}
.accent--cyan{--accent-color:var(--cyan)}
.accent--mag{--accent-color:var(--mag)}
.accent--ylw{--accent-color:var(--ylw)}

/* Leistungen */
.services-grid{display:grid; gap:22px}
.service-column{display:grid; gap:22px; grid-auto-rows:1fr}
@media(min-width:900px){ .services-grid{grid-template-columns:repeat(3, minmax(0,1fr))} }
.service-card{padding:var(--card-padding); border-radius:var(--card-radius); border:1px solid var(--line); background:var(--card);
  display:flex; gap:18px; align-items:flex-start; height:100%; min-height:248px}
.service-card div{display:flex; flex-direction:column; gap:12px}
.service-card h3{margin:0}
.service-card p{margin:0}
@media(max-width:899px){
  .service-column{grid-auto-rows:auto}
  .service-card{min-height:auto}
}

/* Brandings */
.brandings{
  border-top:1px solid color-mix(in oklab, var(--line), var(--text) 10%);
  border-bottom:1px solid color-mix(in oklab, var(--line), var(--text) 10%);
  background:
    linear-gradient(180deg,
      rgb(11 15 20 / .82),
      rgb(11 15 20 / .64),
      rgb(11 15 20 / .28));
  padding:clamp(18px,3vw,26px) 0;
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}
.brandings-marquee{overflow:hidden; position:relative}
.brandings-track{
  --brandings-duration: 44s;
  --brandings-gap: 40px;
  display:flex;
  align-items:center;
  width:max-content;
  gap:var(--brandings-gap);
  flex-wrap:nowrap;
  transform:translate3d(0,0,0);
  animation:brandings-scroll var(--brandings-duration) linear infinite both;
  animation-delay:calc(var(--brandings-duration) / -2);
  animation-play-state:paused;
  will-change:transform;
}
.brandings-track:not(.is-ready){transform:translate3d(calc(-25% - (var(--brandings-gap) / 4)),0,0)}
.brandings-track.is-ready{animation-play-state:running}
.brandings-sequence{display:flex; align-items:center; gap:var(--brandings-gap); flex:0 0 auto}
.brand-link{--brandmark-height:64px; display:flex; align-items:center; justify-content:center; padding:10px 16px;
  transition:transform .25s ease; flex:0 0 auto}
.brand-link:hover, .brand-link:focus-visible{transform:translateY(-2px)}
.brand-link:focus-visible{outline:2px solid color-mix(in oklab, var(--line), var(--text) 30%); outline-offset:6px}

@keyframes brandings-scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-50% - (var(--brandings-gap) / 2)),0,0)}
}

/* Preise */
.pricing{display:grid; gap:22px; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); align-items:stretch}
.plan{border:1px solid var(--line); background:var(--card); border-radius:var(--card-radius); padding:var(--card-padding);
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:12px; min-height:100%}
.price{font-weight:800; font-size:2rem; color:#ffffff}
.per{color:var(--muted); font-size:.95rem}
.plan-claim{margin:.6rem 0 .25rem; font-size:1.3rem; font-weight:800}
.plan-desc{margin:0 0 1rem; color:var(--muted); white-space:normal}
.plan--run{--accent-color:var(--cyan)}
.plan--run h3{color:var(--cyan)}
.plan--change{--accent-color:var(--mag)}
.plan--change h3{color:var(--mag)}
.plan--plan{--accent-color:var(--ylw)}
.plan--plan h3{color:var(--ylw)}

/* Rechner */
.calc{
  border:1px solid color-mix(in oklab, var(--line), var(--text) 10%);
  background:
    linear-gradient(180deg,
      rgb(11 15 20 / .82),
      rgb(11 15 20 / .64),
      rgb(11 15 20 / .28));
  border-radius:16px;
  padding:24px;
  margin-top:22px;
  overflow:hidden;
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}
.calc>h3{font-size:clamp(1.7rem, 3.4vw, 2.2rem); line-height:1.25; margin:0 0 1rem}
.calc-grid{display:grid; gap:24px}
.calc-form{display:grid; gap:22px}
.calc-intro{grid-column:1/-1; margin:.35rem 0 .9rem; color:var(--muted); font-size:.95rem}
.calc-section{
  padding:20px;
  border-radius:14px;
  border:1px solid color-mix(in oklab, var(--line), var(--text) 10%);
  background:
    linear-gradient(180deg,
      rgb(11 15 20 / .82),
      rgb(11 15 20 / .64),
      rgb(11 15 20 / .28));
  display:grid;
  gap:16px;
  grid-template-columns:1fr;
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
}
.calc-section h4{margin:0; font-size:1.15rem; letter-spacing:.01em; grid-column:1/-1}
.calc-section .field:has(#byod){grid-column:1/-1}
/* Allow grid children to shrink on mobile to avoid overflow */
.calc-grid > *, .calc-form, .calc-section, .summary{min-width:0}

/* Rechner – klickbare Module (AI/UX) */
.calc-module{
  cursor:default;
  transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.calc-module.is-disabled{cursor:pointer}
.calc-module h4{cursor:pointer}
.calc-module h4 label{cursor:pointer}
.calc-module h4 input[type="checkbox"]{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  clip-path:inset(50%);
  border:0;
  white-space:nowrap;
}
.calc-module.is-enabled{
  border-color:color-mix(in oklab, var(--calc-accent, var(--cyan)), var(--line) 55%);
  box-shadow:
    0 0 0 3px color-mix(in oklab, var(--calc-accent, var(--cyan)), transparent 86%),
    0 18px 50px rgba(0,0,0,.5);
  transform:translateY(-1px);
}
.calc-module.is-enabled h4{color:var(--calc-accent, var(--cyan))}
.calc-module.is-disabled > :not(h4){opacity:.55}
.calc-module.is-disabled :is(.field, .calc-intro, .calc-subgroup){pointer-events:none}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-weight:600}
.field :is(input[type=number], input[type=text], input[type=email], input[type=date], input[type=search], input[type=tel], input[type=url], select){
  width:100%; max-width:100%;
  font:inherit;
  font-size:16px; line-height:1.2; min-height:var(--control-height);
  padding:.7rem .85rem; border-radius:var(--control-radius);
  border:1px solid var(--line); background:var(--card); color:var(--text);
  box-shadow:none; appearance:none;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field :is(input[type=number], input[type=text], input[type=email], input[type=date], input[type=search], input[type=tel], input[type=url], select):focus{
  outline:none; border-color:color-mix(in oklab, var(--line), var(--cyan) 35%);
  box-shadow:var(--focus-ring);
}
.field textarea{
  width:100%;
  font:inherit;
  font-size:16px;
  line-height:1.45;
  padding:.8rem .85rem;
  border-radius:var(--control-radius);
  border:1px solid var(--line);
  background:var(--card);
  color:var(--text);
  box-shadow:none;
  resize:vertical;
  min-height:180px;
  transition:border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.field textarea:focus{
  outline:none;
  border-color:color-mix(in oklab, var(--line), var(--cyan) 35%);
  box-shadow:var(--focus-ring);
}
.field-note{margin:0; font-size:.92rem; color:var(--muted)}
.summary{
  border:1px solid color-mix(in oklab, var(--line), var(--text) 10%);
  background:
    linear-gradient(180deg,
      rgb(11 15 20 / .82),
      rgb(11 15 20 / .64),
      rgb(11 15 20 / .28));
  border-radius:16px;
  padding:24px;
  display:flex;
  flex-direction:column;
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}
.summary > *{margin:0}
.summary > * + *{margin-top:var(--stack-gap)}
.summary .sumline + .note{margin-top:0}
.summary .note{margin-bottom:0}
.summary .btn{align-self:flex-start;}
.sumline{display:flex; justify-content:space-between; gap:12px}
.sumline span strong{white-space:normal}
.sumline strong:last-child{white-space:nowrap}
.note{color:var(--muted); font-size:.92rem}
/* Summary boxes: desktop aligns value right; mobile stacks label, note, value */
.sumbox{display:grid; grid-template-columns:1fr auto; grid-template-areas:
  "label value"
  "note  note"; gap:8px 12px}
.sumbox__label{grid-area:label}
.sumbox__note{grid-area:note}
.sumbox__value{grid-area:value; justify-self:end; white-space:nowrap}
/* Add separators between result boxes for better visual grouping */
.summary .sumbox + .sumbox{border-top:1px solid var(--line); padding-top:12px}
@media(min-width:960px){
  .calc{overflow:visible}
  .calc-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr); align-items:start}
  .summary{position:sticky; top:96px}
}
@media(min-width:900px){
  .field input[type=number], .field select{max-width:240px}
  .calc-section{grid-template-columns:repeat(2, minmax(0,1fr)); align-items:start}
}
@media(max-width:899px){
  .calc-section{grid-template-columns:1fr}
}
@media(max-width:640px){
  .calc-section{padding:18px}
  .summary{padding:20px}
}
@media(max-width:640px){
  .sumbox{grid-template-columns:1fr; grid-template-areas:
    "label"
    "note"
    "value"}
  .sumbox__value{justify-self:start; margin-top:12px; font-size:1.2rem; line-height:1.3}
}
/* Extra small screens: ensure inline elements wrap */
@media(max-width:480px){
  .sumline{flex-wrap:wrap}
  .sumline strong:last-child{margin-left:auto}
}

/* Referenzen/Stimmen (mit Farblogik an der Kontur) */
.showcases{display:grid; gap:var(--grid-gap)}
@media(min-width:900px){ .showcases{grid-template-columns:repeat(3,1fr)} }
.case{border:1px solid var(--line); background:var(--card); border-radius:var(--card-radius); overflow:hidden; display:flex; flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease}
.case:hover,
.case:focus-within{transform:translateY(-4px); box-shadow:0 18px 38px rgba(0,0,0,.4)}
.case__link{display:flex; flex-direction:column; height:100%; color:inherit}
.case__link:focus-visible{outline:2px solid color-mix(in oklab, var(--cyan), transparent 45%); outline-offset:6px}
.case .pad{padding:var(--card-padding)}
.case-media{aspect-ratio:16/9; width:100%; object-fit:cover; display:block}
blockquote{margin:10px 0 0; font-style:italic; color:var(--muted)}
.case-author{margin-top:12px; font-weight:600}

/* 3D-Schwebe-Effekt für Karten und Cases */
.feature,
.service-card,
.plan,
.case,
.blog-post{
  position:relative;
  background:
    linear-gradient(180deg,
      rgb(11 15 20 / .82),
      rgb(11 15 20 / .64),
      rgb(11 15 20 / .28));
  border:1px solid color-mix(in oklab, var(--line), var(--text) 10%);
  box-shadow:0 20px 60px rgba(0,0,0,.55);
  transform:translate3d(0,0,0);
  transform-style:preserve-3d;
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
  transition:
    transform .55s cubic-bezier(.19,1,.22,1),
    box-shadow .55s ease,
    border-color .45s ease,
    background .45s ease;
}

.feature::after,
.service-card::after,
.plan::after,
.case::after,
.blog-post::after{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  background:
    linear-gradient(145deg,
      color-mix(in oklab, var(--accent-color, #ffffff), transparent 70%),
      transparent 82%);
  opacity:0;
  pointer-events:none;
  mix-blend-mode:screen;
  transition:opacity .45s ease;
}

.feature:hover,
.feature:focus-within,
.service-card:hover,
.service-card:focus-within,
.plan:hover,
.plan:focus-within,
.case:hover,
.case:focus-within,
.blog-post:hover,
.blog-post:focus-within{
  transform:translate3d(0,-10px,24px) scale(1.01);
  box-shadow:0 32px 90px rgba(0,0,0,.78);
}

.feature:hover::after,
.feature:focus-within::after,
.service-card:hover::after,
.service-card:focus-within::after,
.plan:hover::after,
.plan:focus-within::after,
.case:hover::after,
.case:focus-within::after,
.blog-post:hover::after,
.blog-post:focus-within::after{
  opacity:.9;
}

/* Über mich */
.about{display:grid; gap:26px; align-items:start}
@media(min-width:980px){ .about{grid-template-columns: 1fr 1fr} }
.portrait{display:block; width:100%; border-radius:16px; border:1px solid var(--line); object-fit:cover}
@media(max-width:979px){
  .about--media-first-mobile > .portrait{order:-1}
}

/* Musik-Video – Layout wie "Über mich" */
.video-section{display:grid; gap:26px; align-items:start}
@media(min-width:980px){
  .video-section{grid-template-columns: 1fr 1fr}
  .video-section > :first-child{align-self:end}
}
.video-copy a{text-decoration:underline; text-underline-offset:2px; text-decoration-thickness:1px}
/* Keep buttons in video-copy without underlines */
.video-copy a.btn{ text-decoration:none }

/* Kontakt */
/* CTA row: consistent spacing under descriptions */
.cta-row{display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:var(--stack-gap)}
/* Consistent CTA spacing: combine paragraph margin (16px) + 16px offset = 32px */
/* Extra specificity kept for legacy markup; margin collapses to 16px */
p + .cta-row,
.lead + .cta-row,
.note + .cta-row{margin-top:var(--stack-gap)}

/* Typomat: Buttongruppe ohne zusätzlichen Versatz innerhalb der Zeile */
.typomat-actions-main{margin-top:0}

/* Standalone buttons following text get same rhythm */
p + .btn,
.lead + .btn,
.note + .btn{margin-top:var(--stack-gap)}

/* More breathing room after card/grid blocks */
.cards + :is(p, .lead, .note, .cta-row, .btn, ul, ol, blockquote),
.features + :is(p, .lead, .note, .cta-row, .btn, ul, ol, blockquote),
.services-grid + :is(p, .lead, .note, .cta-row, .btn, ul, ol, blockquote),
.pricing + :is(p, .lead, .note, .cta-row, .btn, ul, ol, blockquote),
.showcases + :is(p, .lead, .note, .cta-row, .btn, ul, ol, blockquote),
.blog-list__grid + :is(p, .lead, .note, .cta-row, .btn, ul, ol, blockquote),
.kv-use-cards + :is(p, .lead, .note, .cta-row, .btn, ul, ol, blockquote),
.kv-summary + :is(p, .lead, .note, .cta-row, .btn, ul, ol, blockquote),
.kv-columns + :is(p, .lead, .note, .cta-row, .btn, ul, ol, blockquote),
.legal-columns + :is(p, .lead, .note, .cta-row, .btn, ul, ol, blockquote){
  margin-top:var(--stack-gap-lg);
}

.summary .btn{margin-top:48px}

/* Datenschutz-Liste */
.privacy-list{margin:0 0 1rem 1.1rem}
.privacy-list li{margin:.28rem 0}

/* Footer */
footer{
  border-top:1px solid color-mix(in oklab, var(--line), var(--text) 10%);
  padding:36px 0;
  background:
    linear-gradient(180deg,
      rgb(11 15 20 / .82),
      rgb(11 15 20 / .64),
      rgb(11 15 20 / .28));
  color:var(--muted);
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}
.footgrid{display:grid; gap:20px; align-items:stretch}
/* Make each column a flex stack so we can bottom-align last child */
.footgrid > *{display:flex; flex-direction:column}
.footgrid > * > :last-child{margin-top:auto; margin-bottom:0}
@media(min-width:900px){ .footgrid{grid-template-columns: 1fr 1fr 1fr} }
.foot-links{display:flex; flex-direction:column; gap:12px}
.foot-links > strong,
.foot-heading{display:block; margin:0 0 12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:color-mix(in oklab, var(--muted), var(--text) 20%);
  font-size:.95rem;}
.foot-link-columns{display:grid; gap:6px; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); max-width:280px}
@media(min-width:600px){ .foot-link-columns{grid-template-columns:repeat(2, minmax(0,1fr))} }
.foot-link-columns a{opacity:.85}
.foot-link-columns a:hover, .foot-link-columns a:focus-visible{opacity:1; color:var(--text)}

/* Footer contact column bottom-align email to match links column bottom */
.foot-contact{display:flex; flex-direction:column}
.foot-contact-bottom{display:flex; flex-direction:column; gap:6px; margin-top:auto}

/* On small screens, add extra space between the footer logo and tagline */
@media(max-width:640px){
  footer .brand__logo{ margin-bottom:18px; }
}

.site-meta{
  border-top:1px solid color-mix(in oklab, var(--line), var(--text) 10%);
  background:
    linear-gradient(180deg,
      rgb(11 15 20 / .82),
      rgb(11 15 20 / .64),
      rgb(11 15 20 / .28));
  color:var(--muted);
  padding:16px 0;
  -webkit-backdrop-filter:blur(18px) saturate(160%);
  backdrop-filter:blur(18px) saturate(160%);
}
.site-meta__inner{display:flex; flex-direction:column; gap:8px; align-items:flex-start}
@media(min-width:640px){
  .site-meta__inner{flex-direction:row; justify-content:space-between; align-items:center}
}
.site-meta__link{color:var(--muted); font-weight:600; text-decoration:none}
.site-meta__link:hover,
.site-meta__link:focus-visible{color:var(--text)}
.site-meta__updated{font-size:.9rem}

.seo-fallback-nav,
.seo-fallback-footer{
  max-width:min(var(--maxw), calc(100% - 32px));
  margin:0 auto;
  padding:14px 0;
}

.seo-fallback-nav{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
  border-bottom:1px solid var(--line);
}

.seo-fallback-nav a,
.seo-fallback-footer a{
  color:var(--muted);
}

.seo-fallback-nav a:hover,
.seo-fallback-nav a:focus-visible,
.seo-fallback-footer a:hover,
.seo-fallback-footer a:focus-visible{
  color:var(--text);
}

.seo-fallback-footer{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px 24px;
  border-top:1px solid var(--line);
  color:var(--muted);
}

.seo-fallback-footer__brand{
  margin:0;
  line-height:1.6;
}

.seo-fallback-footer__links{
  display:flex;
  flex-wrap:wrap;
  gap:10px 16px;
}

/* Utils */
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mt-4{margin-top:24px}

.hidden{display:none}


/* Weisser Outline-Button */
.btn--white-outline{color:#ffffff; border-color:#ffffff; background:transparent}
.btn--white-outline:hover{background:rgba(255,255,255,.06)}


/* Icon sizing */
.feature .icon,
.service-card .icon{width:44px; height:44px}
.service-card .icon{margin-top:4px}
.accent--cyan .icon,
.accent--mag .icon,
.accent--ylw .icon{color:var(--accent-color)}

/* Icon library */
.icon--arrow-left{--icon:url('../img/icons/site/arrow-left.svg')}
.icon--arrow-left-02{--icon:url('../img/icons/site/arrow-left-bar.svg')}
.icon--arrow-right{--icon:url('../img/icons/site/arrow-right.svg')}
.icon--it-monitor{--icon:url('../img/icons/site/device-desktop.svg')}
.icon--pen-tool{--icon:url('../img/icons/site/brush.svg')}
.icon--compass{--icon:url('../img/icons/site/compass.svg')}
.icon--ai-robot{--icon:url('../img/icons/site/robot.svg')}
.icon--activity{--icon:url('../img/icons/site/activity.svg')}
.icon--search{--icon:url('../img/icons/site/search.svg')}
.icon--database{--icon:url('../img/icons/site/database.svg')}
.icon--lifebuoy{--icon:url('../img/icons/site/lifebuoy.svg')}
.icon--arrows-refresh{--icon:url('../img/icons/site/refresh.svg')}
.icon--reload{--icon:url('../img/icons/site/reload.svg')}
.icon--cloud{--icon:url('../img/icons/site/cloud.svg')}
.icon--shield-check{--icon:url('../img/icons/site/shield-check.svg')}
.icon--contact{--icon:url('../img/icons/site/phone-call.svg')}
.icon--message{--icon:url('../img/icons/site/message.svg')}
.icon--chat{--icon:url('../img/icons/site/message-circle.svg')}
.icon--whatsapp{--icon:url('../img/icons/site/brand-whatsapp.svg')}
.icon--mail{--icon:url('../img/icons/site/mail.svg')}
.icon--news{--icon:url('../img/icons/site/news.svg')}
.icon--lock{--icon:url('../img/icons/site/lock.svg')}
.icon--target{--icon:url('../img/icons/site/target-arrow.svg')}
.icon--scheme{--icon:url('../img/icons/site/schema.svg')}
.icon--compass-01{--icon:url('../img/icons/site/compass.svg')}
.icon--ai-brain-04{--icon:url('../img/icons/site/brain.svg')}
.icon--discover-circle{--icon:url('../img/icons/site/stars.svg')}
.icon--search-dollar{--icon:url('../img/icons/site/zoom-money.svg')}
.icon--start-up-02{--icon:url('../img/icons/site/rocket.svg')}
.icon--calculate{--icon:url('../img/icons/site/calculator.svg')}
.icon--audit-02{--icon:url('../img/icons/site/clipboard-search.svg')}
.icon--test-tube-03{--icon:url('../img/icons/site/test-pipe.svg')}
.icon--typomat-transform{--icon:url('../img/icons/site/wand.svg')}
.icon--typomat-clean{--icon:url('../img/icons/site/sparkles.svg')}
.icon--typomat-both{--icon:url('../img/icons/site/arrows-join.svg')}
.icon--typomat-clear{--icon:url('../img/icons/site/trash.svg')}
.icon--typomat-copy{--icon:url('../img/icons/site/clipboard-copy.svg')}
.icon--users{--icon:url('../img/icons/site/users-group.svg')}
.icon--youtube{--icon:url('../img/icons/site/brand-youtube.svg')}

/* Brand logos monochrom -> farbig on hover */
.brandmark{filter:none; opacity:.9; transition:opacity .25s ease;
  height:var(--brandmark-height); max-height:var(--brandmark-height); width:auto; display:block; object-fit:contain}
.brand-link:hover .brandmark,
.brand-link:focus .brandmark,
.brand-link:focus-visible .brandmark{opacity:1}

@media(max-width:640px){
  .brand-link{--brandmark-height:52px}
}

@media(min-width:1200px){
  .brand-link{--brandmark-height:76px}
}

/* Neuigkeiten */
.blog-intro{padding:var(--section-pad) 0}
.blog-intro__inner{display:flex; flex-direction:column; align-items:flex-start; gap:var(--stack-gap)}
.blog-intro__inner > :where(h1, h2, h3, p, blockquote, .cta-row, .kicker){margin:0}
.blog-list{padding:var(--section-pad) 0}
.blog-list__grid{display:grid; gap:var(--grid-gap)}
@media(min-width:780px){
  .blog-list__grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media(min-width:1120px){
  .blog-list__grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}
.blog-empty, .blog-noscript{margin:36px 0 0; color:var(--muted)}
.blog-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:16px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; height:100%; transition:transform .2s ease, box-shadow .2s ease}
.blog-card__link{display:flex; flex-direction:column; flex:1; min-height:100%; color:inherit}
.blog-card__cover-link{display:block; color:inherit}
.blog-card__title-link{color:inherit; text-decoration:none}
.blog-card__title-link:hover{color:var(--text)}
.blog-card :is(.blog-card__link, .blog-card__cover-link, .blog-card__title-link):focus-visible{
  outline:2px solid color-mix(in oklab, var(--cyan), transparent 50%);
  outline-offset:4px;
}
.blog-card:hover, .blog-card:focus-within{transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.35)}
.blog-card__cover{position:relative; z-index:0; aspect-ratio:16/9; background:color-mix(in oklab, var(--bg-2), transparent 20%); overflow:hidden}
.blog-card__cover img{width:100%; height:100%; object-fit:cover}
.blog-card__body{
  position:relative;
  z-index:1;
  padding:22px 24px 26px;
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  gap:18px;
  flex:1;
  color:var(--text);
}
.blog-card__body > *{
  position:relative;
  z-index:1;
  width:100%;
}
.blog-card__body h2{margin:0; color:var(--text); font-size:1.35rem; line-height:1.3}
.blog-card__meta{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; color:var(--muted); font-size:.95rem}
.blog-card__excerpt{margin:0; color:var(--muted); line-height:1.6}
.blog-tags{display:flex; flex-wrap:wrap; gap:8px}
.blog-tag{display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; border:1px solid var(--line); background:color-mix(in oklab, var(--bg-2), transparent 25%); color:var(--muted); font-size:.75rem; letter-spacing:.05em; text-transform:uppercase}
.blog-detail{padding:var(--section-pad) 0}
.blog-detail__container{display:flex; flex-direction:column; gap:26px}
.blog-back{display:inline-flex; align-items:center; gap:8px; font-weight:600; color:var(--muted); transition:color .2s ease}
.blog-back:hover, .blog-back:focus-visible{color:var(--text)}
.blog-post{border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:var(--shadow); padding:clamp(28px,6vw,48px); display:flex; flex-direction:column; gap:28px}
.blog-post__meta-top{display:flex; flex-direction:column; gap:var(--stack-gap)}
.blog-post__meta-top > :where(h1, h2, h3, p, blockquote, .cta-row, .kicker){margin:0}
.blog-post__meta{display:flex; flex-wrap:wrap; gap:12px 16px; align-items:center; color:var(--muted)}
.blog-post__meta time{font-weight:600}
.blog-post__cover{margin:0; border-radius:16px; overflow:hidden}
.blog-post__cover img{width:100%; aspect-ratio:16/9; object-fit:cover; display:block}
.blog-post__content{display:flex; flex-direction:column; gap:1.4rem; font-size:1.05rem; line-height:1.7}
.blog-post__content > *:first-child{margin-top:0}
.blog-post__content h2, .blog-post__content h3{margin:0; font-size:1.35rem}
.blog-post__content h2:not(:first-child), .blog-post__content h3:not(:first-child){margin-top:1.4rem}
.blog-post__content h3{font-size:1.2rem}
.blog-post__content li{line-height:1.6}
.blog-post__content p{margin:0}
.blog-post__content ul, .blog-post__content ol{margin:0 0 0 1.2rem; padding:0; display:grid; gap:.45rem}
.blog-post__content blockquote{margin:0; padding-left:1.2rem; border-left:3px solid color-mix(in oklab, var(--cyan), transparent 40%); font-style:italic; color:var(--muted)}
.blog-post__content a{color:var(--cyan); text-decoration:underline}
.blog-post__content strong{color:var(--text)}
.blog-post__content img{border-radius:14px}
.blog-back--bottom{margin-top:12px}

.context-links{
  display:flex;
  flex-direction:column;
  gap:var(--stack-gap);
  margin-top:var(--stack-gap);
}

.context-links > :where(h2, h3, p, .kicker){
  margin:0;
}

.context-links__list{
  display:grid;
  gap:16px;
}

.context-links__item{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:18px 20px;
  border-radius:14px;
  border:1px solid color-mix(in oklab, var(--line), var(--text) 10%);
  background:color-mix(in oklab, var(--bg-2), transparent 12%);
  color:inherit;
  text-decoration:none;
  transition:transform .2s ease, border-color .2s ease, background .2s ease;
}

.context-links__item:hover,
.context-links__item:focus-visible{
  transform:translateY(-2px);
  border-color:color-mix(in oklab, var(--cyan), var(--line) 45%);
  background:color-mix(in oklab, var(--bg-2), transparent 4%);
}

.context-links__item h3,
.context-links__item p{
  margin:0;
}

.context-links__item p{
  color:var(--muted);
  line-height:1.6;
}

@media(min-width:780px){
  .context-links__list{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
}

/* Kostenvergleich */
.kv-hero{padding:var(--section-pad) 0}
.kv-hero__inner{display:flex; flex-direction:column; align-items:flex-start; gap:var(--stack-gap)}
.kv-hero__inner > :where(h1, h2, h3, p, blockquote, .cta-row, .kicker){margin:0}
.kv-intro{padding:var(--section-pad) 0}
.kv-intro__inner{display:flex; flex-direction:column; align-items:flex-start; gap:var(--stack-gap)}
.kv-intro__inner > :where(h1, h2, h3, p, blockquote, .cta-row, .kicker){margin:0}
.kv-intro__inner ul{margin:0 0 0 1.2rem; padding:0; display:grid; gap:.5rem}
.kv-use-cards{
  width:100%;
  display:grid;
  gap:16px;
  margin-top:var(--stack-gap);
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
}
.kv-use-card{
  border-radius:14px;
  padding:16px 18px;
  border:1px solid color-mix(in oklab, var(--line), var(--text) 10%);
  background:color-mix(in oklab, var(--bg-2), transparent 10%);
  display:flex;
  flex-direction:column;
  gap:10px;
}
.kv-use-card .icon{width:36px; height:36px; color:var(--cyan)}
.kv-use-card h3{margin:0; font-size:1.05rem; letter-spacing:.01em}
.kv-use-card p{margin:0; color:var(--muted); line-height:1.6}
.kv-tool{display:flex; flex-direction:column; gap:24px}
.kv-timebox-card{
  margin-top:var(--stack-gap);
  border-radius:14px;
  padding:16px 18px;
  border:1px solid color-mix(in oklab, var(--line), var(--text) 10%);
  background:
    linear-gradient(180deg,
      rgb(11 15 20 / .82),
      rgb(11 15 20 / .64),
      rgb(11 15 20 / .28));
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.kv-timebox{margin-top:0; display:flex; flex-direction:column; gap:8px; max-width:560px; flex:1 1 320px}
.kv-timebox-label{font-size:1.15rem; font-weight:600}
.kv-timebox input[type=range]{width:100%}
.kv-months-display{font-size:.95rem; color:var(--muted)}
.kv-summary{margin-top:var(--stack-gap); display:grid; gap:16px}
.kv-scenario-summary{
  border-radius:14px;
  padding:18px 20px;
  border:1px solid color-mix(in oklab, var(--line), var(--text) 10%);
  background:
    linear-gradient(180deg,
      rgb(11 15 20 / .82),
      rgb(11 15 20 / .64),
      rgb(11 15 20 / .28));
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.kv-total{font-size:1.3rem; font-weight:700}
.kv-columns{margin-top:20px; display:grid; gap:20px}
.kv-column-inner{display:flex; flex-direction:column; gap:18px}
.kv-column-hint{
  margin:0 0 4px;
  color:var(--text);
  font-size:.95rem;
}
.kv-column-hint-title{
  display:block;
  font-size:1.05rem;
  font-weight:600;
  color:var(--text);
}
.kv-column-hint-text{
  display:block;
  margin-top:2px;
  font-size:.95rem;
  font-weight:400;
  color:var(--text);
}
.kv-block{border-radius:14px; padding:16px 18px; border:1px solid color-mix(in oklab, var(--line), var(--text) 8%);
  background:color-mix(in oklab, var(--bg-2), transparent 10%); display:flex; flex-direction:column; gap:10px}
.kv-table{width:100%; border-collapse:collapse; font-size:.95rem; background:rgba(15,21,32,.9); border-radius:12px; overflow:hidden}
.kv-table th,
.kv-table td{padding:8px 10px; border-bottom:1px solid color-mix(in oklab, var(--line), transparent 40%); text-align:left}
.kv-table thead th{font-weight:600; color:var(--muted); background:color-mix(in oklab, var(--bg-2), transparent 20%)}
.kv-table tbody tr:last-child td{border-bottom:none}
.kv-table input[type=text],
.kv-table input[type=number]{width:100%; font:inherit; border-radius:10px; border:1px solid var(--line); padding:6px 8px;
  background:color-mix(in oklab, var(--bg-2), transparent 20%); color:var(--text)}
.kv-row-add{border-radius:999px; border:1px solid color-mix(in oklab, var(--line), var(--text) 20%); background:transparent; color:var(--text);
  font-size:.9rem; padding:4px 10px; cursor:pointer}
.kv-row-remove{
  border-radius:999px;
  border:1px solid color-mix(in oklab, #dc2626, var(--line) 45%);
  background:transparent;
  color:#fca5a5;
  font-size:.9rem;
  padding:4px 10px;
  cursor:pointer;
  min-width:2.1rem;
  text-align:center;
}
.kv-actions{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px}
.kv-actions--top{
  margin-top:0;
  justify-content:flex-end;
}
.kv-import-label{cursor:pointer}
.kv-noscript{margin-top:var(--stack-gap); color:var(--muted)}
.kv-cta{padding:var(--section-pad) 0}
.kv-cta__inner{display:flex; flex-direction:column; gap:16px}
.kv-scenario-summary.kv-cheaper{border-color:color-mix(in oklab, #16a34a, var(--line) 40%);
  box-shadow:0 0 0 1px color-mix(in oklab, #16a34a, transparent 70%)}
.kv-scenario-summary.kv-more-expensive{border-color:color-mix(in oklab, #dc2626, var(--line) 40%);
  box-shadow:0 0 0 1px color-mix(in oklab, #dc2626, transparent 70%)}
.kv-scenario-summary.kv-neutral{border-color:color-mix(in oklab, var(--line), var(--text) 8%); box-shadow:none}
@media(min-width:760px){
  .kv-summary{grid-template-columns:repeat(2, minmax(0,1fr))}
  .kv-columns{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media(max-width:600px){
  .kv-table{display:block; overflow-x:auto}
}

/* Kicker: weniger Abstand zum Titel (Stack-Layouts mit gap) */
.hero-grid :is(.hero-copy, .ai-hero__copy) > .kicker,
.blog-intro__inner > .kicker,
.blog-post__meta-top > .kicker,
.legal-intro__inner > .kicker,
.kv-hero__inner > .kicker,
.kv-intro__inner > .kicker{
  margin-bottom:calc(var(--kicker-gap) - var(--stack-gap));
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *, *::before, *::after{
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    animation-play-state:paused !important;
    transition-duration:0.01ms !important;
    transition-delay:0s !important;
  }
  .brandings-track{animation:none !important}
  .brand-link:hover,
  .brand-link:focus-visible,
  .blog-card:hover,
  .blog-card:focus-within,
  .feature:hover,
  .feature:focus-within,
  .service-card:hover,
  .service-card:focus-within,
  .plan:hover,
  .plan:focus-within,
  .blog-post:hover,
  .blog-post:focus-within,
  .case:hover,
  .case:focus-within{transform:none}
}