/* ============================================================================
   VISIONcontent — 1:1 aus der Design-Quelle VISIONcontent.dc.html
   Exakte Tokens: --red #E01E26 (Hover #B9121A), --dark #17181B, --ink #1A1B1E,
   --mut #55575C, --bg #F4F4F2, --line #E6E5E2, Footer #101114.
   Font: Instrument Sans. Buttons/Boxen ECKIG (kein Radius). Header 66px.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,600;1,700&display=swap');

:root{
  --red:#E01E26; --red-h:#B9121A; --dark:#17181B; --ink:#1A1B1E; --mut:#55575C;
  --bg:#F4F4F2; --line:#E6E5E2; --footer:#101114; --bd:#D8D7D4;
}

/* ---------- Grundfläche + Typo ---------- */
html,body{background:#fff !important;color:var(--ink)}
body{font-family:'Instrument Sans',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}

/* ---------- Wortmarke (Header + Footer) ---------- */
.vcWordmark{display:flex;align-items:center;font-size:25px;letter-spacing:-0.02em;white-space:nowrap;text-decoration:none !important}
.vcWordmark .vcW1{color:var(--red);font-weight:700}
.vcWordmark .vcW2{color:var(--ink);font-weight:600;font-style:italic}

/* ---------- Header: weiß, 66px, sticky ---------- */
#header, #header.isAtTop, #header.fixedShow{background:#fff !important;box-shadow:none;border-bottom:1px solid var(--line)}
#header #headerWrap, #header .wrap{background:transparent !important}
#logo{padding:0;display:flex;align-items:center;min-height:66px}
#navMain ul.lvl1>li.lvl1>.navBtnWrap>a, #navMain ul.lvl1>li.lvl1>a, #navMain a{
  color:var(--ink) !important;font-weight:500;font-size:14.5px;padding:0 16px}
#navMain ul.lvl1>li.lvl1>.navBtnWrap>a:hover, #navMain ul.lvl1>li.lvl1>a:hover{color:var(--red) !important}
#navMain ul.lvl1>li.lvl1.active>.navBtnWrap>a, #navMain ul.lvl1>li.lvl1.active>a{
  color:var(--red) !important;position:relative}
/* Aktiv-Linie nur wortbreit: 16px = horizontales Link-Padding */
@media (min-width:761px){
  #navMain ul.lvl1>li.lvl1.active>.navBtnWrap>a:after, #navMain ul.lvl1>li.lvl1.active>a:after{
    content:"";position:absolute;left:16px;right:16px;bottom:0;height:2px;background:var(--red)}
}
@media (max-width:760px){
  html.navMainOpen #navMain ul.lvl1>li.lvl1.active>a,
  html.navMainOpen #navMain ul.lvl1>li.lvl1.active .navBtnWrap>a{color:var(--red) !important}
}
#quickAccessFon,#quickAccessContact{display:none !important}
#quickAccess{background:transparent !important;box-shadow:none !important;border:none !important}
.vcA11yOverlayTrigger{background:transparent !important;color:var(--mut) !important;border:none !important}
#vcDemoBtn{display:inline-flex;align-items:center;gap:12px;background:var(--red) !important;color:#fff !important;
  font-size:14px;font-weight:600;padding:12px 20px;border-radius:0 !important;text-decoration:none;line-height:1;
  transition:background .15s}
#vcDemoBtn:hover{background:var(--red-h) !important;color:#fff !important}
#vcDemoBtn svg{flex:none}
#navMenuTrigger{color:var(--ink) !important}
#navMenuTrigger .line,#navMenuTrigger .line:before,#navMenuTrigger .line:after{background:var(--ink) !important}

/* ---------- Breadcrumb ---------- */
#breadcrumb .wrap, #breadcrumb a, #breadcrumb span{color:var(--mut) !important;font-size:12px}
#breadcrumb a:hover{color:var(--red) !important}

/* ---------- Typografie (Design: 600er-Gewichte, enge Laufweite) ---------- */
#content h1, .teaser h1{font-size:clamp(38px,4.4vw,64px);line-height:1.06;letter-spacing:-0.035em;font-weight:600;color:var(--ink)}
#content h2{font-size:clamp(26px,2.6vw,36px);line-height:1.15;letter-spacing:-0.02em;font-weight:600;color:var(--ink)}
#content h3{font-size:19px;line-height:1.3;letter-spacing:-0.01em;font-weight:600;color:var(--ink)}
#content h1 em,#content h2 em,#content h3 em,.teaser h1 em,.teaser h2 em{color:var(--red);font-style:normal}
#content p,#content li{font-size:15px;color:var(--mut);line-height:1.65}
#content a{color:var(--red)}

/* ---------- Bilder: eckig ---------- */
#content .imgWrap img,#content figure img,.teaser img{border-radius:0 !important}
#content figcaption{color:var(--mut);font-size:11.5px}

/* ---------- Hero (Teaser Startseite): Gradient 105deg, Text links ---------- */
#teaserSection{background:linear-gradient(105deg,#fff 0%,#fff 42%,#F1F0EE 100%) !important}
.teaserWrap,#teaser.teaser,.teaserItem,.teaserItem.textLeftImageRight{background:transparent !important}
.teaserItem .teaserItemTitle,.teaserItem .teaserItemTitleInner{background:transparent !important;color:var(--ink) !important}
.teaserItem .teaserItemTitleInner h1{font-size:clamp(42px,5.2vw,76px) !important;line-height:1.04;letter-spacing:-0.035em;font-weight:600;color:var(--ink) !important}
.teaserItem .teaserItemTitleInner .wrap p{color:var(--mut) !important;font-size:15.5px;line-height:1.65;max-width:420px}
.teaserItem .btn,.teaserItem a.btn,.teaserItem button{display:inline-flex;align-items:center;gap:14px;
  background:var(--red) !important;color:#fff !important;border:none !important;border-radius:0 !important;
  font-size:14px;font-weight:600;padding:14px 24px}
.teaserItem .btn:hover{background:var(--red-h) !important}
.teaserItem img{border-radius:0}
.teaser .swiper-pagination,.teaserWrap .swiper-pagination{display:none !important}

/* ---------- Buttons global (eckig, Design-Maße) ---------- */
#content input[type=submit],#content button[type=submit],#content .btn.btnRaised,#content a.btn{
  display:inline-flex;align-items:center;gap:14px;background:var(--red) !important;color:#fff !important;
  border:none !important;border-radius:0 !important;font-size:14px;font-weight:600;padding:14px 24px;cursor:pointer}
#content input[type=submit]:hover,#content button[type=submit]:hover{background:var(--red-h) !important}

/* ---------- Formulare (Kontakt): 1px #D8D7D4, eckig ---------- */
#content input[type=text],#content input[type=email],#content input[type=tel],
#content input[type=number],#content textarea,#content select{
  border:1px solid var(--bd);border-radius:0;background:#fff;color:var(--ink);
  font-size:13px;font-family:inherit;padding:12px 14px}
#content input:focus,#content textarea:focus,#content select:focus{outline:none;border-color:var(--ink);box-shadow:none}

/* ---------- Buch-Karten (Leistungen/Lösungen/Ressourcen) — Design-Cards ---------- */
.gridWrap.bookContents{gap:18px}
.gridWrap.bookContents .articleGrid{margin-bottom:18px}
.gridWrap.bookContents .articleGrid .gridWrapInner{
  background:#fff;border:1px solid var(--line);border-radius:0;overflow:hidden;height:100%;display:flex;
  flex-direction:column;transition:box-shadow .2s,transform .2s}
.gridWrap.bookContents .articleGrid .gridWrapInner:hover{
  box-shadow:0 10px 30px rgba(0,0,0,0.08);transform:translateY(-3px);border-color:var(--line)}
.gridWrap.bookContents .articleGrid .textWrap{padding:18px 16px 8px}
.gridWrap.bookContents .articleGrid h2,.gridWrap.bookContents .articleGrid h3,
.gridWrap.bookContents .articleGrid .gridHeadline{font-size:15px !important;font-weight:600;letter-spacing:0;color:var(--ink);margin:0 0 8px}
.gridWrap.bookContents .articleGrid p{font-size:12.5px;line-height:1.65;color:var(--mut)}
.gridWrap.bookContents .articleGrid .gridWrapInner:after{
  content:"\2192";display:block;color:var(--red);font-size:17px;font-weight:400;padding:0 16px 14px;margin-top:auto}
.gridWrap.bookContents .articleGrid .imgWrap{border-radius:0}

/* ---------- Akkordeons: Linien-Stil ---------- */
#content .accordionWrapper .ui-accordion-header{
  background:#fff !important;border:none !important;border-top:1px solid var(--line) !important;
  border-radius:0 !important;color:var(--ink) !important;font-weight:600;font-size:15px;padding:16px 6px !important;margin:0 !important}
#content .accordionWrapper .ui-accordion-header.ui-state-active,
#content .accordionWrapper .ui-accordion-header:hover{color:var(--red) !important}
#content .accordionWrapper .ui-accordion-content{
  background:#fff !important;border:none !important;color:var(--mut);font-size:13px;line-height:1.8;
  padding:2px 6px 20px !important;border-radius:0 !important}
#content .accordionWrapper{border-bottom:1px solid var(--line)}

/* ---------- Startseite: erstes Akkordeon = dunkles USP-Band (Design-Werte) ---------- */
#teaserSection ~ #content .accordionWrapper{
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto 1fr;grid-auto-flow:column;
  gap:0;background:var(--dark);border:none !important;border-radius:0;
  padding:clamp(32px,3.5vw,48px) clamp(16px,3.5vw,40px);margin:28px calc(50% - 50vw) 32px;width:100vw;max-width:100vw}
#teaserSection ~ #content .accordionWrapper .ui-accordion-header{
  background:transparent !important;border:none !important;border-left:1px solid rgba(255,255,255,0.12) !important;
  color:#fff !important;font-size:14.5px;font-weight:600;padding:10px 24px 8px !important;pointer-events:none}
#teaserSection ~ #content .accordionWrapper .ui-accordion-header:first-child{border-left:1px solid transparent !important}
#teaserSection ~ #content .accordionWrapper .ui-accordion-header .ui-accordion-header-icon{display:none}
#teaserSection ~ #content .accordionWrapper .ui-accordion-content{
  display:block !important;height:auto !important;background:transparent !important;
  border-left:1px solid rgba(255,255,255,0.12) !important;
  color:rgba(255,255,255,0.62) !important;font-size:12.5px;line-height:1.65;padding:0 24px 10px !important}
#teaserSection ~ #content .accordionWrapper .ui-accordion-content:nth-of-type(1){border-left-color:transparent !important}
@media (max-width:900px){#teaserSection ~ #content .accordionWrapper{grid-template-columns:repeat(2,1fr);grid-template-rows:auto 1fr auto 1fr}}

/* ---------- Trust-Leiste (Design: weiß, Label 11px .22em) ---------- */
#vcTrust{background:#fff;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:clamp(28px,3vw,40px) clamp(16px,3.5vw,40px);text-align:center}
#vcTrust .vcTrustLabel{display:block;font-size:11px;font-weight:600;letter-spacing:0.22em;
  text-transform:uppercase;color:var(--mut);margin-bottom:24px}
#vcTrust .vcTrustRow{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(28px,4.5vw,72px);max-width:1400px;margin:0 auto}
#vcTrust .vcTrustMark{font-size:17px;font-weight:600;color:#3A3B3F;white-space:nowrap}
#vcTrust .vcTrustInvert{background:var(--ink);color:#fff;padding:3px 10px;font-size:14px;letter-spacing:.08em}

/* ---------- Footer: #101114, Logo + Link-Spalten + Rechtliches ---------- */
#footer.vcFooter{background:var(--footer) !important;color:#fff}
.vcFooterWrap{max-width:1400px;margin:0 auto;padding:clamp(44px,5vw,64px) clamp(16px,3.5vw,40px) 28px}
.vcFooterGrid{display:flex;flex-wrap:wrap;gap:36px}
.vcFooterBrand{flex:2 1 220px;min-width:220px}
.vcFooterCol{flex:1 1 110px}
.vcFooterBrand .vcWordmark{font-size:20px}
.vcFooterBrand .vcWordmark .vcW2{color:#fff}
.vcFooterBrand p{margin:14px 0 0;font-size:12.5px;line-height:1.7;color:rgba(255,255,255,0.55)}
.vcFooterHd{font-size:13px;font-weight:600;margin-bottom:14px;color:#fff}
.vcFooterHd a{color:#fff !important;text-decoration:none}
.vcFooterHd a:hover{color:var(--red) !important;text-decoration:none}
.vcFooterCol{display:flex;flex-direction:column;gap:9px}
.vcFooterCol a,.vcFooterCol .vcFooterLinkBtn{font-size:12.5px;color:rgba(255,255,255,0.55) !important;
  text-decoration:none;background:none;border:none;padding:0;text-align:left;cursor:pointer;font-family:inherit}
.vcFooterCol a:hover,.vcFooterCol .vcFooterLinkBtn:hover{color:#fff !important;text-decoration:none}
.vcFooterFoerder{flex:0 0 auto}
.vcFoerderBox{background:#fff;padding:10px 12px;max-width:180px}
.vcFoerderBox img{display:block;width:100%;height:auto}
.vcFooterBottom{margin-top:44px;padding-top:22px;border-top:1px solid rgba(255,255,255,0.1);
  display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between}
.vcCopy{font-size:12px;color:rgba(255,255,255,0.45)}
/* ID-Selektor: main.css #footerTop (display:block, padding-right:30px, :after-Icon)
   uebersteuern — der Pfeil soll exakt mittig im 32x32-Quadrat sitzen */
#footer.vcFooter #footerTop.vcTop{position:absolute;right:24px;margin:-52px 0 0 0;width:32px;height:32px;
  border:1px solid rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;
  padding:0;line-height:1;font-size:15px;color:rgba(255,255,255,0.7) !important;text-decoration:none}
#footer.vcFooter #footerTop.vcTop:after{display:none;content:none}
#footer.vcFooter #footerTop.vcTop:hover{border-color:#fff;color:#fff !important}
#footer.vcFooter{position:relative}

/* Fix: gridStyle=on legt .textWrap absolut übers Bild — ohne Bild unsichtbar.
   Design-Karten sind Text-im-Fluss: erzwingen. */
.gridWrap.bookContents .articleGrid .gridWrapInner{position:relative}
.gridWrap.bookContents .articleGrid .textWrap{
  position:static !important;transform:none !important;inset:auto !important;
  background:transparent !important;opacity:1 !important;visibility:visible !important;
  padding:20px 18px 6px !important;color:var(--ink) !important}
.gridWrap.bookContents .articleGrid .textWrap .info{position:static !important;color:inherit !important}
.gridWrap.bookContents .articleGrid .textWrap .gridHeadline{color:var(--ink) !important;text-shadow:none !important}
.gridWrap.bookContents .articleGrid .textWrap p{color:var(--mut) !important;text-shadow:none !important}

/* Grid-Layout selbst übernehmen — exakt die Design-Formel */
.gridWrap.bookContents{display:grid !important;grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));gap:18px !important;width:100%}
.gridWrap.bookContents .articleGrid{width:auto !important;max-width:none !important;min-width:0 !important;margin:0 !important;float:none !important;padding:0 !important}

/* Header eckig — Design-Quelle kennt keine Radien (Alt-Theme rundet #header unten) */
#header{border-radius:0 !important}
#header .stickyWrap,#header .baseSpacer{border-radius:0 !important}

/* Header randlos: Alt-Theme laesst links/rechts 20px frei (schwebender Balken) - Design ist full-width */
#header{left:0 !important;right:0 !important;margin:0 !important;border-radius:0 !important}

/* ===== MOBILE (Design-Seiten): Header kompakt + Hero als Bild-oben ===== */
@media (max-width: 760px) {
  /* Header: eine kompakte Zeile - Wordmark links, Demo + Burger rechts */
  #header{height:60px}
  #logo.vcWordmark{padding:0 0 0 2px;height:60px;display:flex;align-items:center}
  .vcWordmark .vcW1,.vcWordmark .vcW2{font-size:19px !important;line-height:1}
  #headerControl{position:absolute !important;right:8px !important;left:auto !important;top:0 !important;height:60px;display:flex;align-items:center;gap:6px;width:auto !important}
  #quickAccess{position:static !important;display:flex;align-items:center;height:auto !important}
  .vcA11yOverlayTrigger{display:none !important}
  #vcDemoBtn.quickAccessItem{font-size:12px !important;padding:9px 12px !important;height:auto !important;line-height:1 !important;white-space:nowrap;display:inline-flex !important;align-items:center;gap:8px}
  #vcDemoBtn.quickAccessItem svg{width:13px;height:9px}
  #navMenuTrigger{position:static !important;width:44px !important;min-width:44px !important;height:40px !important;margin:0 !important;padding:0 !important}
  #navMenuTrigger .menu{display:none !important}
  #navMenuTrigger .line{position:static !important;display:block !important;width:22px !important;height:2px !important;background:var(--ink) !important;margin:4px auto !important}

  /* Hero: Bild als Band OBEN (volle Breite, nach unten weich auslaufend),
     Text darunter auf Weiss - gut lesbar auf jedem Bild */
  .vcHeroImg{position:relative !important;top:auto !important;right:auto !important;bottom:auto !important;width:100% !important;height:56vw;min-height:200px;max-height:340px;
    -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,0) 100%) !important;
    mask-image:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,0) 100%) !important}
  .vcHeroWrap{min-height:0 !important;display:block !important;margin-top:-14vw !important}
  .vcHeroTxt{max-width:none !important;padding:0 16px 40px !important}
}

@media (max-width:760px){#logo.vcWordmark{margin:0 !important;padding:0 !important;height:60px !important;align-items:center !important}}

/* Mobiles Menue (html.navMainOpen): weisses Vollflaechen-Panel im Design-Stil
   statt des transparenten Alt-Overlays */
@media (max-width: 760px) {
  html.navMainOpen #header{background:#fff !important}
  html.navMainOpen #headerWrap{display:block !important;position:fixed !important;top:60px !important;left:0 !important;right:0 !important;bottom:0 !important;height:auto !important;max-height:none !important;background:#fff !important;overflow:auto !important;z-index:9999 !important;padding:0 !important}
  html.navMainOpen #headerWrap .wrap{height:auto !important;padding:6px 0 24px !important;max-width:none !important}
  html.navMainOpen #navMain{display:block !important;height:auto !important}
  html.navMainOpen #navMain ul.lvl1{display:block !important;height:auto !important;padding:4px 18px !important;margin:0 !important}
  html.navMainOpen #navMain ul.lvl1 > li{display:block !important;float:none !important;width:100% !important;border-bottom:1px solid var(--line) !important;margin:0 !important;padding:0 !important;background:none !important}
  html.navMainOpen #navMain ul.lvl1 > li > a{display:block !important;padding:16px 2px !important;font-size:17px !important;font-weight:600 !important;color:var(--ink) !important;background:none !important;border:none !important;text-decoration:none !important;line-height:1.3 !important}
  html.navMainOpen #navMain ul.lvl1 > li > a:hover{color:var(--red) !important}
  html.navMainOpen #navMenuTrigger{width:44px !important;min-width:44px !important;background:none !important;border:none !important;color:var(--ink) !important}
  html.navMainOpen #navMenuTrigger .schliessen{display:none !important}
}

/* Mobiles Menue Nachtrag: weisser Hintergrund auf allen Ebenen (Alt hat
   background-Transition mit Delay, .wrap-Farbtraeger und :after-Gradient) */
@media (max-width: 760px) {
  html.navMainOpen #headerWrap{background:#fff !important;background-color:#fff !important;transition:none !important}
  html.navMainOpen #headerWrap > .wrap{background:#fff !important;background-color:#fff !important;transition:none !important;padding-top:72px !important;border-radius:0 !important}
  html.navMainOpen #header.expanded:after{display:none !important;content:none !important}
  html.navMainOpen #header{background:#fff !important;background-color:#fff !important}
}

/* Mobiles Menue Nachtrag 2: Links liegen in .navBtnWrap; Panel volle Hoehe */
@media (max-width: 760px) {
  html.navMainOpen #headerWrap > .wrap{min-height:100% !important;box-sizing:border-box}
  html.navMainOpen #navMain ul.lvl1 .navBtnWrap{display:block !important;padding:0 !important;margin:0 !important;background:none !important}
  html.navMainOpen #navMain ul.lvl1 .navBtnWrap > a{display:block !important;padding:16px 2px !important;font-size:17px !important;font-weight:600 !important;color:var(--ink) !important;background:none !important;border:none !important;text-decoration:none !important;line-height:1.3 !important}
  html.navMainOpen #navMain ul.lvl1 .navBtnWrap > a .name{color:inherit !important;font-size:inherit !important;font-weight:inherit !important;background:none !important;padding:0 !important}
  html.navMainOpen #navMain ul.lvl1 .navBtnWrap > a:hover .name{color:var(--red) !important}
}

/* Mobiles Menue Nachtrag 3: Alt-"schliessen"-Beschriftung des Triggers weg -
   im Open-Zustand bleiben die drei Striche (Toggle) */
@media (max-width: 760px) {
  html.navMainOpen #navMenuTrigger{font-size:0 !important;color:transparent !important;overflow:hidden !important}
  html.navMainOpen #navMenuTrigger:before,html.navMainOpen #navMenuTrigger:after{display:none !important;content:none !important}
  #navMenuTrigger:before,#navMenuTrigger:after{display:none !important;content:none !important}
  #navMenuTrigger{font-size:0 !important;color:transparent !important;overflow:hidden !important;background:none !important;border:none !important}
}

/* ===== Marken-Marquee (Logos laufen endlos durch, Hover pausiert) ===== */
.vcBrandsViewport{overflow:hidden;width:100%}
.vcBrandsTrack{display:inline-flex;gap:clamp(40px,6vw,90px);align-items:center;padding:0 24px;width:max-content;animation:vcMarquee 28s linear infinite;will-change:transform}
.vcBrandsViewport:hover .vcBrandsTrack{animation-play-state:paused}
.vcBrandItem{flex:none;display:flex;align-items:center}
@keyframes vcMarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}


/* ===== Prozess 01-04: auf grossen Screens fest NEBENEINANDER ===== */
@media (min-width: 1100px){.vcSteps{grid-template-columns:repeat(4,1fr) !important}}

/* ===== Scroll-Reveal: Kinder blenden nacheinander ein (JS setzt vcIn) ===== */
.vcRevealKids > *{opacity:0;transform:translateY(18px);transition:opacity .55s ease,transform .55s ease}
.vcRevealKids.vcIn > *{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){.vcRevealKids > *{opacity:1 !important;transform:none !important;transition:none !important}}

/* ===== Ressourcen-Reihen: Scroll-Snap-Slider (greift bei vielen Karten
   und auf kleineren Screens automatisch - Karten behalten feste Breite) ===== */
.vcResRow{display:grid !important;grid-template-columns:none !important;grid-auto-flow:column;grid-auto-columns:min(270px,82vw);overflow-x:auto;scroll-snap-type:x proximity;padding-bottom:10px;scrollbar-width:thin;scrollbar-color:#D8D7D4 transparent}
.vcResRow > *{scroll-snap-align:start}
.vcResRow::-webkit-scrollbar{height:6px}
.vcResRow::-webkit-scrollbar-thumb{background:#D8D7D4}



/* Buch-Konfiguration Boxen pro Reihe (vcColsGrid): mobil 1, Tablet 2 Spalten */
@media (max-width:760px){.vcColsGrid{grid-template-columns:1fr !important}}
@media (min-width:761px) and (max-width:1024px){.vcColsGrid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}}