@font-face {
      font-family: "Inter Tight";
      font-style: normal;
      font-weight: 600;
      font-display: block;
      src: url("/assets/fonts/InterTight-600.woff2") format("woff2");
    }
    @font-face {
      font-family: Inter;
      font-style: normal;
      font-weight: 100 900;
      font-display: block;
      src: url("/assets/Inter.woff2") format("woff2");
    }

    :root {
      color-scheme: dark;
      --black: #050505;
      --black-soft: #0b0b0b;
      --white: #f8f8f4;
      --muted: #a8a8a0;
      --muted-strong: #d1d1c9;
      --magenta: #caff38;
      --lime: #caff38;
      --gutter: clamp(20px, 4vw, 64px);
      --max: 1280px;
      --header-height: 84px;
      --ease-out: cubic-bezier(.2,.75,.25,1);
    }

    *, *::before, *::after { box-sizing: border-box; }
    html { background: var(--black); }
    body {
      margin: 0;
      min-width: 320px;
      overflow-x: clip;
      background: var(--black);
      color: var(--white);
      font-family: Inter, Arial, sans-serif;
      font-size: 16px;
      line-height: 1.5;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    body.menu-open { overflow: hidden; }
    button, select { font: inherit; }
    button, a, select { -webkit-tap-highlight-color: transparent; }
    button, a, select { outline-color: var(--lime); }
    button:focus-visible, a:focus-visible, select:focus-visible, dialog:focus-visible {
      outline: 2px solid var(--lime);
      outline-offset: 4px;
    }
    h1, h2, p { margin: 0; }
    button { cursor: pointer; }
    a { color: inherit; text-decoration: none; }
    .shell {
      width: min(var(--max), calc(100% - (var(--gutter) * 2)));
      margin-inline: auto;
    }

    /* Header: logo and category navigation share one left-aligned rhythm. */
    .site-header {
      min-height: var(--header-height);
      position: sticky;
      top: 0;
      z-index: 20;
      background: var(--black);
    }
    /* Active section mirrored into the menu while scrolling. */
    .nav-button[aria-current="location"] { color: var(--lime); }
    .header-cta[aria-current="location"] { color: var(--lime); border-color: var(--lime); }
    .header-inner {
      width: min(var(--max), calc(100% - (var(--gutter) * 2)));
      min-height: var(--header-height);
      margin-inline: auto;
      display: flex;
      align-items: center;
      gap: clamp(20px, 2.2vw, 34px);
    }
    .brand {
      display: inline-flex;
      align-items: center;
      flex: 0 0 auto;
      min-height: 48px;
      padding-block: 8px;
    }
    .brand img {
      display: block;
      width: clamp(142px, 12vw, 178px);
      height: auto;
    }
    .main-nav {
      display: flex;
      align-items: center;
      gap: clamp(16px, 1.65vw, 24px);
    }
    .nav-button, .mobile-menu-button {
      min-height: 44px;
      border: 0;
      padding: 10px 0;
      background: transparent;
      color: var(--muted-strong);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .01em;
      transition: color .2s ease;
    }
    .nav-button:hover, .nav-button:focus-visible,
    .mobile-menu-button:hover, .mobile-menu-button:focus-visible { color: var(--lime); }
    .header-actions {
      margin-left: auto;
      display: flex;
      align-items: center;
      gap: 18px;
    }
    .header-cta {
      min-height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content:center;
      gap:12px;
      border: 1px solid #b0b0a8;
      border-radius: 8px;
      padding: 11px 20px;
      background: #080808;
      color: var(--white);
      font-size: 14px;
      font-weight: 600;
      white-space: nowrap;
      transition: color .2s ease, background .2s ease, border-color .2s ease;
    }
    .header-cta:hover, .header-cta:focus-visible {
      border-color: var(--white);
      background: #151514;
      color: var(--white);
    }

    .language-picker {position:relative;flex:0 0 auto;}
    .language-picker::after {content:"";position:absolute;right:10px;top:19px;width:6px;height:6px;border-right:1px solid #b6b6af;border-bottom:1px solid #b6b6af;transform:rotate(45deg);pointer-events:none;}
    #language-select {appearance:none;display:block;width:98px;min-height:44px;padding:10px 24px 10px 8px;border:0;border-radius:4px;background:transparent;color:var(--muted-strong);font-family:Inter,Arial,sans-serif;font-size:13px;font-weight:500;cursor:pointer;}
    #language-select:hover,#language-select:focus-visible {color:var(--white);}
    #language-select option {background:#111;color:#f8f8f4;}

    .accent-magenta {color:var(--magenta);}
    .accent-lime {color:var(--lime);}
    .mobile-menu-button { display: none; align-items: center; justify-content:center; min-width:44px; gap: 10px; }
    .menu-icon { display: grid; gap: 4px; width: 19px; }
    .menu-icon span { display: block; height: 1px; background: currentColor; transition: transform .2s ease; }
    .mobile-menu-button[aria-expanded="true"] .menu-icon span:first-child { transform: translateY(2.5px) rotate(45deg); }
    .mobile-menu-button[aria-expanded="true"] .menu-icon span:last-child { transform: translateY(-2.5px) rotate(-45deg); }
    .mobile-menu {
      display: none;
      padding: 12px var(--gutter) 28px;
      border-top: 1px solid #20201e;
      background: var(--black);
    }
    .mobile-menu.is-open { display: grid; gap: 4px; }
    .mobile-menu .nav-button, .mobile-menu .header-cta { width: 100%; justify-content: flex-start; text-align: left; }
    .mobile-menu .header-cta { margin-top: 12px; justify-content: center; text-align: center; }

    /* Centered copy and a modest, frameless future-film slot. */
    .stage { min-height: calc(100vh - var(--header-height)); display: flex; flex-direction: column; }
    .hero {
      flex: 0 0 auto;
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
      align-items: center;
      gap: clamp(40px, 5vw, 80px);
      width: min(1080px, calc(100% - (var(--gutter) * 2)));
      min-height: 480px;
      padding-block: 72px 56px;
    }
    .hero-copy { position: relative; z-index: 2; max-width: 610px; }
    .hero h1 {
      max-width: 660px;
      color: var(--white);
      font-family: "Inter Tight", Arial, sans-serif;
      font-size: clamp(40px, 4vw, 48px);
      font-weight: 600;
      line-height: 1.15;
      letter-spacing: -.04em;
      text-wrap: balance;
    }
    .title-line { display:block; margin:0; padding:0; }
    .hero-lede {
      max-width: 530px;
      margin-top: clamp(26px, 4vh, 40px);
      color: var(--muted-strong);
      font-size: 18px;
      font-weight: 300;
      line-height: 1.55;
      text-wrap: pretty;
    }
    .clip-placeholder {
      width: min(100%, 360px);
      aspect-ratio: 16 / 10;
      justify-self: center;
      position: relative;
      display: grid;
      place-items: center;
      background: var(--black);
      border: 0;
      box-shadow: none;
    }
    .clip-label { font-size:12px; font-weight:400; color:#a8a8a0; letter-spacing:.03em; text-align:center; }

    /* Reference strip: an open, fading field rather than a ruled divider. */
    .references {
      position: relative;
      padding-block: 28px 44px;
    }

    .reference-heading {
      margin-bottom: 17px;
      color: var(--muted);
      font-size: 14px;
      font-weight: 500;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    .marquee-viewport {
      position: relative;
      overflow: hidden;
      padding-block: 4px;
      mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
      -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    }
    #reference-track {
      width: max-content;
      display: flex;
      align-items: center;
      gap: 18px;
      animation: marquee var(--reference-duration,80s) linear infinite;
      animation-play-state: paused;
      will-change: transform;
    }
    .motion-on #reference-track { animation-play-state: running; }
    .reference-set { display: flex; align-items: center; justify-content: space-around; gap: 18px; flex: 0 0 auto; min-width: max(1200px, calc(100vw - (var(--gutter) * 2))); }
    .reference-item {
      min-width: clamp(150px, 15vw, 205px);
      min-height: 70px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 0;
      border-radius: 2px;
      padding: 14px 22px;
      background: transparent;
      color: #fff;
      font-size: 14.3px;
      font-weight: 600;
      letter-spacing: .12em;
      text-transform: uppercase;
      white-space: nowrap;
    }
    .reference-item:nth-child(2) {letter-spacing:.12em;}
    .reference-item:nth-child(3) {font-style:italic;}
    .reference-item:nth-child(4) {font-family: "Inter Tight",sans-serif;}
    .reference-item {font-size:20px;font-weight:600;letter-spacing:.025em;}
    .site-footer-fade { height: 42px; background: linear-gradient(to bottom, rgba(5,5,5,0), #000); }

    dialog {
      width: min(520px, calc(100% - 40px));
      border: 1px solid #464640;
      border-radius: 2px;
      padding: 28px;
      background: #11110f;
      color: var(--white);
      box-shadow: 0 25px 90px rgba(0,0,0,.65);
    }
    dialog::backdrop { background: rgba(0,0,0,.76); }
    .dialog-kicker { color: var(--magenta); font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
    dialog h2 { margin-top: 9px; font-family: "Inter Tight", Arial, sans-serif; font-size: 26px; font-weight: 600; line-height: 1.15; }
    dialog p { margin-top: 15px; color: var(--muted-strong); font-size: 15px; line-height: 1.55; }
    .dialog-close {
      min-height: 44px;
      margin-top: 24px;
      border: 1px solid #66665e;
      border-radius: 8px;
      padding: 9px 16px;
      background: transparent;
      color: var(--white);
      font-size: 13px;
      font-weight: 600;
    }
    .dialog-close:hover, .dialog-close:focus-visible { border-color: var(--lime); color: var(--lime); }

    @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }

    @media (max-width: 960px) {
      :root { --header-height: 76px; }
      .header-inner { gap: 20px; }
      .main-nav { gap: 16px; }
      .header-cta { padding-inline: 14px; }
      .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; }
    }
    @media (max-width: 760px) {
      :root { --gutter: 20px; }
      .main-nav, .desktop-cta { display: none; }
      .mobile-menu-button { display: inline-flex; }
      .header-actions { gap: 8px; }
      .hero {
        grid-template-columns: 1fr;
        align-items: start;
        min-height: 0;
        padding-block: 54px 18px;
      }
      .hero-copy { max-width: none; }
      .hero h1 { max-width: 620px; font-size: clamp(38px, 10vw, 46px); }
      .hero-lede { max-width: 560px; margin-top: 27px; font-size: 17px; }
      .references { padding-block: 28px 34px; }
      .reference-item { min-width: 146px; min-height: 64px; }
    }
    @media (max-width: 390px) {
      .brand img { width: 137px; }
      .header-inner { gap: 12px; }
      .mobile-menu-button { font-size: 0; gap: 0; }
      .hero { padding-top: 43px; }
      .hero h1 { font-size: 38px; }
      .hero-lede { font-size: 16px; }
      .reference-item { min-width: 140px; }
      .reduced-layout .reference-item { flex-basis: 130px; }
    }
    @media (prefers-reduced-motion: reduce) {
      html { scroll-behavior: auto; }
    }
    @media print {
      .site-header { position: static; }
      .hero { min-height: auto; }
      .mobile-menu-button { display: none !important; }
      .references { break-inside: avoid; }
    }
    @media(max-width:760px) {
      .hero { gap:30px; }
      .hero-copy { max-width:560px; justify-self:center; }
      .clip-placeholder { width:min(100%,320px); }
    }
    @media(max-width:390px) { .hero h1 {font-size:36px;} }
    @media(max-width:1060px) {
      .main-nav,.desktop-cta {display:none;}
      .mobile-menu-button {display:inline-flex;}
    }

    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* Desktop first-screen composition. Mobile <=1060px stays untouched. */
@media screen and (min-width: 1061px) {
  :root { --header-height: 96px; --max: 1480px; }
  .stage { min-height: calc(100svh - var(--header-height)); }
  .hero {
    flex: 1 0 auto;
    width: min(clamp(1160px, 86vw, 1400px), calc(100% - (var(--gutter) * 2)));
    min-height: 360px;
    padding-block: clamp(40px, 6vh, 84px);
    gap: clamp(40px, 5vw, 96px);
  }
  .hero-copy { max-width: none; }
  .hero h1 { max-width: 760px; font-size: clamp(52px, 4.2vw, 72px); }
  .hero-lede { max-width: 620px; font-size: clamp(19px, 1.4vw, 22px); }
  .clip-placeholder { width: min(100%, 420px); }
  .references { flex: 0 0 auto; padding-block: 20px clamp(24px, 4vh, 44px); }
  .reference-item { font-size: clamp(20px, 1.45vw, 25px); }
  .site-footer-fade { display: none; }
}
@media screen and (min-width: 1280px) {
  .brand img { width: clamp(178px, 14vw, 212px); }
  .nav-button { font-size: 15px; }
  .header-cta { min-height: 52px; font-size: 15px; }
}

/* Refinement of the approved hero scale: stronger header, quieter references. */
@media screen and (min-width: 1061px) {
  :root { --header-height: 112px; }
  .references { padding-block: 18px; }
  .reference-heading { font-size: 12.5px; margin-bottom: 12px; }
  .reference-item { font-size: clamp(19px, 1.15vw, 22px); min-height: 60px; padding-block: 12px; }
}
@media screen and (min-width: 1280px) {
  .brand img { width: clamp(190px, 15vw, 232px); }
  .nav-button { font-size: clamp(16px, 1.18vw, 17px); }
  .header-cta { min-height: 54px; font-size: 16px; }
  #language-select { font-size: 14px; width: 104px; }
}

/* Optical alignment: match the wordmark's lowercase body, not the SVG canvas. */
@media screen and (min-width: 1061px) {
  :root {
    --rendered-logo-width: clamp(142px, 12vw, 178px);
    --logo-text-shift: calc(var(--rendered-logo-width) * 0.018214 - 2px);
  }
  .main-nav, .header-actions { transform: translateY(var(--logo-text-shift)); }
  .reference-heading { margin-left: calc(var(--rendered-logo-width) * 0.06015 - 1px); }
  .clip-placeholder { background: transparent; }

  .clip-label { position: relative; z-index: 1; font-size: 14px; color: #b8b8b0; }
}
@media screen and (min-width: 1280px) {
  :root {
    --rendered-logo-width: clamp(190px, 15vw, 232px);
    --logo-text-shift: calc(var(--rendered-logo-width) * 0.018214 - 1px);
  }
}

/* Remove arrow without shrinking the established button. */
.header-cta { gap: 0; padding-inline: 32.6px; justify-content: center; text-align:center; }

/* Real partner vectors: consistent optical slots, no distortion. */
.reference-item { width:220px;flex:0 0 220px;padding:0 16px;justify-content:center; }
.reference-logo { display:block;width:188px;height:44px;object-fit:contain; }
.ref-50hertz,.ref-geco,.ref-sag-digital {height:52px;}
.ref-hays,.ref-immowelt {height:32px;}
.ref-bike24,.ref-msg,.ref-staffomatic,.ref-austin-fraser {height:36px;}

@media(max-width:760px){.reference-item{width:196px;flex-basis:196px;}.reference-logo{width:164px;}}

.reference-logo.ref-sap {height:44px;}

/* Reference refinement: -12% optical size; SAG is a separate legibility exception. */
.reference-heading {font-size:12.32px;line-height:21px;}
.reference-logo {width:165.44px;height:38.72px;}
.ref-50hertz,.ref-geco {height:45.76px;}
.ref-hays,.ref-immowelt {height:28.16px;}
.ref-bike24,.ref-msg,.ref-staffomatic,.ref-austin-fraser {height:31.68px;}
.reference-logo.ref-sap {height:38.72px;}
.reference-logo.ref-sag-digital {width:188px;max-width:100%;height:58px;}
@media screen and (min-width:1061px){.reference-heading{font-size:11px;line-height:18.75px;}}
@media(max-width:760px){.reference-logo{width:144.32px;}.reference-logo.ref-sag-digital{width:164px;}}

/* Align only the desktop navigation ink with the visible LC logo bottom.
   CTA/language retain the existing optical centering. */
@media screen and (min-width:1061px) {
  .main-nav {transform:translateY(calc(var(--rendered-logo-width) * 0.06015 - 9px));}
}

/* Reference marquee interaction styles only. */
.marquee-viewport {
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.marquee-viewport.is-dragging {
  cursor: grabbing;
}
.marquee-viewport img {
  -webkit-user-drag: none;
  user-drag: none;
}

/* Remove the visual label; retain surrounding layout and lift only the strip 34px. */
.references > .shell {padding-top:38px;}
.marquee-viewport {transform:translateY(-34px);}
@media screen and (min-width:1061px) {.references > .shell {padding-top:30.75px;}}

/* Approved seven additional marks: optical size, original aspect ratios. */
.reference-logo.ref-kap{width:132px;height:30px;}
.reference-logo.ref-kaap{width:145px;height:46px;}
.reference-logo.ref-greenpop{width:154px;height:54px;}
.reference-logo.ref-mteron{width:168px;height:28px;}
.reference-logo.ref-windaten{width:168px;height:49px;}
.reference-logo.ref-greenpower-digital{width:188px;height:34px;}
.reference-logo.ref-avantag-energy{width:152px;height:58px;}

/* Match navigation/subtitle grey; preserve vector alpha and geometry. */
.reference-logo {filter:url("/assets/reference-grey.svg#tint");}

/* Inline KRITIS preview: local poster first, native video after activation. */
.local-player-slot {
  width: min(100%, 500px);
  min-height: 200px;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #050505;
  border-radius: 8px;
  isolation: isolate;
}
.local-player-poster,
.local-player-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}
.local-player-poster {
  object-fit: cover;
  object-position: 50% 50%;
  transform: scale(1.1);
}
.local-player-poster-button {
  position: absolute;
  inset: 50% auto auto 50%;
  z-index: 3;
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  transform: translate(-50%, -50%);
  background: rgb(202, 255, 56);
  color: #050505;
}
.local-player-poster-button:hover,
.local-player-poster-button:focus-visible {
  background: rgb(202, 255, 56);
}
.local-player-poster-icon {
  width: 0;
  height: 0;
  margin-left: 5px;
  border-top: 12px solid transparent;
  border-bottom: 12px solid transparent;
  border-left: 17px solid currentColor;
}
.local-player-video {
  border-radius: 8px;
  object-fit: contain;
  background: #050505;
}
.local-player-video::cue {
  color: #caff38;
  background-color: rgba(5, 5, 5, .90);
  font-size: 14px;
  font-style: normal;
  font-weight: 400;
}
@media (max-width: 760px) {
  .local-player-video::cue { font-size: 12px; }
}
.local-player-video:fullscreen::cue {
  font-size: clamp(16px, 2.8vw, 36px);
}
.local-player-video:-webkit-full-screen::cue {
  font-size: clamp(16px, 2.8vw, 36px);
}
.local-player-fallback {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  display: grid;
  place-content: end center;
  gap: 8px;
  padding: 20px;
  background: linear-gradient(transparent 45%, rgba(5, 5, 5, .9));
  text-align: center;
  color: var(--white);
}
.local-player-fallback[hidden] { display: none; }
.local-player-fallback a { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) {
  .local-player-slot {
    width: 100%;
    justify-self: stretch;
  }
}
@media (max-width: 390px) {
  .local-player-slot {
    min-height: 200px;
  }
}

/* Symmetric video-window overhang relative to the complete hero copy. */
@media screen and (min-width: 1061px) {
  .hero { align-content: center; }
  .local-player-slot {
    align-self: stretch;
    aspect-ratio: auto;
    min-height: 0;
    margin-block: -20px;
  }
}

/* Isolated scroll destinations: deliberately heading-only placeholders. */
.page-sections {
  width: min(var(--max), calc(100% - (var(--gutter) * 2)));
  margin-inline: auto;
  padding-block: 24px 72px;
}
.scroll-section {
  min-height: clamp(220px, 28vh, 280px);
  display: flex;
  align-items: center;
  scroll-margin-top: var(--header-height);
}
.scroll-section h2 {
  max-width: 100%;
  color: var(--white);
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: clamp(32px, 4vw, 58px);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.page-sections-bottom {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 5vw, 96px);
}
.page-sections-bottom .scroll-section { min-width: 0; }
@media (max-width: 760px) {
  .page-sections { padding-block: 16px 52px; }
  .scroll-section { min-height: 220px; }
  .page-sections-bottom { grid-template-columns: 1fr; gap: 0; }
}

/* Services: 4x2 tiles, sized to fit one 1920x1080 viewport below the header. */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}
.content-section {
  display: block;
  min-height: 0;
  padding-block: clamp(56px, 8vh, 88px) clamp(40px, 5vh, 64px);
  /* Anchor lands on the divider, 24px below the header, not on the padding above it. */
  scroll-margin-top: calc(var(--header-height) - clamp(56px, 8vh, 88px) + 24px);
}
#kontakt.content-section {
  padding-block: clamp(28px, 4vh, 40px) clamp(48px, 6vh, 72px);
  scroll-margin-top: calc(var(--header-height) - clamp(28px, 4vh, 40px) + 24px);
}
#kontakt .section-divider { margin-bottom: clamp(56px, 8vh, 88px); }
/* Placeholder sections keep a visible body until real content arrives. */
.content-section:not(.services-section):not(.has-content) { min-height: clamp(220px, 28vh, 300px); }
/* Section divider (heading edge to last menu item, width set by JS) and white heading. */
.section-divider {
  height: 1px;
  width: 100%;
  background: #20201e;
}
.scroll-section h2.section-heading {
  display: block;
  margin: 20px 0 clamp(56px, 8vh, 88px);
  color: var(--white);
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: clamp(20px, 1.5vw, 24px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.03em;
}
.services-grid { width: 100%; }
.services-grid {
  list-style: none;
  margin-block: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: clamp(24px, 2.4vw, 40px);
  row-gap: clamp(44px, 6vh, 64px);
}
.services-more-wrap {
  display: flex;
  justify-content: center;
  margin: clamp(56px, 8vh, 88px) 0 0;
}
.header-cta.services-more {
  min-height: 40px;
  font-size: 12px;
  padding: 8px 24px;
  border-radius: 6px;
}
.header-cta.services-more:hover,
.header-cta.services-more:focus-visible {
  color: var(--lime);
  border-color: var(--lime);
  background: #080808;
}
.service-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.service-media {
  position: relative;
  margin: 0;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border-radius: 8px;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(202, 255, 56, .16), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(202, 255, 56, .09), transparent 60%),
    linear-gradient(160deg, #161614 0%, var(--black-soft) 65%, var(--black) 100%);
  border: 1px solid #20201e;
  transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out);
}
.service-media:hover {
  border-color: var(--magenta);
  box-shadow: 0 0 0 1px var(--magenta);
}
.service-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-media-index {
  position: absolute;
  left: 12px;
  bottom: 8px;
  color: #2c2c29;
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: clamp(34px, 2.4vw, 44px);
  font-weight: 600;
  letter-spacing: -.05em;
  line-height: 1;
  user-select: none;
}
.service-media:has(img) .service-media-index { display: none; }
.service-body { display: flex; flex-direction: column; gap: 6px; }
.service-title {
  margin: 0;
  color: var(--white);
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: clamp(15.4px, 1.078vw, 16.5px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.03em;
  text-wrap: balance;
  transition: color 220ms var(--ease-out);
}
.service-lede {
  color: var(--muted-strong);
  font-size: 14.3px;
  font-weight: 300;
  line-height: 1.45;
  text-wrap: pretty;
}
.service-repo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  margin-top: 2px;
  padding-bottom: 1px;
  color: var(--white);
  font-size: 13.75px;
  border-bottom: 1px solid #3a3a36;
  transition: color 200ms var(--ease-out), border-color 200ms var(--ease-out);
}
.service-repo:hover, .service-repo:focus-visible { color: var(--lime); border-color: var(--lime); }
.service-repo:hover .service-repo-arrow, .service-repo:focus-visible .service-repo-arrow { color: var(--lime); }
.service-repo-arrow { font-size: 11px; color: var(--muted); }
/* Emblem tiles: the badge stands alone on the page, no frame, no tile fill; lifts on hover. */
.service-media--badge {
  display: grid;
  place-items: center;
  aspect-ratio: auto;
  overflow: visible;
  padding-block: 12px 18px;
  background: none;
  border-color: transparent;
  box-shadow: none;
}
.service-media--badge:hover { border-color: transparent; box-shadow: none; }
.service-badge {
  width: 64%;
  height: auto;
  display: block;
  border-radius: 50%;
  transform: translateY(0);
  filter: drop-shadow(0 8px 14px rgba(0, 0, 0, .6));
  transition: transform 260ms var(--ease-out), filter 260ms var(--ease-out);
}
.service-badge--placeholder, .service-badge--icon { filter: none; }
.service-media:hover .service-badge--icon { filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .7)); }
.service-media:hover .service-badge--placeholder { filter: drop-shadow(0 18px 20px rgba(0, 0, 0, .7)); }
.service-media:hover .service-badge {
  transform: translateY(-10px) scale(1.04);
  filter: drop-shadow(0 26px 24px rgba(0, 0, 0, .8)) drop-shadow(0 0 18px rgba(202, 255, 56, .28));
}
@media (prefers-reduced-motion: reduce) {
  .service-badge { transition: none; }
}
/* Text centred under the badge on every card. */
.service-card--centered { text-align: center; }
.service-card--centered .service-title,
.service-card--centered .service-lede,
.service-card--centered .service-repo { margin-inline: auto; }
.service-card--centered .service-lede { max-width: 100%; }
@media (prefers-reduced-motion: reduce) {
  .service-media, .service-title, .service-repo { transition: none; }
}
@media (max-width: 1100px) {
  .services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 3.5vw, 40px); row-gap: 36px; }
  .service-title { font-size: 15.4px; }
  .service-lede { font-size: 14.3px; }
}
@media (max-width: 760px) {
  .services-section { padding-block: 44px 36px; }
  .services-grid { grid-template-columns: 1fr; row-gap: 36px; }
  .service-card { gap: 14px; }
  .service-media-index { font-size: 44px; left: 14px; bottom: 8px; }
}


/* References: three equal-height cards on the dark page; card surface lifted one step. */
.ref-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  column-gap: clamp(20px, 2vw, 32px);
  align-items: stretch;
}
.ref-grid::-webkit-scrollbar { display: none; }
.ref-card {
  min-width: 0;
  flex: 0 0 calc((100% - 2 * clamp(20px, 2vw, 32px)) / 3);
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background: #0f0f0e;
  border: 1px solid #20201e;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
.ref-card:hover, .ref-card:focus-within { border-color: #3a3a36; transform: translateY(-4px); }
.ref-media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(202, 255, 56, .12), transparent 60%),
    linear-gradient(160deg, #1a1a18 0%, #121211 100%);
  border-bottom: 1px solid #20201e;
}
.ref-media-label { color: #5a5a54; font-size: 13px; letter-spacing: .04em; }
.ref-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 14px;
  padding: 24px 26px 24px;
}
.ref-title {
  margin: 0;
  min-height: calc(2 * 1.25em);
  color: var(--white);
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: clamp(17px, 1.25vw, 20px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.ref-text {
  margin: 0;
  color: var(--muted-strong);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.55;
  text-wrap: pretty;
}
.ref-more {
  justify-self: start;
  color: var(--muted-strong);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  transition: color 200ms ease;
}
.ref-card:hover .ref-more, .ref-more:hover, .ref-more:focus-visible { color: var(--lime); }
.ref-slider-wrap {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 28px;
  padding-bottom: 8px;
}
.ref-nav-button {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  color: var(--white);
  background: transparent;
  box-shadow: none;
  cursor: pointer;
  transition: transform 200ms ease, opacity 200ms ease;
}
.ref-nav-button span {
  display: block;
  width: 13.5px;
  height: 19.5px;
  background: var(--white);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  transition: background-color 200ms ease;
}
.ref-nav-button--previous span {
  transform: rotate(180deg);
}
.ref-nav-button:hover span,
.ref-nav-button:focus-visible span {
  background: var(--lime);
}
.ref-nav-button:active {
  transform: scale(.92);
}
@media (max-width: 1100px) {
  .ref-card { flex-basis: calc((100% - clamp(20px, 2vw, 32px)) / 2); }
}
@media (prefers-reduced-motion: reduce) {
  .ref-card, .ref-more { transition: none; }
  .ref-card:hover, .ref-card:focus-within { transform: none; }
}
@media (max-width: 760px) {
  .ref-card { flex-basis: 100%; }
  .ref-slider-wrap { margin-top: 22px; }
}


/* Team: photo left, text right, left-aligned column. Quiet hover. */
.team-list {
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  display: grid;
  row-gap: clamp(28px, 3.5vh, 44px);
}
.team-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  column-gap: clamp(32px, 4vw, 64px);
  align-items: center;
  border-radius: 24px;
  outline: none;
}
.team-cta { justify-self: start; white-space: nowrap; }
.team-photo {
  position: relative;
  margin: 0;
  width: 200px;
  height: 200px;
}
.team-photo-frame {
  position: absolute;
  inset: 12px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: linear-gradient(160deg, #161614 0%, #0b0b0b 100%);
  border: 1px solid #3a3a36;
  box-shadow:
    0 18px 40px -18px rgba(202, 255, 56, .45),
    inset 0 1px 0 rgba(255, 255, 255, .06);
  overflow: hidden;
  transition: border-color 220ms var(--ease-out);
}
.team-photo-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 45%);
}
.team-row:hover .team-photo-frame, .team-row:focus-visible .team-photo-frame { border-color: #5a5a54; }
.team-photo-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.team-photo-label { color: #5a5a54; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; }
.team-card {
  min-width: 0;
  padding: 28px 34px;
  border-radius: 20px;
  background: linear-gradient(160deg, #121211 0%, #0c0c0b 100%);
  border: 1px solid #262624;
  box-shadow:
    0 24px 48px -24px rgba(0, 0, 0, .9),
    inset 0 1px 0 rgba(255, 255, 255, .05);
  transition: border-color 220ms var(--ease-out);
}
.team-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.team-linkedin {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--white);
  transition: color 200ms ease;
}
.team-linkedin svg { width: 18px; height: 18px; display: block; }
.team-linkedin:hover, .team-linkedin:focus-visible { color: var(--lime); }
.team-row:hover .team-card, .team-row:focus-visible .team-card { border-color: #3a3a36; }
.team-name {
  margin: 0;
  min-width: 0;
  color: var(--lime);
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: clamp(18px, 1.3vw, 21px);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
}
.team-role {
  margin: 4px 0 12px;
  color: var(--white);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
}
.team-text {
  margin: 0;
  color: var(--muted-strong);
  font-size: 14.5px;
  font-weight: 300;
  line-height: 1.6;
  text-wrap: pretty;
}
@media (max-width: 760px) {
  .team-row { grid-template-columns: 1fr; row-gap: 16px; justify-items: start; }
  .team-cta { width: 100%; justify-content: center; }
  .team-photo { width: 168px; height: 168px; }
  .team-card { padding: 22px 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .team-photo-frame, .team-card, .team-linkedin { transition: none; }
}

.careers-layout {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
  width: 100%;
}
.careers-banner,
.kununu-placeholder {
  min-height: 180px;
  border: 1px solid #262624;
  border-radius: 20px;
  background: linear-gradient(160deg, #121211 0%, #0c0c0b 100%);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.careers-banner {
  display: flex;
  align-items: center;
  padding: 0;
  overflow: hidden;
  grid-column: 1 / 3;
}
.careers-banner-picture,
.careers-banner-image {
  display: block;
  width: 100%;
  height: 100%;
}
.careers-banner-image {
  min-height: 180px;
  object-fit: cover;
  object-position: center;
}
.careers-placeholder,
.kununu-placeholder {
  color: #5a5a54;
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.kununu-placeholder {
  display: grid;
  place-items: center;
  width: 215.1875px;
  min-height: 180px;
  grid-column: 3;
  box-sizing: border-box;
  text-align: center;
  padding: 24px;
}
@media (max-width: 760px) {
  .careers-layout { grid-template-columns: 1fr; gap: 20px; }
  .careers-banner,
  .kununu-placeholder { width: 100%; min-height: 220px; }
  .careers-banner,
  .kununu-placeholder { grid-column: 1; }
  .careers-banner-image { min-height: 220px; object-position: center; }
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: stretch;
  width: auto;
}
.contact-copy {
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.contact-right {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: visible;
}
.contact-logos {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 0;
  margin-top: auto;
  padding-top: 28px;
  width: auto;
  max-width: none;
  box-sizing: border-box;
}
.contact-logo-slot {
  display: grid;
  place-items: center;
  flex: 0 1 132px;
  min-width: 0;
  width: 132px;
  max-width: 132px;
  height: 74px;
  box-sizing: border-box;
  border: 1px solid #262624;
  border-radius: 12px;
  background: linear-gradient(160deg, #121211 0%, #0c0c0b 100%);
  color: #5a5a54;
  font-size: 11px;
  letter-spacing: .02em;
  text-align: center;
  padding: 8px 10px;
}
.contact-logo-slot--lekker {
  flex: 0 0 256px;
  width: 256px;
  max-width: 256px;
  height: 84px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  overflow: visible;
}
.contact-domain-logo {
  display: block;
  width: 100%;
  height: auto;
}
.contact-domain-logo--lekker {
  width: 256px;
  max-width: none;
}
.contact-title {
  margin: 0;
  color: var(--white);
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: clamp(48px, 3.66vw, 58px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.04em;
}
.contact-title-line2 {
  display: block;
}
@media (min-width: 761px) {
  .contact-title-line2 {
    white-space: nowrap;
  }
}
.contact-sub {
  margin: 16px 0 0;
  max-width: 46ch;
  color: var(--muted-strong);
  font-size: clamp(16px, 1.2vw, 19px);
  font-weight: 300;
  line-height: 1.5;
}
.contact-points {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: grid;
  gap: 18px;
}
.contact-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  color: var(--white);
  font-size: 15.5px;
  line-height: 1.45;
}
.contact-tick {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border: 1.5px solid var(--white);
  border-radius: 4px;
  background: none;
  box-sizing: border-box;
  color: var(--white);
  display: grid;
  place-items: center;
}
.contact-tick--on {
  border-color: var(--lime);
  color: var(--lime);
}
.contact-tick--on::before {
  content: "✓";
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
}
.contact-form {
  margin: 0;
  padding: clamp(24px, 3vw, 36px);
  border: 1px solid #262624;
  border-radius: 20px;
  background: linear-gradient(160deg, #121211 0%, #0c0c0b 100%);
  box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .05);
}
.contact-form-title {
  margin: 0 0 10px;
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: clamp(18px, 1.4vw, 22px);
  font-weight: 600;
  letter-spacing: -.03em;
}
.contact-form-intro {
  margin: 0 0 22px;
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}
.contact-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.contact-field,
.contact-services {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
  border: 0;
  padding: 0;
  min-width: 0;
}
.contact-label,
.contact-services legend {
  color: var(--muted-strong);
  font-size: 13px;
  font-weight: 500;
}
.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form textarea {
  width: 100%;
  min-height: 48px;
  padding: 12px 14px;
  border: 1px solid #3a3a36;
  border-radius: 8px;
  background: #080808;
  color: var(--white);
  font: inherit;
  font-size: 15px;
}
.contact-form textarea { min-height: 108px; resize: vertical; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
  border-color: var(--lime);
}
.contact-services {
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  margin-bottom: 18px;
}
.contact-services legend {
  grid-column: 1 / -1;
  margin-bottom: 4px;
}
.contact-services label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  color: var(--white);
}
.contact-services input[type="checkbox"] {
  margin-top: 3px;
  accent-color: var(--lime);
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
}
.contact-submit { margin-top: 8px; }
.contact-note,
.contact-status {
  margin-top: 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
@media (max-width: 900px) {
  .contact-layout { grid-template-columns: 1fr; }
  .contact-logos { margin-top: 28px; width: 100%; max-width: 100%; }
  .contact-logo-slot { flex: 0 1 96px; width: 96px; max-width: 96px; min-width: 0; height: 64px; }
  .contact-logo-slot--lekker { flex: 0 0 158px; width: 158px; max-width: 158px; border: 0; background: none; }
  .contact-domain-logo--lekker { width: 158px; }
  .contact-row, .contact-services { grid-template-columns: 1fr; }
}

.blog-page { padding-block: 24px 96px; }
.blog-hero { max-width: 52rem; }
.blog-kicker {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.blog-hero h1 {
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: clamp(28px, 3.4vw, 48px);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.04em;
  text-wrap: balance;
}
.blog-index {
  list-style: none;
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.blog-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #262624;
  border-radius: 16px;
  background: linear-gradient(160deg, #121211 0%, #0c0c0b 100%);
  min-width: 0;
}
.blog-card-media {
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(202, 255, 56, .16), transparent 60%),
    radial-gradient(90% 80% at 0% 100%, rgba(202, 255, 56, .09), transparent 60%),
    #141413;
  color: #2c2c29;
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: 28px;
  font-weight: 600;
}
.blog-card-body { display: flex; flex-direction: column; gap: 10px; padding: 22px; flex: 1; }
.blog-date {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.blog-card h2 {
  font-family: "Inter Tight", Arial, sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.03em;
}
.blog-lede {
  color: var(--muted-strong);
  font-size: 14px;
  font-weight: 300;
  line-height: 1.5;
}
@media (max-width: 1100px) {
  .blog-index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .blog-index { grid-template-columns: 1fr; }
}

/* After native ended, the video fades and the original poster returns. */
.local-player-video {
  z-index: 1;
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out), visibility 0ms linear 0ms;
}
.local-player-slot.is-ending .local-player-video {
  opacity: 0;
  transform: translateY(12px);
}
@media (prefers-reduced-motion: reduce) {
  .local-player-video {
    transition: opacity 180ms ease, transform 0ms linear, visibility 0ms linear 0ms;
  }
  .local-player-slot.is-ending .local-player-video {
    transform: none;
  }
}

/* Section mark: first magenta pixel meets the logo's first magenta pixel (measured 5.6% of logo width + 1.4px). */
@media screen and (min-width: 1061px) {
  .scroll-section h2.section-heading, .section-divider, #kontakt .contact-layout { margin-left: calc(clamp(142px, 12vw, 178px) * 0.056 + 0.4px); }
}
@media screen and (min-width: 1280px) {
  .scroll-section h2.section-heading, .section-divider, #kontakt .contact-layout { margin-left: calc(clamp(190px, 15vw, 232px) * 0.056 + 0.4px); }
}

/* Footer: dezent, schwarz, Rechtliches mittig in Grau. */
.site-footer {
  background: var(--black);
  padding: clamp(32px, 5vh, 48px) var(--gutter) clamp(36px, 6vh, 56px);
  text-align: center;
}
.site-footer-links { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.site-footer-link {
  text-decoration: none;
  appearance: none; border: 0; padding: 6px 2px; background: none; cursor: pointer;
  color: var(--muted); font-family: Inter, Arial, sans-serif; font-size: 13px; letter-spacing: .01em;
}
.site-footer-link:hover, .site-footer-link:focus-visible { color: var(--white); }
.site-footer-link:focus-visible { outline: 1px solid var(--muted); outline-offset: 3px; border-radius: 2px; }
.site-footer-copy { margin: 14px 0 0; color: #6f6f69; font-family: Inter, Arial, sans-serif; font-size: 12px; }

/* Legal pages: single readable column in the site's type. */
.legal-page { padding-block: clamp(40px, 7vh, 72px) 96px; }
.legal-content { max-width: 46rem; color: var(--muted-strong); font-family: Inter, Arial, sans-serif; font-size: 15px; line-height: 1.65; }
.legal-content h1 { margin: 0 0 clamp(28px, 4vh, 40px); color: var(--white); font-family: "Inter Tight", Arial, sans-serif; font-size: clamp(32px, 3.4vw, 48px); font-weight: 600; line-height: 1.1; letter-spacing: -.04em; }
.legal-content h2 { margin: 36px 0 10px; color: var(--white); font-family: "Inter Tight", Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.3; letter-spacing: -.01em; }
.legal-content p, .legal-content ul { margin: 0 0 14px; }
.legal-content ul { padding-left: 1.2em; }
.legal-content li { margin-bottom: 4px; }
.legal-content a { color: var(--white); text-underline-offset: 3px; }
.legal-content a:hover { color: var(--lime); }
.site-footer-link[aria-current="page"] { color: var(--white); }

/* kununu: white wordmark centred in the widget box. */
.kununu-placeholder { border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; }
.kununu-logo { display: block; width: min(215px, 100%); height: auto; }
@media (max-width: 760px) { .kununu-placeholder { min-height: 0; padding-block: 12px; } }
.kununu-link { display: block; border-radius: 4px; transition: opacity .2s var(--ease-out); }
.kununu-link:hover { opacity: .8; }
.kununu-link:focus-visible { outline: 1px solid var(--muted); outline-offset: 6px; }
@media (prefers-reduced-motion: reduce) { .kununu-link { transition: none; } }


/* Leistungskategorien: klickbare Hochformat-Kacheln */
.service-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  color: inherit;
  text-decoration: none;
  border-radius: 10px;
}
.service-link:focus-visible { outline: 2px solid var(--lime); outline-offset: 6px; }
.service-media--tile {
  width: min(78%, 240px);
  aspect-ratio: 3 / 4;
  transition: border-color 220ms var(--ease-out), box-shadow 220ms var(--ease-out), transform 260ms var(--ease-out);
}
.service-link:hover .service-media--tile,
.service-link:focus-visible .service-media--tile {
  border-color: var(--magenta);
  box-shadow: 0 0 0 1px var(--magenta), 0 22px 40px rgba(0, 0, 0, .55);
  transform: translateY(-6px);
}
.service-link:hover .service-title,
.service-link:focus-visible .service-title { color: var(--magenta); }
@media (max-width: 760px) {
  .service-media--tile { width: min(62%, 220px); }
}
@media (prefers-reduced-motion: reduce) {
  .service-media--tile { transition: none; }
  .service-link:hover .service-media--tile,
  .service-link:focus-visible .service-media--tile { transform: none; }
}

/* Leistungen: Kacheln 50 % länger (1:2); auf dem Desktop füllt der Bereich genau einen Bildschirm unter dem Header. */
.service-media--tile { aspect-ratio: 1 / 2; }
@media (min-width: 1101px) and (min-height: 700px) {
  #leistungen.services-section {
    box-sizing: border-box;
    min-height: calc(100svh - var(--header-height));
    padding-block: 24px clamp(28px, 4vh, 48px);
    scroll-margin-top: var(--header-height);
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  #leistungen .service-body { min-height: 128px; }
  #leistungen .services-grid { flex: 1 1 auto; min-height: 0; align-content: stretch; }
  #leistungen .service-card, #leistungen .service-link { height: 100%; }
  #leistungen .service-link { justify-content: flex-start; }
  #leistungen .service-media--tile {
    aspect-ratio: auto;
    flex: 1 1 auto;
    min-height: 280px;
    max-height: 760px;
  }
}

/* Leistungen 2x2: quadratisches Bild links, Titel und Text rechts; Raster bündig mit Trennstrich und Überschrift. */
#leistungen .services-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(32px, 4vw, 72px);
  row-gap: clamp(32px, 5vh, 56px);
  width: auto;
  flex: none;
  align-content: start;
}
/* Raster bündig mit den Referenzkacheln (Container-Kante), nicht mit dem Trennstrich. */
#leistungen .service-card, #leistungen .service-link { height: auto; }
#leistungen .service-link {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(20px, 2.2vw, 36px);
  text-align: left;
}
#leistungen .service-media--tile {
  flex: 0 0 auto;
  width: clamp(150px, 15vw, 260px);
  height: auto;
  min-height: 0;
  max-height: none;
  aspect-ratio: 1 / 1;
}
#leistungen .service-body { min-height: 0; flex: 1 1 auto; gap: 10px; }
#leistungen .service-title, #leistungen .service-lede { margin-inline: 0; text-align: left; }
#leistungen .service-title { font-size: clamp(17px, 1.3vw, 20px); }
#leistungen .service-lede { max-width: 42ch; }
@media (min-width: 1101px) and (min-height: 700px) {
  /* Bild so groß, dass beide Reihen samt Titel auf einen Bildschirm passen. */
  #leistungen .service-media--tile { width: clamp(150px, min(15vw, calc((100svh - var(--header-height) - 330px) / 2)), 260px); }
}
@media (max-width: 760px) {
  #leistungen .services-grid { grid-template-columns: 1fr; row-gap: 28px; }
  #leistungen .service-link { gap: 18px; }
  #leistungen .service-media--tile { width: 112px; }
}
@media (prefers-reduced-motion: reduce) {
  #leistungen .service-link:hover .service-media--tile { transform: none; }
}

/* Leistungen: größere Bilder, Titel mittig im oberen Bilddrittel, Stichpunkte statt Fließtext. */
#leistungen .service-link {
  --svc-img: clamp(150px, 18vw, 320px);
  align-items: flex-start;
}
@media (min-width: 1101px) and (min-height: 700px) {
  #leistungen .service-link { --svc-img: clamp(150px, min(18vw, calc((100svh - var(--header-height) - 260px) / 2)), 320px); }
}
@media (max-width: 760px) {
  #leistungen .service-link { --svc-img: 112px; }
}
#leistungen .service-media--tile { width: var(--svc-img); }
#leistungen .service-title { line-height: 1.2; margin-top: max(0px, calc(var(--svc-img) / 6 - 0.6em)); }
#leistungen .service-body { gap: 12px; }
.service-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
  color: var(--muted-strong);
  font-size: 14.3px;
  font-weight: 300;
  line-height: 1.4;
}
.service-points li { position: relative; padding-left: 16px; }
.service-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .62em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background: var(--magenta);
}

/* Leistungen: Hover dezent wie bei den Referenzen, Titel limette, Stichpunkte weiß mit grauem Marker. */
#leistungen .service-title { color: var(--lime); }
#leistungen .service-points { color: var(--white); }
#leistungen .service-points li::before { background: var(--white); }
#leistungen .service-media--tile {
  transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out);
}
#leistungen .service-link:hover .service-media--tile,
#leistungen .service-link:focus-visible .service-media--tile {
  border-color: #3a3a36;
  box-shadow: none;
  transform: translateY(-4px);
}
#leistungen .service-link:hover .service-title,
#leistungen .service-link:focus-visible .service-title { color: var(--lime); }
@media (prefers-reduced-motion: reduce) {
  #leistungen .service-media--tile { transition: none; }
  #leistungen .service-link:hover .service-media--tile,
  #leistungen .service-link:focus-visible .service-media--tile { transform: none; }
}

/* Leistungen: Bildrahmen mit demselben Effekt wie die Teamfotos (Magenta-Schein unten, Lichtkante oben). */
#leistungen .service-media--tile {
  border-radius: 16px;
  background: linear-gradient(160deg, #161614 0%, #0b0b0b 100%);
  border: 1px solid #3a3a36;
  box-shadow:
    0 18px 40px -18px rgba(202, 255, 56, .45),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}
#leistungen .service-media--tile::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(255, 255, 255, .05), transparent 45%);
}
#leistungen .service-link:hover .service-media--tile,
#leistungen .service-link:focus-visible .service-media--tile {
  border-color: #5a5a54;
  box-shadow:
    0 18px 40px -18px rgba(202, 255, 56, .45),
    inset 0 1px 0 rgba(255, 255, 255, .06);
}



/* Leistungen: Bilder im Querformat 4:3 (Höhe wie bisher, Breite +33 %), Text rückt entsprechend nach rechts. */
#leistungen .service-media--tile {
  width: calc(var(--svc-img) * 4 / 3);
  height: var(--svc-img);
  aspect-ratio: 4 / 3;
}
@media (max-width: 760px) {
  #leistungen .service-link { --svc-img: 96px; }
}

/* Leistungen: Bilder und Platzhalter im Format 3:2 (Höhe wie bisher). */
#leistungen .service-media--tile {
  width: calc(var(--svc-img) * 3 / 2);
  height: var(--svc-img);
  aspect-ratio: 3 / 2;
}

/* Leistungen: Bilder 15 % kleiner, Format 3:2 bleibt; Titel bleibt in der Mitte des oberen Bilddrittels. */
#leistungen .service-media--tile {
  width: calc(var(--svc-img) * .85 * 3 / 2);
  height: calc(var(--svc-img) * .85);
}
#leistungen .service-title { margin-top: max(0px, calc(var(--svc-img) * .85 / 6 - 0.6em)); }

/* Leistungen: Kurztext statt Stichpunkte. */
#leistungen .service-desc {
  margin: 0;
  max-width: 44ch;
  color: var(--white);
  font-size: 14.3px;
  font-weight: 300;
  line-height: 1.5;
  text-wrap: pretty;
}

/* Leistungen: Titel weiß statt Limette. */
#leistungen .service-title,
#leistungen .service-link:hover .service-title,
#leistungen .service-link:focus-visible .service-title { color: var(--white); }

/* Leistungen: Kurztext im Fließtext-Grau wie Hero und Referenzen. */
#leistungen .service-desc { color: var(--muted-strong); }

/* Leistungen: lange Titel bleiben zweizeilig und passen in die Textspalte. */
#leistungen .service-body { container-type: inline-size; }
#leistungen .service-title { font-size: clamp(14px, min(1.3vw, 7.3cqi), 20px); }
@media (max-width: 760px) { #leistungen .service-title { font-size: 15px; } }

/* Leistungen: Raster füllt die Bildschirmhöhe, untere Reihe sitzt unten, der Reihenabstand wächst mit. */
@media (min-width: 1101px) and (min-height: 700px) {
  #leistungen .services-grid { row-gap: clamp(56px, 12vh, 130px); }
}
/* Desktop: Bilder etwas größer (Faktor .92 statt .85), 3:2 bleibt. */
@media (min-width: 1101px) and (min-height: 700px) {
  #leistungen .service-media--tile { width: calc(var(--svc-img) * .92 * 3 / 2); height: calc(var(--svc-img) * .92); }
  #leistungen .service-title { margin-top: max(0px, calc(var(--svc-img) * .92 / 6 - 0.6em)); }
}

/* Leistungen: nicht klickbar, Texte nicht markierbar, Bilder nicht ziehbar; kein Hover-Anheben mehr, da keine Verlinkung. */
#leistungen .service-link { cursor: default; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
#leistungen .service-media--tile img { pointer-events: none; -webkit-user-drag: none; user-select: none; }
#leistungen .service-link:hover .service-media--tile,
#leistungen .service-link:focus-visible .service-media--tile { transform: none; border-color: #3a3a36; }

/* Kontakt: Satz über den Secondary-Domain-Logos, linksbündig mit den Checkboxen. */
.contact-logos-label {
  margin: auto 0 0;
  padding-top: 28px;
  color: var(--muted-strong);
  font-size: 15.5px;
  line-height: 1.45;
}
.contact-logos-label + .contact-logos { margin-top: 48px; padding-top: 0; }
@media (max-width: 760px) { .contact-logos-label + .contact-logos { margin-top: 32px; } }

/* Kontakt: Satz und Logos gemeinsam höher; Mindestabstand zur Checkliste. */
.contact-logos-label { padding-top: 36px; }
@media (min-width: 1400px) {
  .contact-logos-label + .contact-logos { margin-bottom: calc(clamp(32px, 7vh, 72px) - 1.45 * 15.5px); }
}

/* Kontakt: „Sie finden uns auch auf:“ weiß und fett. */
.contact-logos-label { color: var(--white); font-weight: 700; }

/* Kontakt: Slots 1 und 3 vorerst leer und ohne Rahmen; KRITIS-Audit-Logo 5 px höher und verlinkt. */
.contact-logo-slot--empty { border: 0; background: none; padding: 0; }
.contact-logo-link { display: block; transform: translate(var(--kritis-dx, 4px), -10px); border-radius: 6px; transition: opacity 180ms var(--ease-out); }
.contact-logo-link:hover { opacity: .8; }
.contact-logo-link:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }
@media (prefers-reduced-motion: reduce) { .contact-logo-link { transition: none; } }

/* Karriere-Banner: Klick öffnet das E-Mail-Programm (mailto an manuel@lekkercode.com). */
.careers-banner-link { display: block; border-radius: inherit; transition: opacity 180ms var(--ease-out); }
.careers-banner-link:hover { opacity: .9; }
.careers-banner-link:focus-visible { outline: 2px solid var(--lime); outline-offset: 4px; }

/* ===== KRITIS-Audit: Ergänzungen zum Lekker-Code-Gerüst ===== */
.accent-brush {
  position: relative;
  display: inline-block;
  color: var(--black);
  padding: 0 .14em;
  margin: 0 -.04em;
  z-index: 0;
}
.accent-brush::before {
  content: "";
  position: absolute;
  inset: .12em -.06em .02em -.08em;
  z-index: -1;
  background: var(--lime);
  border-radius: .18em .42em .22em .5em / .5em .22em .46em .2em;
  transform: rotate(-1.2deg) skewX(-6deg);
}
.hero-service { margin: 18px 0 0; color: var(--muted); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.hero-cta { margin-top: 26px; display: inline-flex; }
.kr-text { margin: 0; color: var(--muted-strong); font-size: 16px; font-weight: 300; line-height: 1.6; max-width: 62ch; text-wrap: pretty; }
.kr-intro { margin-bottom: clamp(24px, 4vh, 40px); }
.kr-lede { margin: 0 0 32px; color: var(--white); font-size: clamp(17px, 1.4vw, 20px); font-weight: 300; line-height: 1.55; max-width: 58ch; }
.kr-label { margin: 0 0 14px; color: var(--muted); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.kr-subhead { margin: 0 0 14px; color: var(--white); font-family: "Inter Tight", Arial, sans-serif; font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -.02em; }
.kr-split { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(32px, 5vw, 80px); margin-top: clamp(28px, 4vh, 44px); }
.kr-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.kr-chip { padding: 9px 14px; border: 1px solid #2a2a27; border-radius: 999px; color: var(--muted-strong); font-size: 14px; line-height: 1.2; background: #0f0f0e; transition: border-color 200ms var(--ease-out), color 200ms var(--ease-out); }
.kr-chip:hover { border-color: var(--lime); color: var(--white); }
.kr-reqs { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 14px; }
.kr-req { display: grid; grid-template-columns: 44px 1fr; column-gap: 14px; padding: 18px 20px; border: 1px solid #20201e; border-radius: 8px; background: #0f0f0e; }
.kr-req-no { grid-row: span 2; color: var(--lime); font-family: "Inter Tight", Arial, sans-serif; font-size: 22px; font-weight: 600; line-height: 1.1; }
.kr-req-title { margin: 0 0 4px; color: var(--white); font-size: 16px; font-weight: 600; }
.kr-req-text { margin: 0; color: var(--muted-strong); font-size: 14.5px; font-weight: 300; line-height: 1.5; }

.kr-duties { list-style: none; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, 1fr); gap: clamp(16px, 1.6vw, 24px); }
.kr-duty { grid-column: span 2; display: flex; flex-direction: column; gap: 12px; padding: 26px 26px 24px; border: 1px solid #20201e; border-radius: 8px; background: #0f0f0e; transition: border-color 220ms var(--ease-out), transform 220ms var(--ease-out); }
.kr-duty:nth-child(4), .kr-duty:nth-child(5) { grid-column: span 3; }
.kr-duty:hover, .kr-duty:focus-within { border-color: #3a3a36; transform: translateY(-4px); }
.kr-duty-no { color: var(--lime); font-family: "Inter Tight", Arial, sans-serif; font-size: 15px; font-weight: 600; letter-spacing: .04em; }
.kr-duty-title { margin: 0; color: var(--white); font-family: "Inter Tight", Arial, sans-serif; font-size: clamp(18px, 1.35vw, 21px); font-weight: 600; line-height: 1.25; letter-spacing: -.01em; }
.kr-duty-text { margin: 0; color: var(--muted-strong); font-size: 14.5px; font-weight: 300; line-height: 1.55; flex: 1 1 auto; }
.kr-links { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 4px; }
.kr-link { color: var(--white); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid transparent; transition: color 200ms ease, border-color 200ms ease; }
.kr-link:hover, .kr-link:focus-visible { color: var(--lime); border-bottom-color: var(--lime); }

.kr-steps { list-style: none; margin: clamp(28px, 4vh, 44px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); counter-reset: step; }
.kr-step { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 26px 0 0; border-top: 2px solid #2a2a27; }
.kr-step::before { content: ""; position: absolute; top: -7px; left: 0; width: 12px; height: 12px; border-radius: 50%; background: var(--black); border: 2px solid var(--lime); }
.kr-step[data-step="1"]::before { background: var(--lime); }
.kr-step-no { margin: 0; color: var(--lime); font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.kr-step-title { margin: 0; color: var(--white); font-family: "Inter Tight", Arial, sans-serif; font-size: 18px; font-weight: 600; line-height: 1.25; }
.kr-step-text { margin: 0; color: var(--muted-strong); font-size: 14px; font-weight: 300; line-height: 1.55; }
.kr-tags { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.kr-tags li { padding: 5px 9px; border-radius: 4px; background: #161614; color: var(--muted-strong); font-size: 12px; line-height: 1.3; }

.kr-cases-head { margin: clamp(56px, 8vh, 88px) 0 clamp(24px, 3vh, 32px); }
.kr-case-tag { color: var(--lime); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-align: center; padding: 0 20px; }
button.ref-more { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; font-family: inherit; }
button.ref-more:hover, button.ref-more:focus-visible { color: var(--lime); }
#placeholder-dialog #dialog-body { white-space: pre-line; }

.kr-faq-layout { display: grid; grid-template-columns: 1fr 2fr; gap: clamp(32px, 5vw, 80px); margin-top: clamp(28px, 4vh, 44px); align-items: start; }
.kr-faq-side { display: flex; flex-direction: column; gap: 24px; align-items: flex-start; }
.kr-faq-list { border-top: 1px solid #20201e; }
.kr-faq-item { border-bottom: 1px solid #20201e; }
.kr-faq-q { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 4px; cursor: pointer; color: var(--white); font-family: "Inter Tight", Arial, sans-serif; font-size: clamp(17px, 1.3vw, 20px); font-weight: 600; }
.kr-faq-q::-webkit-details-marker { display: none; }
.kr-faq-q:hover { color: var(--lime); }
.kr-faq-q:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 4px; }
.kr-faq-icon { position: relative; flex: 0 0 18px; width: 18px; height: 18px; }
.kr-faq-icon::before, .kr-faq-icon::after { content: ""; position: absolute; left: 0; top: 8px; width: 18px; height: 2px; background: currentColor; transition: transform 200ms var(--ease-out); }
.kr-faq-icon::after { transform: rotate(90deg); }
.kr-faq-item[open] .kr-faq-icon::after { transform: rotate(0deg); }
.kr-faq-a { margin: 0; padding: 0 4px 22px; color: var(--muted-strong); font-size: 15px; font-weight: 300; line-height: 1.6; max-width: 70ch; }

.contact-intro { margin: 18px 0 8px; }
.kr-services-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.kr-services-field legend { padding: 0; margin-bottom: 10px; }
.kr-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kr-check { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 10px 12px; border: 1px solid #2a2a27; border-radius: 8px; color: var(--muted-strong); font-size: 14px; cursor: pointer; }
.kr-check input { width: 16px; height: 16px; accent-color: var(--lime); margin: 0; }
.kr-check:has(input:checked) { border-color: var(--lime); color: var(--white); }
.contact-domain-logo--lekker { width: 132px; height: auto; display: block; }

@media (max-width: 1060px) {
  .kr-split, .kr-faq-layout { grid-template-columns: 1fr; }
  .kr-duties { grid-template-columns: 1fr 1fr; }
  .kr-duty, .kr-duty:nth-child(4), .kr-duty:nth-child(5) { grid-column: span 1; }
  .kr-duty:nth-child(5) { grid-column: span 2; }
  .kr-steps { grid-template-columns: 1fr 1fr; row-gap: 32px; }
}
@media (max-width: 640px) {
  .kr-duties, .kr-steps, .kr-checks { grid-template-columns: 1fr; }
  .kr-duty:nth-child(5) { grid-column: span 1; }
  .kr-steps { gap: 0; }
  .kr-step { padding: 0 0 28px 26px; border-top: 0; border-left: 2px solid #2a2a27; }
  .kr-step::before { top: 0; left: -7px; }
}
@media (prefers-reduced-motion: reduce) {
  .kr-duty, .kr-chip, .kr-faq-icon::after { transition: none; }
  .kr-duty:hover, .kr-duty:focus-within { transform: none; }
}
.accent-brush { white-space: nowrap; }
@media (max-width: 640px) {
  #contact-title { font-size: clamp(30px, 9vw, 36px); }
}
.kr-split > *, .kr-faq-layout > *, .kr-duty, .kr-step { min-width: 0; }
.kr-chip { overflow-wrap: anywhere; }
.kr-req { grid-template-columns: 36px minmax(0, 1fr); }
.kr-req-text, .kr-req-title { overflow-wrap: anywhere; }
@media (max-width: 360px) {
  #contact-title { font-size: 26px; }
  .contact-copy, .contact-title { min-width: 0; }
}