/* =========================================
   FFR – Hell + Sand (PSA-inspiriert, dezent)
   Sand:   #c09f72
   Navy:   #101421
   Accent: #c8e444 (sehr sparsam)
========================================= */

/* =========================================
   Variablen
========================================= */
:root{
  --ffr-sand: #c09f72;
  --ffr-sand-soft: rgba(192,159,114,.18);
  --ffr-bg: #fbfaf7;
  --ffr-text: #101421;
  --ffr-navy: #101421;
  --ffr-navy-2: #212831;
  --ffr-accent: #c8e444;
  --ffr-border: #e9e3d8;
}

/* =========================================
   Grundlayout
========================================= */
*{ box-sizing: border-box; }

body{
  background: var(--ffr-bg);
  color: var(--ffr-text);
}

/* Links */
a{ color: var(--ffr-navy); }
a:hover, a:focus{
  color: var(--ffr-navy-2);
  text-decoration: underline;
  text-decoration-color: var(--ffr-sand);
  text-underline-offset: .2em;
}

/* =========================================
   TOP HEADER (oberhalb des Menüs)
   Ziel:
   - PC: sichtbar, nicht mini
   - Smartphone: kompakt
   - NICHT abschneiden (contain / auto-height)
   - Restfläche Sand
   Hinweis:
   - Wenn du im Template ein <div class="ffr-top-header"><img ...></div> nutzt:
     -> IMG-Styles greifen automatisch.
   - Falls du nur ein leeres <div class="ffr-top-header"></div> nutzt:
     -> Background-Styles greifen automatisch.
========================================= */

/* Container */
.ffr-top-header{
  width: 100%;
  background: var(--ffr-sand);
  border-bottom: 1px solid rgba(0,0,0,.08);
  overflow: hidden;

  /* Höhe – bewusst moderat, damit es am PC nicht "zu groß" wirkt */
  height: clamp(90px, 7vw, 150px);

  /* Zentriert Inhalt für IMG-Variante */
  display: flex;
  align-items: center;
  justify-content: center;
}

/* A) FALL: Background-Variante (DIV ohne IMG) */
.ffr-top-header{
  background-image: url("/images/00.headerundfavicon/Header_Neu_02.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: auto 100%; /* Höhe voll, Breite ergibt sich -> kein Abschneiden */
}

/* B) FALL: IMG-Variante (empfohlen) */
.ffr-top-header img{
  height: 100%;
  width: auto;
  max-width: 100%;
  object-fit: contain; /* niemals beschneiden */
  display: block;
}

/* Mobile: etwas niedriger, aber immer präsent */
@media (max-width: 991.98px){
  .ffr-top-header{ height: 90px; }
}
@media (max-width: 576px){
  .ffr-top-header{ height: 78px; }
}

/* =========================================
   Header / Navigation (Cassiopeia)
========================================= */
.header, .header .navbar, .navbar{
  background: var(--ffr-sand) !important;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.header .container,
.header .container-fluid,
.navbar .container,
.navbar .container-fluid{
  max-width: none !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.header, .navbar{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.navbar{
  padding-top: .35rem !important;
  padding-bottom: .35rem !important;
}

.navbar a, .navbar .navbar-brand, .header a{
  color: var(--ffr-text) !important;
}

.navbar a:hover, .navbar a:focus{
  color: var(--ffr-navy) !important;
  text-decoration-color: var(--ffr-accent);
}

/* =========================================
   Buttons / Cards
========================================= */
.btn-primary{
  background: var(--ffr-navy);
  border-color: var(--ffr-navy);
}
.btn-primary:hover, .btn-primary:focus{
  background: var(--ffr-navy-2);
  border-color: var(--ffr-navy-2);
}

.card{
  border: 1px solid var(--ffr-border);
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.05);
}

.bg-light{
  background: var(--ffr-sand-soft) !important;
}

/* Überschriften: dezente Sand-Linie */
h2::after, .h2::after{
  content:"";
  display:block;
  width:3.25rem;
  height:.18rem;
  margin-top:.45rem;
  background: rgba(192,159,114,.95);
  border-radius:999px;
}

/* =========================================
   Notruf / Alerts
========================================= */
.alert-warning{
  background: rgba(192,159,114,.18);
  border-color: rgba(16,20,33,.12);
  border-left: .35rem solid rgba(192,159,114,.95);
}

.breadcrumb, .page-header{
  background: transparent;
}

/* =========================================
   Footer
========================================= */
.footer, footer{
  background: var(--ffr-sand) !important;
  color: var(--ffr-text) !important;
  border-top: 1px solid rgba(0,0,0,.08);
}

.footer a, footer a{
  color: var(--ffr-text) !important;
}

.footer .btn-outline-light, footer .btn-outline-light{
  color: var(--ffr-text);
  border-color: rgba(16,20,33,.35);
}

.footer .btn-outline-light:hover, footer .btn-outline-light:hover{
  background: rgba(16,20,33,.06);
  border-color: rgba(16,20,33,.55);
}

/* =========================================
   Footer-Menü (Kontakt / Datenschutz / Impressum)
   Fix für Smartphone: 2 Spalten + letzter Button volle Breite
========================================= */

/* UL als flex-wrap Layout */
.footer .mod-menu > .nav,
footer .mod-menu > .nav{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  padding-left: 0;
  margin: 0 0 1rem;
  list-style: none;
}

/* Link wie Button */
.footer .mod-menu > .nav > li > a,
footer .mod-menu > .nav > li > a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .55rem 1.1rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  border: 1px solid rgba(16,20,33,.35);
  color: var(--ffr-text) !important;
  background: transparent;
}

/* Hover dezent */
.footer .mod-menu > .nav > li > a:hover,
footer .mod-menu > .nav > li > a:hover{
  background: rgba(16,20,33,.06);
}

/* Mobile Verhalten */
@media (max-width: 576px){

  /* 2 Spalten */
  .footer .mod-menu > .nav > li,
  footer .mod-menu > .nav > li{
    flex: 0 0 calc(50% - .375rem);
  }

  /* Links füllen die Spalte */
  .footer .mod-menu > .nav > li > a,
  footer .mod-menu > .nav > li > a{
    width: 100%;
  }

  /* Letzter Button (Impressum) über volle Breite + zentriert */
  .footer .mod-menu > .nav > li:last-child,
  footer .mod-menu > .nav > li:last-child{
    flex: 0 0 100%;
    display: flex;
    justify-content: center;
  }

  .footer .mod-menu > .nav > li:last-child > a,
  footer .mod-menu > .nav > li:last-child > a{
    width: auto;
    min-width: 60%;
    text-align: center;
  }
}

/* =========================================
   HERO im Startseiten-Artikel
   Hinweis: Du nutzt jetzt ein <img> im .ffr-hero (statt background-image).
   Desktop: cover (heroartig)
   Mobile/Tablet: contain (komplettes Bild, kein Abschneiden)
========================================= */
.ffr-hero{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  margin-bottom: 1.25rem;
}

/* Desktop-Höhe: heroartig */
@media (min-width: 992px){
  .ffr-hero{
    height: clamp(280px, 40vh, 520px);
    background: #000;
  }
  .ffr-hero img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
}

/* Mobile/Tablet: Seitenverhältnis behalten (kein Abschneiden) */
@media (max-width: 991.98px){
  .ffr-hero{
    height: auto;
    background: var(--ffr-sand);
  }
  .ffr-hero img{
    width: 100%;
    height: auto;
    object-fit: contain;
    display: block;
  }
}

/* Wenn Sidebar existiert: Hero nicht auf 100vw ziehen */
.has-sidebar .ffr-hero,
.site-grid .ffr-hero{
  width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* =========================================
   Mitmachen – Bildkacheln (quadratisch)
========================================= */
.ffr-tile{
  display: block;
  text-decoration: none;
}

.ffr-tile__media{
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 .4rem 1rem rgba(0,0,0,.12);
  background: #000;
}

.ffr-tile__media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.ffr-tile__overlay{
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
  padding: 1.1rem 1rem;
  background: linear-gradient(
    180deg,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,.65) 100%
  );
  color: #fff;
}

.ffr-tile__overlay h3{
  margin: 0;
  font-size: 1.2rem;
  font-weight: 700;
}

.ffr-tile__overlay p{
  margin: .25rem 0 0;
  font-size: .95rem;
  opacity: .9;
}

.ffr-tile__media:hover img{
  transform: scale(1.04);
}

@media (max-width: 768px){
  .ffr-tile__media{
    max-width: 260px;
  }
}

/* =========================================
   Ausbildung: Bilder (1:1)
========================================= */
.ffr-img-square{
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 14px;
  box-shadow: 0 .4rem 1.2rem rgba(0,0,0,.10);
  background: #fff;
}

.ffr-img-square img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================
   Ausbildung: Timeline
========================================= */
.ffr-timeline{
  display: grid;
  gap: 1rem;
}

.ffr-step{
  display: block;
  background: #fff;
  border: 1px solid rgba(16,20,33,.10);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  box-shadow: 0 .25rem .75rem rgba(0,0,0,.05);
}

.ffr-step__num{ display: none; }

.ffr-step__content,
.ffr-step__content *{
  min-width: 0;
}

.ffr-step__content p{
  max-width: none;
}

.ffr-substeps{
  display: grid;
  gap: .8rem;
  margin-top: .75rem;
}

.ffr-substep{
  background: rgba(192,159,114,.14);
  border: 1px solid rgba(192,159,114,.35);
  border-radius: 10px;
  padding: .85rem .9rem;
}

.ffr-step ul{
  margin: .35rem 0 0 1.1rem;
}
.ffr-step li{
  margin: .15rem 0;
}

/* =========================================
   CTA
========================================= */
.ffr-cta{
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  background: rgba(192,159,114,.14);
  border: 1px solid rgba(192,159,114,.35);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
}

.ffr-cta__text{
  flex: 1 1 380px;
}

.ffr-cta__actions{
  flex: 0 0 auto;
}

@media (max-width: 768px){
  .ffr-img-square{ max-width: 100%; }
  .ffr-cta{
    flex-direction: column;
    align-items: flex-start;
  }
}

/* =========================================
   Medien-Kacheln (Standard 16:9)
========================================= */
.ffr-task-media{
  aspect-ratio: 16 / 9;
  width: 100%;
  overflow: hidden;
  border-top-left-radius: .5rem;
  border-top-right-radius: .5rem;
  background: #000;
}

.ffr-task-media img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.ffr-task-media--square{
  aspect-ratio: 1 / 1;
}

.ffr-task-media--contain img{
  object-fit: contain;
  background: rgba(16,20,33,.08);
}

.ffr-task-media--placeholder{
  background: rgba(16,20,33,.08);
}

.ffr-task-placeholder{
  height: 100%;
  display: grid;
  place-items: center;
  font-weight: 700;
  opacity: .7;
}

/* =========================================
   Cassiopeia: 3. Ebene als Flyout
========================================= */
.container-header .navbar .dropdown-menu li,
.header .navbar .dropdown-menu li,
.navbar .dropdown-menu li{
  position: relative;
}

@media (min-width: 992px){
  .container-header .navbar .dropdown-menu li > ul,
  .header .navbar .dropdown-menu li > ul,
  .navbar .dropdown-menu li > ul{
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-top: -0.25rem;
    margin-left: .15rem;

    background: #fff;
    border: 1px solid rgba(16,20,33,.10);
    border-radius: .5rem;
    box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.12);
    padding: .35rem 0;
    min-width: 220px;
    z-index: 3000;
  }

  .container-header .navbar .dropdown-menu li:hover > ul,
  .header .navbar .dropdown-menu li:hover > ul,
  .navbar .dropdown-menu li:hover > ul,
  .container-header .navbar .dropdown-menu li:focus-within > ul,
  .header .navbar .dropdown-menu li:focus-within > ul,
  .navbar .dropdown-menu li:focus-within > ul{
    display: block;
  }

  .container-header .navbar .dropdown-menu li > ul a,
  .header .navbar .dropdown-menu li > ul a,
  .navbar .dropdown-menu li > ul a{
    display: block;
    padding: .45rem 1rem;
    white-space: nowrap;
  }
}

@media (max-width: 991.98px){
  .container-header .navbar .dropdown-menu li > ul,
  .header .navbar .dropdown-menu li > ul,
  .navbar .dropdown-menu li > ul{
    display: block;
    position: static;
    margin: .25rem 0 0;
    padding-left: .75rem;
    border: 0;
    box-shadow: none;
    background: transparent;
  }
}

/* =========================================
   Social Buttons im Footer (Variante 1)
========================================= */
.ffr-social{
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  justify-content: center;
  margin: 1.5rem 0 1rem;
}

.ffr-social a{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .9rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: .9rem;

  background: rgba(16,20,33,.08);
  color: var(--ffr-text);
  border: 1px solid rgba(16,20,33,.15);

  transition: all .2s ease;
}

.ffr-social a:hover,
.ffr-social a:focus{
  background: rgba(16,20,33,.15);
  transform: translateY(-1px);
}