@layer base, layout, motion;

@font-face {
  font-family: "Spezia Serif Condensed";
  src: url("assets/fonts/SpeziaSerifCondensedWeb-RegularC.woff2") format("woff2");
  font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
  --yellow: #f2fd72;
  --ink: #000;
  --paper: #fff;

  /* Fluid von 375px bis 1580px (Figma-Breite). rem + vw gemischt,
     damit die Werte beim Browser-Zoom mitwachsen (WCAG 1.4.4) */
  --pad: clamp(1.25rem, .94rem + 1.33vw, 2.25rem);       /* 20 → 36px */
  --text-l: clamp(1.75rem, 1.5rem + 1.013vw, 2.5rem);     /* 28 → 40px */
  --text-m: clamp(1.125rem, .96rem + .8vw, 1.75rem);      /* 18 → 28px */
  --text-s: clamp(1rem, .925rem + .33vw, 1.25rem);        /* 16 → 20px */

  --ease: cubic-bezier(.65, 0, .25, 1);
  color-scheme: light;
}

/* ---------- Base ---------- */
@layer base {
  *, ::before, ::after { box-sizing: border-box; margin: 0; }

  body {
    min-block-size: 100svh;
    font: var(--text-m) / 1.4 "Spezia Serif Condensed", Georgia, serif;
    letter-spacing: -0.03em;
    color: var(--ink);
    background: var(--paper);
    font-synthesis: none;
    -webkit-font-smoothing: antialiased;
  }

  h1, h2, h3 { font: inherit; }
  address { font-style: normal; }
  img { display: block; max-inline-size: 100%; block-size: auto; }

  a {
    color: inherit;
    /* .049em = Unterstrich-Stärke aus dem Font; als Länge statt from-font, damit animierbar */
    text-decoration: underline currentColor .049em;
    text-underline-position: from-font;
    text-decoration-skip-ink: none;
    transition: text-decoration-color .15s, text-decoration-thickness .15s;

    &:is(:hover, :focus-visible) {
      text-decoration-color: currentColor;
      text-decoration-thickness: .08em;
    }
  }

  :focus-visible {
    outline: 2px solid currentColor;
    outline-offset: .2em;
  }

  .visually-hidden {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Layout ---------- */
@layer layout {
  /* Startseite (Figma Frame 45) */
  .home {
    display: grid;
    grid-template: "intro" auto "main" 1fr "footer" auto / 1fr;
    font-size: var(--text-l);
    isolation: isolate;

    @media (width >= 48rem) {
      grid-template:
        "intro  main" auto
        ".      main" 1fr
        "footer main" auto / 1fr 1fr;
    }

    /* Text bündig an Versalhöhe (oben) bzw. Grundlinie (unten) beschneiden,
       damit der Abstand zum Rand optisch dem seitlichen Abstand entspricht */
    > header { text-box: trim-start cap alphabetic; }
    > main p { text-box: trim-both cap alphabetic; }
    > footer > * { text-box: trim-end cap alphabetic; }

    > header {
      grid-area: intro;
      padding: var(--pad) var(--pad) 0;

      > p { margin-block-start: .75lh; text-align: end; }
    }

    > main {
      grid-area: main;
      display: grid;
      place-items: center;
      padding: var(--pad);
      text-align: center;
    }

    > footer {
      grid-area: footer;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: last baseline;
      gap: .25lh 1em;
      padding: 0 var(--pad) var(--pad);

      /* Telefon + Impressum: Unterstreichung unsichtbar, blendet bei Hover/Fokus ein */
      & a:is([href^="tel:"], :last-child):not(:hover, :focus-visible) {
        text-decoration-color: transparent;
      }

      > a {
        font-size: var(--text-s);
        text-transform: uppercase;
      }
    }
  }

  /* Gelbe linke Hälfte mit zwei Kreisen (Figma Ellipse 3 + 4) */
  .orbs {
    grid-area: 1 / 1 / -1 / 2;
    z-index: -1;
    position: relative;
    overflow: clip;
    background: var(--yellow);
    container-type: size;

    /* Kreis-Durchmesser: 582 / 790.5 der Panelbreite, bei flachen Panels begrenzt */
    --d: min(73.62cqi, 58cqb);

    &::before, &::after {
      content: "";
      position: absolute;
      inset: 0 auto auto 0;
      inline-size: calc(var(--d) * 904 / 790); /* SVG enthält Blur-Rand */
      aspect-ratio: 1;
      background: url("assets/orb.svg") center / contain no-repeat;

      /* Kreismittelpunkt läuft auf einem Rechteck, das (relativ zum Durchmesser)
         so eingerückt ist, dass die Ecken oben links und unten rechts genau den
         Kreis-Positionen aus Figma entsprechen. Der Kreisrand streift dabei am Rand
         der Hälfte entlang. Pfad startet oben links (0 %), unten rechts = 50 %. */
      offset-path: inset(
        calc(var(--d) * .4831)
        calc(var(--d) * .4794)
        calc(var(--d) * .4981)
        calc(var(--d) * .5039)
      );
      offset-rotate: 0deg;
      will-change: transform;
    }
  }

  /* Impressum (Figma Frame 46) */
  /* X oben rechts, außerhalb des Textflusses: Größe ändert die Textposition nicht */
  .topbar {
    position: absolute;
    inset-block-start: var(--pad);
    inset-inline-end: var(--pad);
  }

  .close {
    display: block;
    padding: .5rem;   /* größere Klickfläche … */
    margin: -.5rem;   /* … ohne die Position zu verschieben */

    > img { inline-size: var(--text-l); } /* so groß wie die Hauptschrift: 28 → 40px */
  }

  .legal {
    display: grid;
    gap: 1lh calc(var(--pad) * 2);
    /* oben: Rand + X-Icon + 1,5 × Rand Luft bis zur Versalhöhe;
       unten: Grundlinie so weit vom Rand wie seitlich */
    padding: calc(var(--pad) * 2.5 + var(--text-l)) var(--pad) var(--pad);

    /* Oben an Versalhöhe, unten an Grundlinie beschneiden (wie auf der Startseite) */
    & > section:first-of-type { text-box: trim-start cap alphabetic; }
    & > section:last-of-type  { text-box: trim-end cap alphabetic; }

    @media (width >= 48rem) {
      grid-template-columns: 1fr 1fr;

      /* zweispaltig: auch die rechte Spalte oben bündig */
      & > section:last-of-type { text-box-trim: trim-both; }
    }

    & h2 { text-transform: uppercase; }
    & dt { letter-spacing: .4em; }

    /* Leerzeile nach jedem Textblock, nicht aber nach Überschriften */
    & :is(p, dd, dl, address) + * { margin-block-start: 1lh; }
  }
}

/* ---------- Motion ---------- */
@layer motion {
  .orbs {
    &::before, &::after { animation: orbit 60s linear infinite; }
    &::after { animation-delay: -30s; } /* gegenüberliegend, wie im Design */
  }

  @keyframes orbit { to { offset-distance: 100%; } }

  @media (prefers-reduced-motion: reduce) {
    .orbs::before, .orbs::after { animation-play-state: paused; }
    a { transition: none; }
  }

  /* Seitenübergänge zwischen Startseite und Impressum (cross-document) */
  @media (prefers-reduced-motion: no-preference) {
    @view-transition { navigation: auto; }
  }

  .orbs  { view-transition-name: panel; }
  .legal { view-transition-name: sheet; }

  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation-duration: .7s;
    animation-timing-function: var(--ease);
  }

  /* Gelbe Hälfte gleitet nach links hinaus bzw. wieder herein */
  ::view-transition-new(panel) { animation-name: slide-x; }
  ::view-transition-old(panel) { animation-name: slide-x; animation-direction: reverse; }

  /* Impressum schiebt sich von unten herein bzw. wieder hinaus */
  ::view-transition-new(sheet) { animation-name: slide-y; }
  ::view-transition-old(sheet) { animation-name: slide-y; animation-direction: reverse; }

  @keyframes slide-x { from { translate: -100% 0; } }
  @keyframes slide-y { from { translate: 0 100vh; opacity: 0; } }
}