/* ============================================
   luukri. — Kopf- und Fußzeile (Design-Handoff „Startseite v2")
   Gilt global. Die Tokens hier sind bewusst lokal gehalten, damit die
   dunkle Leiste unabhängig von style.css funktioniert.
   ============================================ */

:root{
  --lk-ink:#0B1321;
  --lk-ink-deep:#070D18;
  --lk-text:#E5E7EB;
  --lk-blue:#0066FF;
  --lk-blue-lite:#4D94FF;
  --lk-line:rgba(75,85,99,.5);
}

.lk-dot{color:var(--lk-blue)}
.lk-logo{fill:#FFFFFF;flex:none}

/* Primärer Button — von der Startseite und allen dunklen Unterseiten genutzt */
.lk-btn{
  display:inline-flex;align-items:center;gap:10px;background:var(--lk-blue);color:#FFFFFF;
  font-size:16px;font-weight:600;text-decoration:none;padding:16px 32px;border-radius:9px;
  transition:background .2s,box-shadow .2s,transform .2s;
}
.lk-btn:hover{background:#1A75FF;box-shadow:0 0 32px rgba(0,102,255,.5);transform:translateY(-1px);color:#FFFFFF}
.lk-btn--lg{padding:17px 34px}
.lk-btn--lg:hover{box-shadow:0 0 36px rgba(0,102,255,.55)}

/* ── Kopfzeile ────────────────────────────────────── */
.lk-nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(11,19,33,.78);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(0,102,255,.22);
  box-shadow:0 1px 18px rgba(0,102,255,.08);
  transition:box-shadow .3s ease;
}
.lk-nav.is-scrolled{box-shadow:0 1px 28px rgba(0,102,255,.18)}
.lk-nav__inner{
  max-width:1240px;margin:0 auto;padding:0 32px;height:76px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
  transition:height .3s ease;
}
.lk-nav.is-scrolled .lk-nav__inner{height:60px}

.lk-nav__brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;
  font-size:23px;font-weight:600;color:#FFFFFF;letter-spacing:-.5px}
.lk-nav__brand .lk-logo{width:21px;height:29px}

.lk-nav__links{display:flex;align-items:center;gap:32px}
.lk-nav__link{
  font-size:15px;font-weight:500;color:rgba(229,231,235,.72);text-decoration:none;
  padding:6px 2px;border-bottom:2px solid transparent;
  transition:color .2s,border-color .2s,text-shadow .2s;
}
.lk-nav__link:hover{color:#FFFFFF}
.lk-nav__link.is-active{color:#FFFFFF;border-bottom-color:var(--lk-blue);text-shadow:0 0 14px rgba(0,102,255,.6)}
.lk-nav__cta{
  font-size:15px;font-weight:600;color:#FFFFFF;text-decoration:none;
  background:var(--lk-blue);padding:11px 22px;border-radius:9px;
  transition:background .2s,box-shadow .2s,transform .2s;
}
.lk-nav__cta:hover{background:#1A75FF;box-shadow:0 0 26px rgba(0,102,255,.45);transform:translateY(-1px)}

/* Aufklapp-Menü „Preise" (Webdesign / Software) */
.lk-nav__drop{position:relative;display:inline-flex;align-items:center}
.lk-nav__caret{font-size:11px;opacity:.75;margin-left:2px;display:inline-block;
  transition:transform .2s}
.lk-nav__drop:hover .lk-nav__caret{transform:rotate(180deg)}
.lk-nav__menu{position:absolute;top:100%;left:50%;transform:translate(-50%,8px);
  min-width:250px;display:flex;flex-direction:column;gap:2px;padding:8px;margin-top:8px;
  background:rgba(11,19,33,.98);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(0,102,255,.22);border-radius:12px;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.75);
  opacity:0;visibility:hidden;transition:opacity .2s,transform .2s,visibility .2s;z-index:20}
.lk-nav__drop:hover .lk-nav__menu,.lk-nav__drop:focus-within .lk-nav__menu{
  opacity:1;visibility:visible;transform:translate(-50%,0)}
.lk-nav__menu a{display:flex;flex-direction:column;gap:3px;padding:11px 14px;border-radius:8px;
  text-decoration:none;color:rgba(229,231,235,.85);border-bottom:none}
.lk-nav__menu a span{font-size:15px;font-weight:600;color:#FFFFFF}
.lk-nav__menu a small{font-size:12.5px;color:rgba(229,231,235,.5)}
.lk-nav__menu a:hover{background:rgba(0,102,255,.14)}

@media(max-width:860px){
  .lk-nav__drop{flex-direction:column;align-items:stretch;width:100%}
  .lk-nav__menu{position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;margin:4px 0 0;padding:2px 0 6px 14px;background:transparent;border:none;
    box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}
  .lk-nav__menu a{padding:10px 0}
  .lk-nav__menu a span{font-size:16px}
  .lk-nav__caret{display:none}
}

.lk-nav__toggle{
  display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--lk-line);border-radius:9px;
  color:#FFFFFF;font-size:18px;cursor:pointer;
}

@media(max-width:860px){
  .lk-nav__toggle{display:flex}
  .lk-nav__links{
    display:none;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:4px;
    padding:12px 32px 24px;border-top:1px solid rgba(75,85,99,.3);
    background:rgba(11,19,33,.97);
  }
  .lk-nav__links.is-open{display:flex}
  .lk-nav__link{font-size:17px;color:var(--lk-text);padding:12px 0;border-bottom:none}
  .lk-nav__cta{margin-top:12px;text-align:center;padding:14px 22px;font-size:16px}
}

/* Inhalt darf nicht unter der fixierten Leiste verschwinden.
   Die Startseite bringt ihren eigenen Vollbild-Hero mit und braucht das nicht. */
body:not(.home) main,
body:not(.home) .pd{padding-top:76px}

/* ── Fußzeile ─────────────────────────────────────── */
.lk-footer{
  position:relative;z-index:1;
  background:var(--lk-ink-deep);color:var(--lk-text);
  border-top:1px solid rgba(255,255,255,.06);
  padding:56px 32px 40px;
}
.lk-footer__inner{max-width:1240px;margin:0 auto}
.lk-footer__top{display:flex;justify-content:space-between;gap:48px;flex-wrap:wrap}
.lk-footer__brand{max-width:320px}
.lk-footer__logo{display:inline-flex;align-items:center;gap:11px;
  font-size:20px;font-weight:600;color:#FFFFFF;letter-spacing:-.5px}
.lk-footer__logo .lk-logo{width:18px;height:25px}
.lk-footer__brand p{margin:14px 0 0;font-size:14px;line-height:22px;color:rgba(229,231,235,.45)}

.lk-footer__cols{display:flex;gap:72px;flex-wrap:wrap}
.lk-footer__col{display:flex;flex-direction:column;gap:12px}
.lk-footer__heading{font-size:12px;font-weight:600;letter-spacing:1.5px;
  color:rgba(229,231,235,.35);text-transform:uppercase}
.lk-footer__col a,.lk-footer__col span:not(.lk-footer__heading){
  font-size:14px;color:rgba(229,231,235,.65);text-decoration:none}
.lk-footer__col a:hover{color:#FFFFFF}

.lk-footer__bottom{
  margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.06);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:rgba(229,231,235,.35);
}