/* =========================================================
   Zentrale Design-Variablen (Theme)
   Definiert Farben, Abstände, Schatten und Übergänge
   für konsistentes Styling über alle Seiten hinweg.
   ========================================================= */
:root {
    --bg: #faf7f2;                 /* Haupt-Hintergrundfarbe */
    --bg-card: #fff;               /* Hintergrund für Karten */
    --accent: #ff6b35;             /* Primäre Akzentfarbe */
    --accent-soft: #ffe1cf;        /* Weiche Akzent-Variante */
    --accent-dark: #e25725;        /* Dunkle Akzent-Variante */
    --text-main: #222;             /* Standard-Textfarbe */
    --text-muted: #777;            /* Gedämpfter Text */
    --border-soft: #e1e1e1;        /* Dezente Rahmenfarbe */
    --shadow-soft: 0 10px 25px rgba(0, 0, 0, .06); /* Standard-Schatten */
    --radius-lg: 18px;             /* Große Rundungen */
    --radius-md: 12px;             /* Mittlere Rundungen */
    --transition-fast: .18s ease;  /* Einheitliche Hover-Transition */
    --max-width: 1080px;           /* Maximale Content-Breite */
}

/* Einheitliches Box-Modell für alle Elemente */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Reset von Standard-Margins */
html, body {
    margin: 0;
    padding: 0;
}

/* Globale Schrift- und Hintergrunddefinition */
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    background: radial-gradient(
            circle at top left,
            #fff5ec 0,
            var(--bg) 40%,
            #fdfdfd 100%
    );
    color: var(--text-main);
}

/* Zentrale Seitencontainer (Layout-Begrenzung) */
.container {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 24px 16px 40px;
}

/* Hauptüberschriften */
h1 {
    margin: 16px 0 28px;
    text-align: center;
    font-size: 2.1rem;
    letter-spacing: .03em;
}

/* =========================================================
   Card-Komponente
   Wiederverwendbares Container-Element für Inhalte
   ========================================================= */
.card {
    background: var(--bg-card);
    padding: 20px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-soft);
    margin-bottom: 30px;
    border: 1px solid rgba(0, 0, 0, .02);
}

/* Bilder innerhalb von Cards */
.card img {
    max-width: 40%;
    height: auto;
    border-radius: 8px;
}

/* =========================================================
   Button-Komponenten
   ========================================================= */
.button {
    padding: 10px 18px;
    border: 0;
    border-radius: 999px; /* Pillenform */
    background: linear-gradient(135deg, var(--accent), var(--accent-dark));
    color: #fff;
    cursor: pointer;
    font-size: .95rem;
    font-weight: 600;
    box-shadow: 0 6px 12px rgba(255, 107, 53, .35);
    transition:
            transform var(--transition-fast),
            box-shadow var(--transition-fast),
            background var(--transition-fast);
}

/* Hover-Effekt für primäre Buttons */
.button:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(255, 107, 53, .45);
    background: linear-gradient(135deg, var(--accent-dark), #d94b1b);
}

/* Sekundärer Button (z.B. Abbrechen, Zusatzaktionen) */
.secondary {
    background: #f1f1f1;
    color: var(--text-main);
    box-shadow: 0 4px 10px rgba(0, 0, 0, .04);
}

.secondary:hover {
    background: #e5e5e5;
}

/* Kritische Aktionen (z.B. Löschen) */
.danger {
    background: #e74c3c;
    box-shadow: 0 6px 12px rgba(231, 76, 60, .4);
}

.danger:hover {
    background: #c0392b;
}