@layer reset, tokens, base, components;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
}

@layer tokens {
  :root {
    /* Calm slate / soft teal — light */
    --farbe-canvas: oklch(0.97 0.008 250);
    --farbe-flaeche: oklch(1 0 0);
    --farbe-karte: oklch(0.99 0.004 250);
    --farbe-kopf: oklch(0.38 0.035 250);
    --farbe-text: oklch(0.28 0.02 250);
    --farbe-text-gedaempft: oklch(0.45 0.02 250);
    --farbe-text-auf-kopf: oklch(0.97 0.008 250);
    --farbe-akzent: oklch(0.48 0.07 230);
    --farbe-akzent-text: oklch(0.99 0.005 230);
    --farbe-ok: oklch(0.92 0.04 155);
    --farbe-ok-text: oklch(0.28 0.04 155);
    --farbe-fehler: oklch(0.5 0.16 25);
    --farbe-eingabe: oklch(0.99 0.004 250);
    --farbe-eingabe-text: oklch(0.28 0.02 250);
    --farbe-platzhalter: oklch(0.55 0.02 250);
    --farbe-upload-rand: oklch(0.62 0.08 75);
    --farbe-rahmen: oklch(0.88 0.01 250);
    --farbe-ueberlagerung: color-mix(in oklch, var(--farbe-text) 8%, transparent);
    --farbe-theme: oklch(0.38 0.035 250);

    --s-1: 0.25rem;
    --s-2: 0.5rem;
    --s-3: 1rem;
    --s-4: 1.5rem;
    --s-5: 2rem;
    --s-6: 3rem;

    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;

    --schrift: system-ui, -apple-system, "Segoe UI", sans-serif;
    --schrift-mono: ui-monospace, "Cascadia Code", "SF Mono", monospace;
    --schrift-koerper: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
    --schrift-lead: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
    --schrift-titel: clamp(1.65rem, 1.35rem + 1.2vw, 2rem);
    --schrift-abschnitt: clamp(1.125rem, 1.05rem + 0.4vw, 1.3rem);
    --schrift-klein: 0.875rem;
    --zeilenhoehe: 1.55;
    --mass: 42rem;
    --ziel-min: 2.75rem;
  }

  @media (prefers-color-scheme: dark) {
    :root {
      --farbe-canvas: oklch(0.2 0.02 250);
      --farbe-flaeche: oklch(0.26 0.02 250);
      --farbe-karte: oklch(0.28 0.02 250);
      --farbe-kopf: oklch(0.24 0.03 250);
      --farbe-text: oklch(0.93 0.01 250);
      --farbe-text-gedaempft: oklch(0.75 0.015 250);
      --farbe-text-auf-kopf: oklch(0.93 0.01 250);
      --farbe-akzent: oklch(0.72 0.08 230);
      --farbe-akzent-text: oklch(0.2 0.03 230);
      --farbe-ok: oklch(0.35 0.06 155);
      --farbe-ok-text: oklch(0.92 0.03 155);
      --farbe-fehler: oklch(0.72 0.14 25);
      --farbe-eingabe: oklch(0.24 0.02 250);
      --farbe-eingabe-text: oklch(0.93 0.01 250);
      --farbe-platzhalter: oklch(0.65 0.015 250);
      --farbe-upload-rand: oklch(0.72 0.1 85);
      --farbe-rahmen: oklch(0.35 0.02 250);
      --farbe-ueberlagerung: color-mix(in oklch, var(--farbe-text) 10%, transparent);
      --farbe-theme: oklch(0.24 0.03 250);
    }
  }
}

@layer base {
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation: none !important;
      transition: none !important;
    }
  }

  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  html {
    color-scheme: light dark;
    background: var(--farbe-canvas);
  }

  body {
    min-block-size: 100dvb;
    display: flex;
    flex-direction: column;
    font-family: var(--schrift);
    font-size: var(--schrift-koerper);
    line-height: var(--zeilenhoehe);
    background: var(--farbe-canvas);
    color: var(--farbe-text);
  }

  a { color: inherit; }

  :focus-visible {
    outline: 2px solid var(--farbe-akzent);
    outline-offset: 3px;
  }

  .sprunglink {
    position: absolute;
    inset-inline-start: var(--s-3);
    inset-block-start: -10rem;
    z-index: 10;
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    padding: var(--s-2) var(--s-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--farbe-rahmen);
    font-weight: 600;
    text-decoration: none;
  }

  .sprunglink:focus-visible { inset-block-start: var(--s-3); }

  .rahmen {
    max-inline-size: var(--mass);
    margin-inline: auto;
    padding-inline: var(--s-3);
  }

  main#inhalt {
    flex: 1 0 auto;
    max-inline-size: var(--mass);
    margin-inline: auto;
    padding-inline: var(--s-3);
    padding-block: var(--s-4) var(--s-5);
    display: grid;
    gap: var(--s-4);
    align-content: start;
    inline-size: 100%;
  }
}

@layer components {
  .seitenkopf {
    background: var(--farbe-kopf);
    color: var(--farbe-text-auf-kopf);
    border-block-end: 1px solid color-mix(in oklch, var(--farbe-text-auf-kopf) 12%, transparent);
  }

  .seitenkopf-innen {
    max-inline-size: var(--mass);
    margin-inline: auto;
    padding-inline: var(--s-3);
    padding-block: var(--s-4) var(--s-5);
    display: grid;
    gap: var(--s-3);
  }

  .marke {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 650;
    font-size: var(--schrift-lead);
    color: var(--farbe-text-auf-kopf);
    text-decoration: none;
    width: fit-content;
  }

  .marke img {
    inline-size: 2.75rem;
    block-size: 2.75rem;
  }

  .intro {
    display: grid;
    gap: var(--s-2);
    font-size: var(--schrift-lead);
    color: color-mix(in oklch, var(--farbe-text-auf-kopf) 88%, transparent);
    max-inline-size: 36rem;
  }

  .intro strong { color: var(--farbe-text-auf-kopf); }

  .seitenfuss {
    margin-block-start: auto;
    border-block-start: 1px solid var(--farbe-rahmen);
    background: var(--farbe-flaeche);
    color: var(--farbe-text-gedaempft);
  }

  .seitenfuss-innen {
    max-inline-size: var(--mass);
    margin-inline: auto;
    padding-inline: var(--s-3);
    padding-block: var(--s-3) var(--s-4);
    font-size: var(--schrift-klein);
  }

  .bereich {
    display: grid;
    gap: var(--s-3);
    align-content: start;
  }

  .bereich h1 {
    font-size: var(--schrift-titel);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--farbe-text);
    line-height: 1.2;
  }

  .bereich h2 {
    font-size: var(--schrift-abschnitt);
    font-weight: 650;
    color: var(--farbe-text);
    margin-block-end: var(--s-1);
  }

  .bereich > p {
    color: var(--farbe-text-gedaempft);
    max-inline-size: 36rem;
  }

  .form-nav,
  .upload-nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--s-2);
  }

  .form-nav {
    margin-block: var(--s-2) var(--s-3);
  }

  .form-nav a,
  .upload-nav a {
    display: inline-flex;
    align-items: center;
    min-block-size: var(--ziel-min);
    padding-inline: var(--s-3);
    padding-block: var(--s-1);
    border-radius: 999px;
    text-decoration: none;
    color: var(--farbe-text);
    border: 1px solid var(--farbe-rahmen);
    background: var(--farbe-flaeche);
    font-weight: 500;
  }

  .form-nav a:hover,
  .upload-nav a:hover {
    background: var(--farbe-ueberlagerung);
  }

  .upload-nav a[aria-current="page"],
  .form-nav a[aria-current="page"] {
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
    border-color: transparent;
    font-weight: 600;
  }

  .form-block {
    margin-block: var(--s-4);
    padding-block-start: var(--s-4);
    border-block-start: 1px solid var(--farbe-rahmen);
    display: grid;
    gap: var(--s-3);
  }

  .formular {
    display: grid;
    gap: var(--s-3);
    max-inline-size: var(--mass);
  }

  .formular label { font-weight: 600; color: var(--farbe-text); }

  .formular .wahl {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-weight: 400;
    min-block-size: var(--ziel-min);
  }

  .formular .optional {
    font-weight: 400;
    color: var(--farbe-text-gedaempft);
    font-size: var(--schrift-klein);
  }

  .formular input[type="text"],
  .formular input[type="url"],
  .formular input[type="email"],
  .formular input[type="tel"],
  .formular input[type="password"],
  .formular input[type="number"],
  .formular select,
  .formular textarea {
    min-block-size: var(--ziel-min);
    padding-inline: var(--s-3);
    border-radius: var(--radius-md);
    border: 1px solid var(--farbe-rahmen);
    background: var(--farbe-eingabe);
    color: var(--farbe-eingabe-text);
    inline-size: 100%;
    font: inherit;
  }

  .formular textarea {
    min-block-size: 5.5rem;
    padding-block: var(--s-2);
    resize: vertical;
  }

  .formular input::placeholder,
  .formular textarea::placeholder {
    color: var(--farbe-platzhalter);
  }

  .formular input:user-invalid,
  .formular select:user-invalid,
  .formular textarea:user-invalid {
    border-color: var(--farbe-fehler);
    outline: 2px solid color-mix(in oklch, var(--farbe-fehler) 45%, transparent);
    outline-offset: 1px;
  }

  .formular input[type="file"] {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
  }

  .formular input[type="checkbox"] {
    inline-size: 1.15rem;
    block-size: 1.15rem;
    accent-color: var(--farbe-akzent);
  }

  .knopf {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: var(--ziel-min);
    padding-inline: var(--s-4);
    padding-block: var(--s-2);
    border-radius: var(--radius-md);
    border: 1px solid transparent;
    background: var(--farbe-akzent);
    color: var(--farbe-akzent-text);
    font: inherit;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    justify-self: start;
  }

  .knopf:hover {
    filter: brightness(1.05);
  }

  .knopf-ghost {
    background: transparent;
    color: var(--farbe-text);
    border-color: var(--farbe-rahmen);
  }

  .knopf-ghost:hover {
    background: var(--farbe-ueberlagerung);
    filter: none;
  }

  .knopf-reihe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--s-2);
  }

  .hinweis {
    font-size: var(--schrift-klein);
    color: var(--farbe-text-gedaempft);
  }

  @media (scripting: none) {
    [data-show] { display: none; }
  }

  snap-upload {
    display: grid;
    gap: var(--s-3);
  }

  .fortschritt {
    inline-size: 100%;
    block-size: 2rem;
    border: none;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: color-mix(in oklch, var(--farbe-upload-rand) 22%, var(--farbe-flaeche));
    accent-color: var(--farbe-upload-rand);
    transition: box-shadow 0.15s ease, filter 0.15s ease;
  }

  .fortschritt::-webkit-progress-bar {
    background: color-mix(in oklch, var(--farbe-upload-rand) 22%, var(--farbe-flaeche));
    border-radius: var(--radius-md);
  }

  .fortschritt::-webkit-progress-value {
    background: var(--farbe-upload-rand);
    border-radius: var(--radius-md);
  }

  .fortschritt::-moz-progress-bar {
    background: var(--farbe-upload-rand);
    border-radius: var(--radius-md);
  }

  .fortschritt[aria-busy="true"] {
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--farbe-upload-rand) 45%, transparent);
    filter: saturate(1.25) brightness(1.05);
  }

  .uploadkasten {
    position: relative;
    border: 2px dashed var(--farbe-upload-rand);
    border-radius: var(--radius-lg);
    padding: var(--s-4);
    display: grid;
    gap: var(--s-3);
    background: var(--farbe-karte);
    transition: background-color 0.15s ease, border-color 0.15s ease;
  }

  .uploadkasten:has(> input[type="file"]:hover) {
    background: color-mix(in oklch, var(--farbe-upload-rand) 12%, var(--farbe-karte));
    border-color: var(--farbe-akzent);
  }

  .uploadkasten legend {
    font-weight: 700;
    padding-inline: var(--s-1);
    color: var(--farbe-text);
  }

  .dateiwahl {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    padding-block: var(--s-4);
    cursor: pointer;
    border-radius: var(--radius-md);
    color: var(--farbe-text);
  }

  .dateiwahl img { block-size: 3.5rem; }

  kbd {
    font-family: var(--schrift-mono);
    font-size: 0.875em;
    padding: 0.12rem 0.4rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--farbe-rahmen);
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
  }

  .vorschau {
    display: grid;
    gap: var(--s-3);
  }

  .ergebnis {
    background: var(--farbe-karte);
    border: 1px solid var(--farbe-rahmen);
    border-radius: var(--radius-lg);
    padding: var(--s-3);
    color: var(--farbe-text);
    display: grid;
    gap: var(--s-3);
    box-shadow: 0 1px 2px color-mix(in oklch, var(--farbe-text) 6%, transparent);
  }

  .ergebnis--wartend {
    border-style: dashed;
    border-color: var(--farbe-upload-rand);
  }

  .ergebnis--wartend .ergebnis-kopf {
    background: color-mix(in oklch, var(--farbe-upload-rand) 28%, var(--farbe-karte));
    color: var(--farbe-text);
  }

  .ergebnis--fehler .ergebnis-kopf {
    background: color-mix(in oklch, var(--farbe-fehler) 18%, var(--farbe-karte));
    color: var(--farbe-fehler);
  }

  .ergebnis-dateiname {
    font-size: var(--schrift-klein);
    color: var(--farbe-text-gedaempft);
    overflow-wrap: anywhere;
  }

  .ergebnis-kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    background: var(--farbe-ok);
    color: var(--farbe-ok-text);
    border-radius: var(--radius-md);
    padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
    font-weight: 600;
    font-family: var(--schrift-mono);
    font-size: var(--schrift-klein);
  }

  .ergebnis-code {
    overflow-wrap: anywhere;
  }

  .ergebnis-aktionen {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    gap: var(--s-1);
  }

  .ergebnis-aktion {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-inline-size: var(--ziel-min);
    min-block-size: var(--ziel-min);
    padding: 0;
    border: 1px solid color-mix(in oklch, var(--farbe-ok-text) 25%, transparent);
    border-radius: var(--radius-md);
    background: color-mix(in oklch, var(--farbe-flaeche) 55%, transparent);
    color: inherit;
    cursor: pointer;
    text-decoration: none;
    font: inherit;
  }

  .ergebnis-aktion:hover {
    background: color-mix(in oklch, var(--farbe-flaeche) 85%, transparent);
  }

  .ergebnis-aktion .icon {
    display: block;
    inline-size: 1.25rem;
    block-size: 1.25rem;
    background-color: currentColor;
    mask: center / contain no-repeat;
    -webkit-mask: center / contain no-repeat;
  }

  .ergebnis-aktion .icon-qr {
    mask-image: url("/assets/icon-qr-code.svg");
    -webkit-mask-image: url("/assets/icon-qr-code.svg");
  }

  .ergebnis-aktion .icon-copy {
    mask-image: url("/assets/icon-copy.svg");
    -webkit-mask-image: url("/assets/icon-copy.svg");
  }

  .ergebnis-rumpf {
    display: grid;
    gap: var(--s-2);
  }

  .ergebnis-link {
    background: var(--farbe-flaeche);
    color: var(--farbe-text);
    text-align: center;
    padding: var(--s-3);
    overflow-wrap: anywhere;
    text-decoration: none;
    border-radius: var(--radius-md);
    border: 1px solid var(--farbe-rahmen);
    display: block;
    font-family: var(--schrift-mono);
    font-size: var(--schrift-klein);
  }

  .ergebnis-link:hover {
    border-color: var(--farbe-akzent);
    text-decoration: underline;
  }

  @media (scripting: none) {
    [data-copy] { display: none; }
  }
}