:root {
    --club-gruen: #006633;
    --club-gruen-dunkel: #004d26;
    --club-hintergrund: #f5f7f5;
    --club-weiss: #ffffff;
    --club-text: #222222;
    --club-grau: #666666;
}
/* =========================
   GRUNDLAGEN
   ========================= */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: var(--club-hintergrund);
    color: var(--club-text);
}


/* =========================
   STARTSEITE
   ========================= */

.startseite {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 40px 20px;
    text-align: center;
}

.startseite h1 {
    margin: 20px 0 10px;
    font-size: 32px;
    font-weight: normal;
    color: var(--club-gruen);
}

.willkommen {
    margin: 0 0 35px;
    font-size: 20px;
}


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

.start-buttons {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.btn {
    display: block;
    width: 100%;
    padding: 15px 20px;
    border-radius: 8px;
    background: var(--club-gruen);
    color: var(--club-weiss);
    text-decoration: none;
    font-size: 18px;
}

.btn:active {
    transform: scale(0.98);
}


/* =========================
   DESKTOP
   ========================= */

@media (min-width: 600px) {

    .startseite {
        padding-top: 80px;
    }

}

/* =========================
   FORMULAR
   ========================= */

.formularseite {
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    padding: 30px 20px 50px;
}

.formularseite h1 {
    margin: 10px 0 5px;
    text-align: center;
    font-size: 30px;
    font-weight: normal;
    color: var(--club-gruen);
}

.formularseite h2 {
    margin: 0 0 30px;
    text-align: center;
    font-size: 24px;
    font-weight: normal;
}


/* =========================
   FELDER
   ========================= */

.feld {
    margin-bottom: 20px;
}

.feld > label {
    display: block;
    margin-bottom: 7px;
    font-size: 16px;
    font-weight: bold;
}

.feld input[type="text"],
.feld input[type="email"],
.feld input[type="password"],
.feld input[type="number"] {
    width: 100%;
    padding: 13px;
    border: 1px solid #ccc;
    border-radius: 7px;
    background: white;
    font-size: 17px;
}

.feld input:focus {
    outline: none;
    border-color: var(--club-gruen);
}

.feld small {
    display: block;
    margin-top: 6px;
    color: var(--club-grau);
    line-height: 1.4;
}


/* =========================
   GESCHLECHT
   ========================= */

.auswahl {
    display: flex;
    gap: 25px;
}

.auswahl label {
    font-size: 17px;
    font-weight: normal;
}

.auswahl input {
    margin-right: 6px;
}


/* =========================
   BUTTON
   ========================= */

.formularseite .btn {
    border: 0;
    cursor: pointer;
    text-align: center;
}


/* =========================
   ZURÜCK
   ========================= */

.zurueck {
    display: block;
    margin-top: 25px;
    text-align: center;
    color: var(--club-gruen);
    text-decoration: none;
    font-size: 16px;
}

/* =========================
   CLUBSEITE
   ========================= */

.clubseite {
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
    padding: 25px 20px 50px;
}


/* =========================
   CLUB HEADER
   ========================= */

.club-header {
    padding: 25px 0 20px;
    text-align: center;
    border-bottom: 1px solid #ddd;
}

.club-header h1 {
    margin: 0 0 8px;
    color: var(--club-gruen);
    font-size: 28px;
    font-weight: normal;
    line-height: 1.2;
}

.club-header p {
    margin: 0;
    color: var(--club-grau);
    font-size: 16px;
}


/* =========================
   BENUTZER
   ========================= */

.club-benutzer {
    padding: 20px 0;
    text-align: center;
}

.club-benutzer p {
    margin: 0;
    font-size: 18px;
}

.club-benutzer strong {
    color: var(--club-gruen);
}


/* =========================
   ANWENDUNGEN
   ========================= */

.club-anwendungen {
    margin-top: 10px;
}

.club-anwendungen h2 {
    margin: 0 0 15px;
    font-size: 22px;
    font-weight: normal;
}


/* =========================
   ANWENDUNG
   ========================= */

.anwendung {
    display: block;
    padding: 18px 20px;
    border-radius: 8px;
    background: var(--club-weiss);
    border: 1px solid #ddd;
    color: var(--club-text);
    text-decoration: none;
}

.anwendung strong {
    display: block;
    margin-bottom: 5px;
    color: var(--club-gruen);
    font-size: 19px;
}

.anwendung span {
    display: block;
    color: var(--club-grau);
    font-size: 15px;
    line-height: 1.4;
}

.anwendung:active {
    transform: scale(0.99);
}


/* =========================
   ABMELDEN
   ========================= */

.club-abmelden {
    margin-top: 35px;
    text-align: center;
}


/* =========================
   DESKTOP
   ========================= */

@media (min-width: 600px) {

    .clubseite {
        padding-top: 50px;
    }

}

.kopf h1 {
    display: flex;
    align-items: center;
    gap: 10px;
}

.persoenlich-link {
    text-decoration: none;
    font-size: 20px;
    line-height: 1;
}

/* =================================================
   MEINE ANWENDUNGEN
   ================================================= */

.anwendung {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}


/* Beschreibung */

.anwendung > div {
    display: flex;
    flex-direction: column;
    gap: 4px;
}


/* =========================================
   ANWENDUNGS-SCHALTER
   ========================================= */

.anwendung form {
    margin: 0;
    flex-shrink: 0;
}


.anwendung form button {
    position: relative;

    width: 58px;
    height: 30px;

    padding: 0;

    border: none;
    border-radius: 30px;

    background: #aaa;

    font-size: 0;
    cursor: pointer;
}


/* Punkt im Schalter */

.anwendung form button::after {
    content: "";

    position: absolute;

    top: 3px;
    left: 3px;

    width: 24px;
    height: 24px;

    border-radius: 50%;

    background: white;

    transition: left 0.2s ease;
}


/* =========================================
   AKTIVER SCHALTER
   ========================================= */

.anwendung form:has(
    input[name="aktion"][value="deaktivieren"]
) button {
    background: var(--club-gruen, #006633);
}


.anwendung form:has(
    input[name="aktion"][value="deaktivieren"]
) button::after {
    left: 31px;
}