@charset "UTF-8";

/* =====================================
   EINSATZ.PHP – KOMPLETT NEU
   ===================================== */

/* =========================
   HERO / KOPFBEREICH
   ========================= */

.hero--einsatz .hero__frame--einsatz{
  position: relative;
}

/* Bannerbild */
.hero--einsatz .heroBanner{
  height: 320px;
  background: url("../assets/img/einsatz-kopf.jpg") center/cover no-repeat;
  position: relative; /* WICHTIG */
}

.hero--einsatz .einsatzNavToggle{
  display: none;
}

.einsatzHeroTitle{
  position: absolute;
  left: 24px;          /* linksbündig mit Abstand */
  top: 30%;            /* vertikal Mitte */
  transform: translateY(-50%);  /* exakt zentrieren in der Höhe */

  color: #fff;
  font-weight: 900;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1.1;
  text-align: left;

  z-index: 20;
  pointer-events: auto;
}

/* =========================
   DESKTOP LAYOUT
   ========================= */

/* Zwei Spalten: links Navigation, rechts Bericht */
.hero--einsatz .einsatzTop{
  display: grid;
  grid-template-columns: 420px 1fr;
  gap: 28px;
  align-items: start;
  margin-top: -90px; /* zieht Boxen etwas ins Banner */
  position: relative;
  z-index: 2;
}

/* GANZ WICHTIG:
   Startseiten-HeroPanel komplett neutralisieren */
.hero--einsatz .heroPanel{
  position: static !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  top: auto !important;

  display: block !important;
  grid-template-columns: none !important;
  width: 100% !important;
  max-width: none !important;

  background: var(--signal2);
  color: #21211D;
  padding: 0;
  margin: 0;
}

/* Linke Spalte */
.hero--einsatz .heroPanel--einsatz{
  grid-column: 1;
  align-self: start;
}

/* rechte Berichtsspalte */
.hero--einsatz .einsatzReportNew{
  grid-column: 2;
  width: 100%;
  min-width: 0;
}

/* Falls vom Startseiten-Hero noch linke Boxen mitkommen */
.hero--einsatz .heroPanel__left{
  display: none !important;
}

.hero--einsatz .heroPanel__right{
  width: 100%;
  padding: 16px 18px 18px;
  box-sizing: border-box;
}

/* Navigation */
.hero--einsatz .heroLinksWebYep{
  width: 100%;
}

.hero--einsatz .heroLinksWebYep a{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.18);
  font-weight: 800;
  font-size: 15.5px;
  text-decoration: none;
  color: inherit;
}

/* =========================
   MOBILE TOGGLE BUTTON
   ========================= */

.einsatzNavToggle{
  display: none;
  border: 0;
  background: var(--signal2);
  color: #000;
  font-weight: 900;
  letter-spacing: .6px;
  cursor: pointer;
}

.einsatzNavToggle__bars{
  width: 26px;
  height: 18px;
  position: relative;
  display: inline-block;
}

.einsatzNavToggle__bars::before,
.einsatzNavToggle__bars::after{
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background: #000;
  border-radius: 2px;
}

.einsatzNavToggle__bars::before{
  top: 1px;
  box-shadow: 0 7px 0 #000;
}

.einsatzNavToggle__bars::after{
  bottom: 1px;
}

/* =========================
   EINSATZ-REPORT
   ========================= */

.einsatzReportNew{
  background: #fff;
  border: 1px solid var(--line);
  padding: 22px;
  box-sizing: border-box;
}

/* Kopfbereich */
.einsatzHead{
  background: var(--leftbg);
  border: 1px solid var(--line);
  padding: 22px;
}

.einsatzHead__top{
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 18px;
  align-items: start;
  margin-bottom: 16px;
}

.einsatzNr{
  display: grid;
  gap: 6px;
}

.einsatzLabel{
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
}

.einsatzValue{
  font-weight: 900;
  font-size: 24px;
}

.einsatzMeta{
  display: grid;
  grid-auto-flow: column;
  gap: 18px;
  align-items: start;
}

.metaItem{
  display: grid;
  gap: 6px;
}

.metaLabel{
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
}

.metaValue{
  font-weight: 900;
  font-size: 16px;
  line-height: 1.35;
}

.einsatzStrength{
  display: grid;
  gap: 6px;
  justify-items: end;
}

.einsatzStrength .metaValue{
  background: #fff;
  border: 1px solid var(--line);
  padding: 8px 10px;
  font-weight: 900;
}

/* Stichwort / Ort */
.einsatzHead__main{
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 18px;
  align-items: start;
}

.kLabel{
  display: block;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.einsatzKeyword{
  background: #fff;
  border: 1px solid var(--line);
  padding: 14px;
}

.kCode{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 18px;
  margin-bottom: 6px;
}

.kCode::before{
  content: "";
  width: 10px;
  height: 10px;
  background: var(--logorot);
  display: inline-block;
}

.kText{
  color: rgba(11,20,48,.85);
  font-size: 15.5px;
  line-height: 1.45;
}

.einsatzPlace{
  background: #fff;
  border: 1px solid var(--line);
  padding: 14px;
}

.placeText{
  font-size: 15.5px;
  line-height: 1.45;
  color: rgba(11,20,48,.88);
}

.placeText *{
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Grid mit Kräften */
.einsatzGrid{
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 18px;
  margin-top: 18px;
}

.einsatzCard{
  border: 1px solid var(--line);
  background: #fff;
  padding: 18px;
  min-width: 0;
}

.einsatzCard--side{
  background: var(--navy);
  color: #fff;
  border-color: rgba(255,255,255,.14);
}

.cardTitle{
  margin: 0 0 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
}

.cardTitle::after{
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  background: var(--logorot);
  margin-top: 8px;
}

.sideText{
  font-size: 15.5px;
  line-height: 1.55;
  color: rgba(255,255,255,.92);
}

.sideText *{
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Galerie / Fahrzeuge */
.vehicles .WebYepGalleryImage{
  border: 0;
  border-radius: 0;
  margin: 0;
}

.vehicles img{
  width: 100%;
  height: auto;
  display: block;
}

.vehiclesNote{
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(11,20,48,.85);
}

.vehiclesNote *{
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* Bericht */
.einsatzStory{
  margin-top: 18px;
  border: 1px solid var(--line);
  background: #fff;
  padding: 18px;
}

.storyTitle{
  margin: 0 0 10px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 14px;
  position: relative;
}

.storyTitle::after{
  content: "";
  display: block;
  width: 28px;
  height: 3px;
  background: var(--logorot);
  margin-top: 8px;
}

.storyBody{
  font-size: 16px;
  line-height: 1.6;
  color: rgba(11,20,48,.88);
}

.storyBody *{
  max-width: 100%;
  overflow-wrap: break-word;
  word-break: break-word;
}

/* =========================
   EINSATZLISTE
   ========================= */

.einsatzList{
  padding: 40px 0 70px;
}

.einsatzList__title{
  margin: 0 0 20px;
  font-weight: 900;
  font-size: 32px;
}

.einsatzTable{
  display: grid;
  gap: 8px;
}

.einsatzRow{
  display: grid;
  grid-template-columns: 130px 220px 220px 1fr;
  gap: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
  transition: 0.2s ease;
}

.einsatzRow:hover{
  background: #e7e7df;
}

.einsatzCol{
  font-size: 15px;
  font-weight: 700;
}

.einsatzCol--date{
  font-weight: 900;
}

.heroLinksWebYep a{
  position: relative;
}

.heroLinksWebYep a.webyepActive,
.heroLinksWebYep a.WebYepMenuItemActive{
  background: #000;
  color: #fff;
  padding-left: 12px;
}

.heroLinksWebYep a.webyepActive::before,
.heroLinksWebYep a.WebYepMenuItemActive::before{
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--logorot);
}

/* =========================
   MOBILE
   ========================= */

@media (max-width: 900px){

  .hero--einsatz .hero__frame--einsatz{
    position: relative;
  }

 
@media (max-width: 900px){
  .hero--einsatz .heroBanner{
    height: 220px;
  }

  .hero--einsatz .einsatzNavToggle{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    left: 12px;
    bottom: 12px;
    z-index: 100;
    height: 56px;
    padding: 0 16px;
    background: var(--signal2);
    color: #000;
    border: 0;
    font-weight: 900;
    letter-spacing: .6px;
    box-shadow: 0 10px 26px rgba(0,0,0,.14);
  }
}
  .hero--einsatz .einsatzNavToggle__bars{
    width: 26px;
    height: 18px;
    position: relative;
    display: inline-block;
  }

  .hero--einsatz .einsatzNavToggle__bars::before,
  .hero--einsatz .einsatzNavToggle__bars::after{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 3px;
    background: #000;
    border-radius: 2px;
  }

  .hero--einsatz .einsatzNavToggle__bars::before{
    top: 1px;
    box-shadow: 0 7px 0 #000;
  }

  .hero--einsatz .einsatzNavToggle__bars::after{
    bottom: 1px;
  }

  /* Layout untereinander */
  .hero--einsatz .einsatzTop{
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 0;
  }

  /* Menüblock neutral */
  .hero--einsatz .heroPanel,
  .hero--einsatz .heroPanel--einsatz{
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .hero--einsatz .heroPanel__right{
    width: 100%;
    padding: 0 !important;
  }

  /* Menü standardmäßig zu */
  .hero--einsatz .heroLinksWebYep{
    display: none;
    width: 100%;
    background: var(--signal2);
    padding: 12px 18px 14px;
    box-sizing: border-box;
  }

  /* Wenn offen */
  .hero--einsatz .heroPanel--einsatz.is-nav-open .heroLinksWebYep{
    display: block;
  }

  .hero--einsatz .heroLinksWebYep a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 10px;
    border-bottom: 1px solid rgba(0,0,0,.18);
    font-size: 16px;
    text-decoration: none;
    color: inherit;
    position: relative;
  }

  /* Bericht darunter */
  .hero--einsatz .einsatzReportNew{
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}
/* =========================
   Aktiver Einsatz im Menü
   ========================= */

/* =========================
   Einsatz-Menü Pfeil rechts
   ========================= */

.heroLinksWebYep a{
  position: relative;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 0;
  text-decoration:none;
  color:inherit;
}

/* Pfeil rechts */
.heroLinksWebYep a::after{
  content:"→";
  font-weight:700;
  color:#000;
  transition:.15s ease;
}

/* aktiver Einsatz */
.heroLinksWebYep a.is-active{
  background:#F0ECC8;  /* helleres Gelb */
  font-weight:900;
}

/* Pfeil aktiv */
.heroLinksWebYep a.is-active::after{
  color:var(--logorot);
  font-weight:1500;
}