/* ==========================================================================
   Share2Flow — Über uns (About) v8 DELUXE v5. Editorial Noir Hero × helles Body.
   ALLES unter .s2f-about gescopt (kollidiert nicht mit Bootstrap/style.css).
   Typo: 16px-Floor, Card-H3 ≥28px, clamp-Bounds in px (Leerzeichen um +).
   ========================================================================== */
.s2f-about{
  --paper:#F3F6FF;--white:#fff;--ink:#0B192F;--ink-2:#131C3D;--text:#46536C;--muted:#7B8798;
  --line:rgba(11,25,47,.12);--line-hi:rgba(59,91,219,.4);
  --blue:#3B5BDB;--blue-2:#5B7CFF;--cyan:#6B9AEB;--amber:#F9D149;--mint:#4FC38C;--coral:#EF7A6B;
  --noir:#070C18;--noir-2:#0B1526;--tx:#EAF0FF;--tx-dim:#93A0BC;--tx-mut:#66738F;
  --ease:cubic-bezier(.16,1,.3,1);--maxw:1240px;
  --t-display:clamp(38px, 3.4vw + 0.5rem, 64px);
  --t-section:clamp(34px, 3vw + 1rem, 66px);
  --t-h3:clamp(28px, 1.1vw + 1.4rem, 36px);
  --t-body:clamp(18px, 0.5vw + 1rem, 22px);
  --t-eyebrow:clamp(16px, 0.3vw + 0.9rem, 20px);
  /* main_sec (Bootstrap) neutralisieren + Hero unter den fixen Header ziehen */
  position:relative;width:100%;max-width:none;margin-top:-98px;padding:0;background:var(--paper);
  color:var(--ink);font-family:Poppins,system-ui,sans-serif;overflow-x:clip;-webkit-font-smoothing:antialiased;
}
@media(max-width:768px){.s2f-about{margin-top:-84px}}
.s2f-about *,.s2f-about *::before,.s2f-about *::after{box-sizing:border-box}
.s2f-about img{display:block;max-width:100%}
.s2f-about a{text-decoration:none;color:inherit}
.s2f-about .aw{position:relative;width:min(calc(100% - 48px), var(--maxw));margin-inline:auto}
.s2f-about .serif{font-family:"Libre Caslon Text",Georgia,serif;font-weight:400}
.s2f-about .serif-i{font-family:"Libre Caslon Text",Georgia,serif;font-style:italic;font-weight:400}

/* Flow-Button */
.s2f-about .btn-flow{position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;padding:15px 26px;border-radius:999px;font-size:16px;font-weight:700;overflow:hidden;cursor:pointer;transition:transform .25s var(--ease),box-shadow .3s var(--ease)}
.s2f-about .btn-flow::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 20%,rgba(255,255,255,.35),transparent 72%);transform:translateX(-130%);transition:transform .7s var(--ease)}
.s2f-about .btn-flow:hover::before{transform:translateX(130%)}
.s2f-about .btn-flow:hover{transform:translateY(-3px)}
.s2f-about .btn-flow .arw{display:inline-flex;transition:transform .3s var(--ease)}
.s2f-about .btn-flow:hover .arw{transform:translateX(5px)}
.s2f-about .btn-flow--blue{background:var(--blue);color:#fff;box-shadow:0 15px 38px rgba(59,91,219,.4)}
.s2f-about .btn-flow--amber{background:var(--amber);color:#0B192F;box-shadow:0 16px 40px rgba(249,209,73,.32)}
.s2f-about .btn-flow--ghost{border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff}

/* Wave */
/* Anti-Naht-Muster aus dem Original-Backup (.banner_shapeDivider): Divider 2px in die
   Folge-Sektion überlappen + SVG minimal breiter → keine Linie an Unterkante/Rand. */
.s2f-about .wave{position:absolute;left:0;right:0;bottom:-2px;z-index:5;overflow:hidden;line-height:0;pointer-events:none}
.s2f-about .wave svg{position:relative;display:block;width:calc(100% + 1.3px);height:clamp(64px, 8vw, 118px)}
.s2f-about .wave .w1{opacity:.45}.s2f-about .wave .w2{opacity:.7}
/* Team→Join-Wave DECKEND: seine Fills sind schon 3 echte Blautöne (#6E7CE6/#4C63D8/
   #3B5BDB) → saubere Tiefe ohne Wasch-Effekt. Nur der Hero-Wave nutzt Transparenz
   (einfarbig über Dunkel). Sonst = sichtbarer Sprung wasch→voll = die „Linie". */
.s2f-about #about-team .wave .w1{opacity:1}.s2f-about #about-team .wave .w2{opacity:1}
/* Hero-Wave sitzt in .about-hero mit overflow:hidden → bottom:-2px wird geclippt,
   die -2px-Überlappung greift dort nicht. Deshalb die Folge-Sektion (Willkommen)
   2px hochziehen und über die Hero-Unterkante legen (beide Paper → keine Naht). */
.s2f-about .about-hero + .about-sec,
.s2f-about .pin-spacer + .about-sec,
.s2f-about .about-sec + .about-join{margin-top:-2px;position:relative;z-index:6}
/* Sub-Pixel-Naht am unteren Rand der Team-Wave füllen: 4px-Streifen im exakten
   Join-Blau hinter der Wave (z-index unter der Wave) — deckt die anti-aliaste
   SVG-Unterkante ab, ohne die Wave zu verändern. */
.s2f-about #about-team::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:#3B5BDB;z-index:4;pointer-events:none}

/* HERO */
.s2f-about .about-hero{position:relative;height:100svh;min-height:640px;overflow:hidden;background:var(--noir);color:var(--tx)}
.s2f-about .about-hero__img{position:absolute;inset:0;z-index:0;will-change:transform}
.s2f-about .about-hero__img img{width:100%;height:100%;object-fit:cover;object-position:72% center}
.s2f-about .about-hero__veil{position:absolute;inset:0;z-index:1;background:linear-gradient(90deg,var(--noir) 6%,rgba(7,12,24,.7) 44%,rgba(7,12,24,.1) 80%),linear-gradient(0deg,var(--noir) 1%,transparent 26%)}
.s2f-about .about-hero__nodes{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55}
.s2f-about .about-hero__nodes svg{position:absolute;right:5%;top:14%;width:min(38vw,500px)}
.s2f-about .about-hero__nodes .edge{stroke:rgba(143,180,255,.45);stroke-width:1.4;fill:none;stroke-dasharray:5 7;animation:s2fa-dash 7s linear infinite}
@keyframes s2fa-dash{to{stroke-dashoffset:-48}}
.s2f-about .about-hero__nodes .node{fill:var(--noir);stroke:var(--cyan);stroke-width:2}
.s2f-about .about-hero__nodes .pulse{animation:s2fa-pulse 3.4s var(--ease) infinite}
.s2f-about .about-hero__nodes .p2{animation-delay:-1s}.s2f-about .about-hero__nodes .p3{animation-delay:-2s}.s2f-about .about-hero__nodes .p4{animation-delay:-1.5s}
@keyframes s2fa-pulse{0%,100%{opacity:.5}50%{opacity:1}}
.s2f-about .about-hero__grid{position:relative;z-index:3;height:100%;display:flex;align-items:center;padding:104px 0 132px}
.s2f-about .about-hero__text{will-change:transform,opacity;max-width:760px}
.s2f-about .about-hero__eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 24px;padding:9px 16px;border:1px solid var(--line-hi);border-radius:999px;background:rgba(91,124,255,.1);color:var(--tx);font-size:var(--t-eyebrow);font-weight:600}
.s2f-about .about-hero__eyebrow i{width:9px;height:9px;border-radius:50%;background:var(--mint);box-shadow:0 0 0 3px rgba(79,195,140,.3)}
.s2f-about .about-hero h1{margin:0;font-size:var(--t-display);font-weight:400;line-height:.97;letter-spacing:-.02em;font-family:"Libre Caslon Text",Georgia,serif;color:var(--tx)}
.s2f-about .about-hero h1 b{font-family:Poppins;font-weight:700;letter-spacing:-.04em}
.s2f-about .about-hero h1 .serif-i{color:var(--cyan)}
.s2f-about .about-hero__lead{margin:28px 0 0;max-width:54ch;color:var(--tx-dim);font-size:var(--t-body);line-height:1.62}
.s2f-about .about-hero__lead strong{color:var(--tx);font-weight:600}
.s2f-about .about-hero__lead p{margin:0 0 10px}
.s2f-about .about-hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin:34px 0 0}
.s2f-about .about-hero__scroll{position:absolute;z-index:8;left:50%;bottom:clamp(128px, 16vh, 168px);transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;color:var(--tx);font-size:16px;font-weight:600;letter-spacing:.12em;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.s2f-about .about-hero__scroll span{width:24px;height:38px;border:2px solid var(--cyan);border-radius:14px;position:relative;background:rgba(7,12,24,.35)}
.s2f-about .about-hero__scroll span::before{content:"";position:absolute;left:50%;top:7px;width:4px;height:8px;border-radius:2px;background:var(--cyan);transform:translateX(-50%);animation:s2fa-dot 1.8s var(--ease) infinite}
@keyframes s2fa-dot{0%{opacity:0;transform:translate(-50%,0)}40%{opacity:1}80%{opacity:0;transform:translate(-50%,12px)}}

/* Sections */
.s2f-about .about-sec{position:relative;padding:clamp(80px, 11vw, 148px) 0}
.s2f-about .about-sec--paper{background:var(--paper)}
.s2f-about .about-sec--white{background:var(--white)}
.s2f-about .about-eyebrow{display:inline-flex;align-items:center;gap:10px;margin:0 0 18px;color:var(--blue);font-size:var(--t-eyebrow);font-weight:700}
.s2f-about .about-eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor}
.s2f-about .about-head{max-width:820px;margin:0 auto clamp(34px, 4vw, 56px)}
.s2f-about .about-head--center{text-align:center;margin-inline:auto}
.s2f-about .about-head--center .about-eyebrow{justify-content:center}
.s2f-about .about-title{margin:0;font-size:var(--t-section);font-weight:700;letter-spacing:-.04em;line-height:1.02;color:var(--ink);text-wrap:balance}
.s2f-about .about-title .serif-i{font-weight:400;color:var(--blue)}
.s2f-about .about-sub{margin:16px 0 0;color:var(--muted);font-size:var(--t-body);font-weight:500}
.s2f-about .about-prose{color:var(--text);font-size:var(--t-body);line-height:1.72;text-wrap:pretty}
.s2f-about .about-prose p{margin:0 0 20px}.s2f-about .about-prose p:last-child{margin-bottom:0}
/* Willkommen-Prosa als zweispaltiges Editorial statt einem Riesen-Textblock.
   Unter 900px eine Spalte; column-rule = feine Trennlinie (Editorial Noir). */
.s2f-about .about-prose--cols{max-width:1000px;margin-inline:auto}
@media(min-width:900px){
  .s2f-about .about-prose--cols{columns:2;column-gap:clamp(44px, 5vw, 72px);column-rule:1px solid var(--line)}
  .s2f-about .about-prose--cols p{break-inside:avoid}
  .s2f-about .about-prose--cols p:first-child{margin-top:0}
}
.s2f-about .about-prose strong{color:var(--ink);font-weight:600}

/* Welcome */
.s2f-about .welcome-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(30px, 5vw, 76px);align-items:start}
@media(max-width:820px){.s2f-about .welcome-grid{grid-template-columns:1fr}}
.s2f-about .welcome__statement{margin:0;font-family:"Libre Caslon Text",Georgia,serif;font-size:clamp(24px, 1.2vw + 0.9rem, 34px);line-height:1.28;color:var(--ink);letter-spacing:-.01em}
.s2f-about .welcome__statement .serif-i{color:var(--blue)}

/* Reise-Panel */
.s2f-about .reise-panel{position:relative;margin-top:clamp(20px, 3vw, 40px);padding:clamp(34px, 4vw, 66px);border-radius:32px;background:radial-gradient(120% 90% at 85% -10%,#12224a,transparent 55%),linear-gradient(180deg,var(--noir),var(--noir-2));color:var(--tx);overflow:hidden;box-shadow:0 40px 90px rgba(7,12,24,.4)}
.s2f-about .reise-panel::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(80% 70% at 70% 10%,#000,transparent 75%);mask-image:radial-gradient(80% 70% at 70% 10%,#000,transparent 75%)}
.s2f-about .timeline{position:relative;max-width:820px;padding-left:clamp(30px, 4vw, 54px)}
.s2f-about .timeline::before{content:"";position:absolute;left:11px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--cyan),rgba(91,124,255,.15))}
.s2f-about .tl-item{position:relative;padding:0 0 clamp(26px, 3vw, 42px) 0}
.s2f-about .tl-item:last-child{padding-bottom:0}
.s2f-about .tl-item__node{position:absolute;left:calc(-1 * clamp(30px, 4vw, 54px));top:2px;width:24px;height:24px;border-radius:50%;background:var(--noir);border:2px solid var(--cyan);display:grid;place-items:center;box-shadow:0 0 0 5px rgba(91,124,255,.12)}
.s2f-about .tl-item__node b{width:8px;height:8px;border-radius:50%;background:var(--cyan)}
.s2f-about .tl-item.is-now .tl-item__node{border-color:var(--amber);box-shadow:0 0 0 5px rgba(249,209,73,.16),0 0 24px rgba(249,209,73,.4)}
.s2f-about .tl-item.is-now .tl-item__node b{background:var(--amber)}
.s2f-about .tl-item__phase{display:inline-block;margin:0 0 6px;font-family:"Libre Caslon Text",Georgia,serif;font-style:italic;font-size:18px;color:var(--cyan)}
.s2f-about .tl-item.is-now .tl-item__phase{color:var(--amber)}
.s2f-about .tl-item__t{margin:0 0 6px;font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--tx)}
.s2f-about .tl-item__d{margin:0;color:var(--tx-dim);font-size:17px;line-height:1.6;max-width:58ch}

/* Werte */
.s2f-about .values-intro{max-width:760px;margin:0 auto clamp(30px, 4vw, 50px);text-align:center;color:var(--text);font-size:var(--t-body);line-height:1.7}
.s2f-about .values-intro strong{color:var(--ink);font-weight:600}
.s2f-about .values{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
@media(max-width:860px){.s2f-about .values{grid-template-columns:1fr}}
.s2f-about .value{position:relative;padding:clamp(30px, 2vw + 1.2rem, 44px);border-radius:28px;background:var(--white);border:1px solid var(--line);overflow:hidden;box-shadow:0 18px 44px rgba(11,25,47,.06);transition:transform .4s var(--ease),border-color .4s,box-shadow .4s}
.s2f-about .value::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--c,var(--blue)) 9%,transparent));transition:height .45s var(--ease)}
.s2f-about .value:hover{transform:translateY(-8px);border-color:color-mix(in srgb,var(--c,var(--blue)) 45%,var(--line));box-shadow:0 40px 84px rgba(11,25,47,.15)}
.s2f-about .value:hover::after{height:100%}
.s2f-about .value__top{position:relative;display:flex;align-items:center;justify-content:space-between;margin-bottom:26px}
.s2f-about .value__ico{position:relative;width:120px;height:120px;border-radius:28px;display:grid;place-items:center;color:var(--c,var(--blue));background:color-mix(in srgb,var(--c,var(--blue)) 10%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c,var(--blue)) 20%,transparent)}
.s2f-about .value__ico svg{width:60px;height:60px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .5s var(--ease)}
.s2f-about .value:hover .value__ico svg{transform:scale(1.08) rotate(-3deg)}
.s2f-about .value__n{font-family:"Libre Caslon Text",Georgia,serif;font-style:italic;font-size:44px;color:color-mix(in srgb,var(--c,var(--blue)) 55%,var(--muted))}
.s2f-about .value__t{position:relative;margin:0 0 14px;font-size:var(--t-h3);font-weight:700;letter-spacing:-.02em;line-height:1.15;color:var(--ink)}
.s2f-about .value__t strong{color:var(--c,var(--blue))}
.s2f-about .value__d{position:relative;margin:0;color:var(--text);font-size:18px;line-height:1.66}
.s2f-about .value__d strong{color:var(--ink)}
.s2f-about .values-close{max-width:760px;margin:clamp(34px, 4vw, 56px) auto 0;text-align:center}
.s2f-about .values-close p{margin:0;color:var(--text);font-size:var(--t-body);line-height:1.7}
.s2f-about .values-close .accent{display:block;margin-top:10px;font-family:"Libre Caslon Text",Georgia,serif;font-style:italic;font-size:clamp(24px, 1.5vw + 1rem, 34px);color:var(--ink)}

/* Team */
.s2f-about .team-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;max-width:1020px;margin-inline:auto}
.s2f-about .flip{flex:0 0 clamp(240px, 30%, 300px);perspective:1500px;height:384px}
@media(max-width:640px){.s2f-about .flip{flex:0 0 100%;max-width:340px}}
.s2f-about .flip__inner{position:relative;width:100%;height:100%;transition:transform .75s var(--ease);transform-style:preserve-3d}
.s2f-about .flip:hover .flip__inner,.s2f-about .flip:focus-within .flip__inner{transform:rotateY(180deg)}
.s2f-about .flip__face{position:absolute;inset:0;border-radius:24px;overflow:hidden;-webkit-backface-visibility:hidden;backface-visibility:hidden;border:1px solid var(--line)}
.s2f-about .flip__front{background:linear-gradient(180deg,#e7edff,#cfd9f5)}
.s2f-about .flip__front img{width:100%;height:100%;object-fit:cover;object-position:top center}
.s2f-about .flip__front::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 44%,rgba(11,25,47,.9))}
.s2f-about .flip__name{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px}
.s2f-about .flip__name h3{margin:0;font-size:clamp(20px, 0.5vw + 1.1rem, 24px);font-weight:700;letter-spacing:-.02em;color:#fff}
.s2f-about .flip__name span{display:inline-block;margin-top:8px;padding:4px 12px;border-radius:999px;background:var(--blue);font-size:16px;font-weight:600;color:#fff}
.s2f-about .flip__hint{position:absolute;top:16px;right:16px;z-index:2;width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.85);border:1px solid var(--line);color:var(--blue)}
.s2f-about .flip__hint svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.s2f-about .flip__back{transform:rotateY(180deg);background:linear-gradient(155deg,var(--ink),var(--ink-2));display:flex;flex-direction:column;justify-content:center;padding:28px}
.s2f-about .flip__back::before{content:"";position:absolute;width:300px;height:300px;right:-110px;top:-110px;border-radius:50%;background:radial-gradient(circle,rgba(91,124,255,.4),transparent 62%)}
.s2f-about .flip__back h3{position:relative;margin:0 0 3px;font-size:22px;font-weight:700;color:#fff}
.s2f-about .flip__back .role{position:relative;color:var(--cyan);font-size:16px;font-weight:600;margin-bottom:14px}
.s2f-about .flip__back p{position:relative;margin:0;color:var(--tx-dim);font-size:16px;line-height:1.62}

/* Join */
.s2f-about .about-join{position:relative;overflow:hidden;background:linear-gradient(180deg,#3B5BDB 0%,#3730A3 55%,#241C63 100%);text-align:center;color:#fff}
.s2f-about .about-join__bloom{display:none}
.s2f-about .about-join h2{position:relative;margin:0;font-size:var(--t-section);font-weight:700;letter-spacing:-.04em}
.s2f-about .about-join h2 .serif-i{font-weight:400;color:#CFE0FF}
.s2f-about .about-join .about-prose{position:relative;max-width:680px;margin:22px auto 32px;color:rgba(255,255,255,.88)}
.s2f-about .about-join .about-prose strong{color:#fff}

/* Rich-Text-Resets (Strapi-Felder liefern <p>-Wrapper) */
.s2f-about .value__t p{margin:0;display:inline}
.s2f-about .value__d p{margin:0 0 12px}.s2f-about .value__d p:last-child{margin-bottom:0}
.s2f-about .values-intro p{margin:0}
.s2f-about .values-close p{margin:0 0 8px}.s2f-about .values-close p:last-child{margin-bottom:0}
.s2f-about .flip__back div p{margin:0}
.s2f-about .flip__back div p:not(:last-child){margin-bottom:8px}

/* Reveals */
.anim .s2f-about .reveal{opacity:0;transform:translateY(26px)}
.anim .s2f-about .reveal.in{opacity:1;transform:none;transition:opacity .8s var(--ease),transform .8s var(--ease)}
@media (prefers-reduced-motion:reduce){
  .s2f-about *{animation:none!important;transition:none!important}
  .anim .s2f-about .reveal{opacity:1!important;transform:none!important}
}