/* ==========================================================================
   Components
   Reihenfolge: Nav → Hero → Marquee → Skill-Pills → Portfolio → Work → About → Chat
   Breakpoint Mobile/Desktop: 48em (768 px)
   ========================================================================== */

/* ---------- Key-Badge (Tastenkürzel-Optik) ---------- */

.key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: var(--space-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  color: var(--color-text-muted);
  font: 400 1rem/1 var(--font-pixel);
  text-transform: uppercase;
}

.key--dark {
  background: var(--color-ink);
  border-color: var(--color-border-dark);
  color: var(--color-white);
}

/* ---------- Navigation ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  block-size: var(--nav-h);
  padding-inline: var(--page-pad);
  background: var(--color-white);
}

.nav__desktop,
.nav__desktop-end {
  display: none;
}

.nav__toggle {
  padding: var(--space-4);
}

.nav__menu {
  position: absolute;
  top: 100%;
  right: var(--page-pad);
  display: flex;
  flex-direction: column;
  gap: var(--space-12);
  padding: var(--space-16);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.nav__menu[hidden] {
  display: none;
}

.nav__menu a,
.nav__menu button {
  color: var(--color-text-muted);
  font: 600 var(--fs-body) / 1.5 var(--font-display);
  text-align: left;
  text-decoration: none;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-8);
  padding: 0.625rem;
  color: var(--color-text-muted);
  font: 600 var(--fs-body) / 1 var(--font-display);
  text-decoration: none;
  white-space: nowrap;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.nav-link:hover {
  opacity: 0.7;
}

.nav-link--strong {
  color: var(--color-ink);
}

@media (min-width: 48em) {
  .nav {
    justify-content: space-between;
    background: var(--color-nav-bg);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  .nav__desktop {
    display: flex;
    align-items: center;
    gap: var(--space-12);
  }

  .nav__desktop li:first-child .nav-link {
    padding-inline-start: 0;
  }

  .nav__desktop-end {
    display: block;
  }

  .nav__toggle,
  .nav__menu {
    display: none;
  }
}

/* ---------- Marquee (nur Mobile) ---------- */

.marquee {
  overflow: hidden;
  background: var(--color-white);
}

.marquee__track {
  display: flex;
  inline-size: max-content;
}

.marquee__group {
  display: flex;
  flex-shrink: 0;
}

.js .marquee__track {
  animation: marquee var(--dur-marquee) linear infinite;
}

@keyframes marquee {
  to {
    transform: translateX(-50%);
  }
}

@media (min-width: 48em) {
  .marquee {
    display: none;
  }
}

/* ---------- Pill (Skill-Label) ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.375rem 1.125rem;
  border-radius: var(--radius-pill);
  background: var(--pill-bg);
  color: var(--color-white);
  font: 600 var(--fs-pill-marquee) / 1.2 var(--font-display);
  text-transform: uppercase;
  white-space: nowrap;
}

.pill--black {
  --pill-bg: var(--color-black);
}

.pill--red {
  --pill-bg: var(--color-accent-red);
}

.pill--blue {
  --pill-bg: var(--color-accent-blue);
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  gap: var(--space-24);
  padding: 2rem var(--page-pad) var(--space-52);
}

.intro {
  font: 700 var(--fs-hero) / 1.2 var(--font-display);
  font-variation-settings: "GRAD" 0, "ROND" 0, "wdth" 100;
  text-wrap: balance;
}

.intro__line {
  display: block;
}

.px {
  font-family: var(--font-pixel);
  font-weight: 600;
}

.hero__art img {
  inline-size: 100%;
  block-size: auto;
  aspect-ratio: 1;
  object-fit: contain;
}

.skills {
  display: none;
}

@media (min-width: 48em) {
  .hero {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-44);
    align-items: center;
    min-height: max(37.5rem, calc(100svh - var(--nav-h)));
    padding-block: var(--space-52);
  }

  .hero__art {
    order: -1;
    min-width: 0;
  }

  .hero__art img {
    max-block-size: calc(100svh - var(--nav-h) - 6.5rem);
    margin-inline: auto;
  }

  .hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--space-44);
    min-width: 0;
  }

  /* Pills passen sich der Spaltenbreite an (cqi = Prozent der Container-Breite) */
  .skills {
    display: flex;
    flex-direction: column;
    align-items: center;
    container-type: inline-size;
  }

  /* Schriftgröße sitzt am li, damit Überlapp (em) und Pill gemeinsam skalieren */
  .skills li {
    margin-block-end: -0.12em;
    font-size: clamp(1.25rem, 7.4cqi, 2.875rem);
    transform: rotate(var(--rot)) translateY(calc(var(--scroll-y, 0) * var(--speed) * -1px));
    will-change: transform;
  }

  .skills li:last-child {
    margin-block-end: 0;
  }

  .skills .pill {
    padding: 0.17em 0.52em;
    font-size: 1em;
  }

  /* Winkel wie im Figma-Entwurf (Figma zählt gegen, CSS mit dem Uhrzeigersinn).
     Später im HTML = weiter vorne (blau über rot über schwarz). */
  .skills li:nth-child(1) {
    --rot: 3.88deg;
    --speed: 0.04;
  }

  .skills li:nth-child(2) {
    --rot: -8.97deg;
    --speed: 0.06;
    margin-block-end: 1.1em; /* Abstand rot → blau wie im Entwurf (≈ 1,7 Pill-Höhen) */
  }

  .skills li:nth-child(3) {
    --rot: 7deg;
    --speed: 0.08;
  }
}

/* ---------- Platzhalterfläche für Bilder ---------- */

.placeholder {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-s);
}

/* ---------- Portfolio-Streifen ---------- */

.strip {
  display: flex;
  align-items: stretch;
  gap: var(--space-16);
  block-size: 13.75rem;
  padding: var(--space-52) var(--space-24);
}

.strip__item {
  flex: 1;
  min-width: 0;
}

.strip__item--peek {
  display: block;
  flex: 0 0 6.25rem;
}

.strip__item--hide-mobile {
  display: none;
}

@media (min-width: 48em) {
  .strip {
    gap: var(--space-44);
    block-size: 26.75rem;
    padding: 6.25rem 0;
  }

  .strip__item--hide-mobile {
    display: block;
  }

  .strip__item--peek {
    flex-basis: 8.125rem;
  }
}

/* ---------- Sektionen ---------- */

.section-title {
  padding: var(--space-52) var(--page-pad);
  font: 700 var(--fs-h2) / 1.2 var(--font-display);
}

.section-title--about {
  padding-block: 5rem var(--space-52);
}

@media (min-width: 48em) {
  .section-title--about {
    padding-block-start: 8.75rem;
  }
}

/* ---------- Work-Liste ---------- */

.work-item {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "text chevron"
    "tags chevron";
  align-items: center;
  column-gap: var(--space-44);
  padding: var(--space-16) var(--page-pad);
  background: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  transition: background-color var(--dur-fast) var(--ease-out);
}

.work-item:hover {
  background: var(--color-border);
}

.work-item__text {
  grid-area: text;
  min-width: 0;
}

.work-item__company {
  color: var(--color-text-subtle);
  font: 700 var(--fs-work-company) / 1.2 var(--font-display);
}

.work-item__title {
  color: var(--color-black);
  font: 700 var(--fs-work-title) / 1.2 var(--font-display);
}

.work-item__chevron {
  grid-area: chevron;
  font: 600 1.5rem/1 var(--font-pixel);
}

.tags {
  grid-area: tags;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-block-start: var(--space-8);
}

.tag {
  padding: var(--space-4) var(--space-12);
  background: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: var(--radius-s);
  color: var(--color-black);
  font: 400 1rem/1.5 var(--font-pixel);
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 48em) {
  .work-item {
    grid-template-columns: 1fr auto auto;
    grid-template-areas: "text tags chevron";
    padding-block: var(--space-52);
  }

  .tags {
    margin-block-start: 0;
  }
}

/* ---------- About ---------- */

.about__art {
  margin-inline: var(--page-pad);
  margin-block-end: var(--space-52);
  block-size: clamp(18.75rem, 52.75vw, 39.5625rem);
}

/* ---------- Scroll-Reveal ---------- */

.reveal-ready .reveal {
  opacity: 0;
  transform: translateY(2rem);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}

.reveal-ready .reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ---------- Button ---------- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4) var(--space-12);
  background: var(--color-black);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-s);
  color: var(--color-white);
  font: 400 1rem/1.5 var(--font-pixel);
  text-transform: uppercase;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.button:hover {
  opacity: 0.8;
}

.section-action {
  display: flex;
  justify-content: center;
  padding: var(--space-24) var(--page-pad);
}

/* ---------- Chat-Schublade (<dialog>) ----------
   Öffnen und Schließen laufen über Übergänge (transition). `allow-discrete` lässt den
   Browser das Schließen (display: none) erst nach dem Übergang ausführen. */

.drawer {
  position: fixed;
  inset: auto 0 0 0;
  inline-size: 100%;
  max-inline-size: none;
  block-size: 80dvh;
  max-block-size: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sheet) var(--radius-sheet) 0 0;
  background: var(--color-ink);
  color: var(--color-white);
  transform: translateY(100%);
  transition:
    transform var(--dur-base) var(--ease-out),
    overlay var(--dur-base) allow-discrete,
    display var(--dur-base) allow-discrete;
}

.drawer[open] {
  display: flex;
  flex-direction: column;
  transform: none;
}

@starting-style {
  .drawer[open] {
    transform: translateY(100%);
  }
}

.drawer::backdrop {
  background: rgb(0 0 0 / 0);
  transition:
    background-color var(--dur-base) var(--ease-out),
    overlay var(--dur-base) allow-discrete,
    display var(--dur-base) allow-discrete;
}

.drawer[open]::backdrop {
  background: var(--color-scrim);
}

@starting-style {
  .drawer[open]::backdrop {
    background: rgb(0 0 0 / 0);
  }
}

.drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-24);
}

.drawer__title {
  font: 700 1.5rem/1.2 var(--font-display);
}

.drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 2rem;
  block-size: 2rem;
  transition: opacity var(--dur-fast) var(--ease-out);
}

.drawer__close:hover {
  opacity: 0.7;
}

.drawer__close:focus-visible {
  outline-color: var(--color-white);
}

.drawer__body {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-24);
  color: var(--color-text-muted);
  font-weight: 600;
  text-align: center;
}

@media (min-width: 48em) {
  .drawer {
    inset: 0 0 0 auto;
    inline-size: 75vw;
    block-size: 100dvh;
    border-radius: 0;
    transform: translateX(100%);
  }

  @starting-style {
    .drawer[open] {
      transform: translateX(100%);
    }
  }
}