/**
 * frontend-custom.css – Projektspezifische Anpassungen
 * 
 * Diese Datei ist für projektspezifische Überschreibungen gedacht.
 * Sie wird NACH frontend.css geladen und hat daher Vorrang.
 * 
 * Hier können ohne Risiko eigene Farben, Schriften, Logos und
 * Layout-Anpassungen eingetragen werden – frontend.css bleibt unberührt.
 * 
 * Beispiele:
 *   - Andere Primärfarbe statt #c00
 *   - Eigenes Logo im Header
 *   - Andere Schriftart
 *   - Kundenspezifisches Layout
 * 
 * Für dieses Projekt (Stockhausen): Anpassungen hier eintragen.
 */


/* ============================================================
   Beispiel: Primärfarbe ändern
   Einfach auskommentieren und anpassen:
   ============================================================ */

/*
:root {
    --color-primary: #c00;       ← Hauptfarbe (Standard: Rot)
    --color-primary-dark: #a00;  ← Hover-Farbe
    --color-header-bg: #c00;     ← Header-Hintergrund
}

#header { background: var(--color-header-bg); }
.btn-primary { background: var(--color-primary); }
.btn-primary:hover { background: var(--color-primary-dark); }
.bestellliste-table th { background: var(--color-primary); }
.liefer-tag.aktiv { background: var(--color-primary); }
*/


/* ============================================================
   Beispiel: Eigene Schriftart
   ============================================================ */

/*
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600&display=swap');
body { font-family: 'Open Sans', sans-serif; }
*/


/* ============================================================
   Projektspezifische Anpassungen für Stockhausen
   ============================================================ */

/* Hier eigene Styles eintragen: */


/* ============================================================
   Login-Screen – Stockhausen Design
   ============================================================ */

body {
    background: #c7c9bd;
    font-family: Calibri, Verdana, Arial, Helvetica, sans-serif;
}

body::after {
    content: '';
    display: block;
    background: #cc0000;
    height: 18px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

/* Header-Bild */
#login-header {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

#login-header-img {
    width: 100%;
    display: block;
    height: auto;
    max-height: 500px;
    object-fit: cover;
}

/* Roter Balken unter dem Bild */
#login-header-red-bar {
    background: #cc0000;
    height: 18px;
}

/* Formular-Bereich */
#login-content {
    display: flex;
    justify-content: center;
    padding: 40px 20px;
}

.login-wrapper {
    background: transparent;
    box-shadow: none;
    border: none;
    padding: 0;
    width: 226px;
    max-width: calc(100vw - 48px);
}

.login-wrapper .form-group {
    margin-bottom: 10px;
}

.login-wrapper .form-group label {
   margin-bottom: 0px;
}

.login-wrapper h2 {
    color: #cc0000;
    font-size: 1.4em;
    margin-bottom: 16px;
    font-weight: bold;
}

.login-wrapper label {
    font-size: 0.9em;
    color: #333;
    display: block;
}

.login-wrapper input[type=text],
.login-wrapper input[type=password] {
    width: 100%;
    padding: 10px 40px;
    border: 1px solid #c7cbd2;
    border-radius: 4px;
    display: block;
    margin-bottom: 0;
    font-size: 1.05em;
    font-family: inherit;
    box-sizing: border-box;
    background: #f8f8f8;
    color: #4b4b4b;
}

.login-wrapper input[type=text]::placeholder,
.login-wrapper input[type=password]::placeholder {
    color: #9a9a9a;
}

.login-wrapper input[type=text]:focus,
.login-wrapper input[type=password]:focus {
    outline: none;
    border-color: #b6bcc6;
    box-shadow: 0 0 0 1px rgba(150, 160, 175, 0.15);
}

.login-input-wrap {
    position: relative;
    width: 100%;
}

.login-input-wrap::before {
    content: "";
    position: absolute;
    left: 14px;
    top: 50%;
    width: 22px;
    height: 22px;
    transform: translateY(-50%);
    opacity: 0.55;
    background-size: 22px 22px;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}

.login-input-user::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868686' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 21a8 8 0 0 0-16 0'/%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3C/svg%3E");
}

.login-input-pass::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868686' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='10' width='16' height='10' rx='2'/%3E%3Cpath d='M8 10V7a4 4 0 1 1 8 0v3'/%3E%3C/svg%3E");
}

.login-input-pass::after {
    content: none;
}

.login-pass-toggle {
    position: absolute;
    right: 12px;
    top: 50%;
    width: 24px;
    height: 24px;
    transform: translateY(-50%);
    border: 0;
    padding: 0;
    margin: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
    cursor: pointer;
    opacity: 0.6;
}

.login-pass-toggle:hover {
    opacity: 0.9;
}

.login-pass-toggle:focus {
    outline: none;
}

.login-pass-toggle {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868686' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3.5-6 10-6 10 6 10 6-3.5 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E");
}

.login-pass-toggle.is-visible {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23868686' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3l18 18'/%3E%3Cpath d='M10.58 10.58A3 3 0 0 0 13.42 13.42'/%3E%3Cpath d='M9.88 5.09A10.94 10.94 0 0 1 12 5c6.5 0 10 7 10 7a19.11 19.11 0 0 1-4.13 5.12'/%3E%3Cpath d='M6.61 6.61C3.41 8.58 2 12 2 12s3.5 7 10 7c1.2 0 2.32-.19 3.33-.53'/%3E%3C/svg%3E");
}

/* Login-Button – analog zu bestellen/css/style.css ab Zeile 567 */
.loginbutton {
    background: url(../img/loginbutton.png) repeat-x #ec281b;
    border-radius: 6px;
    border: none;
    padding: 10px 0;
    font-size: 2em;
    font-weight: bold;
    color: #fff;
    width: 100%;
    margin-top: 18px;
    cursor: pointer;
    display: block;
    font-size: 3.1em;
    font-weight: 100;
    border: 1px solid #ddd;
    text-decoration: none;
}

.loginbutton:hover {
    background: url('../img/loginbutton_over.png') repeat-x #ec281b;
    color: #fff;
    cursor: pointer;
    border: 1px solid #ddd;
    text-decoration: none;
}

.login-error {
    background: #fdd;
    border: 1px solid #c00;
    color: #c00;
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 12px;
    font-size: 0.9em;
    width: 100%;
}

/* Mobile: anderes Header-Bild */
@media (max-width: 600px) {
    #login-header-img {
        content: url('../img/stockhausen_loginscreen_mobile.jpg');
    }
}