/* ==========================================================
   SW System Header – token-ready (v0.4.0)
   - Desktop: Mega als Layer (keine Layout-Shifts)
   - Mobile: Offcanvas
   - Farben/Buttons via tokens.css + apply.css
   ========================================================== */

:root{
  --swsh-bg: var(--color-bg, #fff);
  --swsh-text: var(--color-text, #111);
  --swsh-muted: var(--color-muted, rgba(0,0,0,.68));

  --swsh-surface: var(--color-surface, #fff);
  --swsh-surface-2: color-mix(in srgb, var(--swsh-surface) 92%, #000);

  --swsh-border: rgba(0,0,0,.10);
  --swsh-shadow: var(--shadow-1, 0 18px 40px rgba(0,0,0,.12));

  --swsh-radius: 18px;
  --swsh-radius-sm: 12px;

  --swsh-gap: 5px;
  --swsh-container: min(1450px, 95%);

  --swsh-accent: var(--color-link, #ffac0b);
}

/* ---------- Base ---------- */
.swsh{
  position: relative;
  z-index: 10000!important;
  background: var(--swsh-bg);
  color: var(--swsh-text);
}
.swsh__inner{ width: var(--swsh-container); margin: 0 auto; }
.swsh a{ text-decoration:none !important; color: var(--color-link); }
.swsh a:hover,.swsh a:focus{ text-decoration:none !important; }
.swsh a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 0.2rem var(--swsh-accent);
  border-radius: 3px;
}

/* ---------- Overlay (click outside closes, NO layout shift) ---------- */
.swsh__overlay{
  display: none;
}

@media (min-width:1180px){
  header.swsh.swsh--show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    transition: transform 1.55s cubic-bezier(.22,.61,.36,1),
                opacity 1.65s ease;

    border-bottom: none;

    /* ultraleichter Schatten */
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }
}


/* ---------- Topbar ---------- */

.swsh__topbar{
  position: relative;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap: var(--swsh-gap);
  font-size: 0.9rem;
  padding: 5px 0;
  min-height: 30px;
  z-index: 1;
}

/* Fullwidth Hintergrund */
.swsh__topbar::before{
  content:"";
  position:absolute;
  inset:0;
  left:50%;
  width:100vw;
  transform:translateX(-50%);
  background:var(--c-gray);
  z-index:-1;
}

.swsh__topbar,
.swsh__topbar a{
  color: var(--swsh-accent);
}

/* ---------- Mainbar ---------- */
.swsh__mainbar{
  display:grid;
  grid-template-columns: 1fr auto;
  align-items:center;
  gap: var(--swsh-gap);
  padding: 5px 0;
}

.swsh__brand{ display:flex; align-items:center; gap: 12px; min-width: 0; }
.swsh__brand img{ height: auto!important; max-width: 200px!important; width:200px!important; display:block; }

/* Desktop elements hidden on mobile */
.swsh__nav{ display:none; }
.swsh__cta{ display:none; }

/* ---------- Burger (mobile) ---------- */
/* ---------- Burger (mobile) ---------- */
.swsh__burger{
  width: 100px!important;
  height: 80px!important;
  border-radius: 20px 0 0 20px!important;
  display:inline-flex!important;
  flex-direction: column!important;
  align-items:center!important;
  justify-content:center!important;
  cursor:pointer!important;
  margin-right: -10px !important;
  border: 0!important;
  background: var(--c-gray)!important;
  box-shadow: 0 6px 18px rgba(0,0,0,.06)!important;

  padding: 0;
  font-size: 0;
  color: var(--c-orange)!important;

  /* neu: slide-in */
  transform: translateX(110%);
  opacity: 0;
  animation: swshBurgerIn 1.55s cubic-bezier(.4,0,.2,1) .09s forwards;
  will-change: transform;
}

@keyframes swshBurgerIn{
  to{
    transform: translateX(0);
    opacity: 1;
  }
}

/* Text "Menü" davor */
.swsh__burger::before {
  content: "Menü";
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* deine Linien bleiben wie sie sind */
.swsh__burger span{
  display:block;
  width: 50px;
  height: 4px;
  margin: 3px 0;
  border-radius: 2px;
  background: currentColor;
  transition: transform .22s ease, opacity .18s ease;
}

html.swsh--offcanvas .swsh__burger span:nth-child(1){ transform: translateY(5px) rotate(45deg); }
html.swsh--offcanvas .swsh__burger span:nth-child(2){ opacity: 0; }
html.swsh--offcanvas .swsh__burger span:nth-child(3){ transform: translateY(-5px) rotate(-45deg); }

/* ---------- CTA ---------- */
.swsh__cta-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none !important;
  font-weight: 500;
  font-size: 0.95rem;

  color: var(--c-white)!important;
}
.swsh__cta-btn:hover{
  color: var(--c-orange)!important;
}
/* ==========================================================
   Desktop Navigation + Mega
   ========================================================== */

@media (min-width: 1180px){
  .swsh__mainbar{
    grid-template-columns: auto 1fr auto;
    position: relative;
  }

  .swsh__nav{ display:block!important; }
  .swsh__cta{ display:block!important; }
  .swsh__burger{ display:none!important; }

  .swsh__nav-list{
    list-style:none;
    display:flex;
    gap: 18px;
    padding:0;
    margin:0;
    justify-content:center;
    align-items:center;
    flex-wrap: wrap;
  }

  .swsh__nav-link{
    color: var(--swsh-accent);
    display:inline-flex;
    align-items:center;
    gap: 5px;
    padding: 10px 3px;
    line-height: 1.25;
    border-radius: 10px;
    font-weight: 500;

  }
  .swsh__nav-link:hover{ background: rgba(0,0,0,.04); }
}

/* ---------- Desktop SVG Linie ---------- */
.swsh__navline{ display:none; }
@media (min-width: 1180px){
  .swsh__navline{
    display:block;
    position:absolute;
    left: 53% !important;
    bottom: 30px;
    transform: translateX(calc(-50% - 40px)) !important;
    width: min(650px, 58%);
    opacity: .7;
    pointer-events:none;
    z-index: 1;
    color: rgba(17,17,17,.75); /* Linie ist schwarz wie Original */
  }
  html.swsh--open .swsh__navline{ opacity: 0; transition: opacity .18s ease; }

  .swsh__navline svg{ width:100%; height:auto; display:block; }
  .swsh__navline path{
    fill: none !important;
    stroke: currentColor;
    stroke-width: 1.25;
    stroke-linecap: round;
    stroke-linejoin: round;
  }
}

@keyframes swsh-line-draw{
  0%{ stroke-dashoffset: var(--swsh-line-len, 1000); }
  45%{ stroke-dashoffset: 0; }
  55%{ stroke-dashoffset: 0; }
  100%{ stroke-dashoffset: var(--swsh-line-len, 1000); }
}

/* ---------- Mega Container (Layer, no push) ---------- */
.swsh__mega{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  z-index:9500;

  opacity:0;
  visibility:hidden;
  pointer-events:none;

  transform:translateY(10px);

  transition:
    opacity .38s cubic-bezier(.2,.8,.2,1),
    transform .38s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .38s;

  background:transparent;
}

/* Hover-Brücke zwischen Nav und Mega */
.swsh__mega::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-20px;
  height:20px;
  background:transparent;
}

html.swsh--open .swsh__mega{
  opacity: 1;
  visibility: visible;
  pointer-events:auto;
  transform: translateY(0);
  transition: opacity .38s cubic-bezier(.2,.8,.2,1), transform .38s cubic-bezier(.2,.8,.2,1);
}

.swsh__mega-inner{
  width: var(--swsh-container);
  margin: 0 auto;
  padding: 18px;
  border-radius: var(--swsh-radius);
  background: var(--swsh-surface);
  border: 1px solid var(--swsh-border);
  box-shadow: var(--swsh-shadow);
}

.swsh__panel{ display:none; }
.swsh__panel-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
}

.swsh__col-title{ font-weight: 500; margin-bottom: 6px; display:inline-block; }
.swsh__col-title--link{ color: var(--swsh-text); }
.swsh__col-desc{ font-size: 13px; color: var(--swsh-muted); margin: -10px 0 10px; }

.swsh__col-list{ list-style:none; padding:0; margin:0; display:grid; gap: 10px; }

.swsh__mega-link{
  display:block;
  padding: 10px 12px;
  border-radius: 12px;
  color: var(--swsh-text);
}
.swsh__mega-link:hover{ background: rgba(0,0,0,.04); }

.swsh__mega-label{ font-weight: 900; display:block; color: var(--swsh-accent); font-size: 15px; }
.swsh__mega-desc{ font-size: 13px; display:block; color: var(--swsh-muted); margin-top: 2px; }

/* ---------- Mega Footer: Technologien ---------- */
.swsh__mega-tech{ margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--swsh-border); }
.swsh__mega-tech-title{ font-weight: 900; margin-bottom: 10px; font-size: 18px; }
.swsh__mega-tech-list{ list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; gap: 10px 14px; }
.swsh__mega-tech-link{ display:inline-flex; align-items:center; gap: 10px; padding: 8px 10px; border-radius: 12px; color: var(--swsh-text);background: rgba(0,0,0,.04);  }
.swsh__mega-tech-link:hover{ background: rgba(0,0,0,.04); }
.swsh__mega-tech-logo{ width: 22px; height: 22px; object-fit: contain; display:block; }
.swsh__mega-tech-label{ font-weight: 500; font-size: 14px; }

/* ==========================================================
   Offcanvas
   - Desktop: komplett aus
   - Mobile: fullscreen panel
   ========================================================== */

@media (min-width: 1180px){
  .swsh__offcanvas,
  .swsh__offcanvas-inner{
    display: none;
    pointer-events: none;
  }
}

@media (max-width: 1179px){
  .swsh__offcanvas{
    position: fixed;
    inset: 0;
    z-index: 110000;
    display: block;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility 0s linear .22s;
    background: rgba(0,0,0,.38);
    touch-action: auto;
  }

  .swsh__offcanvas-inner{
    position: fixed;
    inset: 0;
    display: block;
    width: 100vw;
    height: 100dvh;
    max-width: 100vw;
    max-height: 100dvh;
    background: var(--swsh-surface);
    color: var(--swsh-text);
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 18px;
    transform: translateX(-16px);
    transition: transform .28s ease;
    will-change: transform;
    pointer-events: auto;
    z-index: 110001;
    touch-action: pan-y;
    box-sizing: border-box;
  }

  .swsh__offcanvas-head{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
  }

  .swsh__offcanvas-title{
    display: flex;
    align-items: center;
    min-width: 0;
  }

  .swsh__offcanvas-title .custom-logo-link,
  .swsh__offcanvas-title img{
    display: block;
    max-width: 180px;
    height: auto;
  }

  .swsh__offcanvas-close{
    border: none;
    background: transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: 40px;
    line-height: 1;
    color: var(--swsh-text);
    box-shadow: none;
    padding: 0 6px 0 0;
  }

  .swsh__offcanvas-close:hover{
    box-shadow: none;
  }

  .swsh__offcanvas-body{
    width: 100%;
  }

  .swsh__mobile{
    width: 100%;
  }

  .swsh__offcanvas-inner > *{
    max-width: 760px;
  }

  .swsh__mobile-list{
    list-style: none;
    padding: 0;
    margin: 12px 0 0;
    display: grid;
    gap: 10px;
  }

  .swsh__mobile-item{
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .swsh__mobile-link{
    display: block;
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 500;
    color: var(--swsh-accent);
  }

  .swsh__mobile-link:hover{
    background: rgba(0,0,0,.04);
  }

  .swsh__mobile-acc{
    width: 100%;
    text-align: left;
    border: 1px solid transparent;
    background: transparent;
    cursor: pointer;
    padding: 12px 14px;
    border-radius: 12px;
    font-weight: 500;
    color: var(--swsh-accent);
  }

  .swsh__mobile-acc:hover{
    background: rgba(0,0,0,.04);
  }

  .swsh__mobile-panel{
    padding: 6px 14px 12px;
  }

  .swsh__mobile-col-title{
    font-weight: 500;
    color: var(--swsh-muted);
    margin-top: 10px;
    font-size: 1rem;
  }

  .swsh__mobile-col-title--link{
    display: block;
    color: var(--swsh-text);
    font-weight: 500;
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 12px;
  }

  .swsh__mobile-col-title--link:hover{
    background: transparent;
  }

  .swsh__mobile-col-desc{
    font-size: .8rem;
    color: var(--swsh-muted);
    margin: -10px 0 0;
    padding: 0 12px;
  }

  .swsh__mobile-sublist{
    list-style: none;
    padding: 0;
    margin: 6px 0 0;
    display: grid;
    gap: 6px;
  }

  .swsh__mobile-sublist a{
    display: block;
    padding: 10px 12px;
    border-radius: 12px;
    color: var(--swsh-accent);
  }

  .swsh__mobile-sublist a:hover{
    background: rgba(0,0,0,.04);
  }

  .swsh__mobile-label{
    display: block;
    font-weight: 500;
  }

  .swsh__mobile-desc{
    display: block;
    font-size: .8rem;
    color: var(--swsh-muted);
    margin-top: 2px;
  }

  .swsh__mobile-cta{
    margin-top: 16px;
  }

  html.swsh--offcanvas .swsh__offcanvas{
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .22s ease, visibility 0s linear 0s;
  }

  html.swsh--offcanvas .swsh__offcanvas-inner{
    transform: translateX(0);
  }

  html.swsh--offcanvas #swbt-toc-bubble,
  html.swsh--offcanvas #swbt-toc-backdrop,
  html.swsh--offcanvas #swbt-toc-canvas,
  html.swsh--offcanvas #intentfunnel-mount,
  html.swsh--offcanvas .intentfunnel-trigger-button,
  html.swsh--offcanvas .intentfunnel-trigger-circle,
  html.swsh--offcanvas .intentfunnel-widget{
    pointer-events: none;
  }

  html.swsh--lock,
  html.swsh--lock body{
    overflow: hidden;
  }
}

@media (prefers-reduced-motion: reduce){
  .swsh__mega,
  .swsh__offcanvas,
  .swsh__offcanvas-inner,
  .swsh__burger span{ transition:none !important; }
}
/* Sticky */
@media (min-width:1180px){

  /* Wichtig: targete das Element, das auch wirklich die Klassen bekommt.
     Wenn dein Header <header class="swsh" data-swsh> ist, passt beides.
     Ich nehme hier header.swsh, wie du es hast. */
  header.swsh{
    position: sticky;
    top: 0;
    z-index: 9999;
    will-change: transform, opacity;
    background: #fff;

    transform: translateY(0);
    opacity: 1;

    transition:
      transform 1.55s cubic-bezier(.22,.61,.36,1),
      opacity  1.65s ease;
  }

  /* Startzustand (JS setzt swsh--init) */
  header.swsh.swsh--init{
    transform: translateY(-64px);
    opacity: 0;
  }

  /* Ready-Zustand (JS setzt swsh--ready) */
  header.swsh.swsh--ready{
    transform: translateY(0);
    opacity: 1;
  }

  /* Beim Scrollen ausblenden (JS setzt swsh--hide) */
  header.swsh.swsh--hide{
    transform: translateY(-64px);
    opacity: 0;
    pointer-events: none;

    transition:
      transform .18s ease,
      opacity  .18s ease;
  }

  /* Nach Scroll-Ende wieder zeigen (JS setzt swsh--show) */
  header.swsh.swsh--show{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;

    transition:
      transform 1.55s cubic-bezier(.22,.61,.36,1),
      opacity  1.65s ease;
  }

  @media (prefers-reduced-motion: reduce){
    header.swsh{ transition: none !important; }
  }
}

/* Accessibility helper */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}