/*!
Theme Name: JUNIQUE Design V3
URI: https://junique.design
Author: Junias Fenske
Author URI: https://junique.design
*/
@layer reset, tokens, base, layout, components, pages, utilities;
@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
  * {
    margin: 0;
    padding: 0;
  }
  html {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
         text-size-adjust: none;
  }
  body {
    min-block-size: 100dvh;
  }
  img,
  picture,
  video,
  canvas,
  svg {
    display: block;
    max-inline-size: 100%;
    block-size: auto;
  }
  input,
  button,
  textarea,
  select {
    font: inherit;
    color: inherit;
  }
  :target {
    scroll-margin-block: 5ex;
  }
  @media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
      animation-duration: 0.01ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}
@layer tokens {
  :root {
    color-scheme: light dark;
    --color-bg: light-dark(rgb(254, 248, 235), rgb(2, 5, 14));
    --color-surface: light-dark(#fff, rgb(4, 12, 33));
    --color-text: light-dark(rgb(5, 15, 40), rgb(254, 248, 235));
    --color-text-muted: light-dark(rgb(80, 87, 105), rgb(165, 161, 153));
    --color-border: light-dark(rgb(225, 226, 229), rgb(80, 87, 105));
    --color-accent: light-dark(rgb(214, 255, 66), rgb(237, 255, 172));
    --color-accent-hover: light-dark(rgb(139, 166, 43), rgb(244, 255, 206));
    --color-on-accent: light-dark(#fff, rgb(2, 5, 14));
    --color-focus: light-dark(rgb(214, 255, 66), rgb(237, 255, 172));
    --font-body: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Junique', 'Source Sans 3', system-ui, sans-serif;
    --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-bold: 700;
    --leading-tight: 1.15;
    --leading-snug: 1.3;
    --leading-normal: 1.6;
    --step--2: clamp(0.694rem, 0.679rem + 0.068vw, 0.76rem);
    --step--1: clamp(0.833rem, 0.806rem + 0.121vw, 0.95rem);
    --step-0: clamp(1rem, 0.956rem + 0.195vw, 1.188rem);
    --step-1: clamp(1.2rem, 1.134rem + 0.295vw, 1.484rem);
    --step-2: clamp(1.44rem, 1.343rem + 0.432vw, 1.855rem);
    --step-3: clamp(1.728rem, 1.59rem + 0.614vw, 2.319rem);
    --step-4: clamp(2.074rem, 1.881rem + 0.858vw, 2.899rem);
    --step-5: clamp(2.488rem, 2.223rem + 1.18vw, 3.624rem);
    --space-3xs: clamp(0.25rem, 0.239rem + 0.049vw, 0.297rem);
    --space-2xs: clamp(0.5rem, 0.478rem + 0.097vw, 0.594rem);
    --space-xs: clamp(0.75rem, 0.717rem + 0.146vw, 0.891rem);
    --space-s: clamp(1rem, 0.956rem + 0.195vw, 1.188rem);
    --space-m: clamp(1.5rem, 1.434rem + 0.292vw, 1.781rem);
    --space-l: clamp(2rem, 1.912rem + 0.39vw, 2.375rem);
    --space-xl: clamp(3rem, 2.869rem + 0.584vw, 3.563rem);
    --space-2xl: clamp(4rem, 3.825rem + 0.779vw, 4.75rem);
    --space-3xl: clamp(6rem, 5.737rem + 1.169vw, 7.125rem);
    --container-narrow: 42rem;
    --container-default: 72rem;
    --container-wide: 90rem;
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 1rem;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(21, 40, 58, 0.12);
    --shadow-md: 0 4px 12px rgba(21, 40, 58, 0.12);
    --shadow-lg: 0 12px 32px rgba(21, 40, 58, 0.12);
    --duration-fast: 150ms;
    --duration-base: 250ms;
    --duration-slow: 400ms;
    --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
    --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
    --gutter: clamp(1rem, 0.649rem + 1.558vw, 2.5rem);
  }
  :root[data-theme=light] {
    color-scheme: light;
  }
  :root[data-theme=dark] {
    color-scheme: dark;
  }
}
@layer base {
  html {
    scroll-behavior: smooth;
    hanging-punctuation: first last;
  }
  body {
    background: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    font-size: var(--step-0);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
  }
  ::-moz-selection {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }
  ::selection {
    background: var(--color-accent);
    color: var(--color-on-accent);
  }
  :focus-visible {
    outline: 2px solid var(--color-focus);
    outline-offset: 3px;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
    line-height: var(--leading-tight);
    text-wrap: balance;
  }
  h1 {
    font-size: var(--step-5);
  }
  h2 {
    font-size: var(--step-3);
  }
  h3 {
    font-size: var(--step-1);
    line-height: var(--leading-snug);
  }
  h4 {
    font-size: var(--step-0);
  }
  p,
  li {
    text-wrap: pretty;
  }
  a {
    color: var(--color-accent);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--duration-fast) var(--ease-out);
  }
  a:hover {
    color: var(--color-accent-hover);
  }
  code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.1em 0.35em;
    border-radius: var(--radius-sm);
    background: var(--color-surface);
  }
}
@layer layout {
  .container {
    --_max: var(--container-default);
    inline-size: 100%;
    max-inline-size: calc(var(--_max) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--narrow {
    --_max: var(--container-narrow);
  }
  .container--wide {
    --_max: var(--container-wide);
  }
  .flow > * + * {
    margin-block-start: var(--flow-space, 1em);
  }
  .auto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(var(--grid-min, 16rem), 100%), 1fr));
    gap: var(--grid-gap, var(--space-m));
    padding: 0;
    list-style: none;
  }
  .cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--cluster-gap, var(--space-s));
  }
}
@layer components {
  .button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-xs) var(--space-m);
    border: 2px solid var(--color-accent);
    border-radius: var(--radius-pill);
    background: var(--color-accent);
    color: var(--color-on-accent);
    font-weight: var(--weight-bold);
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
  }
  .button:hover {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    color: var(--color-on-accent);
  }
  .button--secondary {
    background: transparent;
    color: var(--color-accent);
  }
  .button--secondary:hover {
    background: transparent;
    color: var(--color-accent-hover);
  }
  .card {
    padding: var(--space-m);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--duration-base) var(--ease-out);
  }
  .card:has(a:hover) {
    box-shadow: var(--shadow-md);
  }
  .card p {
    color: var(--color-text-muted);
  }
}
@layer pages {
  .hero {
    padding-block: var(--space-3xl) var(--space-2xl);
  }
  .hero > p:first-of-type {
    max-inline-size: 60ch;
    font-size: var(--step-1);
    color: var(--color-text-muted);
  }
  .leistungen {
    padding-block: var(--space-2xl);
  }
  .error-404 {
    padding-block: var(--space-3xl);
  }
}
@layer utilities {
  .visually-hidden {
    position: absolute !important;
    inline-size: 1px;
    block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .text-muted {
    color: var(--color-text-muted);
  }
  .text-center {
    text-align: center;
  }
}