/* custom web.css */
@import url('../fonts/barlow-fonts.css');

/* =========================================================
   CSS-Variablen - "Industry" Design-System (Fox NewMedia)
   Steel-Blue-Blueprint: heller Grund, ein Akzent (Steel-Blue),
   Barlow Condensed (Headings) / Barlow (Fliesstext), eckige
   Ecken, Haarlinien-Rahmen statt Schatten-Karten.
   ========================================================= */
:root{
  --fnm-accent:        #5980a6;
  --fnm-accent-light:  #94bce3;   /* Tint / heller Zustand */
  --fnm-accent-dark:   #416180;   /* Hover / Icons+Eyebrows auf hellem Grund */
  --fnm-accent-darker: #2c455d;
  /* ---- Marken-Rot (aus der alten Website: unify_custom.css, 282x) ----
     Zweite, warme Akzentfarbe. #e42f35 erreicht auf hellem Grund nur 3,96:1
     und taugt deshalb NICHT fuer kleinen Text - dafuer die dunkle Stufe. */
  --fnm-red:           #e42f35;   /* Flaechen, Marken */
  --fnm-red-dark:      #b61332;   /* Text: 6,02:1 auf --fnm-light-bg */
  --fnm-red-darker:    #a10f2b;   /* Hover/aktiv */

  --fnm-accent-deep:   #23303a;   /* Volle dunkle Flaeche (Hero/Kontakt/Footer), waermer, war #1d2d3d */

  /* ---- Neutrale & Hintergruende ---- */
  --fnm-dark-nav:      #2b2926;   /* waermer, war #2b2b2d */
  --fnm-dark-hero:      var(--fnm-accent-deep);
  --fnm-dark-light:    #b7b7ba;   /* Light-Text auf dunklem Hintergrund */
  --fnm-white:         #FFFFFF;
  --fnm-light-bg:      #f5f2ee;   /* warmes Papier, war #f2f2f3 */
  --fnm-subtle-bg:     #ece7e1;   /* warm, war #e9e9ea */
  --fnm-divider:       color-mix(in srgb, #211e1c 16%, transparent);

  /* ---- Fliesstext ---- */
  --fnm-charcoal:      #211e1c;   /* warmes Schwarzgrau, war #1d1f20 */

  --fnm-font-base:     'Barlow', sans-serif;
  --fnm-font-heading:  'Barlow Condensed', sans-serif;
  --fnm-radius: 4px;
  --fnm-shadow: 0 3px 10px rgba(43,43,45,.16);
}

html{ scroll-behavior:smooth; }

body{
  background-color: var(--fnm-light-bg);
  color: var(--fnm-charcoal);
  font-family: var(--fnm-font-base);
  font-size:1.05rem;
  line-height:1.7;
}

h1,h2,h3,h4{
  color: var(--fnm-dark-nav);
  font-family: var(--fnm-font-heading);
  font-weight:600;
  letter-spacing:-.01em;
}
h1{
  line-height: 3rem;
  margin-bottom: 1.5rem; 
}
h2 a, h3 a, h4 a, h5 a, h6 a{ text-decoration:none; }

/* in dunklen Sections (Hero, Footer, Quote) wird lokal überschrieben. */
.hero h1,.hero h2,.hero h3,.hero h4{ color:var(--fnm-white); }

.web a{ color: var(--fnm-accent); }
.web a:hover{ color: var(--fnm-red-dark); }
.web a.section-marker{ position:relative; margin-top:-96px; height:0; }

/* ---------------------------------------------------------
   "Industry" Blueprint-Komponenten: eckige, transparente
   Objekte mit Haarlinien-Rahmen und "+"-Eckmarken. Fuer neue
   fnm_*-Komponenten und umgebaute bt_*-Objekte.
   --------------------------------------------------------- */
.blueprint{
  position:relative;
  border:1px solid var(--fnm-divider);
  border-radius:0;
}
.blueprint.duotone{ overflow:visible; }
.blueprint > .corner{
  position:absolute; width:11px; height:11px;
  color: color-mix(in srgb, var(--fnm-charcoal) 55%, transparent);
}
.blueprint > .corner::before,
.blueprint > .corner::after{ content:""; position:absolute; background:currentColor; }
.blueprint > .corner::before{ left:5px; top:0; width:1px; height:100%; }
.blueprint > .corner::after{ top:5px; left:0; width:100%; height:1px; }
.blueprint > .corner.tl{ top:-6px; left:-6px; }
.blueprint > .corner.tr{ top:-6px; right:-6px; }
.blueprint > .corner.bl{ bottom:-6px; left:-6px; }
.blueprint > .corner.br{ bottom:-6px; right:-6px; }

.duotone{ position:relative; overflow:hidden; background:var(--fnm-subtle-bg); }
.duotone::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--fnm-accent); mix-blend-mode:color;
  /* Voll deckend ersetzt "color" Farbton UND Saettigung des Bildes - Gesichter
     werden stahlblau. Reduziert kommen Hauttoene und Materialien zurueck, der
     blaue Zusammenhalt bleibt. Grundwert; einzelne Bauteile staffeln darunter. */
  opacity:.4;
}
/* Gestaffelt nach Bauteil: das grossflaechige Hero traegt die Blaufaerbung als
   Stilmittel, die kleinen Sachbilder in den Abschnitten sollen dagegen vor
   allem erkennbar bleiben. Ganz abschalten laesst sich das je Abschnitt ueber
   das Feld "Bild einfaerben" (fnmSection.media_duotone). */
.fnm-hero-media::after{ opacity:.55; }
.fnm-section-media::after{ opacity:.3; }
.fnmTeaser .duotone::after{ opacity:.35; }

/* ---- Karten ---- */
.fnm-card{
  display:flex; flex-direction:column; gap:.5rem;
  padding:22px; background:transparent; border-radius:0;
}
.fnm-card-kicker{
  font-size:11px; letter-spacing:.1em; text-transform:uppercase;
  color: var(--fnm-red-dark); font-weight:600;
}
.fnm-card-title{
  font-family: var(--fnm-font-heading); font-weight:600;
  font-size:19px; line-height:1.2; margin:2px 0;
}
.fnm-card-body{ margin:0; font-size:14px; color: var(--fnm-charcoal); opacity:.82; }
.elev-sm{ box-shadow: var(--fnm-shadow); }

/* Gleiche Kartenhoehe je Zeile.
   Ein blosses h-100 auf der Karte reicht nicht: zwischen Bootstrap-Spalte und
   Karte sitzt der Huellrahmen .bt_card aus dem standard_html, und der hat
   keine feste Hoehe - die Prozentangabe laeuft daher ins Leere. Stattdessen
   die ganze Kette auf Flexbox stellen, dann streckt sich die Karte von selbst
   auf die Hoehe der hoechsten Karte ihrer Zeile. */
.bt_card_layout .row > [class*="col-"]{ display:flex; }
.bt_card_layout .row > [class*="col-"] > .bt_card{ display:flex; width:100%; }
.bt_card_layout .row > [class*="col-"] > .bt_card > .fnm-card{ flex:1 1 auto; }

.fnm-cardlink{
  display:inline-flex; align-items:center; gap:6px;
  margin-top:10px; font-weight:600; font-size:14px;
  color: var(--fnm-accent-dark); text-decoration:none;
}
.fnm-cardlink:hover{ color: var(--fnm-accent-darker); }

/* ---- Bild-Platzhalter (solange keine echten Fotos vorliegen) ---- */
.img-placeholder{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:8px; width:100%; height:100%; color: var(--fnm-dark-light);
  text-align:center; padding:12px;
}
.img-placeholder i{ font-size:26px; color: var(--fnm-accent-dark); }
.img-placeholder span{ font-size:12px; letter-spacing:.02em; }

/* ---- Tags ---- */
.tag{
  display:inline-flex; align-items:center;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  padding:5px 12px; border-radius:3px;
}
.tag-accent{ background: color-mix(in srgb, var(--fnm-red) 10%, var(--fnm-white)); color: var(--fnm-red-dark); }
.tag-outline{ border:1px solid var(--fnm-accent); color: var(--fnm-accent-dark); }

/* ---- Buttons (Blueprint-Variante mit Eckmarken) ---- */
.fnm-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  cursor:pointer; text-decoration:none;
  font-family: var(--fnm-font-heading); font-weight:600;
  font-size:14px; line-height:1.2; color: var(--fnm-charcoal);
  background:transparent; border:1px solid var(--fnm-divider); border-radius:0;
  padding:10px 34px;
}
/* Der CTA in der Navigation sitzt enger als die Flaechen-CTAs, behaelt aber
   spuerbar Luft links und rechts. */
.fnm-btn-nav{ font-size:14px; padding:8px 26px; }
.fnm-btn.blueprint.fnm-btn-primary{ background: var(--fnm-accent); color:#fff; border-color: var(--fnm-accent); }
.fnm-btn.blueprint.fnm-btn-primary:hover{ background: var(--fnm-accent-dark); color:#fff; }
.fnm-btn.blueprint.fnm-btn-secondary:hover{ background: color-mix(in srgb, var(--fnm-charcoal) 7%, transparent); }
.fnm-btn.blueprint.fnm-btn-ghost{ color: var(--fnm-accent-dark); border-color:transparent; padding-inline:8px; }
.fnm-btn.blueprint.fnm-btn-ghost:hover{ background: color-mix(in srgb, var(--fnm-accent) 10%, transparent); }
.fnm-btn-icon{ width:40px; height:40px; padding:0; }

/* Outline-Variante (emButton, btn_style = outline) */
.btn-outline-ek{
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  background:transparent;
  color:var(--fnm-accent);
  border:2px solid var(--fnm-accent);
  border-radius:var(--fnm-radius);
  padding:.55rem 1.4rem;
  font-weight:600;
  text-decoration:none;
  transition:.2s ease;
}

.web .eyebrow{
  text-transform:uppercase;
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.14em;
  color: var(--fnm-red-dark);
}

.page-meta {
  font-size:.78rem;
  font-weight:700;
  letter-spacing:.06em;
  color: var(--fnm-dark-light);
  margin-bottom:3px;
}
.page-meta i {
  color: var(--fnm-accent-dark);
}
.page-meta span + span::before{
  content:"|";
  margin:0 .85em;
  color: var(--fnm-dark-light);
  font-weight:400;
  letter-spacing:0;
}

/* ---------------------------------------------------------
   Header / Navigation  –  weisser Grund, Menue direkt neben dem Logo
   --------------------------------------------------------- */
.navbar-ek{
  background-color: var(--fnm-white);
  border-bottom:1px solid var(--fnm-divider);
  padding-top:.85rem;
  padding-bottom:.85rem;
}
.navbar-ek > .container{
  justify-content: flex-start;
  gap: 2.5rem;
}

/* Logo-Bild + Schriftzug im Header */
.navbar-brand-ek{
  display:flex;
  align-items:center;
  gap:.6rem;
  text-decoration:none;
}
.navbar-brand-ek img{
  height:72px;
  width:auto;
  flex-shrink:0;
}

/* Toggler-Icon auf hellem Grund sichtbar machen */
.navbar-ek .navbar-toggler{
  border-color: var(--fnm-divider);
}

/* Navigationslinks: dunkel auf weiss */
.navbar-ek .nav-link{
  color: var(--fnm-charcoal) !important;
  font-weight:600;
  padding:.5rem .95rem !important;
}
.navbar-ek .nav-link:hover,
.navbar-ek .nav-link.active{
  color: var(--fnm-accent-dark) !important;
}

/* Split-Dropdown: Titel anklickbar, Caret öffnet Untermenü */
.navbar-ek .nav-item-split{
  display:flex;
  align-items:center;
}
.navbar-ek .nav-item-split > .nav-link:not(.dropdown-toggle){
  padding-right:.2rem !important;
}
.navbar-ek .nav-item-split > .dropdown-toggle-split{
  padding-left:.2rem !important;
  padding-right:.7rem !important;
}
.navbar-ek .nav-item-split > .dropdown-toggle-split::after{
  margin-left:0;
}

.navbar-ek .dropdown-menu{
  border:none;
  background-color: var(--fnm-white);
  box-shadow: var(--fnm-shadow);
  border-radius: var(--fnm-radius);
  padding:.5rem 0;
}
.navbar-ek .dropdown-item{
  font-weight:500;
  padding:.5rem 1.25rem;
  color: var(--fnm-charcoal);
}
.navbar-ek .dropdown-item:hover,
.navbar-ek .dropdown-item:focus{
  background-color: var(--fnm-subtle-bg);
  color: var(--fnm-accent-dark);
}
.navbar-ek .dropdown-item.active{
  background-color: rgba(20,160,165,.14);
  color: var(--fnm-accent-darker);
  font-weight:600;
}
.navbar-ek .dropdown-item:active{
  background-color: var(--fnm-subtle-bg);
  color: var(--fnm-accent-dark);
}

/* Untermenü zweiter Ebene */
.dropdown-submenu{ position:relative; }
.dropdown-submenu > .dropdown-item::after{
  content:"\f105";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  float:right;
  margin-left:.5rem;
  font-size:.75rem;
  opacity:.6;
}
.dropdown-submenu > .dropdown-menu{
  top:0;
  left:100%;
  margin-top:-.5rem;
  display:none;
}
.dropdown-submenu.show > .dropdown-menu{ display:block; }

/* Container bleibt bei lg (992–1199) auf 960px, Nav ist aber schon expanded */
@media (min-width: 992px) and (max-width: 1199.98px) {
  .navbar-ek {
    padding-top: .65rem;
    padding-bottom: .65rem;
  }
  .navbar-brand-ek img {
    height: 63px;
  }
  .navbar-ek .navbar-nav {
    gap: 0 !important;
  }
  .navbar-ek .nav-link {
    padding: .45rem .55rem !important;
    font-size: .875rem;
  }
  .navbar-ek .nav-item-split > .nav-link:not(.dropdown-toggle) {
    padding-right: .15rem !important;
  }
  .navbar-ek .nav-item-split > .dropdown-toggle-split {
    padding-left: .15rem !important;
    padding-right: .5rem !important;
  }
}

@media (max-width: 991.98px){
  .dropdown-submenu > .dropdown-menu{
    position:static;
    left:auto; top:auto;
    margin-left:.75rem;
    border-left:2px solid var(--fnm-subtle-bg);
    box-shadow:none;
  }
  .navbar-ek .dropdown-menu{ box-shadow:none; }
}

/* ---------------------------------------------------------
   Hero
   --------------------------------------------------------- */
.hero{
  background-color: var(--fnm-dark-hero);
  background-image:
    radial-gradient(circle at 85% 20%, rgba(121,155,172,.40) 0%, rgba(121,155,172,0) 45%),
    radial-gradient(circle at 10% 90%, rgba(44,79,82,.60) 0%, rgba(44,79,82,0) 50%);
  color: var(--fnm-light-bg);
  padding:5.5rem 0 6.5rem;
  position:relative;
  overflow:hidden;
}
.hero h1{ color:var(--fnm-white); font-size:2.6rem; }
.hero p.lead{ color:rgba(247,250,252,.85); font-size:1.2rem; }
.hero .page-meta{
  color:rgba(247,250,252,.75);
  margin-bottom:.4rem;
}
.hero .page-meta i,
.hero .page-meta span + span::before{
  color:var(--fnm-accent-light);
}

/* ---------------------------------------------------------
   Fade-in beim Scrollen (nur bei aktivem JS, sonst sichtbar)
   --------------------------------------------------------- */
.js .reveal{
  opacity:0;
  transform:translateY(24px);
  transition:opacity .7s ease, transform .7s ease;
  will-change:opacity, transform;
}
.js .reveal.is-visible{
  opacity:1;
  transform:none;
}
/* Sanfter Versatz zwischen nebeneinanderliegenden Spalten einer Zeile */
.js .row > .reveal:nth-child(2){ transition-delay:.12s; }
.js .row > .reveal:nth-child(3){ transition-delay:.24s; }
.js .row > .reveal:nth-child(4){ transition-delay:.36s; }
@media (prefers-reduced-motion: reduce){
  .js .reveal{ opacity:1; transform:none; transition:none; }
}

/* ---------------------------------------------------------
   Sections
   --------------------------------------------------------- */
.section{ padding:4.5rem 0; }
.section-title{ padding:2.5rem 0;}
.section-light  { background-color: var(--fnm-light-bg); }
.section-subtle { background-color: var(--fnm-subtle-bg); }

/* Content-Bilder: leicht runde Ecken (wie Personenkarte) */
.section img,
.hero img{
  border-radius:var(--fnm-radius);
}

/* ---------------------------------------------------------
   Footer
   --------------------------------------------------------- */
.footer-bottom{
  background-color: var(--fnm-dark-nav);
  color: rgba(247,250,252,.6);
  font-size:.9rem;
  padding:1rem 0;
}
.footer-bottom a{
  color: rgba(247,250,252,.75);
  text-decoration:none;
  margin-left:1.25rem;
}
.footer-bottom a:hover{ color: var(--fnm-accent); }

#backToTop{
  position:fixed;
  right:1.5rem;
  bottom:1.5rem;
  width:46px; height:46px;
  border-radius:50%;
  background-color: var(--fnm-accent);
  color: var(--fnm-white);
  display:none;
  align-items:center;
  justify-content:center;
  box-shadow: var(--fnm-shadow);
  z-index:1040;
  border:none;
}
#backToTop:hover{ background-color: var(--fnm-accent-dark); }

/* ---------------------------------------------------------
   Textauszeichnungen (Zitate, Betonung)
   --------------------------------------------------------- */
.article-quote{
  border-left:4px solid var(--fnm-accent);
  background:var(--fnm-light-bg);
  padding:1.5rem 1.75rem;
  border-radius:var(--fnm-radius);
  font-size:1.2rem;
  font-style:italic;
  color:var(--fnm-dark-nav);
  margin:2rem 0;
}

/* ZMS-Standardzitat (p.blockquote > q) ≈ emQuote Variante light */
p.blockquote{
  border-left:4px solid var(--fnm-accent);
  background:var(--fnm-light-bg);
  padding:1.5rem 1.75rem;
  border-radius:var(--fnm-radius);
  font-size:1.2rem;
  font-style:italic;
  color:var(--fnm-dark-nav);
  margin:2rem 0;
  line-height:1.55;
}
p.blockquote::before{
  content:"\f10d"; /* fa-quote-left */
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-style:normal;
  color:var(--fnm-accent);
  margin-right:.5rem;
}
p.blockquote > q{
  quotes:none;
  font-style:inherit;
  color:inherit;
}
p.blockquote > q::before,
p.blockquote > q::after{
  content:none;
}

p.emphasis{
  font-size:1.1rem;
  font-weight:600;
  line-height:1.4;
  color:var(--fnm-accent);
  margin-bottom:1.25rem;
}

/* Hervorgehobene Hero-Lead-Zeile (reines Weiss statt gedaempft) */
.hero .lead.lead-strong{ color:var(--fnm-white); }

/* Community-Section auf Petrol-Hintergrund */
.section-primary{
  background-color: var(--fnm-accent-dark);
  color: var(--fnm-light-bg);
}
.section-primary .eyebrow{ color: var(--fnm-accent-dark); }
.section-primary h2{ color: var(--fnm-white); }
/* Hover-Marker: runder Punkt statt Rechteck – trifft das Motiv auch
   bei leicht abweichender Zonenaufteilung. Durchmesser 50% der Zonenbreite,
   skaliert automatisch mit der dynamischen Zonenbreite. */
.img-menu .img-zone::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:50%;
  aspect-ratio:1/1;
  transform:translate(-50%,-50%) scale(.85);
  border-radius:50%;
  background-color:rgba(204,99,123,.35);
  opacity:0;
  transition:opacity .2s ease, transform .2s ease;
  pointer-events:none;
}

/* ---------------------------------------------------------
   glossary
   --------------------------------------------------------- */
.po, .popover, [data-toggle="popover"] { 
  cursor:help; 
}

/* Glossar-Popover: etwas breiter als Bootstrap-Default (276px) */
.popover {
  --bs-popover-max-width: 22rem;
  max-width: 22rem;
}
.popover .popover-body .g_teaser {
  font-style: italic;
  margin-bottom: .65em;
}
.popover .popover-body .g_description {
  font-size: .95em;
  line-height: 1.35;
}

/* ---------------------------------------------------------
   fnmArticle – schmale Fliesstext-Spalte (Blog, Rechtstexte)
   --------------------------------------------------------- */
.fnm-prose{ font-size:17px; line-height:1.7; }
.fnm-prose > :first-child{ margin-top:0; }
.fnm-prose > :last-child{ margin-bottom:0; }
.fnm-prose h2{ font-size:clamp(22px,2.2vw,28px); margin:2rem 0 .75rem; }
.fnm-prose h3{ font-size:clamp(18px,1.8vw,22px); margin:1.5rem 0 .5rem; }
.fnm-prose p{ margin:0 0 1.1rem; }
.fnm-prose ul,.fnm-prose ol{ margin:0 0 1.1rem 1.25rem; }
.fnm-prose li{ margin-bottom:.4rem; }
.fnm-prose-legal{ font-size:16px; }
.fnm-prose-legal h2{ font-size:19px; margin:1.75rem 0 .5rem; }

/* ---------------------------------------------------------
   fnmTeaser – Karte mit Bild oben, ganze Karte verlinkt
   --------------------------------------------------------- */
.fnmTeaser a{ text-decoration:none; color:inherit; }
.fnmTeaser .blueprint{ transition:border-color .15s, transform .15s; }
.fnmTeaser a:hover .blueprint{ border-color:var(--fnm-accent); }
.fnmTeaser a:hover .fnm-cardlink{ color:var(--fnm-accent-darker); }
.fnmTeaser .duotone{ width:100%; }

/* ---------------------------------------------------------
   fnmFactBox / fnmCol – kleine Layout-Helfer
   --------------------------------------------------------- */
.fnmFactBox .fnm-card{ height:100%; }
.fnm-col-item + .fnm-col-item{ margin-top:1rem; }

/* Rahmenzelle einer fnmRow mit col_style="blueprint" (z.B. das Kunden-Logoraster).
   Frueher als Inline-Style im Render-Script - jetzt hier, damit sich die Optik
   an einer Stelle aendern laesst. */
.fnm-col-frame{
  display:flex; align-items:center; justify-content:center;
  aspect-ratio:4/3; padding:10px; height:100%;
}
/* Blueprint-Flaechen in einer fnmCol heben sich als ruhiges Weiss vom
   Seitengrund ab und bekommen die leichte Rundung des Design-Systems.
   Bewusst nur Inhaltsflaechen: Bild- und Karussellrahmen (.duotone,
   .fnm-carousel-frame) bleiben eckig, sonst stuende ein rechtwinkliges Bild
   in einem gerundeten Rahmen. */
.fnm-col-frame,
.fnmCol .blueprint.fnm-card{
  background: var(--fnm-white);
  border-radius: var(--fnm-radius);
}
.fnm-row-eyebrow{ margin-bottom:14px; }
.fnm-row-title{ margin-bottom:0; }

/* ---------------------------------------------------------
   fnmSection – Medienspalte
   Der Rahmen nimmt die Proportion des Bildes an und sitzt exakt
   darum. ZMSGraphic bringt die Pixelmasse inline mit, deshalb
   die !important-Korrekturen (wie beim fnmCarousel).
   --------------------------------------------------------- */
.fnm-section-media{ position:relative; }
.fnm-section-media-empty{ aspect-ratio:4/3; }
.fnm-section-media .ZMSGraphic,
.fnm-section-media .graphic{
  width:100% !important; margin:0; text-align:left !important;
}
.fnm-section-media img{
  display:block; width:100% !important; height:auto !important;
}

/* ---------------------------------------------------------
   fnmCta – Abschluss-Aufruf
   Der Knopf sitzt am Anfang seiner Spalte statt am rechten Rand
   und traegt etwas mehr Schrift als die kleinen Flaechen-Knoepfe.
   --------------------------------------------------------- */
.fnm-cta-actions{ display:flex; flex-wrap:wrap; gap:12px; }
.fnmCta .fnm-btn{ font-size:16px; padding-block:12px; }

/* ---------------------------------------------------------
   bt_jumbotron – Hero der Startseite
   (frueher komplett als Inline-Styles im Template)
   --------------------------------------------------------- */
.fnm-hero-tag{ margin-bottom:18px; }
.fnm-hero-title{ font-size:clamp(40px, 5.5vw, 68px); line-height:1.02; margin:0 0 22px; }
.fnm-hero-intro{ font-size:19px; line-height:1.6; max-width:480px; margin:0 0 32px; }
.fnm-hero-media{ position:relative; aspect-ratio:4/3; }
.fnm-hero-img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------------------------------------------------------
   fnmPageHero – Seitenkopf einer Unterseite
   Abstand nach oben kommt aus dem Theme-Rahmen (.col-lg-12),
   deshalb hier nur der Innenabstand nach unten.
   --------------------------------------------------------- */
.fnm-page-hero{ padding:0 0 24px; }
.fnm-page-hero-crumb{ font-size:13px; margin-bottom:18px; }
.fnm-page-hero-crumb a{ color:inherit; }
.fnm-page-hero-tag{ margin-bottom:18px; }
.fnm-page-hero-title{
  font-size:clamp(32px, 4.2vw, 52px); line-height:1.05;
  margin:0 0 20px; max-width:900px;
}
.fnm-page-hero-intro{ font-size:19px; line-height:1.6; max-width:660px; margin:0; }
/* Der Vorspann ist seit fnmPageHero 2.2.0 Richtext und kann mehrere Absaetze
   fuehren. Die Schriftgroesse erben die inneren Elemente, nur der Abstand
   unter dem letzten muss weg, damit der Kopf buendig schliesst. */
.fnm-page-hero-intro > :last-child{ margin-bottom:0; }
/* Media-Spalte des Seitenkopfs (Bild oder Karussell, rechts zur Haelfte).
   ZMSGraphic bringt seine Pixelmasse inline mit - deshalb !important. */
.fnm-page-hero-media > :last-child{ margin-bottom:0; }
.fnm-page-hero-media .ZMSGraphic,
.fnm-page-hero-media .graphic{ width:100% !important; margin:0; text-align:left !important; }
.fnm-page-hero-media img{ display:block; width:100% !important; height:auto !important; }

/* ---------------------------------------------------------
   fnmCarousel – Bootstrap-Karussell im Industry-Blueprint
   (portiert aus Emergetik/btCarousel, Optik neu)
   --------------------------------------------------------- */
.fnm-carousel-frame{ overflow:hidden; }
.fnm-carousel-frame .carousel,
.fnm-carousel-frame .carousel-inner,
.fnm-carousel-frame .carousel-item{ height:100%; }
.fnm-carousel-frame .carousel-content{ width:100%; height:100%; }
.fnm-carousel-frame .carousel-content .graphic{ text-align:center !important; }
.fnm-carousel-frame .carousel-content img{ object-fit:cover; display:block; }

/* Bildunterschrift: ZMSGraphic gibt sein Feld 'text' selbst aus.
   Je nach Schalter wird dieser Text als Overlay gezeigt oder versteckt. */
.fnm-carousel-nocaptions .carousel-content .text{ display:none !important; }
.fnm-carousel-captions .carousel-content .text{
  position:absolute; left:0; right:0; bottom:0; width:auto !important;
  margin:0 !important; padding:10px 14px; text-align:left;
  background:color-mix(in srgb, var(--fnm-accent-deep) 78%, transparent);
  color:var(--fnm-white); font-size:13px; line-height:1.4; z-index:2;
}

/* Indikatoren: eckige Striche statt Punkte */
.fnm-carousel .carousel-indicators{ margin:0 0 12px; gap:6px; }
.fnm-carousel .carousel-indicators [data-bs-target]{
  width:22px; height:3px; border:0; border-radius:0;
  background:var(--fnm-white); opacity:.45;
  transition:opacity .15s, background-color .15s;
}
.fnm-carousel .carousel-indicators .active{
  opacity:1; background:var(--fnm-accent-light);
}

/* Pfeile: eckige Flaechen mit Haarlinie statt runder Icons */
.fnm-carousel .carousel-control-prev,
.fnm-carousel .carousel-control-next{
  width:44px; opacity:0; transition:opacity .15s;
}
.fnm-carousel:hover .carousel-control-prev,
.fnm-carousel:hover .carousel-control-next,
.fnm-carousel:focus-within .carousel-control-prev,
.fnm-carousel:focus-within .carousel-control-next{ opacity:1; }
.fnm-carousel .carousel-control-prev-icon,
.fnm-carousel .carousel-control-next-icon{
  width:34px; height:34px; background-size:14px 14px;
  background-color:color-mix(in srgb, var(--fnm-charcoal) 55%, transparent);
  border:1px solid rgba(255,255,255,.5); border-radius:0;
}

/* Bildunterschrift im Blueprint-Ton */
.fnm-carousel .carousel-caption{
  left:0; right:0; bottom:0; padding:10px 14px; text-align:left;
  background:color-mix(in srgb, var(--fnm-accent-deep) 78%, transparent);
  font-size:13px; line-height:1.4;
}

/* Duotone darf die Bedienelemente nicht einfaerben */
.fnm-carousel-frame.duotone::after{ z-index:1; }
.fnm-carousel .carousel-indicators,
.fnm-carousel .carousel-control-prev,
.fnm-carousel .carousel-control-next,
.fnm-carousel .carousel-caption{ z-index:2; }

/* fnmCarousel: Zoom-Button + Fancybox-Kopie (portiert aus Emergetik,
   Optik eckig im Blueprint-Stil statt abgerundet) */
.fnm-carousel-zoom{
  position:absolute; right:10px; bottom:10px; z-index:3;
  width:32px; height:32px; padding:0;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,.5); border-radius:0;
  background:color-mix(in srgb, var(--fnm-accent-deep) 72%, transparent);
  color:var(--fnm-white); font-size:13px; line-height:1;
  cursor:zoom-in; opacity:0; transition:opacity .15s, background-color .15s;
}
.fnm-carousel-frame:hover .fnm-carousel-zoom,
.fnm-carousel-zoom:focus{ opacity:1; }
.fnm-carousel-zoom:hover{
  background:var(--fnm-accent); border-color:var(--fnm-accent-light);
  color:var(--fnm-white); outline:none;
}
.fancybox-fnm-carousel .fancybox-content{
  background:transparent; padding:0; max-width:min(1100px, 96vw);
}
.fancybox-fnm-carousel .fnm-carousel-fancybox-inner{
  width:min(1100px, 96vw); max-width:100%;
}
.fancybox-fnm-carousel .fnm-carousel{
  background:var(--fnm-accent-deep); border:1px solid var(--fnm-divider);
  border-radius:0; overflow:hidden;
}
/* in der Lightbox kein zweiter Zoom-Button, Pfeile dauerhaft sichtbar */
.fancybox-fnm-carousel .fnm-carousel-zoom{ display:none; }
.fancybox-fnm-carousel .carousel-control-prev,
.fancybox-fnm-carousel .carousel-control-next{ opacity:1; }

.fnm-carousel-frame .carousel-content img,
.fnm-carousel-frame .carousel-content .ZMSGraphic,
.fnm-carousel-frame .carousel-content .graphic{
  /* ZMSGraphic setzt die Pixelbreite inline - nur !important sticht das */
  width:100% !important; height:100%; margin:0;
}

/* ---------------------------------------------------------
   fnmContactForm – Kontaktformular im Industry-Blueprint
   --------------------------------------------------------- */
.fnm-contact-form .field{ display:flex; flex-direction:column; gap:6px; }
.fnm-contact-form label{
  font-size:12px; letter-spacing:.06em; text-transform:uppercase;
  font-weight:600; color:var(--fnm-accent-dark);
}
.fnm-contact-form .input{
  width:100%; padding:10px 12px; font-family:var(--fnm-font-base); font-size:15px;
  color:var(--fnm-charcoal); background:var(--fnm-white);
  border:1px solid var(--fnm-divider); border-radius:0; outline:none;
  transition:border-color .15s, box-shadow .15s;
}
.fnm-contact-form .input:focus{
  border-color:var(--fnm-accent);
  box-shadow:0 0 0 2px color-mix(in srgb, var(--fnm-accent) 22%, transparent);
}
.fnm-contact-form textarea.input{ resize:vertical; min-height:110px; }
.fnm-contact-form .input.is-invalid{ border-color:#b3261e; }
.fnm-field-error{ display:block; margin-top:4px; font-size:13px; color:#b3261e; }
.fnm-contact-error{
  margin:0 0 16px; padding:10px 14px; font-size:14px;
  color:#b3261e; border:1px solid #b3261e;
  background:color-mix(in srgb, #b3261e 8%, var(--fnm-white));
}
.fnm-contact-note{ margin:10px 0 0; font-size:12px; color:var(--fnm-dark-nav); opacity:.7; }
.fnm-contact-form .fnm-btn-block{ width:100%; }
/* Waehrend des Absendens (web.js tauscht nur den Inhalt von .fnm-contact-wrap) */
.fnm-contact-form .fnm-btn.is-busy{ opacity:.65; cursor:progress; }
.fnm-contact-success:focus{ outline:none; }
/* Der dunkle Abschnitt faerbt Text weiss - im weissen Formularkasten zuruecksetzen */
.fnm-contact .fnm-contact-form,
.fnm-contact .fnm-contact-success{ color:var(--fnm-charcoal); }
.fnm-contact .fnm-contact-form label{ color:var(--fnm-accent-dark); }

/* ALTCHA - Bot-Schutz, selbst gehostet (altcha.org, MIT). Das Widget sitzt
   immer im weissen Formularkasten, daher nur diese eine Farbvariante. */
.fnm-altcha{ margin-top:18px; }
.fnm-altcha altcha-widget{
  display:block;
  font-family:var(--fnm-font-base); font-size:14px;
  --altcha-max-width:100%;
  --altcha-border-width:1px;
  --altcha-border-radius:0;
  --altcha-border-color:var(--fnm-divider);
  --altcha-color-base:var(--fnm-white);
  --altcha-color-base-content:var(--fnm-charcoal);
  --altcha-color-neutral:var(--fnm-divider);
  --altcha-color-primary:var(--fnm-accent);
  --altcha-color-primary-content:var(--fnm-white);
  --altcha-color-success:var(--fnm-accent-dark);
  --altcha-color-error:#b3261e;
  --altcha-checkbox-border-radius:0;
  --altcha-checkbox-border-color:var(--fnm-divider);
}