/* =========================================================
   Fahrschule Schulz Jena
   Cassiopeia Extended – eigenes Design
   ========================================================= */

:root {
    --fs-blue: #0b5fa5;
    --fs-blue-dark: #08477c;
    --fs-yellow: #f2c200;
    --fs-yellow-hover: #d9ad00;
    --fs-white: #ffffff;
    --fs-light: #f7f7f7;
    --fs-gray: #e0e0e0;
    --fs-text: #333333;

    --cassiopeia-color-primary: var(--fs-blue);
    --cassiopeia-color-link: var(--fs-blue);
    --cassiopeia-color-hover: var(--fs-blue-dark);
}

/* Grundlayout */

body {
    background: var(--fs-light);
    color: var(--fs-text);
    font-family: Arial, Helvetica, sans-serif;
}

/* Kopfbereich */

.container-header {
    background: var(--fs-blue);
    background-image: none;
    color: var(--fs-white);
}

.container-header .navbar-brand,
.container-header .site-description {
    color: var(--fs-white);
}

/* Navigation */

.container-header .mod-menu {
    color: var(--fs-white);
}

.container-header .mod-menu > li > a {
    color: var(--fs-white);
    font-weight: 600;
    text-decoration: none;
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li.active > a {
    color: var(--fs-yellow);
}

/* Links */

a {
    color: var(--fs-blue);
}

a:hover {
    color: var(--fs-blue-dark);
}

/* Überschriften */

h1,
h2,
h3,
h4 {
    color: var(--fs-blue);
    font-weight: 700;
}

/* Buttons */

.btn-primary {
    background-color: var(--fs-blue);
    border-color: var(--fs-blue);
    color: var(--fs-white);
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--fs-blue-dark);
    border-color: var(--fs-blue-dark);
}

/* Gelber Aktionsbutton – später z.B. "Jetzt anmelden" */

.btn-fahrschule {
    display: inline-block;
    padding: .75rem 1.4rem;
    background: var(--fs-yellow);
    color: #111;
    border: 0;
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none;
}

.btn-fahrschule:hover {
    background: var(--fs-yellow-hover);
    color: #111;
}

/* Inhaltsbereich */

.site-grid {
    background: var(--fs-white);
}

/* Footer */

.container-footer {
    background: var(--fs-blue-dark);
    background-image: none;
    color: var(--fs-white);
}

.container-footer a {
    color: var(--fs-white);
}

.container-footer a:hover {
    color: var(--fs-yellow);
}
/* =========================================================
   Header und Logo Fahrschule Schulz
   ========================================================= */

/* Header kompakter */
.container-header {
    padding-top: 0;
    padding-bottom: 0;
}

/* Logo-Bereich */
.container-header .navbar-brand {
    margin: 0;
    padding: 12px 0 6px 0;
}

/* Logo-Größe */
.container-header .navbar-brand img {
    width: auto;
    height: auto;
    max-width: 600px;
    max-height: 150px;
    object-fit: contain;
}

/* Navigation näher ans Logo */
.container-header .container-nav {
    padding-top: 0;
    padding-bottom: 10px;
}

/* Menü etwas kräftiger */
.container-header .mod-menu > li > a {
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}
/* =========================================================
   Startseite – Inhaltsblöcke
   ========================================================= */

/* Allgemeiner Abstand der Bereiche */
.fs-intro,
.fs-kurse,
.fs-ausbildung,
.fs-kontakt {
    margin-bottom: 2.5rem;
}

/* Trennlinien etwas dezenter */
.fs-intro + hr,
.fs-kurse + hr,
.fs-ausbildung + hr {
    border: 0;
    border-top: 1px solid var(--fs-gray);
    margin: 2rem 0;
}

/* Kurskarten */
.fs-kurs {
    background: #eef6fc;
    border-left: 5px solid var(--fs-blue);
    border-radius: 6px;
    padding: 1.1rem 1.25rem;
    margin-bottom: 1rem;
}

.fs-kurs h3 {
    margin-top: 0;
    margin-bottom: .35rem;
}

/* Drei Ausbildungsbereiche als Kacheln */
.fs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 1.25rem;
}

.fs-grid > div {
    background: var(--fs-light);
    border: 1px solid var(--fs-gray);
    border-top: 4px solid var(--fs-blue);
    border-radius: 6px;
    padding: 1.25rem;
}

.fs-grid h3 {
    margin-top: 0;
}

/* Kontaktblock */
.fs-kontakt {
    background: #eef6fc;
    border-radius: 6px;
    padding: 1.5rem;
}

.fs-kontakt h2 {
    margin-top: 0;
}

/* Telefonnummern und Mail etwas deutlicher */
.fs-kontakt a {
    font-weight: 700;
}

/* Mobile Darstellung */
@media (max-width: 768px) {
    .fs-grid {
        grid-template-columns: 1fr;
    }

    .fs-kurs,
    .fs-grid > div,
    .fs-kontakt {
        padding: 1rem;
    }
}
/* Kurskarten etwas markanter */
.fs-kurs {
    border-left-color: var(--fs-yellow);
    padding: 1rem 1.2rem;
}

.fs-kurs h3 {
    color: var(--fs-blue-dark);
}

/* Intro etwas kompakter */
.fs-intro {
    margin-bottom: 1.8rem;
}

/* Überschriftenabstände harmonisieren */
.fs-kurse h2,
.fs-ausbildung h2,
.fs-kontakt h2 {
    margin-bottom: 1rem;
}
/* =========================================================
   Kontakt – Aktionsbuttons
   ========================================================= */

.fs-contact-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 1.25rem;
}

/* WhatsApp-Button im Fahrschul-Blau */
.btn-whatsapp {
    display: inline-block;
    padding: .75rem 1.4rem;
    background: var(--fs-blue);
    color: var(--fs-white) !important;
    border: 1px solid var(--fs-blue);
    border-radius: 4px;
    font-weight: 700;
    text-decoration: none !important;
}

.btn-whatsapp:hover,
.btn-whatsapp:focus {
    background: var(--fs-blue-dark);
    border-color: var(--fs-blue-dark);
    color: var(--fs-white) !important;
}

/* Mobile Darstellung */
@media (max-width: 520px) {
    .fs-contact-actions {
        flex-direction: column;
    }

    .fs-contact-actions a {
        width: 100%;
        text-align: center;
    }
}
/* =========================================================
   Führerschein – Fahrerlaubnisklassen
   ========================================================= */

.fs-license-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin: 2rem 0 2.5rem;
}

.fs-license-card {
    background: var(--fs-light);
    border: 1px solid var(--fs-gray);
    border-top: 4px solid var(--fs-blue);
    border-radius: 6px;
    padding: 1.4rem;
}

.fs-license-card h3 {
    margin-top: 0;
    font-size: 1.45rem;
    color: var(--fs-blue);
}

.fs-license-card p:last-child {
    margin-bottom: 0;
}

.fs-license-cta {
    background: #eef6fc;
    padding: 1.5rem;
    border-radius: 6px;
    margin-top: 2rem;
}

.fs-license-cta h2 {
    margin-top: 0;
}

@media (max-width: 768px) {
    .fs-license-grid {
        grid-template-columns: 1fr;
    }
}
.fs-license-card:last-child {
    grid-column: 1 / -1;
}

.fs-license-cta {
    margin-top: 1.5rem;
}
/* =========================================================
   Ausbildung
   ========================================================= */

.fs-training-steps {
    display: grid;
    gap: 1rem;
    margin: 2rem 0;
}

.fs-training-card {
    display: flex;
    gap: 1.25rem;
    align-items: flex-start;
    background: var(--fs-light);
    border: 1px solid var(--fs-gray);
    border-left: 4px solid var(--fs-blue);
    border-radius: 6px;
    padding: 1.25rem;
}

.fs-step-number {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 42px;
    width: 42px;
    height: 42px;

    background: var(--fs-blue);
    color: var(--fs-white);
    border-radius: 50%;

    font-size: 1.15rem;
    font-weight: 700;
}

.fs-training-card h3 {
    margin-top: 0;
    margin-bottom: .4rem;
}

.fs-training-card p:last-child {
    margin-bottom: 0;
}

.fs-training-highlight {
    background: #eef6fc;
    border-left: 5px solid var(--fs-yellow);
    border-radius: 6px;
    padding: 1.5rem;
    margin: 2rem 0;
}

.fs-training-highlight h2 {
    margin-top: 0;
}

@media (max-width: 600px) {
    .fs-training-card {
        gap: .9rem;
        padding: 1rem;
    }

    .fs-step-number {
        flex-basis: 36px;
        width: 36px;
        height: 36px;
    }
}
/* =========================================================
   Aktuelles
   ========================================================= */

.fs-current-courses {
    display: grid;
    gap: 1.25rem;
    margin: 2rem 0;
}

.fs-current-course {
    display: flex;
    gap: 1.4rem;
    align-items: center;

    background: #eef6fc;
    border: 1px solid var(--fs-gray);
    border-left: 5px solid var(--fs-yellow);
    border-radius: 6px;

    padding: 1.3rem 1.4rem;
}

.fs-current-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    flex: 0 0 78px;
    min-height: 78px;

    background: var(--fs-blue);
    color: var(--fs-white);
    border-radius: 6px;
}

.fs-current-day {
    font-size: 2rem;
    line-height: 1;
    font-weight: 700;
}

.fs-current-month {
    margin-top: .25rem;
    font-size: .95rem;
    font-weight: 700;
    text-transform: uppercase;
}

.fs-current-content h3 {
    margin: 0 0 .35rem;
}

.fs-current-content p:last-child {
    margin-bottom: 0;
}

@media (max-width: 600px) {
    .fs-current-course {
        align-items: flex-start;
        gap: 1rem;
        padding: 1rem;
    }

    .fs-current-date {
        flex-basis: 62px;
        min-height: 62px;
    }

    .fs-current-day {
        font-size: 1.6rem;
    }
}
.fs-current-course {
    align-items: flex-start;
}

.fs-current-content h3 {
    margin-top: 0;
}
.container-header .mod-menu {
    gap: 1.2rem;
}

/* FS-SMOOTH-SLIDER */
.fs-css-slider{position:relative;width:100%;height:clamp(210px,30vw,440px);overflow:hidden;background:#16395b}
.fs-css-slider .fs-css-slide{position:absolute;inset:0;margin:0;opacity:0;animation:fsSliderFade 21s infinite linear;will-change:opacity}
.fs-css-slider .fs-css-slide:nth-child(2){animation-delay:-14s}
.fs-css-slider .fs-css-slide:nth-child(3){animation-delay:-7s}
.fs-css-slider img{display:block;width:100%;height:100%;object-fit:cover;object-position:center center}
@keyframes fsSliderFade{0%,28.571%{opacity:1}33.333%,95.238%{opacity:0}100%{opacity:1}}


/* FS-RESPONSIVE-2026 */
@media (max-width:991.98px){
 .container-header .navbar-brand{padding:8px 0 4px;max-width:calc(100% - 64px)}
 .container-header .navbar-brand img{max-width:100%;max-height:96px;height:auto}
 .container-header .container-nav{padding-bottom:6px}
 .container-header .navbar-toggler{color:#fff;border-color:rgba(255,255,255,.6);min-width:44px;min-height:44px}
 .container-header .mod-menu{gap:0}
 .container-header .mod-menu>li>a{padding:.7rem .85rem}
 .fs-css-slider{height:clamp(200px,45vw,340px)}
}
@media (max-width:600px){
 .container-header .navbar-brand img{max-height:76px}
 .fs-css-slider{height:clamp(180px,56vw,260px)}
 .fs-css-slider img{object-position:center center}
 main .grid-child{padding-left:1rem;padding-right:1rem}
 h1{font-size:clamp(1.75rem,8vw,2.2rem)}
 h2{font-size:clamp(1.4rem,6.5vw,1.8rem)}
 h3{font-size:clamp(1.15rem,5.5vw,1.4rem)}
 .fs-kontakt a,.fs-contact a{overflow-wrap:anywhere}
 .fs-contact-actions a{min-height:44px;display:flex;align-items:center;justify-content:center}
}


/* FS-MOBILE-MENU-COMPACT */
@media (max-width: 991.98px) {
  .container-header .mod-menu {
    row-gap: 0 !important;
  }
  .container-header .mod-menu > li {
    margin: 0 !important;
  }
  .container-header .mod-menu > li > a {
    min-height: 44px;
    padding: .4rem .75rem !important;
    display: flex;
    align-items: center;
  }
}


/* FS-MOBILE-MENU-LI-PADDING */
@media (max-width: 991.98px) {
  .container-header .mod-menu > li {
    padding: 0 !important;
  }
}


/* FS-MOBILE-TOGGLER-FINE */
@media (max-width: 991.98px) {
  .container-header .navbar-toggler {
    border-width: 1px !important;
    border-radius: 4px;
    box-shadow: none !important;
    outline: 1px solid rgba(255,255,255,.35);
    outline-offset: 1px;
  }
  .container-header .navbar-toggler:focus,
  .container-header .navbar-toggler:focus-visible {
    box-shadow: none !important;
    outline: 1px solid rgba(255,255,255,.65);
    outline-offset: 1px;
  }
}


/* FS-DESKTOP-NAV-AND-FULL-TEAM-PHOTOS */
@media (min-width:900px) and (max-width:991.98px){
 .container-header .navbar.navbar-expand-lg{flex-wrap:nowrap;justify-content:flex-start}
 .container-header .navbar.navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto}
 .container-header .navbar.navbar-expand-lg .navbar-toggler{display:none!important}
 .container-header .navbar.navbar-expand-lg .mod-menu{display:flex!important;flex-direction:row!important;flex-wrap:wrap}
}
main .fs-training-card>img[src*="20241213_"]{
 height:auto!important;
 object-fit:contain!important;
 object-position:center top!important;
}