/* Sitepackage-spezifische Erweiterungen zum styles.css aus dem Design-Handoff.
   Ergänzt Klassen, die im Prototyp fehlten, aber in Fluid-Templates gebraucht werden. */

.eins-row[hidden] { display: none; }

.type-pill { --pc: #888; }
.type-pill--brand          { --pc: var(--red); }
.type-pill--hilfeleistung  { --pc: #FFD60A; }
.type-pill--bma            { --pc: #888; }
.type-pill--umwelt         { --pc: #4a7c59; }
.type-pill--sonstiges      { --pc: #888; }

.mob-nav-cta {
  margin-top: 12px;
  padding: 12px 16px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  display: inline-block;
}

.content-stage {
  background: var(--paper);
}
.content-stage-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 60px 32px 90px;
}

.page-content-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 40px 32px;
}
.page-content-inner--narrow {
  max-width: 980px;
}

/* Header- und Footer-Logo (PNG aus fileadmin) */
.brand-logo {
  display: block;
  height: 48px;
  width: auto;
}
.brand-logo--footer {
  height: 64px;
}
.hdr .brand { padding: 4px 0; }
.foot-brand { align-self: center; }

@media (max-width: 640px) {
  .brand-logo { height: 38px; }
  .brand-logo--footer { height: 52px; }
}

/* Footer ohne Logo-Spalte: ganze Breite nur für die Inhaltselemente. */
.foot-inner--full {
  grid-template-columns: 1fr;
  gap: 0;
}

/* Footer-Spalten: flexibles Grid (1–6 Spalten), neutralisiert die
   <div class="frame">-Wrapper aus fluid-styled-content. */
.foot-cols {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.foot-cols > .frame,
.foot-cols > .foot-col {
  padding: 0;
  margin: 0;
  background: none;
}
.foot-cols .foot-col-body {
  /* Zeilenumbrüche kommen aus <f:format.nl2br>; kein pre-line,
     sonst wird das rohe \n nochmal als Umbruch gerendert (Doppel-Linebreak). */
}
.foot-cols .foot-notruf a {
  color: inherit;
  text-decoration: none;
}
.foot-cols .foot-notruf a:hover {
  color: #fff;
}

/* Mitmachen-Block: rot statt schwarz; rote Akzente in Weiß umlenken,
   damit alles auf rotem Untergrund sichtbar bleibt. */
.mitmachen {
  background: var(--red);
}
.mitmachen::before {
  background: radial-gradient(ellipse at center, rgba(0,0,0,.18), transparent 60%);
}
.mitmachen .mit-top {
  color: #fff;
}
.mitmachen .mit-top .pulse-dot {
  background: #fff;
  box-shadow: 0 0 0 0 rgba(255,255,255,.55);
  animation-name: pulse-light;
}
.mitmachen .mit-num {
  color: #fff;
  opacity: 0.7;
}
.mitmachen .mit-card {
  border-top-color: rgba(255,255,255,0.35);
}
.mitmachen .btn-primary {
  background: #fff;
  color: var(--red);
}
.mitmachen .btn-primary:hover {
  background: var(--paper);
  color: var(--red-deep);
}
.mitmachen .btn-text {
  color: #fff;
}

@keyframes pulse-light {
  0%   { box-shadow: 0 0 0 0 rgba(255,255,255,.65); }
  70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* prefers-reduced-motion respektieren */
@media (prefers-reduced-motion: reduce) {
  .pulse-dot { animation: none; }
  .hero-headline .word { animation: none; }
}

/* ---------- Chronik ---------- */
.about-section.chronik-block { padding-top: 35px; padding-bottom: 35px; }
.about-section.chronik-block:last-child { padding-bottom: 50px; }

/* Trennstrich für den gesamten Zeitstrahl ausblendbar — die Spur bleibt
   erhalten, damit Jahr und Ereignis ihre Spaltenposition behalten. */
.timeline--noline .tl-line { visibility: hidden; }

/* ---------- Fuhrpark / Fahrzeuge ---------- */
.veh-card { position: relative; overflow: hidden; }
.veh-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.veh-img--button {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 0;
  background:
    repeating-linear-gradient(135deg, #eee 0 12px, #e4e4e4 12px 24px);
  aspect-ratio: 5/3;
  cursor: zoom-in;
  overflow: hidden;
}
.veh-img--button:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}
.veh-img--button .veh-zoom {
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  background: rgba(10,10,10,0.7);
  transition: background 0.18s ease;
}
.veh-img--button:hover .veh-zoom { background: var(--red); }
.veh-img--button:hover img { transform: scale(1.02); }
.veh-img--button img { transition: transform 0.3s ease; }

/* ---------- Modal (Fahrzeug-Detail) ---------- */
.veh-modal .modal-content {
  background: var(--paper);
  color: var(--ink);
  border: 0;
  border-radius: 0;
}
.veh-modal .modal-header {
  align-items: flex-start;
  gap: 12px;
  border-bottom: 1px solid var(--line-soft);
  padding: 22px 28px;
}
.veh-modal .modal-title {
  font-family: var(--font-head);
  font-weight: 700;
  margin: 4px 0 0;
  line-height: 1.1;
}
.veh-modal .modal-header .veh-k {
  padding: 0;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
}
.veh-modal .modal-body { padding: 22px 28px 28px; }
.veh-modal-hero {
  margin-bottom: 22px;
  background:
    repeating-linear-gradient(135deg, #eee 0 12px, #e4e4e4 12px 24px);
}
.veh-modal-hero img { display: block; width: 100%; height: auto; }

.fwt-veh-slider {
  margin-bottom: 22px;
  background:
    repeating-linear-gradient(135deg, #eee 0 12px, #e4e4e4 12px 24px);
}
.fwt-veh-slider .carousel-item img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5/3;
  object-fit: cover;
}
.fwt-veh-slider .carousel-control-prev,
.fwt-veh-slider .carousel-control-next {
  width: 12%;
}
.fwt-veh-slider .carousel-control-prev-icon,
.fwt-veh-slider .carousel-control-next-icon {
  background-color: rgba(10, 10, 10, 0.55);
  border-radius: 0;
  padding: 18px;
  background-size: 60% 60%;
}

.veh-modal-desc {
  font-size: 1.02rem;
  line-height: 1.55;
  margin-bottom: 22px;
}
.veh-modal-desc.rte > *:first-child { margin-top: 0; }
.veh-modal-desc.rte > *:last-child { margin-bottom: 0; }

.veh-modal-extras {
  border-top: 1px solid var(--line-soft);
  padding-top: 22px;
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.veh-modal-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
}
.veh-modal-gallery__item {
  display: block;
  aspect-ratio: 5/3;
  overflow: hidden;
  background: #e4e4e4;
}
.veh-modal-gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}
.veh-modal-gallery__item:hover img { transform: scale(1.04); }

/* ---------- Personen / Wehrleitung ---------- */
.leader-av {
  position: relative;
  overflow: hidden;
}
.leader-av img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.leader-av--placeholder {
  /* Streifen-Pattern bleibt aus main.css */
}
.leader-contact {
  margin-top: 4px;
  font-size: 0.72rem;
  text-transform: none;
}
.leader-contact a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(10,10,10,0.2);
  transition: color 0.18s ease, border-color 0.18s ease;
}
.leader-contact a:hover {
  color: var(--red);
  border-bottom-color: var(--red);
}

/* Handy: Personen- und Fahrzeug-Kacheln einspaltig.
   Die 980px-Stufe in main.css setzt beide Grids auf 2 Spalten;
   unterhalb 640px reduzieren wir auf 1 Spalte. */
@media (max-width: 640px) {
  .veh-grid { grid-template-columns: 1fr; }
  .leaders  { grid-template-columns: 1fr; }
}

/* ---------- Slider ---------- */
.fwt-slider {
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 32px;
}
.fwt-slider--full {
  max-width: none;
  padding: 0;
}
/* Slider-Head linksbündig stapeln (Headline direkt unter Eyebrow),
   überschreibt das horizontale flex-Layout aus .section-head in main.css. */
.fwt-slider-head {
  margin-bottom: 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
  gap: 8px;
}
.fwt-slider-head h2 { margin: 0; }

/* ---------- H2-Vereinheitlichung in normalen Inhaltselementen ----------
   Identischer Stil wie .section-title (Fuhrpark / Personen / Chronik / Jugend).
   Hero, Seitenüberschriften und Modal-Titel sind absichtlich ausgeschlossen. */
.mit-head,
.fwt-accordion .section-head h2,
.fwt-slider-head h2 {
  font-family: var(--font-head);
  font-size: clamp(36px, 4.4vw, 64px);
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  max-width: none;
}

/* Bei volle-Breite-Slider: Section-Head trotzdem in der zentrierten Spalte halten. */
.fwt-slider--full .fwt-slider-head {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding: 32px 32px 0;
}
.fwt-slider-carousel { overflow: hidden; }
.fwt-slider .carousel-item img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}
.fwt-slider .carousel-caption {
  background: linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0));
  left: 0;
  right: 0;
  bottom: 0;
  padding: 60px 24px 56px;
  text-align: left;
}
.fwt-slider .carousel-caption h3 {
  font-family: var(--font-head);
  font-weight: 700;
  margin: 0 0 6px;
  color: #fff;
}
.fwt-slider .carousel-caption p {
  color: rgba(255,255,255,0.92);
  margin: 0;
}
.fwt-slider-caption-link {
  color: inherit;
  text-decoration: none;
  display: block;
}
.fwt-slider-caption-link:hover h3 { color: #fff; text-decoration: underline; }

.fwt-slider .carousel-indicators [data-bs-target] {
  background-color: var(--red);
  opacity: 0.5;
  width: 10px; height: 10px; border-radius: 50%;
  border: 0;
}
.fwt-slider .carousel-indicators .active { opacity: 1; }

.fwt-slider .carousel-control-prev,
.fwt-slider .carousel-control-next { width: 8%; opacity: 0.85; }
.fwt-slider .carousel-control-prev-icon,
.fwt-slider .carousel-control-next-icon {
  background-color: rgba(0,0,0,0.4);
  border-radius: 0;
  padding: 14px;
  background-size: 60%;
  background-repeat: no-repeat;
  background-position: center;
}

@media (max-width: 640px) {
  .fwt-slider { padding: 24px 16px; }
  .fwt-slider .carousel-caption { padding: 36px 16px 24px; }
  .fwt-slider .carousel-caption h3 { font-size: 1.15rem; }
  .fwt-slider .carousel-caption p { font-size: 0.85rem; }
}

/* ---------- Accordion ---------- */
.fwt-accordion { padding: 60px 0; }
.fwt-accordion-inner {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px;
}
.fwt-accordion .section-head { margin-bottom: 32px; }
.fwt-accordion .accordion {
  --bs-accordion-bg: #fff;
  --bs-accordion-border-color: var(--line-soft, rgba(10,10,10,0.15));
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
  --bs-accordion-btn-color: #0A0A0A;
  --bs-accordion-btn-bg: #fff;
  --bs-accordion-active-color: var(--red);
  --bs-accordion-active-bg: var(--paper, #F5F2EE);
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-focus-border-color: var(--red);
}
.fwt-accordion .accordion-button {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.1rem;
}
.fwt-accordion .accordion-button:not(.collapsed) {
  box-shadow: inset 0 -1px 0 var(--line-soft, rgba(10,10,10,0.15));
}
.fwt-accordion .accordion-body {
  background: #fff;
  font-size: 1rem;
  line-height: 1.6;
}

@media (max-width: 640px) {
  .fwt-accordion { padding: 40px 0; }
  .fwt-accordion-inner { padding: 0 20px; }
}

/* ---------- Container (2/3/4 Spalten) ---------- */
.fwt-cols { padding: 24px 0; }
.fwt-cols-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 32px;
  display: grid;
  gap: 32px;
}
.fwt-cols--1 .fwt-cols-inner { grid-template-columns: 1fr; }
.fwt-cols--2 .fwt-cols-inner { grid-template-columns: repeat(2, 1fr); }
.fwt-cols--3 .fwt-cols-inner { grid-template-columns: repeat(3, 1fr); }
.fwt-cols--4 .fwt-cols-inner { grid-template-columns: repeat(4, 1fr); }

/* Innerhalb einer Spalte: vertikaler Stack mit eigenem Abstand,
   weil Standard-CEs (Text, Bild ...) keine eigenen Section-Paddings haben. */
.fwt-col > * + * { margin-top: 24px; }

/* Bilder/Medien in Spalten responsiv halten */
.fwt-col img { max-width: 100%; height: auto; display: block; }

/* Tablet: 3er und 4er auf 2 Spalten, 2er bleibt 2 */
@media (max-width: 980px) {
  .fwt-cols-inner { gap: 24px; padding: 0 24px; }
  .fwt-cols--3 .fwt-cols-inner,
  .fwt-cols--4 .fwt-cols-inner { grid-template-columns: repeat(2, 1fr); }
}

/* Handy: alles einspaltig */
@media (max-width: 640px) {
  .fwt-cols--2 .fwt-cols-inner,
  .fwt-cols--3 .fwt-cols-inner,
  .fwt-cols--4 .fwt-cols-inner { grid-template-columns: 1fr; }
}

/* ---------- Standard-Inhaltselemente (fluid_styled_content): Header/Subheader-Styling ----------
   Titel im <header>-Block einer Standard-CE bekommen den gleichen Stil wie .section-title
   unserer eigenen CB-Elemente (Fuhrpark / Personen / Chronik / Jugend).
   Eine ggf. vorhandene zweite Überschrift (Subheader) wird wie unser Eyebrow/Kicker
   (.eyebrow.mono) dargestellt. Der Selektor ist auf .frame > header beschränkt, damit
   weder Headings in RTE-Body-Inhalten noch unsere CB-Templates getroffen werden. */
.frame > header > h1,
.frame > header > h2,
.frame > header > h3,
.frame > header > h4,
.frame > header > h5,
.frame > header > h6 {
  font-family: var(--font-head);
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 600;
  line-height: 0.98;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
  color: var(--ink);
}

.frame > header > h1 + h2,
.frame > header > h1 + h3,
.frame > header > h1 + h4,
.frame > header > h1 + h5,
.frame > header > h1 + h6,
.frame > header > h2 + h3,
.frame > header > h2 + h4,
.frame > header > h2 + h5,
.frame > header > h2 + h6,
.frame > header > h3 + h4,
.frame > header > h3 + h5,
.frame > header > h3 + h6,
.frame > header > h4 + h5,
.frame > header > h4 + h6,
.frame > header > h5 + h6 {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--red);
  margin: 14px 0 0;
  text-wrap: initial;
}

.frame > header {
  margin-bottom: 24px;
}

/* Header-Ausrichtung über positionClass (ce-headline-center / -right) respektieren */
.frame > header > .ce-headline-center { text-align: center; }
.frame > header > .ce-headline-right { text-align: right; }

/* ---------- Einsatz-Teaser: Link/Button im Kopf (Desktop) bzw. unter der Liste (Mobile) ---------- */
.eins-teaser-cta--bottom {
  display: none;
}
@media (max-width: 980px) {
  .eins-teaser-cta--top { display: none; }
  .eins-teaser-cta--bottom {
    display: flex;
    justify-content: center;
    max-width: 1440px;
    margin: 0 auto;
    padding: 28px 32px 8px;
  }
}