/* Gemeinsame Kopfleiste der Website – gleicher Stil wie im Generator.
   Logo-Schrift fest eingebunden (vorab geladen, font-display: optional), damit nichts springt. */
@font-face{font-family:"bwf-brand";src:url("/assets/wf/69d56c2e22ace7bc9fe09840/69d56c2e22ace7bc9fe0991f_Roboto-VariableFont_wdth,wght.ttf") format("truetype");font-weight:100 900;font-display:optional}
@font-face{font-family:"bwf-nav";src:url("/assets/wf/69d56c2e22ace7bc9fe09840/69d56c2e22ace7bc9fe09920_PlusJakartaSans-VariableFont_wght.ttf") format("truetype");font-weight:200 800;font-display:swap}

.sh,.sh *{box-sizing:border-box}
.sh{transition:transform .25s ease}
.sh.is-hidden{transform:translateY(-100%)}
/* Maße exakt wie die Generator-Kopfleiste (.gh): 64 px hoch, 20 px Rand, Logo 30 px – beim Wechsel springt nichts */
.sh{position:sticky;top:0;z-index:1000;height:64px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding:0 20px;
  background:rgba(255,255,255,.9);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid #E4E7EF;font-family:"bwf-nav","Inter",Arial,sans-serif}
.sh-logo{display:inline-flex;align-items:center;gap:10px;justify-self:start;text-decoration:none!important;color:#000!important;font:600 23px/1 "bwf-brand",Roboto,Arial,sans-serif;letter-spacing:-.2px;white-space:nowrap}
.sh-logo img{width:30px;height:30px;flex:none;display:block}
.sh-nav{display:flex;align-items:center;gap:2px;padding:4px;background:#EEF0F5;border-radius:999px}
.sh-nav a{padding:9px 18px;border-radius:999px;font-size:15px;font-weight:600;color:#5B6172!important;text-decoration:none!important;transition:background .15s,color .15s,box-shadow .15s;white-space:nowrap}
.sh-nav a:hover{background:#fff;color:#1B1F2B!important;box-shadow:0 1px 3px rgba(16,24,40,.1)}
.sh-nav a[aria-current="page"]{background:#fff;color:#1B1F2B!important;box-shadow:0 1px 3px rgba(16,24,40,.12)}
.sh-right{display:flex;align-items:center;gap:10px;justify-self:end}
.sh-cta{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0 18px 0 20px;border-radius:999px;background:#3D69FF;color:#fff!important;font-size:15px;font-weight:700;text-decoration:none!important;transition:background .15s;white-space:nowrap}
.sh-cta:hover{background:#2C55E6}
.sh-cta svg{width:17px;height:17px}
.sh-burger{display:none;width:42px;height:42px;border:1px solid #E4E7EF;border-radius:50%;background:#fff;align-items:center;justify-content:center;cursor:pointer;padding:0}
.sh-burger span{display:block;width:16px;height:2px;background:#1B1F2B;border-radius:2px;position:relative}
.sh-burger span::before,.sh-burger span::after{content:"";position:absolute;left:0;width:16px;height:2px;background:#1B1F2B;border-radius:2px;transition:transform .2s}
.sh-burger span::before{top:-5px}.sh-burger span::after{top:5px}
.sh.is-open .sh-burger span{background:transparent}
.sh.is-open .sh-burger span::before{transform:translateY(5px) rotate(45deg)}
.sh.is-open .sh-burger span::after{transform:translateY(-5px) rotate(-45deg)}

@media (max-width:1023px){.sh{height:58px;padding:0 12px;gap:10px}}
@media (max-width:860px){
  .sh{grid-template-columns:1fr auto}
  .sh-nav{display:none;position:fixed;left:12px;right:12px;top:66px;flex-direction:column;align-items:stretch;gap:4px;padding:8px;border-radius:18px;background:#fff;box-shadow:0 20px 50px rgba(16,24,40,.18);border:1px solid #E4E7EF}
  .sh.is-open .sh-nav{display:flex}
  .sh-nav a{padding:14px 16px;border-radius:12px;font-size:16px}
  .sh-cta{height:40px;padding:0 14px;font-size:14px}
  .sh-cta svg{display:none}
  .sh-burger{display:inline-flex}
}
@media (max-width:400px){.sh-cta span{display:none}.sh-cta::after{content:"Erstellen"}}
/* Sprungziele (#vorlagen, #faq) nicht unter der Kopfleiste verstecken */
html{scroll-padding-top:76px}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){.sh,.sh *{transition:none!important}}