/* skillbyte · Einheitliche Navigation (sbnav)
   Eine Leiste auf allen Seiten: Startseite (header.sbn, im HTML vorgerendert),
   Landingpages und Wissen (nav.nav), Reel-Seiten (header.p1-nav).
   Aufbau und Verhalten: meganav.js (Leiste, Panels ab 881 px),
   mobilenav.js (Sheet unter 881 px). Dieses Stylesheet steht render-
   blockierend im <head>: Die Leiste hat ab dem ersten Bild Endmass, Endfarbe
   und das Logo an seinem Platz. Kein Layoutsprung, kein Aufblitzen der alten
   Leiste, wenn das Skript sie ersetzt.
   Raster 8 px. Tokens: Sora, IBM Plex Mono, Petrol #0E7490, Ink #0B2830,
   Cyan #25C1DE. Kontraste auf Weiss: Text 5,3:1, Label 4,9:1, Petrol 5,4:1. */

:root{
  --sbn-h:64px;
  --sbn-max:1264px;
  --sbn-pad:32px;
  --sbn-ink:#0B2830;
  --sbn-petrol:#0E7490;
  --sbn-cyan:#25C1DE;
  --sbn-text:#55707C;
  --sbn-label:#5E747D;
  --sbn-line:#E3EBEE;
  --sbn-tint:#F1F6F7;
  --sbn-soft:#E6F2F5;
  --sbn-font:'Sora','Roboto','Helvetica Neue',Arial,sans-serif;
  --sbn-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
  --sbn-ease:cubic-bezier(.2,0,0,1);
}
@media(max-width:1023px){:root{--sbn-pad:24px}}
@media(max-width:880px){:root{--sbn-pad:16px}}

/* ── 1 · Gastgeber: Mass und Flaeche, vor und nach dem Einhaengen ───────── */
nav.nav,header.p1-nav,header.sbn{
  box-sizing:border-box!important;height:var(--sbn-h)!important;min-height:0!important;max-height:none!important;
  margin:0!important;padding:0!important;display:flex!important;align-items:center!important;
  background:#fff!important;border:0!important;box-shadow:inset 0 -1px 0 var(--sbn-line)!important;
  -webkit-backdrop-filter:none!important;backdrop-filter:none!important;
  transform:none!important;opacity:1!important;top:0!important;z-index:1000!important;
  color:var(--sbn-ink)!important;
}
/* Fest stehende Leisten (Startseite, Reel-Seiten) laufen ueber die volle Breite */
header.sbn,header.p1-nav{position:fixed!important;left:0!important;right:0!important;width:auto!important}
/* Reel-Seiten: die Leiste war Teil des Hero. Sie steht jetzt fest oben, der
   Hero gibt ihr dafuer oben ihre Hoehe frei. */
section.p1{padding-top:var(--sbn-h)!important}
/* Vier Reel-Seiten (/ki-prozessautomatisierung/*) liessen das Video erst
   unter der alten 72-px-Leiste beginnen; es beginnt jetzt oben wie auf den
   uebrigen Reel-Seiten, die Leiste liegt darueber. */
section.p1 .p1-vid{top:0!important}

/* Vor dem Einhaengen: alte Inhalte unsichtbar, das Logo steht schon an
   seiner endgueltigen Stelle. Laedt das Skript nicht, erscheint nach drei
   Sekunden wieder die alte Leiste (Rueckfall, nie eine leere Leiste). */
nav.nav:not(.sbn),header.p1-nav:not(.sbn){overflow:hidden!important;padding:0 var(--sbn-pad)!important}
nav.nav:not(.sbn)>*,header.p1-nav:not(.sbn)>*{visibility:hidden;animation:sbn-rueckfall 0s linear 3s forwards}
/* Eigene Pseudo-Elemente der alten Leisten (Verlauf ueber dem Hero) aus */
nav.nav::after,header.p1-nav::after,header.sbn::after,header.sbn::before,.sbn::before{content:none!important;display:none!important}
nav.nav:not(.sbn)::before,header.p1-nav:not(.sbn)::before{
  content:"";position:absolute;top:20px;width:98px;height:24px;
  left:max(var(--sbn-pad),calc(50% - var(--sbn-max) / 2 + var(--sbn-pad)));
  background:url(/10_ASSETS/landing_pages/img/logo/skillbyte-dark.svg) no-repeat 0 0/98px 24px;
  animation:sbn-weg 0s linear 3s forwards;
}
@keyframes sbn-rueckfall{to{visibility:visible}}
@keyframes sbn-weg{to{visibility:hidden}}
.sbn{overflow:visible!important}

/* ── 2 · Leiste ───────────────────────────────────────────────────────── */
#sbn{
  box-sizing:border-box;display:flex;flex-direction:row;align-items:center;flex:1 1 auto;width:100%;
  max-width:var(--sbn-max);height:var(--sbn-h);margin:0 auto;padding:0 var(--sbn-pad);
  font:400 14px/20px var(--sbn-font);color:var(--sbn-ink);letter-spacing:0;text-align:left;
  text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
#sbn *,#sbn *::before,#sbn *::after{box-sizing:border-box}
#sbn a{text-decoration:none;text-shadow:none}
#sbn ul,#sbn li{margin:0;padding:0;list-style:none}
#sbn ul::before,#sbn li::before,#sbn li::marker{content:none}
#sbn p{max-width:none}
#sbn :focus{outline:none}
#sbn :focus-visible{outline:2px solid var(--sbn-petrol);outline-offset:2px}

/* Vom Skript eingehaengt: Menue und Pillen blenden kurz ein, das Logo
   steht schon (Platzhalter vorher an derselben Stelle) */
#sbn.sbn-ein .sbn-menu,#sbn.sbn-ein .sbn-acts{animation:sbn-ein .2s var(--sbn-ease) both}
@keyframes sbn-ein{from{opacity:0}to{opacity:1}}
#sbn .sbn-logo{display:flex;align-items:center;flex:none;height:40px;margin:0 24px 0 0;border-radius:8px}
#sbn .sbn-logo img{display:block;width:98px;height:24px;max-width:none}

#sbn .sbn-nav{display:flex;flex-direction:row;align-items:center;margin:0;padding:0;background:none;border:0;position:static}
#sbn .sbn-menu{display:flex;flex-direction:row;align-items:center;gap:4px;position:static}
#sbn .sbn-li{position:static}
#sbn .sbn-trg{
  display:inline-flex;align-items:center;gap:4px;height:40px;margin:0;padding:0 12px;
  border:0;border-radius:8px;background:transparent;box-shadow:none;cursor:pointer;
  font:400 15px/24px var(--sbn-font);letter-spacing:-.005em;color:var(--sbn-ink);text-transform:none;
  transition:background-color .15s;
}
#sbn .sbn-trg:hover,#sbn .sbn-li.on .sbn-trg{background:var(--sbn-tint)}
/* Aktueller Bereich: Strich auf der Unterkante der Leiste, ohne die Breite
   des Labels zu aendern (gleiche Positionen auf jeder Seite) */
#sbn .sbn-trg[aria-current="true"]{position:relative}
#sbn .sbn-trg[aria-current="true"]::after{content:"";position:absolute;left:12px;right:28px;bottom:-12px;height:2px;border-radius:2px;background:var(--sbn-petrol)}
#sbn .sbn-chev{display:block;width:12px;height:12px;flex:none;color:var(--sbn-text);transition:transform .2s var(--sbn-ease)}
#sbn .sbn-li.on .sbn-chev{transform:rotate(180deg)}

#sbn .sbn-acts{display:flex;flex-direction:row;align-items:center;gap:8px;margin-left:auto}
#sbn .sbn-pill{
  display:inline-flex;align-items:center;justify-content:center;height:40px;margin:0;padding:0 16px;
  border-radius:999px;font:600 14px/20px var(--sbn-font);letter-spacing:0;white-space:nowrap;
  text-transform:none;transition:background-color .15s,border-color .15s,color .15s;
}
#sbn .sbn-pill--line{border:1px solid #C9D7DB;background:#fff;color:var(--sbn-ink)}
#sbn .sbn-pill--line:hover{border-color:var(--sbn-ink);background:var(--sbn-tint)}
#sbn .sbn-pill--dark{border:1px solid var(--sbn-ink);background:var(--sbn-ink);color:#fff}
#sbn .sbn-pill--dark:hover{border-color:var(--sbn-petrol);background:var(--sbn-petrol);color:#fff}
#sbn .sbn-burger{display:none}

/* ── 3 · Panels (Desktop) ─────────────────────────────────────────────── */
#sbn .sbn-panel{
  position:absolute;left:0;right:0;top:100%;z-index:1;max-height:calc(100vh - var(--sbn-h));overflow-y:auto;
  background:#fff;box-shadow:inset 0 1px 0 var(--sbn-line),0 32px 48px -32px rgba(11,40,48,.28);
  visibility:hidden;opacity:0;transform:translateY(-8px);
  transition:opacity .16s var(--sbn-ease),transform .24s var(--sbn-ease),visibility 0s linear .24s;
}
#sbn .sbn-li.on .sbn-panel{visibility:visible;opacity:1;transform:none;transition-delay:0s}
/* Ohne Skript (vorgerenderte Leiste der Startseite): Hover und Tastaturfokus
   oeffnen das Panel per CSS. meganav.js setzt html.sbn-js und uebernimmt. */
html:not(.sbn-js) #sbn .sbn-li:hover .sbn-panel,html:not(.sbn-js) #sbn .sbn-li:focus-within .sbn-panel{visibility:visible;opacity:1;transform:none;transition-delay:0s}
/* Wechsel zwischen zwei offenen Panels: Inhalt tauscht ohne zweite Animation */
#sbn.sbn-tausch .sbn-panel{transition:none}
#sbn .sbn-wrap{max-width:var(--sbn-max);margin:0 auto;padding:32px var(--sbn-pad) 40px}
#sbn .sbn-grid{display:grid;align-items:start;column-gap:48px}
#sbn .sbn-grid--std{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.94fr)}
#sbn .sbn-grid--res{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.45fr)}
#sbn .sbn-grid--loe{grid-template-columns:repeat(4,minmax(0,1fr))}
#sbn .sbn-col--2{grid-column:span 2}
/* Optische Kante: Text der Spalten steht buendig mit dem Logo, die
   Hover-Flaeche ragt 12 px in den Rand */
#sbn .sbn-col{margin:0 -12px}

#sbn .sbn-h{margin:0 0 8px;padding:0 12px;font:500 11px/16px var(--sbn-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sbn-label)}
#sbn .sbn-list{display:grid;gap:4px}
/* Zwei Unterspalten in einer Gruppe: 24 px Abstand (= Spaltenabstand 48 px
   minus 2 x 12 px Hover-Rand), damit beide Texte auf den Rasterlinien stehen */
#sbn .sbn-list--2{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:24px}
#sbn .sbn-item{display:block;padding:8px 12px;border-radius:12px;color:var(--sbn-ink);transition:background-color .15s}
#sbn .sbn-item:hover{background:var(--sbn-tint)}
#sbn .sbn-t{display:block;font:600 15px/24px var(--sbn-font);letter-spacing:-.005em;color:var(--sbn-ink)}
#sbn .sbn-d{display:block;font:400 14px/20px var(--sbn-font);color:var(--sbn-text)}
#sbn .sbn-item[aria-current="page"] .sbn-t{color:var(--sbn-petrol)}
#sbn .sbn-more{display:inline-flex;align-items:center;gap:8px;margin:8px 0 0;padding:8px 12px;border-radius:8px;font:600 14px/24px var(--sbn-font);color:var(--sbn-petrol)}
#sbn .sbn-more:hover{background:var(--sbn-tint)}
#sbn .sbn-more svg{width:12px;height:12px;transition:transform .2s var(--sbn-ease)}
#sbn .sbn-more:hover svg{transform:translateX(2px)}

/* Feature-Karte: Bild mit runden Ecken, darunter Titel und eine Zeile */
#sbn .sbn-card{display:block;color:var(--sbn-ink)}
#sbn .sbn-media{position:relative;display:block;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:var(--sbn-soft)}
#sbn .sbn-media img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .3s,transform .5s var(--sbn-ease)}
#sbn .sbn-media img.sbn-da{opacity:1}
#sbn .sbn-card:hover .sbn-media img{transform:scale(1.03)}
#sbn .sbn-play{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;background:rgba(255,255,255,.94);box-shadow:0 8px 24px -8px rgba(11,40,48,.5);display:grid;place-items:center;transition:transform .2s var(--sbn-ease)}
#sbn .sbn-play::before{content:"";display:block;margin-left:4px;border-style:solid;border-width:8px 0 8px 14px;border-color:transparent transparent transparent var(--sbn-ink)}
#sbn .sbn-card:hover .sbn-play{transform:scale(1.08)}
#sbn .sbn-card .sbn-t{margin-top:16px}
/* Karte mit Folgelink darunter (Loesungen: alle Anwendungsfaelle) */
#sbn .sbn-cardcol{display:flex;flex-direction:column;align-items:flex-start}
#sbn .sbn-cardcol .sbn-card{align-self:stretch}
#sbn .sbn-cardcol .sbn-more{margin:16px 0 0 -12px}
#sbn .sbn-card:hover .sbn-t{color:var(--sbn-petrol)}

/* Ressourcen: grosse, weich getoente Flaeche mit dem Buch */
#sbn .sbn-stage{position:relative;display:flex;align-items:center;justify-content:center;height:240px;border-radius:16px;overflow:hidden;perspective:1200px;
  background:radial-gradient(120% 90% at 78% 12%,#F6FBFC 0%,rgba(246,251,252,0) 60%),linear-gradient(150deg,#E8F4F7 0%,#D3EAF0 100%)}
#sbn .sbn-stage::after{content:"";position:absolute;left:50%;bottom:24px;width:224px;height:24px;margin-left:-104px;border-radius:50%;background:radial-gradient(closest-side,rgba(11,40,48,.28),rgba(11,40,48,0));filter:blur(2px)}
#sbn .sbn-buch{position:relative;z-index:1;width:160px;height:162px;transform:rotateY(-28deg) rotateX(6deg);transform-style:preserve-3d;transition:transform .6s var(--sbn-ease)}
#sbn .sbn-card:hover .sbn-buch{transform:rotateY(-16deg) rotateX(4deg) translateY(-4px)}
#sbn .sbn-buch img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;border-radius:2px 4px 4px 2px;transform:translateZ(8px);opacity:1}
#sbn .sbn-buch::before{content:"";position:absolute;top:3px;bottom:3px;left:152px;width:16px;transform:rotateY(90deg);
  background:repeating-linear-gradient(90deg,#FBFAF6 0 1px,#E2DED4 1px 2px);border-radius:1px}
#sbn .sbn-buch::after{content:"";position:absolute;inset:0;border-radius:2px 4px 4px 2px;background:#1E1B17;transform:translateZ(-8px);box-shadow:0 24px 32px -16px rgba(11,40,48,.45)}

/* Hintergrund unter offenem Panel */
#sbn-dim{position:fixed;left:0;right:0;bottom:0;top:var(--sbn-h);z-index:999;background:rgba(11,40,48,.16);opacity:0;visibility:hidden;transition:opacity .2s,visibility 0s linear .2s}
#sbn-dim.on{opacity:1;visibility:visible;transition-delay:0s}

/* Schmalere Desktops: Karte zuerst schmaler, dann ausblenden */
@media(max-width:1199px){
  #sbn .sbn-grid--loe{grid-template-columns:repeat(3,minmax(0,1fr))}
  #sbn .sbn-grid--loe .sbn-card{display:none}
  #sbn .sbn-grid--loe .sbn-cardcol{grid-column:1/-1;margin-top:8px}
  #sbn .sbn-grid--loe .sbn-cardcol .sbn-more{margin-top:0}
  #sbn .sbn-grid--std{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,.8fr)}
  #sbn .sbn-grid--res{grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.1fr)}
}
@media(max-width:1023px){
  #sbn .sbn-grid{column-gap:32px}
  #sbn .sbn-list--2{column-gap:32px}
  #sbn .sbn-grid--std,#sbn .sbn-grid--res{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  #sbn .sbn-grid--std .sbn-card,#sbn .sbn-grid--res .sbn-card{display:none}
  #sbn .sbn-pill--line{display:none}
}

/* ── 4 · Mobil: Leiste mit Logo, Live-Demo und Menue-Knopf ───────────── */
@media(max-width:880px){
  #sbn .sbn-menu,#sbn .sbn-pill--line{display:none}
  #sbn .sbn-logo{margin-right:auto}
  #sbn .sbn-pill--dark{height:40px;padding:0 16px}
  #sbn .sbn-burger{
    display:grid;place-items:center;position:relative;width:44px;height:44px;margin:0;padding:0;
    border:1px solid #C9D7DB;border-radius:12px;background:#fff;color:var(--sbn-ink);cursor:pointer;
  }
  #sbn .sbn-burger i,#sbn .sbn-burger i::before,#sbn .sbn-burger i::after{
    content:"";position:absolute;left:50%;width:18px;height:2px;margin-left:-9px;border-radius:2px;background:currentColor;
    transition:transform .24s var(--sbn-ease),background-color .2s;
  }
  #sbn .sbn-burger i{top:50%;margin-top:-1px}
  #sbn .sbn-burger i::before{left:0;top:-6px;margin:0}
  #sbn .sbn-burger i::after{left:0;top:6px;margin:0}
  #sbn .sbn-burger[aria-expanded="true"] i{background:transparent}
  #sbn .sbn-burger[aria-expanded="true"] i::before{transform:translateY(6px) rotate(45deg)}
  #sbn .sbn-burger[aria-expanded="true"] i::after{transform:translateY(-6px) rotate(-45deg)}
  #sbn .sbn-panel,#sbn-dim{display:none}
}
@media(max-width:359px){#sbn .sbn-pill--dark{display:none}}

/* ── 5 · Mobiles Sheet (mobilenav.js) ─────────────────────────────────── */
#sbn-sheet{
  position:fixed;left:0;right:0;bottom:0;top:var(--sbn-top,var(--sbn-h));z-index:999;box-sizing:border-box;
  display:flex;flex-direction:column;background:#fff;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:8px 16px calc(24px + env(safe-area-inset-bottom,0px));
  font:400 14px/20px var(--sbn-font);color:var(--sbn-ink);text-align:left;-webkit-font-smoothing:antialiased;
  visibility:hidden;opacity:0;transform:translateY(-8px);
  transition:opacity .2s var(--sbn-ease),transform .24s var(--sbn-ease),visibility 0s linear .24s;
}
#sbn-sheet.on{visibility:visible;opacity:1;transform:none;transition-delay:0s}
#sbn-sheet *,#sbn-sheet *::before,#sbn-sheet *::after{box-sizing:border-box}
#sbn-sheet a{text-decoration:none}
#sbn-sheet ul,#sbn-sheet li{margin:0;padding:0;list-style:none}
#sbn-sheet ul::before,#sbn-sheet li::before,#sbn-sheet li::marker{content:none}
#sbn-sheet p{max-width:none}
#sbn-sheet :focus{outline:none}
#sbn-sheet :focus-visible{outline:2px solid var(--sbn-petrol);outline-offset:2px}
#sbn-sheet .sbn-m-sek{border-bottom:1px solid var(--sbn-line)}
#sbn-sheet .sbn-m-row{
  display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:16px;width:100%;height:56px;min-height:0;margin:0;padding:0 4px;
  border:0;border-radius:0;background:none;box-shadow:none;cursor:pointer;font:600 17px/24px var(--sbn-font);letter-spacing:0;
  text-transform:none;color:var(--sbn-ink);text-align:left;
}
#sbn-sheet .sbn-m-row svg{display:block;flex:none;width:14px;height:14px;color:var(--sbn-text);transition:transform .24s var(--sbn-ease)}
#sbn-sheet .sbn-m-row[aria-expanded="true"] svg{transform:rotate(180deg)}
#sbn-sheet .sbn-m-body{display:grid;grid-template-rows:0fr;visibility:hidden;transition:grid-template-rows .28s var(--sbn-ease),visibility 0s linear .28s}
#sbn-sheet .sbn-m-sek.auf .sbn-m-body{grid-template-rows:1fr;visibility:visible;transition-delay:0s}
#sbn-sheet .sbn-m-in{min-height:0;overflow:hidden}
#sbn-sheet .sbn-m-gr{padding:0 0 16px}
#sbn-sheet .sbn-m-h{margin:0;padding:8px 4px;font:500 11px/16px var(--sbn-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--sbn-label)}
#sbn-sheet .sbn-m-item{display:block;padding:8px 4px;border-radius:12px;color:var(--sbn-ink)}
#sbn-sheet .sbn-m-item:active{background:var(--sbn-tint)}
#sbn-sheet .sbn-m-t{display:block;font:600 15px/24px var(--sbn-font);color:var(--sbn-ink)}
#sbn-sheet .sbn-m-d{display:block;font:400 14px/20px var(--sbn-font);color:var(--sbn-text)}
#sbn-sheet .sbn-m-item[aria-current="page"] .sbn-m-t{color:var(--sbn-petrol)}
#sbn-sheet .sbn-m-acts{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto;padding-top:24px}
#sbn-sheet .sbn-m-pill{display:flex;align-items:center;justify-content:center;height:48px;padding:0 16px;border-radius:999px;font:600 15px/20px var(--sbn-font);white-space:nowrap}
#sbn-sheet .sbn-m-pill--line{border:1px solid #C9D7DB;color:var(--sbn-ink);background:#fff}
#sbn-sheet .sbn-m-pill--dark{border:1px solid var(--sbn-ink);background:var(--sbn-ink);color:#fff}
@media(min-width:881px){#sbn-sheet{display:none}}
@media(max-width:359px){#sbn-sheet .sbn-m-acts{grid-template-columns:1fr}}

@media(prefers-reduced-motion:reduce){
  #sbn .sbn-panel,#sbn .sbn-chev,#sbn .sbn-media img,#sbn .sbn-buch,#sbn .sbn-play,#sbn-dim,
  #sbn-sheet,#sbn-sheet .sbn-m-body,#sbn-sheet .sbn-m-row svg,#sbn .sbn-burger i,#sbn .sbn-burger i::before,#sbn .sbn-burger i::after{transition:none}
  #sbn .sbn-panel{transform:none}
  #sbn.sbn-ein .sbn-menu,#sbn.sbn-ein .sbn-acts{animation:none}
}