html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

/* ==========================================
   FALLBEISPIEL-PROTOKOLL
   STATUS 112 INSPIRED DESIGN
   ========================================== */

:root {
    --s112-red: #e5091b;
    --s112-red-dark: #b80012;
    --s112-dark: #202a33;
    --s112-border: #dce1e6;
    --s112-light: #f4f6f8;
}

/* SEITENHINTERGRUND */

body {
    background-color: #f4f5f7;
    background-image: linear-gradient( rgba(30, 40, 50, 0.035) 1px, transparent 1px ), linear-gradient( 90deg, rgba(30, 40, 50, 0.035) 1px, transparent 1px );
    background-size: 65px 65px;
    color: var(--s112-dark);
    font-family: "Segoe UI", Arial, sans-serif;
}

/* OBERE NAVIGATIONSLEISTE */

.navbar {
    border-bottom: 3px solid var(--s112-red) !important;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

/* HAUPTINHALT */

.s112-app {
    max-width: 1150px;
}

    /* ==========================================
   KOPFBEREICH
   ========================================== */

    .s112-app > .text-center {
        position: relative;
        overflow: hidden;
        text-align: left !important;
        padding: 35px 40px;
        background: linear-gradient( 120deg, #ffffff 0%, #ffffff 65%, #eef0f3 100% );
        border: 1px solid var(--s112-border);
        border-left: 6px solid var(--s112-red);
        border-radius: 8px;
        box-shadow: 0 8px 28px rgba(20, 30, 40, 0.07);
    }

        /* Dekorative schräge Linien */

        .s112-app > .text-center::after {
            content: "";
            position: absolute;
            right: -75px;
            top: -30px;
            width: 300px;
            height: 300px;
            background: repeating-linear-gradient( 115deg, transparent 0px, transparent 52px, rgba(229, 9, 27, 0.12) 52px, rgba(229, 9, 27, 0.12) 68px, rgba(30, 40, 50, 0.06) 68px, rgba(30, 40, 50, 0.06) 82px, transparent 82px, transparent 130px );
            pointer-events: none;
        }

    /* Kleine Überschrift */

    .s112-app .s112-eyebrow {
        position: relative;
        z-index: 1;
        margin-bottom: 8px;
        color: var(--s112-red);
        font-size: 0.8rem;
        font-weight: 800;
        letter-spacing: 4px;
    }

    /* Hauptüberschrift */

    .s112-app h1 {
        position: relative;
        z-index: 1;
        margin-bottom: 20px;
        color: var(--s112-dark);
        font-size: clamp(2rem, 4.5vw, 3.8rem);
        font-weight: 900;
        font-style: italic;
        letter-spacing: -1.5px;
        line-height: 1.1;
        text-transform: uppercase;
    }

    /* TIMER */

    .s112-app #timer {
        position: relative;
        z-index: 1;
        color: var(--s112-red);
        font-size: clamp(2.4rem, 5vw, 4rem);
        font-weight: 800;
        letter-spacing: 3px;
        font-variant-numeric: tabular-nums;
    }

    /* STATUSANZEIGE */

    .s112-app #status {
        position: relative;
        z-index: 1;
        color: #606b76;
        font-weight: 600;
    }

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

    .s112-app .btn {
        min-height: 46px;
        padding: 10px 20px;
        border-radius: 5px;
        font-weight: 700;
        letter-spacing: 0.2px;
        transition: 0.15s ease;
    }

        .s112-app .btn:not(:disabled):active {
            transform: scale(0.98);
        }

    /* Startbutton */

    .s112-app #startButton {
        position: relative;
        z-index: 1;
        background: var(--s112-red);
        border-color: var(--s112-red);
        color: white;
    }

        .s112-app #startButton:hover {
            background: var(--s112-red-dark);
            border-color: var(--s112-red-dark);
        }

    /* Beenden-Button */

    .s112-app #stopButton {
        position: relative;
        z-index: 1;
        background: var(--s112-dark);
        border-color: var(--s112-dark);
        color: white;
    }

        .s112-app #stopButton:hover:not(:disabled) {
            background: #101820;
        }

    /* Reset-Button */

    .s112-app #resetButton {
        background: var(--s112-dark);
        border-color: var(--s112-dark);
        color: white;
    }

    /* ==========================================
   DOKUMENTATION UND AUSWERTUNG
   ========================================== */

    .s112-app #erfassung,
    .s112-app #auswertung {
        background: #ffffff;
        padding: 30px;
        border: 1px solid var(--s112-border);
        border-top: 5px solid var(--s112-red);
        border-radius: 8px;
        box-shadow: 0 8px 28px rgba(20, 30, 40, 0.05);
    }

    /* Bereichsüberschriften */

    .s112-app h2,
    .s112-app h3,
    .s112-app h4 {
        color: var(--s112-dark);
        font-weight: 800;
    }

    .s112-app #erfassung h3,
    .s112-app #auswertung h2,
    .s112-app #auswertung h3 {
        padding-bottom: 12px;
        border-bottom: 1px solid var(--s112-border);
    }

    /* ==========================================
   SCHEMA-AUSWAHL
   ========================================== */

    .s112-app details {
        margin-top: 12px;
    }

        /* Aufklappbare Oberthemen */

        .s112-app details > summary.btn {
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            min-height: 60px;
            padding: 15px 20px;
            background: var(--s112-dark);
            border: none;
            border-left: 5px solid var(--s112-red);
            border-radius: 5px;
            color: white;
            text-align: left;
            cursor: pointer;
            list-style: none;
        }

        .s112-app details > summary::-webkit-details-marker {
            display: none;
        }

        .s112-app details > summary::after {
            content: "+";
            font-size: 1.5rem;
            line-height: 1;
        }

        .s112-app details[open] > summary::after {
            content: "−";
        }

        .s112-app details > summary.btn:hover {
            background: #34414d;
        }

        /* Untermenü */

        .s112-app details > .mt-2 {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            padding: 18px;
            background: var(--s112-light);
            border: 1px solid var(--s112-border);
            border-radius: 5px;
        }

    /* Auswahlbuttons */

    .s112-app .massnahme {
        flex: 1 1 140px;
        min-height: 54px;
    }

    .s112-app .btn-outline-primary {
        color: var(--s112-red);
        border-color: var(--s112-red);
    }

        .s112-app .btn-outline-primary:hover {
            color: white;
            background: var(--s112-red);
            border-color: var(--s112-red);
        }

    /* ==========================================
   PROTOKOLL
   ========================================== */

    .s112-app .list-group {
        gap: 5px;
    }

    .s112-app .list-group-item {
        padding: 14px 18px;
        background: #f8f9fa;
        border: 1px solid var(--s112-border);
        border-left: 4px solid var(--s112-red);
        border-radius: 4px;
        font-size: 0.95rem;
    }

    /* ==========================================
   AUSWERTUNG
   ========================================== */

    .s112-app .alert {
        padding: 20px;
        border-radius: 5px;
        border-left-width: 6px;
        font-size: 1rem;
    }

    .s112-app .alert-success {
        border-left-color: #198754;
    }

    .s112-app .alert-warning {
        border-left-color: #e5a100;
    }

    .s112-app .alert-danger {
        border-left-color: #dc3545;
    }

    .s112-app .alert strong {
        font-size: 1.1rem;
    }

/* ==========================================
   IPAD / MOBILE OPTIMIERUNG
   ========================================== */

@media (max-width: 768px) {

    .s112-app > .text-center {
        padding: 25px 20px;
    }

    .s112-app .s112-eyebrow {
        letter-spacing: 2px;
        font-size: 0.7rem;
    }

    .s112-app h1 {
        letter-spacing: -0.5px;
    }

    .s112-app #erfassung,
    .s112-app #auswertung {
        padding: 20px 15px;
    }

    .s112-app #startButton,
    .s112-app #stopButton {
        width: 100%;
        margin: 5px 0;
    }

    .s112-app details > .mt-2 {
        padding: 12px;
    }
}