/* ==========================================================================
   Schatz Elektrotechnik – Design-Tokens
   Übernommen aus der bisherigen Website (Werte unverändert),
   reduziert auf die tatsächlich verwendeten Variablen.
   ========================================================================== */

/* Schriftgrundlage */
:root {
  --root-font-size: 100%;
}

/* Farbpalette (hell / dunkel über light-dark()) */
:root {
  --primary: light-dark(oklch(0.487739074 0.0844883723 217.238849582), oklch(0.487739074 0.0844883723 217.238849582));
  --primary-hover: light-dark(oklch(0.561 0.084 217.238849582), oklch(0.561 0.084 217.238849582));
  --primary-ultra-light: light-dark(oklch(0.95 0.04 217.238849582), oklch(0.1 0.024 217.238849582));
  --primary-light: light-dark(oklch(0.85 0.084 217.238849582), oklch(0.25 0.059 217.238849582));
  --primary-dark: light-dark(oklch(0.25 0.059 217.238849582), oklch(0.85 0.084 217.238849582));
  --primary-semi-light: light-dark(oklch(0.65 0.084 217.238849582), oklch(0.35 0.083 217.238849582));
  --base: light-dark(oklch(0.77 0.0214148046 243.503139019), oklch(0.77 0.0214148046 243.503139019));
  --base-light: light-dark(oklch(0.85 0.021 243.503139019), oklch(0.25 0.021 243.503139019));
  --base-semi-light: light-dark(oklch(0.65 0.021 243.503139019), oklch(0.45 0.021 243.503139019));
  --base-semi-dark: light-dark(oklch(0.45 0.021 243.503139019), oklch(0.65 0.021 243.503139019));
  --neutral: light-dark(oklch(0 0 0), oklch(0 0 0));
  --neutral-ultra-light: light-dark(oklch(0.95 0 0), oklch(0.1 0 0));
  --neutral-light: light-dark(oklch(0.85 0 0), oklch(0.25 0 0));
  --neutral-dark: light-dark(oklch(0.25 0 0), oklch(0.85 0 0));
  --neutral-semi-light: light-dark(oklch(0.65 0 0), oklch(0.35 0 0));
  --white: light-dark(#fff, #000);
  --black: light-dark(#000, #fff);
  --danger: light-dark(oklch(0.53 0.19 21), oklch(0.65 0.202 21)); /* hell: dunkler für Kontrast */
  --success-semi-dark: light-dark(oklch(0.35 0.146 147), oklch(0.65 0.175 147));
}

/* Inhaltsbreite & Sektionen */
:root {
  --content-width: 85.375rem;
}

/* Fokus */
:root {
  --focus-color: var(--primary);
  --focus-width: 2px;
  --focus-offset: 2px;
}

/* Fließtext */
:root {
  --text-font-family: Montserrat;
  --text-color: var(--text-dark-muted);
  --text-line-height: calc(6px + 2ex);
  --text-text-wrap: pretty;
}

/* Überschriften */
:root {
  --heading-font-family: Montserrat;
  --heading-color: var(--text-dark-muted);
  --heading-line-height: calc(4px + 2ex);
  --heading-font-weight: 700;
  --heading-text-wrap: balance;
  --h1-max-width: 100%;
  --h4-line-height: calc(4px + 2ex);
}

/* Textgrößen (fluid) */
:root {
  --text-xs: clamp(0.8125rem, calc(0.0994035785vw + 0.7901341948rem), 0.875rem);
  --text-s: clamp(0.875rem, calc(0.0994035785vw + 0.8526341948rem), 0.9375rem);
  --text-m: clamp(1rem, calc(0.1988071571vw + 0.9552683897rem), 1.125rem);
  --text-l: clamp(1.2rem, calc(0.4765407555vw + 1.09277833rem), 1.499625rem);
}

/* Überschriftengrößen (fluid) */
:root {
  --h6: clamp(0.8125rem, calc(0.0994035785vw + 0.7901341948rem), 0.875rem);
  --h5: clamp(0.875rem, calc(0.0994035785vw + 0.8526341948rem), 0.9375rem);
  --h4: clamp(1.125rem, calc(0.1988071571vw + 1.0802683897rem), 1.25rem);
  --h3: clamp(1.35rem, calc(0.5029821074vw + 1.2368290258rem), 1.66625rem);
  --h2: clamp(1.62rem, calc(0.9560417495vw + 1.4048906064rem), 2.22111125rem);
  --h1: clamp(1.944rem, calc(1.6170835726vw + 1.5801561962rem), 2.9607412962rem);
  --h1-to-h2: clamp(1.62rem, calc(2.1323917237vw + 1.1402118622rem), 2.9607412962rem);
}

/* Inhaltsbreite & Sektionen */
:root {
  --section-padding-block: var(--section-space-m);
  --gutter: clamp(1rem, calc(6.3618290258vw + -0.4314115308rem), 5rem);
}

/* Abstände (fluid) */
:root {
  --space-xs: clamp(0.8333333333rem, calc(-0.0172384889vw + 0.8480506933rem), 0.8441720333rem);
  --space-s: clamp(1.1252813203rem, calc(0.1983597291vw + 1.0806503813rem), 1.25rem);
  --space-s-to-xs: clamp(0.8441720333rem, calc(0.6454520346vw + 0.6989453255rem), 1.25rem);
  --space-m: clamp(1.5rem, calc(0.5964214712vw + 1.365805169rem), 1.875rem);
  --space-l: clamp(1.9995rem, calc(1.2930417495vw + 1.7085656064rem), 2.8125rem);
  --space-l-to-m: clamp(1.5rem, calc(2.0874751491vw + 1.0303180915rem), 2.8125rem);
  --space-xl: clamp(2.6653335rem, calc(2.4706425447vw + 2.1094389274rem), 4.21875rem);
  --space-xxl: clamp(3.5528895555rem, calc(4.4138933511vw + 2.5597635515rem), 6.328125rem);
}

/* Sektionsabstände (fluid) */
:root {
  --section-space-s: clamp(2.2505626407rem, calc(2.3847910288vw + 1.7139846592rem), 3.75rem);
  --section-space-m: clamp(3rem, calc(4.1749502982vw + 2.0606361829rem), 5.625rem);
  --section-space-l: clamp(3.999rem, calc(7.0592445328vw + 2.4106699801rem), 8.4375rem);
  --section-space-xl-to-m: clamp(3rem, calc(15.3578528827vw + -0.4555168986rem), 12.65625rem);
}

/* Kontext-Abstände */
:root {
  --content-gap: var(--space-m);
  --container-gap: var(--space-xl);
  --grid-gap: var(--space-m);
}

/* Breiten */
:root {
  --width-40: calc(var(--content-width) * 0.4);
  --width-60: calc(var(--content-width) * 0.6);
  --width-70: calc(var(--content-width) * 0.7);
}

/* Raster */
:root {
  --grid-1: repeat(1, minmax(0, 1fr));
  --grid-2: repeat(2, minmax(0, 1fr));
  --grid-3: repeat(3, minmax(0, 1fr));
  --grid-4: repeat(4, minmax(0, 1fr));
  --grid-12: repeat(12, minmax(0, 1fr));
  --grid-2-3: minmax(0, 2fr) minmax(0, 3fr);
  --grid-3-2: minmax(0, 3fr) minmax(0, 2fr);
}

/* Auto-Raster */
:root {
  --grid-auto-2: repeat(
    auto-fit,
    minmax(
      min(100%, max(calc((var(--content-width) - ((2 - 1) * var(--grid-gap))) / 2) * 0.7, (100% - (2 - 1) * var(--grid-gap)) / 2)),
      1fr
    )
  );
  --grid-auto-3: repeat(
    auto-fit,
    minmax(
      min(100%, max(calc((var(--content-width) - ((3 - 1) * var(--grid-gap))) / 3) * 0.7, (100% - (3 - 1) * var(--grid-gap)) / 3)),
      1fr
    )
  );
}

/* Header Height Variables */
:root {
  --header-height: clamp(0rem, calc(0vw + 0rem), 0rem);
}

/* Sonstiges */
:root {
  --scroll-margin: clamp(0rem, calc(0vw + 0rem), 0rem);
  --offset: calc(var(--scroll-margin) + var(--header-height));
}

/* Abstände im Fließtext */
:root {
  --paragraph-spacing: 1em;
  --heading-spacing: 1.2em;
  --list-spacing: var(--paragraph-spacing);
  --list-indent-spacing: 2em;
  --list-item-spacing: 0.5em;
  --nested-list-indent-spacing: 1em;
  --flow-spacing: var(--paragraph-spacing);
  --figure-spacing: var(--paragraph-spacing);
  --figcaption-spacing: 0.5em;
  --blockquote-spacing: var(--paragraph-spacing);
}

/* Buttons */
:root {
  --btn-padding-block: 0.5em;
  --btn-padding-inline: 1.25em;
  --btn-min-width: 8.75rem;
  --btn-width: max-content;
  --btn-line-height: 1;
  --btn-font-size: var(--text-m);
  --btn-font-weight: 600;
  --btn-font-family: inherit;
  --btn-font-style: normal;
  --btn-text-decoration: none;
  --btn-text-decoration-hover: none;
  --btn-letter-spacing: 0;
  --btn-text-transform: none;
  --btn-border-width: 1.5px;
  --btn-border-style: solid;
  --btn-border-radius: var(--radius);
  --btn-justify-content: center;
  --btn-align-items: center;
  --btn-text-align: center;
}

/* Links */
:root {
  /* Petrol als Text-/Linkfarbe: im Dunkelmodus aufgehellt (Kontrast WCAG AA) */
  --primary-text: light-dark(var(--primary), oklch(0.78 0.08 217.238849582));
  --primary-text-hover: light-dark(var(--primary-hover), oklch(0.86 0.07 217.238849582));
  --link-color: var(--primary-text);
  --link-color-hover: var(--primary-text-hover);
  --link-decoration: inherit;
  --link-underline-offset: auto;
  --link-weight: inherit;
}

/* Karten */
:root {
  --card-gap: calc(var(--content-gap) / 2);
}

/* Kontextfarben */
:root {
  --body-bg-color: var(--white);
  --bg-ultra-light: var(--neutral-ultra-light);
  --bg-light: var(--neutral-light);
  --text-light: var(--white);
  --text-dark: var(--black);
  --text-dark-muted: color-mix(in srgb, var(--text-dark) 80%, transparent);
}

/* Radien */
:root {
  --radius: 14px;
  /* Bewegung: schneller Start, weiches Ende (für kurze UI-Übergänge) */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Rahmen */
:root {
  --border-size: 1px;
  --border-style: solid;
  --border-color-dark: color-mix(in oklch, var(--primary) 30%, transparent);
  --border: var(--border-size) var(--border-style) var(--border-color-dark);
}

/* Zitate */
:root {
  --blockquote-padding: var(--space-m);
  --blockquote-gap: 1em;
  --blockquote-border-width: 0 0 0 3px;
  --blockquote-border-style: solid;
  --blockquote-border-color: var(--primary);
  --blockquote-border-radius: var(--radius);
  --blockquote-background: var(--neutral-ultra-light);
  --blockquote-box-shadow: none;
  --blockquote-text-color: inherit;
  --blockquote-text-font-family: inherit;
  --blockquote-text-font-style: normal;
  --blockquote-text-font-size: var(--text-l);
  --blockquote-text-font-weight: normal;
  --blockquote-text-line-height: inherit;
  --blockquote-text-text-align: left;
  --blockquote-text-text-transform: none;
  --blockquote-cite-font-family: inherit;
  --blockquote-cite-font-size: inherit;
  --blockquote-cite-font-weight: inherit;
  --blockquote-cite-font-style: inherit;
  --blockquote-cite-line-height: inherit;
  --blockquote-cite-text-transform: inherit;
  --blockquote-cite-color: currentColor;
}

/* Muster */
:root {
  --pattern-stripes: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%230b6b7f' fill-opacity='0.06' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}