/* =====================================================================
   FIRMENFITNESS — Bloecke 2 und 3
   ---------------------------------------------------------------------
   Vorher:
     Block 2  drei gleiche weisse Kaesten mit Hakenliste. Die Dauer
              stand als Text daneben, war aber nirgends ablesbar - und
              die Dauer ist genau der Unterschied zwischen den drei
              Formaten.
     Block 3  vier gleich grosse Kacheln mit je einem Halbsatz. Kein
              Einstieg, keine Bewegung, kein Unterschied zwischen den
              Modulen ausser dem Symbol.

   Jetzt:
     Block 2  drei Formatkarten mit einer Tagesleiste. Sie zeigt, wie
              viel eines Arbeitstages das Format belegt (31 / 56 /
              100 Prozent) - der Unterschied wird sichtbar statt nur
              behauptet. Dazu Symbolkachel, Ziffer ohne fuehrende Null,
              umlaufende Goldkante, Lichtstreifen und ein Erklaersatz.
     Block 3  asymmetrisches Bento: Breathwork hoch mit laufender
              Atemkurve, Online-Workshops breit mit einem Netz aus
              Standorten. Jede Kachel traegt ein Hintergrundsymbol und
              einen Zusatzsatz, der auf Touch dauerhaft offen steht.
   ===================================================================== */

@property --ff-edge {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

/* ── Buehne ── */
.ff-formate,
.ff-module {
    position: relative;
    overflow-x: clip;
    padding: clamp(88px, 9vw, 140px) 24px;
    box-sizing: border-box;
}
.ff-formate { background: #FAFAF9; }
.ff-module  { background: #050505; }

.ff-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
}

.ff-formate-aura,
.ff-module-aura {
    position: absolute;
    left: 50%;
    top: 4%;
    width: min(940px, 104%);
    height: 460px;
    transform: translateX(-50%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    animation: ffAuraDrift 22s ease-in-out infinite alternate;
}
.ff-formate-aura {
    background:
        radial-gradient(closest-side at 26% 40%, rgba(202, 138, 4, .13), transparent 70%),
        radial-gradient(closest-side at 76% 58%, rgba(229, 184, 59, .08), transparent 68%);
}
.ff-module-aura {
    background:
        radial-gradient(closest-side at 30% 38%, rgba(202, 138, 4, .17), transparent 70%),
        radial-gradient(closest-side at 74% 62%, rgba(229, 184, 59, .09), transparent 68%);
}
@keyframes ffAuraDrift {
    from { transform: translateX(-50%) translate3d(-26px, 14px, 0) scale(1); }
    to   { transform: translateX(-50%) translate3d(26px, -18px, 0) scale(1.08); }
}

/* ── Kopfbereich ── */
.ff-kopf {
    text-align: center;
    max-width: 760px;
    margin: 0 auto clamp(44px, 5vw, 66px);
}
.ff-eyebrow {
    display: block;
    margin-bottom: 18px;
    font-family: 'KGSAmp', 'Cormorant Garamond', serif;
    font-style: italic;
    font-size: 1.2rem;
    color: #CA8A04;
}
.ff-kopf h2 { margin: 0 0 18px; color: #1C1917; }
.ff-kopf p {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: 1.04rem;
    line-height: 1.8;
    color: #57534E;
}
.ff-kopf--dunkel h2 { color: #FAFAF9; }
.ff-kopf--dunkel p  { color: #A8A29E; }

/* ═══════════════════════════════════════════════════════════════
   BLOCK 2 — FORMATKARTEN
   Drei vergleichbare Angebote gehoeren gleich gross nebeneinander,
   sonst laesst sich nicht vergleichen. Den Rhythmus erzeugt hier
   die Tagesleiste, nicht die Kachelgroesse.
   ═══════════════════════════════════════════════════════════════ */
.fk-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 22px;
    align-items: stretch;
}

.fk-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 30px 26px 26px;
    border-radius: 24px;
    border: 1px solid rgba(202, 138, 4, .2);
    background:
        radial-gradient(circle at 88% 4%, rgba(202, 138, 4, .1), transparent 52%),
        linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(252, 247, 238, .93));
    box-shadow: 0 22px 52px rgba(72, 47, 7, .09), inset 0 1px 0 #FFF;
    opacity: 0;
    transform: translateY(26px) scale(.98);
    transition: transform .55s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease;
}
.reveal.active .fk-card {
    opacity: 1;
    transform: none;
    transition: opacity .9s cubic-bezier(.16,1,.3,1) var(--fk-d, 0s),
                transform .9s cubic-bezier(.16,1,.3,1) var(--fk-d, 0s),
                border-color .4s ease, box-shadow .4s ease;
}
.fk-card:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(190, 128, 12, .45);
    box-shadow: 0 36px 76px rgba(72, 47, 7, .16), 0 0 34px rgba(202, 138, 4, .1), inset 0 1px 0 #FFF;
}

/* Umlaufende Goldkante. Ohne @property waere --ff-edge nicht
   interpolierbar und die Kante staende still. */
.fk-card::after,
.fm-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    opacity: .45;
    background: conic-gradient(from var(--ff-edge),
        transparent 0 62%, rgba(229, 184, 59, .8) 78%, rgba(202, 138, 4, .22) 89%, transparent 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: ffEdgeOrbit 13s linear infinite;
    transition: opacity .4s ease;
}
.fk-card:nth-child(2)::after { animation-duration: 16s; }
.fk-card:nth-child(3)::after { animation-duration: 19s; }
@keyframes ffEdgeOrbit { to { --ff-edge: 360deg; } }
.fk-card:hover::after,
.fm-tile:hover::after { opacity: .9; }

.fk-ghost {
    position: absolute;
    right: -18px; bottom: -20px;
    width: 150px; height: 150px;
    opacity: .06;
    pointer-events: none;
    z-index: 0;
    transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.fk-ghost svg {
    width: 100%; height: 100%;
    fill: none; stroke: #A97708;
    stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
}
.fk-card:hover .fk-ghost { transform: scale(1.14) rotate(-7deg); opacity: .12; }

.fk-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    margin-bottom: 18px;
}
.fk-ico {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(202, 138, 4, .28);
    background: linear-gradient(150deg, rgba(202, 138, 4, .15), rgba(202, 138, 4, .03));
    transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.fk-ico svg {
    width: 24px; height: 24px;
    fill: none; stroke: #A97708;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.fk-card:hover .fk-ico {
    transform: translateY(-3px) scale(1.08) rotate(-4deg);
    border-color: rgba(190, 128, 12, .55);
    box-shadow: 0 0 24px rgba(202, 138, 4, .22);
}
/* Ruhiges Dauerleuchten, versetzt - der Block lebt auch ohne Maus */
.reveal.active .fk-ico { animation: ffIcoPulse 7s ease-in-out infinite; }
.reveal.active .fk-card:nth-child(2) .fk-ico { animation-delay: 1.1s; }
.reveal.active .fk-card:nth-child(3) .fk-ico { animation-delay: 2.2s; }
@keyframes ffIcoPulse {
    0%, 100% { box-shadow: 0 0 0 rgba(202, 138, 4, 0); }
    45%      { box-shadow: 0 0 24px rgba(202, 138, 4, .26); }
}

.fk-no {
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(169, 119, 8, .3);
    transition: color .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.fk-card:hover .fk-no { color: rgba(169, 119, 8, .62); transform: translateY(-2px); }

.fk-dauer {
    position: relative;
    z-index: 2;
    display: inline-block;
    align-self: flex-start;
    margin-bottom: 10px;
    padding: 5px 13px;
    border-radius: 999px;
    border: 1px solid rgba(202, 138, 4, .3);
    background: linear-gradient(150deg, rgba(202, 138, 4, .13), rgba(202, 138, 4, .03));
    font-family: 'Montserrat', sans-serif;
    font-size: .63rem;
    font-weight: 600;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: #8A6208;
}
.fk-titel {
    position: relative;
    z-index: 2;
    margin: 0 0 8px;
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.18;
    letter-spacing: -.3px;
    color: #1C1917;
    hyphens: auto;
}
.fk-satz {
    position: relative;
    z-index: 2;
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: .84rem;
    line-height: 1.65;
    color: #57534E;
}

/* Tagesleiste: macht den Unterschied zwischen den Formaten sichtbar */
.fk-tag {
    position: relative;
    z-index: 2;
    margin: 20px 0 18px;
    padding: 0;
}
.fk-tag-bar {
    display: block;
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: rgba(202, 138, 4, .13);
    overflow: hidden;
}
.fk-tag-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--anteil, 50%);
    border-radius: 999px;
    background: linear-gradient(90deg, rgba(202, 138, 4, .6), #E5B83B);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 1.3s cubic-bezier(.16,1,.3,1) calc(.35s + var(--fk-d, 0s));
}
.reveal.active .fk-tag-fill { transform: scaleX(1); }
/* Ein Lichtpunkt wandert ueber die Leiste - dauerhafte Bewegung */
.fk-tag-bar::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 34px;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, rgba(255, 250, 224, .85), transparent);
    transform: translateX(-44px);
    opacity: 0;
}
.reveal.active .fk-tag-bar::after {
    animation: ffTagScan 7s ease-in-out infinite calc(1.4s + var(--fk-d, 0s));
}
@keyframes ffTagScan {
    0%        { transform: translateX(-44px); opacity: 0; }
    10%       { opacity: 1; }
    72%       { opacity: 1; }
    84%, 100% { transform: translateX(420px); opacity: 0; }
}
.fk-tag-cap {
    display: flex;
    justify-content: space-between;
    margin-top: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: .58rem;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #8A8177;
}

.fk-liste {
    position: relative;
    z-index: 2;
    list-style: none;
    margin: 0 0 22px;
    padding: 18px 0 0;
    border-top: 1px solid rgba(202, 138, 4, .16);
    display: grid;
    gap: 10px;
    flex-grow: 1;
}
.fk-liste li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-family: 'Montserrat', sans-serif;
    font-size: .84rem;
    line-height: 1.5;
    color: #292524;
}
.fk-mark {
    flex-shrink: 0;
    width: 6px; height: 6px;
    margin-top: 7px;
    border-radius: 50%;
    background: #CA8A04;
    box-shadow: 0 0 0 3px rgba(202, 138, 4, .14);
}

/* Der Button steht am Ende der Karte - Blockabschluss, wie ueberall */
.fk-btn {
    position: relative;
    z-index: 2;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 50px;
    padding: 14px 24px;
    border-radius: 999px;
    border: 1px solid rgba(202, 138, 4, .45);
    background: linear-gradient(150deg, rgba(202, 138, 4, .14), rgba(202, 138, 4, .04));
    font-family: 'Montserrat', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    text-decoration: none;
    color: #8A6208;
    transition: transform .45s cubic-bezier(.16,1,.3,1), background .4s ease,
                border-color .4s ease, box-shadow .4s ease, color .4s ease;
}
.fk-btn:hover {
    transform: translateY(-2px);
    background: #CA8A04;
    border-color: #CA8A04;
    color: #FFFDF6;
    box-shadow: 0 14px 30px rgba(202, 138, 4, .3);
}
.fk-btn-pfeil { transition: transform .35s ease; }
.fk-btn:hover .fk-btn-pfeil { transform: translateX(4px); }

.fk-sweep,
.fm-sweep {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    transform: translateX(-110%);
    transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.fk-sweep { background: linear-gradient(105deg, transparent 40%, rgba(202, 138, 4, .12) 50%, transparent 60%); }
.fm-sweep { background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .11) 50%, transparent 60%); }
.fk-card:hover .fk-sweep,
.fm-tile:hover .fm-sweep { transform: translateX(110%); }

/* ═══════════════════════════════════════════════════════════════
   BLOCK 3 — MODULE ALS BENTO
     Reihe 1  Breathwork (hoch)   Bewegungsprogramme
     Reihe 2  Breathwork weiter   Ernaehrungsworkshops
     Reihe 3  Online-Workshops (ueber beide Spalten)
   ═══════════════════════════════════════════════════════════════ */
.fm-bento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(130px, auto);
    gap: 16px;
}
.fm-tile--atem   { grid-row: span 2; }
.fm-tile--online { grid-column: 1 / -1; }

/* Ab 1025px dreispaltig: die hohe Kachel wird dadurch wirklich hoch
   statt breit (389 statt 592px Breite), und die breite Abschluss-
   kachel sitzt neben ihr statt unter allem. */
@media (min-width: 1025px) {
    .fm-bento { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .fm-tile--atem   { grid-column: 1; grid-row: 1 / span 2; }
    .fm-tile--online { grid-column: 2 / -1; grid-row: 2; }
}

.fm-tile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 24px 22px;
    border-radius: 22px;
    border: 1px solid rgba(202, 138, 4, .24);
    background:
        radial-gradient(circle at 86% 5%, rgba(202, 138, 4, .15), transparent 54%),
        linear-gradient(155deg, rgba(30, 26, 21, .78), rgba(9, 8, 7, .9));
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 24px 56px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .06);
    opacity: 0;
    transform: translateY(24px) rotate(-1deg) scale(.975);
    transition: transform .55s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease;
}
.reveal.active .fm-tile {
    opacity: 1;
    transform: none;
    transition: opacity .9s cubic-bezier(.16,1,.3,1) var(--fm-d, 0s),
                transform .9s cubic-bezier(.16,1,.3,1) var(--fm-d, 0s),
                border-color .4s ease, box-shadow .4s ease;
}
.fm-tile:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(229, 184, 59, .5);
    box-shadow: 0 38px 78px rgba(0, 0, 0, .55), 0 0 40px rgba(202, 138, 4, .17),
                inset 0 1px 0 rgba(255, 255, 255, .09);
}
.fm-tile--bewegung::after { animation-duration: 16s; }
.fm-tile--essen::after    { animation-duration: 19s; }
.fm-tile--online::after   { animation-duration: 22s; }

.fm-ghost {
    position: absolute;
    right: -18px; bottom: -20px;
    width: 130px; height: 130px;
    opacity: .07;
    pointer-events: none;
    z-index: 0;
    transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.fm-ghost svg {
    width: 100%; height: 100%;
    fill: none; stroke: #E5B83B;
    stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
}
.fm-tile:hover .fm-ghost { transform: scale(1.14) rotate(-7deg); opacity: .14; }
.fm-tile--atem .fm-ghost,
.fm-tile--online .fm-ghost { width: 178px; height: 178px; }

.fm-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}
.fm-ico {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(202, 138, 4, .3);
    background: linear-gradient(150deg, rgba(202, 138, 4, .18), rgba(202, 138, 4, .04));
    transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.fm-ico svg {
    width: 24px; height: 24px;
    fill: none; stroke: #E5B83B;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.fm-tile:hover .fm-ico {
    transform: translateY(-3px) scale(1.08) rotate(-4deg);
    border-color: rgba(229, 184, 59, .6);
    box-shadow: 0 0 26px rgba(202, 138, 4, .3);
}
.reveal.active .fm-ico { animation: ffIcoPulse 7s ease-in-out infinite; }
.reveal.active .fm-tile--bewegung .fm-ico { animation-delay: 1.1s; }
.reveal.active .fm-tile--essen .fm-ico    { animation-delay: 2.2s; }
.reveal.active .fm-tile--online .fm-ico   { animation-delay: 3.3s; }

.fm-no {
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(229, 184, 59, .3);
    transition: color .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.fm-tile:hover .fm-no { color: rgba(229, 184, 59, .62); transform: translateY(-2px); }

.fm-body { position: relative; z-index: 2; margin-top: auto; min-width: 0; }
.fm-titel {
    margin: 0 0 7px;
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: 1.28rem;
    font-weight: 500;
    line-height: 1.24;
    color: #F6EFE2;
    hyphens: auto;
    overflow-wrap: break-word;
}
.fm-satz {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: .85rem;
    line-height: 1.65;
    color: #A8A29E;
}
.fm-detail {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: .78rem;
    line-height: 1.6;
    color: #C7BFB2;
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .6s cubic-bezier(.16,1,.3,1),
                opacity .5s ease, margin-top .6s cubic-bezier(.16,1,.3,1);
}
/* Der Klipprahmen muss ein echtes Kindelement sein - Text direkt im
   Absatz wird von overflow:hidden nicht beschnitten. */
.fm-detail > * { overflow: hidden; }
.fm-detail > span { display: block; }
.fm-detail > span::before {
    content: '';
    display: block;
    width: 26px; height: 1px;
    margin-bottom: 8px;
    background: linear-gradient(90deg, rgba(229, 184, 59, .9), transparent);
}
.fm-tile:hover .fm-detail,
.fm-tile:focus-within .fm-detail {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 10px;
}
/* Auf den beiden grossen Kacheln ist Platz - dort steht er dauerhaft */
.fm-tile--atem .fm-detail,
.fm-tile--online .fm-detail {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 10px;
}

/* ── Schaubilder ──
   Die viewBoxen sind flach (200x56 bzw. 220x64). Ohne Begrenzung
   waere die Netzgrafik in der breiten Kachel 1200px breit und damit
   349px hoch geworden - die Kachel war dadurch 585px hoch. */
.fm-fig { position: relative; z-index: 2; margin: 14px 0 0; padding: 0; }
.fm-fig svg { width: 100%; height: auto; display: block; overflow: visible; }
.fm-fig--welle { max-width: 330px; }
.fm-fig--netz  { max-width: 300px; }

/* Die breite Abschlusskachel stellt Text und Grafik nebeneinander,
   sonst steht die Grafik allein unter einer halbleeren Zeile. */
.fm-tile--online {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    column-gap: 32px;
    align-items: center;
}
.fm-tile--online > .fm-top { grid-column: 1; grid-row: 1; }
.fm-tile--online > .fm-body { grid-column: 1; grid-row: 2; margin-top: 14px; }
.fm-tile--online > .fm-fig { grid-column: 2; grid-row: 1 / -1; width: 300px; margin: 0; }
.fm-cap {
    display: block;
    margin-top: 9px;
    font-family: 'Montserrat', sans-serif;
    font-size: .6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8A8177;
}
.fm-welle {
    fill: none;
    stroke: #E5B83B;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-dasharray: 460;
    stroke-dashoffset: 460;
    filter: drop-shadow(0 0 6px rgba(202, 138, 4, .5));
}
.reveal.active .fm-welle {
    transition: stroke-dashoffset 2.3s cubic-bezier(.16,1,.3,1) .5s;
    stroke-dashoffset: 0;
}
.fm-welle-punkt {
    fill: #FFF3C9;
    stroke: #C58400;
    stroke-width: 1;
    filter: drop-shadow(0 0 7px rgba(202, 138, 4, .85));
    offset-path: path('M4 44 C 26 44 30 12 52 12 C 74 12 78 44 100 44 C 122 44 126 12 148 12 C 170 12 174 44 196 44');
    offset-distance: 0%;
    opacity: 0;
}
.reveal.active .fm-welle-punkt { animation: ffWelleRun 9s cubic-bezier(.42,0,.58,1) 1.5s infinite; }
@keyframes ffWelleRun {
    0%   { offset-distance: 0%;   opacity: 0; }
    8%   { opacity: 1; }
    88%  { opacity: 1; }
    100% { offset-distance: 100%; opacity: 0; }
}

.fm-netz-linie {
    fill: none;
    stroke: rgba(202, 138, 4, .35);
    stroke-width: 1.2;
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
}
.reveal.active .fm-netz-linie {
    transition: stroke-dashoffset 1.8s cubic-bezier(.16,1,.3,1) .5s;
    stroke-dashoffset: 0;
}
.fm-kern {
    fill: #E5B83B;
    filter: drop-shadow(0 0 10px rgba(202, 138, 4, .8));
}
.fm-knoten {
    fill: rgba(202, 138, 4, .18);
    stroke: rgba(229, 184, 59, .6);
    stroke-width: 1.2;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}
.reveal.active .fm-knoten { animation: ffKnotenGlow 5.4s ease-in-out var(--k-d, 0s) infinite; }
@keyframes ffKnotenGlow {
    0%, 76%, 100% { fill: rgba(202, 138, 4, .18); transform: scale(1); }
    14%           { fill: rgba(229, 184, 59, .95); transform: scale(1.22); }
}

/* ═══════════════════════════════════════════════════════════════
   Breitenverhalten
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
    .fk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    /* Die dritte Karte bekommt die volle Reihe statt eine halbe -
       sonst bliebe rechts daneben eine Luecke. */
    .fk-card:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
    .fk-grid { grid-template-columns: minmax(0, 1fr); }
    .fk-card:nth-child(3) { grid-column: auto; }
    .fk-card { padding: 24px 20px 22px; border-radius: 20px; }
    .fk-titel { font-size: 1.32rem; }
    .fk-ico { width: 42px; height: 42px; border-radius: 12px; }
    .fk-ico svg { width: 21px; height: 21px; }
    .fk-ghost { width: 112px; height: 112px; }
    .fk-liste { gap: 9px; margin-bottom: 18px; }

    .fm-bento { grid-auto-rows: minmax(112px, auto); gap: 11px; }
    .fm-tile { padding: 18px 17px 17px; border-radius: 18px; }
    .fm-ico { width: 42px; height: 42px; border-radius: 12px; }
    .fm-ico svg { width: 21px; height: 21px; }
    .fm-no { font-size: 1.3rem; }
    .fm-titel { font-size: 1.08rem; }
    .fm-satz { font-size: .79rem; }
    .fm-ghost, .fm-tile--atem .fm-ghost, .fm-tile--online .fm-ghost { width: 100px; height: 100px; }
    /* Ohne Maus gibt es kein Ueberfahren - der Zusatzsatz steht offen */
    .fm-detail { grid-template-rows: 1fr; opacity: 1; margin-top: 9px; font-size: .75rem; }
}
@media (max-width: 768px) {
    /* Nebeneinander bleibt kein Platz - Grafik unter den Text */
    .fm-tile--online { display: flex; }
    .fm-tile--online > .fm-fig { width: 100%; max-width: 260px; margin: 14px auto 0; }
}
@media (max-width: 520px) {
    .fm-bento { grid-template-columns: minmax(0, 1fr); }
    .fm-tile--atem { grid-row: auto; }
    .fm-tile--online { grid-column: auto; }
    .fm-fig--welle { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
    .ff-formate-aura, .ff-module-aura,
    .reveal.active .fk-ico, .reveal.active .fm-ico,
    .reveal.active .fk-tag-bar::after,
    .reveal.active .fm-knoten { animation: none !important; }
    .fk-card, .fm-tile { opacity: 1 !important; transform: none !important; }
    .fk-card::after, .fm-tile::after { animation: none !important; opacity: .35; }
    .fk-sweep, .fm-sweep { display: none; }
    .fk-tag-fill { transform: scaleX(1) !important; transition: none !important; }
    .fm-welle, .fm-netz-linie { stroke-dashoffset: 0 !important; transition: none !important; }
    .fm-welle-punkt { animation: none !important; opacity: 0 !important; }
}


/* =====================================================================
   BLOCK 4 — ABLAUF
   ---------------------------------------------------------------------
   Vorher eine Zickzack-Zeitleiste, in der jeder Schritt nur aus einer
   Ueberschrift bestand - vier Zeilen Text auf einer ganzen Sektion.
   Auf Mobil quetschte sich die Zickzack-Spalte zusaetzlich zusammen.

   Jetzt eine Schiene mit vier vollbreiten Karten. Links steht die
   Zuordnung (Symbol, Ziffer, Zeitpunkt), rechts Titel und ein Satz,
   der sagt, was in diesem Schritt tatsaechlich passiert. Die Linie
   fuellt sich, sobald der Block sichtbar wird.
   ===================================================================== */
.ff-ablauf {
    position: relative;
    overflow-x: clip;
    padding: clamp(88px, 9vw, 140px) 24px;
    background: #FAFAF9;
    box-sizing: border-box;
}
.ff-ablauf-aura {
    position: absolute;
    left: 50%; top: 6%;
    width: min(860px, 104%); height: 420px;
    transform: translateX(-50%);
    background: radial-gradient(closest-side at 34% 44%, rgba(202, 138, 4, .12), transparent 70%);
    filter: blur(78px);
    pointer-events: none;
    z-index: 0;
    animation: ffAuraDrift 24s ease-in-out infinite alternate;
}
.ff-inner--schmal { max-width: 920px; }

.fa-schiene { position: relative; display: grid; gap: 16px; }

/* Die Linie liegt hinter den Karten und faerbt sich beim Einblenden */
.fa-linie {
    position: absolute;
    left: 27px;
    top: 34px;
    bottom: 34px;
    width: 2px;
    border-radius: 2px;
    background: rgba(202, 138, 4, .16);
    overflow: hidden;
}
.fa-linie::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(202, 138, 4, .8), rgba(202, 138, 4, .25));
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 1.9s cubic-bezier(.16, 1, .3, 1) .3s;
}
.reveal.active .fa-linie::after { transform: scaleY(1); }

.fa-step {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 128px minmax(0, 1fr);
    align-items: center;
    gap: 26px;
    margin-left: 58px;
    padding: 24px 26px;
    border-radius: 22px;
    border: 1px solid rgba(202, 138, 4, .2);
    background:
        radial-gradient(circle at 92% 4%, rgba(202, 138, 4, .1), transparent 50%),
        linear-gradient(155deg, rgba(255, 255, 255, .98), rgba(252, 247, 238, .93));
    box-shadow: 0 20px 46px rgba(72, 47, 7, .08), inset 0 1px 0 #FFF;
    opacity: 0;
    transform: translateX(-26px);
    transition: transform .55s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease;
}
.reveal.active .fa-step {
    opacity: 1;
    transform: none;
    transition: opacity .85s cubic-bezier(.16,1,.3,1) var(--fa-d, 0s),
                transform .85s cubic-bezier(.16,1,.3,1) var(--fa-d, 0s),
                border-color .4s ease, box-shadow .4s ease;
}
.fa-step:hover {
    transform: translateX(6px) !important;
    border-color: rgba(190, 128, 12, .45);
    box-shadow: 0 30px 64px rgba(72, 47, 7, .14), 0 0 28px rgba(202, 138, 4, .09), inset 0 1px 0 #FFF;
}

/* Der Punkt sitzt auf der Linie, nicht in der Karte */
.fa-punkt {
    position: absolute;
    left: -39px;
    top: 50%;
    width: 12px; height: 12px;
    margin-top: -6px;
    border-radius: 50%;
    border: 2px solid #CA8A04;
    background: #FAFAF9;
    z-index: 3;
}
.reveal.active .fa-punkt { animation: faPunktGlow 5.2s ease-in-out var(--fa-d, 0s) infinite; }
@keyframes faPunktGlow {
    0%, 72%, 100% { box-shadow: 0 0 0 rgba(202, 138, 4, 0); background: #FAFAF9; }
    18%           { box-shadow: 0 0 16px rgba(202, 138, 4, .8); background: #E5B83B; }
}

.fa-meta {
    position: relative;
    z-index: 2;
    display: grid;
    justify-items: center;
    gap: 8px;
    text-align: center;
}
.fa-ico {
    display: grid;
    place-items: center;
    width: 46px; height: 46px;
    border-radius: 14px;
    border: 1px solid rgba(202, 138, 4, .28);
    background: linear-gradient(150deg, rgba(202, 138, 4, .15), rgba(202, 138, 4, .03));
    transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.fa-ico svg {
    width: 23px; height: 23px;
    fill: none; stroke: #A97708;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.fa-step:hover .fa-ico {
    transform: translateY(-3px) scale(1.07) rotate(-4deg);
    border-color: rgba(190, 128, 12, .55);
    box-shadow: 0 0 22px rgba(202, 138, 4, .22);
}
.fa-no {
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: 1.6rem;
    line-height: 1;
    color: rgba(169, 119, 8, .34);
}
.fa-zeit {
    font-family: 'Montserrat', sans-serif;
    font-size: .56rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8A8177;
    line-height: 1.4;
}

.fa-inhalt { position: relative; z-index: 2; min-width: 0; }
.fa-titel {
    margin: 0 0 7px;
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: 1.34rem;
    font-weight: 500;
    line-height: 1.24;
    color: #1C1917;
    hyphens: auto;
}
.fa-satz {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: .87rem;
    line-height: 1.7;
    color: #57534E;
}
.fa-sweep {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(202, 138, 4, .1) 50%, transparent 60%);
    transform: translateX(-110%);
    transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.fa-step:hover .fa-sweep { transform: translateX(110%); }


/* =====================================================================
   BLOCK 5 — VORTEILE
   ---------------------------------------------------------------------
   Vorher fuenf Aufklappkarten: der eigentliche Inhalt - je vier bis
   fuenf Zeilen Begruendung - lag hinter einem Klick. Auf einer Seite,
   die Entscheidern erklaeren soll, was das Angebot bringt, war damit
   genau die Substanz unsichtbar.

   Jetzt ein Bento, in dem der Text offen steht. Die Leitkachel traegt
   ein Schaubild der drei Koerperregionen, die der Text nennt - Nacken,
   Schultern, Ruecken - und deren Marker versetzt aufleuchten.
   ===================================================================== */
.ff-vorteile {
    position: relative;
    overflow-x: clip;
    padding: clamp(88px, 9vw, 140px) 24px;
    background: #050505;
    box-sizing: border-box;
}
.ff-vorteile-aura {
    position: absolute;
    left: 50%; top: 4%;
    width: min(940px, 104%); height: 460px;
    transform: translateX(-50%);
    background:
        radial-gradient(closest-side at 28% 40%, rgba(202, 138, 4, .17), transparent 70%),
        radial-gradient(closest-side at 76% 60%, rgba(229, 184, 59, .09), transparent 68%);
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    animation: ffAuraDrift 21s ease-in-out infinite alternate;
}

/* Reihe 1  Belastungen (hoch, mit Schaubild)  Gesundheit
   Reihe 2  Belastungen weiter                 Stressregulation
   Reihe 3  Konzentration                      Teamgeist

   Die Leitkachel ist bewusst "Reduktion koerperlicher Belastungen":
   nur dort nennt der Text Nacken, Schultern und Ruecken - und genau
   die zeigt das Schaubild. Die Kacheln stehen deshalb explizit im
   Raster, nicht in Markup-Reihenfolge. */
.fv-bento {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: minmax(140px, auto);
    gap: 16px;
}
.fv-tile--belastung { grid-column: 1; grid-row: 1 / span 2; }
.fv-tile--gesund    { grid-column: 2; grid-row: 1; }
.fv-tile--stress    { grid-column: 2; grid-row: 2; }
.fv-tile--fokus     { grid-column: 1; grid-row: 3; }
.fv-tile--team      { grid-column: 2; grid-row: 3; }

.fv-tile {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 24px 24px 22px;
    border-radius: 22px;
    border: 1px solid rgba(202, 138, 4, .24);
    background:
        radial-gradient(circle at 86% 5%, rgba(202, 138, 4, .15), transparent 54%),
        linear-gradient(155deg, rgba(30, 26, 21, .78), rgba(9, 8, 7, .9));
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    backdrop-filter: blur(20px) saturate(150%);
    box-shadow: 0 24px 56px rgba(0, 0, 0, .46), inset 0 1px 0 rgba(255, 255, 255, .06);
    opacity: 0;
    transform: translateY(24px) rotate(-1deg) scale(.975);
    transition: transform .55s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease;
}
.reveal.active .fv-tile {
    opacity: 1;
    transform: none;
    transition: opacity .9s cubic-bezier(.16,1,.3,1) var(--fv-d, 0s),
                transform .9s cubic-bezier(.16,1,.3,1) var(--fv-d, 0s),
                border-color .4s ease, box-shadow .4s ease;
}
.fv-tile:hover {
    transform: translateY(-8px) !important;
    border-color: rgba(229, 184, 59, .5);
    box-shadow: 0 38px 78px rgba(0, 0, 0, .55), 0 0 40px rgba(202, 138, 4, .17),
                inset 0 1px 0 rgba(255, 255, 255, .09);
}
.fv-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 5;
    border-radius: inherit;
    padding: 1px;
    pointer-events: none;
    opacity: .45;
    background: conic-gradient(from var(--ff-edge),
        transparent 0 62%, rgba(229, 184, 59, .8) 78%, rgba(202, 138, 4, .22) 89%, transparent 96%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
            mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: ffEdgeOrbit 14s linear infinite;
    transition: opacity .4s ease;
}
.fv-tile--belastung::after { animation-duration: 17s; }
.fv-tile--stress::after    { animation-duration: 20s; }
.fv-tile--fokus::after     { animation-duration: 12s; }
.fv-tile--team::after      { animation-duration: 23s; }
.fv-tile:hover::after { opacity: .9; }

.fv-ghost {
    position: absolute;
    right: -18px; bottom: -20px;
    width: 128px; height: 128px;
    opacity: .07;
    pointer-events: none;
    z-index: 0;
    transition: transform .9s cubic-bezier(.16,1,.3,1), opacity .5s ease;
}
.fv-ghost svg {
    width: 100%; height: 100%;
    fill: none; stroke: #E5B83B;
    stroke-width: 1.1; stroke-linecap: round; stroke-linejoin: round;
}
.fv-tile:hover .fv-ghost { transform: scale(1.14) rotate(-7deg); opacity: .14; }
.fv-tile--belastung .fv-ghost { width: 176px; height: 176px; }

.fv-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    z-index: 2;
}
.fv-ico {
    display: grid;
    place-items: center;
    width: 48px; height: 48px;
    border-radius: 14px;
    border: 1px solid rgba(202, 138, 4, .3);
    background: linear-gradient(150deg, rgba(202, 138, 4, .18), rgba(202, 138, 4, .04));
    transition: transform .55s cubic-bezier(.16,1,.3,1), box-shadow .4s ease, border-color .4s ease;
}
.fv-ico svg {
    width: 24px; height: 24px;
    fill: none; stroke: #E5B83B;
    stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}
.fv-tile:hover .fv-ico {
    transform: translateY(-3px) scale(1.08) rotate(-4deg);
    border-color: rgba(229, 184, 59, .6);
    box-shadow: 0 0 26px rgba(202, 138, 4, .3);
}
.reveal.active .fv-ico { animation: ffIcoPulse 7s ease-in-out infinite; }
.reveal.active .fv-tile--belastung .fv-ico { animation-delay: 1s; }
.reveal.active .fv-tile--stress .fv-ico    { animation-delay: 2s; }
.reveal.active .fv-tile--fokus .fv-ico     { animation-delay: 3s; }
.reveal.active .fv-tile--team .fv-ico      { animation-delay: 4s; }

.fv-no {
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: 1.5rem;
    line-height: 1;
    color: rgba(229, 184, 59, .3);
    transition: color .45s ease, transform .55s cubic-bezier(.16,1,.3,1);
}
.fv-tile:hover .fv-no { color: rgba(229, 184, 59, .62); transform: translateY(-2px); }

.fv-body { position: relative; z-index: 2; margin-top: auto; min-width: 0; }
.fv-titel {
    margin: 0 0 8px;
    font-family: 'KGSAmp', 'Playfair Display', serif;
    font-size: 1.26rem;
    font-weight: 500;
    line-height: 1.24;
    color: #F6EFE2;
    hyphens: auto;
}
.fv-text {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    font-size: .83rem;
    line-height: 1.75;
    color: #A8A29E;
}
.fv-sweep {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .11) 50%, transparent 60%);
    transform: translateX(-110%);
    transition: transform .9s cubic-bezier(.16,1,.3,1);
}
.fv-tile:hover .fv-sweep { transform: translateX(110%); }

/* Schaubild der Leitkachel: die drei Regionen, die der Text nennt */
.fv-fig {
    position: relative;
    z-index: 2;
    margin: 16px auto 4px;
    padding: 0;
    width: 100%;
    max-width: 168px;
}
.fv-fig svg { width: 100%; height: auto; display: block; }
.fv-koerper { fill: rgba(202, 138, 4, .1); stroke: rgba(229, 184, 59, .32); stroke-width: 1.2; }
.fv-zone {
    fill: rgba(202, 138, 4, .1);
    stroke: rgba(229, 184, 59, .5);
    stroke-width: 1.2;
    transform-box: fill-box;
    transform-origin: 50% 50%;
}
.reveal.active .fv-zone { animation: fvZoneGlow 6s ease-in-out var(--z-d, 0s) infinite; }
@keyframes fvZoneGlow {
    0%, 74%, 100% { fill: rgba(202, 138, 4, .1);  stroke: rgba(229, 184, 59, .5); transform: scale(1); }
    16%           { fill: rgba(229, 184, 59, .34); stroke: #F6E4B4;               transform: scale(1.15); }
}
.fv-cap {
    display: block;
    margin-top: 10px;
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    font-size: .6rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #8A8177;
}

/* ── Breitenverhalten ── */
@media (max-width: 768px) {
    .fa-step {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
        margin-left: 42px;
        padding: 20px 18px;
    }
    .fa-meta { justify-items: start; text-align: left; grid-auto-flow: column; grid-auto-columns: max-content; align-items: center; gap: 12px; }
    .fa-linie { left: 19px; }
    .fa-punkt { left: -29px; }
    .fa-titel { font-size: 1.16rem; }
    .fa-satz { font-size: .82rem; }

    .fv-bento { grid-auto-rows: minmax(120px, auto); gap: 11px; }
    .fv-tile { padding: 18px 17px 17px; border-radius: 18px; }
    .fv-ico { width: 42px; height: 42px; border-radius: 12px; }
    .fv-ico svg { width: 21px; height: 21px; }
    .fv-no { font-size: 1.3rem; }
    .fv-titel { font-size: 1.06rem; }
    .fv-text { font-size: .78rem; line-height: 1.7; }
    .fv-ghost, .fv-tile--belastung .fv-ghost { width: 98px; height: 98px; }
    .fv-fig { max-width: 132px; }
}
@media (max-width: 520px) {
    .fv-bento { grid-template-columns: minmax(0, 1fr); }
    .fv-tile--belastung, .fv-tile--gesund, .fv-tile--stress,
    .fv-tile--fokus, .fv-tile--team { grid-column: auto; grid-row: auto; }
}

@media (prefers-reduced-motion: reduce) {
    .ff-ablauf-aura, .ff-vorteile-aura,
    .reveal.active .fa-punkt, .reveal.active .fa-ico,
    .reveal.active .fv-ico, .reveal.active .fv-zone { animation: none !important; }
    .fa-step, .fv-tile { opacity: 1 !important; transform: none !important; }
    .fa-linie::after { transform: scaleY(1) !important; transition: none !important; }
    .fv-tile::after { animation: none !important; opacity: .35; }
    .fa-sweep, .fv-sweep { display: none; }
}