/* =========================
   Design Tokens (wie frontend.css)
   ========================= */
:root{
  --fwe-radius: 18px;
  --fwe-radius-sm: 14px;

  --fwe-border: rgba(0,0,0,.10);
  --fwe-soft: rgba(0,0,0,.03);

  --fwe-blue: #0b3a73;
  --fwe-red: #c21d2e;

  --fwe-text: rgba(0,0,0,.88);
  --fwe-muted: rgba(0,0,0,.70);

  --fwe-shadow: 0 10px 28px rgba(0,0,0,.08);

  /* optional aus Vorlage */
  --fwe-bg:#ffffff;
  --fwe-ink: var(--fwe-text);
  --fwe-accent: var(--fwe-red);
  --fwe-accent2: var(--fwe-blue);
}

/* =========================
   Buttons: Elementor
   ========================= */
.fwe-wrap .elementor-button,
.fwe-card .elementor-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:10px 16px;
  border-radius:999px !important;
  border:1px solid rgba(11,58,115,.22);
  background: rgba(11,58,115,.08);
  color: var(--fwe-blue) !important;
  transform:none !important;
  font-weight:900 !important;
  line-height:1;
  text-decoration:none !important;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease, opacity .15s ease, color .15s ease;
}

.fwe-wrap .elementor-button:hover,
.fwe-wrap .elementor-button:focus,
.fwe-card .elementor-button:hover,
.fwe-card .elementor-button:focus{
  transform: translateY(-1px) !important;
  box-shadow: 0 12px 24px rgba(0,0,0,.07);
  border-color: rgba(11,58,115,.30);
  background: rgba(11,58,115,.12);
  color: var(--fwe-blue) !important;
  text-decoration:none !important;
}

/* =========================
   Globaler Fix nur für FWE-UI:
   Verhindert Overflows durch Theme/Elementor box-sizing/content-box
   ========================= */
.fwe-card,
.fwe-cardsub,
.fwe-card * ,
.fwe-cardsub *{
  box-sizing: border-box;
}

/* =========================
   Base
   ========================= */
.fwe-card{
  background:#fff;
  border:1px solid var(--fwe-border);
  border-radius:var(--fwe-radius);
  box-shadow:var(--fwe-shadow);
  overflow-x: visible;
  overflow-y: hidden;
  color: var(--fwe-text);
  padding:18px !important;
}

.fwe-cardsub{
  margin-top:16px;
  background:#fff;
  border:1px solid var(--fwe-border);
  border-radius:var(--fwe-radius);
  box-shadow:var(--fwe-shadow);
  overflow:hidden;
  color: var(--fwe-text);
  padding:18px !important;
}

.fwe-muted{
  opacity:1;
  color: var(--fwe-muted);
}

.fwe-link{ text-decoration:none; color:inherit; }
.fwe-link:hover{ text-decoration:underline; }

.fwe-ic-emoji{
  display:inline-flex;
  align-items:center;
  margin-right:8px;
  line-height:1;
}

/* =========================
   Chips / Badges (wie Vorlage)
   ========================= */
.fwe-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 12px;
  border-radius:999px;
  border:1px solid var(--fwe-border);
  background: var(--fwe-soft);
  font-weight:900;
  white-space:nowrap;
}

.fwe-chiprow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
  justify-content:flex-start;
  padding-left:0;
  padding-right:0;
}

.fwe-chip{
  display:inline-flex;
  align-items:center;
  gap:8px !important;
  padding:7px 11px;
  border-radius:999px;
  border:1px solid var(--fwe-border);
  background:#fff;
  font-weight:900 !important;
  font-size:12px !important;
  line-height:1;
  color: var(--fwe-text);
  text-decoration:none;
  white-space:nowrap;
}

.fwe-chip--muted{
  background: var(--fwe-soft);
  color: var(--fwe-text);
}

.fwe-chip--strong{
  border-color: rgba(11,58,115,.35);
  background: rgba(11,58,115,.08);
  color: var(--fwe-text);
}

.fwe-chip--link:hover{
  border-color: rgba(194,29,46,.35);
  background: rgba(194,29,46,.06);
}

/* Optional legacy alarm chips (falls noch irgendwo genutzt) */
.fwe-alarm-chip{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid var(--fwe-border);
  background: var(--fwe-soft);
}

/* =========================
   Legacy Layout (falls noch genutzt)
   ========================= */
.fwe-einsatz__header{
  display:flex;
  gap:16px;
  justify-content:space-between;
  align-items:flex-start;
  margin-bottom:14px;
}
.fwe-einsatz__headline{
  margin:0;
  font-size:1.35rem;
  line-height:1.2;
  font-weight:900;
  color: var(--fwe-blue);
}
.fwe-einsatz__nr{
  margin-top:6px;
  font-size:.95rem;
  color: var(--fwe-muted);
}
.fwe-einsatz__badges{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.fwe-einsatz__grid{
  display:grid;
  grid-template-columns: 1.4fr .9fr;
  gap:16px;
}
@media (max-width: 880px){
  .fwe-einsatz__grid{grid-template-columns:1fr;}
}

.fwe-meta{display:flex; flex-direction:column; gap:10px;}
.fwe-meta__row{
  display:grid;
  grid-template-columns: 20px 120px 1fr;
  gap:10px;
  align-items:center;
}
@media (max-width: 520px){
  .fwe-meta__row{grid-template-columns: 20px 1fr;}
  .fwe-meta__value{grid-column:2/3;}
}

.fwe-ic{display:inline-flex; width:18px; height:18px; opacity:.9;}
.fwe-ic svg{width:18px; height:18px;}

.fwe-side{display:flex; flex-direction:column; gap:14px;}
.fwe-block__title{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight:900;
  color: var(--fwe-blue);
  margin-bottom:8px;
}
.fwe-list{
  list-style:none;
  padding:0;
  margin:0;
  display:flex;
  flex-direction:column;
  gap:6px;
}
.fwe-list__item{display:flex; align-items:baseline; gap:8px;}

.fwe-einsatz__content{margin-top:14px;}
.fwe-einsatz__bericht{line-height:1.6;}

/* =========================
   Shortcode: [fw_einsatz_list] + reuse (auch fw_einsatz_year Jahresliste)
   ========================= */
.fwe-listwrap{padding:0;}
.fwe-listhead{padding:18px 18px 10px;}
.fwe-listtitle{font-weight:900; font-size:18px; color: var(--fwe-blue);}

.fwe-rows{display:flex; flex-direction:column;}
/* Nur im Shortcode [fw_einsatz_list]: obere Linie beim ersten Eintrag entfernen */
.fwe-listwrap--latest .fwe-rows .fwe-row:first-child{
  border-top:none;
}

.fwe-row{
  display:grid;
  grid-template-columns: 260px 1fr 150px; /* links mehr Raum, rechts schmaler */
  gap:14px;
  padding:14px 18px;
  border-top:1px solid var(--fwe-border);
  text-decoration:none;
  color:inherit;
  background:#fff;
}
.fwe-row:hover{background: rgba(11,58,115,.04);}

/* Link-Unterstreichung im Row-Link unterbinden (Theme/Elementor setzt oft underline) */
.fwe-row{ text-decoration:none !important; }
.fwe-row *{ text-decoration:none !important; }

/* Nur Titel bei Hover unterstreichen */
.fwe-row:hover .fwe-row__title{ text-decoration: underline !important; }

/* Desktop: Icon + Datum/Uhrzeit als zusammengehoeriger Block */
.fwe-row__left{
  display:flex;
  gap:12px;
  align-items:center;
}

/* DT-Schaltung */
.fwe-row__dt--left{ display:block; }
.fwe-row__dt--mid{ display:none; }

.fwe-row__icon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(11,58,115,.08);
  font-size:20px;
}

.fwe-row__dt{line-height:1.15;}
.fwe-row__date{font-weight:900;}
.fwe-row__time{color: var(--fwe-muted); margin-top:2px;}

.fwe-row__mid{min-width:0;}
.fwe-row__title{
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fwe-row__meta{margin-top:6px; display:flex; flex-wrap:wrap; gap:8px;}

.fwe-row__right{
  text-align:right;
  display:flex;
  flex-direction:column;
  gap:8px;
  justify-content:center;
}

/* Mobile: Einsatznummer ueber Chips */
.fwe-row__nr--inline{margin-top:8px;}
@media (min-width: 861px){
  .fwe-row__nr--inline{display:none;}
}

/* =========================
   Shortcode: [fw_einsatz_details]
   ========================= */
.fwe-detail__head{margin-bottom:12px;}

.fwe-detail__title{
  margin:0;
  font-weight:900;
  font-size:28px;
  line-height:1.12;
  letter-spacing:-.2px;
}

.fwe-detail__rule{
  margin-top:12px;
  height:3px;
  width:140px;
  background: linear-gradient(90deg, var(--fwe-red), var(--fwe-blue));
  border-radius:999px;
}

.fwe-boxgrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
}

.fwe-box{
  border:1px solid var(--fwe-border);
  border-radius: var(--fwe-radius);
  padding:14px !important;
  background:#fff;
}

.fwe-box--span2{grid-column: span 2;}

.fwe-box__label{
  font-weight:900;
  color: var(--fwe-blue);
  margin-bottom:10px;
  text-transform:none;
}

.fwe-box__value{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}

.fwe-box__stack{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:stretch;
}

.fwe-kv{
  display:grid;
  grid-template-columns: 24px 100px 1fr;
  gap:10px;
  align-items:center;
}
.fwe-kv__k, .fwe-kv__v{display:inline-flex; align-items:center;}
.fwe-kv__k strong {font-weight:900;}
.fwe-kv__v strong {font-weight:500;}

.fwe-detail__berichtlabel{
  font-weight:900;
  color: var(--fwe-blue);
  margin-bottom:8px;
}

.fwe-veh-ic{
  width:22px;
  height:22px;
  object-fit:contain;
  display:inline-block;
}

/* [fw_einsatz_details] - inline row (Fix fuer Umbruch) */
.fwe-inline{
  display:flex;
  align-items:flex-start;
  gap:10px;
}
.fwe-inline__text{
  min-width:0;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* =========================
   Shortcode: [fw_einsatz_year]
   ========================= */
.fwe-year__head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  padding:18px 18px 8px;
}
.fwe-year__title{font-weight:900; font-size:18px; color: var(--fwe-blue);}
.fwe-year__form{display:flex; gap:10px; align-items:center; margin:0;}
.fwe-year__label{font-weight:900; color: var(--fwe-muted);}
.fwe-year__select{
  border:1px solid var(--fwe-border);
  border-radius:14px;
  padding:10px 12px;
  background:#fff;
  font-weight:900;
}

/* =========================
   Stats: Grid/Flex darf nicht über den Container hinaus wachsen
   ========================= */
.fwe-year__head{
  flex-wrap: wrap;
}

.fwe-year__form,
.fwe-year__select{
  max-width:100%;
}

.fwe-statsgrid{
  width:100%;
  max-width:100%;
}

.fwe-statcard{
  width:100%;
  max-width:100%;
  min-width:0;
}

.fwe-kpis{
  width:100%;
  max-width:100%;
  min-width:0;
}

.fwe-kpi{
  min-width:0; /* extrem wichtig bei Grid, sonst kann Inhalt das Grid sprengen */
}

.fwe-kpi__k,
.fwe-kpi__v{
  min-width:0;
  overflow-wrap:anywhere;
}

.fwe-statsgrid{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:12px;
  padding:8px 18px 18px;
}

.fwe-statcard{
  border:1px solid var(--fwe-border);
  border-radius: var(--fwe-radius);
  background:#fff;
  padding:14px;
}
.fwe-statcard--span2{grid-column: span 2;}
.fwe-statcard__title{font-weight:900; color: var(--fwe-blue); margin-bottom:10px;}
.fwe-statcard__chart{overflow:auto;}
.fwe-statcard__hint{margin-top:6px; font-size:12px; color: var(--fwe-muted);}

.fwe-svg{width:100%; height:auto; color: var(--fwe-blue);}

.fwe-kpis{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
  margin-bottom:10px;
}

/* Jahres-KPIs als 2x2 auf Desktop */
.fwe-kpis.fwe-kpis--2{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.fwe-kpi{
  border:1px solid var(--fwe-border);
  border-radius: var(--fwe-radius-sm);
  padding:12px;
  background: rgba(11,58,115,.04);
}
.fwe-kpi__k{font-weight:900; color: var(--fwe-muted); font-size:12px;}
.fwe-kpi__v{font-weight:900; font-size:18px; margin-top:4px; color: var(--fwe-text);}

.fwe-kpi__v a,
.fwe-kpi__vlink{
  font-weight:900 !important;
  font-size:18px !important;
  color: var(--fwe-text) !important;
  text-decoration: underline !important;
  line-height:1.2;
}
.fwe-kpi__v a:hover,
.fwe-kpi__vlink:hover{
  text-decoration: none !important;
}

.fwe-year__listhead{padding:0 18px 10px;}
.fwe-year__listtitle{font-weight:900; font-size:16px; color: var(--fwe-text);}

/* Einsatzarten Liste untereinander */
.fwe-statlist{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fwe-statrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:10px 12px;
  border:1px solid var(--fwe-border);
  border-radius: var(--fwe-radius-sm);
  background: rgba(11,58,115,.04);
}
.fwe-statrow__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.fwe-statrow__name{
  font-weight:900;
  color: var(--fwe-text);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fwe-statrow__val{
  font-weight:900;
  color: var(--fwe-text);
}

/* Top-Schlagwoerter */
.fwe-toplist{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.fwe-toprow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 12px;
  border:1px solid var(--fwe-border);
  border-radius: var(--fwe-radius-sm);
  background:#fff;
}
.fwe-toprow__left{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.fwe-toprow__rank{
  width:28px;
  height:28px;
  border-radius:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--fwe-border);
  background: var(--fwe-soft);
  font-weight:900;
  flex:0 0 auto;
}
.fwe-toprow__name{
  font-weight:900;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fwe-toprow__val{
  font-weight:900;
  white-space:nowrap;
}

/* =========================
   Rundungen: letzte Zeile bekommt unten ebenfalls Radius
   ========================= */
.fwe-rows .fwe-row:last-child{
  border-bottom-left-radius: var(--fwe-radius);
  border-bottom-right-radius: var(--fwe-radius);
}

/* =========================
   NEU: Einsatzbilder Galerie (Detail)
   ========================= */
.fwe-gallery{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
  width:100%;
}

.fwe-gallery__item{
  display:block;
  border:1px solid var(--fwe-border);
  border-radius: var(--fwe-radius-sm);
  overflow:hidden;
  background:#fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.06);
}

.fwe-gallery__img{
  display:block;
  width:100%;
  height:120px;
  object-fit:cover;
}

.fwe-gallery__item:hover{
  border-color: rgba(11,58,115,.35);
  background: rgba(11,58,115,.04);
}

/* =========================
   Kamera Icon in Liste (dezenter + durchgestrichen wenn leer)
   ========================= */
.fwe-row__cam{
  display:flex;
  justify-content:flex-end;
  align-items:center;
  line-height:1;
}

.fwe-cam{
  position:relative;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:34px;
  height:34px;
  border-radius: 12px;
  border:1px solid var(--fwe-border);
  background:#fff;
  font-size:16px;
  opacity:.95;
}

/* Bilder vorhanden */
.fwe-cam--has{
  color: var(--fwe-blue);
  background: rgba(11,58,115,.06);
  border-color: rgba(11,58,115,.28);
}

/* keine Bilder -> hellgrau + Strike */
.fwe-cam--none{
  color: rgba(0,0,0,.22);
  background: rgba(0,0,0,.01);
  border-color: rgba(0,0,0,.10);
}

.fwe-cam--none::after{
  content:"";
  position:absolute;
  left:5px;
  right:5px;
  top:50%;
  height:2px;
  background: #0b3a73;
  transform: rotate(-22deg);
  border-radius:2px;
}

/* Mobile-Kamera im Mid (weil Right auf Mobile ausgeblendet wird) */
.fwe-row__cam--m{ display:none; }

/* =========================
   Mobile
   ========================= */
@media (max-width: 860px){

  /* List: Icon-Spalte + Content */
  .fwe-row{
    grid-template-columns: 56px 1fr;
    gap:12px;
    padding:14px 14px;
    text-align:left;
  }

  .fwe-row__left{ align-items:flex-start; }

  /* Desktop-Left-Datum ausblenden */
  .fwe-row__dt--left{ display:none; }

  /* Mobile-Datum im Mid anzeigen */
  .fwe-row__dt--mid{
    display:flex;
    gap:10px;
    margin-top:6px;
    line-height:1.15;
  }

  /* Titel darf umbrechen */
  .fwe-row__title{
    white-space:normal;
    overflow:visible;
    text-overflow:clip;
  }

  .fwe-row__meta{gap:6px;}

  /* Rechte Spalte komplett ausblenden (Kamera kommt in Mid) */
  .fwe-row__right{ display:none; }

  /* Kamera im Mid oben rechts */
  .fwe-row__mid{
    position:relative;
    padding-right:44px; /* Platz fuer Kamera rechts oben */
  }
  .fwe-row__cam--m{
    display:flex;
    position:absolute;
    top:0;
    right:0;
  }

  /* Details: 2 columns -> 1 column */
  .fwe-boxgrid{grid-template-columns: 1fr;}
  .fwe-box--span2{grid-column:auto;}

  /* KV more compact */
  .fwe-kv{grid-template-columns: 24px 90px 1fr;}
  .fwe-detail__title{font-size:24px;}

  /* Year: stats -> 1 column, KPIs -> 1 column */
  .fwe-year__head{flex-direction:column; align-items:flex-start;}
  .fwe-statsgrid{grid-template-columns: 1fr;}
  .fwe-statcard--span2{grid-column:auto;}
  .fwe-kpis{grid-template-columns: 1fr;}

  /* Mobil: 2x2 KPIs ebenfalls 1 Spalte */
  .fwe-kpis.fwe-kpis--2{grid-template-columns: 1fr;}

  /* Galerie responsiv */
  .fwe-gallery{grid-template-columns: repeat(2, minmax(0, 1fr));}
  .fwe-gallery__img{height:110px;}
}

/* =========================
   FIX: Stats / Mobile - nichts rechts abschneiden
   ========================= */
.fwe-statsgrid,
.fwe-statcard{
  max-width:100%;
}

.fwe-statcard__title{
  white-space:normal;
  overflow-wrap:anywhere;
  word-break:break-word;
}

/* Falls irgendwas doch breiter wird: horizontal scroll nur innerhalb der Chart-Box */
.fwe-statcard__chart{
  width:100%;
  max-width:100%;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}

/* SVG darf nie den Container sprengen */
.fwe-statcard__chart svg,
.fwe-statcard__chart .fwe-svg{
  display:block;
  max-width:100%;
  height:auto;
}