/*
 * Programm: fluxsystems Webseite
 * Datei: grundlagen.css
 * Datum: 18.10.2026
 * Autor: Lukas Fassbender
 * Änderungen: KI wurde zur unterstützung verwendet
*/

/* schriften lokal, damit keine ip an google geht */
@font-face
{
    font-family: "Space Grotesk";
    src: url("../fonts/space-grotesk-latin-wght-normal.woff2") format("woff2");
    font-weight: 300 700;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: "JetBrains Mono";
    src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2");
    font-weight: 100 800;
    font-style: normal;
    font-display: swap;
}

@font-face
{
    font-family: "Silkscreen";
    src: url("../fonts/silkscreen-latin-400-normal.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root
{
    /* farben */
    --farbe-grund: #0A0B0D;
    --farbe-flaeche: #121419;
    --farbe-flaeche-hell: #1A1D24;
    --farbe-linie: #24272F;
    --farbe-text: #ECEBE4;
    --farbe-text-leise: #8A8C93;
    --farbe-flux: #5BF0C8;
    --farbe-akzent-2: #7C5CFF;
    --farbe-warnung: #FFB547;

    /* schriften */
    --schrift-text: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --schrift-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", monospace;
    --schrift-pixel: "Silkscreen", "JetBrains Mono", monospace;

    /* fließende schriftgrößen von 375 bis 1920 px breite */
    --groesse-klein: clamp(0.75rem, 0.72rem + 0.12vw, 0.85rem);
    --groesse-text: clamp(1rem, 0.95rem + 0.22vw, 1.15rem);
    --groesse-gross: clamp(1.25rem, 1.1rem + 0.6vw, 1.75rem);
    --groesse-titel: clamp(2rem, 1.4rem + 2.6vw, 4.5rem);
    --groesse-riesig: clamp(3.5rem, 1rem + 11vw, 14rem);

    /* abstände */
    --rand-seite: clamp(1rem, 0.6rem + 2vw, 3rem);
    --abstand-sektion: clamp(6rem, 4rem + 8vw, 12rem);
    --spalten-abstand: clamp(0.75rem, 0.5rem + 1vw, 1.5rem);

    --kurve-sanft: cubic-bezier(0.22, 1, 0.36, 1);
    --header-hoehe: 4.5rem;

    color-scheme: dark;
}

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

html
{
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body
{
    min-height: 100vh;
    background-color: var(--farbe-grund);
    color: var(--farbe-text);
    font-family: var(--schrift-text);
    font-size: var(--groesse-text);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img,
video,
svg,
canvas
{
    display: block;
    max-width: 100%;
}

img,
video
{
    height: auto;
}

a
{
    color: inherit;
    text-decoration: none;
}

button
{
    font: inherit;
    color: inherit;
    background: none;
    border: none;
    cursor: pointer;
}

ul,
ol
{
    list-style: none;
}

h1,
h2,
h3,
h4
{
    font-weight: 600;
    line-height: 1.05;
    letter-spacing: -0.03em;
    text-wrap: balance;
}

p
{
    text-wrap: pretty;
}

::selection
{
    background-color: var(--farbe-flux);
    color: var(--farbe-grund);
}

/* sichtbarer fokus für tastaturnutzer */
:focus-visible
{
    outline: 2px solid var(--farbe-flux);
    outline-offset: 4px;
    border-radius: 2px;
}

.mono
{
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.pixel
{
    font-family: var(--schrift-pixel);
}

.leise
{
    color: var(--farbe-text-leise);
}

.akzent
{
    color: var(--farbe-flux);
}

/* nur für screenreader sichtbar */
.nur-screenreader
{
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.sprung-link
{
    position: fixed;
    top: 1rem;
    left: 1rem;
    z-index: 1000;
    padding: 0.75rem 1rem;
    background-color: var(--farbe-flux);
    color: var(--farbe-grund);
    font-family: var(--schrift-mono);
    transform: translateY(-200%);
}

.sprung-link:focus
{
    transform: translateY(0);
}