/*
 * Fleetopia – Design System (design-system.css)
 * Gestaltung nach den Anti-Slop-Regeln (Referenz ac-mueller.com):
 * Creme-Grund, Tinte als Textfarbe, dunkles Teal nur für Links/Fokus,
 * Gliederung über Weißraum, Haarlinien und Typografie. Keine Schatten,
 * keine Verläufe, Radien höchstens 6 px. Einziges Deko-Element: Markenstreifen.
 * Schriften: Space Grotesk (Überschriften, Zahlen) + Inter (Text), selbst gehostet.
 * Hell ist Standard (:root), Dunkel über html[data-theme="dark"] (theme.js).
 *
 * OWNER: design-Modul. Token-Namen (--ft-petrol* usw.) bleiben aus Kompatibilität,
 * "petrol" bedeutet hier: Akzent.
 */

/* Selbst gehostete Schriften (CSP: font-src 'self'), identisch zu ac-mueller.com */
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/inter-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/inter-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/spacegrotesk-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url("/assets/fonts/spacegrotesk-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ===========================================================================
   1. Custom Properties (Tokens) – Hell (Standard)
   =========================================================================== */

:root {
    /* Akzent (Links, Fokus) – dunkles Teal */
    --ft-black:          #000000;
    --ft-petrol:         #146a77;
    --ft-petrol-dark:    #0e505a;
    --ft-petrol-darker:  #0a3d45;
    --ft-petrol-link:    #146a77;
    /* Die eine farbige Fläche pro Seite: Teal 20 %, durchscheinend */
    --ft-petrol-bg:      rgba(27, 140, 157, 0.20);
    --ft-petrol-border:  rgba(27, 140, 157, 0.45);
    --ft-petrol-glow:    transparent;

    /* Markenstreifen (einziges Deko-Element) */
    --ft-stripe-teal:    #1b8c9d;
    --ft-stripe-red:     #e23b3b;
    --ft-stripe-orange:  #ec6f16;
    --ft-stripe-yellow:  #f9b000;

    /* Status: Farbe mit Bedeutung, nur als Schrift/Linie, nie als Fläche */
    --ft-success:        #2d6a33;
    --ft-warning:        #8a4a0b;
    --ft-danger:         #a3261f;
    --ft-info:           #146a77;
    --ft-info-text:      #146a77;
    --ft-success-bg:     transparent;
    --ft-warning-bg:     transparent;
    --ft-danger-bg:      transparent;
    --ft-info-bg:        transparent;

    /* Text */
    --ft-text:           #1f1c17;   /* Tinte */
    --ft-text-muted:     #4f483e;   /* gedämpft */
    --ft-text-faint:     #6b6355;   /* leise */
    --ft-text-inverse:   #fffaf1;   /* Schrift auf Tinte (Primärknopf) */

    /* Flächen */
    --ft-bg:             #f6efe2;   /* Creme */
    --ft-bg-1:           #f6efe2;   /* Seitenleiste = Grundton */
    --ft-bg-2:           #fffaf1;   /* Felder/Karten */
    --ft-bg-3:           #fffaf1;   /* Eingabefelder */
    --ft-bg-4:           rgba(31, 28, 23, 0.05); /* Hover-Hauch */

    /* Haarlinien */
    --ft-border:         rgba(31, 28, 23, 0.16);
    --ft-border-soft:    rgba(31, 28, 23, 0.08);
    --ft-border-hover:   rgba(31, 28, 23, 0.32);
    --ft-border-active:  #146a77;

    /* Typografie: zwei Schriften */
    --ft-font-display:   "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --ft-font-sans:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --ft-font-mono:      ui-monospace, "SF Mono", Consolas, monospace;

    --ft-text-xs:        0.8125rem; /* 13px */
    --ft-text-sm:        0.9375rem; /* 15px */
    --ft-text-base:      1rem;      /* 16px */
    --ft-text-lg:        1.125rem;  /* 18px */
    --ft-text-xl:        1.25rem;   /* 20px */
    --ft-text-2xl:       1.625rem;  /* 26px */
    --ft-text-3xl:       2rem;      /* 32px */

    --ft-weight-normal:  400;
    --ft-weight-medium:  500;
    --ft-weight-semi:    600;
    --ft-weight-bold:    700;

    --ft-leading-tight:  1.2;
    --ft-leading-base:   1.55;
    --ft-leading-loose:  1.75;

    /* Abstände (4px-Raster) */
    --ft-space-1:        0.25rem;
    --ft-space-2:        0.5rem;
    --ft-space-3:        0.75rem;
    --ft-space-4:        1rem;
    --ft-space-5:        1.25rem;
    --ft-space-6:        1.5rem;
    --ft-space-8:        2rem;
    --ft-space-10:       2.5rem;
    --ft-space-12:       3rem;
    --ft-space-16:       4rem;

    /* Radien: höchstens 6 px, keine Pillen */
    --ft-radius-sm:      4px;
    --ft-radius:         6px;
    --ft-radius-md:      6px;
    --ft-radius-lg:      6px;
    --ft-radius-xl:      6px;
    --ft-radius-full:    6px;

    /* Keine Schatten */
    --ft-shadow-sm:      none;
    --ft-shadow:         none;
    --ft-shadow-lg:      none;
    --ft-shadow-petrol:  none;

    /* Übergänge */
    --ft-transition:     150ms ease;
    --ft-transition-md:  250ms ease;

    /* Layout */
    --ft-sidebar-width:  240px;
    --ft-header-height:  56px;
    --ft-content-max:    1080px;

    color-scheme: light;
}

/* ===========================================================================
   1b. Dunkel (Nacht) – gleiche Logik, Tinte als Grund
   =========================================================================== */

html[data-theme="dark"] {
    --ft-petrol:         #6cc0cc;
    --ft-petrol-dark:    #8fd0d9;
    --ft-petrol-darker:  #b0dee4;
    --ft-petrol-link:    #6cc0cc;
    --ft-petrol-bg:      rgba(27, 140, 157, 0.24);
    --ft-petrol-border:  rgba(108, 192, 204, 0.45);

    --ft-success:        #8acf94;
    --ft-warning:        #f0a65e;
    --ft-danger:         #f2867b;
    --ft-info:           #6cc0cc;
    --ft-info-text:      #6cc0cc;

    --ft-text:           #f1e9db;
    --ft-text-muted:     #cfc5b3;
    --ft-text-faint:     #a99f8c;
    --ft-text-inverse:   #16140f;

    --ft-bg:             #16140f;
    --ft-bg-1:           #16140f;
    --ft-bg-2:           #211e18;
    --ft-bg-3:           #211e18;
    --ft-bg-4:           rgba(246, 239, 226, 0.06);

    --ft-border:         rgba(246, 239, 226, 0.16);
    --ft-border-soft:    rgba(246, 239, 226, 0.08);
    --ft-border-hover:   rgba(246, 239, 226, 0.32);
    --ft-border-active:  #6cc0cc;

    color-scheme: dark;
}

/* ===========================================================================
   2. Reset & Box-Model
   =========================================================================== */

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

html {
    font-size: 100%;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

body {
    background-color: var(--ft-bg);
    color: var(--ft-text);
    font-family: var(--ft-font-sans);
    font-size: var(--ft-text-base);
    line-height: var(--ft-leading-base);
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* ===========================================================================
   3. Typografie
   =========================================================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: var(--ft-font-display);
    font-weight: var(--ft-weight-semi);
    letter-spacing: -0.01em;
    line-height: var(--ft-leading-tight);
    color: var(--ft-text);
}

h1 { font-size: var(--ft-text-3xl); }
h2 { font-size: var(--ft-text-2xl); }
h3 { font-size: var(--ft-text-xl); }
h4 { font-size: var(--ft-text-lg); }
h5 { font-size: var(--ft-text-base); }
h6 { font-size: var(--ft-text-sm); }

p {
    line-height: var(--ft-leading-base);
}

a {
    color: var(--ft-petrol);
    text-decoration: none;
    transition: color var(--ft-transition), opacity var(--ft-transition);
}

a:hover {
    color: var(--ft-petrol-dark);
    text-decoration: underline;
    text-underline-offset: 2px;
}

a:focus-visible {
    outline: 2px solid var(--ft-petrol);
    outline-offset: 3px;
    border-radius: var(--ft-radius-sm);
}

strong, b { font-weight: var(--ft-weight-semi); }
em, i { font-style: italic; }
small { font-size: var(--ft-text-sm); }

code {
    font-family: var(--ft-font-mono);
    font-size: 0.875em;
    background: var(--ft-bg-3);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius-sm);
    padding: 0.1em 0.35em;
}

pre {
    font-family: var(--ft-font-mono);
    font-size: var(--ft-text-sm);
    background: var(--ft-bg-2);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius);
    padding: var(--ft-space-4);
    overflow-x: auto;
}

pre code {
    background: none;
    border: none;
    padding: 0;
    font-size: inherit;
}

hr {
    border: none;
    border-top: 1px solid var(--ft-border);
}

ul, ol {
    padding-left: 1.5em;
}

li {
    line-height: var(--ft-leading-base);
}

/* ===========================================================================
   4. Formular-Elemente (Basis-Reset)
   =========================================================================== */

button,
input,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

input,
textarea,
select {
    background: var(--ft-bg-3);
    border: 1px solid var(--ft-border);
    border-radius: var(--ft-radius);
    color: var(--ft-text);
    outline: none;
    transition: border-color var(--ft-transition);
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--ft-border-active);
}

input::placeholder,
textarea::placeholder {
    color: var(--ft-text-faint);
}

/* ===========================================================================
   5. Bilder & Medien
   =========================================================================== */

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

/* ===========================================================================
   6. Utility-Klassen (minimaler Satz)
   =========================================================================== */

/* Texte */
.ft-text-muted  { color: var(--ft-text-muted); }
.ft-text-faint  { color: var(--ft-text-faint); }
.ft-text-petrol { color: var(--ft-petrol); }
.ft-text-sm     { font-size: var(--ft-text-sm); }
.ft-text-xs     { font-size: var(--ft-text-xs); }
.ft-text-lg     { font-size: var(--ft-text-lg); }
.ft-font-semi   { font-weight: var(--ft-weight-semi); }
.ft-font-medium { font-weight: var(--ft-weight-medium); }
.ft-truncate    { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Abstände */
.ft-mt-2  { margin-top: var(--ft-space-2); }
.ft-mt-4  { margin-top: var(--ft-space-4); }
.ft-mt-6  { margin-top: var(--ft-space-6); }
.ft-mt-8  { margin-top: var(--ft-space-8); }
.ft-mb-4  { margin-bottom: var(--ft-space-4); }
.ft-mb-6  { margin-bottom: var(--ft-space-6); }

/* Flex-Utilities */
.ft-flex         { display: flex; }
.ft-flex-center  { display: flex; align-items: center; }
.ft-flex-between { display: flex; align-items: center; justify-content: space-between; }
.ft-flex-gap-2   { gap: var(--ft-space-2); }
.ft-flex-gap-4   { gap: var(--ft-space-4); }
.ft-flex-wrap    { flex-wrap: wrap; }
.ft-flex-1       { flex: 1; }

/* Grid */
.ft-grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ft-space-4); }
.ft-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--ft-space-4); }
.ft-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--ft-space-4); }

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

/* ===========================================================================
   7. Marken-Streifen (wiederverwendbares Layout-Element)
   =========================================================================== */

.ft-brand-stripes {
    position: fixed;
    top: -6%;
    bottom: -6%;
    right: clamp(14px, 3.5vw, 68px);
    width: clamp(42px, 5vw, 74px);
    z-index: 0;
    display: flex;
    gap: clamp(6px, 0.7vw, 11px);
    transform: skewX(-16deg);
    pointer-events: none;
    opacity: 0.35;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 82%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 20%, #000 82%, transparent 100%);
}

.ft-brand-stripes .ft-stripe {
    flex: 1;
    border-radius: var(--ft-radius-sm);
}

.ft-stripe--teal   { background: var(--ft-stripe-teal); }
.ft-stripe--red    { background: var(--ft-stripe-red); }
.ft-stripe--orange { background: var(--ft-stripe-orange); }
.ft-stripe--yellow { background: var(--ft-stripe-yellow); }

@media (max-width: 600px) {
    .ft-brand-stripes {
        right: 6px;
        width: 36px;
        gap: 5px;
        opacity: 0.28;
    }
}

/* ===========================================================================
   9. Focus-Ring (global, barrierefreiheitskonform)
   =========================================================================== */

:focus-visible {
    outline: 2px solid var(--ft-petrol);
    outline-offset: 2px;
}

/* ===========================================================================
   10. Scrollbar (Webkit)
   =========================================================================== */

::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--ft-bg-1);
}

::-webkit-scrollbar-thumb {
    background: var(--ft-border);
    border-radius: var(--ft-radius-full);
}

::-webkit-scrollbar-thumb:hover {
    background: var(--ft-text-faint);
}

/* ===========================================================================
   11. Auswahl-Markierung
   =========================================================================== */

::selection {
    background: rgba(27, 140, 157, 0.25);
    color: var(--ft-text);
}