/* ==========================================================================
   Share2Flow — v8 Header & Footer, global einsetzbar
   ==========================================================================

   ZWECK
   Der v8-Header/Footer soll auf ALLEN Seiten erscheinen, nicht nur der Homepage.
   Die übrigen Seiten (Blog, Tools, Use Cases …) sind aber noch Bootstrap.

   WARUM GESCOPT
   Zwei Kollisionen mit Bootstrap:
   1. Klassennamen — .nav, .btn, .dropdown gibt es in beiden Systemen.
   2. Globale Resets — s2f-v8.css setzt body/*-Regeln, die den Bootstrap-Inhalt
      der anderen Seiten zerstören würden.
   Lösung: JEDE Regel hier ist unter .s2f-shell gescopt. Das schlägt Bootstrap in
   der Spezifität und lässt den restlichen Seiteninhalt unberührt.

   Header und Footer im Markup werden dafür in <div class="s2f-shell"> gewickelt.
   ========================================================================== */

/* Schriften — lokal (kein Google-Aufruf), gleiche Dateien wie s2f-v8.css */
@font-face{font-family:'Poppins';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/poppins-400.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/poppins-500.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/poppins-600.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/poppins-700.woff2') format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/poppins-800.woff2') format('woff2')}

.s2f-shell{
  --ink:#0B192F;--paper:#F4F7FF;--paper-2:#E6EDFF;--text:#48546C;--muted:#8790A6;
  --line:rgba(11,25,47,.13);--line-dark:rgba(255,255,255,.14);
  --blue:#3B5BDB;--cyan:#6B9AEB;--amber:#F9D149;--coral:#EF7A6B;--mint:#4FC38C;
  --ease:cubic-bezier(.16,1,.3,1);
}
.s2f-shell *,.s2f-shell *::before,.s2f-shell *::after{box-sizing:border-box}
.s2f-shell a{text-decoration:none;color:inherit}
.s2f-shell button{font:inherit}
.s2f-shell img{display:block;max-width:100%}
.s2f-shell svg{display:block}

/* Platzhalter, damit der fixe Header den Seiteninhalt nicht überdeckt.
   Der alte Header lag im Fluss (sticky) — der v8-Header ist fixed und braucht
   diesen Spacer oben. */
.s2f-shell-spacer{height:98px}
@media(max-width:820px){.s2f-shell-spacer{height:84px}}

/* ---------------------------------------------------------------- Navigation */
.s2f-shell .nav-shell{position:fixed;z-index:1080;top:16px;left:0;right:0;padding-inline:18px;pointer-events:none}
.s2f-shell .nav{display:flex;align-items:center;justify-content:space-between;gap:22px;width:min(100%,1380px);height:70px;margin:auto;padding:0 10px 0 18px;border:1px solid rgba(11,25,47,.1);border-radius:20px;background:rgba(247,249,255,.9);box-shadow:0 14px 44px rgba(11,25,47,.07);pointer-events:auto;transition:height .3s var(--ease),box-shadow .3s,background .3s;font-family:Poppins,system-ui,sans-serif}
.s2f-shell .nav.is-scrolled{height:60px;background:rgba(247,249,255,.96);box-shadow:0 18px 50px rgba(11,25,47,.11)}
.s2f-shell .brand{display:inline-flex;align-items:center;gap:11px;font-size:17px;font-weight:800;letter-spacing:-.035em;white-space:nowrap}
.s2f-shell .brand img{height:34px;width:auto}
.s2f-shell .brand--foot img{height:32px;filter:brightness(0) invert(1)}
.s2f-shell .nav__links{display:flex;align-items:center;gap:2px}
.s2f-shell .nav__links>.nav-item>a{padding:11px 13px;border-radius:999px;color:var(--text);font-size:16px;font-weight:600;transition:background .2s,color .2s;cursor:pointer}
.s2f-shell .nav-item{position:relative}
.s2f-shell .nav-item>a{display:inline-flex;align-items:center;gap:6px}
.s2f-shell .nav-item>a:hover{background:#fff;color:var(--ink)}
.s2f-shell .nav-item .cav{width:13px;height:13px;opacity:.6;transition:transform .25s var(--ease)}
.s2f-shell .nav-item:hover .cav{transform:rotate(180deg)}
.s2f-shell .dropdown{position:absolute;top:100%;left:50%;min-width:252px;padding-top:14px;opacity:0;visibility:hidden;transform:translateX(-50%) translateY(8px);transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.s2f-shell .nav-item:hover .dropdown,.s2f-shell .nav-item:focus-within .dropdown{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.s2f-shell .dropdown__panel{padding:10px;border:1px solid var(--line);border-radius:18px;background:rgba(247,249,255,.98);box-shadow:0 24px 60px rgba(11,25,47,.16)}
.s2f-shell .dropdown a{display:flex;align-items:center;gap:10px;padding:11px 13px;border-radius:12px;color:var(--text);font-size:16px;font-weight:600;white-space:nowrap;transition:background .2s,color .2s}
.s2f-shell .dropdown a:hover{background:#fff;color:var(--ink)}
.s2f-shell .dropdown a i{width:6px;height:6px;border-radius:50%;background:var(--blue);flex-shrink:0}
.s2f-shell .nav__actions{display:flex;align-items:center;gap:8px}

/* CTA-Button — voll ausdefiniert, damit Bootstraps .btn nicht durchschlägt */
.s2f-shell .s2f-cta{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:11px 20px;border:1px solid transparent;border-radius:999px;background:var(--blue);color:#fff;font-size:16px;font-weight:700;line-height:1;cursor:pointer;box-shadow:0 15px 38px rgba(59,91,219,.3),0 0 34px rgba(59,91,219,.26);transition:transform .22s var(--ease),box-shadow .3s var(--ease)}
.s2f-shell .s2f-cta:hover{transform:translateY(-2px);color:#fff;box-shadow:0 20px 50px rgba(59,91,219,.4),0 0 54px rgba(107,154,235,.5)}
.s2f-shell .s2f-cta__arrow{font-size:18px;line-height:1}

.s2f-shell .menu-btn{display:none;position:relative;width:46px;height:46px;border:0;border-radius:14px;background:var(--ink);color:#fff;cursor:pointer}
.s2f-shell .menu-btn span{position:absolute;left:13px;width:20px;height:2px;border-radius:2px;background:currentColor;transition:transform .35s var(--ease),top .35s var(--ease),opacity .2s}
.s2f-shell .menu-btn span:first-child{top:18px}.s2f-shell .menu-btn span:last-child{top:26px}
.s2f-shell .menu-btn[aria-expanded="true"] span:first-child{top:22px;transform:rotate(45deg)}
.s2f-shell .menu-btn[aria-expanded="true"] span:last-child{top:22px;transform:rotate(-45deg)}

.s2f-shell-menu{position:fixed;z-index:1075;inset:0;display:grid;align-content:center;padding:110px 28px 40px;background:var(--ink);color:#fff;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s;font-family:Poppins,system-ui,sans-serif}
.s2f-shell-menu.is-open{opacity:1;visibility:visible;transform:none}
.s2f-shell-menu nav{display:flex;flex-direction:column;gap:4px}
.s2f-shell-menu nav a{padding:11px 0;border-bottom:1px solid var(--line-dark);font-size:clamp(28px,9vw,48px);font-weight:600;letter-spacing:-.04em;color:#fff;text-decoration:none}
.s2f-shell-menu .s2f-cta{margin-top:28px;width:100%}
body.s2f-menu-open{overflow:hidden}

@media(max-width:1050px){
  .s2f-shell .nav__links{display:none}
  .s2f-shell .menu-btn{display:block}
  .s2f-shell .s2f-cta{display:none}
}
@media(max-width:820px){
  .s2f-shell .nav-shell{top:10px;padding-inline:10px}
  .s2f-shell .nav{height:58px;border-radius:16px}
  .s2f-shell .nav.is-scrolled{height:54px}
  .s2f-shell .brand{font-size:15px}
}

/* ---------------------------------------------------------------- Footer */
.s2f-shell .s2f-footer{padding:70px 0 26px;background:var(--ink);color:#fff;font-family:Poppins,system-ui,sans-serif}
.s2f-shell .s2f-footer__wrap{width:min(calc(100% - 48px),1320px);margin-inline:auto}
.s2f-shell .s2f-footer__grid{display:grid;grid-template-columns:1.6fr repeat(3,.7fr);gap:50px}
.s2f-shell .s2f-footer__brand p{max-width:390px;margin:18px 0 0;color:rgba(255,255,255,.7);font-size:16px;line-height:1.75}
.s2f-shell .s2f-footer h3{margin:5px 0 20px;color:rgba(255,255,255,.62);font-size:16px;text-transform:uppercase;letter-spacing:.09em;font-weight:600}
.s2f-shell .s2f-footer ul{display:grid;gap:11px;margin:0;padding:0;list-style:none}
.s2f-shell .s2f-footer li a{color:rgba(255,255,255,.74);font-size:16px;transition:color .2s}
.s2f-shell .s2f-footer li a:hover{color:#fff}
.s2f-shell .s2f-footer__bottom{display:flex;justify-content:space-between;gap:24px;margin-top:60px;padding-top:20px;border-top:1px solid var(--line-dark);color:rgba(255,255,255,.62);font-size:16px}
.s2f-shell .s2f-footer__bottom a{color:rgba(255,255,255,.62)}
.s2f-shell .s2f-footer__bottom a:hover{color:#fff}
@media(max-width:820px){
  .s2f-shell .s2f-footer__grid{grid-template-columns:1fr 1fr}
  .s2f-shell .s2f-footer__brand{grid-column:1/-1}
  .s2f-shell .s2f-footer__bottom{flex-direction:column}
}
@media(max-width:480px){.s2f-shell .s2f-footer__grid{grid-template-columns:1fr}}