/* =====================================================================
   Fachmarkt Altshausen – Startseite (Bootstrap 5.3.8 Custom Theme)
   custom.css  ·  ergänzt Bootstrap um das Marken-Design
   ===================================================================== */

:root{
  --fm-gruen: #5BA644;
  --fm-gruen-tief: #1F3A2B;
  --fm-gruen-soft: #EAF3E2;
  --fm-sonne: #F4A622;
  --fm-sonne-tief: #C8821A;
  --fm-sonne-soft: #FDEFD3;
  --fm-bg: #F7F4EE;
  --fm-linie: #E5DFD3;
  --fm-linie-stark: #C9C1AE;
  --fm-text: #1E2620;
  --fm-text-mute: #5C6259;

  /* Bootstrap-Variablen überschreiben */
  --bs-body-bg: var(--fm-bg);
  --bs-body-color: var(--fm-text);
  --bs-body-font-family: 'Inter', system-ui, -apple-system, sans-serif;
  --bs-primary: #5BA644;
  --bs-primary-rgb: 91,166,68;
  --bs-border-color: var(--fm-linie);
  --bs-link-color: var(--fm-gruen-tief);
  --bs-link-hover-color: var(--fm-gruen);
}

body{ -webkit-font-smoothing:antialiased; background:var(--fm-bg); }

h1,h2,h3,h4,h5.fm-serif,.fm-serif{
  font-family:'Source Serif 4', Georgia, serif;
  font-weight:600; color:var(--fm-gruen-tief);
  letter-spacing:-0.01em; line-height:1.15;
}
.fm-accent{ color:var(--fm-gruen); font-style:italic; font-weight:500; }
.fm-mono{
  /* font-family:'JetBrains Mono', ui-monospace, monospace; */
  font-size:13px; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--fm-text-mute);
}
.fm-container{ max-width:1360px; }

/* ---- Buttons ---- */
.btn-fm-primary{ background:var(--fm-gruen); color:#fff; border:none; font-weight:600;
  box-shadow:0 1px 0 rgba(0,0,0,.06), inset 0 -2px 0 rgba(0,0,0,.08); }
.btn-fm-primary:hover{ background:#4F9438; color:#fff; }
.btn-fm-ghost{ background:transparent; border:1px solid var(--fm-linie-stark); color:var(--fm-text); font-weight:600; }
.btn-fm-ghost:hover{ background:#fff; color:var(--fm-gruen-tief); }
.btn-fm-primary, .btn-fm-ghost{ border-radius:999px; padding:.7rem 1.15rem; }

/* ---- Topbar ---- */
.fm-topbar{ background:var(--fm-gruen-tief); color:#E8EEE5; font-size:13px; }
.fm-topbar .fm-usp span{ color:#C8D4C0; }
.fm-open-pill{ display:inline-flex; align-items:center; gap:8px; background:rgba(244,166,34,.16);
  color:#FFD27A; padding:5px 12px; border-radius:999px; border:1px solid rgba(244,166,34,.35); font-weight:500; }
.fm-open-pill .fm-dot{ width:7px; height:7px; border-radius:50%; background:var(--fm-sonne);
  box-shadow:0 0 0 4px rgba(244,166,34,.25); }
.fm-open-pill.closed{ background:rgba(255,255,255,.06); color:#C8D4C0; border-color:rgba(255,255,255,.15); }
.fm-open-pill.closed .fm-dot{ background:#9AA59A; box-shadow:none; }

/* ---- Navbar ---- */
.fm-navbar{ background:#fff; border-bottom:1px solid var(--fm-linie); }
.fm-navbar .navbar-brand img{ height:74px; width:auto; }
.fm-navbar .nav-link{ font-weight:500; color:var(--fm-text); position:relative; }
.fm-navbar .nav-link:hover{ color:var(--fm-gruen-tief); }
/* border:0 – sonst erben die Dropdown-Toggles über .dropdown-toggle::after
   zusätzlich die Caret-Borders von Bootstrap und die Linie wird dick/dunkel. */
.fm-navbar .nav-link::after{ content:''; position:absolute; left:.5rem; right:.5rem; bottom:.35rem;
  height:2px; border:0; background:var(--fm-gruen); transform:scaleX(0); transform-origin:left; transition:transform .2s; }
.fm-navbar .nav-link:hover::after{ transform:scaleX(1); }
.fm-navbar .fm-phone{ display:inline-flex; align-items:center; gap:8px; background:var(--fm-gruen-soft);
  color:var(--fm-gruen-tief); padding:9px 16px; border-radius:999px; font-weight:600; font-size:14px; text-decoration:none; }
/* Megamenü */
.fm-mega{ border:1px solid var(--fm-linie); border-radius:14px; padding:1.5rem;
  box-shadow:0 24px 48px -16px rgba(31,58,43,.18); min-width:720px; }
.fm-mega h6{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fm-gruen);
  font-weight:600; margin-bottom:.65rem; }
.fm-mega a{ display:block; padding:.3rem 0rem; border-radius:6px; font-size:14px; color:var(--fm-text); text-decoration:none; }
.fm-mega a:hover{ background:var(--fm-gruen-soft); color:var(--fm-gruen-tief);   }
/* Vier Spalten als Raster statt gestapelter Blöcke: So beginnt die zweite
   Zeile in jeder Spalte auf derselben Höhe, egal wie lang der Block darüber ist. */
.fm-mega-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1.75rem 1.5rem; align-items:start; }
/* Abschlusszeile des Panels */
.fm-mega-foot{ margin-top:1.25rem; padding-top:1rem; border-top:1px solid var(--fm-linie); }
.fm-mega-foot a{ display:inline-flex!important; align-items:center; gap:8px; font-weight:600; color:var(--fm-gruen-tief); }
/* Unter Desktop-Breite zeigt das Burger-Menü nur die Hauptpunkte – die
   Panels bleiben ganz aus, der Menüpunkt führt direkt auf seine Seite. */
@media (max-width: 1199.98px){
  .fm-navbar .nav-item.dropdown > .dropdown-menu{ display:none!important; }
}
/* Ab Desktop spannt das Panel über den ganzen Header-Container: Bezugspunkt
   der absoluten Positionierung vom <li> auf den Container verlegen. Bootstrap
   deaktiviert Popper innerhalb der Navbar, es gibt also kein automatisches
   Ausweichen an der Viewport-Kante – ohne das lief das Panel rechts hinaus. */
@media (min-width: 1200px){
  .fm-navbar .fm-container{ position:relative; }
  .fm-navbar .nav-item.dropdown{ position:static; }
  .fm-navbar .nav-item.dropdown > .dropdown-menu{
    left:0; right:0; width:auto; min-width:0;
    margin-top:0;                 /* keine Hover-Lücke, sonst flackert es */
    border-top-left-radius:0; border-top-right-radius:0;
  }
}

/* ---- Hero ---- */
/* Die Hero-Zeile nutzt g-5, also -24px Außenmargin, der Container hat aber nur
   12px Padding – die Zeile ragt dadurch je 12px hinaus und erzeugt unter ~1385px
   einen horizontalen Scrollbalken. Dort liegt nur leeres Spalten-Padding, das
   Wegschneiden kostet also nichts. clip (nicht hidden), damit die vertikale
   Achse sichtbar bleibt. */
.fm-hero{ overflow-x:clip; }
.fm-hero h1{ font-size:clamp(42px,5.4vw,76px); line-height:1; }
.fm-hero .lead{ font-size:19px; color:var(--fm-text-mute); max-width:560px; }
/* Vier Fakten passen nie nebeneinander in die Hero-Spalte – festes 2×2-Raster
   statt eines 3+1-Umbruchs. */
.fm-hero .fm-meta{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1.5rem 2rem; max-width:560px; }
.fm-hero .fm-meta .num{ font-family:'Source Serif 4',serif; font-size:32px; color:var(--fm-gruen-tief); font-weight:600; line-height:1; }
.fm-hero .fm-meta .lbl{ font-size:13px; color:var(--fm-text-mute); }
.fm-hero-art{ position:relative; height:540px; }
.fm-ph{  border-radius:14px; overflow:hidden; position:absolute; }
.fm-ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.fm-hero-art .a{ left:0; top:24px; width:72%; height:72%; }
.fm-hero-art .b{ right:0; top:0; width:42%; height:46%; }
.fm-hero-art .c{ right:8%; bottom:0; width:54%; height:42%; }
.fm-tag{ position:absolute; background:#fff; border:1px solid var(--fm-linie); border-radius:12px;
  padding:10px 14px; box-shadow:0 12px 24px -10px rgba(31,58,43,.18); display:flex; gap:10px; align-items:center; font-size:13px; }
.fm-tag.t1{ left:-18px; bottom:32%; }
.fm-tag .ic{ width:32px; height:32px; border-radius:8px; background:var(--fm-gruen-soft); color:var(--fm-gruen-tief);
  display:grid; place-items:center; flex-shrink:0; }

/* ---- Section header ---- */
.fm-eyebrow{ display:inline-flex; gap:10px; align-items:center; margin-bottom:14px; }
/*.fm-eyebrow::before{ content:''; width:24px; height:1px; background:var(--fm-gruen); }*/
.fm-sec h2{ font-size:clamp(30px,3.6vw,46px); }

/* ---- Erlebniswelten ---- */
.fm-welt{ background:#fff; border:1px solid var(--fm-linie); border-radius:18px; overflow:hidden;
  height:100%; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .25s, box-shadow .25s; position:relative; }
.fm-welt:hover{ transform:translateY(-3px); box-shadow:0 28px 50px -24px rgba(31,58,43,.22); }
.fm-welt .fm-visual{ height:248px; flex-shrink:0; position:relative; overflow:hidden;
  background:repeating-linear-gradient(45deg,#E8E2D2,#E8E2D2 10px,#DCD4BF 10px,#DCD4BF 20px); }
.fm-welt .fm-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fm-welt .fm-visual::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(31,58,43,0) 55%,rgba(31,58,43,.45) 100%); }
.fm-welt .fm-body{ padding:1.6rem 1.75rem 1.75rem; display:flex; flex-direction:column; gap:14px; flex:1; }
.fm-welt h3{ font-size:26px; }
.fm-welt .fm-tag-pill{ font-size:12px; padding:4px 10px; border-radius:999px; background:var(--fm-gruen-soft);
  color:var(--fm-gruen-tief); font-weight:500; }
.fm-welt .fm-arrow{ position:absolute; top:18px; right:18px; width:44px; height:44px; border-radius:50%;
  background:#fff; border:1px solid var(--fm-linie); display:grid; place-items:center; z-index:2;
  transition:background .2s, color .2s, transform .25s; }
.fm-welt:hover .fm-arrow{ background:var(--fm-gruen); color:#fff; border-color:var(--fm-gruen); transform:rotate(-45deg); }
.fm-welt-logos{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; padding-top:14px;
  border-top:1px dashed var(--fm-linie); margin-top:4px; }
.fm-welt-logos img{ max-height:26px; max-width:96px; width:auto; height:auto; object-fit:contain; opacity:.92; }
.fm-welt-logos img.sm{ max-height:18px; max-width:64px; }

/* ---- Marken ---- */
.fm-marke{ aspect-ratio:2.2/1; border:1px solid var(--fm-linie); border-radius:10px; display:grid;
  place-items:center; background:#fff; padding:16px; transition:transform .2s, box-shadow .2s; }
.fm-marke:hover{ transform:translateY(-2px); box-shadow:0 10px 20px -10px rgba(0,0,0,.12); }
.fm-marke img{ max-width:100%; max-height:48px; width:auto; height:auto; object-fit:contain; }

/* ---- Saison ---- */
.fm-saison-card{ background:#fff; border:1px solid var(--fm-linie); border-radius:16px; overflow:hidden;
  height:100%; display:flex; flex-direction:column; text-decoration:none; color:inherit;
  transition:transform .2s, box-shadow .2s; }
.fm-saison-card:hover{ transform:translateY(-2px); box-shadow:0 18px 30px -16px rgba(31,58,43,.18); }
.fm-saison-card .fm-visual{ position:relative; min-height:200px; overflow:hidden;
  background:repeating-linear-gradient(45deg,#E8E2D2,#E8E2D2 10px,#DCD4BF 10px,#DCD4BF 20px); }
.fm-saison-card.main .fm-visual{ min-height:300px; }
.fm-saison-card .fm-visual img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.fm-saison-card .fm-visual::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(31,58,43,0) 50%,rgba(31,58,43,.5) 100%); }
.fm-saison-badge{ position:absolute; top:14px; left:14px; background:var(--fm-sonne); color:#3A2810;
  padding:5px 10px; border-radius:6px; font-size:11px; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; z-index:1; }
.fm-saison-badge.gruen{ background:var(--fm-gruen); color:#fff; }
.fm-saison-card .fm-body{ padding:1.25rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:8px; flex:1; }
.fm-saison-card .kicker{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fm-gruen); font-weight:600; }
.fm-saison-card h4{ font-family:'Source Serif 4',serif; color:var(--fm-gruen-tief); font-weight:600; font-size:21px; line-height:1.2; }
.fm-saison-card.main h4{ font-size:28px; }
.fm-saison-card .more{ margin-top:auto; font-size:13px; font-weight:600; color:var(--fm-gruen-tief);
  display:inline-flex; gap:6px; align-items:center; padding-top:10px; }

/* ---- Anfahrt ---- */
.fm-map{ position:relative; border-radius:18px; overflow:hidden; border:1px solid var(--fm-linie-stark);
  min-height:440px; background:#E8E2D2; height:100%; }
.fm-map svg{ display:block; width:100%; height:100%; }
.fm-map-pin{ position:absolute; top:50%; left:48%; transform:translate(-50%,-100%); z-index:2;
  display:flex; flex-direction:column; align-items:center; gap:6px; }
.fm-map-pin .bubble{ background:#fff; border:1px solid var(--fm-linie-stark); border-radius:10px; padding:8px 12px;
  box-shadow:0 12px 24px -10px rgba(0,0,0,.2); font-size:12.5px; font-weight:600; color:var(--fm-gruen-tief); white-space:nowrap; text-align:center; }
.fm-map-pin .pin{ width:22px; height:22px; border-radius:50% 50% 50% 0; background:var(--fm-sonne);
  border:3px solid #fff; transform:rotate(-45deg); box-shadow:0 4px 8px rgba(0,0,0,.2); }
.fm-info{ background:#fff; border:1px solid var(--fm-linie); border-radius:18px; padding:2rem; height:100%; }
.fm-hours .row-h{ display:flex; justify-content:space-between; align-items:center; padding:10px 12px;
  border-bottom:1px dashed var(--fm-linie); font-size:14.5px; }
.fm-hours .row-h:last-child{ border-bottom:none; }
.fm-hours .row-h.today{ background:var(--fm-gruen-soft); border-radius:0px; padding:10px 12px; border-bottom:none;
  font-weight:600; color:var(--fm-gruen-tief); }
.fm-hours .row-h.closed{ color:var(--fm-text-mute); }
.fm-contact .ic{ width:36px; height:36px; border-radius:50%; background:var(--fm-gruen-soft); color:var(--fm-gruen-tief);
  display:grid; place-items:center; flex-shrink:0; }
.fm-contact strong{ display:block; font-size:13px; color:var(--fm-gruen-tief); }
.fm-contact span{ font-size:14px; color:var(--fm-text-mute); }

/* ---- Footer ---- */
.fm-footer{ background:var(--fm-gruen-tief); color:#C8D4C0; }
.fm-footer h5{ font-size:13px; letter-spacing:.06em; text-transform:uppercase; color:#fff; font-weight:600;
  font-family:'Inter',sans-serif; }
.fm-footer a{ color:#C8D4C0; text-decoration:none; }
.fm-footer a:hover{ color:var(--fm-sonne); }
.fm-footer .brand-logo{ height:70px; width:auto; background:#fff; border-radius:10px; padding:10px; }
.fm-footer .social{ width:38px; height:38px; border-radius:9px; border:1px solid rgba(255,255,255,.15);
  display:grid; place-items:center; }
.fm-footer .foot-bottom{ border-top:1px solid rgba(255,255,255,.1); color:#9AA59A; font-size:13px; }
.fm-footer .foot-bottom a{ color:#9AA59A; }
.fm-footer .foot-bottom a:hover{ color:#fff; }

/* ---- Mobile sticky bar ---- */
.fm-mobilebar{ position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--fm-linie);
  box-shadow:0 -10px 24px -10px rgba(0,0,0,.12); z-index:1030; display:none; }
.fm-mobilebar a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  height:64px; font-size:11px; color:var(--fm-gruen-tief); font-weight:600; text-decoration:none; border-right:1px solid var(--fm-linie); }
.fm-mobilebar a:last-child{ border-right:none; }
.fm-mobilebar .status{ font-family:'JetBrains Mono',monospace; font-size:9px; color:var(--fm-text-mute);
  letter-spacing:.06em; text-transform:uppercase; }

/* .85rem statt 1rem: mit sechs Menüpunkten braucht die Zeile bei 1rem 985px,
   verfügbar sind im 1360er-Container aber nur 981px – sie bräche sonst um. */
@media (min-width: 1400px) {
  .fm-navbar .nav-link {
    padding-left: .85rem!important;
    padding-right: .85rem!important;
  }
}

/* Die Navbar klappt erst ab xl auf (navbar-expand-xl) – sechs Menüpunkte plus
   Logo passen erst ab ~1400px in voller Größe in eine Zeile. Zwischen 1200 und
   1400px deshalb Logo und Menü kompakter. */
@media (min-width: 1200px) and (max-width: 1399.98px){
  .fm-navbar .navbar-brand img{ height:52px; }
  .fm-navbar .navbar-nav{ --bs-navbar-nav-link-padding-x:.35rem; }
  .fm-navbar .nav-link{ font-size:14px; white-space:nowrap; }
}

@media (max-width: 991.98px){
  .fm-hero-art{ height:420px; }
  .fm-heroB{ min-height:auto!important; }
  .fm-heroB-inner{ padding-top:64px!important; }
  .fm-heroB-open{ margin-left:0!important; width:100%; }
}
@media (max-width: 575.98px){
  .fm-navbar .navbar-brand img{ height:50px; }
  .fm-mobilebar{ display:block; }
  body{ padding-bottom:64px; }
  .fm-saison-card.main .fm-visual{ min-height:200px; }
  .fm-heroB h1{ font-size:44px!important; }
}

/* =====================================================================
   Markt- & Team-Seite
   ===================================================================== */
/* ---- Hero B (Vollbild) ---- */
.fm-heroB{ position:relative; min-height:620px; display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden; color:#fff; }
.fm-heroB-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.fm-heroB-scrim{ position:absolute; inset:0;
  background:linear-gradient(90deg,rgba(20,34,25,.9) 0%,rgba(20,34,25,.72) 42%,rgba(20,34,25,.28) 100%),linear-gradient(0deg,rgba(20,34,25,.85) 0%,rgba(20,34,25,0) 55%); }
.fm-heroB-inner{ position:relative; width:100%; padding:96px 0 32px; }
.fm-heroB-eyebrow{ font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--fm-sonne); display:block; margin-bottom:18px; }
.fm-heroB h1{ color:#fff; font-size:clamp(44px,6vw,80px); margin-bottom:20px; }
.fm-heroB h1 .fm-accent{ color:var(--fm-sonne); }
.fm-heroB .lead{ font-size:19px; color:rgba(255,255,255,.9); max-width:540px; margin:0 0 30px; }
.fm-heroB-ghost{ background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.35); color:#fff; backdrop-filter:blur(4px); }
.fm-heroB-ghost:hover{ background:rgba(255,255,255,.2); color:#fff; }
.fm-heroB-stats{ position:relative; width:100%; padding:22px 0 30px; display:flex; gap:44px; flex-wrap:wrap; align-items:center; }
.fm-heroB-stats .fm-stat{ display:flex; flex-direction:column; gap:2px; }
.fm-heroB-stats .num{ font-family:'Source Serif 4',serif; font-size:30px; color:#fff; font-weight:600; line-height:1; }
.fm-heroB-stats .lbl{ font-size:13px; color:rgba(255,255,255,.75); }
.fm-heroB-open{ margin-left:0; }

/* ---- Galerie ---- */
.mt-tile{ position:relative; margin:0; border-radius:16px; overflow:hidden; border:1px solid var(--fm-linie); background:#fff; height:100%; min-height:250px; }
.mt-tile img, .mt-tile video{ width:100%; height:100%; object-fit:cover; display:block; position:absolute; inset:0; }
/* Play-Button der Video-Kachel – sichtbar, solange nicht abgespielt wird */
.mt-video-play{ position:absolute; inset:0; margin:auto; width:72px; height:72px; border:0; border-radius:50%;
  background:rgba(255,255,255,.92); color:var(--fm-gruen-tief); display:grid; place-items:center; cursor:pointer;
  z-index:2; padding-left:4px; box-shadow:0 10px 24px -8px rgba(31,58,43,.5); transition:transform .2s, background .2s; }
.mt-video-play:hover{ background:#fff; transform:scale(1.06); }
.mt-video-play[hidden]{ display:none; }
.mt-tile--big{ min-height:516px; }
.mt-ph{ width:100%; height:100%; min-height:200px; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center;
  color:var(--fm-linie-stark); background:repeating-linear-gradient(45deg,#EFEADE,#EFEADE 10px,#E8E2D2 10px,#E8E2D2 20px); }
.mt-ph span{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--fm-text-mute); }
.mt-tile figcaption{ position:absolute; left:0; right:0; bottom:0; padding:16px; display:flex; flex-direction:column; gap:2px;
  background:linear-gradient(180deg,rgba(31,58,43,0),rgba(31,58,43,.7)); z-index:1; }
.mt-tile figcaption strong{ color:#fff; font-size:15px; font-weight:600; }
.mt-tile figcaption span{ color:rgba(255,255,255,.85); font-size:12px; }
.mt-tile.is-ph figcaption{ background:none; }
.mt-tile.is-ph figcaption strong{ color:var(--fm-gruen-tief); }
.mt-tile.is-ph figcaption span{ color:var(--fm-text-mute); }

/* ---- Vorteile ---- */
.mt-vorteil{ background:#fff; border:1px solid var(--fm-linie); border-radius:16px; padding:30px; height:100%; display:flex; flex-direction:column; gap:20px; }
.mt-vorteil-ic{ width:72px; height:72px; border-radius:14px; background:var(--fm-gruen); color:#fff; display:grid; place-items:center; flex-shrink:0; }
.mt-vorteil h3{ font-family:'Source Serif 4',serif; font-size:22px; color:var(--fm-gruen-tief); margin-bottom:8px; }
.mt-vorteil p{ margin:0; color:var(--fm-text-mute); font-size:15px; }

/* ---- Team ---- */
.mt-member{ background:#fff; border:1px solid var(--fm-linie); border-radius:16px; overflow:hidden; height:100%;
  transition:transform .2s, box-shadow .2s; }
.mt-member:hover{ transform:translateY(-2px); box-shadow:0 18px 30px -18px rgba(31,58,43,.2); }
.mt-member.lead{ border-color:rgba(244,166,34,.5); }
.mt-avatar{ position:relative; aspect-ratio:1/1; display:flex; flex-direction:column; gap:8px; align-items:center; justify-content:center;
  color:var(--fm-linie-stark);}
.mt-member.lead .mt-avatar{ background:linear-gradient(135deg,#FFF6E2,#FDEFD3); color:var(--fm-sonne-tief); }
.mt-avatar-note{ font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--fm-text-mute); }
.mt-member-body{ padding:16px 18px 20px; display:flex; flex-direction:column; gap:3px; }
.mt-member-name{ font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fm-text-mute); }
.mt-member-role{ font-family:'Source Serif 4',serif; font-size:19px; color:var(--fm-gruen-tief); font-weight:600; line-height:1.2; }
.mt-member-dept{ font-size:13px; color:var(--fm-text-mute); }
.mt-team-cta{ background:var(--fm-gruen-tief); color:#E8EEE5; border-radius:18px; padding:32px 36px; }
.mt-team-cta h3{ color:#fff; font-size:24px; margin-bottom:6px; }
.mt-team-cta p{ margin:0; color:#C8D4C0; font-size:15px; }


/* ================= SORTIMENTSSEITE ================= */
/* overflow-x:clip wie beim Start-Hero: auch hier steckt ein row g-5 im
   Container und ragt sonst je 12px hinaus (horizontaler Scrollbalken). */
.sh-hero{ background:#fff; border-bottom:1px solid var(--fm-linie); padding:26px 0 56px; overflow-x:clip; }
.sh-crumb{ display:flex; align-items:center; gap:8px; margin-bottom:34px; flex-wrap:wrap; }
.sh-crumb a{ color:var(--fm-text-mute); text-decoration:none; }
.sh-crumb a:hover{ color:var(--fm-gruen); }
.sh-crumb strong{ color:var(--fm-gruen-tief); font-weight:600; }
.sh-hero h1{ font-size:clamp(40px,5vw,68px); margin-bottom:20px; }
.sh-intro{ font-size:18px; line-height:1.65; color:var(--fm-text-mute); max-width:560px; text-wrap:pretty; margin-bottom:24px; }
.sh-facts{ gap:40px; margin-top:32px; padding-top:24px; border-top:1px solid var(--fm-linie); }
.sh-facts .fm-stat{ display:flex; flex-direction:column; gap:4px; }
.sh-facts .fm-stat .num{ font-family:'Source Serif 4',serif; font-size:30px; font-weight:600; color:var(--fm-gruen-tief); line-height:1; }
.sh-facts .fm-stat .lbl{ font-size:13px; color:var(--fm-text-mute); }
.sh-photo{ margin:0; border-radius:18px; overflow:hidden; border:1px solid var(--fm-linie); position:relative; }
.sh-photo img{ width:100%; height:min(520px,52vw); object-fit:cover; display:block; }
.sh-photo figcaption{ position:absolute; left:0; right:0; bottom:0; padding:34px 22px 16px; font-size:13px; color:#fff;
  background:linear-gradient(180deg,rgba(31,58,43,0),rgba(31,58,43,.78)); }

/* Sprungnavigation über die Bereiche einer Sortimentswelt */
.sh-jump{ display:flex; flex-wrap:wrap; gap:8px; }
.sh-jump a{ display:inline-flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--fm-linie);
  border-radius:999px; padding:7px 14px; font-size:13.5px; font-weight:500; color:var(--fm-text); text-decoration:none;
  transition:border-color .2s, color .2s, background .2s; }
.sh-jump a:hover{ border-color:var(--fm-gruen); color:var(--fm-gruen-tief); background:var(--fm-gruen-soft); }
.sh-jump a .sh-num{ color:var(--fm-gruen); }
/* Die Navbar ist sticky – ohne scroll-margin landen Anker dahinter. */
[id]{ scroll-margin-top:124px; }

/* Vorzugs-Text zwischen Sortiment und Marken */
.sh-claim{ background:#fff; border:1px solid var(--fm-linie); border-radius:18px; padding:2.25rem 2.5rem; }
.sh-claim h3{ font-size:clamp(24px,2.6vw,32px); margin:0 0 .75rem; max-width:28ch; }
.sh-claim p{ margin:0; max-width:64ch; font-size:16.5px; line-height:1.7; color:var(--fm-text-mute); }

.sh-group{ background:#fff; border:1px solid var(--fm-linie); border-radius:16px; padding:1.4rem 1.5rem 1.5rem; height:100%; }
.sh-group-head{ display:flex; align-items:baseline; gap:10px; padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--fm-linie); }
.sh-group-head .sh-num{ color:var(--fm-gruen); }
.sh-group h3{ font-size:20px; margin:0; }
.sh-list{ list-style:none; margin:0; padding:0; display:grid; gap:2px; }
/* Flex statt Inline-Pfeil: So rückt eine umbrechende zweite Zeile mit ein,
   statt links unter dem › zu beginnen. */
.sh-list li{ display:flex; gap:8px; padding:6px 0; font-size:14.5px; color:var(--fm-text); }
.sh-list li::before{ content:'›'; color:var(--fm-linie-stark); flex:0 0 auto; line-height:inherit; }

.sh-hint{ background:var(--fm-gruen-soft); border:1px solid #D6E6C8; border-radius:14px; padding:1rem 1.25rem;
  color:var(--fm-gruen-tief); font-size:14.5px; }

.sh-marke{ background:#fff; border:1px solid var(--fm-linie); border-radius:12px; padding:20px 16px; height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center;
  transition:transform .2s, box-shadow .2s; }
.sh-marke:hover{ transform:translateY(-2px); box-shadow:0 12px 22px -14px rgba(31,58,43,.35); }
.sh-marke img{ max-height:38px; max-width:130px; width:auto; object-fit:contain; }
.sh-marke span{ font-size:12.5px; color:var(--fm-text-mute); }
.sh-marke.is-ph{ border-style:dashed; background:transparent; }
.sh-marke.is-ph strong{ font-family:'Source Serif 4',serif; font-size:19px; color:var(--fm-gruen-tief); }

.sh-cta{ background:var(--fm-gruen-tief); color:#E8EEE5; border-radius:18px; padding:2rem 2.25rem; }
.sh-cta h3{ color:#fff; font-size:26px; margin:0 0 6px; }
.sh-cta p{ margin:0; max-width:560px; color:#C8D4C0; font-size:15px; }
.sh-cta .btn-fm-ghost{ border-color:rgba(255,255,255,.35); color:#fff; }
.sh-cta .btn-fm-ghost:hover{ background:#fff; color:var(--fm-gruen-tief); }

@media (max-width:991.98px){ .sh-photo img{ height:320px; } .sh-facts{ gap:28px; } }