/* =====================================================================
   layout.css  –  Gerüst-Elemente
   ---------------------------------------------------------------------
   Preloader, Custom-Cursor, Header/Navigation, Footer, Seiten-Übergang.
   Diese Elemente sind auf JEDER Seite identisch.
   ===================================================================== */

/* ---- Preloader ----------------------------------------------------- */
.preloader {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--gruen-nacht);
  display: grid; place-items: center;
  transition: clip-path 1s var(--ease-io);
  clip-path: inset(0 0 0 0);
}
.preloader.done { clip-path: inset(0 0 100% 0); pointer-events: none; }
.preloader__inner { text-align: center; }
.preloader__count {
  font-family: var(--font-display);
  font-size: clamp(4rem, 18vw, 14rem);
  color: var(--creme);
  line-height: 1;
  letter-spacing: -0.02em;
}
.preloader__label {
  font-size: var(--fs-small); letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gelb); margin-top: 1rem;
}
.preloader__bar { height: 2px; width: min(60vw, 360px); margin: 1.4rem auto 0; background: var(--line); overflow: hidden; }
.preloader__bar i { display: block; height: 100%; width: 0%; background: var(--gelb); transition: width 0.2s linear; }

/* body bleibt bis zum Preloader-Ende gesperrt */
body.is-loading { overflow: hidden; height: 100vh; }

/* ---- Custom Cursor (Desktop, Zeigegeräte mit Hover) ---------------- */
.cursor, .cursor-dot { display: none; }
@media (hover: hover) and (pointer: fine) {
  .cursor {
    position: fixed; top: 0; left: 0; z-index: 9000;
    width: 42px; height: 42px; border: 1px solid var(--creme);
    border-radius: 50%; pointer-events: none;
    transform: translate(-50%, -50%);
    transition: width .3s var(--ease-out), height .3s var(--ease-out),
                background .3s var(--ease-out), opacity .3s;
    mix-blend-mode: difference;
    display: block;
  }
  .cursor-dot {
    position: fixed; top: 0; left: 0; z-index: 9001;
    width: 6px; height: 6px; border-radius: 50%; background: var(--creme);
    pointer-events: none; transform: translate(-50%, -50%);
    mix-blend-mode: difference; display: block;
  }
  .cursor.is-hover { width: 76px; height: 76px; background: var(--creme); }
  .cursor.is-hidden { opacity: 0; }
  /* echten Cursor ausblenden, wenn Custom-Cursor aktiv */
  body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; }
}

/* ---- Header / Navigation ------------------------------------------ */
.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 800;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.3rem var(--gutter);
  transition: transform .5s var(--ease-out), background .4s ease, backdrop-filter .4s ease;
  mix-blend-mode: normal;
}
.header.is-scrolled {
  background: color-mix(in srgb, var(--gruen-nacht) 80%, transparent);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.header.is-hidden { transform: translateY(-110%); }  /* versteckt beim Runterscrollen */

.brand { display: inline-flex; align-items: center; gap: 0.7rem; font-family: var(--font-display); font-size: 1.4rem; letter-spacing: 0.02em; }
.brand__mark {
  width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--gelb); color: var(--gruen-nacht); font-size: 1.1rem;
}

/* Haupt-Navigation */
.nav {
  position: absolute; left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.6rem);
}
.nav__link {
  position: relative; font-size: var(--fs-small); letter-spacing: 0.14em; text-transform: uppercase;
  padding: 0.4rem 0; color: var(--creme); opacity: 0.82; transition: opacity .3s;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: -2px; height: 1px; width: 0;
  background: var(--gelb); transition: width .4s var(--ease-out);
}
.nav__link:hover { opacity: 1; }
.nav__link:hover::after, .nav__link.is-active::after { width: 100%; }
.nav__link.is-active { opacity: 1; color: var(--gelb); }

/* Start-Link: Pille / hervorgehoben */
.nav__link--home {
  color: var(--gelb) !important; opacity: 1 !important;
  border: 1px solid color-mix(in srgb, var(--gelb) 45%, transparent);
  border-radius: 100px; padding: 0.32rem 1rem !important;
  transition: background .3s, opacity .3s;
}
.nav__link--home::after { display: none; }
.nav__link--home:hover { background: color-mix(in srgb, var(--gelb) 12%, transparent); }

/* Dienstleistung-Link: fließender Gemini-Gradient + Glow */
@keyframes geminiFlow {
  0%   { background-position: 0% center; }
  100% { background-position: 300% center; }
}
.nav__link--cta {
  background: linear-gradient(90deg, #5b9cff, #c4d8ff, #ffffff, #c4d8ff, #5b9cff);
  background-size: 300% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  opacity: 1 !important;
  animation: geminiFlow 5s linear infinite;
  filter: drop-shadow(0 0 8px rgba(91, 156, 255, 0.55));
}
.nav__link--cta::after { background: #5b9cff; }
.nav__link--cta:hover { filter: drop-shadow(0 0 14px rgba(91, 156, 255, 0.8)); }

/* Burger (mobil) */
.nav-toggle { display: none; width: 44px; height: 44px; position: relative; z-index: 810; }
.nav-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--creme); transition: transform .4s var(--ease-out), opacity .3s; }
.nav-toggle span:nth-child(1) { top: 16px; }
.nav-toggle span:nth-child(2) { bottom: 16px; }
body.nav-open .nav-toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.nav-open .nav-toggle span:nth-child(2) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav {
    position: fixed; inset: 0; left: 0; transform: none; z-index: 805;
    flex-direction: column; justify-content: center; gap: 1.4rem;
    background: var(--gruen-nacht);
    clip-path: circle(0% at calc(100% - 3rem) 3rem);
    transition: clip-path .7s var(--ease-io);
    pointer-events: none;
  }
  body.nav-open .nav { clip-path: circle(150% at calc(100% - 3rem) 3rem); pointer-events: auto; }
  .nav__link { font-size: 1.5rem; }
}

/* ---- Seiten-Übergang: einfaches Fade-to-Dark ---------------------- */
.page-transition {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--gruen-nacht);
  opacity: 0; pointer-events: none;
  transition: opacity 0.38s ease;
}
.page-transition.cover { opacity: 1; pointer-events: auto; }

/* ---- Footer -------------------------------------------------------- */
.footer { background: var(--bg-2); border-top: 1px solid var(--line); padding-block: clamp(3.5rem, 8vh, 6rem) 2.5rem; }
.footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer__big { font-family: var(--font-display); font-size: clamp(2rem, 6vw, 4rem); line-height: 0.95; text-transform: uppercase; }
.footer__col h4 { font-family: var(--font-body); font-size: var(--fs-small); letter-spacing: 0.2em; text-transform: uppercase; color: var(--gelb); margin-bottom: 1.1rem; }
.footer__col a, .footer__col p { color: var(--creme-dim); display: block; padding: 0.25rem 0; transition: color .3s; }
.footer__col a:hover { color: var(--creme); }
.footer__bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: var(--fs-small); color: var(--creme-dim); }

@media (max-width: 820px) {
  .footer__grid { grid-template-columns: 1fr; }
}