/* =========================================
   Argon Analytik – Styles (extern)
   ========================================= */
:root{
  --bg: #0b0f14;
  --bg-2:#10161f;
  --card:#0f141d;
  --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;
  --maxw:1160px;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0; background:var(--bg); color:var(--text);
  font:16px/1.55 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Ubuntu,Helvetica,Arial,sans-serif}
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 20px}
section{padding:clamp(48px,8vw,96px) 0}
h1{font-size:clamp(2rem,4vw,3rem); line-height:1.15; margin:0 0 1rem}
h2{font-size:clamp(1.6rem,2.6vw,2.2rem); margin:0 0 1rem}
h3{font-size:1.15rem; margin:.2rem 0 .6rem}
p{margin:.5rem 0 1rem}
:where(p, .lead, .note, ul, ol, blockquote) + :where(.cta-row, .btn){
  margin-top:16px;
}
:where(h2, h3) + :where(.cta-row, .btn){
  margin-top:12px;
}
: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)}
.cards{display:grid; gap:22px}
@media(min-width:900px){ .cards{grid-template-columns:repeat(3,1fr)} }

/* 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:10px; padding:.55rem .8rem; border:1px solid var(--line);
  border-radius:10px; background:transparent; color:var(--text); cursor:pointer; font-weight:600;
  transition:background .2s ease, border-color .2s ease}
.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}

.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;
}

/* 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:-20px; right:-20px; padding:16px 20px 20px;
    background:color-mix(in oklab, var(--bg), var(--bg-2) 55%); border-bottom:1px solid var(--line);
    box-shadow:0 18px 34px rgba(0,0,0,.35); display:none; flex-direction:column; z-index:40}
  .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}
}

@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; gap:.5rem; padding:.7rem 1rem;
  border-radius:12px; font-weight:600; border:1.5px solid currentColor; background:transparent}
.btn:hover{background:color-mix(in oklab, currentColor, transparent 92%)}
.btn--white{background:#ffffff; color:#0b1220; border-color:#ffffff}
.btn--white:hover{background:#ffffff; filter:brightness(0.95)}
.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}

/* 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 }

/* Hero */
.hero{
  background:
    radial-gradient(1000px 380px at 12% -240px, color-mix(in oklab, var(--cyan), transparent 88%), transparent 60%),
    radial-gradient(900px 320px at 88% -220px, color-mix(in oklab, var(--mag),  transparent 90%), transparent 60%),
    radial-gradient(700px 220px at 50% -160px, color-mix(in oklab, var(--ylw), transparent 90%), transparent 55%);
}
.hero{
  background:
    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%);
}
.hero-grid{display:grid; gap:28px; align-items:start}
.hero-visual{display:none}
@media(min-width:980px){
  .hero{
    background:
      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%);
  }
  .hero-grid{
    grid-template-columns:1.1fr .9fr;
    grid-template-areas:
      "hero-copy hero-visual"
      "hero-features hero-features";
    gap:44px 36px;
  }
  .hero-copy{grid-area:hero-copy}
  .hero-visual{grid-area:hero-visual; display:block}
  .hero-features{
    grid-area:hero-features;
    grid-column:1 / -1;
    grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  }
}
.features{display:grid; gap:24px; 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%}
/* 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}

/* Brandings */
.brandings{border-top:1px solid var(--line); border-bottom:1px solid var(--line); background:var(--bg-2);
  padding:clamp(36px,6vw,64px) 0}
.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:72px; display:flex; align-items:center; justify-content:center; padding:12px 18px;
  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 h3{color:var(--cyan)}
.plan--change h3{color:var(--mag)}
.plan--plan h3{color:var(--ylw)}

/* Rechner */
.calc{border:1px solid var(--line); background:var(--card); border-radius:16px; padding:24px; margin-top:22px; overflow:hidden}
.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-section{padding:20px; border-radius:14px; border:1px solid var(--line); background:var(--bg-2); display:grid; gap:16px; grid-template-columns:1fr}
.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}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-weight:600}
.field input[type=number], .field select{
  width:100%; max-width:240px;
  font-size:16px; line-height:1.2; height:42px;
  padding:.7rem .85rem; border-radius:12px;
  border:1px solid var(--line); background:var(--card); color:var(--text);
  box-shadow:none; appearance:none;
}
.field input[type=number]:focus, .field select:focus{
  outline:none; border-color:color-mix(in oklab, var(--line), var(--cyan) 35%);
  box-shadow:0 0 0 3px color-mix(in oklab, var(--cyan), transparent 85%);
}
.field-note{margin:0; font-size:.92rem; color:var(--muted)}
.summary{border:1px solid var(--line); background:var(--bg-2); border-radius:16px; padding:24px;
  display:flex; flex-direction:column}
.summary > *{margin:0}
.summary > * + *{margin-top:16px}
.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){
  .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 and inputs don't force width */
@media(max-width:480px){
  .sumline{flex-wrap:wrap}
  .sumline strong:last-child{margin-left:auto}
  .field input[type=number], .field select{max-width:100%}
}

/* Referenzen/Stimmen (mit Farblogik an der Kontur) */
.showcases{display:grid; gap:22px}
@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}

/* Ü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}

/* 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-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; margin-top:16px}
/* 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:16px}

/* Standalone buttons following text get same rhythm */
p + .btn,
.lead + .btn,
.note + .btn{margin-top:16px}

.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 var(--line); padding:36px 0; background:var(--bg-2); color:var(--muted)}
.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 var(--line); background:var(--bg); color:var(--muted); padding:16px 0}
.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}

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

.hidden{display:none}


/* Weißer 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/arrow-left.svg')}
.icon--arrow-right{--icon:url('../img/icons/arrow-right.svg')}
.icon--rocket{--icon:url('../img/icons/rocket.svg')}
.icon--receipt{--icon:url('../img/icons/receipt.svg')}
.icon--it-monitor{--icon:url('../img/icons/it-monitor.svg')}
.icon--pen-tool{--icon:url('../img/icons/pen-tool.svg')}
.icon--compass{--icon:url('../img/icons/compass.svg')}
.icon--ai-robot{--icon:url('../img/icons/ai-robot.svg')}
.icon--activity{--icon:url('../img/icons/activity.svg')}
.icon--shield-check{--icon:url('../img/icons/shield-check.svg')}
.icon--graduation-cap{--icon:url('../img/icons/graduation-cap.svg')}
.icon--cloud{--icon:url('../img/icons/cloud.svg')}
.icon--contact{--icon:url('../img/icons/contact.svg')}
.icon--privacy-shield{--icon:url('../img/icons/privacy-shield.svg')}
.icon--message{--icon:url('../img/icons/message.svg')}
.icon--chat{--icon:url('../img/icons/chat.svg')}
.icon--mail{--icon:url('../img/icons/mail.svg')}
.icon--news{--icon:url('../img/icons/news.svg')}
.icon--lock{--icon:url('../img/icons/lock.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:56px}
}

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

/* Neuigkeiten */
.blog-intro{padding:clamp(60px,9vw,120px) 0 clamp(36px,6vw,72px)}
.blog-intro__inner{display:flex; flex-direction:column; gap:16px; max-width:780px}
.blog-list{padding:0 0 clamp(48px,8vw,96px)}
.blog-list__grid{display:grid; gap:24px}
@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{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; height:100%; color:inherit}
.blog-card__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{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{padding:22px 24px 26px; display:flex; flex-direction:column; gap:18px; flex:1}
.blog-card__body h2{margin:0; 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:clamp(36px,7vw,96px) 0}
.blog-detail__container{max-width:860px; margin-inline:auto; 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:14px}
.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}

@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,
  .case:hover,
  .case:focus-within{transform:none}
}