/* ============================================================================
   VadimYourEditor, Design-Tokens

   Gestaltungsidee: Farbverlauf als FLAECHE, nicht als Nebel.

   Die uebliche Startseiten-Optik legt weichgezeichnete Farbflecken hinter
   dunkle Karten. Das sieht ueberall gleich aus. Hier laufen die Verlaeufe
   stattdessen ueber ganze Baender, Kanten und Flaechen mit harten Grenzen,
   also so, wie Farbe in einem Color Grading eingesetzt wird. Passt zum
   Handwerk eines Cutters und hebt sich vom Einheitslook ab.

   Das Tuerkis #00e8da der bisherigen Seite bleibt der Anker und laeuft
   ueber Blau nach Violett aus.
   ========================================================================== */

:root {
  /* ---- Flaechen ---------------------------------------------------------- */
  --bg:        #05060a;
  --bg-1:      #0b0d14;
  --bg-2:      #12141d;
  --bg-3:      #1b1e2a;
  --line:      #21242f;
  --line-2:    #333748;

  /* ---- Text -------------------------------------------------------------- */
  --fg:        #f4f6fb;
  --fg-2:      #a3abbd;
  --fg-3:      #6a7288;
  --on-bright: #06070c;   /* Text auf hellen Verlaufsflaechen */

  /* ---- Verlaufsachse ----------------------------------------------------- */
  --c-1:       #00e8da;   /* Tuerkis der Marke */
  --c-2:       #2f9bff;
  --c-3:       #7b5cff;
  --c-4:       #d94bff;
  --c-warm:    #ff6b4a;   /* nur fuer Rabatte und Dringlichkeit */

  --brand:     var(--c-1);

  /* Der Hauptverlauf. Ueberall dieselbe Achse, damit die Seite zusammenhaengt. */
  --g:         linear-gradient(100deg, var(--c-1) 0%, var(--c-2) 38%, var(--c-3) 72%, var(--c-4) 100%);
  --g-rev:     linear-gradient(280deg, var(--c-1) 0%, var(--c-2) 38%, var(--c-3) 72%, var(--c-4) 100%);
  --g-warm:    linear-gradient(100deg, var(--c-warm), #ff2d78);

  /* Sehr dunkle Variante fuer grosse Flaechen, auf denen heller Text steht. */
  --g-deep:    linear-gradient(115deg, #04231f 0%, #071a34 40%, #150a33 75%, #250731 100%);

  /* ---- Signalfarben ------------------------------------------------------ */
  --ok:        #2ee6a8;
  --bad:       #ff6b6b;

  /* ---- Radien ------------------------------------------------------------
     Bewusst klein. Stark abgerundete Karten sind Teil des Einheitslooks,
     kantiger wirkt es redaktioneller. */
  --r-sm:      3px;
  --r:         5px;
  --r-md:      8px;
  --r-lg:      12px;
  --r-full:    999px;

  /* ---- Schatten ---------------------------------------------------------- */
  --sh-2:      0 12px 30px -12px rgba(0,0,0,.85);
  --sh-3:      0 30px 70px -24px rgba(0,0,0,.95);
  --sh-glow:   0 14px 40px -14px rgba(0,232,218,.5);

  /* ---- Typografie -------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-xs:   clamp(11px, .5vw + 9px,   12px);
  --t-sm:   clamp(13px, .35vw + 12px, 14px);
  --t-base: clamp(15px, .35vw + 14px, 16px);
  --t-md:   clamp(17px, .7vw + 14px,  19px);
  --t-lg:   clamp(21px, 1.3vw + 16px, 26px);
  --t-xl:   clamp(26px, 2.2vw + 17px, 36px);
  --t-2xl:  clamp(32px, 3.4vw + 18px, 52px);
  /* Schlagzeile, bewusst gross. Die Untergrenze ist so gewaehlt, dass das
     laengste Wort ("funktionieren") auf einem 360px breiten Telefon noch in
     eine Zeile passt. */
  --t-3xl:  clamp(34px, 6.2vw + 10px, 96px);

  /* ---- Raster ------------------------------------------------------------ */
  --maxw:      1280px;
  --maxw-text: 720px;
  --pad:       clamp(20px, 4vw, 44px);
  --sec-y:     clamp(72px, 10vw, 140px);

  --header-h:  68px;
}

/* ============================================================================
   Reset und Basis
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  font-family: var(--font);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-weight: 800; line-height: 1.04; letter-spacing: -.03em; text-wrap: balance; }
h1 { font-size: var(--t-3xl); letter-spacing: -.045em; }
h2 { font-size: var(--t-2xl); letter-spacing: -.038em; }
h3 { font-size: var(--t-lg); letter-spacing: -.025em; }
h4 { font-size: var(--t-md); }

p { text-wrap: pretty; }
a { color: inherit; text-decoration: none; }
img, svg, video { display: block; max-width: 100%; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; }

::selection { background: var(--c-3); color: #fff; }

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

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: 12px; top: -60px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--c-1);
  color: var(--on-bright);
  font-weight: 700;
  transition: top .18s;
}
.skip:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}