/* =========================================================
   RESET & BASE
   ========================================================= */

/* Box-Sizing Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
}


/* Margin & Padding Reset */
* {
    margin: 0;
    padding: 0;
}


/* HTML & Body Grundsetup */
html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    min-height: 100vh;
    line-height: 1.5;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;

    /* Dark Mode Basis */
    background-color: #0f1115;
    color: #e5e7eb;

    /* Standard Font */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", sans-serif;
}


/* Medien Elemente sauber skalieren */
img,
picture,
video,
canvas,
svg {
    display: block;
    max-width: 100%;
}


/* Form Elemente erben Schrift */
input,
button,
textarea,
select {
    font: inherit;
}


/* Buttons Reset */
button {
    border: none;
    background: none;
    cursor: pointer;
}


/* Links Reset */
a {
    text-decoration: none;
    color: inherit;
}


/* Listen Reset */
ul,
ol {
    list-style: none;
}


/* Tabellen Reset */
table {
    border-collapse: collapse;
    border-spacing: 0;
}


/* =========================================================
   TYPOGRAFIE
   ========================================================= */

/* Überschriften */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
    line-height: 1.2;
    color: #ffffff;
}


/* Absatz */
p {
    line-height: 1.6;
    color: #d1d5db;
}


/* Kleine Texte */
small {
    font-size: 0.875rem;
    color: #9ca3af;
}


/* Strong / Bold */
strong {
    font-weight: 600;
    color: #ffffff;
}


/* Span neutral */
span {
    display: inline-block;
}


/* =========================================================
   FOKUS & ACCESSIBILITY
   ========================================================= */

/* Fokus sichtbar machen */
:focus-visible {
    outline: 2px solid #22c55e;
    outline-offset: 2px;
}


/* =========================================================
   SELECTION (Text markieren)
   ========================================================= */

::selection {
    background: #22c55e;
    color: #0f1115;
}


/* =========================================================
   ROOT VARIABLEN (FARBEN, ABSTÄNDE, ETC.)
   ========================================================= */

/* Hauptfarben (Background, Cards, Accent) */
/* Textfarben */
/* Hoverfarben */
/* Schatten / Glow */
/* Border Radius */
/* Abstände / Spacing System */


/* =========================================================
   GLOBAL LAYOUT
   ========================================================= */

/* App Wrapper (z. B. .app) */
/* Main Layout Grid (Sidebar + Content) */
/* Content Bereich */
/* Scroll Verhalten */


/* =========================================================
   SIDEBAR (LINKS)
   ========================================================= */

/* Sidebar Container */
/* Logo Bereich */
/* Navigationsliste */
/* Navigation Items */
/* Aktiver Zustand */
/* Hover Effekte */
/* Footer Bereich (User / Settings) */


/* =========================================================
   HEADER / TOPBAR
   ========================================================= */

/* Header Container */
/* Suchleiste */
/* Icons (z. B. Profil, Notifications) */
/* Rechte Header Sektion */


/* =========================================================
   HERO / FEATURED BEREICH
   ========================================================= */

/* Hero Container */
/* Hintergrundbild */
/* Overlay / Gradient */
/* Titel */
/* Beschreibung */
/* Buttons (Watch / Add / etc.) */
/* Slider Navigation (Dots / Pfeile) */


/* =========================================================
   MOVIE ROWS (HORIZONTALE LISTEN)
   ========================================================= */

/* Row Container */
/* Row Header (Titel + "Mehr anzeigen") */
/* Scroll Container */
/* Scroll Verhalten (horizontal) */
/* Scroll Buttons (links/rechts) */


/* =========================================================
   MOVIE CARD (EINZELNE FILME)
   ========================================================= */

/* Card Container */
/* Cover Bild */
/* Hover Effekt (Zoom) */
/* Overlay bei Hover */
/* Titel / Infos */
/* Icons / Aktionen (Seen, Sale, etc.) */
/* Badge (NEU, FSK, etc.) */


/* =========================================================
   MODAL / DETAILANSICHT
   ========================================================= */

/* Modal Hintergrund (Overlay) */
/* Modal Container */
/* Close Button */
/* Inhalt (Bild, Infos, Aktionen) */
/* Animation (Fade / Scale) */


/* =========================================================
   BUTTONS
   ========================================================= */

/* Primary Button */
/* Secondary Button */
/* Ghost Button */
/* Hover Effekte */
/* Disabled Zustand */


/* =========================================================
   FORM ELEMENTE
   ========================================================= */

/* Inputs */
/* Selects */
/* Textareas */
/* Labels */
/* Focus Zustände */


/* =========================================================
   FILTER & SUCHE (OPTIONAL SIDEBAR RECHTS/SPÄTER)
   ========================================================= */

/* Filter Container */
/* Checkboxen */
/* Kategorien */
/* Expand / Collapse */


/* =========================================================
   STATUS / BADGES
   ========================================================= */

/* "Neu" Badge */
/* "Verkauf" Badge */
/* "Gesehen" Status */
/* Rating Sterne */


/* =========================================================
   ANIMATIONEN & TRANSITIONS
   ========================================================= */

/* Standard Transition */
/* Hover Animationen */
/* Fade In / Fade Out */
/* Scale Effekte */


/* =========================================================
   SCROLLBAR STYLING
   ========================================================= */

/* Webkit Scrollbar */
/* Track */
/* Thumb */


/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */

/* Tablet */
/* Mobile */
/* Anpassung Sidebar */
/* Anpassung Grid */
/* Anpassung Cards */


/* =========================================================
   UTILITY CLASSES
   ========================================================= */

/* Margin Helper */
/* Padding Helper */
/* Display Helper */
/* Flex Helper */
/* Text Alignment */


/* =========================================================
   DEBUG / TEMPORÄR
   ========================================================= */

/* Outline Debug */
/* Layout Debug */
/* Test Farben */


/* =========================================================
   FUTURE FEATURES (PLATZHALTER)
   ========================================================= */

/* Drag & Drop */
/* Live Auction Mode */
/* Notification System */
/* Dark/Light Toggle */