/* 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: #1D4ED8; }
.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); }
/* Hauptspalte mit schmalem Rand rechts. 3fr/1fr statt 75%/25%, damit die
   32px Lücke zwischen den Spalten nicht von den Prozenten abgeht. */
.fwt-cols--2-75-25 .fwt-cols-inner { grid-template-columns: 3fr 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); }
  /* Bei 3fr/1fr bliebe der Rand hier unter 200px übrig – zu schmal für
     Bilder oder Infokästen, deshalb etwas breiter. */
  .fwt-cols--2-75-25 .fwt-cols-inner { grid-template-columns: 2fr 1fr; }
}

/* Handy: alles einspaltig */
@media (max-width: 640px) {
  .fwt-cols--2 .fwt-cols-inner,
  .fwt-cols--2-75-25 .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);
}

/* Je Ebene eine eigene Größe. Vorher hatten h1 bis h6 dieselbe, dadurch war
   die Auswahl „Layout 2/3/4" im Backend wirkungslos – es änderte sich nur das
   Tag, nicht die Darstellung. Zeilenhöhe und Sperrung gehen mit der Größe mit:
   Die enge Führung von 0.98 und -0.02em passt zu großen Zeilen, bei kleinen
   Überschriften klebt der Text sonst aneinander. */
.frame > header > h2 {
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.04;
}
.frame > header > h3 {
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.frame > header > h4 {
  font-size: clamp(19px, 1.6vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.005em;
}
.frame > header > h5 {
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.25;
  letter-spacing: normal;
}
.frame > header > h6 {
  font-size: clamp(16px, 1.1vw, 18px);
  line-height: 1.3;
  letter-spacing: normal;
}

.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;
  }
}

/* ---------- 3D-Objekt (model-viewer) ----------
   Umgezogen in die eigenständige Extension `objekt3d_viewer`
   (Klassen `.obj3d*`, Stylesheet dort in Resources/Public/Css/objekt3d.css).
   Farbanpassung an das Sitepackage: */
.obj3d { --obj3d-accent: var(--red); }

/* ============ Einsatzliste: Detail-Button ============
   Nur Einsätze mit Bericht und/oder Fotos werden verlinkt (siehe Einsatz::getHasDetails()).
   Titel bleibt dezent, der Button ist die gut sichtbare Aktion. */
.eins-ti {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  min-width: 0;
}
.eins-ti-link {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color .15s, border-color .15s;
}
.eins-ti-link:hover,
.eins-ti-link:focus-visible {
  color: var(--red);
  border-bottom-color: var(--red);
}
.eins-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: var(--red);
  color: var(--paper);
  font-size: 0.66rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: 2px;
  white-space: nowrap;
  transition: background .15s, transform .15s;
}
.eins-detail-btn::after {
  content: "→";
  transition: transform .15s;
}
.eins-detail-btn:hover,
.eins-detail-btn:focus-visible {
  background: var(--ink);
  color: var(--paper);
}
.eins-detail-btn:hover::after { transform: translateX(3px); }

@media (max-width: 780px) {
  .eins-detail-btn { padding: 4px 9px; font-size: 0.62rem; }
}

/* ============ Einsatz-Detailansicht ============
   Ohne eigenen dunklen Hero – die Seite hat bereits ein Hero-Element.
   Überschrift + Metazeile normal im Textfluss, danach Bericht, dann Fotos. */
.eins-detail-head {
  margin-bottom: 28px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line-soft);
}
.eins-detail-head .section-title { margin-bottom: 16px; }
.eins-detail-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 18px;
  font-size: 0.78rem;
  opacity: 0.75;
}
/* Trennpunkte zwischen den Metaangaben (nicht vor der Typ-Plakette) */
.eins-detail-meta > span + span::before {
  content: "·";
  margin-right: 18px;
  opacity: 0.5;
}
.eins-report {
  max-width: 760px;
  font-size: 1rem;
  line-height: 1.75;
}
.eins-report > *:first-child { margin-top: 0; }
.eins-report > *:last-child { margin-bottom: 0; }

.eins-gallery { margin-top: 44px; }
.eins-gallery .eyebrow { margin-bottom: 16px; }

@media (max-width: 780px) {
  .eins-detail-meta { font-size: 0.72rem; gap: 8px 12px; }
  .eins-detail-meta > span + span::before { margin-right: 12px; }
}

/* ------------------------------------------------------------------
   Terminkalender (me_google_calendar / FullCalendar)
   ------------------------------------------------------------------ */

/* "Gesamtwehr" nutzt die Klasse fc-black, die die Extension nicht mitliefert. */
.fc-black,
.fc-agenda .fc-event.fc-black .fc-event-time,
.fc-event.fc-black .fc-event-inner.fc-event-skin,
.fc-list-item.fc-black .fc-event-dot,
.fc-event.fc-black a {
  background-color: #0a0a0a;
  border-color: #0a0a0a;
  color: #fff;
}

/* Legende über/unter dem Kalender */
.fc-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.fc-legend .fc-event {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 0.82rem;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

/* Kalender im Seiten-Content nicht überlaufen lassen */
.tx-me-google-calendar { max-width: 100%; }
.tx-me-google-calendar .fc-calendar { overflow-x: auto; }

/* Geräteabhängige Rahmen-Varianten (frame_class, siehe page.tsconfig).
   Ersetzt das frühere cewrap "hidden-xs" / "hidden-sm,md,lg".
   Der Terminkalender zeigt damit am Handy die Liste, ab Tablet die Monatsansicht. */
.frame-fwt-desktop-only { display: none; }
@media (min-width: 768px) {
  .frame-fwt-mobile-only { display: none; }
  .frame-fwt-desktop-only { display: block; }
}

/* Bild-Inhaltselemente mit "Bild vergrößern beim Klicken" (siehe
   styles.content.textmedia.linkWrap in settings.yaml): Der Klick öffnet die
   Originaldatei in einem neuen Tab, die Lupe macht das vorher sichtbar. */
a.fwt-zoom { display: inline-block; cursor: zoom-in; }

/* ------------------------------------------------------------------
   Terminvorschau (Content Block "Feuerwehr: Termine")
   ------------------------------------------------------------------
   Eigene Farbwerte statt der fc-*-Regeln der Kalender-Extension: deren CSS
   wird nur auf der Seite "Terminkalender" geladen, die Vorschau steht aber
   auf der Startseite. Die Klassennamen bleiben dieselben, damit die im
   Kalender-Datensatz gewählte Farbe an beiden Stellen dieselbe ist. */

.termine-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px 90px;
}

.termine-days {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.termine-day {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 24px;
  padding: 22px 0;
  border-bottom: 1px solid var(--line-soft);
}

.termine-date { display: block; padding-top: 3px; }
.termine-date-wd { display: block; opacity: 0.55; }
.termine-date-d {
  display: block;
  font-family: var(--font-head);
  font-size: 2rem;
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: "tnum";
}
.termine-date-m { display: block; opacity: 0.45; margin-top: 3px; }

/* Heute hervorheben – der häufigste Grund, überhaupt hierher zu schauen. */
.termine-day.is-today .termine-date-wd { opacity: 1; color: var(--red); font-weight: 700; }
.termine-day.is-today .termine-date-d { color: var(--red); }

.termine-events {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 16px;
}
.termine-event { display: flex; align-items: flex-start; gap: 12px; }

.termine-dot {
  flex: 0 0 auto;
  width: 10px;
  height: 10px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--ink);
}
.termine-dot.fc-red { background: #cc0033; }
.termine-dot.fc-green { background: #82b20a; }
.termine-dot.fc-blue { background: #10327d; }
.termine-dot.fc-grey { background: #999; }
.termine-dot.fc-orange { background: #e9820c; }
.termine-dot.fc-purple { background: #990099; }
.termine-dot.fc-black { background: #0a0a0a; }

.termine-event-body { min-width: 0; }
.termine-event-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;
}
.termine-event-meta {
  margin: 5px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
  opacity: 0.6;
}
/* Die Uhrzeit ist die eigentliche Information der Zeile, nicht Beiwerk. */
.termine-event-meta .termine-time { opacity: 1; font-weight: 700; }

.termine-empty {
  margin: 0;
  padding: 26px 0;
  border-top: 1px solid var(--line-soft);
  opacity: 0.6;
}

.termine-more { margin: 20px 0 0; }
.termine-more a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
}
.termine-more a .arr { transition: transform .2s; }
.termine-more a:hover .arr { transform: translateX(4px); }

@media (max-width: 720px) {
  .termine-inner { padding: 0 24px 60px; }
  .termine-day {
    grid-template-columns: 62px 1fr;
    gap: 16px;
    padding: 18px 0;
  }
  .termine-date-d { font-size: 1.55rem; }
  .termine-event-title { font-size: 1rem; }
}

/* ------------------------------------------------------------------
   Formular aus Nextcloud (Content Block "Feuerwehr: Formular aus Nextcloud")
   ------------------------------------------------------------------ */

.ncform-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 32px 90px;
}
/* Ohne Überschrift fehlt die section-head samt ihrem Abstand nach oben –
   dann muss ihn der Rahmen selbst mitbringen. */
.ncform > .ncform-inner:first-child { padding-top: 90px; }

.ncform-frame {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  overflow: hidden;
}
/* Nextcloud wählt sein Theme allein über prefers-color-scheme – auf einem Gerät
   im Dunkelmodus erscheint das Formular sonst schwarz mitten in der hellen
   Seite. Browser reichen das color-scheme des iframe-Elements an das
   eingebettete Dokument weiter; damit lässt es sich von außen auf hell
   festlegen, ohne in der Nextcloud etwas umzustellen.
   Kann der Browser das nicht, bleibt es beim Verhalten von vorher. */
.ncform-frame--light iframe { color-scheme: only light; }
/* --auto: bewusst keine Regel, dann entscheidet das Gerät des Besuchers. */
.ncform-frame--auto { background: transparent; }
.ncform-frame iframe {
  display: block;
  width: 100%;
  /* Ausweich-Höhe aus dem Inhaltselement. Sobald Nextcloud seine tatsächliche
     Höhe meldet, setzt main.js sie als style="height:…" direkt am Element und
     übersteuert diesen Wert damit. */
  height: var(--ncform-height, 900px);
  /* Muss zur Untergrenze in main.js passen, sonst könnte der Rahmen nie unter
     diesen Wert schrumpfen. */
  min-height: 200px;
  border: 0;
  /* Der Sprung von der Ausweich-Höhe auf die gemeldete wäre sonst ruckartig. */
  transition: height .2s ease;
}
@media (prefers-reduced-motion: reduce) {
  .ncform-frame iframe { transition: none; }
}
/* Rollbalken ohne Funktion ausblenden: Nextcloud macht sein Dokument immer etwas
   höher als den Rahmen (#content mit min-height 100% unter dem Kopfbereich), der
   Balken bliebe also dauerhaft stehen. Der Rahmen wird um genau seine Breite
   verbreitert, sodass er hinter dem overflow:hidden des Containers liegt.
   Die Klasse setzt main.js erst, wenn die Höhe wirklich zum Formular passt –
   und nur, wenn das System überhaupt platzraubende Rollbalken zeichnet. */
.ncform-frame.is-fitted iframe {
  width: calc(100% + var(--ncform-scrollbar, 0px));
}

.ncform-fallback { margin: 14px 0 0; }
.ncform-fallback a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--red);
}
.ncform-fallback a .arr { transition: transform .2s; }
.ncform-fallback a:hover .arr { transform: translateX(4px); }

@media (max-width: 720px) {
  .ncform-inner { padding: 0 24px 60px; }
  .ncform > .ncform-inner:first-child { padding-top: 60px; }
}

/* ---- Schnellsuche im Kopfbereich ---------------------------------------- */
.nav-search { position: relative; display: flex; align-items: center; }

.nav-search-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px;
  border-radius: 2px;
  font-size: 1rem;
  color: inherit;
  transition: background .15s, color .15s;
}
.nav-search-btn:hover,
.nav-search .is-open .nav-search-btn,
.nav-search.is-open .nav-search-btn { background: var(--paper-2); color: var(--red); }

.nav-search-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  width: min(420px, calc(100vw - 32px));
  background: #fff;
  border: 1px solid var(--line-soft);
  box-shadow: 0 18px 44px rgba(0,0,0,.14);
  padding: 14px;
  z-index: 60;
}

.nav-search-form { display: flex; gap: 8px; }
.nav-search-input {
  flex: 1;
  font: inherit;
  font-size: 0.95rem;
  padding: 10px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background: var(--paper);
}
.nav-search-input:focus { outline: 2px solid var(--red); outline-offset: -2px; }
.nav-search-submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px;
  background: var(--ink); color: var(--paper);
  border-radius: 2px;
  transition: background .15s;
}
.nav-search-submit:hover { background: var(--red); color: #fff; }

.nav-search-results:not(:empty) { margin-top: 12px; }
.nav-search-list { list-style: none; margin: 0; padding: 0; }
.nav-search-hit + .nav-search-hit { border-top: 1px solid var(--line-soft); }
.nav-search-hit a {
  display: grid;
  /* Art links in fester Spalte, damit Titel und Kurztext sauber untereinander
     stehen – sonst rutscht die Zeile je nach Wortlänge hin und her. */
  grid-template-columns: 74px 1fr;
  gap: 2px 10px;
  padding: 10px 6px;
  transition: background .12s;
}
.nav-search-hit a:hover,
.nav-search-hit a:focus-visible { background: var(--paper-2); outline: none; }
.nav-search-kind {
  grid-row: span 2;
  align-self: start;
  padding-top: 2px;
  color: var(--red);
  font-size: 0.66rem;
}
.nav-search-title { font-weight: 600; font-size: 0.9rem; line-height: 1.3; }
.nav-search-abstract { font-size: 0.78rem; opacity: 0.66; line-height: 1.35; }

.nav-search-empty { margin: 8px 6px; font-size: 0.85rem; opacity: 0.66; }
.nav-search-all {
  display: block;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--line-soft);
  color: var(--red);
  font-size: 0.72rem;
}
.nav-search-all:hover { text-decoration: underline; }

/* Auf schmalen Schirmen ist die Hauptnavigation ausgeblendet; dort hat die
   Lupe keinen Platz und die Suche steckt im mobilen Menü. */
@media (max-width: 980px) {
  .nav-search { display: none; }
}

/* ---- Suchergebnisseite (ke_search) -------------------------------------- */
/* ke_search bringt eigene, sehr schlichte Klassen mit. Statt die Fluid-
   Vorlagen zu überschreiben, kleiden wir hier nur die vorhandenen Klassen
   ein – das übersteht ein Update der Erweiterung unbeschadet. */

.tx-kesearch-pi1 .clearer { display: none; }

/* --- Suchfeld --- */
.kesearch_searchbox {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  border: 0;
  margin: 0 0 28px;
  padding: 0;
}
.kesearch_searchbox .kesearchbox { flex: 1 1 260px; }
.kesearch_searchbox input[type="search"] {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  padding: 13px 16px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background: #fff;
}
.kesearch_searchbox input[type="search"]:focus {
  outline: 2px solid var(--red);
  outline-offset: -2px;
}
.kesearch_searchbox .submitbutt input[type="submit"] {
  font: inherit;
  font-weight: 600;
  padding: 13px 24px;
  border: 0;
  border-radius: 2px;
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: background .15s;
}
.kesearch_searchbox .submitbutt input[type="submit"]:hover { background: var(--red); color: #fff; }
.kesearch_searchbox .resetbutt a {
  font-size: 0.78rem;
  opacity: 0.6;
  border-bottom: 1px solid currentColor;
}
.kesearch_searchbox .resetbutt a:hover { opacity: 1; color: var(--red); }

/* --- Trefferzahl --- */
#kesearch_num_results {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  font-size: 0.78rem;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 18px;
}

/* --- Ein Treffer --- */
.result-list-item {
  padding: 20px 0;
  border-top: 1px solid var(--line-soft);
}
.result-list-item:last-child { border-bottom: 1px solid var(--line-soft); }

.result-title a {
  font-family: var(--font-head);
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  line-height: 1.25;
  display: inline-block;
  margin-bottom: 6px;
}
.result-title a:hover { color: var(--red); }

.result-teaser {
  display: block;
  font-size: 0.88rem;
  line-height: 1.5;
  opacity: 0.72;
  max-width: 68ch;
}
.add-info:empty, .teaser_icon:empty { display: none; }

/* Art des Treffers als kleine Marke vor dem Titel. Die Beschriftung steckt im
   ::before, weil ke_search die Art nur als Klasse am Container ausgibt. */
.result-list-item::before {
  content: "Seite";
  display: inline-block;
  margin-bottom: 8px;
  padding: 3px 9px;
  border-radius: 2px;
  background: var(--paper-2);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.8;
}
.result-list-item-type-fwteinsaetze::before { content: "Einsatz"; background: var(--red); color: #fff; opacity: 1; }
.result-list-item-type-news::before { content: "Nachricht"; }
.result-list-item-type-file::before,
[class*="result-list-item-type-file"]::before { content: "Datei"; }

/* --- Blättern --- */
/* ke_search benutzt hier die Bootstrap-Struktur (ul.pagination > li.page-item >
   a.page-link). Wir überschreiben sie, damit sie zur übrigen Seite passt. */
.pages_total { margin-top: 30px; }
.pages_total .result_txt {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 10px;
}
.kesearch_pagebrowser .pagination {
  display: flex; flex-wrap: wrap; gap: 6px;
  list-style: none; margin: 0; padding: 0;
  font-family: var(--font-mono);
  font-size: 0.78rem;
}
.kesearch_pagebrowser .page-link {
  display: inline-block;
  padding: 8px 13px;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  background: #fff;
  transition: border-color .15s, color .15s;
}
.kesearch_pagebrowser .page-link:hover { border-color: var(--red); color: var(--red); }
.kesearch_pagebrowser .page-item.active .page-link {
  background: var(--ink); color: var(--paper); border-color: var(--ink);
}
.kesearch_pagebrowser .page-item.disabled { display: none; }

@media (max-width: 720px) {
  .kesearch_searchbox { gap: 8px; }
  .kesearch_searchbox .submitbutt,
  .kesearch_searchbox .submitbutt input { width: 100%; }
}

/* „Keine Ergebnisse gefunden" steht als nackter Text im Ergebnis-Container –
   ohne eigene Klasse. Deshalb hier über den Container selbst gestaltet, aber
   nur wenn er keine Treffer enthält. */
#kesearch_results:not(:has(.result-list-item)) {
  padding: 28px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  font-size: 1rem;
  opacity: 0.7;
}

/* ---- Standorte mit Karte ------------------------------------------------ */
.standorte { padding: 56px 0; }
.standorte-inner { max-width: 1440px; margin: 0 auto; padding: 0 32px; }
.standorte h2 {
  font-family: var(--font-head);
  font-size: clamp(26px, 3vw, 40px);
  line-height: 1.1;
  margin: 6px 0 32px;
  letter-spacing: -0.01em;
}
.standorte-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 32px;
}
.standort { background: #fff; }
.standort-karte {
  /* Feste Proportion, damit beide Karten gleich hoch sind – auch wenn jemand
     später ein Bild mit anderem Seitenverhältnis einsetzt. */
  aspect-ratio: 1024 / 680;
  overflow: hidden;
  background: var(--paper-2);
}
.standort-karte img { width: 100%; height: 100%; object-fit: cover; display: block; }
.standort-body { padding: 22px 24px 26px; }
.standort-body h3 {
  font-family: var(--font-head);
  font-size: 1.22rem;
  margin: 0 0 10px;
}
.standort address {
  font-style: normal;
  line-height: 1.6;
  opacity: 0.78;
}
.standort-hinweis { margin: 10px 0 0; }
.standort-route {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: 16px;
  color: var(--red);
  border-bottom: 1px solid var(--red);
  padding-bottom: 2px;
}
.standort-route .arr { transition: transform .2s; }
.standort-route:hover .arr { transform: translateX(3px); }
.standorte-quelle { margin: 26px 0 0; max-width: 70ch; }

@media (max-width: 720px) {
  .standorte { padding: 40px 0; }
  .standorte-inner { padding: 0 20px; }
  .standorte-grid { gap: 24px; }
}

/* ---- Verweise im redaktionellen Fließtext --------------------------------
   Global gilt a { color: inherit; text-decoration: none } – richtig für
   Navigation, Kacheln und Knöpfe, aber im Text aus dem Editor werden Links
   dadurch unsichtbar. Hier holen wir sie zurück, begrenzt auf die
   Inhaltselemente, deren Text aus dem RTE stammt. Knöpfe (.rte-btn)
   sind ausgenommen, die bringen ihre eigene Farbe mit. */
.frame-type-text a:not(.rte-btn),
.frame-type-textmedia a:not(.rte-btn),
.frame-type-textpic a:not(.rte-btn),
.frame-type-bullets a:not(.rte-btn),
.frame-type-table a:not(.rte-btn) {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  /* Etwas Abstand zur Grundlinie, sonst schneidet die Linie durch die
     Unterlängen von g, p und j. */
  text-underline-offset: 3px;
  transition: text-decoration-thickness .12s;
}
.frame-type-text a:hover:not(.rte-btn),
.frame-type-textmedia a:hover:not(.rte-btn),
.frame-type-textpic a:hover:not(.rte-btn),
.frame-type-bullets a:hover:not(.rte-btn),
.frame-type-table a:hover:not(.rte-btn),
.frame-type-text a:focus-visible:not(.rte-btn),
.frame-type-textmedia a:focus-visible:not(.rte-btn),
.frame-type-textpic a:focus-visible:not(.rte-btn),
.frame-type-bullets a:focus-visible:not(.rte-btn),
.frame-type-table a:focus-visible:not(.rte-btn) {
  text-decoration-thickness: 2px;
}

/* ---- Dateidownloads (CType uploads) -------------------------------------
   Die Standardausgabe von TYPO3 ist eine nackte Liste mit einem alten
   GIF-Symbol. Wir machen daraus anklickbare Zeilen und ersetzen das GIF durch
   ein Symbol aus Font Awesome, das ohnehin geladen ist. */
.ce-uploads {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 720px;
}
.ce-uploads li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 46px 14px 16px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  transition: border-color .15s, transform .15s;
}
.ce-uploads li:hover {
  border-color: var(--red);
  transform: translateY(-1px);
}

/* Das mitgelieferte GIF-Symbol weg und durch ein Schriftsymbol ersetzen. */
.ce-uploads li img { display: none; }
.ce-uploads li::before {
  content: "\f15b";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--red);
  flex: none;
}

/* Pfeil am rechten Rand – macht sichtbar, dass hier etwas heruntergeladen wird. */
.ce-uploads li::after {
  content: "\f019";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.86rem;
  opacity: 0.45;
  transition: opacity .15s;
}
.ce-uploads li:hover::after { opacity: 1; color: var(--red); }

.ce-uploads li > div { min-width: 0; }

/* Der Dateiname ist der Link. Global gilt a { color: inherit; text-decoration:
   none } – hier holen wir die Kennzeichnung zurück. Der Verweis wird über das
   ::before der Zeile auf die ganze Fläche ausgedehnt, damit man nicht genau den
   Text treffen muss. */
.ce-uploads a {
  color: var(--red);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  font-weight: 600;
}
.ce-uploads a::before {
  content: "";
  position: absolute;
  inset: 0;
}
.ce-uploads li:hover a { text-decoration-thickness: 2px; }

/* Dateigröße und Beschreibung, sofern im Inhaltselement eingeschaltet. */
.ce-uploads .ce-uploads-filesize,
.ce-uploads .ce-uploads-description {
  display: block;
  margin-top: 3px;
  font-size: 0.76rem;
  opacity: 0.6;
  color: var(--ink);
  font-weight: 400;
  text-decoration: none;
}