/* =========================================
   Design Tokens
========================================= */
:root {
    --app-bg-1: #fff7ea;
    --app-bg-2: #ffe7bd;
    --card-bg: #fff;
    --text: #212529;
    --muted: #6c757d;
    --focus-ring: rgba(13, 110, 253, .15);
    --focus-border: rgba(13, 110, 253, .45);
    --shadow-soft: 0 .5rem 1rem rgba(0, 0, 0, .05);
    --radius-lg: 1.25rem;
    --radius-md: .9rem;
    --radius-sm: .75rem;
}

/* =========================================
   Base
========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--text);
    margin: 0;
    background-color: #f8f9fa;
    /* Fallback, falls .app-bg nicht genutzt wird */

}

/* Hintergrund-Deko für die Card-Variante */
.app-bg {
    min-height: 100vh;
    background:
        radial-gradient(1200px 600px at 20% 0%, var(--app-bg-2), transparent 60%),
        radial-gradient(1200px 600px at 80% 100%, var(--app-bg-1), transparent 60%),
        #fff;
}

/* =========================================
   Container / Karten
   (du nutzt entweder .form-container ODER Bootstrap-Card mit .form-card)
========================================= */
.form-container {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--card-bg);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .1);
}

.form-card {
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--card-bg);
    box-shadow: var(--shadow-soft);
}

.form-card .card-body {
    border-radius: var(--radius-lg);
}

/* =========================================
   Form Controls
========================================= */
.form-control,
.form-select,
.input-group-text {
    border-radius: var(--radius-sm);
}

.form-check-input {
    width: 2.5rem;
    /* hübscher Switch/Checkbox */
    height: 1.3rem;
    cursor: pointer;
}

.form-control:focus,
.form-select:focus {
    box-shadow: 0 0 0 .2rem var(--focus-ring);
    border-color: var(--focus-border);
}

/* Submit-Button */
.btn-primary {
    border-radius: var(--radius-md);
    padding-top: .7rem;
    padding-bottom: .7rem;
    box-shadow: var(--shadow-soft);
}

/* =========================================
   Helpers
========================================= */
/* Smoothes Ein-/Ausblenden des kg-Feldes */
#kgEingabe {
    transition: all .3s ease;
}

/* Kleiner Datenschutz-Text */
.datenschutz-hinweis {
    font-size: 12px;
    /* vorher extrem klein (8px) -> besser lesbar */
    line-height: 1.4;
    color: var(--muted);
    margin-top: 15px;
    text-align: center;
}

/* Button-Icon minimal ausrichten */
.btn svg {
    display: inline-block;
    vertical-align: middle;
}

/* Bootstrap Validation: etwas sanftere Ränder */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid {
    border-color: #dc3545;
}

.was-validated .form-control:valid,
.was-validated .form-select:valid {
    border-color: #198754;
}


/* =========================================
   Accessibility / Motion
========================================= */
@media (prefers-reduced-motion: reduce) {
    #kgEingabe {
        transition: none;
    }
}

/* =========================================
   Responsive Fine-Tuning
========================================= */
@media (max-width: 420px) {
    .card-body {
        padding: 1.25rem;
    }

    h2 {
        font-size: 1.35rem;
    }
}