/* ===== Schulmail RLP SSP Theme ===== */

/* ===== Fonts: Fira Sans (SOGo WebServerResources) ===== */
@font-face{
    font-family:"Fira Sans";
    src:url("https://schulen.rlp.de/SOGo.woa/WebServerResources/fonts/FiraSans-Thin.woff") format("woff");
    font-weight:100;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:"Fira Sans";
    src:url("https://schulen.rlp.de/SOGo.woa/WebServerResources/fonts/FiraSans-Light.woff") format("woff");
    font-weight:300;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:"Fira Sans";
    src:url("https://schulen.rlp.de/SOGo.woa/WebServerResources/fonts/FiraSans-Regular.woff") format("woff");
    font-weight:400;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:"Fira Sans";
    src:url("https://schulen.rlp.de/SOGo.woa/WebServerResources/fonts/FiraSans-Book.woff") format("woff");
    font-weight:500;
    font-style:normal;
    font-display:swap;
}
@font-face{
    font-family:"Fira Sans";
    src:url("https://schulen.rlp.de/SOGo.woa/WebServerResources/fonts/FiraSans-Medium.woff") format("woff");
    font-weight:600;
    font-style:normal;
    font-display:swap;
}

html, body{
    font-family:"Fira Sans", Arial, sans-serif;
}
body, input, select, textarea, button{
    font-family: inherit;
}

/* Farb-Variablen (Bildungsportal-RLP Look) */
:root{
    --ssp-primary: #0b9aa0;        /* Türkis (kräftig) */
    --ssp-primary-dark: #087f84;   /* Hover/Active */
    --ssp-bg: #f4f7f8;             /* Seitenhintergrund */
    --ssp-card-bg: #ffffff;
    --ssp-border: rgba(0,0,0,.15);

    --ssp-info-bg: #e6f6f7;        /* helles Türkis */
    --ssp-success-bg: #d8f2f3;     /* success box */
    --ssp-warn-bg: #fff3cd;        /* warning box */

    --ssp-warn-bar: #e6b200;       /* gelber Balken */
    --ssp-text: #1b1f23;

    --ssp-bar-w: 16px;             /* << doppelt so breit (war i.d.R. ~8px) */
}

/* Alles eckig */
.btn,
.form-control,
.input-group-addon,
.input-group-text,
.alert,
.panel,
.panel-heading,
.panel-body,
.well,
.thumbnail,
.navbar,
.dropdown-menu,
.card,
.card-header,
.card-body{
    border-radius: 0 !important;
    border: none;
}

/* Keine unnötigen Schatten */
.panel,
.card,
.well{
    box-shadow: none !important;
}

/* Grundlayout */
html, body{ height: 100%; }
body{
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    background: var(--ssp-bg);
    color: var(--ssp-text);
}

/* Der Bootstrap-Container ist bei dir das Wrapper-Element: zentrieren */
body > .container{
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;   /* vertikal mittig */
    align-items: center;       /* horizontal mittig */
    padding: 24px 12px;
}

/* Card nicht über die Container-Breite hinaus */
body > .container .card{
    width: min(980px, 100%);
    background: var(--ssp-card-bg);
    border: 1px solid var(--ssp-border) !important;
}

/* WICHTIG: keinen äußeren Rahmen-/Balken-Effekt am Card */
body > .container .card::before{
    content: none !important;
}
body > .container .card,
body > .container .card.card-success{
    border-left: 0px solid var(--ssp-border) !important;
}

/* Footer unter der Card, zentriert */
#footer{
    flex: 0 0 auto;
    text-align: center;
    width: 100%;
    margin: 10px 0 24px;
    padding: 0 12px;
    opacity: .85;
}

@media (max-height: 700px){
    body > .container{ justify-content: flex-start; }
}

/* Branding oben */
.ssp-branding{
    text-align: center;
    margin: 18px 0 12px;
}
.ssp-branding img{
    max-width: 360px;
    width: 85%;
    height: auto;
    display: inline-block;
}

/* Titelbox (kein Verlauf, kräftiges Türkis) */
.ssp-titlebox{
    border: 1px solid var(--ssp-border);
    background: var(--ssp-primary);
    color: #fff;
    padding: 16px 18px;
    margin: 0 0 16px;
    text-align: center;
}
.ssp-titlebox h1{
    margin: 0;
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}

/* ===== Linke Farbbalken (doppelt breit) =====
   Für Success/Warning/Info-Boxen – gerade Kante, keine Rundung */
.result.alert,
.help.alert,
.alert.alert-info{
    position: relative;
    border: 1px solid var(--ssp-border) !important;
    padding: 14px 16px 14px calc(var(--ssp-bar-w) + 16px) !important; /* Platz für Balken */
    margin-bottom: 14px;
}

.result.alert::before,
.help.alert::before,
.alert.alert-info::before{
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--ssp-bar-w);
    background: var(--ssp-primary);
}

/* Farben je Box */
.result.alert{
    background: var(--ssp-success-bg) !important;
}
.result.alert::before{
    background: var(--ssp-primary);
}

.help.alert{
    background: var(--ssp-warn-bg) !important;
}
.help.alert::before{
    background: var(--ssp-warn-bar);
}

.alert.alert-info{
    background: var(--ssp-info-bg) !important;
}
.alert.alert-info::before{
    background: var(--ssp-primary);
}

/* ===== Text-Ausrichtung (rote Linie) =====
   Icons + Text als Flex -> Zeilenumbruch bleibt bündig eingerückt */
.result.alert,
.help.alert{
    display: flex;
    align-items: flex-start;
    gap: 12px;                 /* Abstand Icon -> Text */
}

/* Icon optisch sauber */
.result.alert > i.fa,
.help.alert > i.fa{
    flex: 0 0 auto;
    margin-top: 2px;
}

/* Icon-Farben passend */
.result.alert > i.fa{ color: var(--ssp-primary-dark); }
.help.alert > i.fa{ color: #8a6d00; }

/* ===== Form/Inputs im Info-Block ===== */
.input-group-text{
    background: var(--ssp-primary) !important;
    border-color: var(--ssp-primary) !important;
    color: #fff !important;
}
.input-group-text i{ color:#fff !important; }

/* Inputs */
.form-control{
    border: 1px solid rgba(0,0,0,.25) !important;
}
.form-control:focus{
    border-color: var(--ssp-primary) !important;
    box-shadow: none !important;
}

/* Button (Senden) */
.btn.btn-success{
    background: var(--ssp-primary) !important;
    border-color: var(--ssp-primary) !important;
    color: #fff !important;
    font-weight: 600;
}
.btn.btn-success:hover,
.btn.btn-success:focus{
    background: var(--ssp-primary-dark) !important;
    border-color: var(--ssp-primary-dark) !important;
    box-shadow: none !important;
}

/* Captcha refresh icon spacing (dein bestehendes Detail) */
#captcha-refresh{
    margin-left: 10px;
    cursor: pointer;
    color: var(--ssp-primary-dark);
}
#captcha-refresh:hover{
    color: var(--ssp-primary);
}
/* Outer thin frame komplett entfernen */
body > .container .card{
    border: 0 !important;
    background: #fff;
}

/* falls Bootstrap/Theme noch was reinmogelt */
body > .container .card,
body > .container .card *{
    outline: 0 !important;
}
body > .container .card{
    box-shadow: none !important;
}
/* === Fix: dünner linker Rahmen/Strich entfernen (Wrapper/Container) === */
html, body{
    margin: 0 !important;
    border: 0 !important;
}

body{
    border-left: 0 !important;
    overflow-x: hidden; /* verhindert 1px-Überläufe */
}

/* Bootstrap-Container/Wrapper: keine Borders/Frames */
body > .container,
.container{
    border: 0 !important;
    border-left: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Falls ein Theme den Frame über Pseudo-Elemente zeichnet */
body > .container::before,
body > .container::after,
.container::before,
.container::after{
    content: "" !important;
    display: none !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Optional: wenn der dünne Rahmen von der Card kommt */
body > .container .card{
    border: 0 !important;
}