/* Grundlegender Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Hintergrundbild und Zentrierung */
html, body {
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
    background: url('../bilder/hgApp3B.jpg') no-repeat center/cover fixed;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Unsichtbarer Container (nur für Zentrierung und Textausrichtung) */
.container {
    text-align: center;
    /* kein Hintergrund, keine Ränder, keine Schatten */
}

/* Spruch-Container: Abstand nach unten */
.spruch {
    margin-bottom: 30px;
    /* Weiß, damit Text gut auf dem Bild lesbar ist */
    color: #242527;
}

/* "Bestellen & Suchen" etwas größer gestalten */
.spruch-oben {
    display: block;           /* Zeilenumbruch */
    font-size: 2.5em;         /* vorher war 2em, jetzt 2.5em */
    margin-bottom: 10px;      /* kleinen Abstand zur nächsten Zeile */
    color: #e2e0e0;
}

/* "TegoAPP" beibehaltend auf 3em, © in extra kleinem Format */
.spruch-unten {
    display: block;
    font-size: 4em;
    line-height: 1;           /* keine zusätzliche Vertikal-Lücke */
    color: #e3e5eb;
}

/* ©-Zeichen deutlich kleiner */
.spruch-unten .copyright {
    font-size: 0.3em;         /* nur halb so groß wie "TegoAPP" */
    vertical-align: super;    /* hochgestellt neben dem Schriftzug */
    margin-left: -18px;         /* Abstand zwischen "TegoAPP" und "©" */
}

/* Button-Styling (etwas größer als vorher) */
.btn-login {
    display: inline-block;
    padding: 14px 52px;       /* vorher 12px 24px, jetzt breiter und höher */
    font-size: 1.5rem;       /* vorher 1rem, jetzt 1.25rem */
    text-decoration: none;
    color: #e1dfdf;
    background-color: #242527;
    border-radius: 10px;
    transition: background-color 0.2s ease-in-out;
}

.btn-login:hover {
    background-color: #353639;
    animation: borderGlow 2s linear infinite;
}

/* ---------- Keyframes für animierten Licht-Rand ----------- */
@keyframes borderGlow {
    0%, 100% {
        box-shadow:
            inset 0 2px 6px rgba(255,255,255,0.8),
            5px 5px 20px rgba(0, 0, 0, 0.6);
    }
    25% {
        box-shadow:
            inset 2px 0 6px rgba(255,255,255,0.8),
            5px 5px 20px rgba(0, 0, 0, 0.6);
    }
    50% {
        box-shadow:
            inset 0 -2px 6px rgba(255,255,255,0.8),
            5px 5px 20px rgba(0, 0, 0, 0.6);
    }
    75% {
        box-shadow:
            inset -2px 0 6px rgba(255,255,255,0.8),
            5px 5px 20px rgba(0, 0, 0, 0.6);
    }
}