/* ============================================================
   Sovereign Cloud Compass – UI-Schicht, v2 (01.10.2026)
   Ergaenzt styles.css um das Design von itcapital.de.
   Rein additiv: wird diese Datei entfernt, steht wieder der
   vorherige Stand. Kompassmotiv aus assets/favicon.svg.
   Positionierung und z-index der Kopfzeilen werden bewusst
   NICHT angefasst.
   ============================================================ */

/* ---- 1. Hintergrund -------------------------------------
   Das Kompassmotiv steht seit dem 01.10.2026 nur noch einmal,
   hinter der Score-Anzeige im Ergebnis. Kein Wasserzeichen. */
html{background:var(--bg)}

/* ---- 2. Anwendung: dunkle Buehne, helle Karte -------------- */
html:has(body.compass-app){background:var(--navy-deep)}
body.compass-app{
  background:linear-gradient(170deg,var(--navy-deep) 0%,var(--navy) 46%,#1b2b47 100%);
  background-attachment:fixed;
}
body.compass-app .main{padding-top:26px;padding-bottom:64px}

body.compass-app .step-screen{
  background:var(--white);border-radius:20px;box-shadow:0 16px 56px rgba(8,16,32,.34);
  padding:40px 44px 36px;max-width:1140px;margin:0 auto;
}
body.compass-app #screen1,
body.compass-app #screen2{max-width:820px;padding:44px 48px 40px}
body.compass-app .step-screen > h1{margin-top:0}

body.compass-app .step-screen .card:not(.hero){
  box-shadow:none;border-color:var(--line);border-radius:12px;background:var(--white);
}

/* Schritt 1: der alte dunkle Hero wird flach und hell. */
body.compass-app #screen1 .hero.card{
  background:none;border:0;box-shadow:none;border-radius:0;overflow:visible;
  padding:0 0 30px;margin:0 0 10px;border-bottom:1px solid var(--line);color:var(--text);
}
body.compass-app #screen1 .hero::before,
body.compass-app #screen1 .hero::after{display:none}
body.compass-app #screen1 .hero-compass{color:var(--navy);opacity:.42;top:-58px;right:-34px}
body.compass-app #screen1 .hero-title{color:var(--heading);font-size:clamp(26px,3.2vw,34px)}
body.compass-app #screen1 .hero-sub{color:var(--muted)}
body.compass-app #screen1 .hero-bullets{color:var(--muted)}
body.compass-app #screen1 .hero-stat{border-color:var(--border);background:var(--off-white);
  backdrop-filter:none}
body.compass-app #screen1 .hero-stat-label{color:var(--muted2)}
body.compass-app #screen1 .hero-stat-value{color:var(--heading)}
body.compass-app #screen1 .hero-links a{color:var(--muted)}
body.compass-app #screen1 .hero-links a:hover{color:var(--accent)}
body.compass-app #screen1 .hero-actions .btn.secondary,
body.compass-app .step-screen .btn.secondary{
  background:transparent;border-color:var(--border);color:var(--text)}
body.compass-app #screen1 .hero-actions .btn.secondary:hover,
body.compass-app .step-screen .btn.secondary:hover{
  background:var(--off-white);border-color:var(--navy);color:var(--heading)}

/* ---- 3. Schrittanzeige als Fortschritt -------------------- */
.stepper{background:transparent;border-bottom:0;padding:18px 24px 6px}
.stepper-mobile{display:block;max-width:1140px;margin:0 auto 12px}
.stepper-mobile-row{gap:16px}
.stepper-mobile-label{font-size:12.5px;font-weight:900;letter-spacing:.07em;
  color:rgba(255,255,255,.72);text-transform:none}
.stepper-mobile-track{height:4px;border:0;background:rgba(255,255,255,.14);border-radius:2px}
.stepper-mobile-fill{background:var(--accent);border-radius:2px;
  transition:width .45s cubic-bezier(.4,0,.2,1)}
.stepper-buttons{gap:6px;max-width:1140px;margin:0 auto;flex-wrap:wrap}
.step{
  flex:0 1 auto;padding:7px 14px;border-radius:999px;font-size:12.5px;font-weight:900;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.5);
}
.step:hover:not(:disabled){color:#fff;border-color:rgba(255,255,255,.3)}
.step.active{background:var(--accent);border-color:var(--accent);color:#fff;box-shadow:none}
.step.done{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);
  color:rgba(255,255,255,.8)}
.step:disabled{opacity:.42}
@media (max-width:900px){.stepper-buttons{display:none}}

/* ---- 4. Auswahlkarten, Muster Exit Readiness Score -------- */
.grid{counter-reset:sccopt}

.option{
  display:flex;flex-direction:column;gap:5px;padding:18px 20px 18px 56px;
  border-radius:12px;border:1px solid var(--border);transform:none;text-align:left;
  transition:border-color var(--transition),background var(--transition),transform var(--transition);
}
.option::before{
  counter-increment:sccopt;content:counter(sccopt);
  left:16px;top:17px;bottom:auto;width:26px;height:26px;border-radius:7px;
  background:var(--off-white);color:var(--muted2);opacity:1;
  font-family:var(--font);font-size:12px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}
.option:hover{border-color:var(--accent);background:var(--accent-light);
  transform:translateX(4px);box-shadow:none}
.option:hover::before{background:var(--accent);color:#fff}
.option.selected,.option[aria-pressed="true"]{
  border-color:var(--accent);background:var(--accent-light);box-shadow:none}
.option.selected::before,.option[aria-pressed="true"]::before{background:var(--accent);color:#fff}
.option-title{font-family:var(--font-heading);font-size:19px;font-weight:400;
  color:var(--heading);line-height:1.3}
.option-desc{font-size:14.5px;color:var(--muted);line-height:1.6}

/* ---- 5. Schaltflaechen ------------------------------------ */
.btn{border-radius:6px;font-weight:900;letter-spacing:.02em;transition:all var(--transition)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:var(--shadow-accent)}
.btn.primary:hover{background:var(--accent-dark);border-color:var(--accent-dark);
  transform:translateY(-2px)}

/* ---- 6. Typografie ---------------------------------------- */
body.compass-app .step-screen h1,
body.compass-app .step-screen > h2{
  font-family:var(--font-heading);font-weight:400;letter-spacing:-.012em;color:var(--heading)}
body.compass-app .step-screen h1{font-size:clamp(28px,3.4vw,38px);line-height:1.22}
body.compass-app .step-screen .subtitle{font-size:16.5px;color:var(--muted);
  line-height:1.7;max-width:720px}
body:not(.compass-app):not(.scc-landing) .main .screen > h1{
  font-family:var(--font-heading);font-weight:400;font-size:clamp(28px,3.4vw,40px);
  line-height:1.2;letter-spacing:-.012em;color:var(--heading)}
body:not(.compass-app):not(.scc-landing) .main .screen > .subtitle{
  font-size:17px;color:var(--muted);line-height:1.72;max-width:760px}
body:not(.compass-app) .card{border-radius:14px}

@media (max-width:760px){
  body.compass-app .step-screen{padding:28px 22px 26px;border-radius:16px}
  body.compass-app #screen1,body.compass-app #screen2{padding:30px 24px 28px}
  
}
@media (prefers-reduced-motion:reduce){
  .option,.btn,.stepper-mobile-fill{transition:none}
  .option:hover,.btn.primary:hover{transform:none}
}

/* ---- 9. Drei Schritte statt sechs -------------------------
   Je Gruppe stehen zwei Karten untereinander. Die Navigation
   zwischen den beiden Karten einer Gruppe entfaellt. */
body.compass-app .step-screen + .step-screen:not(.hidden){margin-top:20px}
#btnNext1,#btnPrev1,#btnPrev2,#btnNext3{display:none!important}
body.compass-app #screen2,
body.compass-app #screen4{max-width:1140px}
body.compass-app #screen1{padding-bottom:30px}

/* ============================================================
   Ueberarbeitung nach dem Durchklicken am 01.10.2026
   ============================================================ */

/* 7. Alle Schritt-Karten gleich breit, je Schritt optisch eine Karte. */
body.compass-app .step-screen,
body.compass-app #screen1,
body.compass-app #screen2,
body.compass-app #screen4{max-width:1060px;padding:44px 48px 40px}
body.compass-app .step-screen:not(.hidden):has(+ .step-screen:not(.hidden)){
  border-radius:20px 20px 0 0;padding-bottom:36px;box-shadow:none;
  border-bottom:1px solid var(--line)}
body.compass-app .step-screen:not(.hidden) + .step-screen:not(.hidden){
  margin-top:0;border-radius:0 0 20px 20px;padding-top:38px}

/* Hero in Schritt 1 entfaellt, der Schritt beginnt mit der Frage.
   Erhalten bleibt allein der Schnellstart. */
body.compass-app #screen1 .hero.card{
  background:none;border:0;box-shadow:none;border-radius:0;padding:0;margin:0 0 4px}
body.compass-app #screen1 .hero-compass,
body.compass-app #screen1 .hero-badge,
body.compass-app #screen1 .hero-title,
body.compass-app #screen1 .hero-sub,
body.compass-app #screen1 .hero-bullets,
body.compass-app #screen1 .hero-stats,
body.compass-app #screen1 .hero-links,
body.compass-app #screen1 #btnHeroStart{display:none!important}
body.compass-app #screen1 .hero-grid{display:block}
body.compass-app #screen1 .hero-actions{margin:0 0 4px;justify-content:flex-end}
body.compass-app #screen1 #btnQuickStart{
  background:none;border:0;padding:0;color:var(--muted);font-size:14px;font-weight:900;
  box-shadow:none}
body.compass-app #screen1 #btnQuickStart:hover{color:var(--accent);text-decoration:underline;
  transform:none;background:none}
body.compass-app #screen1 > h2{margin-top:0}
body.compass-app .step-screen > h2{
  font-family:var(--font-heading);font-weight:400;color:var(--heading);
  font-size:clamp(27px,3.1vw,36px);line-height:1.2;letter-spacing:-.012em;margin:0 0 10px}

/* 8. Auswahlkarten: zwei Spalten, mehr Luft, groessere Titel. */
body.compass-app #screen1 .grid,
body.compass-app #screen2 .grid,
body.compass-app #screen3 .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
body.compass-app .option{padding:20px 22px 20px 60px;min-height:0}
body.compass-app .option::before{left:18px;top:20px;width:28px;height:28px}
body.compass-app .option-title{font-size:20px;line-height:1.25}
body.compass-app .option-desc{font-size:14.5px}
@media (max-width:900px){
  body.compass-app #screen1 .grid,
  body.compass-app #screen2 .grid,
  body.compass-app #screen3 .grid{grid-template-columns:1fr}
}

/* 9. Die Weiter-Schaltflaeche je Schritt ist die Hauptaktion. */
body.compass-app #btnNext2,
body.compass-app #btnNext4,
body.compass-app #stickyNext{
  background:var(--accent);border-color:var(--accent);color:#fff;
  box-shadow:var(--shadow-accent);font-weight:900}
body.compass-app #btnNext2:hover,
body.compass-app #btnNext4:hover{
  background:var(--accent-dark);border-color:var(--accent-dark);transform:translateY(-2px)}

/* 10 + 11. Keine Silbentrennung, keine Wortbrueche in Tabellenkoepfen. */
body.compass-app .step-screen,
body.compass-app .step-screen th,
body.compass-app .step-screen td{hyphens:none;-webkit-hyphens:none}
body.compass-app .step-screen th{word-break:normal;overflow-wrap:normal}
body.compass-app #topSummary .kpi,
body.compass-app #topSummary b,
body.compass-app #topSummary strong{word-break:normal;overflow-wrap:break-word}

/* Ergebnis-Kopf mit Score-Anzeige ---------------------------- */

.scc-verdict{
  position:relative;overflow:hidden;display:grid;grid-template-columns:auto 1fr;
  gap:40px;align-items:center;background:var(--white);border:1px solid var(--border);
  border-radius:16px;padding:36px 40px;margin-bottom:14px}
.scc-verdict::before{
  content:"";position:absolute;right:-110px;top:50%;transform:translateY(-50%);
  width:430px;height:430px;pointer-events:none;opacity:.2;
  background-image:url("data:image/svg+xml,<svg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%20400%20400%27><g%20fill=%27none%27%20stroke=%27%252320304f%27%20stroke-opacity=%27.55%27><circle%20cx=%27200%27%20cy=%27200%27%20r=%27186%27%20stroke-width=%271%27/><circle%20cx=%27200%27%20cy=%27200%27%20r=%27150%27%20stroke-width=%27.7%27/><circle%20cx=%27200%27%20cy=%27200%27%20r=%27104%27%20stroke-width=%27.6%27/><circle%20cx=%27200%27%20cy=%27200%27%20r=%2756%27%20stroke-width=%27.6%27/></g><g%20stroke=%27%252320304f%27%20stroke-opacity=%27.4%27%20stroke-width=%271.3%27><line%20x1=%27200%27%20y1=%278%27%20x2=%27200%27%20y2=%2750%27/><line%20x1=%27200%27%20y1=%27350%27%20x2=%27200%27%20y2=%27392%27/><line%20x1=%278%27%20y1=%27200%27%20x2=%2750%27%20y2=%27200%27/><line%20x1=%27350%27%20y1=%27200%27%20x2=%27392%27%20y2=%27200%27/></g><g%20stroke=%27%252320304f%27%20stroke-opacity=%27.28%27%20stroke-width=%27.7%27><line%20x1=%2778%27%20y1=%2778%27%20x2=%27106%27%20y2=%27106%27/><line%20x1=%27322%27%20y1=%2778%27%20x2=%27294%27%20y2=%27106%27/><line%20x1=%2778%27%20y1=%27322%27%20x2=%27106%27%20y2=%27294%27/><line%20x1=%27322%27%20y1=%27322%27%20x2=%27294%27%20y2=%27294%27/></g><polygon%20points=%27200,38%20186,194%20200,214%20214,194%27%20fill=%27%2523f3525a%27%20fill-opacity=%27.5%27/><polygon%20points=%27200,362%20214,206%20200,186%20186,206%27%20fill=%27%252320304f%27%20fill-opacity=%27.22%27/><circle%20cx=%27200%27%20cy=%27200%27%20r=%276%27%20fill=%27%2523f3525a%27%20fill-opacity=%27.55%27/></svg>");background-repeat:no-repeat;background-size:contain}
.scc-verdict > *{position:relative;z-index:1}
.scc-verdict-dial{width:180px;height:180px;position:relative;flex-shrink:0}
.scc-verdict-dial svg{width:100%;height:100%;transform:rotate(-90deg)}
.scc-verdict-dial circle{fill:none;stroke-width:11}
.scc-dial-bg{stroke:var(--off-white)}
.scc-dial-fg{stroke:var(--accent);stroke-linecap:round;
  animation:sccDial 1.1s cubic-bezier(.4,0,.2,1) both}
@keyframes sccDial{from{stroke-dashoffset:var(--scc-circ)}}
.scc-dial-lbl{position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center}
.scc-dial-lbl b{font-family:var(--font-heading);font-size:56px;font-weight:400;
  color:var(--heading);line-height:1}
.scc-dial-lbl small{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted2);margin-top:6px}
.scc-verdict-eyebrow{display:inline-block;font-size:11px;font-weight:900;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.scc-verdict h3{font-family:var(--font-heading);font-weight:400;font-size:clamp(26px,2.8vw,34px);
  color:var(--heading);margin:0 0 10px;line-height:1.18}
.scc-verdict p{font-size:16.5px;color:var(--muted);line-height:1.68;margin:0;max-width:620px}
.scc-verdict-facts{display:flex;gap:34px;margin-top:24px;padding-top:20px;
  border-top:1px solid var(--line);flex-wrap:wrap}
.scc-verdict-facts b{font-family:var(--font-heading);font-size:24px;font-weight:700;
  color:var(--heading);display:block;line-height:1}
.scc-verdict-facts span{font-size:10.5px;font-weight:900;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted2);margin-top:7px;display:block}
.scc-verdict-empty{font-size:16.5px;color:var(--muted);line-height:1.68}
@media (max-width:820px){
  .scc-verdict{grid-template-columns:1fr;gap:26px;padding:28px 24px;text-align:left}
  .scc-verdict::before{display:none}
  body.compass-app .step-screen,
  body.compass-app #screen1,body.compass-app #screen2,body.compass-app #screen4{
    padding:28px 22px 26px}
}
@media (prefers-reduced-motion:reduce){.scc-dial-fg{animation:none}}

/* Kompassmotiv im Ergebnis vollstaendig sichtbar statt angeschnitten */
.scc-verdict::before{right:24px;width:290px;height:290px;opacity:.16}

/* Tabellenkoepfe brechen nicht mehr im Wort */
body.compass-app .step-screen th,
body.compass-app .step-screen .table th{
  word-break:keep-all!important;overflow-wrap:normal!important;hyphens:none!important}

/* ---- Footer, auf allen Seiten gleich ----------------------
   .footer traegt in styles.css bereits den dunklen Vollbreit-Balken.
   Hier wird nur die Innenaufteilung gesetzt. */

.footer{display:flex;justify-content:space-between;align-items:center;gap:12px 28px;flex-wrap:wrap}
/* Auf der Startseite schliesst der Footer direkt an das dunkle CTA-Band an,
   sonst blitzt der helle Seitenhintergrund als Streifen dazwischen durch. */
body.scc-landing .footer{margin-top:0}
.scc-foot-by,.scc-foot-links{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:13.5px}
.scc-foot-by{color:rgba(255,255,255,.45)}
.scc-foot-by b{color:rgba(255,255,255,.8);font-weight:900}
.scc-foot-by .link,.scc-foot-by a{color:rgba(255,255,255,.6)}
.scc-foot-by a:hover{color:#fff;text-decoration:none}
.scc-foot-by .dot{color:rgba(255,255,255,.25)}
.scc-foot-links .link{color:rgba(255,255,255,.55)}
.scc-foot-links .link:hover{color:#fff;text-decoration:none}
.scc-foot-links .dot{color:rgba(255,255,255,.22)}
/* Auf der Startseite schliesst der Footer direkt an das dunkle CTA-Band an. */
body.scc-landing 
@media (max-width:640px){.footer{flex-direction:column;align-items:flex-start}}

/* ---- Schrittleiste nicht transparent ----------------------
   Sie klebt beim Scrollen oben und lag sonst ohne Hintergrund
   ueber der weissen Karte. */
body.compass-app .stepper{
  background:var(--navy-deep);border-bottom:1px solid rgba(255,255,255,.08);
  padding:14px 24px 12px;box-shadow:0 6px 18px rgba(8,16,32,.35)}

/* ---- Erlaeuterung zu den beiden Zahlen -------------------- */
.scc-verdict-note{font-size:14px;color:var(--muted2);line-height:1.6;margin:16px 0 0;
  max-width:620px}


/* ---- Aufklappbare Gruppen in Schritt 2 -------------------- */
.scc-acc{border:1px solid var(--border);border-radius:12px;background:var(--white);
  overflow:hidden;margin-bottom:10px}
.scc-acc[open]{border-color:var(--muted2)}
.scc-acc-sum{display:flex;align-items:center;gap:10px;cursor:pointer;list-style:none;
  padding:15px 18px;font-weight:900;font-size:15px;color:var(--heading);
  transition:background var(--transition)}
.scc-acc-sum::-webkit-details-marker{display:none}
.scc-acc-sum::after{content:"";width:9px;height:9px;margin-left:auto;flex:0 0 auto;
  border-right:2px solid var(--muted2);border-bottom:2px solid var(--muted2);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform var(--transition)}
.scc-acc[open] > .scc-acc-sum::after{transform:rotate(225deg) translate(-2px,-2px)}
.scc-acc-sum:hover{background:var(--off-white)}
.scc-acc-count{font-size:11px;font-weight:900;letter-spacing:.06em;padding:3px 9px;
  border-radius:999px;background:var(--off-white);color:var(--muted2);
  border:1px solid var(--border);margin-left:8px}
.scc-acc-count.on{background:var(--accent);border-color:var(--accent);color:#fff}
.scc-acc-body{padding:0 18px 16px;border-top:1px solid var(--line)}
.scc-acc-body > *:first-child{margin-top:14px}
#filterList .filterGroup{border:0;padding:0;background:none;margin:0}
#euSealRequirements{padding:0;border:0;background:none}
@media (prefers-reduced-motion:reduce){.scc-acc-sum,.scc-acc-sum::after{transition:none}}


/* ---- Crawlbare Verzeichnisse auf den Uebersichtsseiten ---- */
.scc-sitelinks{margin:52px 0 0;padding-top:28px;border-top:1px solid var(--border)}
.scc-sitelinks h2{font-family:var(--font-heading);font-weight:400;font-size:24px;
  color:var(--heading);margin:0 0 8px}
.scc-sitelinks-note{font-size:15px;color:var(--muted);margin:0 0 18px;max-width:640px}
.scc-sitelinks ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:2px 20px}
.scc-sitelinks li{padding:7px 0;border-bottom:1px solid var(--line)}
.scc-sitelinks a{font-size:14.5px;color:var(--muted);text-decoration:none}
.scc-sitelinks a:hover{color:var(--accent)}


/* ---- Mobiles Menue ---------------------------------------- */
.menu-dropdown .menu-item{display:block;width:100%;text-align:left;padding:13px 16px;
  font-size:15.5px;font-weight:700;color:var(--text);background:none;border:0;
  text-decoration:none;cursor:pointer}
.menu-dropdown .menu-item:hover{background:var(--off-white);color:var(--accent)}
.menu-dropdown .menu-item.active{color:var(--accent)}
.menu-sep{height:1px;background:var(--line);margin:6px 0}
.menu-dropdown{max-height:min(82vh,700px);overflow-y:auto;box-shadow:var(--shadow);
  border-radius:var(--radius);overscroll-behavior:contain}
@media (max-height:740px){.menu-dropdown .menu-item{padding:11px 16px;font-size:15px}}

/* Auf dem Telefon ist der letzte Schritt erreicht: Weiter muss aus sein. */
body.compass-app #stickyNext:disabled{
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18);
  color:rgba(255,255,255,.4);box-shadow:none;cursor:default}
body.compass-app #stickyNext:disabled:hover{transform:none;
  background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.18)}
body.compass-app #stickyPrev:disabled{opacity:.4;cursor:default}


/* ---- Aufklapper auf schmalen Schirmen --------------------- */
.scc-acc-title{flex:1 1 auto;min-width:0}
@media (max-width:620px){
  .scc-acc-sum{align-items:flex-start;padding:14px;gap:10px;font-size:14.5px;line-height:1.35}
  .scc-acc-sum::after{margin-top:5px;flex:0 0 auto}
  .scc-acc-count{flex:0 0 auto;margin-left:0;align-self:flex-start}
  .scc-acc-body{padding:0 14px 14px}
}

/* Kriterienzeilen in den Aufklappern: auf dem Telefon untereinander statt
   in zwei Spalten, sonst bricht sowohl der Name als auch das Gewicht um. */
@media (max-width:620px){
  #filterList .filterRowWrap{display:block}
  #filterList .filterRowWrap label{display:flex;align-items:flex-start;gap:10px}
  #filterList .filterRowWrap .muted,
  #filterList .filterRowWrap small{display:block;margin:4px 0 0 28px;font-size:12.5px}
}

/* Der Eintrag der gerade geoeffneten Seite ist kein Ziel mehr. */
.menu-dropdown .menu-item.active{color:var(--accent);cursor:default}
.menu-dropdown .menu-item[aria-current="page"]{font-weight:900}

/* ---- Hero-Motiv auf der Startseite ------------------------
   Gleiche Behandlung wie die Motive auf itcapital.de: ein Motiv,
   rechts am Textraster ausgerichtet, ohne Beschriftung. */
.scc-hero::before{
  content:"";position:absolute;top:50%;transform:translateY(-50%);
  right:max(12px, calc((100% - var(--max-width, 1140px)) / 2 - 70px));
  height:78%;width:min(40%,440px);
  background:url('/assets/img/hero/compass.svg') right center/contain no-repeat;
  opacity:.85;pointer-events:none;z-index:1}
.scc-hero .scc-wrap{position:relative;z-index:3}
.scc-hero h1{max-width:740px}
.scc-hero p{max-width:620px}
@media (max-width:1180px){.scc-hero::before{width:34%;opacity:.5}}
@media (max-width:860px){.scc-hero::before{display:none}
  .scc-hero h1,.scc-hero p{max-width:none}}

/* Das Zeichen in der Kopfzeile entfaellt: der Kompass steht jetzt gross
   im Hero, in der Kopfzeile bliebe er eine Dopplung. */
.header .logo-svg,.header .logo{display:none!important}
.header .brand{gap:0}