/* =========================================================================
   Fightmode – Neubau ohne Seitenbaukasten
   Ein Stylesheet für alle Seiten.

   Jeder Wert unten ist aus dem Live-Stand gelesen, nicht geschätzt:
     - Farben und Grundmaße: `uploads/blocksy/css/global.css` (Palette 1..8),
       `uploads/elementor/css/post-10.css` (Kit)
     - Alle Abschnitts- und Kachelmaße: `post-37.css`, `post-50.css`,
       `post-52.css`, ausgewertet je Haltepunkt
     - Widget-eigene Werte (WPForms, Konfig-ID-Feld, Info-Fenster) aus den
       <style>-Blöcken der ausgelieferten Seiten

   HALTEPUNKTE wie im Original (Elementor: md=651, lg=1161):
     > 1160  Desktop        801..1160  Tablet
     651..800 Mobil-Extra   <= 650     Mobil
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Gestaltungswerte
   ------------------------------------------------------------------------- */
:root {
  --fm-blau:        #526FFF;   /* Kit `--e-global-color-3e0195a` */
  --fm-blau-hell:   #2872fa;   /* Blocksy Palette 1 */
  --fm-blau-knopf:  #5A75FF;   /* Konfig-ID-Knopf, eigener Ton */
  --fm-tinte:       #192a3d;   /* Palette 4 – Überschriften */
  --fm-text:        #3A4F66;   /* Palette 3 – Fließtext */
  --fm-weiss:       #ffffff;
  --fm-seite:       #F8F8F8;
  --fm-kachel:      #FAFAFA;   /* Kachel- und Kontaktkarten-Grund */
  --fm-karte:       #F0F0F0;   /* Karten „New Design" / „Continue" */
  --fm-grau:        #CECECE;   /* Abschnitt „Start your design" */
  --fm-schwarz:     #020202;   /* Fußzeile */

  /* Der blaue Schein liegt an Kacheln UND an der Kontaktkarte. */
  --fm-schein: 3px 3px 6px 2px rgba(82, 111, 255, .55);
  /* Verlauf der beiden Info-Blöcke. */
  --fm-verlauf: linear-gradient(180deg, #526FFF 0%, #FFFFFF 100%);

  --fm-schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                Helvetica, Arial, sans-serif;
  --fm-arial: Arial, Helvetica, sans-serif;

  /* Die beiden Deckel aus den HTML-Widgets der Seite. */
  --fm-max-fighter: 1100px;    /* .max_breite_fighter */
  --fm-max-breit:   1600px;    /* .max_breite */
  --fm-kopf-hoehe:  67px;      /* Blocksy `--header-height` */

  --fm-kachel-breite: 250px;
  --fm-kachel-hoehe:  300px;
  --fm-bild:          200px;
  --fm-bild-radius:   15px;
  --fm-kachel-luft:   20px;    /* Innenabstand der Kachel */

  /* Senkrechter Abstand zwischen Kachelreihe und Punktreihe. 18px sind der
     gemessene Wert der Live-Fassung. */
  --fm-kar-abstand: 18px;
}

/* -------------------------------------------------------------------------
   2. Grundlagen
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--fm-seite);
  color: var(--fm-text);
  font-family: var(--fm-schrift);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--fm-tinte); line-height: 1.2; }
p { margin: 0; }

/* IM SEITENTEMPLATE dieselbe Nullstellung noch einmal – dort mischt sich
   Blocksy ein und setzt Überschriften und Absätzen einen unteren
   Außenabstand (gemessen 28,576px an der Held-Überschrift, 33px an den
   Blocktexten). Ein blosses `h1`-Selektor verliert dagegen.
   `:where()` hält die Spezifität bei genau einer Klasse: damit gewinnt die
   Regel gegen Blocksy, aber JEDE eigene Regel weiter unten in dieser Datei
   gewinnt wiederum gegen sie. Ohne das hätte diese Zeile die 40px unter
   `.fm-titel` mitgenommen – gemessen: der Galerie-Abschnitt war dann 335
   statt 375px hoch. */
.fm-neubau :where(h1, h2, h3, h4, h5, h6, p) { margin: 0; }

/* Sprungziel nicht unter der Kopfzeile – derselbe Wert wie im HTML-Widget
   der Live-Seite (`scroll-margin-top: 100px`). */
[id] { scroll-margin-top: 100px; }

.fm-nur-screenreader {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Inhaltsbreiten. 85vw ist die Grundbreite fast aller Reihen; die beiden
   Deckel kommen aus den Klassen `max_breite_fighter` / `max_breite`. */
/* 85 PROZENT, nicht 85vw. Die Video-Reihe der How-To-Seite steht live auf
   `--width: 85%` (#59dcc7e) – bezogen auf ihren Kasten, nicht auf das
   Fenster. Bei 1440px sind das 1211px statt 1224px. Die Kachelreihe der
   Startseite steht dagegen wirklich auf 85vw, siehe `.fm-fighter`. */
.fm-85        { width: 85%; margin-inline: auto; }
.fm-fighter   { width: min(85vw, var(--fm-max-fighter)); margin-inline: auto; }
.fm-breit     { width: min(85vw, var(--fm-max-breit));   margin-inline: auto; }

/* -------------------------------------------------------------------------
   3. Kopfzeile
   Durchsichtig und klebend; beim Scrollen schwarz hinterlegt – wie live
   (`data-transparent` + `data-sticky` mit Sticky-Hintergrund #000).
   ------------------------------------------------------------------------- */
.fm-kopf {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  height: var(--fm-kopf-hoehe);
  display: flex; align-items: center;
  padding-inline: clamp(15px, 3vw, 40px);
  background: transparent;
  transition: background-color .2s ease;
}
.fm-kopf--gescrollt, .fm-kopf--fest { background: #000; }
.fm-kopf__logo img { height: 28px; width: auto; }

.fm-kopf__navi { margin-left: auto; display: flex; align-items: center; gap: 35px; }
.fm-kopf__navi a {
  color: var(--fm-weiss);
  font-size: 12px; font-weight: 700; line-height: 1.3; text-transform: uppercase;
  transition: color .15s ease;
}
/* Die aktive Seite steht live in #1559ED – nicht im Kit-Blau #526FFF. */
.fm-kopf__navi a:hover, .fm-kopf__navi a[aria-current="page"] { color: #1559ED; }

.fm-kopf__rechts { display: flex; align-items: center; gap: 15px; margin-left: 35px; }

.fm-korb { display: flex; align-items: center; gap: 8px; color: var(--fm-weiss); }
.fm-korb svg { width: 18px; height: 18px; }
.fm-korb__summe { font-size: 12px; font-weight: 600; text-transform: uppercase; }
.fm-korb__zahl {
  min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9px; background: var(--fm-blau);
  font-size: 11px; font-weight: 700; color: var(--fm-weiss);
}

.fm-kopf__schalter {
  display: none; width: 34px; height: 34px; padding: 0;
  border: 0; background: none; color: var(--fm-weiss); cursor: pointer;
}
.fm-kopf__schalter svg { width: 18px; height: 18px; }

.fm-klappmenue {
  position: fixed; inset: 0; z-index: 110;
  display: none; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
  background: rgba(18, 21, 25, .98);
}
.fm-klappmenue[data-offen="ja"] { display: flex; }
.fm-klappmenue a { color: var(--fm-weiss); font-size: 20px; font-weight: 700; text-transform: uppercase; }
.fm-klappmenue__zu {
  position: absolute; top: 18px; right: 18px;
  width: 40px; height: 40px; border: 0; background: none;
  color: var(--fm-weiss); font-size: 28px; line-height: 1; cursor: pointer;
}

/* -------------------------------------------------------------------------
   4. Knöpfe
   ------------------------------------------------------------------------- */
.fm-knopf {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 12px 24px;
  border: 2px solid transparent; border-radius: 25px;
  background: var(--fm-blau); color: var(--fm-weiss);
  font-family: inherit; font-size: 15px; font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.fm-knopf:hover  { background: var(--fm-blau-hell); }
.fm-knopf:active { transform: translateY(1px); }

/* Kopfzeilen-Knopf „CONFIGURE": Radius 20px, 13px, 600 (gemessen). */
/* Gemessen an der echten Seite: 101 × 34 px. Vorher 105 × 41 – die Höhe kam
   aus dem geerbten Zeilenabstand des Fließtextes. */
.fm-knopf--kopf {
  height: 34px; padding: 0 15px; border-radius: 20px;
  font-size: 13px; line-height: 1; font-weight: 600;
}

/* Held-Knöpfe: durchsichtig, 2px weißer Rand, Radius 20px, 4px/15px. */
.fm-knopf--rand {
  background: transparent; border-color: var(--fm-weiss); color: var(--fm-weiss);
  padding: 4px 15px; border-radius: 20px; font-weight: 600; font-size: 15px;
  /* Live 15px Zeilenhöhe bei 15px Schrift. Ohne Angabe erbt der Knopf die
     1,65 des Fließtextes und wird 10px höher. */
  line-height: 1;
}
.fm-knopf--rand:hover { background: rgba(255, 255, 255, .14); }

/* -------------------------------------------------------------------------
   5. Abschnitte und Überschriften
   ------------------------------------------------------------------------- */
.fm-titel { margin-bottom: 40px; font-size: 35px; font-weight: 700; text-transform: uppercase; text-align: center; }
.fm-titel--schwer { font-weight: 900; }
.fm-titel--arial  { font-family: var(--fm-arial); font-weight: 900; }

/* ZEILENHÖHE 1 – SO STEHT ES LIVE.
   Nachgemessen an sechs Überschriften: 35/35, 30/30, 25/25, 22/22, 40/40
   und 61,92/61,92 px – die Zeilenhöhe ist ausnahmslos die Schriftgröße.
   Die Grundregel dieses Stylesheets steht auf 1,2; jede Überschrift war
   damit 20 % höher als im Original, und das schob alles darunter nach
   unten. Die Fußzeile bleibt außen vor: sie kommt von Blocksy und steht
   nicht im Elementor-Inhalt, ist also nicht gegengemessen. */
.fm-titel,
.fm-held__titel,
.fm-block__text h2,
.fm-karte h4 { line-height: 1; }

/* Schwarzer Streifen unter der durchsichtigen Kopfzeile: eigener Abschnitt
   im Original (#2efff2c = 7vh, #f5c1d1f = 9vh). */
.fm-kopfstreifen { background: #000; height: 7vh; min-height: var(--fm-kopf-hoehe); }
.fm-kopfstreifen--hoch { height: 9vh; }

/* -------------------------------------------------------------------------
   6. Held (Startseite)
   Textkasten 35 % breit, rechts, 180px von oben (#6d4ad4b).

   DIE HÖHE FOLGT DEM BILD, NICHT NUR DER FENSTERHÖHE.
   Live steht hier `min-height: 92vh` (unter 1161px: 62vh) zusammen mit
   `background-size: 100% auto`. Beides zusammen passt nur bei einem
   bestimmten Seitenverhältnis des Fensters: das Bild ist so hoch wie
   `Breite / 1,7765` (Hero_final.png und Hero_Tablet.png sind beide
   2560 × 1441), die Vorgabe dagegen hängt allein an der Fensterhöhe. Ist das
   Fenster schmal und hoch, bleibt darunter ein Streifen ohne Bild – bei
   1200 × 900 px sind das 153 px.
   Live fällt das nicht auf, weil die Grundfarbe dort `#02010100` ist, also
   DURCHSICHTIG: der Streifen zeigt die helle Seitenfarbe und geht in den
   Galerie-Abschnitt über. Hier stand `#020101` undurchsichtig – daraus wurde
   ein schwarzer Balken.

   Behoben an zwei Stellen:

   1. Die Vorgabe wird auf die Bildhöhe gedeckelt. Ist das Fenster breit
      genug, gilt weiter 92vh und das Bild wird unten angeschnitten – genau
      wie live. Ist es zu schmal, hört der Abschnitt dort auf, wo das Bild
      aufhört. Aus 153 px Balken bei 1200 × 900 werden so 8 px.
   2. `cover` statt `100% auto`. Die letzten 8 px kommen daher, dass `100vw`
      den Rollbalken mitzählt, die Fläche des Abschnitts aber nicht; wie breit
      der Rollbalken ist, weiß CSS nicht. `cover` füllt die Fläche in jedem
      Fall und schneidet dafür höchstens diese 8 px seitlich an – ein
      Unterschied, den man nicht sieht, während der Balken deutlich zu sehen
      war. Das ist die bewusste Abweichung von live (dort `100% auto`).

   `min-height` und nicht `max-height`/`aspect-ratio`: die Vorgabe muss eine
   UNTERGRENZE bleiben. In einem sehr flachen Fenster ist der Textkasten
   sonst höher als der Abschnitt und läuft in die Galerie hinein.
   ------------------------------------------------------------------------- */
.fm-held {
  min-height: min(92vh, calc(100vw * 1441 / 2560));
  display: flex; flex-direction: column; align-items: flex-end;
  background: #020101 top center / cover no-repeat;
  background-image: url("https://fightmode-custom.com/wp-content/uploads/2026/08/Hero_final.png");
}
.fm-held__kasten {
  width: 35%;
  margin-top: 180px;
  display: flex; flex-direction: column; align-items: flex-end;
}
.fm-held__titel {
  width: 100%; text-align: start;
  font-family: var(--fm-arial); font-size: 4.3vw; font-weight: 700;
  /* Zeilenhöhe kommt aus der Sammelregel oben (1). Hier stand 1,05 –
     gemessen sind es live 61,92px bei 61,92px Schriftgröße. */
  letter-spacing: 1.7px; text-transform: uppercase;
  color: var(--fm-blau);
}
.fm-held__knoepfe { width: 100%; display: flex; flex-direction: row; gap: 20px; margin-top: 5px; }
/* Elementor hängt an beide Held-Knöpfe einen eigenen Außenabstand:
   „for Teams" 10px oben / 3px links / 5px rechts, „for fighters" 10px oben /
   −5px links / 5px rechts. Waagerecht heben sich +5 und −5 gegen die 20px
   Lücke auf, senkrecht bleiben 10px – die Knopfreihe ist live 37px hoch,
   ohne diese Abstände nur 27px. */
.fm-held__knoepfe > .fm-knopf   { margin-top: 10px; margin-right: 5px; }
.fm-held__knoepfe > :first-child { margin-left: 3px; }
.fm-held__knoepfe > :nth-child(2) { margin-left: -5px; }

/* Der mobile Held ist im Original ein EIGENER Abschnitt (#2cf2248) und wird
   erst unter 651px eingeblendet. Hier dieselbe Fläche, siehe Haltepunkte. */

/* -------------------------------------------------------------------------
   7. Galerie-Karussell
   Natives Scroll-Snap statt gerechneter Positionen.
   ------------------------------------------------------------------------- */
.fm-galerie { display: flex; flex-direction: column; align-items: center; margin-top: 30px; }

.fm-kar { display: flex; flex-direction: column; align-items: center; gap: var(--fm-kar-abstand); }
.fm-kar__leiste { position: relative; width: 100%; display: flex; justify-content: center; }
/* LUFT FÜR DEN SCHLAGSCHATTEN – waagerecht wie senkrecht.
   `overflow-x: auto` macht aus `overflow-y: visible` zwingend `auto`: die
   Bahn schneidet also an ALLEN vier Kanten. Ohne Innenabstand endet der
   blaue Schein der ersten und der letzten Kachel deshalb als harter
   senkrechter Strich genau auf der Kachelkante. Der Schein
   (`3px 3px 6px 2px`) reicht links 5px, rechts 11px über die Kachel hinaus;
   8px ist derselbe Wert, den die Live-Fassung als `SCHATTEN_X` benutzt.
   `scroll-padding-inline` zieht den Fangpunkt mit, sonst rastet
   `scroll-snap-align: start` um den Innenabstand versetzt ein.
   Die Breite der Leiste rechnet `fm.js` aus diesem Innenabstand – der Wert
   steht hier und nur hier. */
.fm-kar__bahn {
  display: flex; gap: 20px;               /* Reihenlücke live: 20px */
  width: 100%;
  overflow-x: auto; overflow-y: visible;
  scroll-snap-type: x mandatory;
  padding-block: 10px;                    /* Luft für den blauen Schein */
  padding-inline: 8px;
  scroll-padding-inline: 8px;
  /* Die Luft nach oben und unten soll KEINE Höhe kosten – sonst ist der
     Galerie-Abschnitt 20px höher als live. Denselben Kniff benutzt die
     Live-Fassung (`padding-block` mit gleich großem negativem
     `margin-block`); geschnitten wird weiterhin an der Innenkante. */
  margin-block: -10px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.fm-kar__bahn::-webkit-scrollbar { display: none; }

.fm-kar__pfeil {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
  width: 32px; height: 44px; padding: 0; border: 0;
  background: none; color: var(--fm-blau);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: opacity .18s ease;
}
.fm-kar__pfeil[hidden] { display: none; }
.fm-kar__pfeil:hover { opacity: .65; }
.fm-kar__pfeil svg { width: 26px; height: 26px; }
.fm-kar__pfeil--zurueck { left: -38px; }
.fm-kar__pfeil--vor     { right: -38px; }

/* Die Punktreihe steht live UNTER dem Abschnitt, sie macht ihn nicht höher:
   der Galerie-Abschnitt endet an der Unterkante der Kacheln (gemessen 375px
   = 35 Überschrift + 40 Abstand + 300 Kachelreihe). Ohne das negative Maß
   wäre alles darunter 28px zu tief. */
.fm-kar__punkte {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  margin-bottom: calc(-10px - var(--fm-kar-abstand));
}
/* Leer ist der Behaelter zwar 0px hoch, sein NEGATIVER unterer Abstand
   bliebe aber stehen und zoege alles darunter um 28px hoch. `fm.js` laesst
   die Punkte weg, sobald nur eine Kachel zu sehen ist - dann muss auch der
   Behaelter ganz verschwinden. */
.fm-kar__punkte:empty { display: none; }
.fm-kar__punkt {
  width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%;
  background: #C4C4C4; cursor: pointer;
  transition: background-color .18s ease, transform .18s ease;
}
.fm-kar__punkt[aria-current="true"] { background: var(--fm-blau); transform: scale(1.2); }

/* -------------------------------------------------------------------------
   8. Kachel – gleich auf Startseite und Produktauswahl
   ------------------------------------------------------------------------- */
.fm-kachel {
  position: relative;
  flex: 0 0 var(--fm-kachel-breite);
  width: var(--fm-kachel-breite);
  min-height: var(--fm-kachel-hoehe);
  scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  gap: var(--fm-kachel-luft);
  padding: var(--fm-kachel-luft) 10px;
  background: var(--fm-kachel);
  border-radius: 20px;
  box-shadow: var(--fm-schein);
}
.fm-kachel img {
  width: var(--fm-bild); max-width: var(--fm-bild); height: var(--fm-bild);
  object-fit: contain;
  border-radius: var(--fm-bild-radius);
}
/* Live: 16px bei 16px Zeilenhöhe in Palette 4 (#192A3D) – nicht die
   Fließtextfarbe und nicht die 1,65 des Körpertextes. */
.fm-kachel__titel {
  font-size: 16px; line-height: 1; font-weight: 700;
  text-transform: uppercase; text-align: center; color: var(--fm-tinte);
}

/* Anklickbare Kachel: der Verweis liegt als Fläche darüber. So bleibt der
   Info-Knopf ein eigenständiger Knopf – ein <button> IN einem <a> wäre
   ungültiges HTML und auf dem Handy kaum zuverlässig zu treffen. */
.fm-kachel__link { position: absolute; inset: 0; z-index: 1; border-radius: 20px; }
.fm-kachel--klick { transition: transform .18s ease, box-shadow .18s ease; }
.fm-kachel--klick:hover { transform: translateY(-4px); box-shadow: 3px 8px 16px 3px rgba(82, 111, 255, .65); }
.fm-kachel__link:focus-visible { outline: 2px solid var(--fm-blau); outline-offset: 3px; }

/* Info-Knopf an der Produktkachel (Werte aus dem Plugin-Stylesheet). */
.fm-info-btn {
  position: absolute; top: 12px; right: 12px; z-index: 3;
  width: 28px; height: 28px; padding: 0; margin: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; appearance: none;
  background: #E4E4E4; color: #4A4A4A;
  font-family: inherit; font-size: 15px; font-weight: 700; line-height: 1;
  cursor: pointer; touch-action: manipulation;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.fm-info-btn::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; }
.fm-info-btn:hover  { background: #D3D3D3; color: #1F1F1F; }
.fm-info-btn:active { transform: scale(.94); }
.fm-info-btn:focus-visible { outline: 2px solid var(--fm-blau); outline-offset: 2px; }
@media (pointer: coarse) {
  .fm-info-btn { width: 32px; height: 32px; font-size: 17px; top: 10px; right: 10px; }
}

/* -------------------------------------------------------------------------
   9. Info-Blöcke „For Fighters" / „For Teams & Gyms"

   ACHTUNG, das war der grobe Fehler der ersten Fassung: im Original gibt es
   ZWEI Fassungen, die einander ausschließen.
     > 800 px  breiter Banner mit BLAUEM VERLAUF, Bild und Text nebeneinander
               (#17348f9 / #2ac0a19) – „For Teams" steht auf `row-reverse`
     <= 800 px gestapelte Karte: Bild oben auf dem Verlauf, darunter eine
               weiße Karte mit blauem 1px-Rand, 10px überlappend
               (#dae949e / #ace61d4)
   Hier eine Auszeichnung, die an 800px umschaltet, mit `<picture>` für die
   beiden unterschiedlichen Bildzuschnitte.
   ------------------------------------------------------------------------- */
/* 150px über „For Fighters" (#17348f9), aber nur 50px über „For Teams"
   (#2ac0a19) – im Nachbau stand vorher beides auf 150px, der Abstand
   zwischen den beiden Bannern war dadurch 100px zu groß.

   `display: flow-root` gegen zusammenfallende Außenabstände: die 30px, die
   das Banner (`.fm-block__innen`) nach oben hält, fielen sonst mit den 150
   bzw. 50px dieses Kastens zusammen und waren wirkungslos. Live sind die
   beiden Abschnitte Flex-Container, dort fällt nichts zusammen – 50 + 30
   ergeben dort 80px.

   BEWUSSTE ABWEICHUNG VON LIVE, auf Wunsch des Betreibers: der Abstand
   zwischen den beiden Bannern war am Schreibtisch zu groß. Gemessen waren
   es 80px (Schreibtisch) und 60px (Tablet) gegen 47px auf dem Handy, wo er
   passt. Beide Stufen liegen jetzt bei 50px – der Wert setzt sich aus ZWEI
   Teilen zusammen, dem Außenabstand dieses Kastens und den 30px (ab 1160px:
   10px) des Banners darin. Deshalb steht hier 20px, nicht 50.
   Nur dieser Kasten wird kleiner: die 150px über „For Fighters" trennen den
   Block von der Galerie und bleiben unangetastet. */
.fm-block { margin-top: 150px; display: flow-root; }
.fm-block--gedreht { margin-top: 20px; }
.fm-block__innen {
  display: flex; flex-direction: row; justify-content: space-between;
  min-height: 39vh;
  margin-top: 30px;
  border-radius: 20px;
  background: var(--fm-verlauf);
}
.fm-block--gedreht .fm-block__innen { flex-direction: row-reverse; }

.fm-block__bild { display: flex; align-items: center; }
/* NATÜRLICHE GRÖSSE, NICHT GESTRECKT.
   Live steht am Bild-Widget nur `max-width: 100%` – die Datei ist ein
   Elementor-Zuschnitt von 500 × 516 px und wird genau so groß angezeigt.
   Hier stand `height: 100%` mit `object-fit: contain`: das Bild wuchs auf
   die Höhe des Banners und wurde 714 × 714 px. */
.fm-block__bild img { max-width: 100%; height: auto; }

.fm-block__text {
  width: 37%;
  display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start;
  gap: 15px;
  margin-top: 50px; margin-left: 50px;
  padding-bottom: 30px;
}
.fm-block--gedreht .fm-block__text {
  width: 43%; margin-left: 0; padding-right: 50px;
}
/* 30px – gemessen an #2089798/#2b30767. Ohne Angabe stand hier die
   Browser-Vorgabe für ein h2 (24px). */
.fm-block__text h2 { font-family: var(--fm-arial); font-size: 30px; font-weight: 900; text-transform: uppercase; }
/* Die 31vw stehen so in `post-37.css` – sie sind aber NICHT das letzte Wort.
   Elementor deckelt jedes Widget zusätzlich auf seinen Kasten:
   `.elementor.elementor .e-con > .elementor-widget { max-width: 100% }`.
   Vier Klassen schlagen die drei der Seitenregel, also gilt live
   `min(31vw, Kastenbreite)`. Ohne diesen Deckel ist der Absatz auf einem
   1699px-Fenster 527px breit, der Kasten aber nur 407px („For Fighters")
   bzw. 423px („For Teams") – der Text ragt dann rechts aus dem Banner. */
.fm-block__text p {
  width: min(31vw, 100%); max-width: 100%; text-align: start;
  font-family: var(--fm-arial); font-size: 22px; line-height: 31px;
}

/* -------------------------------------------------------------------------
   10. Kontakt – Karte mit blauem Schein, darin das Formular
   ------------------------------------------------------------------------- */
.fm-kontakt { display: flex; align-items: center; flex-direction: column; margin: 100px 0; }
.fm-kontakt__karte {
  width: min(85vw, var(--fm-max-fighter));
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  margin-bottom: 50px;
  background: var(--fm-kachel);
  border-radius: 20px;
  box-shadow: var(--fm-schein);
}
.fm-kontakt__innen {
  width: 90%;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  margin: 50px;
}
/* 39px zwischen der Unterkante von „let´s connect" und der Oberkante der
   ersten Feldbeschriftung – so gemessen an der Live-Seite. Live setzt sich
   der Wert aus drei Teilen zusammen (20px Lücke des Elementor-Containers,
   9px Vorlauf des WPForms-Behälters, rund 10px bis zur Beschriftung);
   dieses Formular hat diese Innenabstände nicht, deshalb steht der ganze
   Abstand hier an der Überschrift. */
.fm-kontakt__innen > .fm-titel { margin-bottom: 39px; }

/* ALLE WERTE AUS DEM GERENDERTEN FORMULAR GEMESSEN.
   WPForms baut seine Maße aus CSS-Variablen, die WordPress in den Seitenkopf
   schreibt (`<style id="wpforms-modern-full-inline-css">`). Maßgeblich sind:
   `--wpforms-field-size-input-height: 43px`,
   `--wpforms-field-size-input-spacing: 15px` (Beschriftung → Feld),
   `--wpforms-field-size-font-size: 16px`, `--wpforms-field-size-padding-h: 14px`,
   dazu aus dem Widget der Seite Radius 25px, Rand #000, Grund durchsichtig.
   Der Feldkasten hat `padding: 15px 0` – daraus ergibt sich der Abstand von
   30px zwischen zwei Feldern, nicht aus einer Lücke des Formulars.
   Rechnung je Feld: 15 + 17 (Beschriftung) + 15 + 43 + 15 = 105px. */
.fm-formular { width: min(70vw, 100%); display: flex; flex-direction: column; }
.fm-feld { display: flex; flex-direction: column; padding: 15px 0; }
/* WPForms setzt an jeder Feldbeschriftung fest `font-weight: 700`
   (in `wpforms-full.min.css`, nicht über eine Variable), die Farbe ist die
   Fließtextfarbe #3A4F66 – nicht Palette 4. Größe und Zeilenhöhe kommen aus
   dem Widget-Block der Seite (14px / 17px). Gemessen: 14px/17px, 700,
   rgb(58,79,102), kein Abstand nach unten. */
.fm-feld label,
.fm-feld legend {
  padding: 0; margin-bottom: 15px;
  font-size: 14px; line-height: 17px; font-weight: 700;
  text-transform: uppercase; color: rgba(0, 0, 0, .85);
}
.fm-feld__pflicht { color: #d63637; }
.fm-feld input,
.fm-feld textarea {
  width: 100%; height: 43px; padding: 0 14px;
  border: 1px solid #000; border-radius: 25px;
  background: transparent; color: rgba(0, 0, 0, .7);
  font-family: inherit; font-size: 16px; line-height: 16px;
}
.fm-feld textarea {
  height: 120px; padding: 14px; line-height: 20.8px; resize: vertical;
}
.fm-feld input:focus, .fm-feld textarea:focus { outline: 2px solid var(--fm-blau); outline-offset: 1px; }
/* Auch als <fieldset>: Rand und Außenabstand des Browsers weg – der
   Innenabstand von 15px oben und unten bleibt, er macht den Abstand
   zwischen den Feldern.
   Ein <legend> wird NICHT vom Innenabstand seines Fieldsets nach unten
   geschoben, es sitzt auf der Rahmenlinie. Live liegt der Innenabstand
   deshalb an einem umschließenden <div> und die Beschriftung darunter.
   Damit die Beschriftung an derselben Stelle steht, wandern die 15px hier
   vom Fieldset an das Legend. */
.fm-feld { border: 0; margin: 0; }
.fm-formular fieldset.fm-feld { padding-top: 0; }
.fm-formular fieldset.fm-feld > legend { margin-top: 15px; }
/* „Name" steht live als zwei gleich breite Felder nebeneinander. */
.fm-feld__reihe { display: flex; gap: 20px; }
.fm-feld__reihe input { flex: 1 1 0; min-width: 0; }
.fm-feld__zaehler { margin: 5px 0 0; font-size: 13px; line-height: 16px; color: rgba(0, 0, 0, .55); }
/* Alle Werte aus dem Widget-Block der Seite bzw. fest in WPForms:
   Höhe 37px, Radius 25px, Grund #526FFF, Schrift 14px, Abstand oben 5px,
   waagerechter Innenabstand 15px – dazu `font-weight: 500` und
   `line-height: 100%`, beides fest im Plugin-Stylesheet.
   Die Schriftfarbe hängt an `--wpforms-button-text-color` und ist von außen
   nicht auslesbar; Weiß ist die Vorgabe des Plugins auf farbigem Grund. */
.fm-formular button {
  align-self: flex-start; height: 40px; padding: 0 15px; margin-top: 5px;
  border: 0; border-radius: 25px;
  background: var(--fm-blau); color: var(--fm-weiss);
  font-family: inherit; font-size: 14px; font-weight: 500; line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}
.fm-formular button:hover { background: var(--fm-blau-hell); }

/* -------------------------------------------------------------------------
   11. How To
   ------------------------------------------------------------------------- */
.fm-howto {
  display: flex; align-items: center; justify-content: space-between; gap: 0 1%;
}
.fm-howto__video { flex: 0 1 874px; max-width: 874px; }
/* KEINE SCHWARZEN BALKEN UM DAS VIDEO.
   Die Datei ist 3024 × 1964 (aus dem MP4-Kopf gelesen), Verhältnis 1,5397.
   Hier stand `aspect-ratio: 1.5` – geschätzt. Ein `<video>` füllt sein
   Kästchen standardmäßig mit `contain` und hat schwarzen Grund: 2,6 %
   Abweichung im Verhältnis werden dadurch zu schwarzen Streifen oben und
   unten (bei 874 px Breite rund 15 px), und wo die Breite bruchteilig
   aufgeht, zu einem schwarzen Strich an der Seite.
   Mit dem echten Verhältnis passt das Video genau; `cover` fängt die
   Rundung auf einen Bruchteil eines Pixels ab, und ohne schwarzen Grund
   kann selbst dort nichts durchscheinen.
   Live steht `aspect-ratio: var(--video-aspect-ratio)` (16:9) mit
   `object-fit: cover` – dort wird das Video also oben und unten
   ANGESCHNITTEN. Der Laptop soll aber ganz zu sehen sein. */
.fm-howto__video video {
  width: 100%; display: block;
  aspect-ratio: 3024 / 1964;
  object-fit: cover;
  background: transparent;
}
/* `flex-basis:100%` ist Absicht: im Original will das Akkordeon die volle
   Breite (`width:100%`), beide Seiten schrumpfen deshalb gegeneinander. */
.fm-howto__schritte { flex: 1 1 100%; margin: 40px 0 0 50px; }

.fm-akkordeon details { border-bottom: 2px solid #02010114; }
/* Gemessen: die Titelzeile ist live 58px hoch, der Text darin 36,3px
   (22px × 1,65). Bleiben knapp 11px oben und unten – hier standen 14px. */
.fm-akkordeon summary {
  display: flex; align-items: center; gap: 8px;
  padding: 10.85px 0; cursor: pointer; list-style: none;
  font-size: 22px; font-weight: 900; text-transform: uppercase; color: #1F2124;
}
.fm-akkordeon summary::-webkit-details-marker { display: none; }
/* PLUS UND MINUS GEZEICHNET, NICHT GESETZT.
   Live steht `--n-accordion-icon-size: 15px`, und Elementor setzt dort ein
   SVG ein, das seine 15 px voll ausfüllt. Ein Schriftzeichen „+" bei
   `font-size: 15px` ist dagegen nur rund 8 px breit – deshalb wirkte das
   Zeichen zu klein. Zwei Balken über Farbverläufe ergeben genau 15 × 15. */
.fm-akkordeon summary::before {
  content: ""; width: 15px; height: 15px; flex: 0 0 15px;
  color: var(--fm-blau);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat;
}
.fm-akkordeon summary:hover { color: var(--fm-blau); }
.fm-akkordeon details[open] summary { color: var(--fm-blau); }
/* Aufgeklappt bleibt nur der Querbalken stehen – und der ist schwarz
   (`--n-accordion-icon-active-color: #000000`). */
.fm-akkordeon details[open] summary::before {
  color: #000;
  background: linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat;
}
.fm-akkordeon__text { padding: 0 0 16px 23px; }

/* `flow-root` gegen zusammenfallende Außenabstände: die 60px, die den
   Innenteil nach unten setzen, wanderten sonst nach AUSSEN – der graue
   Abschnitt war dadurch 60px zu kurz und die Überschrift saß 60px zu hoch.
   Live ist das ein Flex-Container (#9b3f866), dort fällt nichts zusammen. */
.fm-start { background: var(--fm-grau); display: flow-root; }
.fm-start__innen { display: flex; flex-direction: column; margin-top: 60px; }
.fm-start__titel { margin: 50px 50px; text-align: center; }
.fm-karten {
  width: 85%; margin: 20px auto 100px;
  display: flex; flex-direction: row; justify-content: center; gap: 0 60px;
}
.fm-karte {
  width: 400px;
  display: flex; flex-direction: column; align-items: center;
  border-radius: 20px; background: var(--fm-karte);
}
.fm-karte h4 { margin-top: 40px; font-size: 25px; font-weight: 700; text-transform: uppercase; }

/* BEIDE KARTEN GLEICH – nach dem Vorbild von „Continue".
   Live sind sie es NICHT: „GET STARTED" sitzt 36 px unter der Überschrift
   und hat `padding-bottom: 5%` (= 20 px bei 400 px Karte), das Pillenfeld
   dagegen 40 px oben und 25 px unten. Der Knopf ist außerdem kleiner als
   „OPEN" im Pillenfeld (15px/700/2px Rand gegen 16px/800/1px Rand).
   Vorgabe: an „Continue" halten. Also für beide 40 px oben und unten und
   für „GET STARTED" die Maße von „OPEN" – dann sind auch die Karten von
   selbst gleich hoch (40 + Überschrift + 40 + 47 + 40).
   Die Farbe bleibt unterschiedlich (#526FFF gegen #5A75FF): das sind zwei
   verschiedene Knöpfe, so steht es live. */
.fm-karte .fm-knopf,
.fm-karte__feld { margin-top: 40px; margin-bottom: 25px; }
.fm-karte .fm-knopf {
  padding: 12px 35px; border-width: 1px; border-radius: 9999px;
  font-family: Roboto, var(--fm-schrift);
  font-size: 16px; font-weight: 500; letter-spacing: .4px; text-transform: none;
  /* Alle Werte von „OPEN" abgeschaut, wie vom Betreiber gewünscht: Roboto,
     500, 16/16px, 0,4px Sperrung, 12/35px Innenabstand, 1px Rand – ergibt
     42px Höhe. Live ist „GET STARTED" 150 × 45 px in Systemschrift 15/15px
     700; das ist die bewusste Abweichung. Mit 40px oben und 25px unten sind
     beide Karten dadurch 172px hoch – genau wie live. */
  line-height: 16px;
}
.fm-karte__feld { width: 300px; max-width: 100%; display: flex; align-items: center; }

/* Konfigurations-ID: Pillenfeld mit dem Knopf DARIN, wie im Original
   (`.custom-input-wrapper`, ein Raster mit zwei Spalten in einer Zeile). */
.fm-konfigid {
  display: grid; grid-template-columns: 1fr auto; align-items: stretch;
  position: relative; width: 480px; max-width: 100%;
}
.fm-konfigid input {
  grid-column: 1 / -1; grid-row: 1;
  width: 100%; height: 100%;
  padding-left: 32px; padding-right: 140px;
  border: 1px solid #a3a3a3; border-radius: 9999px;
  background: #fff; color: #555;
  /* Gemessen: Roboto 500, 16px – das Feld ist die einzige Stelle der Site,
     an der eine Webschrift steht (Elementors Google-Font-Einbindung). */
  font-family: Roboto, var(--fm-schrift); font-size: 16px; font-weight: 500;
  outline: none; box-shadow: none;
  transition: border-color .15s ease-in-out;
}
.fm-konfigid input:focus { border-color: var(--fm-blau-knopf); }
.fm-konfigid input::placeholder { color: #666; opacity: 1; }
.fm-konfigid button {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; justify-content: center;
  padding: 12px 35px;
  border: 1px solid var(--fm-blau-knopf); border-radius: 9999px;
  background: var(--fm-blau-knopf); color: #fff;
  /* Gemessen: Roboto 500, 16/16px, 0,4px Sperrung, keine Großschreibung
     (der Text steht als „OPEN" im Markup). 12 + 16 + 12 + 2 × 1 = 42px. */
  font-family: Roboto, var(--fm-schrift); font-size: 16px; font-weight: 500;
  letter-spacing: .4px; line-height: 16px;
  text-transform: none; cursor: pointer; margin: 0;
  transition: background-color .15s ease-in-out;
}
.fm-konfigid button:hover { background: #4761ef; }

/* -------------------------------------------------------------------------
   12. Produktauswahl
   ------------------------------------------------------------------------- */
.fm-auswahl { position: relative; margin-top: 70px; }
.fm-gruppe {
  display: flex; flex-direction: column; align-items: center;
  margin-bottom: 80px; padding-bottom: 55px;
}
.fm-auswahl[data-js="ja"] .fm-gruppe { display: none; }
.fm-auswahl[data-js="ja"] .fm-gruppe[data-aktiv="ja"] { display: flex; }

.fm-reihe {
  width: 85vw; max-width: 100%;
  display: flex; flex-wrap: wrap; flex-direction: row;
  justify-content: center; align-items: center; gap: 35px;
}
.fm-auswahl .fm-kachel { --fm-kachel-luft: 30px; padding-top: 25px; }

/* Preishinweis – Werte aus dem Plugin-Stylesheet. Der große untere Abstand
   ist Platz für den Zurück-Knopf, der absolut darüber liegt. */
.fm-auswahl__hinweis {
  box-sizing: border-box;
  /* `fit-content`, sonst füllt der Kasten als Block seine 760px aus –
     gemessen ist er live 729px breit, also so breit wie sein Text. */
  width: fit-content;
  margin: 0 auto 64px; padding: 12px 20px; max-width: 760px;
  border: 1px solid rgba(82, 111, 255, .35); border-radius: 10px;
  background: rgba(82, 111, 255, .07);
  color: #1F2937; font-size: 15px; font-weight: 600; line-height: 1.45;
  text-align: center;
}
.fm-auswahl__zurueck {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 50px;
  color: #1f2937; font-family: inherit; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);
  position: absolute; left: 0; top: 0; z-index: 50;
}
.fm-auswahl__zurueck:hover {
  background: #f9fafb;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);
}

/* -------------------------------------------------------------------------
   13. Info-Fenster der Produktauswahl
   Farben und Maße wie im Plugin (Designvorlage Modal.png).
   ------------------------------------------------------------------------- */
.fm-info-overlay {
  position: fixed; inset: 0; z-index: 100000;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  background: rgba(15, 15, 20, .45);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
}
.fm-info-overlay[hidden] { display: none; }
body.fm-info-offen { overflow: hidden; }

.fm-info-card {
  position: relative; width: 100%; max-width: 960px;
  max-height: min(92vh, 780px); overflow-y: auto;
  padding: 56px 56px 36px;
  background: #F7F7F7; border-radius: 28px;
  box-shadow: 0 20px 60px rgba(82, 111, 255, .35), 0 4px 14px rgba(0, 0, 0, .14);
  color: #707070; text-align: left;
}
.fm-info-grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: 20px 56px; align-items: start;
}
.fm-info-title {
  margin: 0; text-align: left; color: var(--fm-blau);
  font-weight: 800; text-transform: uppercase;
  font-size: clamp(26px, 3.2vw, 36px); line-height: 1.08; letter-spacing: -.01em;
}
.fm-info-material {
  display: flex; flex-wrap: wrap; gap: 4px 26px; margin: 0 0 22px;
  color: #111; font-weight: 700; font-size: 16px; line-height: 1.4;
}
.fm-info-text { margin: 0; color: #707070; font-size: 18px; line-height: 1.45; }
.fm-info-care { margin-top: 34px; }
.fm-info-care-head { margin: 0 0 12px; color: #111; font-weight: 700; font-size: 16px; }
.fm-info-care-icons { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 16px 18px; color: #111; }
.fm-info-care-item { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 0 0 auto; }
.fm-info-care-icons svg { width: 30px; height: 30px; flex: 0 0 auto; display: block; }
.fm-info-care-label { max-width: 84px; text-align: center; font-size: 11px; font-weight: 700; line-height: 1.25; }
.fm-info-zu {
  position: absolute; top: 18px; right: 22px;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: none; color: #707070; font-size: 30px; line-height: 1; cursor: pointer;
}
.fm-info-zu:hover { color: #111; }

/* -------------------------------------------------------------------------
   14. Fußzeile
   ------------------------------------------------------------------------- */
.fm-fuss { background: var(--fm-schwarz); color: var(--fm-weiss); padding-block: 70px 0; }
/* Die Fußzeile ist NICHT auf 1100px gedeckelt wie der Inhalt darüber: sie
   benutzt Blocksys eigenen Kasten `.ct-container`, gemessen 1290px bei
   1425px Fläche. Vorher liefen hier `.fm-fighter` mit min(85vw, 1100px). */
.fm-fuss > .fm-fighter { width: min(100% - 40px, 1290px); }
.fm-fuss__reihe { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
/* Gemessen an der echten Seite: Spaltenüberschrift 20px/30px, die
   Anschriftzeilen 16px/26,4px (die Grundwerte des Fließtextes), 20px
   Abstand zwischen Überschrift und erster Zeile. Vorher standen hier
   16px und 15px – geraten, weil die Fußzeile von Blocksy kommt. */
.fm-fuss h5 {
  color: var(--fm-weiss); font-size: 20px; line-height: 30px; font-weight: 700;
  text-transform: uppercase; margin-bottom: 20px;
}
.fm-fuss p, .fm-fuss a { margin: 0; color: var(--fm-weiss); font-size: 16px; line-height: 26.4px; }
.fm-fuss a:hover { color: var(--fm-blau); }
/* Live stehen die sechs Zeilen als ZWEI Absätze mit je drei Zeilen (79px,
   also 3 × 26,4 ohne Zwischenraum) und 21px dazwischen. Hier sind es sechs
   einzelne Absätze – dieselbe Wirkung über die Lücke der vierten Zeile. */
.fm-fuss__zeilen { display: flex; flex-direction: column; gap: 0; }
.fm-fuss__zeilen p:nth-child(4) { margin-top: 21px; }
.fm-fuss__sozial { display: flex; gap: 28px; align-items: flex-start; }
.fm-fuss__sozial a { color: var(--fm-text); }
.fm-fuss__sozial svg { width: 19px; height: 19px; }
/* 40px Lücke: gemessen liegen die drei Verweise auf der echten Seite genau
   70px auseinander (Oberkante zu Oberkante). */
.fm-fuss__recht { display: flex; flex-direction: column; gap: 40px; align-items: flex-start; }
/* Gemessen an der echten Seite: 20px/30px, fett. `text-transform` steht dort
   auf `none` – der Text ist im Markup aber schon groß geschrieben
   („PRIVACY POLICY", 157px breit). Hier steht er gemischt, also macht das
   die Regel; ohne sie war der Verweis nur 129px breit. */
.fm-fuss__recht a { font-size: 20px; line-height: 30px; font-weight: 700; text-transform: uppercase; }
/* 69px, nicht 50: live endet der Spaltenbereich 69px unter der längsten
   Spalte, bevor die Trennlinie kommt (Teil 1 der Fußzeile ist 368px hoch:
   70 oben + 229 Inhalt + 69 unten). */
.fm-fuss__schluss {
  margin-top: 69px; padding-block: 25px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 15px; line-height: 1.3; text-align: center;
}

/* =========================================================================
   15. Haltepunkte
   ========================================================================= */

/* ---------- Tablet: bis 1160 px ---------- */
@media (max-width: 1160px) {
  :root { --fm-kachel-breite: 200px; --fm-kachel-hoehe: 200px; --fm-bild: 120px; }

  /* Wie oben: 62vh sind die Vorgabe aus `post-37.css`, gedeckelt auf die
     Höhe, die das Bild bei voller Breite tatsächlich hat. */
  .fm-held {
    min-height: min(62vh, calc(100vw * 1441 / 2560));
    background-image: url("https://fightmode-custom.com/wp-content/uploads/2026/08/Hero_Tablet.png");
  }
  .fm-held__kasten { margin-top: 150px; margin-right: 50px; }
  .fm-knopf--rand  { font-size: 9px; }

  .fm-galerie { min-height: 104px; }

  /* Banner: Bild und Text mittig statt auseinandergezogen. */
  .fm-block__innen { min-height: 0; justify-content: center; margin-top: 10px; }
  /* 40 + 10 ergeben dieselben 50px zwischen den Bannern wie am Schreibtisch
     (dort 20 + 30). Vorher waren es hier 60px. */
  .fm-block--gedreht { margin-top: 40px; }
  .fm-block__bild img { width: 47vw; max-width: 100%; height: auto; }
  .fm-block--gedreht .fm-block__bild img { border-radius: 15px; }
  .fm-block__text p { width: min(35vw, 100%); max-width: 100%; font-size: 14px; line-height: 1.7em; }

  .fm-howto__schritte { margin: 15px 0 0 24px; }
  .fm-karten { flex-direction: column; align-items: center; gap: 20px; }
  /* Auch hier beide gleich – live steht am Knopf 20 px, am Pillenfeld
     weiterhin 40 px. */
  .fm-karte .fm-knopf,
  .fm-karte__feld { margin-block: 20px; }
  .fm-kontakt { margin: 50px 0 0; }
}

/* ---------- Mobil-Extra: bis 800 px ---------- */
@media (max-width: 800px) {
  :root { --fm-kachel-breite: 250px; --fm-kachel-hoehe: 250px; --fm-bild: 200px; }

  .fm-kopf__navi { display: none; }
  .fm-kopf__schalter { display: flex; align-items: center; justify-content: center; }
  .fm-kopf__rechts { margin-left: auto; }

  /* Live wiederholt hier `background-size: 100% auto`. Der Nachbau deckt die
     Fläche stattdessen mit `cover` (Begründung am Abschnitt „6. Held"), und
     das gilt schon aus der Grundregel – die Wiederholung entfiele also nur,
     um sie sofort wieder zu überschreiben. */
  .fm-held__kasten { align-items: flex-start; margin-top: 90px; margin-right: 50px; }
  .fm-held__knoepfe { flex-direction: column; gap: 0; align-items: flex-start; }
  /* BEIDE KNOEPFE AUF DIESELBE KANTE.
     Die 3px / -5px stammen von Elementor und gelten dort, wo die Knoepfe
     NEBENEINANDER stehen: waagerecht heben sich +5 und -5 gegen die 20px
     Luecke auf. Untereinander gestapelt bleiben davon 8px Unterschied
     stehen - gemessen stand „for Teams & Gyms" bei x=53, „for fighters"
     bei x=45. Ein sichtbarer Treppenabsatz, den es live nicht gibt: dort
     sind das unter 651px zwei ANDERE Widgets ohne diese Abstaende. */
  .fm-held__knoepfe > :first-child,
  .fm-held__knoepfe > :nth-child(2) { margin-left: 0; }

  /* Live steht hier `margin-top: 0` – die Überschrift „GALLERY" klebt dann
     unmittelbar unter dem Held-Bild. Bewusste Abweichung auf Wunsch des
     Betreibers: 50 px Luft. */
  .fm-galerie { margin-top: 50px; margin-bottom: 100px; }

  /* HIER SCHALTET DER INFO-BLOCK UM: aus dem breiten Banner wird die
     gestapelte Karte – Bild oben auf dem Verlauf, weiße Karte darunter.

     DER ÄUSSERE KASTEN IST VOLLE BREITE, DIE KARTE DARIN 85vw.
     Vorher stand hier `width: 85vw` am äußeren Kasten – zusammen mit dem
     Innenabstand von 20 px (unter 651 px) blieben davon 291 px Inhalt, die
     Karte darin wollte aber weiterhin 85vw = 331 px. Sie ragte deshalb
     20 px nach rechts heraus und stand nicht mehr mittig: links 42 px Luft,
     rechts 2 px. Live ist der äußere Kasten `--content-width: 100%`
     (#dae949e) und die Karte darin `--width: 85vw` (#c525d75); sie steht
     mittig bei x = 22..353 auf einem 390er Gerät. */
  .fm-block { width: 100%; margin-inline: 0; margin-top: 100px; }
  .fm-block .fm-fighter { width: min(85vw, 100%); }
  /* Die Karte „For Teams" sitzt live noch einmal 7vw tiefer
     (#121900d `--margin-top: 07vw`); bei „For Fighters" gibt es das nicht. */
  .fm-block--gedreht .fm-fighter { margin-top: 7vw; }
  /* Zwischen 651 und 800px – dem Hochformat der Tablets – erbte „For Teams"
     die 100px der Regel darüber und lag damit 100 + 7vw unter „For Fighters":
     bei 700px 149px, der größte Abstand aller Breiten. Die 7vw allein
     ergeben hier 49 bis 56px und treffen damit die 50px des Schreibtischs.
     Unter 651px greift weiter unten wieder `margin-top: 20px`, das Handy
     bleibt also bei seinen gemessenen 47px. */
  .fm-block--gedreht { margin-top: 0; }
  /* `column-reverse`, weil im Markup der TEXT zuerst steht (im Original über
     `order:-99999` erzwungen) – gestapelt gehört das Bild aber nach OBEN. */
  .fm-block__innen,
  .fm-block--gedreht .fm-block__innen {
    flex-direction: column-reverse; background: none; border-radius: 0;
    min-height: 0; margin-top: 0;
  }
  .fm-block__bild {
    background: var(--fm-verlauf);
    border-radius: 15px;
  }
  .fm-block__bild img { width: 100%; height: auto; border-radius: 15px; }
  .fm-block__text,
  .fm-block--gedreht .fm-block__text {
    position: relative; z-index: 1;
    width: 100%; margin: -10px 0 0; padding: 15px;
    border: 1px solid var(--fm-blau); border-radius: 15px;
    background: var(--fm-weiss);
    gap: 0;
  }
  /* UNTER 800 PX ZEIGT LIVE ANDERE WIDGETS – und damit andere Schrift.
     Über 800px sind Überschrift und Text zwei Heading-Widgets in Arial;
     darunter blendet Elementor sie aus und zeigt zwei eigene Abschnitte mit
     einem Heading- und einem Text-Widget: Grundschrift statt Arial,
     Stärke 700 statt 900, Zeilenhöhe 1,65 statt 1,6 (gemessen 22/22 und
     20/33 bzw. 16/26,4).
     Und die beiden Absätze sind live NICHT gleich groß: „For Fighters"
     steht in einem `<span style="font-size: 20px;">`, „For Teams" nicht. */
  .fm-block__text h2 {
    font-family: var(--fm-schrift); font-size: 22px; font-weight: 700;
  }
  .fm-block__text p {
    width: auto; max-width: none;
    font-family: var(--fm-schrift); font-size: 20px; line-height: 1.65;
  }
  .fm-block--gedreht .fm-block__text p { font-size: 16px; }

  /* GESTAPELT STEHEN LAPTOP UND SCHRITTE IN EINER MITTIGEN SPALTE.
     Das Video ist über `align-items: center` schon mittig, blieb aber bei
     556px stehen, während die Schritte die volle Breite des 85%-Kastens
     nahmen: bei 800px ragten sie links und rechts um je 62px über den
     Laptop hinaus, bei 700px um je 20px. Derselbe Deckel bringt beide auf
     eine Kante; unterhalb von rund 654px ist der Kasten ohnehin schmaler
     als 556px und beide füllen ihn ganz aus. */
  .fm-howto { flex-direction: column; }
  .fm-howto__video { flex: 1 1 auto; max-width: 556px; width: 100%; }
  .fm-howto__schritte { margin: 15px auto 0; width: 100%; max-width: 556px; }

  .fm-info-grid { grid-template-columns: 1fr; gap: 18px; }
  .fm-info-card { padding: 40px 24px 28px; }

  .fm-fuss__reihe { grid-template-columns: 1fr; gap: 30px; }
}

/* ---------- Mobil: bis 650 px ---------- */
@media (max-width: 650px) {
  :root {
    /* Kachel im Original 400 px; hier auf 88 % gedeckelt, damit sie auf einem
       390er Gerät nicht über den Rand läuft. */
    --fm-kachel-breite: min(400px, 88vw);
    --fm-kachel-hoehe:  250px;
    --fm-bild:          200px;
    --fm-kopf-hoehe:    70px;
  }

  /* Der Held ist hier ein anderer Abschnitt: eigenes Hochformat-Bild in
     NATÜRLICHER Größe, mittig – wird also links und rechts beschnitten.
     Höhe 721 px, Inhaltsbreite 500 px, Überschrift 40 px in Palette-Blau. */
  .fm-held {
    min-height: 721px;
    background-image: url("https://fightmode-custom.com/wp-content/uploads/2026/08/Hero_mobile-3.png");
    background-size: auto; background-position: center center;
    align-items: flex-start;
  }
  .fm-held__kasten {
    width: 100%; max-width: 500px;
    margin: 0; align-items: flex-start;
  }
  /* BREITE ABZÜGLICH DER RÄNDER, nicht 100 % PLUS Rand.
     Grundregel ist `width:100%`; zusammen mit den 50px links und rechts
     ergäbe das auf einem 390er Gerät 375 + 50 px – die Seite ließe sich
     waagerecht schieben. Live ist die Überschrift 275 px breit (375 − 2×50),
     weil Elementor seine Widgets mit dem Standard `stretch` anlegt.
     `align-self: stretch` bildet genau das ab; `width:auto` ist nötig,
     damit die feste Breite das Strecken nicht aussticht. */
  /* 100px statt 70px oben, auf Wunsch des Betreibers. Die Kopfzeile liegt
     durchsichtig über dem Held und ist 67px hoch (Blocksy: 70px unter
     1000px) – bei 70px Abstand begann die Überschrift also unmittelbar
     unter dem Warenkorb und wirkte angeklebt. 30px mehr genügen; der Held
     ist auf dem Handy 721px hoch, unten bleibt genug Bild stehen. */
  .fm-held__titel {
    align-self: stretch; width: auto;
    margin: 100px 50px 10px;
    /* Systemschrift statt Arial und ohne Sperrung: nur so steht
       „DESIGN YOUR" wie im Original in EINER Zeile. */
    font-family: var(--fm-schrift); font-size: 40px; letter-spacing: normal;
    color: var(--fm-blau-hell);
  }
  .fm-held__knoepfe {
    align-self: stretch; width: auto;
    flex-direction: column; align-items: flex-start; gap: 5px;
    margin: 0 0 0 50px;
  }
  /* Auf dem Handy steht „for fighters" zuerst. */
  .fm-held__knoepfe > :nth-child(2) { order: -1; }
  .fm-knopf--rand { font-size: 11px; line-height: 1.1; }

  /* Auf dem Handy ist die Kachelreihe live VOLLE BREITE (100 %), nicht 85vw.
     `100vw` stand hier vorher und ist um die Breite eines sichtbaren
     Rollbalkens zu viel: die Seite ließ sich dadurch waagerecht schieben.
     Der obere Abstand ist wie bei ≤ 800 px bewusst auf 50 px gesetzt
     (live: 0). */
  .fm-galerie { width: 100%; margin-block: 50px 0; }
  .fm-galerie .fm-fighter { width: 100%; }

  /* KACHEL KLEINER, ABER IM SELBEN VERHÄLTNIS.
     Live ist sie 400 px breit mit 200er Bild – auf einem 390er Gerät passt
     das nicht, und auf die volle Bahnbreite gedehnt (359 px) wirkte sie zu
     breit. 85vw ist das Rastermaß dieser Seite: die Kachel steht damit
     genau so breit und genau so mittig wie die Karten „For Fighters" und
     „For Teams" darunter (x = 22..353 bei 390 px). Bild und Mindesthöhe
     folgen der Breite im Verhältnis des Originals (Bild = ½ der Breite,
     Höhe = 250/400). */
  /* SEITENVERHAELTNIS WIE AM SCHREIBTISCH, auf Wunsch des Betreibers
     (03.09.2026). Gemessen war die Kachel am Schreibtisch 250 x 300px
     (Verhaeltnis 0,833), auf dem Handy dagegen 332 x 242px (1,371) - sie lag
     also quer statt hochkant. Dieselben drei Werte wie oben in `:root`
     stellen dasselbe Verhaeltnis her; `min(..., 85vw)` deckelt sie auf
     Geraeten, die schmaler sind als 294px, und dann folgt das Bild im selben
     Verhaeltnis (200/250 = 0,8).
     Damit ist die Kachel schmaler als die Karten darunter, die weiter auf
     85vw stehen - das war vorher der Grund fuer die 85vw hier und ist jetzt
     ausdruecklich anders gewollt. */
  .fm-galerie .fm-kachel {
    --fm-kachel-breite: min(250px, 85vw);
    --fm-bild:          calc(var(--fm-kachel-breite) * 0.8);
    --fm-kachel-hoehe:  calc(var(--fm-kachel-breite) * 300 / 250);
  }
  .fm-titel { font-size: 22px; }
  /* „GALLERY" ist die EINZIGE Überschrift, die live auf dem Handy nicht
     schrumpft: #f1bf875 hat keine Vorgabe für ≤ 650 px und bleibt bei 35 px
     (gemessen 130 × 35). Alle anderen stehen dort auf 22 px, die beiden
     Kartentitel der How-To-Seite auf 20 px. */
  .fm-galerie .fm-titel { font-size: 35px; }

  .fm-kar__pfeil { width: 22px; height: 36px; }
  .fm-kar__pfeil svg { width: 18px; height: 18px; }
  /* DIE PFEILE STEHEN NEBEN DER KACHEL, NICHT DARAUF.
     Auf `0` sassen sie innerhalb der Laufbahn und lagen damit auf der ersten
     bzw. letzten Kachel - gemessen 14px Ueberlappung, waehrend am
     Schreibtisch 14px Luft bleiben. Platz dafuer ist da: die Kachel ist
     250px breit, die Bahn 266px, auf einem 390er Geraet bleiben links und
     rechts je 62px Rand.
     26px statt der 38px des Schreibtischs, weil der Rand auf schmalen
     Geraeten kleiner wird: bei 320px sind es nur noch 27px, und mehr
     Versatz schoebe den Pfeil aus dem Bild. So bleiben ueberall rund 12px
     Luft zwischen Pfeil und Kachel. */
  .fm-kar__pfeil--zurueck { left: -26px; }
  .fm-kar__pfeil--vor     { right: -26px; }

  .fm-block { margin-top: 100px; padding-inline: 20px; }
  .fm-block--gedreht { margin-top: 20px; }
  .fm-block__bild { border-radius: 15px 15px 0 0; }
  .fm-block__bild img { border-radius: 15px 15px 0 0; }
  /* Live hängt der Abstand zwischen Überschrift und Text unter 651px an der
     Überschrift (#f5abc23/#948ee9f: `padding: 0 0 10px 0`), nicht an einer
     Lücke des Kastens. */
  .fm-block__text h2 { padding-bottom: 10px; }

  .fm-akkordeon { padding-inline: 20px; }
  .fm-akkordeon summary { font-size: 16px; }
  .fm-start { min-height: 537px; margin-top: -30px; }
  .fm-start__titel { margin: 0 50px 10px; }
  .fm-karte h4 { font-size: 20px; }
  /* Kartenspalte steht live auf 50 %; auf einem 390er Gerät wären das
     195 px und „GET STARTED" bräche im Knopf um – daher 240 px Untergrenze.
     Einzige bewusste Abweichung vom Live-Stand. */
  .fm-karten { width: 100%; }
  .fm-karte  { width: max(50%, 240px); }
  .fm-karte__feld { width: 88%; margin: 20px 0; }

  .fm-kontakt { margin: 7vw 0 0; }
  /* Live sitzt die Kontaktkarte noch einmal 20px unter dem Abschnitt
     (#b917786 `--margin-top: 20px`); im Nachbau fehlten diese 20px. */
  .fm-kontakt__karte { margin-top: 20px; }
  /* 27 px UNTER DEM KNOPF. Hier stand `margin: 30px 0 0` – der Absendeknopf
     saß dadurch genau auf der Unterkante der Karte. Live sind es 27 px:
     WPForms gibt seinem Behälter 24 px Abstand nach unten (gemessen:
     Knopf endet bei y 6417, Karte bei 6444). */
  .fm-kontakt__innen { width: 90%; margin: 30px 0 27px; align-items: flex-start; }
  /* 24px zwischen der Unterkante von „let´s connect" und der Oberkante der
     ersten Feldbeschriftung – gemessen. Am Schreibtisch sind es 39px. */
  .fm-kontakt__innen > .fm-titel { margin-bottom: 24px; }
  .fm-formular { width: 100%; }
  /* KEIN UMBRUCH BEI „FIRSTNAME"/„LASTNAME".
     Hier stand `flex-direction: column`. Live bleiben die beiden auch auf
     394 px NEBENEINANDER: WPForms legt sie als zwei `.wpforms-one-half` in
     eine `.wpforms-field-row`, gemessen je 137 px mit 20 px Lücke. */

  .fm-auswahl__hinweis { font-size: 14px; padding: 10px 14px; margin-bottom: 58px; }
  .fm-fuss { padding-top: 40px; }
}

/* =========================================================================
   16. Nur im Seitentemplate: was WordPress dazwischenfunkt

   Als Datei per Doppelklick steht der Nachbau allein. Als Seitenvorlage
   steht er in <main class="fm-neubau"> zwischen Blocksys Kopf und Fuß und
   neben WPForms – und beide bringen eigene Werte mit. Gemessen wurde die
   Seite `/home-neubau/` gegen dieselbe Datei als Vorschau; alles, was hier
   steht, ist ein Unterschied aus diesem Vergleich, keine Vorsichtsmaßnahme.

   Der Abschnitt greift ausschließlich innerhalb von `.fm-neubau`.
   ========================================================================= */

/* DAS FORMULAR BRAUCHT SEINE BREITE.
   Im Original ist es ein Elementor-Widget mit `width: 70vw`. Als Shortcode
   ist es ein gewöhnlicher Block in einem Flex-Kasten mit `align-items:
   center` – und schrumpft dann auf seinen Inhalt: gemessen 211 statt 985px.
   Dadurch stapelt WPForms auch „Firstname" und „Lastname" untereinander. */
.fm-neubau .fm-kontakt__innen .wpforms-container { width: min(70vw, 100%); }

/* DIE GESTALTUNGSWERTE DES FORMULARS – nur die vier, die fehlen.
   Für den Shortcode schreibt WPForms selbst einen Block `#wpforms-40 {…}`
   mit den Einstellungen DES FORMULARS in den Seitenkopf. Damit stimmt schon
   das meiste: Feldradius 25px, durchsichtiger Feldgrund, schwarzer Rand,
   Feldhöhe 43px, 15px zwischen Beschriftung und Feld, Knopf #526FFF und
   37px hoch.
   Vier Werte weichen ab: die Schriftgrößen der Beschriftungen. Die setzt im
   Original das Elementor-Widget (`#wpforms-css-vars-elementor-widget-46fa698`),
   das es hier nicht gibt – sonst stünden sie in 16 statt 14px.
   Der Selektor muss den ID-Block des Plugins schlagen; `.fm-neubau` davor
   reicht dafür. */
.fm-neubau #wpforms-40 {
  --wpforms-label-size-font-size: 14px;
  --wpforms-label-size-line-height: 17px;
  --wpforms-label-size-sublabel-font-size: 13px;
  --wpforms-label-size-sublabel-line-height: 16px;
}

/* Die 39px standen an der Überschrift, weil das nachgebaute Formular keine
   eigenen Innenabstände hat. Das echte WPForms-Formular bringt sie mit –
   sonst stehen sie doppelt. */
.fm-neubau .fm-kontakt__innen > .fm-titel { margin-bottom: 0; }

/* DAS KONFIGURATIONS-ID-FELD BRAUCHT ELEMENTORS KNOPFREGELN.
   Der Shortcode `custom_open_input` trägt die Klassen `custom-input-btn`
   UND `elementor-button` – er verlässt sich also auf Elementors
   Knopf-Stylesheet und dessen Schriftvorgaben. Auf einer Seite ohne
   Elementor wird beides nicht geladen. Gemessen: der Knopf 123 × 28 statt
   115 × 42, Schrift Inter 800 statt Roboto 500, ohne senkrechten
   Innenabstand; das Eingabefeld 28 statt 42 px hoch in Inter 700.
   Die fehlenden Werte hier nachgereicht – gemessen an der Live-Seite. */
.fm-neubau .custom-input-wrapper {
  /* Das Plugin schreibt `font-weight: var(--e-global-typography-accent-font-weight, 800)`
     mit `!important` – die Variable kommt aus Elementors Kit (post-10.css)
     und fehlt hier, also greift der Rückfallwert 800 statt der 500 des Kits.
     Gegen ein `!important` hilft keine eigene Regel; wohl aber, der Variablen
     ihren Wert zu geben. Beide Werte stehen so im Kit. */
  --e-global-typography-accent-font-family: "Roboto";
  --e-global-typography-accent-font-weight: 500;
}
.fm-neubau .custom-input-wrapper input,
.fm-neubau .custom-input-wrapper .custom-input-btn {
  height: 42px;
  font-family: Roboto, var(--fm-schrift);
  font-size: 16px; line-height: 16px; font-weight: 500;
}
.fm-neubau .custom-input-wrapper .custom-input-btn { padding: 12px 35px; }

/* -------------------------------------------------------------------------
   Der geklonte Configure-Knopf in Blocksys schmaler Kopfzeile (fm.js).

   Blocksy gibt seinem Knopf `--margin: 0px 15px 0px 35px !important`. Die
   35px links sind fuer die breite Kopfzeile gedacht, wo der Knopf hinter dem
   Menue steht; neben dem Burger-Zeichen draengt er damit den Warenkorb aus
   dem Bild. Gegen ein `!important` hilft nur hoehere Spezifitaet: Blocksys
   Regel hat drei Klassen/Attribute, diese hier vier.
   ------------------------------------------------------------------------- */
[data-header] .ct-header [data-id="button"].fm-kopf-cta {
  --margin: 0 10px 0 0 !important;
}
/* Ueber Blocksys Haltepunkt zeigt die Kopfzeile ihren eigenen Knopf. Sollte
   das Burger-Zeichen dort wider Erwarten im Markup stehen, haengt der Klon
   sonst doppelt daneben. */
@media (min-width: 1000px) {
  .ct-header .fm-kopf-cta { display: none !important; }
}