@import url("https://fonts.bunny.net/css?family=jura:300,500");

@layer base, demo;

/* ======================= */
/*     DEMO / LAYOUT       */
/* ======================= */
@layer demo {
  :root {
    /* Brand-Farben */
    --nav-bg-color: rgb(61 32 88);            /* #3d2058 */
    --nav-bg-color-scroll: rgb(61 32 88 / .85);
    --nav-target-color: #ffce04;
    --nav-link-border-color-hover: #ffce04;
    --nav-link-color: #ffce04;
    --nav-y-scroll: 20px;          /* Abstand vom Top bei Scroll */
    --nav-blur-scroll: 10px;       /* Blur im Sticky-Zustand */
  }

  html {
    container-type: scroll-state;
    container-name: scroller;
    scroll-behavior: smooth;
  }

  p {
    line-height: 1.6;
  }

  ::target-text {
    background-color: #3d2058;
    color: #ffce04;
  }

  nav,
  section,
  h1 {
    width: min(100% - 4rem, 900px);
    margin: 0 auto;
  }

  h1 {
    margin-block-start: 2rem;
    font-size: 1.4rem;
    text-wrap: balance;
  }

  nav {
    position: sticky;
    top: 0;
    width: 100%;
    background: var(--nav-bg-color);
    transition-property: width, translate;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;

    anchor-name: --target-active;
    scroll-target-group: auto;

    /* Zustand, wenn nach oben gescrollt werden kann (quasi "stuck") */
    @container scroller scroll-state(scrollable: top) {
      width: min(80%, 760px);
      translate: 0 var(--nav-y-scroll);
      border-radius: 999px;
      background-color: var(--nav-bg-color-scroll);
      backdrop-filter: blur(var(--nav-blur-scroll));
      box-shadow: 0 18px 45px rgba(0, 0, 0, 0.6);
    }

    /* Nur wenn :target-current & anchor positioning unterstützt werden */
    @supports selector(:target-current) {
      &::before,
      &::after {
        content: "";
        position: absolute;
        transition: all 150ms ease-in-out;
        inset: anchor(top) anchor(right) anchor(bottom) anchor(left);
        border-radius: inherit;
        z-index: -1;
      }

      /* Active target indicator (leichtes gelbes Glühen) */
      &::before {
        background: var(--nav-target-color);
        position-anchor: --target-active;
        opacity: 0.14;
      }

      /* Hover indicator (nur Rahmen, kein BG) */
      &::after {
        --offset: -1px;
        @container scroller scroll-state(scroll: stuck) {
          --offset: 0;
        }
        position-anchor: --link-hover;
        inset:
          calc(anchor(top) + var(--offset))
          calc(anchor(right) + var(--offset))
          calc(anchor(bottom) + var(--offset))
          calc(anchor(left) + var(--offset));
        border: 1px dotted var(--nav-link-border);
        z-index: -2;
      }
    }

    menu {
      list-style: none;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.6rem;
      margin: 0;
      padding: 0.75rem 1rem;
      transition: justify-content 300ms ease-in-out;
      anchor-name: --link-hover;
    }

    /* Brand-Item im Menü (Logo + Name) */
    .brand-item {
      margin-right: 1.5rem;
    }

    .brand-link {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none;
      color: var(--nav-link-color);
      padding: 0.4em 0.7em;
      border-radius: 999px;
      font-weight: 500;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      /* Logo-Link bleibt neutral: kein Hintergrund, kein Hover-Effekt */
    }

    .brand-logo {
      width: 26px;
      height: 26px;
      border-radius: 0;          /* keine Extra-Form mehr */
      object-fit: contain;
      background: none;          /* Hintergrund entfernt */
      box-shadow: none;          /* Shadow entfernt */
    }

    .brand-name {
      font-weight: 700;
    }

    /* GENERISCHE NAV-LINKS (nicht Brand) */
    a {
      text-decoration: none;
      color: var(--nav-link-color);
      font-size: clamp(0.85rem, 1.5vw + 0.045rem, 1rem);
      padding: 0.5em 1.1em;
      transition-property: background-color, color, border-color, transform, box-shadow;
      transition-duration: 150ms;
      transition-timing-function: ease-in-out;
      border: 1px dotted transparent;
      text-wrap: nowrap;
      border-radius: 999px;
      position: relative;
    }

    /* Nur auf echte Navi-Links anwenden, nicht auf Brand-Link */
    li:not(.brand-item) > a:where(:hover, :focus-visible) {
      anchor-name: --link-hover;
      /* KEIN gelber Hintergrund mehr */
      color: #ffffff;
      border-color: var(--nav-link-border-color-hover);
      transform: translateY(-1px);
      box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5);
    }

    /* :target-current (nur Rahmen/Glow, kein Hintergrund) */
    li:not(.brand-item) > a:target-current {
      anchor-name: --target-active;
      color: #ffffff;
      font-weight: 500;
      border-color: var(--nav-link-border-color-hover);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.55);
    }

    /* JS-Fallback-Klasse für aktive Links (kein Background) */
    li:not(.brand-item) > a.is-current {
      color: #ffffff;
      font-weight: 500;
      border-color: var(--nav-link-border-color-hover);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.55);
    }

    /* Brand-Link explizit ohne Hover-Effekt lassen */
    .brand-link:where(:hover, :focus-visible) {
      background: none;
      color: var(--nav-link-color);
      border-color: transparent;
      transform: none;
      box-shadow: none;
    }

    @container scroller scroll-state(scroll: stuck) {
      a {
        border-radius: 999px;
      }
    }
  }

  /* Link nach oben */
  .back-to-top {
    position: fixed;
    bottom: 1rem;
    right: 1rem;
    width: 42px;
    aspect-ratio: 1;
    display: grid;
    place-content: center;

    border-radius: 50%;
    background-color: #ffce04;
    font-size: 1.2rem;
    color: #3d2058;
    text-decoration: none;
    translate: 80px 0;
    transition-property: translate, background-color, color, box-shadow;
    transition-duration: 150ms;
    transition-timing-function: ease-in-out;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
  }

  .back-to-top:where(:hover, :focus-visible) {
    background: #3d2058;
    color: #ffce04;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.6);
  }

  @container scroller scroll-state(scrollable: top) {
    .back-to-top {
      translate: 0 0;
    }
  }
}

/* ======================= */
/*   BASE / GENERELLES     */
/* ======================= */
@layer base {
  * {
    box-sizing: border-box;
  }

  :root {
    color-scheme: dark;
    --bg-dark: rgb(16, 7, 24);
    --bg-light: rgb(250, 248, 241);
    --txt-light: rgb(10, 10, 10);
    --txt-dark: rgb(245, 245, 245);
    --line-light: rgba(0 0 0 / 0.25);
    --line-dark: rgba(255 255 255 / 0.25);

    --clr-bg: var(--bg-dark);
    --clr-txt: var(--txt-dark);
    --clr-lines: var(--line-dark);
  }

  body {
    background:
      radial-gradient(circle at top, #4e2b72 0%, #12081d 52%, #07030c 100%);
    color: var(--clr-txt);
    min-height: 100svh;
    margin: 0;
    padding: 1.5rem 0 3rem;
    font-family: "Jura", system-ui, -apple-system, BlinkMacSystemFont,
      "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.5;
  }

  h1 {
    margin: 0;
    font-size: 1.4rem;
    color: #ffce04;
  }

  h2 {
    margin-block: 2.5rem 0.75rem;
    font-size: 1.25rem;
    color: #ffce04;
  }

  h3 {
    margin-block: 1.75rem 0.5rem;
    font-size: 1.05rem;
    color: #facc15;
  }

  section {
    padding-block: 1.5rem 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  section:last-of-type {
    border-bottom: none;
  }

  p {
    margin-block: 0.6rem 0.4rem;
    color: rgba(249, 250, 251, 0.9);
  }

  /* Hinweis-Fallback, falls :target-current nicht unterstützt wird */
  @supports not selector(:target-current) {
    body::before {
      content: "Hinweis: Dein Browser unterstützt :target-current nicht – aktive Links werden per JavaScript hervorgehoben.";
      position: fixed;
      bottom: 1rem;
      left: 50%;
      translate: -50% 0;
      font-size: 0.75rem;
      padding: 0.4rem 0.7rem;
      background-color: #b91c1c;
      color: #f9fafb;
      border-radius: 999px;
      z-index: 10;
      pointer-events: none;
      opacity: 0.9;
    }
  }
}