/* src/styles/fo-tokens.css */
/* FilmOrbit Design-Tokens — 1:1 aus dem Claude-Design-System übernommen.
   In Instatic: als Site-Tokens anlegen (Farben, Schriften, Abstände) oder diese Datei als globales Stylesheet einbinden. */


:root{
/* --- Base palette (from bricks-styles-color-palette-filmorbit-colors.json) --- */
--blue:#49ADC3;--blue-l-1:#86c8d7;--blue-l-2:#c2e4eb;--blue-d-1:#317382;--blue-d-2:#183a41;
--pink:#b03350;--pink-l-1:#ca778a;--pink-l-2:#e5bbc5;--pink-d-1:#752235;--pink-d-2:#3b111b;
--purple:#28183b;--purple-l-1:#70657c;--purple-l-2:#b7b2be;--purple-d-1:#1b1027;--purple-d-2:#0d0814;
--red:#D97F49;
--white:#F8F8F8;--black:#050D0F;

/* --- Neutral ramp (derived from --white / --black, used for surfaces & rules) --- */
--neutral-0:#ffffff;--neutral-50:#F8F8F8;--neutral-100:#EFEFEF;--neutral-200:#E2E3E3;
--neutral-300:#C8CACB;--neutral-400:#9BA0A1;--neutral-500:#6D7476;--neutral-600:#474E50;
--neutral-800:#1C2426;--neutral-900:#050D0F;

/* --- Semantic: surfaces --- */
--surface-page:var(--white);
--surface-raised:var(--neutral-0);
--surface-sunken:var(--neutral-100);
--surface-inverse:var(--blue-d-2);
--surface-deep:var(--black);
--surface-card:var(--neutral-0);
--surface-grid:#FCFCFC;      /* the near-white panel a bento card grid sits on */
--surface-accent:var(--blue);
--surface-brand-dark:var(--purple);

/* Service-card accents, in the order they appear on filmorbit.de */
--service-1:var(--purple);
--service-2:var(--blue);
--service-3:var(--red);
--service-4:var(--pink);
--service-5:var(--blue-d-2);

/* --- Semantic: text --- */
--text-heading:var(--black);
--text-body:var(--neutral-800);
--text-muted:var(--neutral-500);
--text-on-dark:var(--white);
--text-on-dark-muted:rgba(248,248,248,.72);
--text-accent:var(--blue-d-1);
--text-link:var(--blue-d-1);
--text-link-hover:var(--pink);

/* --- Semantic: lines --- */
--border-subtle:var(--neutral-200);
--border-strong:var(--neutral-300);
--border-on-dark:rgba(248,248,248,.28);

/* --- Semantic: interactive --- */
--action-primary-bg:var(--blue);
--action-primary-bg-hover:var(--blue-d-1);
--action-primary-fg:var(--white);
--action-light-bg:var(--white);
--action-light-bg-hover:var(--blue-l-2);
--action-light-fg:var(--black);
--action-ghost-fg:var(--white);
--action-ghost-border:rgba(248,248,248,.85);
--focus-ring:var(--blue-l-1);

/* --- Semantic: status --- */
--status-success:#3F8F5B;
--status-warning:var(--red);
--status-danger:var(--pink);
--status-info:var(--blue-d-1);

/* --- Signature gradients --- */
--gradient-hero:linear-gradient(150deg,#b03350,#28183b);
--gradient-space:linear-gradient(180deg,var(--purple) 0%,var(--purple-d-2) 100%);
--gradient-nav-pill:linear-gradient(180deg,#fdeff0 0%,#fbe6e8 100%);
--gradient-photo-veil:linear-gradient(180deg,rgba(5,13,15,0) 40%,rgba(5,13,15,.72) 100%);
}

:root{
--font-display:"Staatliches","Oswald","Arial Narrow",sans-serif;
--font-body:"DM Sans","Helvetica Neue",Arial,sans-serif;
--font-mono:ui-monospace,"SFMono-Regular",Menlo,monospace;

/* Fluid type scale, 360→1600px viewport — values taken verbatim from the
   Bricks theme on new.filmorbit.de (--brxw-text-fluid-*, 1rem = 10px there). */
--text-xs:10.2px;
--text-s:clamp(12.8px,.0565vw + 12.6px,13.5px);
--text-m:clamp(16px,.1613vw + 15.42px,18px);
--text-l:clamp(20px,.3226vw + 18.84px,24px);
--text-xl:clamp(25px,.5645vw + 22.97px,32px);
--text-2xl:clamp(31.3px,.9113vw + 28.02px,42.6px);
--text-3xl:clamp(39.1px,1.4113vw + 34.02px,56.8px);
--text-4xl:clamp(48.8px,2.1774vw + 40.96px,75.8px);
--text-5xl:clamp(61px,3.2258vw + 49.39px,101px);

/* Display steps (Staatliches, uppercase). 1 = hero only. */
--display-1-size:var(--text-5xl);
--display-2-size:var(--text-2xl);
--display-3-size:var(--text-xl);
--display-4-size:var(--text-l);
--display-5-size:var(--text-m);
--display-1-lh:1;
--display-2-lh:1.05;
--display-3-lh:1.1;
--display-4-lh:1.15;
--display-5-lh:1.2;

/* Staatliches is condensed — the brand opens it up with POSITIVE tracking.
   3px is the site's --Subheading value, applied to every display heading. */
--display-tracking:3px;
--display-1-ls:var(--display-tracking);
--display-2-ls:var(--display-tracking);
--display-3-ls:var(--display-tracking);
--display-4-ls:var(--display-tracking);
--display-5-ls:var(--display-tracking);

/* Body / DM Sans */
--body-xl-size:var(--text-l);
--body-lg-size:var(--text-m);
--body-md-size:var(--text-m);
--body-sm-size:var(--text-s);
--body-xs-size:var(--text-xs);
--body-xl-lh:1.5;
--body-lg-lh:1.6;
--body-md-lh:1.65;
--body-sm-lh:1.6;
--body-xs-lh:1.5;
--line-height-body:calc(8px + 2ex);
--line-height-heading:calc(6px + 2ex);

/* Eyebrow / kicker — DM Sans 600, sits above every section headline */
--eyebrow-size:var(--text-m);
--eyebrow-lh:1.4;
--eyebrow-ls:0px;
--eyebrow-weight:600;

--weight-regular:400;
--weight-medium:500;
--weight-semibold:600;
--weight-bold:700;
--measure-prose:65ch;
--measure-narrow:45ch;
--measure-title:25ch;
}

:root{
/* Fluid space scale, 360→1600px — verbatim from the Bricks theme (--brxw-space-fluid-*). */
--space-3xs:6.5px;
--space-2xs:8.3px;
--space-xs:clamp(10.2px,.0887vw + 9.88px,11.3px);
--space-s:clamp(12.8px,.1774vw + 12.16px,15px);
--space-m:clamp(16px,.3226vw + 14.84px,20px);
--space-l:clamp(20px,.5403vw + 18.06px,26.7px);
--space-xl:clamp(25px,.8468vw + 21.95px,35.5px);
--space-2xl:clamp(31.3px,1.2984vw + 26.63px,47.4px);
--space-3xl:clamp(39.1px,1.9355vw + 32.13px,63.1px);
--space-4xl:clamp(48.8px,2.8548vw + 38.52px,84.2px);
--space-5xl:clamp(61px,4.129vw + 46.14px,112.2px);

/* Roles */
--section-y:var(--space-5xl);          /* vertical padding of a page section */
--section-x:var(--space-m);            /* horizontal page padding — 16–20px, not 32 */
--section-gap:calc(var(--space-5xl) * 1.5); /* Abstand zwischen zwei Abschnitten, gilt auf allen Seiten */
--container-gap:var(--space-3xl);      /* row-gap between blocks inside a section */
--grid-gap:var(--space-l);             /* gap between cards/photos */
--gutter:var(--space-l);
--content-gap:var(--space-m);
--card-pad:var(--space-xl);
--card-pad-sm:var(--space-s);
--container-max:1400px;                /* --brxw-container-width: 140rem */
--container-pad:var(--space-m);

/* Legacy numeric steps — kept so older markup keeps working. */
--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
--space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;--space-11:80px;--space-12:112px;--space-13:160px;
--section-y-lg:var(--space-5xl);
}

:root{
/* Verbatim from the Bricks theme (--brxw-radius-*): these shrink slightly on
   large screens, which is why the clamps have a negative slope. */
--radius-xs:4px;
--radius-s:clamp(6px,-.18vw + 8.6px,8px);
--radius-m:clamp(10px,-.18vw + 12.6px,12px);
--radius-l:clamp(16px,-.36vw + 21.1px,20px);
--radius-xl:clamp(24px,-.71vw + 34.3px,32px);
--radius-full:9999px;

/* Aliases */
--radius-sm:var(--radius-s);
--radius-md:var(--radius-m);   /* photos, service cards */
--radius-lg:var(--radius-l);   /* the light container a card grid sits in */
--radius-pill:var(--radius-full);  /* buttons, nav, chips */
--radius-circle:50%;
}

:root{
/* Shadows are soft, low-contrast and cool-tinted — never hard drop shadows */
--shadow-none:none;
--shadow-sm:0 1px 2px rgba(5,13,15,.06);
--shadow-card:0 8px 24px rgba(5,13,15,.08);
--shadow-raised:0 16px 40px rgba(5,13,15,.12);
--shadow-nav:0 6px 24px rgba(5,13,15,.10);
--shadow-focus:0 0 0 2px #fff,0 0 0 5px #1d5c69;  /* zweifarbig: auf hellem und dunklem Grund sichtbar */

--border-hairline:1px solid var(--border-subtle);
--border-on-dark-hairline:1px solid var(--border-on-dark);

--blur-glass:blur(14px);
--glass-light:rgba(248,248,248,.82);
--glass-dark:rgba(5,13,15,.42);

/* Starfield: repeating dot texture for space panels */
--texture-stars:radial-gradient(circle at 20% 30%,rgba(248,248,248,.55) 0 1.2px,transparent 1.3px),radial-gradient(circle at 70% 65%,rgba(248,248,248,.4) 0 1px,transparent 1.1px),radial-gradient(circle at 45% 85%,rgba(248,248,248,.35) 0 1px,transparent 1.1px);
--texture-stars-size:180px 160px,240px 220px,300px 280px;
}

:root{
--duration-fast:120ms;
--duration-base:220ms;
--duration-slow:420ms;
--duration-orbit:26s;
--ease-standard:cubic-bezier(.4,0,.2,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-bounce:cubic-bezier(.34,1.56,.64,1);   /* playful hover pops */
--hover-lift:translateY(-3px);
--press-scale:scale(.97);
}
@media (prefers-reduced-motion:reduce){:root{--duration-fast:1ms;--duration-base:1ms;--duration-slow:1ms;--duration-orbit:1ms;}}



/* src/styles/fo-site.css */
/* FilmOrbit — Seiten-Styles (Startseite + Rahmen)
   Aufbau für den Instatic-Import:
   - Einfache Klassen-Selektoren (.fo-…) werden in Instatic zu wiederverwendbaren Klassen.
   - Hover-, Kind- und Zustandsregeln (.is-…, [data-…]) landen als „ambient rules“.
   - Desktop-Umbruch bei 940px, wie im Prototyp (isDesktop). */

/* ---------- Basis ---------- */
*,*::before,*::after{box-sizing:border-box}
html{background:var(--surface-page)}
body{margin:0;background:var(--surface-page);color:var(--text-body);font-family:var(--font-body);font-size:var(--body-md-size);line-height:var(--body-md-lh);-webkit-font-smoothing:antialiased;text-wrap:pretty}
h1,h2,h3,h4,h5{font-family:var(--font-display);font-weight:400;text-transform:uppercase;color:var(--text-heading);margin:0;letter-spacing:var(--display-tracking);line-height:1.1;word-break:break-word}
h1{font-size:var(--display-1-size);line-height:var(--display-1-lh)}
h2{font-size:var(--display-2-size);line-height:var(--display-2-lh)}
h3{font-size:var(--display-3-size);line-height:var(--display-3-lh)}
h4{font-size:var(--display-4-size);line-height:var(--display-4-lh)}
h5{font-size:var(--display-5-size);line-height:var(--display-5-lh)}
p{margin:0 0 1em}
img{max-width:100%;display:block}
a{color:var(--text-link);text-decoration:none;transition:color var(--duration-base) var(--ease-standard)}
a:hover{color:var(--text-link-hover)}
::selection{background:var(--blue-l-1);color:var(--black)}
/* Fokusrahmen: zweifarbig (weiß + Petrol), damit er auf hellem und dunklem Grund sichtbar ist.
   !important, weil Buttons und Karten eigene box-shadows haben, die den Rahmen sonst überdecken. */
:focus-visible{outline:2px solid transparent;outline-offset:2px;box-shadow:var(--shadow-focus) !important}
html{scroll-padding-top:110px}
/* Skiplink: erscheint beim ersten Tab oben links */
.fo-skip{position:fixed;left:16px;top:-100px;z-index:400;padding:12px 20px;border-radius:var(--radius-full);background:var(--blue-d-2);color:var(--white);font-weight:700;text-decoration:none;transition:top .2s}
.fo-skip:focus{top:16px;color:var(--white)}
.fo-main:focus{outline:none}
/* Nur für Screenreader sichtbar */
.fo-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* Animationen anhalten (WCAG 2.2.2): Knopf unter jedem Laufband, Schalter im Footer */
.fo-motion-paused *,.fo-motion-paused *::before,.fo-motion-paused *::after{animation-play-state:paused !important}
.fo-motion-band{position:relative;cursor:pointer}
.fo-motion-band:focus-visible{box-shadow:none !important}
.fo-motion-hint{position:absolute;left:50%;top:50%;z-index:3;display:flex;align-items:center;gap:8px;padding:8px 16px;border-radius:var(--radius-full);background:#140d1e;color:var(--white);font-size:var(--text-s);font-weight:700;line-height:1;white-space:nowrap;transform:translate(-50%,-50%) scale(.9);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.fo-motion-band:hover .fo-motion-hint,.fo-motion-paused .fo-motion-hint{opacity:1;transform:translate(-50%,-50%) scale(1)}
.fo-motion-band:focus-visible .fo-motion-hint{opacity:1;transform:translate(-50%,-50%) scale(1);box-shadow:var(--shadow-focus)}

.fo-page{min-height:100vh;display:flex;flex-direction:column}
.fo-main{flex:1}

/* ---------- Layout-Bausteine ---------- */
.fo-section{padding:0 var(--section-x) var(--section-gap)}
.fo-container{max-width:var(--container-max);margin:0 auto}
.fo-stack{display:flex;flex-direction:column;row-gap:var(--space-3xl)}
.fo-stack-2xl{display:flex;flex-direction:column;row-gap:var(--space-2xl)}
.fo-section-head{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-s);text-align:center}
.fo-h2{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-2xl);line-height:1.05;letter-spacing:3px;color:var(--text-heading)}
.fo-lead{margin:0;max-width:58ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body);text-wrap:pretty}
.fo-kicker{font-weight:600;font-size:var(--text-m);color:var(--blue-d-1)}
.fo-center{display:flex;justify-content:center}
/* Hilfsklassen für alle Seiten */
.fo-balance{text-wrap:balance}
.fo-text-center{text-align:center}
.fo-kicker-light{font-weight:600;font-size:var(--text-m);color:var(--blue-l-1)}
.fo-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-s)}
.fo-actions-start{justify-content:flex-start}

/* ---------- Button ---------- */
.fo-btn{position:relative;overflow:hidden;isolation:isolate;display:inline-flex;align-items:center;gap:var(--space-2xs);border:none;border-radius:var(--radius-full);font-family:var(--font-body);font-weight:700;line-height:1.2;text-decoration:none;cursor:pointer;transition:background .35s ease,box-shadow .45s ease,color .3s ease,transform .35s cubic-bezier(.16,1,.3,1)}
.fo-btn::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;transform:translateX(-130%);transition:transform .75s cubic-bezier(.22,1,.36,1);background:linear-gradient(105deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.5) 50%,rgba(255,255,255,0) 62%)}
.fo-btn:hover::before{transform:translateX(130%)}
.fo-btn:hover{transform:translateY(-2px)}
.fo-btn:active{transform:var(--press-scale)}
.fo-btn-md{font-size:var(--text-s);padding:var(--space-s) var(--space-l)}
.fo-btn-lg{font-size:var(--text-m);padding:var(--space-s) var(--space-xl)}
.fo-btn-primary{color:var(--action-primary-fg);background:linear-gradient(120deg,#317382 0%,#2a5e6c 46%,#28183b 100%);box-shadow:0 6px 20px -12px rgba(40,24,59,.8),inset 0 1px 0 rgba(255,255,255,.12)}
.fo-btn-primary::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;background-image:radial-gradient(1.4px 1.4px at 18% 34%,#fff,transparent),radial-gradient(1.2px 1.2px at 64% 68%,rgba(255,255,255,.85),transparent),radial-gradient(1.6px 1.6px at 84% 26%,rgba(255,255,255,.7),transparent);background-repeat:no-repeat;animation:fo-btn-stars 18s linear infinite alternate}
.fo-btn-primary:hover{color:var(--action-primary-fg);background:linear-gradient(120deg,#3a8b9c 0%,#326e7e 46%,#33204a 100%);box-shadow:0 12px 30px -14px rgba(73,173,195,.95),inset 0 0 0 1px rgba(134,200,215,.35)}
.fo-btn-light{color:var(--purple-d-2);background:linear-gradient(120deg,#ffffff 0%,#f2fafc 58%,#dff0f5 100%);box-shadow:inset 0 0 0 1px rgba(73,173,195,.18)}
.fo-btn-light::before{background:linear-gradient(105deg,rgba(73,173,195,0) 38%,rgba(73,173,195,.35) 50%,rgba(73,173,195,0) 62%)}
.fo-btn-light:hover{color:var(--purple-d-2);background:linear-gradient(120deg,#ffffff 0%,#dff1f6 45%,#c2e4eb 100%);box-shadow:0 0 16px 0 rgba(134,200,215,.3),inset 0 0 0 1px rgba(73,173,195,.32)}
.fo-btn-ghost{color:var(--action-ghost-fg);background:transparent;box-shadow:inset 0 0 0 1.5px rgba(248,248,248,.55)}
.fo-btn-ghost:hover{color:var(--action-ghost-fg);background:rgba(248,248,248,.14);box-shadow:inset 0 0 0 1.5px rgba(248,248,248,.95),0 0 26px -8px rgba(134,200,215,.75)}
.fo-btn-block{justify-content:center}
.fo-btn-secondary{color:var(--text-heading);background:transparent;box-shadow:inset 0 0 0 1.5px var(--text-heading)}
.fo-btn-secondary:hover{color:var(--text-heading);background:rgba(5,13,15,.06)}
@keyframes fo-btn-stars{0%{background-position:0 0,0 0,0 0}100%{background-position:-46px 8px,38px -10px,-24px -14px}}

/* ---------- Sterne (per JS erzeugt) ---------- */
.fo-star{position:absolute;border-radius:50%;background:#fff;animation:fo-twinkle var(--dur) ease-in-out var(--delay) infinite}
.fo-shoot{position:absolute;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9));transform-origin:left center;opacity:0}
@keyframes fo-twinkle{0%,100%{opacity:var(--o-lo);transform:scale(.7)}50%{opacity:var(--o-hi);transform:scale(1.15)}}
@keyframes fo-shoot{0%{transform:translate3d(0,0,0) rotate(29deg) scaleX(.2);opacity:0}2%{opacity:.9}9%{transform:translate3d(var(--dx),var(--dy),0) rotate(29deg) scaleX(1);opacity:0}100%{transform:translate3d(var(--dx),var(--dy),0) rotate(29deg) scaleX(1);opacity:0}}
.fo-layer{position:absolute;inset:0;will-change:transform}
.fo-fill{position:absolute;inset:0;overflow:hidden;pointer-events:none}

/* ---------- Komet (scrollgesteuert) ---------- */
.fo-comet{position:fixed;left:0;top:0;width:150px;height:150px;pointer-events:none;z-index:120;opacity:0;will-change:transform,filter}
.fo-comet-tail{position:absolute;right:62%;top:50%;width:460px;height:26px;margin-top:-13px;border-radius:var(--radius-full);background:linear-gradient(90deg,rgba(217,127,73,0),rgba(217,127,73,.28) 45%,rgba(240,180,140,.7));filter:blur(7px);transform:rotate(30deg);transform-origin:right center}
.fo-comet-img{position:relative;width:100%;height:100%;object-fit:contain}

/* ---------- Header: Desktop ---------- */
.fo-header{position:fixed;top:20px;left:20px;right:20px;z-index:300}
.fo-nav{max-width:var(--container-max);margin:0 auto;background:var(--gradient-nav-pill);border-radius:var(--radius-full);box-shadow:var(--shadow-nav);display:flex;align-items:center;justify-content:space-between;gap:var(--space-l);padding:10px 10px 10px 28px}
.fo-nav-logo{display:block;height:32px;width:auto}
.fo-nav-links{display:flex;align-items:center;gap:var(--space-l)}
.fo-nav-link{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-s);font-weight:500;color:var(--text-heading);text-decoration:none}
.fo-nav-link:hover{color:var(--blue-d-1)}
.fo-mega{display:none;max-width:500px;margin:8px auto 0;background:var(--surface-raised);border-radius:var(--radius-l);box-shadow:var(--shadow-nav);padding:var(--space-l);flex-direction:column;row-gap:var(--space-s)}
.fo-mega.is-open{display:flex}
.fo-mega-title{font-family:var(--font-display);text-transform:uppercase;letter-spacing:3px;font-size:var(--text-m);color:var(--text-heading)}
.fo-mega-list{display:grid;gap:4px}
.fo-mega-item{display:grid;grid-template-columns:44px 1fr;align-items:center;column-gap:var(--space-s);padding:7px 10px;border-radius:var(--radius-m);text-decoration:none;transition:background .25s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.fo-mega-item:hover{background:var(--surface-sunken);transform:translateX(-6px)}
.fo-mega-icon{width:44px;height:44px;border-radius:var(--radius-s);object-fit:cover}
.fo-mega-text{display:flex;flex-direction:column;row-gap:2px}
.fo-mega-name{font-family:var(--font-display);text-transform:uppercase;letter-spacing:2px;font-size:var(--text-m);line-height:1.2;color:var(--text-heading)}
.fo-mega-desc{font-size:var(--text-s);color:var(--text-muted)}

/* ---------- Header: Mobil ---------- */
.fo-mheader{display:none;position:fixed;top:14px;left:14px;right:14px;z-index:300}
.fo-mnav{background:var(--gradient-nav-pill);border-radius:var(--radius-full);box-shadow:var(--shadow-nav);display:flex;align-items:center;justify-content:space-between;padding:10px 12px 10px 20px}
.fo-mnav-logo{display:block;height:28px;width:auto}
.fo-burger{width:46px;height:46px;border:none;background:transparent;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;cursor:pointer}
.fo-burger-line{display:block;width:22px;height:2px;background:var(--text-heading)}
.fo-drawer{position:fixed;inset:0;z-index:320;background:var(--gradient-hero);color:var(--text-on-dark);display:none;flex-direction:column;overflow:hidden}
/* Sichtbar nur mit .is-open (setzt site.js), damit das Menü im Instatic-Editor nicht über allem liegt */
.fo-drawer.is-open:not([hidden]){display:flex}
.fo-drawer-top{flex:none;display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);padding:calc(14px + env(safe-area-inset-top)) 14px 10px}
.fo-drawer-body{flex:1;overflow:auto;padding:var(--space-l) 14px calc(24px + env(safe-area-inset-bottom))}
.fo-drawer-view{display:flex;flex-direction:column;gap:2px}
.fo-drawer-view[hidden]{display:none}
.fo-round-btn{width:46px;height:46px;flex:none;border-radius:var(--radius-full);border:1px solid rgba(248,248,248,.28);background:transparent;color:var(--text-on-dark);display:flex;align-items:center;justify-content:center;cursor:pointer}
.fo-back-btn{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 16px 0 12px;border-radius:var(--radius-full);border:1px solid rgba(248,248,248,.28);background:transparent;color:var(--text-on-dark);font:inherit;font-size:var(--text-s);font-weight:700;cursor:pointer}
.fo-back-btn[hidden],.fo-drawer-logo[hidden]{display:none}
.fo-drawer-logo{display:block;height:28px;width:auto}
.fo-drawer-link{display:flex;align-items:center;justify-content:space-between;gap:var(--space-s);width:100%;padding:16px 4px;font:inherit;font-family:var(--font-display);text-transform:uppercase;letter-spacing:3px;font-size:var(--text-xl);text-align:left;color:var(--text-on-dark);text-decoration:none;background:transparent;border:none;border-bottom:1px solid rgba(248,248,248,.18);cursor:pointer}
.fo-drawer-link:hover{color:var(--text-on-dark)}
.fo-drawer-link-sub{padding:15px 4px;font-size:var(--text-l)}
.fo-drawer-link-last{border-bottom:none}
.fo-drawer-label{padding:0 4px var(--space-m);font-family:var(--font-display);text-transform:uppercase;letter-spacing:3px;font-size:var(--text-l);color:rgba(248,248,248,.72)}
.fo-drawer-cta{margin-top:var(--space-xl)}

/* ---------- Hero ---------- */
.fo-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:clamp(130px,16vh,170px) var(--section-x) clamp(120px,10vh,165px);background:var(--gradient-hero);color:var(--text-on-dark);text-align:center}
.fo-hero-stars{position:absolute;inset:-12% 0;pointer-events:none}
.fo-hero-inner{position:relative;width:100%;max-width:var(--container-max);margin:0 auto}
.fo-hero-text{position:relative;max-width:920px;margin:0 auto;display:flex;flex-direction:column;align-items:center;row-gap:var(--space-s)}
.fo-hero-kicker{font-weight:600;font-size:var(--text-m);color:var(--text-on-dark)}
.fo-hero-title{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-4xl);line-height:1.02;letter-spacing:3px;color:var(--text-on-dark);text-wrap:balance}
.fo-hero-h1{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-s);margin:0;font:inherit;text-transform:none;letter-spacing:normal;line-height:inherit;color:inherit}
.fo-hero-h1 .fo-hero-kicker{font-family:var(--font-body);text-transform:none;letter-spacing:normal;line-height:1.3}
.fo-hero-trust{margin:var(--space-xs) 0 0;font-size:var(--text-s);line-height:1.5;color:var(--text-on-dark)}
.fo-hero-trust strong{font-weight:700}
.fo-hero-stars-rating{color:#f5c451;letter-spacing:1px}
.fo-hero-trust-sep{margin:0 .35em}
.fo-hero-lead{margin:var(--space-xs) 0 0;max-width:62ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}
.fo-hero-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-s);margin-top:var(--space-m)}
.fo-hero-logos{position:relative;width:100%;max-width:var(--container-max);margin:var(--space-4xl) auto 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.fo-hero-logos-track{display:flex;width:max-content;align-items:center;animation:fo-marquee 78s linear infinite}
.fo-hero-logos-track > *{margin-right:clamp(38px,5vw,64px)}
.fo-hero-logo{flex:none;height:clamp(30px,3.4vw,36px);width:auto;opacity:.72;filter:brightness(0) invert(1);transition:opacity .3s ease}
.fo-hero-logo:hover{opacity:1}
.fo-hero-logo-white{filter:none}
@keyframes fo-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- Fotostreifen unter dem Hero ---------- */
.fo-photos{position:relative;z-index:2;margin-top:max(clamp(-150px,-7vw,-60px),-9vh);padding:0 var(--section-x)}
.fo-photos-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:var(--grid-gap)}
.fo-photo{width:100%;height:clamp(190px,23vw,330px);object-fit:cover;border-radius:var(--radius-m)}
.fo-photo-low{align-self:end}

/* ---------- Team-Intro ---------- */
.fo-team{padding:var(--section-gap) var(--section-x)}
.fo-team-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:var(--space-4xl) var(--space-3xl);align-items:start}
.fo-team-photos{position:relative;height:clamp(400px,104vw,560px)}
.fo-team-fig{position:absolute;width:84%;height:47%;margin:0;border-radius:var(--radius-m);overflow:hidden;box-shadow:var(--shadow-raised)}
.fo-team-fig-a{left:0;top:0;transform:rotate(-2.5deg)}
.fo-team-fig-b{right:0;bottom:0;transform:rotate(2deg)}
.fo-team-img{width:100%;height:100%;object-fit:cover}
.fo-team-name{position:absolute;left:var(--space-s);bottom:var(--space-s);padding:6px 12px;border-radius:var(--radius-full);background:var(--white);font-size:var(--text-s);font-weight:700;color:var(--text-heading)}
.fo-ai-note{position:absolute;right:var(--space-s);top:var(--space-s);padding:3px 8px;border-radius:var(--radius-full);background:rgba(13,8,20,.55);font-size:12px;line-height:1.3;color:var(--text-on-dark);pointer-events:none}
.fo-ai-note-inline{position:static;padding:0;border-radius:0;background:none;color:inherit;pointer-events:auto}
.fo-team-copy{display:flex;flex-direction:column;row-gap:var(--space-l)}
.fo-team-title{max-width:20ch}
.fo-team-body{display:flex;flex-direction:column;row-gap:var(--space-m);align-items:flex-start;max-width:56ch;padding-left:0}
.fo-body{margin:0;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body);text-wrap:pretty}
.fo-body-strong{font-weight:700}

/* ---------- Leistungen (Bento) ---------- */
.fo-services{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--space-s);background:var(--surface-grid);border-radius:var(--radius-l);padding:var(--space-s)}
.fo-services-cell{display:grid}
.fo-services-photo{display:none;position:relative;overflow:hidden;border-radius:var(--radius-m)}
.fo-services-photo-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:33% 50%}
.fo-services-wide{grid-column:1 / -1}

.fo-tile{position:relative;overflow:hidden;isolation:isolate;display:grid;grid-template-rows:64px var(--space-3xl) auto 1fr;row-gap:var(--space-s);height:100%;border-radius:var(--radius-m);padding:var(--card-pad);color:var(--white);text-decoration:none;transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s ease}
.fo-tile:hover{color:var(--white);transform:translateY(-4px);box-shadow:var(--shadow-raised)}
.fo-tile-purple{background:var(--service-1)}
.fo-tile-teal{background:var(--blue-d-1)}
.fo-tile-orange{background:linear-gradient(0deg,rgba(5,13,15,.45),rgba(5,13,15,.45)),var(--red)}
.fo-tile-pink{background:var(--service-4)}
.fo-tile-navy{background:var(--service-5)}
.fo-tile-sheen{position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 90% at 88% 8%,rgba(248,248,248,.16),rgba(248,248,248,0) 62%);opacity:0;transition:opacity .45s ease}
.fo-tile-art{position:absolute;right:-40px;bottom:-50px;width:300px;height:300px;pointer-events:none;color:var(--white);opacity:.13;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .45s ease}
.fo-tile-art-float{width:100%;height:100%;animation:fo-tile-float 9s ease-in-out infinite}
.fo-tile-art-svg{width:100%;height:100%}
.fo-tile-ring-row{position:relative;display:flex;justify-content:flex-end}
.fo-tile-ring{width:64px;height:64px;border-radius:var(--radius-full);border:1px solid rgba(248,248,248,.7);background:transparent;color:var(--white);display:flex;align-items:center;justify-content:center;transition:background .3s ease,border-color .3s ease,color .3s ease,transform .42s cubic-bezier(.16,1,.3,1)}
.fo-tile-arrow{transform:rotate(-45deg)}
.fo-tile-title{position:relative;margin:0;min-height:2.3em;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-l);line-height:1.15;letter-spacing:3px;color:var(--white)}
.fo-tile-body{position:relative;margin:0;align-self:start;min-height:4.95em;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--white)}
.fo-tile:hover .fo-tile-sheen{opacity:1}
.fo-tile:hover .fo-tile-art{opacity:.24;transform:translate3d(-26px,-18px,0) rotate(-12deg) scale(1.14)}
.fo-tile:hover .fo-tile-ring{background:var(--white);border-color:var(--white);color:var(--purple);transform:rotate(45deg)}
@keyframes fo-tile-float{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-10px,0)}}

/* ---------- Ablauf (Timeline mit Rakete) ---------- */
.fo-timeline{position:relative;width:100%}
.fo-timeline-track{position:relative;width:100%;padding-bottom:120px;--p:0;--line-x:24px}
.fo-timeline-line{position:absolute;left:var(--line-x);top:12px;bottom:0;width:2px;margin-left:-1px;background:repeating-linear-gradient(180deg,var(--neutral-200) 0 5px,transparent 5px 12px)}
.fo-timeline-fill{position:absolute;left:var(--line-x);top:12px;width:2px;margin-left:-1px;height:calc(var(--p) * 100% - var(--p) * 12px);max-height:calc(100% - 12px);background:var(--blue-d-1)}
.fo-ship{position:absolute;left:var(--line-x);top:calc(12px + var(--p) * 100% - var(--p) * 43px);width:40px;height:62px;margin:-31px 0 0 -20px;opacity:0;z-index:3}
.fo-ship.is-visible{opacity:1}
.fo-ship-flame{position:absolute;left:50%;top:44px;width:12px;height:30px;margin-left:-6px;border-radius:var(--radius-full);background:linear-gradient(180deg,var(--blue),rgba(73,173,195,0));transform-origin:top center;animation:fo-flame-v .5s ease-in-out infinite;transition:opacity .3s ease}
.fo-ship-dust{position:absolute;top:54px;width:30px;height:10px;border-radius:50%;background:rgba(134,200,215,.45);filter:blur(3px);opacity:0;transition:opacity .5s ease}
.fo-ship-dust-l{left:-22px}
.fo-ship-dust-r{right:-22px}
.fo-ship-svg{position:absolute;left:0;top:0;width:40px;height:62px}
.fo-ship.is-landed .fo-ship-flame{opacity:0}
.fo-ship.is-landed .fo-ship-dust{opacity:1}
.fo-steps{position:relative;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;row-gap:var(--space-4xl)}
.fo-step{display:grid;grid-template-columns:48px 1fr;align-items:start;column-gap:var(--space-3xl)}
.fo-step-text{grid-column:2;display:flex;flex-direction:column;row-gap:var(--space-xs);align-items:flex-start;text-align:left;opacity:1;transform:translateY(18px);transition:opacity .5s ease,transform .6s cubic-bezier(.16,1,.3,1)}
.fo-step-num{font-family:var(--font-display);font-weight:400;font-size:var(--text-m);letter-spacing:3px;color:var(--blue-d-1)}
.fo-step-title{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--text-heading);text-wrap:balance}
.fo-step-body{margin:0;max-width:46ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body);text-wrap:pretty}
.fo-step-note{max-width:46ch;font-size:var(--text-s);line-height:1.5;color:var(--text-body)}
.fo-step-dot{grid-column:1;grid-row:1;justify-self:center;position:relative;width:48px;height:48px;border-radius:50%;background:var(--white);box-shadow:inset 0 0 0 1px var(--neutral-200);color:var(--neutral-600);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:400;font-size:var(--text-m);letter-spacing:2px;transition:background .4s ease,color .4s ease,box-shadow .4s ease}
.fo-step.is-reached .fo-step-text{transform:translateY(0)}
/* Noch nicht erreichte Schritte nur leicht gedimmt: Titel und Text bleiben lesbar (WCAG 1.4.3), die Nummer voll */
.fo-step-title,.fo-step-body,.fo-step-note{transition:opacity .5s ease}
.fo-step:not(.is-reached) .fo-step-title,.fo-step:not(.is-reached) .fo-step-body,.fo-step:not(.is-reached) .fo-step-note{opacity:.7}
.fo-step.is-reached .fo-step-dot{background:var(--blue-d-1);color:var(--white);box-shadow:0 0 29px -9px rgba(134,200,215,.9)}
.fo-step.is-active .fo-step-dot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:1px solid var(--blue-d-1);animation:fo-station-ring 2.2s ease-out infinite;pointer-events:none}
.fo-landing{position:relative;height:170px;margin:0 calc(-1 * var(--section-x));overflow:hidden;pointer-events:none;--planet-x:calc(var(--section-x) + 24px);-webkit-mask-image:radial-gradient(ellipse 70% 100% at var(--planet-x) 0%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 70% 100% at var(--planet-x) 0%,#000 45%,transparent 100%)}
.fo-landing-planet{position:absolute;left:var(--planet-x);top:0;width:900px;height:900px;margin-left:-450px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 0%,#86C8D7 0%,#49ADC3 14%,#2f7f91 34%,#1d5a68 60%)}
.fo-crater{position:absolute;border-radius:50%;background:rgba(23,72,84,.5)}
.fo-crater-glow{left:50%;top:0;width:100%;height:18px;margin-left:-50%;background:none;box-shadow:0 -6px 30px 10px rgba(134,200,215,.55)}
@keyframes fo-flame-v{0%,100%{transform:scaleY(.7);opacity:.7}50%{transform:scaleY(1.3);opacity:1}}
@keyframes fo-station-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.6);opacity:0}}

/* ---------- Weltraum-Fenster („Das Feeling …“) ---------- */
.fo-window{position:relative;overflow:hidden;max-width:var(--container-max);margin:0 auto;padding:var(--space-4xl) var(--space-3xl);display:flex;flex-direction:column;row-gap:var(--space-xl);border-radius:var(--radius-xl);color:var(--text-on-dark);background:radial-gradient(110% 85% at 76% 26%,rgba(176,51,80,.34),rgba(176,51,80,0) 58%),radial-gradient(85% 75% at 14% 104%,rgba(73,173,195,.18),rgba(73,173,195,0) 62%),linear-gradient(168deg,#2f1d45 0%,#1b1130 48%,#0d0a18 100%);box-shadow:inset 0 0 70px 14px rgba(5,13,15,.5),inset 0 0 170px 55px rgba(5,13,15,.3),inset 0 70px 130px -90px rgba(248,248,248,.12),0 40px 110px -70px rgba(176,51,80,.45)}
.fo-window-stars{position:absolute;inset:-75% 0;pointer-events:none}
.fo-window-vignette{position:absolute;inset:0;z-index:4;pointer-events:none;border-radius:inherit;background:radial-gradient(132% 112% at 50% 50%,rgba(5,13,15,0) 58%,rgba(5,13,15,.26) 90%,rgba(5,13,15,.42) 100%)}
.fo-window-glass{position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:inherit;background:linear-gradient(108deg,rgba(248,248,248,.08) 0%,rgba(248,248,248,.03) 13%,rgba(248,248,248,0) 26%,rgba(248,248,248,0) 70%,rgba(248,248,248,.035) 82%,rgba(248,248,248,0) 93%)}
.fo-window-grid{position:relative;z-index:6;display:grid;grid-template-columns:1fr;gap:var(--space-2xl) var(--space-3xl);align-items:center}
.fo-window-copy{display:flex;flex-direction:column;row-gap:var(--space-xl);min-width:0}
.fo-window-title{max-width:28ch;color:var(--text-on-dark)}
.fo-window-body{display:flex;flex-direction:column;row-gap:var(--space-m);align-items:flex-start;max-width:72ch}
.fo-body-on-dark{margin:0;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}
.fo-orbit-stage{position:relative;display:grid;place-items:center;min-height:420px;isolation:isolate}
.fo-orbit-inner{position:relative;width:100%;height:420px;display:grid;place-items:center;will-change:transform}
.fo-moon{position:absolute;z-index:1}
.fo-moon-a{width:72px;height:72px;opacity:.55;filter:saturate(.75);animation:fo-moon-a 24s ease-in-out infinite}
.fo-moon-b{width:54px;height:54px;opacity:.62;filter:saturate(.7);animation:fo-moon-b 29s ease-in-out infinite}
.fo-moon-c{width:38px;height:38px;opacity:.45;filter:saturate(.6);animation:fo-moon-c 34s ease-in-out infinite}
.fo-moon-d{width:28px;height:28px;opacity:.5;filter:saturate(.6);animation:fo-moon-d 39s ease-in-out infinite}
.fo-planet-drift{position:absolute;display:grid;place-items:center;animation:fo-planet-drift 9s ease-in-out infinite}
.fo-planet-main{position:relative;width:min(380px,80vw);height:auto;aspect-ratio:1;z-index:2}
.fo-rocket{position:absolute;width:44px;height:44px;z-index:3;animation:fo-orbit 18s linear infinite}
.fo-rocket-svg{display:block;overflow:visible}
.fo-flame-a{transform-origin:22px 41px;animation:fo-flame-a .42s ease-in-out infinite}
.fo-flame-b{transform-origin:22px 41px;animation:fo-flame-b .29s ease-in-out infinite}
@keyframes fo-orbit{
0%{transform:translate(215.0px,0.0px) rotate(180.00deg) scale(0.950);z-index:3}
6.25%{transform:translate(198.6px,22.2px) rotate(236.92deg) scale(1.038);z-index:3}
12.50%{transform:translate(152.0px,41.0px) rotate(254.90deg) scale(1.113);z-index:3}
18.75%{transform:translate(82.3px,53.6px) rotate(263.62deg) scale(1.162);z-index:3}
25%{transform:translate(0.0px,58.0px) rotate(270.00deg) scale(1.180);z-index:3}
31.25%{transform:translate(-82.3px,53.6px) rotate(276.38deg) scale(1.162);z-index:3}
37.50%{transform:translate(-152.0px,41.0px) rotate(285.10deg) scale(1.113);z-index:3}
43.75%{transform:translate(-198.6px,22.2px) rotate(303.08deg) scale(1.038);z-index:3}
49.99%{transform:translate(-215.0px,0.0px) rotate(360.00deg) scale(0.950);z-index:3}
50%{transform:translate(-215.0px,0.0px) rotate(360.00deg) scale(0.950);z-index:0}
56.25%{transform:translate(-198.6px,-22.2px) rotate(416.92deg) scale(0.862);z-index:0}
62.50%{transform:translate(-152.0px,-41.0px) rotate(434.90deg) scale(0.787);z-index:0}
68.75%{transform:translate(-82.3px,-53.6px) rotate(443.62deg) scale(0.738);z-index:0}
75%{transform:translate(-0.0px,-58.0px) rotate(450.00deg) scale(0.720);z-index:0}
81.25%{transform:translate(82.3px,-53.6px) rotate(456.38deg) scale(0.738);z-index:0}
87.50%{transform:translate(152.0px,-41.0px) rotate(465.10deg) scale(0.787);z-index:0}
93.75%{transform:translate(198.6px,-22.2px) rotate(483.08deg) scale(0.862);z-index:0}
99.99%{transform:translate(215.0px,-0.0px) rotate(540.00deg) scale(0.950);z-index:0}
100%{transform:translate(215.0px,-0.0px) rotate(540.00deg) scale(0.950);z-index:3}}
@keyframes fo-flame-a{0%,100%{transform:scaleY(1) scaleX(1);opacity:.95}25%{transform:scaleY(1.42) scaleX(.9);opacity:.8}50%{transform:scaleY(.78) scaleX(1.08);opacity:1}75%{transform:scaleY(1.2) scaleX(.95);opacity:.85}}
@keyframes fo-flame-b{0%,100%{transform:scaleY(.9) scaleX(1.05);opacity:.9}30%{transform:scaleY(1.3) scaleX(.92);opacity:1}60%{transform:scaleY(.7) scaleX(1.1);opacity:.75}}
@keyframes fo-planet-drift{0%,100%{transform:translateY(-11px)}50%{transform:translateY(11px)}}
@keyframes fo-moon-a{0%,100%{transform:translate(-202px,-150px)}50%{transform:translate(-197px,-157px)}}
@keyframes fo-moon-b{0%,100%{transform:translate(190px,140px)}50%{transform:translate(185px,133px)}}
@keyframes fo-moon-c{0%,100%{transform:translate(192px,-170px)}50%{transform:translate(197px,-164px)}}
@keyframes fo-moon-d{0%,100%{transform:translate(-170px,160px)}50%{transform:translate(-165px,154px)}}

/* ---------- Warum FilmOrbit (Akkordeon-Paneele) ---------- */
.fo-why{display:flex;flex-direction:column;gap:var(--space-s);width:100%}
.fo-why-panel{position:relative;overflow:hidden;flex:0 0 auto;min-width:0;min-height:0;display:flex;flex-direction:column;justify-content:space-between;gap:var(--space-m);padding:var(--space-l);border:none;border-radius:var(--radius-l);font:inherit;text-align:left;color:#fff;cursor:pointer;transition:flex .6s cubic-bezier(.16,1,.3,1),box-shadow .3s ease}
.fo-why-purple{background:var(--service-1)}
.fo-why-teal{background:var(--blue-d-1)}
.fo-why-pink{background:var(--service-4)}
.fo-why-violet{background:var(--purple)}
.fo-why-orb{position:absolute;right:-80px;top:-80px;width:260px;height:260px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none}
.fo-why-num{position:absolute;right:24px;top:20px;font-family:var(--font-display);font-size:40px;line-height:1;letter-spacing:2px;color:rgba(255,255,255,.2);transition:font-size .5s ease;pointer-events:none}
.fo-why-icon{position:relative;flex:none;width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(248,248,248,.5);display:flex;align-items:center;justify-content:center}
.fo-why-text{position:relative;display:flex;flex-direction:column;row-gap:var(--space-s);max-width:480px}
.fo-why-label{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;text-transform:uppercase;color:#fff;text-wrap:balance}
.fo-why-short{display:none}
.fo-why-body{font-size:var(--text-m);line-height:var(--body-md-lh);color:#fff;text-wrap:pretty;opacity:0;max-height:0;overflow:hidden;transition:opacity .4s ease .2s}
.fo-why-panel.is-active{box-shadow:0 24px 50px -28px rgba(5,13,15,.55)}
.fo-why-panel.is-active .fo-why-num{font-size:clamp(64px,7vw,96px)}
.fo-why-panel.is-active .fo-why-body{opacity:1;max-height:220px}

/* ---------- Kundenlogos (Laufband) ---------- */
.fo-clients-title{text-align:center;max-width:24ch;margin-inline:auto}
.fo-marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.fo-marquee-track{display:flex;width:max-content;align-items:center;will-change:transform}
.fo-marquee-track > *{margin-right:var(--space-3xl)}
.fo-client-logo{height:46px;width:auto;flex:none}

/* ---------- CTA-Band ---------- */
.fo-cta{padding:0 var(--section-x) var(--section-gap)}
.fo-cta-box{position:relative;overflow:hidden;max-width:var(--container-max);margin:0 auto;padding:var(--space-4xl) var(--space-3xl);padding-right:clamp(120px,25vw,320px);border-radius:var(--radius-xl);background:var(--gradient-space);color:var(--text-on-dark)}
.fo-cta-stars{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:inherit}
.fo-cta-planet{position:absolute;right:clamp(14px,4vw,60px);top:50%;transform:translateY(-50%);width:clamp(92px,17vw,230px);pointer-events:none}
.fo-cta-planet-img{width:100%;height:auto;opacity:.95;animation:fo-float 9s ease-in-out infinite}
.fo-cta-copy{position:relative;max-width:60ch;display:flex;flex-direction:column;row-gap:var(--space-m);align-items:flex-start}
.fo-cta-kicker{font-weight:600;font-size:var(--text-m);color:var(--text-on-dark)}
.fo-cta-title{color:var(--text-on-dark);text-wrap:balance}
.fo-cta-ctas{display:flex;flex-wrap:wrap;gap:var(--space-s);margin-top:var(--space-xs)}
@keyframes fo-float{0%,100%{transform:translateY(-12px)}50%{transform:translateY(12px)}}

/* ---------- Footer ---------- */
.fo-footer{background:var(--surface-deep);color:var(--text-on-dark);padding:var(--space-4xl) var(--section-x) var(--space-xl)}
.fo-footer-grid{display:grid;grid-template-columns:1fr;gap:var(--space-2xl)}
@media (min-width:600px) and (max-width:939.98px){.fo-footer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.fo-footer-col{display:flex;flex-direction:column;gap:var(--space-s);align-items:flex-start}
.fo-footer-logo{height:34px;width:auto}
.fo-footer-claim{margin:0;font-size:var(--text-s);line-height:1.6;color:var(--text-on-dark-muted)}
.fo-footer-cta{margin-top:var(--space-2xs)}
.fo-footer-head{font-family:var(--font-display);text-transform:uppercase;font-size:var(--text-m);letter-spacing:2px;color:var(--text-on-dark)}
.fo-footer-link{font-size:var(--text-s);color:var(--text-on-dark-muted);text-decoration:none}
.fo-footer-link:hover{color:var(--white)}
.fo-footer-address{font-size:var(--text-s);line-height:1.7;color:var(--text-on-dark-muted)}
.fo-footer-mail{color:var(--blue-l-1);text-decoration:none}
.fo-footer-social{display:flex;gap:var(--space-s)}
.fo-footer-legal{margin-top:var(--space-2xl);padding-top:var(--space-m);border-top:1px solid var(--border-on-dark);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-xs) var(--space-l);font-size:var(--text-s);color:var(--text-on-dark-muted)}
.fo-footer-motion{min-height:44px;padding:0;border:none;background:none;font:inherit;color:var(--text-on-dark);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.fo-footer-motion:hover{color:var(--blue-l-1)}

/* ---------- Unterseiten: Hero-Variante ---------- */
.fo-hero-sub{min-height:clamp(840px,calc(840px + (1400px - 100vw) * .1),900px);padding:150px var(--section-x) var(--space-3xl)}

/* Geteilter Hero: Text links, Grafik rechts (ab 900px). Darunter zentriert ohne Grafik. */
.fo-hero-inner-split{display:grid;grid-template-columns:1fr;column-gap:64px;align-items:center}
.fo-hero-art{display:none;position:relative;align-self:stretch;min-height:420px;margin-bottom:calc(-1 * var(--space-3xl))}
.fo-hero-art-stage{position:absolute;left:0;right:0;top:50%;height:520px;margin-top:-270px}
.fo-hide-below-1120,.fo-hide-below-1320{display:none}
@keyframes fo-ph-bob{0%,100%{transform:rotate(var(--r)) translateY(-5px)}50%{transform:rotate(var(--r)) translateY(5px)}}
@keyframes fo-ph-rec{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes fo-ph-dash{to{stroke-dashoffset:-240}}
@media (min-width:900px){
  .fo-hero-split{text-align:left}
  .fo-hero-inner-split{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .fo-hero-split .fo-hero-text{max-width:640px;margin:0;align-items:flex-start}
  .fo-hero-split .fo-hero-ctas{justify-content:flex-start}
  .fo-hero-art{display:block}
}
@media (min-width:1120px){
  .fo-hide-below-1120{display:block}
  .fo-hero-art-shift{transform:translateX(-70px)}
}
@media (min-width:1320px){.fo-hide-below-1320{display:block}}

/* ---------- Unterseiten: Abschnitte ---------- */
.fo-section-tight{padding:0 var(--section-x) var(--section-gap)}
.fo-closing{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center}
.fo-lead-60{max-width:60ch}
.fo-h3{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--text-heading)}
.fo-link-strong{color:var(--text-link);font-weight:700}

/* ---------- FAQ ---------- */
.fo-faq-section{padding:var(--space-4xl) var(--section-x)}
.fo-faq{width:100%;max-width:860px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-s)}
.fo-faq-item{background:var(--surface-raised);border-radius:var(--radius-m);overflow:hidden}
.fo-faq-q{width:100%;min-height:56px;padding:var(--space-m) var(--space-l);border:none;background:transparent;font:inherit;font-size:var(--text-m);font-weight:700;text-align:left;color:var(--text-heading);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:var(--space-m)}
.fo-faq-a{margin:0;padding:0 var(--space-l) var(--space-l);font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body)}
.fo-faq-a[hidden]{display:none}
.fo-faq-item[hidden]{display:none}
/* FAQ-Variante mit Trennlinien und Plus-Symbol (Leistungsseiten): .fo-faq-wrap > h2 + .fo-faq.fo-faq-lines + .fo-faq-more */
.fo-faq-wrap{max-width:800px;margin:0 auto;display:flex;flex-direction:column;row-gap:var(--space-xl)}
.fo-faq-lines{gap:0;max-width:none}
.fo-faq-lines .fo-faq-item{background:none;border-radius:0;overflow:visible;border-top:1px solid var(--neutral-200)}
.fo-faq-lines .fo-faq-item:first-child{border-top:none}
.fo-faq-lines .fo-faq-q{min-height:60px;padding:var(--space-m) 0;display:flex;align-items:center;justify-content:space-between;gap:var(--space-m)}
.fo-faq-lines .fo-faq-a{padding:0 0 var(--space-l);max-width:68ch;text-wrap:pretty}
.fo-faq-icon{flex:none;width:20px;height:20px;position:relative;transition:transform .28s var(--ease-out);color:var(--blue-d-1)}
.fo-faq-icon::before,.fo-faq-icon::after{content:"";position:absolute;background:currentColor}
.fo-faq-icon::before{left:0;top:9px;width:20px;height:2px}
.fo-faq-icon::after{left:9px;top:0;width:2px;height:20px}
.fo-faq-q[aria-expanded="true"] .fo-faq-icon{transform:rotate(45deg)}
.fo-faq-more{align-self:center;min-height:48px;padding:0 24px;border-radius:999px;border:none;background:transparent;box-shadow:inset 0 0 0 1.5px var(--text-heading);font:inherit;font-size:var(--text-s);font-weight:700;color:var(--text-heading);cursor:pointer}
.fo-faq-more:hover{background:rgba(5,13,15,.06)}
.fo-faq-more[hidden]{display:none}

/* ---------- Kontakt ---------- */
.fo-contact{padding:var(--section-gap) var(--section-x)}
.fo-contact-wrap{max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;row-gap:var(--space-3xl)}
.fo-contact-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3xl);align-items:start}
.fo-contact-card{scroll-margin-top:110px;display:flex;flex-direction:column;row-gap:var(--space-l);background:var(--surface-raised);border-radius:var(--radius-l);padding:var(--space-2xl)}
.fo-contact-card-head{display:flex;flex-direction:column;row-gap:var(--space-s)}
.fo-booking{min-height:600px;border-radius:var(--radius-m);overflow:hidden}
.fo-booking iframe{transition:height .4s var(--ease-out)}
.fo-socials{display:flex;flex-wrap:wrap;gap:var(--space-2xs)}
/* Kontakt: Infoleiste unter Kalender und Formular, überall gleiche Schriftgrößen */
.fo-contact-info{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--grid-gap)}
.fo-contact-facts{display:flex;flex-direction:column;align-items:flex-start;row-gap:var(--space-s);padding:var(--space-l);border-radius:var(--radius-l);background:var(--surface-raised);box-shadow:inset 0 0 0 2px var(--neutral-200)}
.fo-contact-label{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;letter-spacing:3px;font-size:var(--text-l);line-height:1.1;color:var(--text-heading)}
.fo-contact-note{margin:0;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body)}
.fo-contact-phone{font-weight:700;color:var(--text-heading);text-decoration:none;white-space:nowrap}
.fo-contact-phone:hover{color:var(--text-link)}
.fo-contact-facts-notice{box-shadow:inset 0 0 0 2px var(--blue-l-1)}
.fo-contact-alert{margin:0;display:flex;align-items:flex-start;gap:var(--space-s);font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body)}
.fo-contact-alert svg{flex:none;margin-top:2px;color:var(--blue-d-1)}
.fo-contact-alert strong{color:var(--text-heading)}
/* Formular */
.fo-form{display:flex;flex-direction:column;row-gap:var(--space-m)}
.fo-form-row{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-m)}
.fo-field{display:flex;flex-direction:column;row-gap:6px}
.fo-field-label{font-size:var(--text-s);font-weight:700;color:var(--text-heading)}
.fo-input{width:100%;min-height:52px;padding:12px 16px;border:1px solid var(--border-strong);border-radius:var(--radius-m);background:var(--surface-page);font:inherit;font-size:var(--text-m);color:var(--text-heading);transition:border-color .2s,box-shadow .2s}
.fo-input:hover{border-color:var(--neutral-400)}
.fo-input:focus{outline:none;border-color:var(--blue-d-1);box-shadow:0 0 0 3px rgba(73,173,195,.25)}
.fo-textarea{min-height:150px;resize:vertical;line-height:1.5}
.fo-form-note{margin:0;font-size:var(--text-s);line-height:1.5;color:var(--text-body)}
.fo-form-submit{align-self:flex-start}
.fo-form-message{margin:0;padding:var(--space-s) var(--space-m);border-radius:var(--radius-m);background:var(--surface-sunken);font-size:var(--text-m);font-weight:700;color:var(--text-heading)}
.fo-social{width:48px;height:48px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);background:var(--surface-raised);color:var(--text-heading);box-shadow:inset 0 0 0 1px var(--border-subtle);transition:background .25s ease,color .25s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.fo-social:hover{background:var(--blue-d-1);color:var(--white);transform:translateY(-2px)}

/* ---------- Blog-Übersicht ---------- */
.fo-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-2xs)}
.fo-chip{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--radius-full);background:var(--surface-sunken);color:var(--text-body);font-size:var(--text-s);font-weight:500;text-decoration:none;transition:background .2s}
.fo-chip:hover{background:var(--neutral-200)}
.fo-chip-active,.fo-chip-active:hover{background:var(--blue-d-1);color:var(--white);font-weight:700}
.fo-blog{padding-top:var(--space-4xl)}
.fo-blog-note{margin:0;font-size:var(--text-m);color:var(--text-body);text-align:center}
/* Beitragskarten: helle Karte mit feinem Rahmen, Bild innen, Kategorie, Titel, Kurztext, Lesezeit.
   Der Titel-Link spannt sich über die ganze Karte. */
.fo-posts{display:grid;grid-template-columns:1fr;gap:var(--grid-gap)}
.fo-post{position:relative;display:flex;flex-direction:column;row-gap:var(--space-m);padding:10px;border:1px solid var(--neutral-200);border-radius:var(--radius-l);background:var(--surface-raised);transition:border-color .2s}
.fo-post:hover{border-color:var(--neutral-300)}
.fo-post-media{overflow:hidden;border-radius:calc(var(--radius-l) - 6px);background:var(--surface-sunken)}
.fo-post-img{width:100%;aspect-ratio:16 / 10;object-fit:cover;display:block;transition:transform .5s var(--ease-out)}
.fo-post:hover .fo-post-img{transform:scale(1.03)}
.fo-post-body{flex:1;display:flex;flex-direction:column;row-gap:var(--space-2xs);padding:0 var(--space-s) var(--space-s)}
.fo-post-cat{margin:0;font-size:var(--text-s);font-weight:600;color:var(--blue-d-1)}
.fo-post-title{margin:0;font-family:var(--font-body);text-transform:none;letter-spacing:0;font-size:var(--text-l);font-weight:700;line-height:1.3;color:var(--text-heading);text-wrap:balance;transition:color .2s}
.fo-post:hover .fo-post-title{color:var(--blue-d-1)}
.fo-post-link{color:inherit;text-decoration:none}
.fo-post-link::after{content:"";position:absolute;inset:0;z-index:1}
.fo-post-link:focus-visible{outline:none}
.fo-post:has(.fo-post-link:focus-visible){outline:2px solid var(--blue-d-1);outline-offset:3px}
.fo-post-text{margin:0;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.fo-post-meta{margin:auto 0 0;padding-top:var(--space-xs);font-size:var(--text-s);color:var(--text-body)}
.fo-post-kicker{margin:0;font-size:var(--text-s);font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--text-heading)}
.fo-post-featured .fo-post-title{font-size:var(--text-xl);line-height:1.2}
.fo-post-cta{position:relative;z-index:2;align-self:flex-start;margin-top:var(--space-s)}
@media (min-width:640px){.fo-posts{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:940px){
  .fo-posts{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fo-post-featured{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;column-gap:var(--space-xl)}
  .fo-post-featured .fo-post-img{aspect-ratio:16 / 10}
  .fo-post-featured .fo-post-body{padding:var(--space-xl) var(--space-xl) var(--space-xl) 0;row-gap:var(--space-xs)}
  .fo-post-featured .fo-post-meta{margin-top:var(--space-xs)}
}
/* Blogbeitrag: heller Kopf, Lesespalte, links Zurück + Teilen, rechts Inhaltsverzeichnis */
.fo-hero-compact{min-height:0;padding-bottom:var(--space-4xl)}
.fo-breadcrumb{display:flex;gap:8px;font-size:var(--text-s);font-weight:600;color:var(--text-on-dark)}
.fo-breadcrumb a{color:var(--blue-l-1);text-decoration:none}
.fo-breadcrumb a:hover{text-decoration:underline}
.fo-article-title{font-size:var(--text-3xl)}
.fo-article-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin-top:var(--space-xs);font-size:var(--text-s);color:var(--text-on-dark)}
.fo-article-author-img{width:44px;height:44px;border-radius:50%;object-fit:cover}
.fo-article-meta-sep{opacity:.6}
.fo-article{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-3xl)}
.fo-article-cover{width:100%;max-width:1040px;margin:calc(var(--space-3xl) * -1) 0 0;position:relative;z-index:1}
.fo-article-cover img{width:100%;height:auto;aspect-ratio:16 / 9;object-fit:cover;display:block;border-radius:var(--radius-xl);box-shadow:0 30px 60px -36px rgba(13,8,20,.6)}
.fo-article-content{width:100%;max-width:68ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body)}
.fo-article-content > * + *{margin-top:var(--space-m)}
.fo-article-content p,.fo-article-content ul,.fo-article-content ol,.fo-article-content figure,.fo-article-content blockquote{margin-bottom:0}
.fo-article-content h2{margin:var(--space-2xl) 0 0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--text-heading);text-wrap:balance}
.fo-article-content h3{margin:var(--space-xl) 0 0;font-size:var(--text-l);font-weight:700;line-height:1.3;color:var(--text-heading)}
.fo-article-content h2 + *,.fo-article-content h3 + *{margin-top:var(--space-s)}
.fo-article-content strong{font-weight:700}
.fo-article-content a{color:var(--text-link);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.fo-article-content ul,.fo-article-content ol{padding-left:1.3em}
.fo-article-content li + li{margin-top:var(--space-2xs)}
.fo-article-content li::marker{color:var(--blue-d-1);font-weight:700}
.fo-article-content blockquote{margin-left:0;margin-right:0;padding:var(--space-s) 0 var(--space-s) var(--space-l);border-left:3px solid var(--blue-d-1)}
.fo-article-content blockquote p{margin:0;font-size:var(--text-l);font-weight:600;line-height:1.45;color:var(--text-heading)}
.fo-article-content blockquote footer{margin-top:var(--space-2xs);font-size:var(--text-s);color:var(--text-body)}
.fo-article-content figure{margin-left:0;margin-right:0}
.fo-article-content figure img{width:100%;height:auto;aspect-ratio:3 / 2;object-fit:cover;display:block;border-radius:var(--radius-l)}
.fo-article-content figcaption{margin-top:var(--space-2xs);font-size:var(--text-s);color:var(--text-body)}
.fo-article-table{overflow-x:auto;-webkit-overflow-scrolling:touch}
.fo-article-content table{width:100%;min-width:480px;border-collapse:collapse;font-size:var(--text-s)}
.fo-article-content th,.fo-article-content td{padding:var(--space-xs) var(--space-s);text-align:left;border-bottom:1px solid var(--neutral-200)}
.fo-article-content th{font-weight:700;color:var(--text-heading);background:var(--surface-sunken)}
.fo-article-note{padding:var(--space-l);border-radius:var(--radius-l);background:var(--surface-sunken)}
.fo-article-note p{margin:0}
.fo-article-cta{width:100%;max-width:calc(68ch + var(--space-2xl) * 2);display:flex;flex-direction:column;row-gap:var(--space-s);padding:var(--space-2xl);border-radius:var(--radius-xl);background:var(--surface-sunken)}
.fo-article-cta-title{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--text-heading);text-wrap:balance}
.fo-article-cta .fo-actions{margin-top:var(--space-xs)}
.fo-article-author{width:100%;max-width:68ch;display:flex;align-items:flex-start;gap:var(--space-l);padding-top:var(--space-xl);border-top:1px solid var(--neutral-200)}
.fo-article-author-media{flex:none}
.fo-article-author-media img{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block}
.fo-article-author-name{margin:0 0 var(--space-2xs);font-weight:700;font-size:var(--text-l);color:var(--text-heading)}
.fo-article-author-note{margin:var(--space-2xs) 0 0;font-size:var(--text-s);color:var(--text-body)}
/* Lesefortschritt: kleine Pille, schwebt unten mittig ein */
.fo-read-progress{position:fixed;left:50%;bottom:24px;z-index:280;display:flex;align-items:center;gap:12px;padding:10px 16px;border-radius:var(--radius-full);background:rgba(13,8,20,.84);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--white);font-size:var(--text-s);font-weight:700;line-height:1;box-shadow:0 12px 30px -16px rgba(13,8,20,.7);opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .3s,transform .3s var(--ease-out)}
.fo-read-progress.is-visible{opacity:1;transform:translate(-50%,0)}
.fo-read-progress-track{width:140px;height:4px;border-radius:var(--radius-full);background:rgba(248,248,248,.2);overflow:hidden}
.fo-read-progress-bar{display:block;height:100%;background:linear-gradient(90deg,var(--blue-l-1),#fff);transform:scaleX(0);transform-origin:left center}
.fo-read-progress-value{min-width:3.4em;text-align:right;font-variant-numeric:tabular-nums}
@media (max-width:599px){
  /* Handy: alle Buttons volle Inhaltsbreite, damit sie gleich groß sind */
  .fo-btn{display:flex;width:100%;justify-content:center;text-align:center}
  .fo-hero-ctas,.fo-cta-ctas{align-self:stretch;width:100%}
  .fo-photos{margin-top:0}
  .fo-article-cta{padding:var(--space-xl) var(--space-l)}
  .fo-contact-card{padding:var(--space-xl) var(--space-m)}
  .fo-article-author{flex-direction:column}
}

/* ---------- Rechtstexte ---------- */
.fo-legal{padding:var(--space-4xl) var(--section-x) var(--section-gap)}
.fo-legal-body{max-width:75ch;margin:0 auto;display:flex;flex-direction:column;row-gap:var(--space-m);font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body)}
.fo-legal-body p{margin:0}
.fo-legal-groups{row-gap:var(--space-2xl)}
.fo-legal-group{display:flex;flex-direction:column;row-gap:var(--space-m)}
.fo-legal-h2{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);letter-spacing:3px;color:var(--text-heading)}
.fo-legal-gap{margin-top:var(--space-xl)}
.fo-legal-h3{margin:var(--space-l) 0 0;font-size:var(--text-l);font-weight:700;color:var(--text-heading)}
.fo-legal-h4{margin:var(--space-s) 0 0;font-size:var(--text-m);font-weight:700;color:var(--text-heading)}
.fo-legal-list{margin:0;padding-left:1.4em;display:flex;flex-direction:column;row-gap:var(--space-2xs)}
.fo-legal-url{overflow-wrap:anywhere;text-decoration:underline;text-underline-offset:3px}
.fo-legal-meta{font-size:var(--text-s);color:var(--text-muted)}
.fo-clause{display:grid;grid-template-columns:4.6em 1fr;column-gap:var(--space-s)}
.fo-clause-sub{padding-left:var(--space-l)}
.fo-clause > *{min-width:0;overflow-wrap:break-word;hyphens:auto}
.fo-clause-num{font-weight:700;color:var(--text-heading);font-variant-numeric:tabular-nums}

/* ---------- Startseite: Leistungen-Hinweis, Marketing-Check ---------- */
.fo-services-note{grid-column:1 / -1;display:flex;flex-direction:column;align-items:center;row-gap:var(--space-s);padding:var(--space-l);border-radius:var(--radius-m);background:var(--gradient-hero);text-align:center}
.fo-services-note-text{margin:0;font-size:var(--text-m);line-height:1.45;color:var(--text-on-dark);text-wrap:balance}
.fo-services-note-text strong{color:var(--text-on-dark)}
.fo-services-note .fo-btn{flex:none;white-space:nowrap}
.fo-check{position:relative;overflow:hidden;max-width:var(--container-max);margin:0 auto;padding:var(--space-3xl) var(--space-l);border-radius:var(--radius-xl);color:var(--text-on-dark);background:radial-gradient(70% 90% at 100% 0%,rgba(73,173,195,.22),rgba(73,173,195,0) 60%),var(--gradient-hero);box-shadow:0 40px 110px -70px rgba(176,51,80,.6)}
.fo-check-stars{position:absolute;inset:0;pointer-events:none;opacity:.7}
.fo-check-grid{position:relative;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2xl);align-items:center}
.fo-check-copy{display:flex;flex-direction:column;align-items:flex-start;row-gap:var(--space-m)}
.fo-check-kicker{font-weight:600;font-size:var(--text-m);color:var(--text-on-dark)}
.fo-check-title{color:var(--text-on-dark);text-wrap:balance}
.fo-check-text{margin:0;max-width:56ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark)}
.fo-check-facts{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:var(--space-xs)}
.fo-check-facts li{padding:6px 14px;border-radius:var(--radius-full);font-size:var(--text-s);font-weight:700;color:var(--text-on-dark);background:rgba(248,248,248,.12);box-shadow:inset 0 0 0 1px rgba(248,248,248,.28)}
.fo-check-ctas{display:flex;flex-wrap:wrap;gap:var(--space-s);margin-top:var(--space-xs)}
.fo-check-mail{margin:0;max-width:52ch;font-size:var(--text-s);line-height:1.6;color:var(--text-on-dark)}
.fo-check-card{display:flex;flex-direction:column;row-gap:var(--space-m);padding:var(--space-xl) var(--space-l);border-radius:var(--radius-l);background:var(--surface-raised);color:var(--text-body);box-shadow:0 30px 60px -30px rgba(13,8,20,.55)}
.fo-check-card-title{font-size:var(--text-l);line-height:1.1}
.fo-check-steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;row-gap:var(--space-m);counter-reset:fo-check;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body)}
.fo-check-steps li{position:relative;padding-left:3em}
.fo-check-steps li::before{counter-increment:fo-check;content:counter(fo-check);position:absolute;left:0;top:-.1em;width:2em;height:2em;border-radius:50%;display:grid;place-items:center;font-family:var(--font-display);font-size:1em;color:var(--text-on-dark);background:linear-gradient(150deg,#b03350,#28183b)}
.fo-check-steps li:not(:last-child)::after{content:"";position:absolute;left:1em;top:2.1em;bottom:calc(-1 * var(--space-m) + .2em);width:2px;margin-left:-1px;background:var(--border-subtle)}

/* ---------- Startseite: Engagement in Dorsten ---------- */
.fo-local{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2xl);align-items:center}
.fo-local-copy{display:flex;flex-direction:column;align-items:flex-start;row-gap:var(--space-m)}
.fo-local-logos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-l) var(--space-xl);margin:var(--space-xs) 0}
.fo-local-logo{height:64px;width:auto;display:block}
.fo-local-img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:var(--radius-l);display:block}

/* ---------- Mobil (< 940px) ---------- */
@media (max-width:939.98px){
  html{scroll-padding-top:90px}
  .fo-header{display:none}
  .fo-mheader{display:block}
  /* Hero: Inhalt mittig im sichtbaren Bereich unter der Kopfleiste */
  .fo-hero,.fo-hero-sub{min-height:100svh;padding-top:calc(78px + var(--space-xl));padding-bottom:var(--space-xl)}
  .fo-hero.fo-hero-compact{min-height:0;padding-bottom:var(--space-3xl)}
  .fo-read-progress{bottom:calc(16px + env(safe-area-inset-bottom))}
  .fo-hero-title{font-size:min(var(--text-4xl),12vw)}
  .fo-check{padding:var(--space-2xl) var(--space-m);border-radius:var(--radius-l)}
  .fo-check-card{padding:var(--space-l) var(--space-m)}
  .fo-local-logos{gap:var(--space-s) var(--space-m)}
  .fo-local-logo{height:40px}
  .fo-cta-box{padding:calc(var(--space-2xl) + 72px) var(--space-l) var(--space-2xl)}
  .fo-cta-planet{top:var(--space-l);right:var(--space-l);width:84px;transform:none}
}

/* ---------- Desktop (≥ 940px) ---------- */
@media (min-width:940px){
  .fo-photos-grid{grid-template-columns:1.7fr 1fr 1.25fr .85fr}
  .fo-team-grid{grid-template-columns:.9fr 1.1fr}
  .fo-team-photos{height:clamp(460px,46vw,620px)}
  .fo-team-fig{width:78%;height:56%}
  .fo-team-body{padding-left:var(--space-3xl)}
  .fo-check{padding:var(--space-4xl) var(--space-3xl)}
  .fo-check-grid{grid-template-columns:1.1fr .9fr;gap:var(--space-3xl)}
  .fo-local{grid-template-columns:1fr 1fr;gap:var(--space-3xl)}
  .fo-check-card{padding:var(--space-2xl)}
  .fo-services{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(2,minmax(240px,auto));grid-auto-rows:auto}
  .fo-services-photo{display:block}
  .fo-services-note{flex-direction:row;justify-content:space-between;column-gap:var(--space-xl);padding:var(--space-l) var(--card-pad);text-align:left}
  .fo-services-wide{grid-column:auto}
  .fo-span-1-3{grid-column:1 / 3}
  .fo-span-3-4{grid-column:3 / 4}
  .fo-span-4-5{grid-column:4 / 5}
  .fo-span-1-2{grid-column:1 / 2}
  .fo-span-2-4{grid-column:2 / 4}
  .fo-timeline-track{padding-bottom:160px;--line-x:50%}
  .fo-step{grid-template-columns:1fr 48px 1fr}
  .fo-step-dot{grid-column:2}
  .fo-step-left .fo-step-text{grid-column:1;align-items:flex-end;text-align:right}
  .fo-step-right .fo-step-text{grid-column:3}
  .fo-landing{height:240px;--planet-x:50%;-webkit-mask-image:radial-gradient(ellipse 42% 100% at 50% 0%,#000 45%,transparent 100%);mask-image:radial-gradient(ellipse 42% 100% at 50% 0%,#000 45%,transparent 100%)}
  .fo-landing-planet{width:1500px;height:1500px;margin-left:-750px}
  .fo-window-grid{grid-template-columns:minmax(0,1fr) 500px}
  .fo-orbit-stage{min-height:520px}
  .fo-orbit-inner{height:520px}
  .fo-footer-grid{grid-template-columns:1.4fr 1fr 1fr .9fr 1.2fr}
  .fo-contact-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-contact-info{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}
  .fo-form-row{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Warum-Paneele werden ab 900px zum horizontalen Akkordeon (wie im Prototyp) */
@media (min-width:900px){
  .fo-why{flex-direction:row;height:480px}
  .fo-why-panel{flex:1 1 0;padding:var(--space-2xl) var(--space-xl)}
  .fo-why-panel.is-active{flex:4 1 0}
  .fo-why-panel:not(.is-active) .fo-why-label{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap}
  .fo-why-panel:not(.is-active) .fo-why-full{display:none}
  .fo-why-panel:not(.is-active) .fo-why-short{display:inline}
}

@media (prefers-reduced-motion:reduce){
  .fo-btn-primary::after{animation:none}
  .fo-btn::before{display:none}
  .fo-faq-icon,.fo-post-img,.fo-read-progress{transition:none}
  .fo-post:hover .fo-post-img{transform:none}
  .fo-rocket,.fo-planet-drift,.fo-hero-logos-track,.fo-tile-art-float,.fo-cta-planet-img,.fo-star,.fo-shoot{animation:none !important}
}


/* src/styles/fo-pages.css */
/* ===== css/pages/ansatz.css ===== */
/* FilmOrbit — Seite „Unser Ansatz“ (/ansatz/)
   Umbrüche wie im Prototyp: 900px (wide) und 1120px (wide3). */

/* ---------- Allgemein ---------- */
.fo-ansatz-on-dark{color:var(--text-on-dark)}
.fo-ansatz-col{display:flex;flex-direction:column;row-gap:var(--space-m)}
.fo-ansatz-col-start{align-items:flex-start}
.fo-ansatz-small{font-size:var(--text-s);color:var(--text-body)}
.fo-ansatz-link{color:var(--blue-d-1);font-weight:700}
.fo-ansatz-link:hover{color:var(--blue-d-2)}

/* ---------- KI ---------- */
.fo-ansatz-first{padding:calc(var(--space-5xl) * 1.15) var(--section-x) var(--section-gap)}
.fo-ansatz-ki-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3xl) 64px;align-items:center}
.fo-ansatz-ki-copy{max-width:680px}
.fo-ansatz-ki-card{background:var(--surface-card);border-radius:var(--radius-l);box-shadow:var(--shadow-raised);padding:var(--space-xl);display:flex;flex-direction:column;row-gap:var(--space-l)}
.fo-ansatz-ki-group{display:flex;flex-direction:column;row-gap:var(--space-xs)}
.fo-ansatz-ki-label{font-weight:700;font-size:var(--text-m);color:var(--text-heading)}
.fo-ansatz-chips{display:flex;flex-wrap:wrap;gap:6px}
.fo-ansatz-chip-do{font-weight:600;font-size:var(--text-s);color:#fff;background:var(--blue-d-1);border-radius:999px;padding:6px 12px}
.fo-ansatz-chip-dont{font-weight:600;font-size:var(--text-s);color:var(--text-body);background:var(--surface-sunken);border-radius:999px;padding:6px 12px;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.fo-ansatz-rules{display:flex;flex-direction:column;border-top:1px solid var(--neutral-200)}
.fo-ansatz-rule{display:flex;align-items:center;gap:var(--space-s);padding:var(--space-s) 0;border-top:1px solid var(--neutral-200)}
.fo-ansatz-rule:first-child{border-top:none}
.fo-ansatz-rule-icon{flex:none;width:40px;height:40px;border-radius:50%;background:var(--surface-sunken);display:flex;align-items:center;justify-content:center;color:var(--blue-d-1)}
.fo-ansatz-rule-title{font-weight:600;font-size:var(--text-m);color:var(--text-body)}

/* ---------- Kein Geschmacksurteil ---------- */
.fo-ansatz-taste{display:grid;grid-template-columns:1fr;gap:var(--space-l);align-items:stretch}
.fo-ansatz-taste-chat{background:var(--surface-sunken);border-radius:var(--radius-l);padding:var(--space-2xl) var(--space-xl);display:flex;flex-direction:column;row-gap:var(--space-m)}
.fo-ansatz-taste-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--space-s);flex-wrap:wrap}
.fo-ansatz-taste-title{font-weight:700;font-size:var(--text-l);color:var(--text-body)}
.fo-ansatz-msg{display:flex;align-items:flex-end;gap:var(--space-xs);flex-direction:row}
.fo-ansatz-msg-right{flex-direction:row-reverse}
.fo-ansatz-avatar{flex:none;width:38px;height:38px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:12px}
.fo-ansatz-avatar-violet{background:var(--purple)}
.fo-ansatz-avatar-purple{background:var(--service-1)}
.fo-ansatz-avatar-teal{background:var(--blue-d-1)}
.fo-ansatz-bubble{max-width:80%;background:var(--surface-card);border-radius:18px 18px 18px 4px;padding:12px 16px;font-size:var(--text-m);line-height:1.4;color:var(--text-body);box-shadow:0 6px 16px -12px rgba(5,13,15,.4)}
.fo-ansatz-msg-right .fo-ansatz-bubble{border-radius:18px 18px 4px 18px}
.fo-ansatz-taste-result{margin-top:auto;padding-top:var(--space-s);font-size:var(--text-s);line-height:1.5;color:var(--text-body)}
.fo-ansatz-taste-arrow{display:flex;align-items:center;justify-content:center}
.fo-ansatz-taste-arrow-ring{width:56px;height:56px;border-radius:50%;background:var(--blue);display:flex;align-items:center;justify-content:center;transform:rotate(90deg)}
.fo-ansatz-taste-answer{position:relative;overflow:hidden;background:var(--blue-d-1);border-radius:var(--radius-l);padding:var(--space-2xl) var(--space-xl);display:flex;flex-direction:column;row-gap:var(--space-l);color:#fff}
.fo-ansatz-quote{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.15;letter-spacing:3px;color:#fff;text-wrap:balance}
.fo-ansatz-checks{display:flex;flex-direction:column;row-gap:var(--space-xs)}
.fo-ansatz-check{display:flex;align-items:center;gap:var(--space-xs);font-size:var(--text-m);line-height:1.4;color:#fff}
.fo-ansatz-check-icon{flex:none}
.fo-ansatz-taste-text{display:grid;grid-template-columns:1fr;gap:var(--space-m) 0px}

/* ---------- Grundsätze (dunkler Abschnitt mit Sternen) ---------- */
.fo-ansatz-dark{position:relative;overflow:hidden;margin-bottom:var(--section-gap);background:linear-gradient(172deg,var(--blue-d-2) 0%,#0a1f24 55%,var(--black) 100%);color:var(--text-on-dark);padding:var(--space-5xl) var(--section-x)}
.fo-ansatz-dark-stars{position:absolute;inset:0;pointer-events:none;opacity:.7}
.fo-ansatz-dark-inner{position:relative;max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;row-gap:var(--space-4xl)}
.fo-ansatz-dark-lead{margin:var(--space-2xs) 0 0;max-width:720px;font-size:var(--text-l);line-height:1.5;color:var(--text-on-dark);text-wrap:pretty}
.fo-ansatz-principles{display:grid;grid-template-columns:1fr;gap:var(--space-l)}
.fo-ansatz-principle{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center;background:linear-gradient(180deg,rgba(73,173,195,.2) 0%,rgba(73,173,195,.06) 100%);box-shadow:inset 0 0 0 1px rgba(134,200,215,.24);border-radius:var(--radius-l);padding:var(--space-2xl) var(--space-xl)}
.fo-ansatz-principle-icon{flex:none;width:72px;height:72px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(134,200,215,.6);display:flex;align-items:center;justify-content:center;color:rgba(248,248,248,.92)}
.fo-ansatz-principle-num{font-family:var(--font-display);font-size:var(--text-l);letter-spacing:2px;color:var(--blue-l-1)}
.fo-ansatz-principle-title{color:var(--text-on-dark);text-wrap:balance}
.fo-ansatz-principle-body{margin:0;max-width:40ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}

/* ---------- Drehtag (Karte mit Plan-Vergleich) ---------- */
.fo-ansatz-band{background:var(--surface-card);border-radius:var(--radius-l);box-shadow:var(--shadow-raised);padding:var(--space-xl) var(--space-l);display:grid;grid-template-columns:1fr;gap:var(--space-2xl) var(--space-4xl);align-items:center}
.fo-ansatz-plans{display:flex;flex-direction:column;row-gap:var(--space-s)}
.fo-ansatz-plan{background:var(--surface-sunken);border-radius:var(--radius-m);padding:var(--space-xl);display:flex;flex-direction:column;row-gap:var(--space-m)}
.fo-ansatz-plan-on{background:var(--blue-d-1);color:#fff}
.fo-ansatz-plan-title{font-weight:700;font-size:var(--text-l);color:var(--text-body)}
.fo-ansatz-plan-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--space-xs)}
.fo-ansatz-plan-chip{font-weight:600;font-size:var(--text-s);color:var(--text-body);background:var(--surface-card);border-radius:999px;padding:8px 14px}
.fo-ansatz-plan-chip-white{color:var(--blue-d-2);background:#fff}
.fo-ansatz-plan-chip-outline{color:#fff;background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,.6)}

/* ---------- Messen ---------- */
.fo-ansatz-measure-lead{max-width:680px}
.fo-ansatz-reach{display:flex;align-items:center;gap:var(--space-xs);margin-top:var(--space-2xs)}
.fo-ansatz-reach-chip{font-weight:600;font-size:var(--text-s);color:var(--text-body);background:var(--surface-sunken);border-radius:999px;padding:8px 14px;text-decoration:line-through;text-decoration-color:var(--red);text-decoration-thickness:2px}
.fo-ansatz-three{display:grid;grid-template-columns:1fr;gap:var(--space-s)}
.fo-ansatz-goal{background:var(--surface-sunken);border-radius:var(--radius-m);padding:var(--space-xl);display:grid;grid-row:span 4;grid-template-rows:subgrid;align-content:start;row-gap:var(--space-s)}
.fo-ansatz-goal-chips{display:flex;flex-wrap:wrap;gap:6px;padding-top:var(--space-2xs)}
.fo-ansatz-goal-chip{font-weight:600;font-size:var(--text-s);color:var(--text-body);background:var(--surface-card);border-radius:999px;padding:6px 12px}

/* ---------- CTA nach dem Drehtag-Beispiel ---------- */
.fo-ansatz-cta{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-l);text-align:center}
.fo-ansatz-cta-text{max-width:64ch}

/* ---------- Was du nicht bekommst ---------- */
.fo-ansatz-not{border-radius:var(--radius-m);padding:var(--space-xl);color:var(--white);display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;row-gap:var(--space-s)}
.fo-ansatz-not-a{background:var(--service-1)}
.fo-ansatz-not-b{background:var(--blue-d-1)}
.fo-ansatz-not-c{background:var(--purple)}
.fo-ansatz-not-icon{width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(248,248,248,.5);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-2xs)}
.fo-ansatz-not-title{color:var(--white);text-wrap:balance}
.fo-ansatz-tip{grid-column:1 / -1;position:relative;overflow:hidden;background:var(--gradient-hero);border-radius:var(--radius-m);padding:var(--space-xl) var(--space-2xl);display:grid;grid-template-columns:1fr;gap:var(--space-l) var(--space-2xl);align-items:center;color:var(--text-on-dark)}
.fo-ansatz-tip-planet{width:96px;height:auto;display:block}
.fo-ansatz-tip-copy{display:flex;flex-direction:column;row-gap:var(--space-2xs)}
.fo-ansatz-tip-label{font-weight:600;font-size:var(--text-m);color:var(--text-on-dark)}
.fo-ansatz-tip-text{margin:0;max-width:80ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}

/* ---------- Werkzeuge ---------- */
.fo-ansatz-tools{background:var(--surface-sunken);border-radius:var(--radius-l);padding:var(--space-xl) var(--space-l);display:flex;flex-direction:column;align-items:center;row-gap:var(--space-l);text-align:center}
.fo-ansatz-tools-lead{max-width:62ch}
.fo-ansatz-tool-list{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs);max-width:900px}
.fo-ansatz-tool{font-weight:600;font-size:var(--text-m);color:var(--text-body);background:var(--surface-card);border-radius:999px;padding:10px 18px;box-shadow:0 6px 16px -12px rgba(5,13,15,.4)}

/* ---------- Abschluss-Panel ---------- */
.fo-ansatz-panel{max-width:var(--container-max);margin:0 auto;position:relative;overflow:hidden;background:var(--gradient-space);border-radius:var(--radius-xl);color:var(--text-on-dark);padding:var(--space-xl) var(--space-l)}
.fo-ansatz-panel-stars{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.fo-ansatz-panel-grid{position:relative;display:grid;grid-template-columns:1fr;gap:var(--space-2xl);align-items:center}
.fo-ansatz-panel-text{max-width:760px}
.fo-ansatz-panel-cta{display:flex;flex-wrap:wrap;gap:var(--space-s);padding-top:var(--space-2xs)}
.fo-ansatz-panel-art{display:flex;justify-content:flex-start}
.fo-ansatz-panel-planet{width:140px;height:auto;animation:fo-ansatz-float 9s ease-in-out infinite}
@keyframes fo-ansatz-float{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}

/* ---------- ab 900px ---------- */
@media (min-width:900px){
  .fo-ansatz-ki-grid{grid-template-columns:1.25fr 0.85fr}
  .fo-ansatz-taste{grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr)}
  .fo-ansatz-taste-arrow-ring{transform:rotate(0deg)}
  .fo-ansatz-taste-text{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:calc(56px + 2 * var(--space-l))}
  .fo-ansatz-principles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-ansatz-band{grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--space-3xl)}
  .fo-ansatz-three{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fo-ansatz-tip{grid-template-columns:96px minmax(0,1fr)}
  .fo-ansatz-tools{padding:var(--space-3xl)}
  .fo-ansatz-panel{padding:var(--space-3xl)}
  .fo-ansatz-panel-grid{grid-template-columns:1.5fr 1fr}
  .fo-ansatz-panel-art{justify-content:flex-end}
  .fo-ansatz-panel-planet{width:clamp(170px,18vw,240px)}
}

/* ---------- ab 1120px ---------- */
@media (min-width:1120px){
  .fo-ansatz-principles{grid-template-columns:repeat(3,minmax(0,1fr))}
}

@media (prefers-reduced-motion:reduce){
  .fo-ansatz-panel-planet{animation:none}
}
/* nach den Titelregeln, damit die weiße Schrift auf den Petrol-Kacheln greift */
.fo-ansatz-white{color:#fff}

/* ===== css/pages/content-produktion.css ===== */
/* FilmOrbit — Seite Content-Produktion (/leistungen/content-produktion/)
   Klassen-Präfix .fo-content-, Hero-Grafik .fo-art-content-.
   Umbrüche wie im Prototyp: 900px (wide), 1120px (wide3), 1320px (wide4, über .fo-hide-below-1320 aus site.css). */

/* ---------- Hero-Grafik: Drehtag mit Content-Pieces ---------- */
.fo-art-content-orbit{position:absolute;right:0;top:0;width:600px;height:520px;overflow:visible;pointer-events:none;z-index:0}
.fo-art-content-link{fill:none;stroke:rgba(248,248,248,.34);stroke-width:1;stroke-dasharray:4 6;animation:fo-ph-dash 16s linear infinite reverse}
.fo-art-content-dot{fill:#86C8D7;filter:drop-shadow(0 0 6px rgba(134,200,215,.9))}
.fo-art-content-piece{position:absolute;z-index:3}
.fo-art-content-piece-card{position:relative;width:100%;height:100%;border-radius:var(--radius-s);overflow:hidden;background:#1c1c22;box-shadow:0 16px 36px -14px rgba(5,13,15,.65);transform:rotate(var(--r));animation:fo-ph-bob 5.6s ease-in-out infinite;transition:scale 260ms var(--ease-out)}
.fo-art-content-piece-card:hover{scale:1.08}
.fo-art-content-piece-img{width:100%;height:100%;object-fit:cover;display:block}
.fo-art-content-play{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center}
.fo-art-content-label{position:absolute;left:6px;bottom:6px;font-size:10px;font-weight:700;line-height:1;color:var(--text-heading);background:rgba(255,255,255,.95);border-radius:999px;padding:4px 7px;white-space:nowrap}
.fo-art-content-cam{position:absolute;z-index:4;right:225px;top:180px;width:220px}
.fo-art-content-cam-body{background:var(--black);border-radius:var(--radius-m);padding:8px;box-shadow:0 30px 70px -26px rgba(5,13,15,.8)}
.fo-art-content-cam-screen{position:relative;border-radius:var(--radius-s);overflow:hidden;aspect-ratio:4 / 3}
.fo-art-content-cam-img{width:100%;height:100%;object-fit:cover;display:block}
.fo-art-content-rec{position:absolute;left:8px;top:8px;display:flex;align-items:center;gap:5px;font-size:10px;font-weight:700;color:#fff;background:rgba(5,13,15,.6);border-radius:999px;padding:4px 8px}
.fo-art-content-rec-dot{width:7px;height:7px;border-radius:50%;background:#e0413a;animation:fo-ph-rec 1.4s ease-in-out infinite}
.fo-art-content-frame{position:absolute;inset:10px;border:1px solid rgba(255,255,255,.35);border-radius:4px;pointer-events:none}
.fo-art-content-cam-meta{display:flex;justify-content:space-between;align-items:center;padding:8px 4px 2px;font-size:11px;color:rgba(248,248,248,.85);text-align:left}
.fo-art-content-cam-day{font-weight:700;color:#fff}
.fo-art-content-count{position:absolute;z-index:5;right:250px;top:372px;display:flex;align-items:center;gap:8px;background:rgba(255,255,255,.97);border-radius:999px;padding:8px 14px;box-shadow:0 18px 40px -16px rgba(5,13,15,.55);font-size:12px;color:var(--text-heading);white-space:nowrap}
.fo-art-content-count-num{font-family:var(--font-display);font-size:20px;line-height:1;letter-spacing:1px;color:var(--pink)}
.fo-art-content-count-label{font-weight:600}

/* ---------- Hilfsklassen ---------- */
.fo-content-w620{max-width:620px}
.fo-content-w640{max-width:640px}
.fo-content-w760{max-width:760px}
.fo-content-w66ch{max-width:66ch}
.fo-content-h2-light{color:var(--text-on-dark)}
.fo-content-link-light{font-weight:700;color:var(--blue-l-1)}
.fo-content-link-light:hover{color:var(--blue-l-1)}

/* ---------- Problem + Gedankenkarten ---------- */
.fo-content-problem{padding:calc(var(--space-5xl) * 1.15) var(--section-x) var(--section-gap)}
.fo-content-problem-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:var(--space-4xl) 64px;align-items:start}
.fo-content-problem-copy{display:flex;flex-direction:column;row-gap:var(--space-m);max-width:680px}
.fo-content-thoughts{display:flex;flex-direction:column;row-gap:var(--space-m);padding-top:var(--space-l);padding-right:28px}
.fo-content-thought{background:var(--surface-raised);border-radius:var(--radius-m);box-shadow:var(--shadow-raised);padding:var(--space-l) var(--space-xl);transform:rotate(0deg) translateX(0px);font-size:var(--text-l);line-height:1.4;color:var(--text-body);text-wrap:pretty;transition:transform .3s ease}

/* ---------- Dunkler Weltraum-Abschnitt ---------- */
.fo-content-dark{position:relative;overflow:hidden;margin-bottom:var(--section-gap);background:linear-gradient(172deg,var(--blue-d-2) 0%,#0a1f24 55%,var(--black) 100%);color:var(--text-on-dark);padding:var(--space-5xl) var(--section-x)}
.fo-content-stars{position:absolute;inset:0;pointer-events:none}
.fo-content-stars-dim{opacity:.7}
.fo-content-dark-inner{position:relative;max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;row-gap:var(--space-4xl)}
.fo-content-lead-xl{margin:var(--space-2xs) 0 0;max-width:720px;font-size:var(--text-l);line-height:1.5;color:var(--text-on-dark);text-wrap:pretty}
.fo-content-glass-card{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center;background:linear-gradient(180deg,rgba(73,173,195,.2) 0%,rgba(73,173,195,.06) 100%);box-shadow:inset 0 0 0 1px rgba(134,200,215,.24);border-radius:var(--radius-l);padding:var(--space-2xl) var(--space-xl)}
.fo-content-glass-title{margin:var(--space-2xs) 0 0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--text-on-dark)}

/* ---------- Warum wir ---------- */
.fo-content-why{display:grid;grid-template-columns:1fr;gap:var(--space-s)}
.fo-content-reason{grid-column:auto;border-radius:var(--radius-m);padding:var(--space-xl);color:var(--white);display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;row-gap:var(--space-s)}
.fo-content-bg-1{background:var(--service-1)}
.fo-content-bg-3{background:var(--service-4)}
.fo-content-bg-4{background:var(--purple)}
.fo-content-reason-icon{width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(248,248,248,.5);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-2xs)}
.fo-content-reason-title{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--white);text-wrap:balance}
.fo-content-reason-body{margin:0;max-width:70ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}
/* ---------- Preis-Abschnitt (lila) ---------- */
.fo-content-price{position:relative;overflow:hidden;margin-bottom:var(--section-gap);scroll-margin-top:90px;background:linear-gradient(172deg,#2f1d45 0%,#1b1130 55%,#0d0a18 100%);color:var(--text-on-dark);padding:var(--space-5xl) var(--section-x)}
.fo-content-price-inner{position:relative;max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;row-gap:var(--space-3xl)}
.fo-content-price-head{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center}
.fo-content-price-lead{margin:0;max-width:760px;font-size:var(--text-l);line-height:1.5;color:var(--text-on-dark);text-wrap:pretty}
.fo-content-price-body{display:flex;flex-direction:column;row-gap:var(--space-l)}
.fo-content-h3-light{margin:0;color:var(--text-on-dark);text-wrap:balance}

/* ---------- Karten (Für wen) ---------- */
.fo-content-cards{display:grid;grid-template-columns:1fr;gap:var(--space-s)}
.fo-content-card{background:var(--surface-sunken);border-radius:var(--radius-m);padding:var(--space-xl);display:flex;flex-direction:column;row-gap:var(--space-s)}
.fo-content-card-icon{display:block;color:var(--blue-d-1)}
.fo-content-card-title{font-size:var(--text-l);font-weight:700;line-height:1.3;color:var(--text-body)}
.fo-content-note-center{margin:0 auto;max-width:66ch;text-align:center}

/* ---------- Abschluss-Panel ---------- */
.fo-content-panel{max-width:var(--container-max);margin:0 auto;position:relative;overflow:hidden;background:var(--gradient-space);border-radius:var(--radius-xl);color:var(--text-on-dark);padding:var(--space-xl) var(--space-l)}
.fo-content-panel-stars{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.fo-content-panel-grid{position:relative;display:grid;grid-template-columns:1fr;gap:var(--space-2xl);align-items:center}
.fo-content-panel-copy{display:flex;flex-direction:column;row-gap:var(--space-m);align-items:flex-start}
.fo-content-panel-cta{padding-top:var(--space-2xs)}
.fo-content-panel .fo-actions{justify-content:flex-start}
.fo-content-panel-planet{display:flex;justify-content:flex-start}
.fo-content-panel-img{width:140px;height:auto;animation:fo-content-float 9s ease-in-out infinite}
@keyframes fo-content-float{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}

/* ---------- So läuft eine Produktion (drei Stationen) ---------- */
.fo-content-steps{display:grid;grid-template-columns:1fr;gap:var(--space-l)}
.fo-content-step-art{height:150px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.fo-content-step-svg{width:100%;max-width:240px;height:auto;overflow:visible}
.fo-content-step-num{flex:none;width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(134,200,215,.6);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--text-l);letter-spacing:2px;color:var(--blue-l-1)}
.fo-content-step-body{margin:0;max-width:34ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}
.fo-content-clap{transform-origin:26px 58px;animation:fo-content-clap 4s ease-in-out infinite}
.fo-content-blink{animation:fo-content-blink 2.2s ease-in-out infinite}
.fo-content-blink-fast{animation-duration:1.8s}
.fo-content-glow{animation:fo-content-glow 3.4s ease-in-out infinite}
.fo-content-glow-late{animation:fo-content-glow 3s ease-in-out .8s infinite}
.fo-content-playhead{animation:fo-content-play 5s linear infinite}
.fo-content-cols{display:grid;grid-template-columns:1fr;gap:var(--space-m) 64px;align-items:start}
.fo-content-col{display:flex;flex-direction:column;row-gap:var(--space-m)}
.fo-content-proof-cta{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-l);text-align:center;padding-top:var(--space-2xl);border-top:1px solid rgba(134,200,215,.24)}
.fo-content-proof-text{margin:0;max-width:62ch;font-size:var(--text-l);line-height:1.5;color:var(--text-on-dark);text-wrap:pretty}
@keyframes fo-content-blink{0%,45%{opacity:.25}50%,95%{opacity:1}100%{opacity:.25}}
@keyframes fo-content-glow{0%,100%{opacity:.35}50%{opacity:.95}}
@keyframes fo-content-clap{0%,100%{transform:rotate(0deg)}12%{transform:rotate(-16deg)}}
@keyframes fo-content-play{0%{transform:translateX(0)}100%{transform:translateX(56px)}}

/* ---------- Was dabei entsteht ---------- */
.fo-content-formats{display:grid;grid-template-columns:1fr;gap:var(--space-s)}

/* ---------- Preise: zwei Preiskarten ---------- */
.fo-content-offers{display:grid;grid-template-columns:1fr;gap:var(--space-l);max-width:880px;width:100%;margin:0 auto}
.fo-content-offer{position:relative;display:flex;flex-direction:column;align-items:center;row-gap:var(--space-s);text-align:center;border-radius:var(--radius-l);padding:var(--space-2xl) var(--space-l);background:rgba(248,248,248,.05);box-shadow:inset 0 0 0 1px rgba(248,248,248,.14)}
.fo-content-offer-featured{background:rgba(134,200,215,.12);box-shadow:inset 0 0 0 1px rgba(134,200,215,.55)}
.fo-content-offer-badge{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);white-space:nowrap;font-weight:600;font-size:var(--text-xs);color:var(--text-on-dark);background:#3a2756;box-shadow:inset 0 0 0 1px rgba(134,200,215,.55);border-radius:999px;padding:5px 12px}
.fo-content-offer-icon{width:64px;height:64px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(134,200,215,.6);display:flex;align-items:center;justify-content:center;color:var(--blue-l-1);margin-bottom:var(--space-2xs)}
.fo-content-offer-name{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--text-on-dark)}
.fo-content-offer-price{margin:0;font-family:var(--font-display);font-size:var(--text-3xl);line-height:1.05;letter-spacing:2px;color:#fff;white-space:nowrap}
.fo-content-offer-from,.fo-content-offer-net{font-family:var(--font-body);font-size:var(--text-m);font-weight:600;letter-spacing:0;color:var(--text-on-dark)}
.fo-content-offer-note{margin:0;max-width:30ch;font-size:var(--text-m);line-height:1.5;color:var(--text-on-dark);text-wrap:pretty}
.fo-content-factors{margin:0 auto;max-width:760px;text-align:center;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}
.fo-content-fine{margin:0;text-align:center;font-size:var(--text-s);line-height:1.6;color:var(--text-on-dark)}

@media (min-width:900px){
  .fo-hero-split .fo-content-hero-h1{align-items:flex-start}
  .fo-content-problem-grid{grid-template-columns:1.25fr .85fr}
  .fo-content-thought{transform:rotate(var(--rot)) translateX(var(--shift))}
  .fo-content-steps{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fo-content-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-content-formats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-content-why{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fo-content-span-2{grid-column:span 2}
  .fo-content-offers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-content-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fo-content-panel{padding:var(--space-3xl)}
  .fo-content-panel-grid{grid-template-columns:1.5fr 1fr}
  .fo-content-panel-planet{justify-content:flex-end}
  .fo-content-panel-img{width:clamp(170px,18vw,240px)}
}
@media (min-width:1120px){
  .fo-content-formats{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.fo-content-thought:hover{transform:rotate(0deg) translateX(0)}

@media (prefers-reduced-motion:reduce){
  .fo-art-content-link,.fo-art-content-piece-card,.fo-art-content-rec-dot,.fo-content-clap,.fo-content-blink,.fo-content-glow,.fo-content-glow-late,.fo-content-playhead,.fo-content-panel-img{animation:none !important}
}

/* ===== css/pages/hero-ads.css ===== */
/* FilmOrbit — Hero-Grafik „Anzeige im Feed“ für die Seiten Social Media Advertising und Recruiting.
   Entspricht PageHero mit art-variant="ads" / "recruiting". Die Bühne (.fo-hero-art-stage) und die
   Maus-Bewegung (data-fo-hero-art, data-dx/data-dy/data-slow/data-tilt) kommen aus site.css/site.js. */

/* ---------- Hintergrund-SVG (Kurve bzw. Bewerber-Orbit) ---------- */
.fo-art-ads-bg{position:absolute;right:-120px;top:0;width:700px;height:520px;overflow:visible;pointer-events:none;z-index:0}
.fo-art-ads-glow{filter:drop-shadow(0 0 8px rgba(134,200,215,.7))}
.fo-art-ads-glow-white{filter:drop-shadow(0 0 8px rgba(255,255,255,.9))}
.fo-art-ads-glow-dot{filter:drop-shadow(0 0 6px rgba(134,200,215,.9))}
.fo-art-ads-dash{animation:fo-ph-dash 20s linear infinite}

/* ---------- Smartphone mit Feed ---------- */
.fo-art-ads-phone{position:absolute;z-index:1;right:80px;top:24px;width:220px;height:465px;background:var(--black);border-radius:var(--radius-xl);padding:10px;box-shadow:0 30px 80px -30px rgba(5,13,15,.7)}
.fo-art-ads-screen{position:relative;width:100%;height:100%;background:#f0f2f5;border-radius:calc(var(--radius-xl) - 8px);overflow:hidden;display:flex;flex-direction:column;text-align:left;font-family:var(--font-body)}
.fo-art-ads-bar{background:#fff;padding:16px 12px 8px;display:flex;justify-content:space-between;align-items:center}
.fo-art-ads-bar-title{font-weight:700;font-size:14px;color:#1877f2;letter-spacing:-.2px}
.fo-art-ads-bar-icons{display:flex;gap:6px}
.fo-art-ads-bar-dot{width:18px;height:18px;border-radius:50%;background:#e4e6eb}
.fo-art-ads-post{background:#fff;margin-top:6px;display:flex;flex-direction:column}
.fo-art-ads-head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px}
.fo-art-ads-logo{width:28px;height:28px;border-radius:50%;object-fit:cover;flex:none;display:block}
.fo-art-ads-meta{display:flex;flex-direction:column;line-height:1.2}
.fo-art-ads-name{font-size:11px;font-weight:700;color:#050505}
.fo-art-ads-sponsored{font-size:9.5px;color:#65676b}
.fo-art-ads-text{margin:0;padding:0 10px 8px;font-size:10.5px;line-height:1.4;color:#050505}
.fo-art-ads-img{width:100%;aspect-ratio:4 / 5;object-fit:cover;display:block}
.fo-art-ads-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;background:#f0f2f5;padding:8px 10px}
.fo-art-ads-foot-meta{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.fo-art-ads-domain{font-size:9px;color:#65676b;text-transform:uppercase}
.fo-art-ads-headline{font-size:10.5px;font-weight:700;color:#050505}
.fo-art-ads-cta{flex:none;font-size:10px;font-weight:700;color:#050505;background:#e4e6eb;border-radius:6px;padding:6px 8px}
.fo-art-ads-actions{display:flex;justify-content:space-around;padding:7px 10px;font-size:10px;font-weight:600;color:#65676b}
.fo-art-ads-next{background:#fff;margin-top:6px;flex:1;padding:10px;display:flex;gap:8px}
.fo-art-ads-next-avatar{width:28px;height:28px;border-radius:50%;background:#e4e6eb;flex:none}
.fo-art-ads-next-lines{display:flex;flex-direction:column;gap:5px;flex:1}
.fo-art-ads-next-line{height:7px;width:60%;border-radius:4px;background:#e4e6eb}
.fo-art-ads-next-line-short{width:40%}

/* ---------- Schwebende Karten ---------- */
.fo-art-ads-card{position:absolute;z-index:4;transform:rotate(var(--r));background:rgba(255,255,255,.97);border-radius:var(--radius-m);box-shadow:0 18px 40px -16px rgba(5,13,15,.55),0 2px 6px rgba(5,13,15,.12);padding:12px 14px;display:flex;flex-direction:column;row-gap:4px;text-align:left}
.fo-art-ads-card-1{right:250px;top:210px;--r:-2deg;animation:fo-ph-bob 6.2s ease-in-out infinite}
.fo-art-ads-card-2{right:0;top:330px;--r:1.5deg;animation:fo-ph-bob 7.4s ease-in-out infinite;animation-delay:-2.4s}
.fo-art-ads-card-gap{row-gap:6px}
.fo-art-ads-w-ads1{width:170px}
.fo-art-ads-w-ads2{width:180px}
.fo-art-ads-w-rec1{width:200px}
.fo-art-ads-w-rec2{width:190px}
.fo-art-ads-card-label{font-size:11px;font-weight:600;color:var(--text-muted)}
.fo-art-ads-card-row{display:flex;align-items:baseline;gap:8px}
.fo-art-ads-card-num{font-family:var(--font-display);font-size:30px;line-height:1;letter-spacing:1px;color:var(--text-heading)}
.fo-art-ads-num-26{font-size:26px}
.fo-art-ads-num-28{font-size:28px}
.fo-art-ads-card-delta{font-size:12px;font-weight:700;color:var(--blue-d-1)}
.fo-art-ads-spark{display:block}
.fo-art-ads-bars{display:flex;align-items:flex-end;gap:5px;height:30px;margin-top:2px}
.fo-art-ads-bar-col{width:14px;border-radius:3px;background:var(--neutral-200)}
.fo-art-ads-card-head{display:flex;justify-content:space-between;gap:8px;font-size:11px;color:var(--text-muted)}
.fo-art-ads-card-strong{font-weight:600;color:var(--text-heading)}
.fo-art-ads-person{display:flex;align-items:center;gap:10px}
.fo-art-ads-avatar{width:32px;height:32px;border-radius:50%;background:var(--pink);color:#fff;font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.fo-art-ads-person-meta{display:flex;flex-direction:column;line-height:1.3}
.fo-art-ads-person-name{font-size:12.5px;font-weight:700;color:var(--text-heading)}
.fo-art-ads-person-role{font-size:11px;color:var(--text-muted)}
.fo-art-ads-funnel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:2px}
.fo-art-ads-funnel-step{display:flex;flex-direction:column;gap:3px}
.fo-art-ads-funnel-bar{height:5px;border-radius:3px;background:var(--neutral-200)}
.fo-art-ads-funnel-bar-1{background:var(--blue)}
.fo-art-ads-funnel-bar-2{background:var(--blue-l-1)}
.fo-art-ads-funnel-label{font-size:10px;color:var(--text-muted)}
@media (min-width:1120px){
  .fo-art-ads-card-1{right:285px}
  .fo-art-ads-card-2{right:-30px}
  .fo-art-ads-w-ads1{width:190px}
  .fo-art-ads-w-ads2{width:200px}
  .fo-art-ads-w-rec1{width:230px}
  .fo-art-ads-w-rec2{width:210px}
}
@media (prefers-reduced-motion:reduce){
  .fo-art-ads-card,.fo-art-ads-dash{animation:none !important}
}

/* ===== css/pages/kampagnen.css ===== */
/* FilmOrbit — Seite Kampagnen (/leistungen/kampagnen/)
   Klassen-Präfix .fo-kamp-, Hero-Grafik .fo-art-kamp-.
   Umbrüche wie im Prototyp: 900px (wide), 1120px (wide3), 1320px (wide4, über .fo-hide-below-1320 aus site.css). */

/* ---------- Hero-Grafik: Planet mit Kanälen ---------- */
.fo-art-kamp-orbit{position:absolute;right:0;top:0;width:600px;height:520px;overflow:visible;pointer-events:none;z-index:0}
.fo-art-kamp-link{fill:none;stroke:rgba(248,248,248,.3);stroke-width:1;stroke-dasharray:4 6}
.fo-art-kamp-dot{fill:#86C8D7;filter:drop-shadow(0 0 6px rgba(134,200,215,.9))}
.fo-art-kamp-planet{position:absolute;z-index:2;right:235px;top:195px;width:130px;height:130px}
.fo-art-kamp-planet-img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 20px 40px rgba(5,13,15,.45))}
.fo-art-kamp-item{position:absolute;z-index:3;display:flex;flex-direction:column;align-items:center;row-gap:6px}
.fo-art-kamp-device{transform:rotate(var(--r));animation:fo-ph-bob 5.4s ease-in-out infinite;filter:drop-shadow(0 14px 22px rgba(5,13,15,.35))}
.fo-art-kamp-svg{display:block;overflow:visible}
.fo-art-kamp-label{font-size:11px;font-weight:700;line-height:1;color:var(--text-heading);background:rgba(255,255,255,.95);border-radius:999px;padding:5px 9px;white-space:nowrap}

.fo-art-kamp-ellipse-a{animation:fo-ph-dash 30s linear infinite}
.fo-art-kamp-ellipse-b{animation:fo-ph-dash 22s linear infinite reverse}

/* ---------- Hero: Bewertungszeile ---------- */
.fo-kamp-trust{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-2xs) var(--space-m);margin-top:var(--space-m);font-size:var(--text-s);color:var(--text-on-dark-muted)}
.fo-kamp-trust-item{display:inline-flex;align-items:center;gap:6px}
.fo-kamp-trust-stars{color:#F5C451;letter-spacing:2px}
.fo-kamp-trust-strong{color:var(--text-on-dark);font-weight:700}
.fo-kamp-trust-sep{opacity:.45}

/* ---------- Buttonpaare (Kostenkasten, Abschluss) ---------- */
.fo-kamp-panel-cta.fo-actions{justify-content:flex-start}

/* ---------- CTA Marketing-Check nach der Leitidee (heller Kasten) ---------- */
.fo-kamp-check{max-width:var(--container-max);margin:0 auto;padding:var(--space-2xl) var(--space-l);border-radius:var(--radius-l);background:var(--surface-sunken);display:flex;flex-direction:column;align-items:center;row-gap:var(--space-l);text-align:center}
.fo-kamp-check-text{margin:0;max-width:62ch;font-size:var(--text-l);line-height:1.5;color:var(--text-body);text-wrap:pretty}

/* ---------- Hilfsklassen ---------- */
.fo-kamp-w620{max-width:620px}
.fo-kamp-w760{max-width:760px}
.fo-kamp-w66ch{max-width:66ch}
.fo-kamp-h2-light{color:var(--text-on-dark)}

/* ---------- Problem + Gedankenkarten ---------- */
.fo-kamp-problem{padding:calc(var(--space-5xl) * 1.15) var(--section-x) var(--section-gap)}
.fo-kamp-problem-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:var(--space-4xl) 64px;align-items:start}
.fo-kamp-problem-copy{display:flex;flex-direction:column;row-gap:var(--space-m);max-width:680px}
.fo-kamp-thoughts{display:flex;flex-direction:column;row-gap:var(--space-m);padding-top:var(--space-l);padding-right:28px}
.fo-kamp-thought{background:var(--surface-raised);border-radius:var(--radius-m);box-shadow:var(--shadow-raised);padding:var(--space-l) var(--space-xl);transform:rotate(0deg) translateX(0px);font-size:var(--text-l);line-height:1.4;color:var(--text-body);text-wrap:pretty;transition:transform .3s ease}

/* ---------- Dunkler Weltraum-Abschnitt ---------- */
.fo-kamp-dark{position:relative;overflow:hidden;margin-bottom:var(--section-gap);background:linear-gradient(172deg,var(--blue-d-2) 0%,#0a1f24 55%,var(--black) 100%);color:var(--text-on-dark);padding:var(--space-5xl) var(--section-x)}
.fo-kamp-stars{position:absolute;inset:0;pointer-events:none}
.fo-kamp-stars-dim{opacity:.7}
.fo-kamp-dark-inner{position:relative;max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;row-gap:var(--space-4xl)}
.fo-kamp-lead-xl{margin:var(--space-2xs) 0 0;max-width:720px;font-size:var(--text-l);line-height:1.5;color:var(--text-on-dark);text-wrap:pretty}
.fo-kamp-glass-card{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center;background:linear-gradient(180deg,rgba(73,173,195,.2) 0%,rgba(73,173,195,.06) 100%);box-shadow:inset 0 0 0 1px rgba(134,200,215,.24);border-radius:var(--radius-l);padding:var(--space-2xl) var(--space-xl)}
.fo-kamp-glass-title{margin:var(--space-2xs) 0 0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--text-on-dark)}

/* ---------- Warum wir ---------- */
.fo-kamp-why{display:grid;grid-template-columns:1fr;gap:var(--space-s)}
.fo-kamp-reason{grid-column:auto;border-radius:var(--radius-m);padding:var(--space-xl);color:var(--white);display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;row-gap:var(--space-s)}
.fo-kamp-bg-1{background:var(--service-1)}
.fo-kamp-bg-2{background:var(--blue-d-1)}
.fo-kamp-bg-3{background:var(--service-4)}
.fo-kamp-reason-icon{width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(248,248,248,.5);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-2xs)}
.fo-kamp-reason-title{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--white);text-wrap:balance}
.fo-kamp-reason-body{margin:0;max-width:70ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}

/* ---------- Preis-Abschnitt (lila) ---------- */
.fo-kamp-price{position:relative;overflow:hidden;margin-bottom:var(--section-gap);scroll-margin-top:90px;background:linear-gradient(172deg,#2f1d45 0%,#1b1130 55%,#0d0a18 100%);color:var(--text-on-dark);padding:var(--space-5xl) var(--section-x)}
.fo-kamp-price-inner{position:relative;max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;row-gap:var(--space-3xl)}
.fo-kamp-price-head{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center}
.fo-kamp-price-lead{margin:0;max-width:760px;font-size:var(--text-l);line-height:1.5;color:var(--text-on-dark);text-wrap:pretty}
.fo-kamp-price-body{display:flex;flex-direction:column;row-gap:var(--space-l)}
.fo-kamp-h3-light{color:var(--text-on-dark);text-wrap:balance}

/* ---------- Karten (Für wen) ---------- */
.fo-kamp-cards{display:grid;grid-template-columns:1fr;gap:var(--space-s)}
.fo-kamp-card{background:var(--surface-sunken);border-radius:var(--radius-m);padding:var(--space-xl);display:flex;flex-direction:column;row-gap:var(--space-s)}
.fo-kamp-card-icon{display:block;color:var(--blue-d-1)}
.fo-kamp-card-title{font-size:var(--text-l);font-weight:700;line-height:1.3;color:var(--text-body)}
.fo-kamp-note-center{margin:0 auto;max-width:66ch;text-align:center}

/* ---------- Abschluss-Panel ---------- */
.fo-kamp-panel{max-width:var(--container-max);margin:0 auto;position:relative;overflow:hidden;background:var(--gradient-space);border-radius:var(--radius-xl);color:var(--text-on-dark);padding:var(--space-xl) var(--space-l)}
.fo-kamp-panel-stars{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.fo-kamp-panel-grid{position:relative;display:grid;grid-template-columns:1fr;gap:var(--space-2xl);align-items:center}
.fo-kamp-panel-copy{display:flex;flex-direction:column;row-gap:var(--space-m);align-items:flex-start}
.fo-kamp-panel-cta{padding-top:var(--space-2xs)}
.fo-kamp-panel-planet{display:flex;justify-content:flex-start}
.fo-kamp-panel-img{width:140px;height:auto;animation:fo-kamp-float 9s ease-in-out infinite}
@keyframes fo-kamp-float{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
@keyframes fo-kamp-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ---------- Leitidee: Band mit Orbit ---------- */
.fo-kamp-band{max-width:var(--container-max);margin:0 auto;background:var(--surface-card);border-radius:var(--radius-l);box-shadow:var(--shadow-raised);padding:var(--space-xl) var(--space-l);display:grid;grid-template-columns:1fr;gap:var(--space-2xl) var(--space-4xl);align-items:center}
.fo-kamp-band-copy{display:flex;flex-direction:column;row-gap:var(--space-m);align-items:flex-start}
.fo-kamp-orbit{justify-self:center;position:relative;width:100%;max-width:320px;aspect-ratio:1;margin:var(--space-l) 0}
.fo-kamp-orbit-ring{position:absolute;inset:12%;border-radius:50%;border:1.5px dashed var(--neutral-300)}
.fo-kamp-orbit-spin{position:absolute;inset:12%;animation:fo-kamp-spin 40s linear infinite}
.fo-kamp-orbit-dot{position:absolute;left:50%;top:-4px;margin-left:-4px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.fo-kamp-orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;row-gap:8px}
.fo-kamp-orbit-img{width:80px;height:auto;display:block}
.fo-kamp-orbit-label{font-weight:700;font-size:var(--text-s);color:var(--text-heading);white-space:nowrap}
.fo-kamp-pill{position:absolute;left:var(--x-m);top:var(--y-m);transform:translate(-50%,-50%);font-weight:600;font-size:11px;line-height:1.25;text-align:center;width:max-content;max-width:100px;color:var(--text-body);background:var(--surface-sunken);border-radius:999px;padding:6px 12px}

/* ---------- Bausteine ---------- */
.fo-kamp-blocks{display:grid;grid-template-columns:1fr;gap:var(--space-l)}
.fo-kamp-block-icon{flex:none;width:72px;height:72px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(134,200,215,.6);display:flex;align-items:center;justify-content:center;color:rgba(248,248,248,.92)}
.fo-kamp-block-body{margin:0;max-width:40ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}
.fo-kamp-block-link{margin-top:auto;font-size:var(--text-s);font-weight:700;color:var(--blue-l-1)}
.fo-kamp-block-link:hover{color:var(--blue-l-1)}

/* ---------- Preise: Aufwandsfaktoren ---------- */
.fo-kamp-factors{display:grid;grid-template-columns:1fr;gap:var(--space-l);align-items:stretch}
.fo-kamp-factor{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-s);text-align:center;border-radius:var(--radius-l);padding:var(--space-xl) var(--space-l);background:rgba(248,248,248,.05);box-shadow:inset 0 0 0 1px rgba(248,248,248,.14)}
.fo-kamp-factor-icon{flex:none;width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(248,248,248,.4);display:flex;align-items:center;justify-content:center;color:rgba(248,248,248,.92);margin-bottom:var(--space-2xs)}
.fo-kamp-factor-title{font-weight:700;font-size:var(--text-l);line-height:1.3;color:#fff}
.fo-kamp-factor-body{max-width:32ch;font-size:var(--text-s);line-height:1.5;color:var(--text-on-dark)}

@media (min-width:900px){
  .fo-kamp-trust{justify-content:flex-start}
  .fo-kamp-problem-grid{grid-template-columns:1.25fr .85fr}
  .fo-kamp-thought{transform:rotate(var(--rot)) translateX(var(--shift))}
  .fo-kamp-band{padding:var(--space-3xl);grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-kamp-orbit{max-width:360px}
  .fo-kamp-orbit-img{width:110px}
  .fo-kamp-pill{left:var(--x);top:var(--y);font-size:var(--text-s);max-width:150px}
  .fo-kamp-blocks{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-kamp-factors{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-kamp-why{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fo-kamp-span-2{grid-column:span 2}
  .fo-kamp-hero-h1{align-items:flex-start}
  .fo-kamp-check{padding:var(--space-3xl)}
  .fo-kamp-cards{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fo-kamp-panel{padding:var(--space-3xl)}
  .fo-kamp-panel-grid{grid-template-columns:1.5fr 1fr}
  .fo-kamp-panel-planet{justify-content:flex-end}
  .fo-kamp-panel-img{width:clamp(170px,18vw,240px)}
}
@media (min-width:1120px){
  .fo-kamp-orbit{max-width:440px}
  .fo-kamp-blocks{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fo-kamp-factors{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.fo-kamp-thought:hover{transform:rotate(0deg) translateX(0)}

@media (prefers-reduced-motion:reduce){
  .fo-art-kamp-device,.fo-kamp-orbit-spin,.fo-kamp-panel-img,.fo-art-kamp-ellipse-a,.fo-art-kamp-ellipse-b{animation:none !important}
}

/* ===== css/pages/leistungen.css ===== */
/* FilmOrbit — Seite „Leistungen“ (/leistungen/).
   Wegweiser (Problem → Leistung), zwei Kernleistungs-Karten mit Preisrahmen,
   Vergleich Social Media / Meta Ads, weitere Leistungen mit „Passt, wenn …“.
   Marketing-Check nutzt den globalen Baustein .fo-check. Desktop ab 940px. */

/* ---------- Gemeinsam ---------- */
.fo-lst-head{display:flex;flex-direction:column;row-gap:var(--space-s)}
.fo-lst-arrow{flex:none;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.fo-lst-fine{margin:0;font-size:var(--text-s);line-height:1.5;color:var(--text-body)}

/* ---------- Wegweiser ---------- */
.fo-lst-way-section{padding:calc(var(--space-5xl) * 1.15) var(--section-x) var(--section-gap)}
.fo-lst-way-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3xl) var(--space-4xl);align-items:stretch}
.fo-lst-way-copy{display:flex;flex-direction:column;row-gap:var(--space-2xl)}
.fo-lst-way-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;row-gap:var(--space-s)}
.fo-lst-way{display:flex;flex-direction:column;row-gap:var(--space-2xs);padding:var(--space-m) var(--space-l);border-radius:var(--radius-m);background:var(--surface-raised);box-shadow:var(--shadow-card);color:var(--text-body);text-decoration:none;transition:transform .35s cubic-bezier(.16,1,.3,1),box-shadow .35s ease}
.fo-lst-way:hover{color:var(--text-body);transform:translateY(-2px);box-shadow:var(--shadow-raised)}
.fo-lst-way-quote{font-size:var(--text-l);line-height:1.35;text-wrap:pretty}
.fo-lst-way-target{display:inline-flex;align-items:center;gap:var(--space-2xs);font-size:var(--text-m);font-weight:700;color:var(--text-link)}
.fo-lst-way:hover .fo-lst-way-target{color:var(--text-link-hover)}
.fo-lst-way:hover .fo-lst-arrow,.fo-lst-core-link:hover .fo-lst-arrow{transform:translateX(4px)}
.fo-lst-way-more{margin:0;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body)}
.fo-lst-way-photo{margin:0;position:relative;min-height:320px;overflow:hidden;border-radius:var(--radius-l)}
.fo-lst-way-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:33% 50%;display:block}

/* ---------- Kernleistungen ---------- */
.fo-lst-core-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--grid-gap)}
.fo-lst-core{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;row-gap:var(--space-m);padding:var(--space-2xl) var(--card-pad);border-radius:var(--radius-l);color:var(--text-on-dark)}
.fo-lst-core > *{position:relative}
.fo-lst-core > .fo-tile-art{position:absolute;top:-60px;bottom:auto;right:-60px}
.fo-lst-core-purple{background:radial-gradient(90% 70% at 100% 0%,rgba(73,173,195,.22),rgba(73,173,195,0) 60%),var(--service-1)}
.fo-lst-core-orange{background:linear-gradient(0deg,rgba(5,13,15,.45),rgba(5,13,15,.45)),var(--red)}
.fo-lst-core-title{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--text-on-dark);text-wrap:balance}
.fo-lst-core-text{margin:0;max-width:56ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}
.fo-lst-core-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;row-gap:var(--space-xs);font-size:var(--text-m);line-height:1.45;color:var(--text-on-dark)}
.fo-lst-core-list li{position:relative;padding-left:1.9em}
.fo-lst-core-list li::before{content:"";position:absolute;left:0;top:.18em;width:1.2em;height:1.2em;border-radius:50%;background:rgba(248,248,248,.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F8F8F8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center / 70% no-repeat}
.fo-lst-core-price{margin-top:auto;display:flex;flex-direction:column;row-gap:var(--space-2xs);padding:var(--space-l);border-radius:var(--radius-m);background:rgba(248,248,248,.1);box-shadow:inset 0 0 0 1px rgba(248,248,248,.22)}
.fo-lst-core-amount{margin:0;display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--space-xs);color:var(--text-on-dark)}
.fo-lst-core-figure{font-family:var(--font-display);font-size:var(--text-3xl);line-height:1;letter-spacing:2px}
.fo-lst-core-unit{font-size:var(--text-m);font-weight:700}
.fo-lst-core-price-text{margin:0;font-size:var(--text-m);line-height:1.5;color:var(--text-on-dark)}
.fo-lst-core-link{align-self:flex-start;display:inline-flex;align-items:center;gap:var(--space-2xs);font-size:var(--text-m);font-weight:700;color:var(--text-on-dark);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.fo-lst-core-link:hover{color:var(--text-on-dark)}
.fo-lst-core-foot{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-s);text-align:center}

/* ---------- Social Media oder Meta Ads? ---------- */
.fo-lst-vs{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-l);align-items:stretch}
.fo-lst-vs-col{display:flex;flex-direction:column;row-gap:var(--space-s);padding:var(--card-pad);border-radius:var(--radius-l);background:var(--surface-raised);box-shadow:var(--shadow-card)}
.fo-lst-vs-title{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-l);line-height:1.15;letter-spacing:3px;color:var(--text-heading)}
.fo-lst-vs-or{align-self:center;justify-self:center;display:grid;place-items:center;width:56px;height:56px;border-radius:50%;font-family:var(--font-display);font-size:var(--text-m);letter-spacing:2px;text-transform:uppercase;color:var(--text-on-dark);background:var(--gradient-hero)}
.fo-lst-vs-both{margin:0 auto;max-width:62ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body);text-align:center;text-wrap:pretty}

/* ---------- Weitere Leistungen ---------- */
.fo-lst-more-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--grid-gap)}
.fo-lst-more{display:flex;flex-direction:column;row-gap:var(--space-s);padding:var(--card-pad);border-radius:var(--radius-l);background:var(--surface-raised);box-shadow:var(--shadow-card);color:var(--text-body);text-decoration:none;transition:transform .42s cubic-bezier(.16,1,.3,1),box-shadow .42s ease}
.fo-lst-more:hover{color:var(--text-body);transform:translateY(-4px);box-shadow:var(--shadow-raised)}
.fo-lst-more-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-2xs)}
.fo-lst-more-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:50%;color:var(--white)}
.fo-lst-more-icon svg{width:30px;height:30px}
.fo-lst-more-icon-teal{background:var(--blue-d-1)}
.fo-lst-more-icon-pink{background:var(--service-4)}
.fo-lst-more-icon-navy{background:var(--service-5)}
.fo-lst-more-arrow{color:var(--text-link);transform:rotate(-45deg);transition:transform .42s cubic-bezier(.16,1,.3,1)}
.fo-lst-more:hover .fo-lst-more-arrow{transform:rotate(0)}
.fo-lst-more-title{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-l);line-height:1.15;letter-spacing:3px;color:var(--text-heading)}
.fo-lst-more-text{margin:0;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body);text-wrap:pretty}
.fo-lst-more-fit{margin:auto 0 0;padding-top:var(--space-s);border-top:1px solid var(--border-subtle);font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body);text-wrap:pretty}
.fo-lst-more-note{margin:0 auto;max-width:62ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body);text-align:center;text-wrap:pretty}

/* ---------- Marketing-Check (Ergänzung zu .fo-check) ---------- */
.fo-lst-check-art{display:none}
.fo-lst-check-planet{width:clamp(190px,20vw,280px);height:auto;animation:fo-lst-float 9s ease-in-out infinite}
@keyframes fo-lst-float{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}

/* ---------- Desktop (≥ 940px) ---------- */
@media (min-width:940px){
  .fo-lst-way-grid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
  .fo-lst-way-photo{min-height:0}
  .fo-lst-core-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-lst-core{padding:var(--space-3xl)}
  .fo-lst-vs{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr)}
  .fo-lst-more-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fo-lst-check-grid{grid-template-columns:minmax(0,1.6fr) minmax(0,.6fr)}
  .fo-lst-check-art{display:flex;justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  .fo-lst-check-planet{animation:none !important}
}

/* ===== css/pages/recruiting.css ===== */
/* FilmOrbit — Seite „Recruiting“ (/leistungen/recruiting/).
   Gemeinsame Bausteine (Gedanken-Karten, dunkle Sektion, Warum-Raster, Preise, FAQ, Abschluss)
   kommen aus social-media-advertising.css (.fo-ads-…). Umbrüche: 900px und 1120px. */

.fo-rec-page{overflow-x:clip}
.fo-rec-mt-2xs{margin-top:var(--space-2xs)}
.fo-rec-mw-60ch{max-width:60ch}
.fo-rec-center{margin:0 auto;text-align:center}

/* ---------- Was ist Social Recruiting? ---------- */
.fo-rec-def-head{display:flex;flex-direction:column;row-gap:var(--space-xl)}
.fo-rec-def-box{background:var(--surface-sunken);border-radius:var(--radius-l);padding:var(--space-2xl);display:flex;flex-direction:column;align-items:center;row-gap:var(--space-s);text-align:center}
.fo-rec-badge{font-size:var(--text-s);font-weight:700;color:var(--purple);background:var(--white);border-radius:999px;padding:6px 14px}
.fo-rec-def-text{margin:0;max-width:72ch;font-size:var(--text-l);line-height:1.5;color:var(--text-body);text-wrap:pretty}
.fo-rec-def-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3xl) var(--space-4xl);align-items:center}
.fo-rec-orbit-col{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-l)}
.fo-rec-orbit{position:relative;width:100%;max-width:330px;aspect-ratio:1}
.fo-rec-ring-outer{position:absolute;inset:4%;border-radius:50%;border:1.5px dashed var(--neutral-300)}
.fo-rec-ring-inner{position:absolute;inset:29.5%;border-radius:50%;border:1.5px dashed var(--blue)}
.fo-rec-dot{position:absolute;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:var(--blue)}
.fo-rec-dot-inner{background:var(--blue-d-1)}
.fo-rec-orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;row-gap:6px}
.fo-rec-orbit-planet{width:112px;height:auto;display:block}
.fo-rec-orbit-label{position:absolute;left:50%;top:61%;transform:translateX(-50%);font-weight:700;font-size:var(--text-s);color:var(--text-heading);white-space:nowrap}
.fo-rec-orbit-pill{position:absolute;left:50%;font-weight:600;font-size:var(--text-s);color:var(--text-body);background:var(--white);border-radius:999px;padding:4px 12px;white-space:nowrap;box-shadow:var(--shadow-raised)}
.fo-rec-orbit-pill-inner{top:24%;transform:translateX(-50%)}
.fo-rec-orbit-pill-outer{top:0;transform:translate(-50%,-30%)}
.fo-rec-legend{display:flex;flex-direction:column;row-gap:8px}
.fo-rec-legend-item{display:flex;align-items:center;gap:10px;font-size:var(--text-s);color:var(--text-body)}
.fo-rec-legend-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--blue)}
.fo-rec-legend-dot-dark{background:var(--blue-d-1)}

/* ---------- „Wir suchen dich“ ---------- */
.fo-rec-band{max-width:var(--container-max);margin:0 auto;background:var(--surface-sunken);border-radius:var(--radius-l);padding:var(--space-xl) var(--space-l);display:flex;flex-direction:column;row-gap:var(--space-3xl)}
.fo-rec-compare{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xl) var(--space-2xl)}
.fo-rec-compare-col{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-l)}
.fo-rec-compare-real{order:-1}
.fo-rec-fake{width:300px;max-width:100%;aspect-ratio:1;background:#fff;border-radius:var(--radius-m);overflow:hidden;display:flex;flex-direction:column;filter:grayscale(1);opacity:.6;transform:rotate(-3deg);box-shadow:0 10px 30px -18px rgba(5,13,15,.4)}
.fo-rec-fake-title{padding:16px 16px 10px;font-family:var(--font-body);font-weight:800;font-size:26px;line-height:1;color:#050505}
.fo-rec-fake-photo{flex:1;margin:0 16px;background:#d9d9d9;border-radius:6px;position:relative;overflow:hidden}
.fo-rec-fake-body{position:absolute;bottom:-14%;width:30%;aspect-ratio:1 / 1.4;border-radius:50% 50% 8px 8px}
.fo-rec-fake-head{position:absolute;bottom:44%;width:18%;aspect-ratio:1;border-radius:50%}
.fo-rec-fake-list{padding:12px 16px 16px;display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;font-weight:600;color:#050505}
.fo-rec-tag{font-weight:700;font-size:var(--text-s);border-radius:999px;padding:8px 16px}
.fo-rec-tag-grey{color:var(--text-body);background:var(--white);transform:rotate(-2deg)}
.fo-rec-tag-blue{color:#fff;background:var(--blue-d-1);transform:rotate(2deg)}
.fo-rec-compare-arrow{flex:none;margin-bottom:0;transform:rotate(-80deg)}
.fo-rec-real-img{width:300px;max-width:100%;aspect-ratio:1;height:auto;display:block;border-radius:var(--radius-m);transform:rotate(2deg);box-shadow:0 30px 60px -28px rgba(5,13,15,.55)}
.fo-rec-strong{font-weight:700}

/* ---------- Stellen-Check ---------- */
.fo-rec-check-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:var(--space-2xl) var(--space-4xl);align-items:center}
.fo-rec-chips{display:flex;flex-wrap:wrap;gap:8px;padding-top:var(--space-2xs)}
.fo-rec-chip{font-weight:600;font-size:var(--text-s);color:var(--text-body);background:var(--surface-sunken);border-radius:999px;padding:8px 14px}
.fo-rec-lights{background:var(--surface-sunken);border-radius:var(--radius-l);padding:var(--space-s) var(--space-xl);display:flex;flex-direction:column}
.fo-rec-lights-head{padding:var(--space-l) 0 var(--space-m);border-bottom:1px solid var(--neutral-200);display:flex;flex-direction:column;row-gap:6px}
.fo-rec-light{padding:var(--space-l) 0;display:grid;grid-template-columns:14px minmax(0,1fr);column-gap:var(--space-m);align-items:start}
.fo-rec-light + .fo-rec-light{border-top:1px solid var(--neutral-200)}
.fo-rec-light-dot{width:14px;height:14px;margin-top:6px;border-radius:50%}
.fo-rec-light-green{background:#5fae6e}
.fo-rec-light-yellow{background:#e0b84a}
.fo-rec-light-red{background:var(--red)}
.fo-rec-light-copy{display:flex;flex-direction:column;row-gap:4px}
.fo-rec-light-title{font-weight:700;font-size:var(--text-l);color:var(--text-body)}
.fo-rec-light-text{font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body);text-wrap:pretty}

/* ---------- So funktioniert es (dunkel) ---------- */
.fo-rec-flow-art{height:150px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.fo-rec-flow-svg{width:100%;max-width:240px;height:auto;overflow:visible}
.fo-ads-glow-title.fo-rec-glow-title{text-wrap:wrap}
.fo-ads-glow-text.fo-rec-glow-text{max-width:34ch}
.fo-rec-text-cols{display:grid;grid-template-columns:1fr;gap:var(--space-m) 64px;align-items:start}
.fo-rec-link-light{font-weight:700;color:var(--blue-l-1)}
.fo-rec-link-light:hover{color:var(--blue-l-1)}
.fo-rec-sweep{transform-origin:130px 76px;animation:fo-rc-sweep 6s linear infinite}
.fo-rec-sweep-fast{transform-origin:190px 84px;animation:fo-rc-sweep 4s linear infinite}
.fo-rec-blink{animation:fo-rc-blink 2s ease-in-out infinite}
.fo-rec-blink-slow{animation:fo-rc-blink 3s ease-in-out infinite}
.fo-rec-lift{animation:fo-rc-lift 3.4s ease-in-out infinite}
.fo-rec-wave{transform-origin:130px 72px;animation:fo-rc-wave 3s ease-out infinite}

/* ---------- Bewerbungsfunnel ---------- */
.fo-rec-funnel-sec{padding:var(--space-5xl) var(--section-x)}
.fo-rec-funnel-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3xl) var(--space-4xl);align-items:start}
.fo-rec-phone-col{order:2;display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m)}
.fo-rec-funnel-copy{order:1;display:flex;flex-direction:column;row-gap:var(--space-m)}
.fo-rec-phone-box{position:relative;width:258px;height:525px}
.fo-rec-phone-planet{position:absolute;right:-150px;top:70px;width:240px;height:auto;pointer-events:none}
.fo-rec-phone-frame{position:relative;width:100%;height:100%;background:var(--black);border-radius:var(--radius-xl);padding:10px;box-shadow:0 40px 80px -40px rgba(5,13,15,.55)}
.fo-rec-phone-screen{position:relative;width:100%;height:100%;background:#fff;border-radius:calc(var(--radius-xl) - 8px);overflow:hidden;font-family:var(--font-body);color:#1d2a1f}
.fo-rec-screen{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;display:block;opacity:0;transition:opacity 220ms var(--ease-out)}
.fo-rec-screen.is-active{opacity:1}
.fo-rec-steps{display:flex;flex-direction:column;row-gap:var(--space-l);margin-top:var(--space-s)}
.fo-rec-tabs{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:var(--space-2xs)}
.fo-rec-tabs-line{position:absolute;left:12.5%;right:12.5%;top:23px;border-top:1px dashed var(--neutral-300)}
.fo-rec-tab{position:relative;font:inherit;border:none;background:transparent;cursor:pointer;padding:0;display:flex;flex-direction:column;align-items:center;row-gap:var(--space-xs);text-align:center}
.fo-rec-tab-num{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--text-l);letter-spacing:2px;background:var(--white);color:var(--text-body);box-shadow:inset 0 0 0 1px var(--neutral-300);transition:background 220ms var(--ease-out),color 220ms var(--ease-out),box-shadow 220ms var(--ease-out)}
.fo-rec-tab-label{font-weight:700;font-size:var(--text-m);line-height:1.3;color:var(--text-body);text-wrap:balance;transition:color 220ms var(--ease-out)}
.fo-rec-tab.is-active .fo-rec-tab-num{background:var(--blue-d-1);color:#fff;box-shadow:0 0 0 6px rgba(73,173,195,.16)}
.fo-rec-tab.is-active .fo-rec-tab-label{color:var(--text-heading)}
.fo-rec-step-panels{display:grid;background:var(--surface-sunken);border-radius:var(--radius-m);padding:var(--space-l) var(--space-xl)}
.fo-rec-step-text{grid-area:1 / 1;margin:0;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body);text-wrap:pretty;opacity:0;visibility:hidden;transition:opacity 220ms var(--ease-out)}
.fo-rec-step-text.is-active{opacity:1;visibility:visible}
.fo-rec-vs{display:grid;grid-template-columns:1fr;background:var(--surface-sunken);border-radius:var(--radius-l)}
.fo-rec-vs-cell{padding:var(--space-xl);display:flex;flex-direction:column;row-gap:var(--space-s)}
.fo-rec-vs-cell-b{border-top:1px solid var(--neutral-200)}
.fo-rec-vs-title{font-weight:700;font-size:var(--text-l);color:var(--text-body)}
.fo-rec-vs-list{display:flex;flex-wrap:wrap;gap:var(--space-2xs) var(--space-l)}
.fo-rec-vs-strike{font-size:var(--text-m);color:var(--text-body);text-decoration:line-through}
.fo-rec-vs-pro{display:flex;align-items:center;gap:8px;font-size:var(--text-m);color:var(--text-body)}

/* ---------- Referenz Stadt Dorsten (ausgeblendet bis zur Freigabe) ---------- */
.fo-rec-ref{max-width:var(--container-max);margin:0 auto;position:relative;overflow:hidden;border-radius:var(--radius-xl);background:linear-gradient(135deg,#2F8CBD 0%,#3D9CAD 42%,#57A188 70%,#558F58 100%);color:#fff;padding:var(--space-2xl) var(--space-l)}
.fo-rec-ref-ring{position:absolute;right:-12%;top:-10%;width:60%;max-width:420px;height:auto;opacity:.22;pointer-events:none}
.fo-rec-ref-inner{position:relative;display:flex;flex-direction:column;align-items:flex-start;row-gap:var(--space-m)}
.fo-rec-ref-logos{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-m)}
.fo-rec-ref-claim{width:88px;height:88px;flex:none}
.fo-rec-ref-logo{height:40px;width:auto;flex:none}
.fo-rec-ref-kicker{font-weight:600;font-size:var(--text-m);color:#fff}
.fo-rec-ref-title{margin:0;color:#fff;text-wrap:balance}
.fo-rec-ref-text{margin:0;max-width:64ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:#fff;text-wrap:pretty}

/* ---------- CTA Marketing-Check nach dem Funnel ---------- */
.fo-rec-cta{position:relative;overflow:hidden;max-width:var(--container-max);margin:0 auto;padding:var(--space-3xl) var(--space-l);border-radius:var(--radius-xl);background:var(--gradient-hero);color:var(--text-on-dark);display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center}
.fo-rec-cta > :not(.fo-fill){position:relative}
.fo-rec-cta-title{margin:0;font-size:var(--text-2xl);line-height:1.05;letter-spacing:3px;color:var(--text-on-dark);text-wrap:balance}
.fo-rec-cta-text{margin:0;max-width:60ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}

/* ---------- Dauerhaft suchen: Kampagnen-Brücke ---------- */
.fo-rec-bridge{max-width:var(--container-max);margin:0 auto;background:var(--surface-card);border-radius:var(--radius-l);box-shadow:var(--shadow-raised);padding:var(--space-xl) var(--space-l);display:grid;grid-template-columns:1fr;gap:var(--space-2xl) var(--space-4xl);align-items:center}
.fo-rec-bridge-copy{order:2;display:flex;flex-direction:column;row-gap:var(--space-m);align-items:flex-start}
.fo-rec-bridge-art{order:1;justify-self:center;position:relative;width:100%;max-width:300px;aspect-ratio:1;margin:var(--space-l) 0;--fo-rec-bridge-r:30%}
.fo-rec-bridge-ring{position:absolute;inset:12%;border-radius:50%;border:1.5px dashed var(--neutral-300)}
.fo-rec-bridge-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;row-gap:8px}
.fo-rec-bridge-planet{width:80px;height:auto;display:block}
.fo-rec-bridge-name{font-weight:700;font-size:var(--text-s);color:var(--text-heading);white-space:nowrap}
.fo-rec-bridge-pill{position:absolute;left:calc(50% + var(--fo-rec-bridge-r) * var(--cx));top:calc(50% + var(--fo-rec-bridge-r) * var(--cy));transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;row-gap:4px}
.fo-rec-bridge-hl{font-size:var(--text-xs);font-weight:700;color:var(--text-body)}
.fo-rec-bridge-label{font-weight:600;font-size:11px;line-height:1.25;text-align:center;max-width:100px;width:max-content;color:var(--text-body);background:var(--surface-sunken);border-radius:999px;padding:6px 12px}
.fo-rec-bridge-label-hl{color:#fff;background:var(--blue-d-1)}

/* ---------- Warum wir: Karten richten Icon, Titel und Text zeilenweise aus ---------- */
.fo-ads-why-card.fo-rec-why-card{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}

/* ---------- Für wen ---------- */
.fo-rec-divider{width:100%;max-width:760px;height:1px;background:var(--neutral-200)}
.fo-rec-price-extra{margin:0;text-align:center;font-weight:600;font-size:var(--text-s);color:var(--text-on-dark)}

/* ---------- Preise: Planeten ---------- */
.fo-rec-planet-pluto{width:72px;height:72px;margin-bottom:24px}
.fo-rec-planet-venus{width:112px;height:112px}
.fo-rec-planet-uranus{width:160px;height:160px}

@keyframes fo-rc-blink{0%,45%{opacity:.25}50%,95%{opacity:1}100%{opacity:.25}}
@keyframes fo-rc-sweep{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fo-rc-wave{0%{opacity:0;transform:scale(.72)}30%{opacity:.95}100%{opacity:0;transform:scale(1.25)}}
@keyframes fo-rc-lift{0%,100%{transform:translateY(4px)}50%{transform:translateY(-8px)}}

@media (min-width:900px){
  .fo-rec-page .fo-hero-split .fo-hero-h1{align-items:flex-start}
  .fo-rec-ref{padding:var(--space-4xl) var(--space-3xl)}
  .fo-rec-cta{padding:var(--space-4xl) var(--space-3xl)}
  .fo-rec-def-grid{grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .fo-rec-orbit{max-width:440px}
  .fo-rec-orbit-planet{width:150px}
  .fo-rec-band{padding:var(--space-3xl)}
  .fo-rec-compare{flex-direction:row}
  .fo-rec-compare-real{order:0}
  .fo-rec-compare-arrow{margin-bottom:60px;transform:none}
  .fo-rec-check-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-rec-text-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-rec-funnel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-rec-phone-col{order:1}
  .fo-rec-funnel-copy{order:2}
  .fo-rec-vs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-rec-vs-cell-b{border-top:none;border-left:1px solid var(--neutral-200)}
  .fo-rec-bridge{padding:var(--space-3xl);grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)}
  .fo-rec-bridge-copy{order:1}
  .fo-rec-bridge-art{order:2;max-width:340px;--fo-rec-bridge-r:36%}
  .fo-rec-bridge-planet{width:110px}
  .fo-rec-bridge-label{font-size:var(--text-s);max-width:170px}
}
@media (min-width:1120px){
  .fo-rec-bridge-art{max-width:420px}
}
@media (prefers-reduced-motion:reduce){
  .fo-rec-sweep,.fo-rec-sweep-fast,.fo-rec-blink,.fo-rec-blink-slow,.fo-rec-lift,.fo-rec-wave{animation:none !important}
  .fo-rec-screen,.fo-rec-step-text,.fo-rec-tab-num,.fo-rec-tab-label{transition:none}
}

/* ===== css/pages/social-media-advertising.css ===== */
/* FilmOrbit — Seite „Social Media Advertising“ (/leistungen/social-media-advertising/).
   Die Bausteine Gedanken-Karten, dunkle Sektion, Warum-Raster, Tipp, Preise mit Planeten,
   Zielgruppen, FAQ-Liste und Abschluss-Panel nutzt auch die Recruiting-Seite.
   Umbrüche wie im Prototyp: 900px (wide) und 1120px (wide3). */

/* ---------- Kleine Helfer ---------- */
.fo-ads-center-text{text-align:center}
.fo-ads-on-dark{color:var(--text-on-dark)}
.fo-ads-mw-620{max-width:620px}
.fo-ads-mw-640{max-width:640px}
.fo-ads-mw-760{max-width:760px}
.fo-ads-mw-66ch{max-width:66ch}
.fo-ads-stack-m{display:flex;flex-direction:column;row-gap:var(--space-m)}
.fo-ads-head-m{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center}
.fo-ads-pt-2xs{padding-top:var(--space-2xs)}
.fo-ads-link{font-weight:700;color:var(--blue-d-1)}
.fo-ads-link:hover{color:var(--blue-d-2)}

/* ---------- Problem + Gedanken-Karten ---------- */
.fo-ads-problem{padding:calc(var(--space-5xl) * 1.15) var(--section-x) var(--section-gap)}
.fo-ads-problem-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:var(--space-4xl) 64px;align-items:start}
.fo-ads-problem-copy{display:flex;flex-direction:column;row-gap:var(--space-m);max-width:680px}
.fo-ads-thoughts{display:flex;flex-direction:column;row-gap:var(--space-m);padding-top:var(--space-l);padding-right:28px}
.fo-ads-thought{background:var(--surface-raised);border-radius:var(--radius-m);box-shadow:var(--shadow-raised);padding:var(--space-l) var(--space-xl);font-size:var(--text-l);line-height:1.4;color:var(--text-body);text-wrap:pretty;transition:transform .3s ease}

/* ---------- Warum die Anzeige zählt: Feed im Smartphone ---------- */
.fo-ads-even{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:var(--space-3xl) var(--space-4xl);align-items:center}
.fo-ads-feed-wrap{display:flex;flex-direction:column-reverse;align-items:center;justify-content:center;gap:var(--space-l)}
.fo-ads-feed-phone{flex:none;width:280px;height:440px;background:var(--black);border-radius:var(--radius-xl);padding:10px;box-shadow:0 30px 70px -30px rgba(5,13,15,.55)}
.fo-ads-feed-screen{position:relative;width:100%;height:100%;border-radius:calc(var(--radius-xl) - 8px);overflow:hidden;background:#f0f2f5}
.fo-ads-feed-list{position:absolute;left:0;right:0;top:-492px;display:flex;flex-direction:column;row-gap:8px;font-family:var(--font-body);text-align:left}
.fo-ads-post{position:relative;z-index:1;background:#fff;margin:0 10px;filter:grayscale(1);opacity:.3;overflow:hidden;display:flex;flex-direction:column}
.fo-ads-post-real{z-index:2;margin:0 2px;filter:none;opacity:1;box-shadow:0 0 0 2px var(--blue),0 18px 40px -12px rgba(5,13,15,.45);border-radius:10px}
.fo-ads-post-head{display:flex;align-items:center;gap:8px;padding:10px 10px 6px}
.fo-ads-post-avatar{width:26px;height:26px;border-radius:50%;background:#cfcfcf;flex:none}
.fo-ads-post-avatar-blue{background:var(--blue)}
.fo-ads-post-meta{display:flex;flex-direction:column;line-height:1.2}
.fo-ads-post-name{font-size:10.5px;font-weight:700;color:#050505}
.fo-ads-post-sponsored{font-size:9px;color:#65676b}
.fo-ads-post-lead{margin:0;padding:0 10px 15px;font-size:11px;font-weight:400;line-height:1.35;color:#050505}
.fo-ads-post-text{margin:0;padding:0 10px 8px;font-size:11px;font-weight:400;line-height:1.35;color:#050505}
.fo-ads-post-text-bold{font-size:12px;font-weight:800}
.fo-ads-post-img{width:100%;aspect-ratio:1;object-fit:cover;object-position:top;display:block}
.fo-ads-post-ph{height:140px;background:#d9d9d9;display:flex;align-items:center;justify-content:center}
.fo-ads-post-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;background:#f0f2f5;padding:8px 10px}
.fo-ads-post-headline{font-size:10px;font-weight:700;color:#050505}
.fo-ads-post-cta{flex:none;font-size:9.5px;font-weight:700;color:#050505;background:#e4e6eb;border-radius:6px;padding:5px 8px}
.fo-ads-feed-note{display:flex;flex-direction:row;align-items:center;gap:6px;margin-top:0}
.fo-ads-feed-arrow{flex:none;transform:rotate(-110deg)}
.fo-ads-feed-note-text{font-weight:600;font-size:var(--text-m);color:var(--text-body);transform:rotate(-3deg);white-space:nowrap}

/* ---------- Anzeigen-Laufband ---------- */
.fo-ads-marquee-head{max-width:var(--container-max);margin:0 auto var(--space-3xl)}
.fo-ads-marquee{max-width:1600px;margin:0 auto;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.fo-ads-marquee-track{display:flex;gap:var(--space-l);padding-right:var(--space-l);width:max-content;align-items:flex-start;animation:fo-marquee 70s linear infinite}
.fo-ads-marquee-track:hover{animation-play-state:paused}
.fo-ads-marquee-img{flex:none;width:220px;height:auto;display:block;border-radius:var(--radius-m);box-shadow:0 20px 40px -24px rgba(5,13,15,.4)}

/* ---------- Dunkle Sektion mit Sternen ---------- */
.fo-ads-dark{position:relative;overflow:hidden;background:linear-gradient(172deg,var(--blue-d-2) 0%,#0a1f24 55%,var(--black) 100%);color:var(--text-on-dark);padding:var(--space-5xl) var(--section-x)}
.fo-ads-dark-mb{margin-bottom:var(--section-gap)}
.fo-ads-stars{position:absolute;inset:0;pointer-events:none}
.fo-ads-stars-dim{opacity:.7}
.fo-ads-dark-inner{position:relative;max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;row-gap:var(--space-4xl)}
.fo-ads-gap-3xl{row-gap:var(--space-3xl)}
.fo-ads-lead-dark{margin:var(--space-2xs) 0 0;max-width:720px;font-size:var(--text-l);line-height:1.5;color:var(--text-on-dark);text-wrap:pretty}
.fo-ads-offer-grid{display:grid;grid-template-columns:1fr;gap:var(--space-l)}
.fo-ads-glow-card{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center;background:linear-gradient(180deg,rgba(73,173,195,.2) 0%,rgba(73,173,195,.06) 100%);box-shadow:inset 0 0 0 1px rgba(134,200,215,.24);border-radius:var(--radius-l);padding:var(--space-2xl) var(--space-xl)}
.fo-ads-glow-art{height:130px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.fo-ads-glow-svg{width:100%;max-width:230px;height:auto;display:block;overflow:visible}
.fo-ads-glow-num{flex:none;width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(134,200,215,.6);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--text-l);letter-spacing:2px;color:var(--blue-l-1)}
.fo-ads-glow-title{margin:var(--space-2xs) 0 0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--text-on-dark);text-wrap:balance}
.fo-ads-glow-text{margin:0;max-width:44ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}
.fo-ads-pulse{animation:fo-ads-pulse 1.2s ease-in-out infinite}
.fo-ads-pulse-slow{animation:fo-ads-pulse 2.4s ease-in-out infinite}
.fo-ads-dart{animation:fo-ads-dart 3s ease-out infinite}
.fo-ads-beam{animation:fo-ads-beam .9s linear infinite}
.fo-ads-pop{animation:fo-ads-pop 2.6s ease-in-out infinite}
.fo-ads-pop-b{animation:fo-ads-pop 2.8s ease-in-out infinite}
.fo-ads-drop{animation:fo-ads-drop 2.4s ease-in infinite}

/* ---------- Warum wir ---------- */
.fo-ads-why-grid{display:grid;grid-template-columns:1fr;gap:var(--space-s)}
.fo-ads-why-card{border-radius:var(--radius-m);padding:var(--space-xl);color:var(--white);display:flex;flex-direction:column;row-gap:var(--space-s)}
.fo-ads-bg-service-1{background:var(--service-1)}
.fo-ads-bg-blue-d-1{background:var(--blue-d-1)}
.fo-ads-bg-service-4{background:var(--service-4)}
.fo-ads-bg-purple{background:var(--purple)}
.fo-ads-why-icon{width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(248,248,248,.5);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-2xs)}
.fo-ads-why-title{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--white);text-wrap:balance}
.fo-ads-why-text{margin:0;max-width:70ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}
.fo-ads-tip{grid-column:1 / -1;position:relative;overflow:hidden;background:var(--gradient-hero);border-radius:var(--radius-m);padding:var(--space-xl) var(--space-2xl);display:grid;grid-template-columns:1fr;gap:var(--space-l) var(--space-2xl);align-items:center;color:var(--text-on-dark)}
.fo-ads-tip-img{width:96px;height:auto;display:block}
.fo-ads-tip-copy{display:flex;flex-direction:column;row-gap:var(--space-2xs)}
.fo-ads-tip-label{font-weight:600;font-size:var(--text-m);color:var(--text-on-dark)}
.fo-ads-tip-text{margin:0;max-width:80ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}
.fo-ads-tip-link{color:var(--text-on-dark);font-weight:700;text-decoration:underline}
.fo-ads-tip-link:hover{color:var(--text-on-dark)}

/* ---------- Preise ---------- */
.fo-ads-price{position:relative;overflow:hidden;margin-bottom:var(--section-gap);scroll-margin-top:90px;background:linear-gradient(172deg,#2f1d45 0%,#1b1130 55%,#0d0a18 100%);color:var(--text-on-dark);padding:var(--space-5xl) var(--section-x)}
.fo-ads-price-lead{margin:0;max-width:760px;font-size:var(--text-l);line-height:1.5;color:var(--text-on-dark);text-wrap:pretty}
.fo-ads-price-block{display:flex;flex-direction:column;row-gap:var(--space-l)}
.fo-ads-tiers{display:grid;grid-template-columns:1fr;gap:var(--space-l);align-items:stretch}
.fo-ads-tier{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center;border-radius:var(--radius-l);padding:var(--space-xl) var(--space-l) var(--space-2xl);background:rgba(248,248,248,.05);box-shadow:inset 0 0 0 1px rgba(248,248,248,.14)}
.fo-ads-tier-featured{background:rgba(134,200,215,.12);box-shadow:inset 0 0 0 1px rgba(134,200,215,.55)}
.fo-ads-tier-stage{position:relative;height:200px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.fo-ads-tier-stage-col{flex-direction:column;align-items:center;justify-content:flex-end;row-gap:14px}
.fo-ads-tier-badge{font-weight:600;font-size:var(--text-xs);color:var(--text-on-dark);background:rgba(134,200,215,.18);border-radius:999px;padding:5px 12px}
.fo-ads-planet{position:relative;display:flex;align-items:center;justify-content:center;transform:scale(.8);transform-origin:center bottom}
.fo-ads-planet-mars{width:84px;height:84px;margin-bottom:20px}
.fo-ads-planet-neptun{width:124px;height:124px}
.fo-ads-planet-saturn{width:170px;height:150px}
.fo-ads-orbit-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(248,248,248,.24)}
.fo-ads-orbit-ring-blue{border-color:rgba(134,200,215,.7)}
.fo-ads-spin{position:absolute;inset:0;animation:fo-ads-spin 14s linear infinite}
.fo-ads-moon{position:absolute;border-radius:50%}
.fo-ads-planet-ball{position:relative;border-radius:50%;overflow:hidden}
.fo-ads-planet-spot{position:absolute;border-radius:50%}
.fo-ads-planet-shade{position:absolute;inset:0;background:radial-gradient(circle at 70% 75%,rgba(5,13,15,.45),transparent 60%)}
.fo-ads-tier-copy{display:flex;flex-direction:column;row-gap:4px}
.fo-ads-tier-name{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--text-on-dark)}
.fo-ads-tier-level{font-weight:600;font-size:var(--text-s);color:var(--text-on-dark)}
.fo-ads-tier-price{font-weight:700;font-size:var(--text-l);color:#fff}
.fo-ads-tier-meta{font-size:var(--text-s);color:var(--text-on-dark)}
.fo-ads-tier-desc{max-width:32ch;margin-top:4px;font-size:var(--text-s);line-height:1.5;color:var(--text-on-dark)}
.fo-ads-strong{font-weight:700}
.fo-ads-fineprint{margin:0;text-align:center;font-size:var(--text-s);line-height:1.6;color:var(--text-on-dark)}
.fo-ads-price-q{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--text-on-dark);text-wrap:balance}

/* ---------- Für wen ---------- */
.fo-ads-aud-grid{display:grid;grid-template-columns:1fr;gap:var(--space-s)}
.fo-ads-aud-card{background:var(--surface-sunken);border-radius:var(--radius-m);padding:var(--space-xl);display:flex;flex-direction:column;row-gap:var(--space-s)}
.fo-ads-aud-icon{display:block;color:var(--blue-d-1)}
.fo-ads-aud-title{font-size:var(--text-l);font-weight:700;line-height:1.3;color:var(--text-body)}

/* ---------- Abschluss-Panel ---------- */
.fo-ads-panel{max-width:var(--container-max);margin:0 auto;position:relative;overflow:hidden;background:var(--gradient-space);border-radius:var(--radius-xl);color:var(--text-on-dark);padding:var(--space-xl) var(--space-l)}
.fo-ads-panel-stars{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.fo-ads-panel-grid{position:relative;display:grid;grid-template-columns:1fr;gap:var(--space-2xl);align-items:center}
.fo-ads-panel-copy{display:flex;flex-direction:column;row-gap:var(--space-m);align-items:flex-start}
.fo-ads-panel-planet-wrap{display:flex;justify-content:flex-start}
.fo-ads-panel-planet{width:140px;height:auto;animation:fo-ads-float 9s ease-in-out infinite}

@keyframes fo-ads-float{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}
@keyframes fo-ads-pulse{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes fo-ads-pop{0%,60%,100%{transform:translateY(0)}70%{transform:translateY(-5px)}}
@keyframes fo-ads-beam{to{stroke-dashoffset:-18}}
@keyframes fo-ads-dart{0%{transform:translate(40px,-28px);opacity:0}25%{opacity:1}55%,85%{transform:translate(0,0);opacity:1}100%{transform:translate(0,0);opacity:0}}
@keyframes fo-ads-drop{0%{transform:translateY(0);opacity:0}20%{opacity:1}80%{transform:translateY(88px);opacity:1}100%{transform:translateY(96px);opacity:0}}
@keyframes fo-ads-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ---------- Umbau Conversion (nur Meta-Ads-Seite) ---------- */
.fo-ads-hero-pricelink{font-size:var(--text-s);font-weight:700;color:var(--text-on-dark);text-decoration:underline;text-underline-offset:3px}
.fo-ads-hero-pricelink:hover{color:var(--blue-l-1)}
.fo-ads-hero-sample{margin-top:2px;font-size:10px;font-weight:600;letter-spacing:.3px;color:var(--text-muted)}
.fo-ads-panel-copy .fo-actions{justify-content:flex-start}
.fo-ads-link-light{font-weight:700;color:var(--text-on-dark);text-decoration:underline;text-underline-offset:3px}
.fo-ads-link-light:hover{color:var(--blue-l-1)}
.fo-ads-dark-note{margin:0;text-align:center;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark)}
.fo-ads-cta{max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:var(--space-l);text-align:center;background:var(--surface-sunken);border-radius:var(--radius-xl);padding:var(--space-2xl) var(--space-l)}
.fo-ads-cta-text{margin:0;max-width:52ch;font-size:var(--text-l);font-weight:600;line-height:1.45;color:var(--text-body);text-wrap:balance}
.fo-ads-cta-actions{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:var(--space-s) var(--space-l)}

/* ---------- ab 900px (wide) ---------- */
@media (min-width:900px){
  .fo-ads-problem-grid{grid-template-columns:1.25fr .85fr}
  .fo-ads-thought{transform:rotate(var(--rot)) translateX(var(--shift))}
  .fo-ads-thought:hover{transform:rotate(0deg) translateX(0)}
  .fo-ads-even{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-ads-feed-phone{height:560px}
  .fo-ads-feed-list{top:-450px}
  .fo-ads-marquee-img{width:300px}
  .fo-ads-offer-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-ads-span-b{grid-column:span 2}
  .fo-ads-why-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fo-ads-col-2{grid-column:span 2}
  .fo-ads-tip{grid-template-columns:96px minmax(0,1fr)}
  .fo-ads-tiers{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fo-ads-planet{transform:scale(1)}
  .fo-ads-aud-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fo-ads-panel{padding:var(--space-3xl)}
  .fo-ads-panel-grid{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}
  .fo-ads-panel-planet-wrap{justify-content:flex-end}
  .fo-ads-panel-planet{width:clamp(170px,18vw,240px)}
  .fo-hero-split .fo-ads-hero-h1{align-items:flex-start}
  .fo-ads-cta{flex-direction:row;justify-content:space-between;text-align:left;padding:var(--space-2xl) var(--space-3xl)}
  .fo-ads-cta-actions{flex:none}
}

/* ---------- ab 1120px (wide3) ---------- */
@media (min-width:1120px){
  .fo-ads-feed-wrap{flex-direction:row}
  .fo-ads-feed-note{flex-direction:column;margin-top:-10px}
  .fo-ads-feed-arrow{transform:none}
  .fo-ads-offer-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fo-ads-span-a{grid-column:span 2}
  .fo-ads-span-c{grid-column:span 3}
}

@media (prefers-reduced-motion:reduce){
  .fo-ads-marquee-track,.fo-ads-panel-planet,.fo-ads-spin,.fo-ads-pulse,.fo-ads-pulse-slow,.fo-ads-dart,.fo-ads-beam,.fo-ads-pop,.fo-ads-pop-b,.fo-ads-drop{animation:none !important}
  .fo-ads-thought{transition:none}
}

/* ===== css/pages/social-media-marketing.css ===== */
/* FilmOrbit — Leistungsseite Social Media Marketing (/leistungen/social-media-marketing/)
   Umbrüche wie im Prototyp (SmmPage): 900px (wide), 1120px (wide3), bis 599px (mob).
   Die Hero-Grundlage (.fo-hero-split, .fo-hero-art …), Timeline, Buttons und Sterne kommen aus site.css. */

.fo-smm{overflow-x:clip}

/* ---------- Hilfsklassen ---------- */
.fo-smm-on-dark{color:var(--text-on-dark)}
.fo-smm-white{color:#fff}
.fo-smm-invisible{visibility:hidden}
.fo-smm-op-70{opacity:.7}
.fo-smm-max-62{max-width:62ch}
.fo-smm-max-66{max-width:66ch}
.fo-smm-max-560{max-width:560px}
.fo-smm-max-620{max-width:620px}
.fo-smm-display-xl{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--text-on-dark)}
.fo-smm-dash{animation:fo-smm-dash 18s linear infinite}
.fo-smm-dash-slow{animation:fo-smm-dash 26s linear infinite reverse}

/* ---------- 01 Hero ---------- */
.fo-smm-hero-h1{margin:0;display:flex;flex-direction:column;align-items:center;row-gap:var(--space-s)}
.fo-smm-hero-kicker{font-family:var(--font-body);font-weight:600;font-size:var(--text-m);line-height:1.4;letter-spacing:0;text-transform:none;color:var(--text-on-dark)}
.fo-smm-hero-title{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-4xl);line-height:1.02;letter-spacing:3px;color:var(--text-on-dark)}
.fo-smm-hero-meta{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--space-2xs) var(--space-m);margin-top:var(--space-m);font-size:var(--text-s);color:var(--text-on-dark-muted)}
.fo-smm-rating{display:inline-flex;align-items:center;gap:6px}
.fo-smm-rating-stars{color:#F5C451;letter-spacing:2px}
.fo-smm-rating-text{color:var(--text-on-dark)}
.fo-smm-hero-sep{opacity:.45}
.fo-smm-hero-orbits{position:absolute;right:-120px;top:0;width:700px;height:520px;overflow:visible;pointer-events:none;z-index:0}
.fo-smm-hero-orbits-front{z-index:2}
.fo-smm-tile{position:absolute;z-index:3;object-fit:cover;border-radius:var(--radius-s);--r:0deg;transform:rotate(var(--r));animation:fo-smm-bob 6s ease-in-out infinite;pointer-events:auto;cursor:default;transition:scale 260ms var(--ease-out);box-shadow:0 10px 24px -10px rgba(5,13,15,.6)}
.fo-smm-tile:hover{scale:1.18}
.fo-smm-hero-phone{position:absolute;z-index:1;right:80px;top:24px;width:220px;height:465px;background:var(--black);border-radius:var(--radius-xl);padding:10px;box-shadow:0 30px 80px -30px rgba(5,13,15,.7)}
.fo-smm-phone-screen{position:relative;width:100%;height:100%;background:#1c1c22;border-radius:calc(var(--radius-xl) - 8px);overflow:hidden}
.fo-smm-phone-img{width:100%;height:100%;object-fit:cover;display:block}
.fo-smm-notif{position:absolute;z-index:4;transform:rotate(var(--r));background:rgba(255,255,255,.97);border-radius:var(--radius-m);box-shadow:0 18px 40px -16px rgba(5,13,15,.55),0 2px 6px rgba(5,13,15,.12);padding:10px 12px;display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:10px;align-items:start;text-align:left}
.fo-smm-notif-a{right:230px;top:96px;width:190px;--r:-3deg;animation:fo-smm-bob 6.4s ease-in-out -1s infinite}
.fo-smm-notif-b{right:0;top:380px;width:216px;--r:2deg;animation:fo-smm-bob 7.2s ease-in-out -4s infinite}
.fo-smm-notif-icon{width:30px;height:30px;border-radius:8px;background:var(--purple);display:flex;align-items:center;justify-content:center}
.fo-smm-notif-icon img{width:20px;height:20px;object-fit:contain}
.fo-smm-notif-body{display:flex;flex-direction:column;row-gap:2px}
.fo-smm-notif-head{display:flex;justify-content:space-between;gap:8px;font-size:11px;white-space:nowrap;color:var(--text-muted)}
.fo-smm-notif-label{font-weight:600;color:var(--text-heading)}
.fo-smm-notif-text{font-size:12.5px;line-height:1.4;color:var(--text-heading);text-wrap:pretty}

/* ---------- 02 Problem ---------- */
.fo-smm-problem{padding:calc(var(--space-5xl) * 1.15) var(--section-x) var(--section-gap)}
.fo-smm-problem-grid{max-width:var(--container-max);margin:0 auto;display:grid;grid-template-columns:1fr;gap:var(--space-4xl) 64px;align-items:start}
.fo-smm-problem-copy{display:flex;flex-direction:column;row-gap:var(--space-m);max-width:680px}
.fo-smm-thoughts{display:flex;flex-direction:column;row-gap:var(--space-m);padding-top:var(--space-l);padding-right:28px}
.fo-smm-thought{background:var(--surface-raised);border-radius:var(--radius-m);box-shadow:var(--shadow-raised);padding:var(--space-l) var(--space-xl);transform:rotate(0deg) translateX(0);font-size:var(--text-l);line-height:1.4;color:var(--text-heading);text-wrap:pretty;transition:transform .3s ease}

/* ---------- 03 Drei Wege ---------- */
.fo-smm-ways{display:grid;grid-template-columns:1fr;gap:var(--space-l)}
.fo-smm-way{display:grid;background:var(--surface-sunken);border-radius:var(--radius-l);padding:var(--space-xl);color:var(--text-body)}
.fo-smm-way-title{padding-bottom:var(--space-m)}
.fo-smm-way-row{border-top:1px solid var(--border-subtle);padding:var(--space-m) 0;display:flex;flex-direction:column;row-gap:4px}
.fo-smm-way-q{font-weight:600;font-size:var(--text-s);color:var(--neutral-600)}
.fo-smm-way-a{font-size:var(--text-m);line-height:1.5;color:var(--text-body);text-wrap:pretty}
.fo-smm-way-best{order:-1;position:relative;background:var(--gradient-hero);box-shadow:var(--shadow-raised);color:var(--text-on-dark)}
.fo-smm-way-stars{border-radius:inherit;opacity:.5}
.fo-smm-way-best-head{position:relative;padding-bottom:var(--space-m);display:flex;flex-direction:column;row-gap:6px}
.fo-smm-way-best-title{margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-2xl);line-height:1;letter-spacing:3px;color:var(--text-on-dark)}
.fo-smm-way-by{display:flex;align-items:center;gap:8px;font-size:var(--text-s);font-weight:600;color:var(--text-on-dark-muted)}
.fo-smm-way-logo{height:18px;width:auto;display:block}
.fo-smm-way-row-dark{position:relative;border-top-color:var(--border-on-dark)}
.fo-smm-way-row-dark .fo-smm-way-q{color:var(--text-on-dark-muted)}
.fo-smm-way-row-dark .fo-smm-way-a{color:var(--text-on-dark)}
.fo-smm-ways-note{margin:0 auto;max-width:64ch;text-align:center;font-weight:600;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-heading);text-wrap:pretty}

/* ---------- 04 So funktioniert das ---------- */
.fo-smm-flow{position:relative;overflow:hidden;margin-bottom:var(--section-gap);background:linear-gradient(172deg,var(--blue-d-2) 0%,#0a1f24 55%,var(--black) 100%);color:var(--text-on-dark);padding:var(--space-5xl) var(--section-x)}
.fo-smm-flow-inner{position:relative;max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;row-gap:var(--space-4xl)}
.fo-smm-flow-lead{margin:var(--space-2xs) 0 0;max-width:680px;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}
.fo-smm-stations{display:grid;grid-template-columns:1fr;gap:var(--space-l)}
.fo-smm-station{display:flex;flex-direction:column;align-items:center;justify-items:center;align-content:start;row-gap:var(--space-m);text-align:center;background:linear-gradient(180deg,rgba(73,173,195,.2) 0%,rgba(73,173,195,.06) 100%);box-shadow:inset 0 0 0 1px rgba(134,200,215,.24);border-radius:var(--radius-l);padding:var(--space-2xl) var(--space-xl)}
.fo-smm-station-art{height:150px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.fo-smm-station-svg{width:100%;max-width:240px;height:auto;display:block;overflow:visible}
.fo-smm-station-numrow{width:100%;display:flex;align-items:center;justify-content:center;gap:14px}
.fo-smm-station-line{display:none;flex:1;height:0;border-top:1px dashed rgba(248,248,248,.3)}
.fo-smm-station-num{flex:none;width:46px;height:46px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(134,200,215,.6);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:var(--text-l);letter-spacing:2px;color:var(--blue-l-1)}
.fo-smm-station-title{margin:var(--space-2xs) 0 0;color:var(--text-on-dark)}
.fo-smm-station-sub{margin:0;font-weight:600;font-size:var(--text-m);line-height:1.5;color:var(--text-on-dark)}
.fo-smm-station-text{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m)}
.fo-smm-station-p{margin:0;max-width:40ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}

/* ---------- 06 Warum wir ---------- */
.fo-smm-reasons{display:grid;grid-template-columns:1fr;gap:var(--space-s)}
.fo-smm-reason{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius-m);padding:var(--space-xl);color:var(--white);display:flex;flex-direction:column;row-gap:var(--space-s)}
.fo-smm-reason-1{background:var(--service-1)}
.fo-smm-reason-2{background:var(--blue-d-1)}
.fo-smm-reason-3{background:var(--service-4)}
.fo-smm-reason-4{background:var(--purple)}
.fo-smm-reason-icon{position:relative;width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(248,248,248,.5);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-2xs)}
.fo-smm-reason-title{position:relative;margin:0;font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--white);text-wrap:balance}
.fo-smm-reason-body{position:relative;margin:0;max-width:70ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}
.fo-smm-reason-link{font-weight:700;color:#fff;text-decoration:underline}
.fo-smm-reason-link:hover{color:#fff}

/* ---------- 10 Case Dorsten ---------- */
.fo-smm-case{max-width:var(--container-max);margin:0 auto;position:relative;overflow:hidden;border-radius:32px;box-shadow:0 34px 70px -34px rgba(5,13,15,.5);background:linear-gradient(135deg,#2F8CBD 0%,#3D9CAD 42%,#57A188 70%,#558F58 100%);color:#fff;padding:32px}
.fo-smm-case-shade{position:absolute;inset:0;background:rgba(5,13,15,.22);pointer-events:none}
.fo-smm-case-ring{position:absolute;height:auto;pointer-events:none}
.fo-smm-case-ring-a{right:-6%;top:6%;width:40%;opacity:.3}
.fo-smm-case-ring-b{left:-18%;bottom:-34%;width:62%;opacity:.16}
.fo-smm-case-inner{position:relative;display:flex;flex-direction:column;row-gap:var(--space-2xl)}
.fo-smm-case-grid{display:grid;grid-template-columns:1fr;gap:var(--space-2xl) 48px;align-items:start}
.fo-smm-case-copy{order:2;display:flex;flex-direction:column;row-gap:var(--space-m)}
.fo-smm-case-logos{display:flex;align-items:center;gap:var(--space-m);flex-wrap:wrap}
.fo-smm-case-claim{width:104px;height:104px;flex:none}
.fo-smm-case-logo{height:44px;width:auto;flex:none}
.fo-smm-case-kicker{font-weight:600;font-size:var(--text-m);color:rgba(255,255,255,.88)}
.fo-smm-case-p{margin:0;max-width:68ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:rgba(255,255,255,.94);text-wrap:pretty}
.fo-smm-case-photo{position:relative;order:1;align-self:stretch;min-height:clamp(300px,70vw,430px)}
.fo-smm-case-person{position:absolute;right:50%;bottom:calc(-1 * var(--space-2xl));transform:translateX(50%);width:auto;height:clamp(320px,76vw,460px);max-width:none;object-fit:contain;object-position:bottom;filter:drop-shadow(0 26px 38px rgba(5,13,15,.34));pointer-events:none}
.fo-smm-case-rule{height:1px;background:rgba(255,255,255,.32)}
.fo-smm-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-l)}
.fo-smm-kpi{display:flex;flex-direction:column;align-items:center;row-gap:4px;text-align:center}
.fo-smm-kpi-value{font-family:var(--font-display);font-weight:400;font-size:clamp(44px,6.4vw,84px);line-height:1;letter-spacing:2px;color:#fff}
.fo-smm-kpi-label{font-size:var(--text-m);color:#fff}
.fo-smm-case-note{margin:0;text-align:center;font-size:var(--text-xs);line-height:1.6;color:rgba(255,255,255,.9)}

/* ---------- 11 Zielgruppen ---------- */
.fo-smm-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-xs);margin-top:var(--space-xs)}
.fo-smm-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;background:var(--surface-sunken);font-size:var(--text-s);font-weight:700;color:var(--text-heading)}
.fo-smm-audience-wrap{display:flex;flex-direction:column;row-gap:var(--space-l)}
.fo-smm-audience-intro{font-weight:600;font-size:var(--text-m);color:var(--text-heading);text-align:center}
.fo-smm-audiences{display:grid;grid-template-columns:1fr;gap:var(--space-s)}
.fo-smm-audience{background:var(--surface-sunken);border-radius:var(--radius-m);padding:var(--space-xl);display:flex;flex-direction:column;row-gap:var(--space-s)}
.fo-smm-audience-icon{display:block;color:var(--blue-d-1)}
.fo-smm-audience-title{font-size:var(--text-l);font-weight:700;line-height:1.3;color:var(--text-heading)}

/* ---------- 13 Preise ---------- */
.fo-smm-price{position:relative;overflow:hidden;margin-bottom:var(--section-gap);scroll-margin-top:90px;background:linear-gradient(172deg,#2f1d45 0%,#1b1130 55%,#0d0a18 100%);color:var(--text-on-dark);padding:var(--space-5xl) var(--section-x)}
.fo-smm-price-inner{position:relative;max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;row-gap:var(--space-3xl)}
.fo-smm-price-head{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center}
.fo-smm-price-head .fo-smm-flow-lead{margin:0}
.fo-smm-plans-wrap{display:flex;flex-direction:column;row-gap:var(--space-l)}
.fo-smm-plans{display:grid;grid-template-columns:1fr;gap:var(--space-l);align-items:stretch}
.fo-smm-plan{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center;border-radius:var(--radius-l);padding:var(--space-xl) var(--space-l) var(--space-2xl);background:rgba(248,248,248,.05);box-shadow:inset 0 0 0 1px rgba(248,248,248,.14)}
.fo-smm-plan-featured{background:rgba(134,200,215,.12);box-shadow:inset 0 0 0 1px rgba(134,200,215,.55)}
.fo-smm-plan-stage{position:relative;height:200px;width:100%;display:flex;align-items:flex-end;justify-content:center}
.fo-smm-plan-stage-col{flex-direction:column;align-items:center;justify-content:flex-end;row-gap:14px}
.fo-smm-plan-badge{font-weight:600;font-size:var(--text-xs);color:var(--blue-l-2);background:rgba(134,200,215,.18);border-radius:999px;padding:5px 12px}
.fo-smm-planet{position:relative;display:flex;align-items:center;justify-content:center;transform:scale(1);transform-origin:center bottom}
.fo-smm-planet-ring{position:absolute;inset:0;border-radius:50%;border:1px dashed rgba(248,248,248,.24)}
.fo-smm-planet-ring-teal{border-color:rgba(134,200,215,.7)}
.fo-smm-planet-spin{position:absolute;inset:0;animation:fo-smm-spin 24s linear infinite}
.fo-smm-moon{position:absolute;left:50%;border-radius:50%}
.fo-smm-planet-body{position:relative;border-radius:50%;overflow:hidden}
.fo-smm-spot{position:absolute;border-radius:50%}
.fo-smm-land{position:absolute}
.fo-smm-cloud{position:absolute;height:14px;border-radius:50%;border-top:2px solid rgba(255,255,255,.6)}
.fo-smm-planet-shade{position:absolute;inset:0;background:radial-gradient(circle at 70% 75%,rgba(5,13,15,.45),transparent 60%)}
.fo-smm-plan-text{display:flex;flex-direction:column;row-gap:4px}
.fo-smm-plan-name{font-family:var(--font-display);font-size:var(--text-xl);line-height:1.1;letter-spacing:3px;color:var(--text-on-dark)}
.fo-smm-plan-tier{font-weight:600;font-size:var(--text-s);color:var(--text-on-dark-muted)}
.fo-smm-plan-tier-teal{color:var(--blue-l-2)}
.fo-smm-plan-price{font-weight:700;font-size:var(--text-l);color:#fff}
.fo-smm-plan-desc{max-width:30ch;font-size:var(--text-s);line-height:1.5;color:var(--text-on-dark)}
.fo-smm-funfact{display:flex;align-items:center;gap:var(--space-m);background:rgba(248,248,248,.06);border-radius:var(--radius-m);padding:var(--space-m) var(--space-l)}
.fo-smm-funfact-planet{flex:none;width:40px;height:40px;border-radius:50%;background:linear-gradient(180deg,#e9d9c0 0%,#c99a6b 25%,#efe2cc 45%,#b27a4f 65%,#e8d5b7 85%,#a86f47 100%)}
.fo-smm-funfact-text{margin:0;font-size:var(--text-m);line-height:1.5;color:var(--text-on-dark);text-wrap:pretty}
.fo-smm-funfact-text strong{font-weight:700}
.fo-smm-price-cta{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center}
.fo-smm-erstflug{position:relative;overflow:hidden;background:var(--gradient-hero);border-radius:var(--radius-l);padding:var(--space-2xl);display:grid;grid-template-columns:1fr;gap:var(--space-l) var(--space-2xl);align-items:center;text-align:center}
.fo-smm-erstflug-rocket{position:relative;height:80px;width:auto;justify-self:center;transform:rotate(28deg)}
.fo-smm-erstflug-copy{position:relative;display:flex;flex-direction:column;row-gap:var(--space-xs)}
.fo-smm-erstflug-kicker{font-weight:600;font-size:var(--text-m);color:var(--text-on-dark)}
.fo-smm-erstflug-cta{position:relative;display:flex;flex-direction:column;row-gap:var(--space-s);align-items:center}

/* ---------- 14 FAQ ---------- */

.fo-smm-faq-link{font-weight:700;color:var(--blue-d-1)}
.fo-smm-faq-link:hover{color:var(--blue-d-2)}

/* ---------- 15 Abschluss ---------- */
.fo-smm-closing{max-width:var(--container-max);margin:0 auto;position:relative;overflow:hidden;background:var(--gradient-space);border-radius:var(--radius-xl);color:var(--text-on-dark);padding:var(--space-xl) var(--space-l)}
.fo-smm-closing-grid{position:relative;display:grid;grid-template-columns:1fr;gap:var(--space-2xl);align-items:center}
.fo-smm-closing-copy{display:flex;flex-direction:column;row-gap:var(--space-m);align-items:flex-start}
.fo-smm-closing-text{margin:0;max-width:720px;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}
.fo-smm-closing-art{display:flex;justify-content:flex-start}
.fo-smm-closing-planet{width:140px;height:auto;animation:fo-smm-float 9s ease-in-out infinite}

/* ---------- Mobil (bis 599px) ---------- */
@media (max-width:599px){
  .fo-smm-planet{transform:scale(.8)}
}

/* ---------- ab 900px (wide) ---------- */
@media (min-width:900px){
  .fo-smm-hero-h1{align-items:flex-start}
  .fo-hero-split .fo-smm-hero-meta{justify-content:flex-start}

  .fo-smm-problem-grid{grid-template-columns:1.25fr .85fr}
  .fo-smm-thought-1{transform:rotate(-1.6deg) translateX(0px)}
  .fo-smm-thought-2{transform:rotate(1.4deg) translateX(18px)}
  .fo-smm-thought-3{transform:rotate(-1.1deg) translateX(6px)}
  .fo-smm-thought-4{transform:rotate(1.8deg) translateX(24px)}
  .fo-smm-thought:hover{transform:rotate(0deg) translateX(0)}

  .fo-smm-stations{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto);gap:0 var(--space-l)}
  .fo-smm-station{display:grid;grid-row:span 5;grid-template-rows:subgrid;align-items:start}
  .fo-smm-station-line{display:block}
  .fo-smm-station-line-l{margin-left:calc(-1 * var(--space-xl) - .5 * var(--space-l))}
  .fo-smm-station-line-r{margin-right:calc(-1 * var(--space-xl) - .5 * var(--space-l))}

  .fo-smm-reasons{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fo-smm-reason-1,.fo-smm-reason-2,.fo-smm-reason-3,.fo-smm-reason-4{grid-column:span 3}

  .fo-smm-case{padding:64px}
  .fo-smm-case-grid{grid-template-columns:1.62fr 1fr}
  .fo-smm-case-copy{order:1}
  .fo-smm-case-photo{order:2;min-height:clamp(430px,34vw,560px)}
  .fo-smm-case-person{right:0;transform:none;height:clamp(430px,39vw,640px)}

  .fo-smm-audiences{grid-template-columns:repeat(3,minmax(0,1fr))}

  .fo-smm-plans{grid-template-columns:repeat(3,minmax(0,1fr))}
  .fo-smm-erstflug{grid-template-columns:120px minmax(0,1fr) auto;text-align:left}
  .fo-smm-erstflug-rocket{height:120px}
  .fo-smm-erstflug-cta{align-items:flex-start}

  .fo-smm-closing{padding:var(--space-3xl)}
  .fo-smm-closing-grid{grid-template-columns:minmax(0,2.4fr) minmax(0,1fr)}
  .fo-smm-closing-art{justify-content:flex-end}
  .fo-smm-closing-planet{width:clamp(170px,18vw,240px)}
}

/* ---------- ab 1120px (wide3) ---------- */
@media (min-width:1120px){
  .fo-smm-notif-a{right:240px;width:210px}
  .fo-smm-notif-b{right:-30px;width:226px}

  .fo-smm-ways{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(5,auto);gap:0 var(--space-l)}
  .fo-smm-way{grid-row:span 5;grid-template-rows:subgrid}
  .fo-smm-way-best{order:0;margin:-20px 0;padding:calc(var(--space-xl) + 20px) var(--space-xl)}
}

@keyframes fo-smm-spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes fo-smm-bob{0%,100%{transform:rotate(var(--r)) translateY(-5px)}50%{transform:rotate(var(--r)) translateY(5px)}}
@keyframes fo-smm-dash{to{stroke-dashoffset:-240}}
@keyframes fo-smm-fly{0%{transform:translate(-26px,20px) scale(.6);opacity:0}20%{opacity:1}75%{transform:translate(3px,-2px) scale(1);opacity:1}100%{transform:translate(9px,-7px) scale(1);opacity:0}}
@keyframes fo-smm-pulse{0%,100%{opacity:.2}50%{opacity:1}}
@keyframes fo-smm-play{0%{transform:translateX(0)}100%{transform:translateX(56px)}}
@keyframes fo-smm-beam{to{stroke-dashoffset:-18}}
@keyframes fo-smm-hover{0%,100%{transform:translate(0,-3px) rotate(-3deg)}50%{transform:translate(0,3px) rotate(3deg)}}
@keyframes fo-smm-pop{0%,60%,100%{transform:translateY(0)}70%{transform:translateY(-5px)}}
@keyframes fo-smm-float{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}

@media (prefers-reduced-motion:reduce){
  .fo-smm-dash,.fo-smm-tile,.fo-smm-notif,.fo-smm-planet-spin,.fo-smm-closing-planet,.fo-smm-station-svg *{animation:none !important}
}

/* ---------- Marketing-Check nach dem Case, Buttons, Vertrauenszeile ---------- */
.fo-smm-check{position:relative;overflow:hidden;max-width:var(--container-max);margin:0 auto;padding:var(--space-3xl) var(--space-l);border-radius:var(--radius-xl);background:var(--gradient-hero);color:var(--text-on-dark);display:flex;flex-direction:column;align-items:center;row-gap:var(--space-m);text-align:center}
.fo-smm-check > *{position:relative}
.fo-smm-check-title{margin:0;font-size:var(--text-2xl);line-height:1.05;letter-spacing:3px;color:var(--text-on-dark);text-wrap:balance}
.fo-smm-check-text{margin:0;max-width:60ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark)}
.fo-smm-check-ctas{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-s)}
.fo-smm-closing .fo-smm-check-ctas{justify-content:flex-start}
.fo-smm-closing-trust{margin:var(--space-xs) 0 0;font-size:var(--text-s);color:var(--text-on-dark)}
.fo-smm-closing-trust span{color:#f5c451;letter-spacing:1px}
.fo-smm-rating-text strong{font-weight:700}

/* ---------- Prozess im Team: drei Handys ---------- */
.fo-smm-proc{position:relative;max-width:var(--container-max);width:100%;margin:0 auto;color:var(--text-body)}
.fo-smm-proc-head{position:relative;margin-bottom:var(--space-3xl)}
.fo-smm-proc-body{position:relative}
.fo-smm-proc-line{display:none}
.fo-smm-proc-steps{position:relative;margin:0;padding:0;list-style:none;display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3xl)}
.fo-smm-proc-step{display:flex;flex-direction:column;align-items:center;text-align:center;row-gap:var(--space-s)}
.fo-smm-proc-phone{position:relative;width:min(220px,62vw);aspect-ratio:9 / 19.5;padding:8px;border-radius:30px;background:#0d0a14;box-shadow:0 30px 60px -28px rgba(40,24,59,.55);margin-bottom:var(--space-s)}
.fo-smm-proc-phone .fo-smm-phone-screen{border-radius:23px}
.fo-smm-proc-phone .fo-smm-phone-screen img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.fo-smm-proc-num{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-family:var(--font-display);font-size:var(--text-m);letter-spacing:2px;color:var(--blue-d-1);box-shadow:inset 0 0 0 1px rgba(49,115,130,.45)}
.fo-smm-proc-title{font-size:var(--text-l);line-height:1.1;color:var(--text-heading)}
.fo-smm-proc-text{margin:0;max-width:30ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-body)}
.fo-smm-proc-caption{position:relative;margin:var(--space-2xl) auto 0;max-width:60ch;text-align:center;font-size:var(--text-s);line-height:1.6;color:var(--text-body)}
@media (min-width:940px){
  .fo-smm-proc-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2xl)}
  .fo-smm-proc-step:nth-child(2){margin-top:var(--space-2xl)}
  .fo-smm-proc-phone{width:min(220px,100%)}
  .fo-smm-proc-line{display:block;position:absolute;left:0;right:0;top:210px;height:40px;width:100%}
}


/* ===== css/pages/ueber-uns.css ===== */
/* FilmOrbit — Seite „Über uns“ (/ueber-uns/)
   Umbrüche wie im Prototyp: 900px (wide) und 1120px (wide3). */

/* ---------- Allgemein ---------- */
.fo-about-on-dark{color:var(--text-on-dark)}
.fo-about-col{display:flex;flex-direction:column;row-gap:var(--space-m)}
.fo-about-col-start{align-items:flex-start}

/* ---------- Hero mit Foto ---------- */
.fo-about-hero-photo{position:relative;width:100%;max-width:520px;margin:var(--space-2xl) auto 0}
.fo-about-hero-img{display:block;width:100%;aspect-ratio:4 / 3;object-fit:cover;border:6px solid var(--white);border-radius:var(--radius-l);box-shadow:0 30px 60px -30px rgba(0,0,0,.6);transform:rotate(2deg)}

/* ---------- Erster Abschnitt nach dem Hero ---------- */
.fo-about-first{padding:calc(var(--space-5xl) * 1.15) var(--section-x) var(--section-gap)}

/* ---------- Kennzahlen ---------- */
.fo-about-facts{list-style:none;margin:0;padding:var(--space-2xl) 0;border-top:var(--border-hairline);border-bottom:var(--border-hairline);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2xl) var(--space-l)}
.fo-about-fact{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-2xs);text-align:center}
.fo-about-fact-value{font-family:var(--font-display);font-weight:400;font-size:clamp(36px,4.4vw,64px);line-height:1;letter-spacing:2px;color:var(--text-heading)}
.fo-about-fact-label{max-width:22ch;font-size:var(--text-m);line-height:1.35;color:var(--text-body);text-wrap:balance}

/* ---------- CTA nach den Kennzahlen ---------- */
.fo-about-check{display:flex;flex-direction:column;align-items:center;row-gap:var(--space-l);text-align:center}
.fo-about-check-text{max-width:64ch}

/* ---------- Geschichte + Foto-Collage ---------- */
.fo-about-story-grid{display:grid;grid-template-columns:1fr;gap:var(--space-3xl) 64px;align-items:start}
.fo-about-collage{position:relative;width:100%;max-width:620px;justify-self:center;align-self:center;aspect-ratio:1 / 0.96}
.fo-about-collage-img{position:absolute;object-fit:cover;border:6px solid var(--white);border-radius:var(--radius-l);box-shadow:0 24px 50px -26px rgba(5,13,15,.45);transition:transform .3s ease}
.fo-about-collage-a{left:0;top:0;z-index:1;width:62%;aspect-ratio:4 / 3;transform:rotate(-2.5deg)}
.fo-about-collage-b{right:0;top:20%;z-index:2;width:46%;aspect-ratio:3 / 4;transform:rotate(3deg)}
.fo-about-collage-c{left:8%;bottom:0;z-index:3;width:54%;aspect-ratio:4 / 3;transform:rotate(-1deg)}
.fo-about-collage-img:hover{transform:rotate(0deg) scale(1.02)}

/* ---------- Der Name (Karte mit Orbit-Grafik) ---------- */
.fo-about-band{background:var(--surface-card);border-radius:var(--radius-l);box-shadow:var(--shadow-raised);padding:var(--space-xl) var(--space-l);display:grid;grid-template-columns:1fr;gap:var(--space-2xl) var(--space-4xl);align-items:center}
.fo-about-orbit{justify-self:center;position:relative;width:100%;max-width:300px;aspect-ratio:1;margin:var(--space-l) 0}
.fo-about-orbit-ring{position:absolute;inset:12%;border-radius:50%;border:1.5px dashed var(--neutral-300)}
.fo-about-orbit-spin{position:absolute;inset:12%;animation:fo-about-orbit 40s linear infinite}
.fo-about-orbit-dot{position:absolute;left:50%;top:-4px;margin-left:-4px;width:8px;height:8px;border-radius:50%;background:var(--red)}
.fo-about-orbit-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;row-gap:8px}
.fo-about-orbit-logo{width:110px;height:auto;display:block}
.fo-about-orbit-pill{position:absolute;left:var(--x-m);top:var(--y-m);transform:translate(-50%,-50%);font-weight:600;font-size:11px;line-height:1.25;text-align:center;width:max-content;color:var(--text-body);background:var(--surface-sunken);border-radius:999px;padding:6px 12px}
@keyframes fo-about-orbit{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* ---------- Gründer ---------- */
.fo-about-founders{display:grid;grid-template-columns:1fr;gap:var(--space-l)}
.fo-about-founder{display:flex;flex-direction:column;background:var(--surface-sunken);border-radius:var(--radius-l);overflow:hidden}
.fo-about-founder-media{position:relative}
.fo-about-founder-img{width:100%;aspect-ratio:4 / 3;object-fit:cover;object-position:50% 28%;display:block}
.fo-about-founder-body{display:flex;flex-direction:column;row-gap:var(--space-s);padding:var(--space-2xl) var(--space-xl)}
.fo-about-founder-detail{align-self:flex-start;margin-top:var(--space-2xs);font-weight:600;font-size:var(--text-s);line-height:1.4;color:var(--text-body);background:var(--surface-card);border-radius:999px;padding:8px 14px}

/* ---------- Werte ---------- */
.fo-about-values{display:grid;grid-template-columns:1fr;gap:var(--space-s)}
.fo-about-value{grid-column:auto;border-radius:var(--radius-m);padding:var(--space-xl);color:var(--white);display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start;row-gap:var(--space-s)}
.fo-about-value-a{background:var(--service-1)}
.fo-about-value-b{background:var(--blue-d-1)}
.fo-about-value-c{background:var(--service-4)}
.fo-about-value-d{background:var(--purple)}
.fo-about-value-icon{width:56px;height:56px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(248,248,248,.5);display:flex;align-items:center;justify-content:center;margin-bottom:var(--space-2xs)}
.fo-about-value-title{color:var(--white);text-wrap:balance}
.fo-about-value-body{margin:0;max-width:70ch;font-size:var(--text-m);line-height:var(--body-md-lh);color:var(--text-on-dark);text-wrap:pretty}

/* ---------- Dorsten (dunkler Abschnitt mit Sternen) ---------- */
.fo-about-dark{position:relative;overflow:hidden;margin-bottom:var(--section-gap);background:linear-gradient(172deg,var(--blue-d-2) 0%,#0a1f24 55%,var(--black) 100%);color:var(--text-on-dark);padding:var(--space-5xl) var(--section-x)}
.fo-about-dark-stars{position:absolute;inset:0;pointer-events:none;opacity:.7}
.fo-about-dark-inner{position:relative;max-width:var(--container-max);margin:0 auto;display:flex;flex-direction:column;row-gap:var(--space-3xl)}
.fo-about-dark-grid{display:grid;grid-template-columns:1fr;gap:var(--space-2xl) 64px;align-items:center}
.fo-about-dark-img{width:100%;aspect-ratio:4 / 3;object-fit:cover;border-radius:var(--radius-l);display:block;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}

/* ---------- Abschluss-Panel ---------- */
.fo-about-panel{max-width:var(--container-max);margin:0 auto;position:relative;overflow:hidden;background:var(--gradient-space);border-radius:var(--radius-xl);color:var(--text-on-dark);padding:var(--space-xl) var(--space-l)}
.fo-about-panel-stars{position:absolute;inset:0;overflow:hidden;border-radius:inherit;pointer-events:none}
.fo-about-panel-grid{position:relative;display:grid;grid-template-columns:1fr;gap:var(--space-2xl);align-items:center}
.fo-about-panel-text{max-width:760px}
.fo-about-panel-cta{display:flex;flex-wrap:wrap;gap:var(--space-s);padding-top:var(--space-2xs)}
.fo-about-panel-art{display:flex;justify-content:flex-start}
.fo-about-panel-planet{width:140px;height:auto;animation:fo-about-float 9s ease-in-out infinite}
@keyframes fo-about-float{0%,100%{transform:translateY(-9px)}50%{transform:translateY(9px)}}

/* ---------- ab 900px ---------- */
@media (min-width:900px){
  .fo-about-story-grid,.fo-about-band,.fo-about-founders,.fo-about-dark-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fo-about-band{padding:var(--space-3xl)}
  .fo-about-orbit{max-width:340px}
  .fo-about-orbit-logo{width:150px}
  .fo-about-orbit-pill{left:var(--x);top:var(--y);font-size:var(--text-s)}
  .fo-about-values{grid-template-columns:repeat(6,minmax(0,1fr))}
  .fo-about-value-c{grid-column:span 4}
  .fo-about-value-a{grid-column:span 2}
  .fo-about-value-b,.fo-about-value-d{grid-column:span 3}
  .fo-about-facts{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fo-about-hero-photo{max-width:none;margin:0}
  .fo-about-hero-h1{align-items:flex-start}
  .fo-about-panel{padding:var(--space-3xl)}
  .fo-about-panel-grid{grid-template-columns:1.5fr 1fr}
  .fo-about-panel-art{justify-content:flex-end}
  .fo-about-panel-planet{width:clamp(170px,18vw,240px)}
}

/* ---------- ab 1120px ---------- */
@media (min-width:1120px){
  .fo-about-orbit{max-width:420px}
}

@media (prefers-reduced-motion:reduce){
  .fo-about-orbit-spin,.fo-about-panel-planet{animation:none}
}

/* ---------- Engagement ---------- */
.fo-engage{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-2xl);align-items:center}
.fo-engage-pool{object-position:50% 42%}
.fo-engage-copy{display:flex;flex-direction:column;align-items:flex-start;row-gap:var(--space-m);max-width:680px}
@media (min-width:940px){
  .fo-engage{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4xl)}
}


/* src/styles/fo-svg.css */
/* Stile aus SVG-Grafiken (Instatic entfernt style-Attribute in SVGs). Doppelte Klasse = Gewicht ähnlich wie Inline-Stil. Automatisch erzeugt. */
.fo-svgs-0e4038.fo-svgs-0e4038.fo-svgs-0e4038{animation-delay:.3s}
.fo-svgs-15e9a9.fo-svgs-15e9a9.fo-svgs-15e9a9{animation:fo-smm-pop 2.8s ease-in-out infinite}
.fo-svgs-1b04cf.fo-svgs-1b04cf.fo-svgs-1b04cf{animation-delay:.9s}
.fo-svgs-204b32.fo-svgs-204b32.fo-svgs-204b32{animation:fo-smm-beam .9s linear infinite}
.fo-svgs-2132f1.fo-svgs-2132f1.fo-svgs-2132f1{animation:fo-smm-pulse 2.4s ease-in-out .5s infinite}
.fo-svgs-23709f.fo-svgs-23709f.fo-svgs-23709f{animation-delay:1.6s}
.fo-svgs-254f7b.fo-svgs-254f7b.fo-svgs-254f7b{animation-delay:.4s}
.fo-svgs-36073e.fo-svgs-36073e.fo-svgs-36073e{transform-box:fill-box;transform-origin:center;animation:fo-smm-hover 5s ease-in-out infinite}
.fo-svgs-3a3201.fo-svgs-3a3201.fo-svgs-3a3201{animation:fo-smm-pulse 3.2s ease-in-out 1.1s infinite}
.fo-svgs-40424c.fo-svgs-40424c.fo-svgs-40424c{animation:fo-smm-pulse 1.2s ease-in-out infinite}
.fo-svgs-45452e.fo-svgs-45452e.fo-svgs-45452e{animation:fo-smm-play 3.2s linear infinite}
.fo-svgs-48652f.fo-svgs-48652f.fo-svgs-48652f{animation-delay:.6s}
.fo-svgs-4a59b8.fo-svgs-4a59b8.fo-svgs-4a59b8{animation:fo-smm-pulse 4s ease-in-out infinite}
.fo-svgs-608444.fo-svgs-608444.fo-svgs-608444{animation:fo-smm-pulse 1.4s ease-in-out infinite}
.fo-svgs-6229be.fo-svgs-6229be.fo-svgs-6229be{animation-delay:.5s}
.fo-svgs-6a00bd.fo-svgs-6a00bd.fo-svgs-6a00bd{animation:fo-smm-pop 2.6s ease-in-out .6s infinite}
.fo-svgs-6da6b4.fo-svgs-6da6b4.fo-svgs-6da6b4{animation-delay:1.5s}
.fo-svgs-6df68d.fo-svgs-6df68d.fo-svgs-6df68d{animation:fo-smm-pop 2.6s ease-in-out infinite}
.fo-svgs-6e8134.fo-svgs-6e8134.fo-svgs-6e8134{filter:drop-shadow(0 0 6px rgba(134,200,215,.9))}
.fo-svgs-717d4a.fo-svgs-717d4a.fo-svgs-717d4a{animation:fo-smm-pop 2.6s ease-in-out .9s infinite}
.fo-svgs-7a0ec6.fo-svgs-7a0ec6.fo-svgs-7a0ec6{animation:fo-smm-fly 3.6s ease-out -2.4s infinite}
.fo-svgs-d49067.fo-svgs-d49067.fo-svgs-d49067{animation:fo-smm-pulse 3.2s ease-in-out 2.2s infinite}
.fo-svgs-e3e34b.fo-svgs-e3e34b.fo-svgs-e3e34b{animation:fo-smm-pulse 3.2s ease-in-out infinite}
.fo-svgs-e8f0a1.fo-svgs-e8f0a1.fo-svgs-e8f0a1{animation:fo-smm-fly 3.6s ease-out -1.2s infinite}
.fo-svgs-ec3658.fo-svgs-ec3658.fo-svgs-ec3658{animation:fo-smm-pop 2.6s ease-in-out .3s infinite}
.fo-svgs-f1d3d7.fo-svgs-f1d3d7.fo-svgs-f1d3d7{animation:fo-smm-fly 3.6s ease-out infinite}
.fo-svgs-f2ef85.fo-svgs-f2ef85.fo-svgs-f2ef85{animation:fo-smm-pulse 2.4s ease-in-out infinite}
.fo-svgs-f796fd.fo-svgs-f796fd.fo-svgs-f796fd{position:absolute;inset:0;overflow:visible}
.fo-svgs-f93807.fo-svgs-f93807.fo-svgs-f93807{animation-delay:.8s}


/* src/styles/fo-instatic.css */
/* Instatic-Anpassungen für FilmOrbit (nicht Teil der lokalen Website) */

/* Seiten mit Marker .fo-no-cta blenden das CTA-Band aus der Vorlage aus (entspricht "cta": false im lokalen Build). */
.fo-no-cta{display:none}
.fo-page:has(.fo-no-cta) .fo-cta{display:none}

/* Instatic-Reset neutralisieren, damit alles aussieht wie lokal (Browser-Standard).
   :where() hat dieselbe Gewichtung wie der Reset, steht aber später; Regeln aus site.css gewinnen weiterhin. */
:where(svg){display:revert;max-width:revert;height:revert}
:where(input,button,textarea,select){font:revert;color:revert}
:where(button){background:revert;border:revert;cursor:revert;padding:revert}
:where(*){margin:revert;padding:revert}
:where(p,h1,h2,h3,h4,h5,h6){overflow-wrap:revert}
:where(ol,ul,menu){list-style:revert}
:where(table){border-collapse:revert}
/* Unschärfe-Platzhalter von Instatic hinter Bildern entfernen (würde bei transparenten PNGs als Fläche sichtbar bleiben) */
img[style*="background"]{background:none !important}