/* =========================================================================
 * HELVANTA Website 1.19.0 — Swiss Premium Digital Office
 * -------------------------------------------------------------------------
 * Ein Stylesheet für die gesamte öffentliche Website. Farben, Schriften
 * und Formensprache sind dieselben wie im Cockpit — es ist eine Marke
 * und ein System, nicht zwei.
 *
 * Aufbau:
 *   1  Grundlagen und Variablen
 *   2  Typografie und Buttons
 *   3  Kopf, Mobilmenü, Fuss
 *   4  Hero
 *   5  Sektionen und Raster
 *   6  Karten, Listen, Offices
 *   7  Band, Achsen, Qualität, Prozess, Netz
 *   8  Preise
 *   9  Cockpit-Nachbau
 *  10  FAQ, CTA
 *  11  Bewegung
 *  12  Mobile
 * ===================================================================== */

/* ------------------------------------------------ 1 Grundlagen */

.hw{
  --blau:#17265F;
  --blau-tief:#0C1738;
  --blau-nacht:#080F26;
  --gold:#D4AF37;
  --gold-hell:#E6C55C;
  --text:#111B3A;
  --grau:#5B6178;
  --grau-hell:#6F7589;
  --linie:#E3E8F2;
  --linie-dunkel:rgba(255,255,255,.14);
  --flaeche:#F5F7FC;
  --weiss:#fff;
  --r:20px;
  --r-klein:14px;
  --schatten:0 18px 48px rgba(12,23,56,.10);
  --schatten-hoch:0 30px 80px rgba(12,23,56,.18);
  --max:1240px;
  --sektion:clamp(72px,9vw,140px);

  background:var(--weiss);
  color:var(--text);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* clip statt hidden: hidden macht den Body zum Scrollcontainer und
     nimmt position:sticky im Inneren die Wirkung. clip klemmt nur ab. */
  overflow-x:clip;
}
.hw *,.hw *::before,.hw *::after{box-sizing:border-box}
.hw img{max-width:100%;height:auto;display:block}
/* ACHTUNG, gemessen: ".hw a{color:inherit}" hat (0,1,1) und schlug damit
 * jede Komponentenregel mit einer einzigen Klasse — die Navigation stand
 * dunkelblau auf dunkelblauem Hero und war unsichtbar. Der Erbwert gilt
 * deshalb nur noch für Links OHNE eigene Klasse; alles Übrige bringt
 * seine Farbe selbst mit. */
.hw a{text-decoration:none}
.hw a:not([class]){color:inherit}
/*
 * Zuruecksetzen, ohne die eigenen Klassen zu ueberfahren.
 *
 * Gemessen: ".hw p{margin:0}" hat die Spezifitaet (0,1,1) und schlug
 * damit jede Klassenregel (0,1,0). ".hw-satz{margin:56px auto 0}" stand
 * deshalb mit margin 0 - linksbuendig statt zentriert und direkt an den
 * Karten. Betroffen waren sechs Klassen quer ueber die Seite. Aufzaehlung
 * und Einzug gehen weiterhin fuer alle Listen weg; nur der Aussenabstand
 * bleibt den Klassen ueberlassen.
 */
.hw ul,.hw ol{padding:0;list-style:none}
.hw ul:not([class]),.hw ol:not([class]){margin:0}
.hw p:not([class]){margin:0}
.hw p.hw-lead,.hw p.hw-band-text{margin:0}

.hw-inner{width:100%;max-width:var(--max);margin:0 auto;padding:0 28px}

.hw-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--gold);
  color:var(--blau-tief);padding:12px 20px;border-radius:0 0 12px 0;font-weight:700}
.hw-skip:focus{left:0}

.hw :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}

/* ------------------------------------------ 2 Typografie / Buttons */

.hw h1,.hw h2,.hw h3{font-family:Sora,Inter,sans-serif;font-weight:700;
  letter-spacing:-.02em;line-height:1.06;margin:0;color:var(--blau)}
.hw h1{font-size:clamp(40px,6.2vw,76px)}
.hw h2{font-size:clamp(30px,4.2vw,52px);line-height:1.1}
.hw h3{font-size:20px;line-height:1.25;letter-spacing:-.01em}

.hw-eyebrow{display:inline-flex;align-items:center;gap:9px;color:var(--grau);
  font-size:11.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.hw-eyebrow-gold{color:var(--gold)}
.hw-punkt{width:7px;height:7px;border-radius:50%;background:var(--gold);
  box-shadow:0 0 0 4px rgba(212,175,55,.22)}

.hw-lead{font-size:clamp(17px,1.5vw,20px);line-height:1.62;color:var(--grau);max-width:56ch}

.hw-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:56px;padding:0 30px;border:1px solid transparent;border-radius:999px;
  font-family:Inter,sans-serif;font-size:15.5px;font-weight:700;letter-spacing:.01em;
  cursor:pointer;transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,background .25s,color .25s,border-color .25s;
  position:relative;overflow:hidden;white-space:nowrap}
.hw-btn::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);
  transform:translateX(-120%);transition:transform .7s ease}
.hw-btn:hover::after{transform:translateX(120%)}
.hw-btn:hover{transform:translateY(-2px)}
.hw-btn-klein{min-height:44px;padding:0 20px;font-size:14px}

.hw-btn-gold{background:var(--gold);color:var(--blau-tief);box-shadow:0 12px 30px rgba(212,175,55,.32)}
.hw-btn-gold:hover{background:var(--gold-hell);box-shadow:0 18px 44px rgba(212,175,55,.42)}
.hw-btn-dunkel{background:var(--blau);color:#fff;box-shadow:0 12px 30px rgba(23,38,95,.28)}
.hw-btn-dunkel:hover{background:var(--blau-tief)}
.hw-btn-hell{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.35);backdrop-filter:blur(8px)}
/* Auf dunklem Grund wird beim Ueberfahren die Schrift golden, nicht nur
   der Rand: Weiss auf Marineblau aendert sich fast nicht sichtbar. */
.hw-btn-hell:hover{background:rgba(212,175,55,.14);border-color:var(--gold);
  color:var(--gold)}
.hw-btn-still{background:transparent;color:var(--blau);border-color:var(--linie)}
/* Beim Ueberfahren wird Gold gezeigt - dieselbe Farbe wie die
   Hauptschaltflaeche, damit klar ist: hier passiert dasselbe. */
.hw-btn-still:hover{border-color:var(--gold);background:rgba(212,175,55,.12)}


/* Das Theme-Reset faerbt JEDE Schaltflaeche beim Ueberfahren und beim
   Fokus pink. Gemessen in hello-elementor/assets/css/reset.css:
   "[type=button]:focus,[type=button]:hover,[type=submit]:focus,
    [type=submit]:hover,button:focus,button:hover
    {background-color:#c36;color:#fff}"
   Das ist (0,1,1) und schlaegt damit jede Klassenregel mit (0,1,0) -
   auch dann, wenn unsere Datei spaeter geladen wird. Betroffen sind nur
   echte <button>-Elemente; die meisten HELVANTA-Schaltflaechen sind
   Links und bleiben verschont. Darum genau diese Faelle, statt einer
   globalen Regel, die auch unsere eigenen Farben plattmachen wuerde. */
.hw button.hw-btn:hover,.hw button.hw-btn:focus,.hw button.hw-btn:active{
  color:var(--blau-tief)}
.hw button.hw-btn-gold:hover,.hw button.hw-btn-gold:focus,
.hw button.hw-btn-gold:active{background:var(--gold-hell)}
.hw .hw-toggle button,.hw .hw-toggle button:hover,
.hw .hw-toggle button:focus,.hw .hw-toggle button:active{
  background:transparent;color:var(--grau)}
.hw .hw-toggle button.is-aktiv,.hw .hw-toggle button:hover{color:var(--blau-tief)}

.hw-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:34px}
.hw-btns-mitte{justify-content:center;margin-top:40px}

.hw-link{display:inline-flex;align-items:center;gap:8px;color:var(--gold);
  font-size:15px;font-weight:700}
.hw-link span{transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.hw-link:hover span{transform:translateX(5px)}

/* ------------------------------------------------- 3 Kopf / Fuss */

.hw-kopf{position:fixed;top:0;left:0;right:0;z-index:100;height:82px;
  display:flex;align-items:center;
  background:rgba(12,23,56,.86);backdrop-filter:blur(18px) saturate(140%);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:height .35s ease,background .35s ease,border-color .35s ease}
.hw-kopf-ueber{background:transparent;border-bottom-color:transparent;backdrop-filter:none}
.hw-kopf.is-fest{height:68px;background:rgba(12,23,56,.94);border-bottom-color:rgba(255,255,255,.1);
  backdrop-filter:blur(18px) saturate(140%);box-shadow:0 8px 30px rgba(8,15,38,.28)}
.hw-kopf-inner{width:100%;max-width:var(--max);margin:0 auto;padding:0 28px;
  display:flex;align-items:center;gap:32px}

.hw-marke{display:flex;align-items:center;gap:11px;flex:0 0 auto;color:#fff}
.hw-marke-fuchs{width:34px;height:34px;object-fit:contain;
  transition:transform .5s cubic-bezier(.2,.8,.2,1)}
.hw-marke:hover .hw-marke-fuchs{transform:rotate(-6deg) scale(1.06)}
.hw-marke-wort{font-family:Sora,sans-serif;font-size:18px;font-weight:800;
  letter-spacing:.16em;color:#fff}

.hw-nav{display:flex;align-items:center;gap:4px;margin-left:auto}
.hw-nav-link{position:relative;padding:10px 14px;border-radius:10px;
  color:rgba(255,255,255,.82);font-size:14.5px;font-weight:600;
  transition:color .25s}
.hw-nav-link::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:2px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.hw-nav-link:hover{color:#fff}
.hw-nav-link:hover::after,.hw-nav-link.is-aktiv::after{transform:scaleX(1)}
.hw-nav-link.is-aktiv{color:#fff}

.hw-kopf-aktionen{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hw-nav-login{border:1px solid rgba(255,255,255,.24)}

.hw-burger{display:none;width:44px;height:44px;border:1px solid rgba(255,255,255,.24);
  border-radius:12px;background:transparent;cursor:pointer;padding:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hw-burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .2s}
.hw-burger.is-offen span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hw-burger.is-offen span:nth-child(2){opacity:0}
.hw-burger.is-offen span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.hw-mobilmenue{position:fixed;inset:0;z-index:99;display:flex;flex-direction:column;
  justify-content:center;gap:6px;padding:110px 28px 48px;
  background:linear-gradient(160deg,var(--blau-tief),var(--blau-nacht));
  animation:hwMenu .35s cubic-bezier(.2,.8,.2,1)}
.hw-mobilmenue[hidden]{display:none}
.hw-mobilmenue nav{display:flex;flex-direction:column}
/*
 * Sichtbar ist der Grundzustand, die Einblendung die Zugabe.
 *
 * Zwei Fehler steckten hier übereinander. Gemessen auf dem Handy:
 * die Links standen in rgb(17,27,58) - dunkelblau auf dunkelblau.
 * ".hw a:not([class])" hat die Spezifität (0,2,1) und schlug die
 * Menüregel (0,1,2); die Links erbten also die Textfarbe der Seite.
 * Und die Einblendanimation war im verborgenen Zustand bereits
 * abgelaufen, sodass opacity:0 stehen blieb. Beides zusammen ergab
 * ein Menü, das man nur erahnen konnte.
 */
.hw .hw-mobilmenue nav a{padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);
  color:#fff;font-family:Sora,sans-serif;font-size:24px;font-weight:700;
  opacity:1;transform:none}
/*
 * Die Deckkraft bleibt bei 1 — animiert wird nur die Bewegung.
 *
 * Eine Einblendung, die bei opacity:0 beginnt, macht die Lesbarkeit
 * davon abhängig, dass die Animation auch wirklich läuft. Auf dem Gerät
 * tat sie das nicht, und das Menü war unsichtbar. Jetzt kann sie
 * ausfallen, ohne dass jemand etwas vermisst: dann steht der Eintrag
 * eben sofort da, statt sich hereinzuschieben.
 */
.hw .hw-mobilmenue.is-offen nav a{transform:translateY(14px);
  animation:hwMenuLink .5s cubic-bezier(.2,.8,.2,1) forwards;
  animation-delay:calc(.06s * var(--i) + .08s)}
.hw-mobilmenue .hw-btn{margin-top:32px}
@keyframes hwMenu{from{opacity:0}to{opacity:1}}
@keyframes hwMenuLink{to{transform:none}}

.hw-fuss{background:linear-gradient(180deg,var(--blau-tief),var(--blau-nacht));color:rgba(255,255,255,.72);
  padding:80px 0 30px}
.hw-fuss-inner{width:100%;max-width:var(--max);margin:0 auto;padding:0 28px;
  display:grid;grid-template-columns:1.8fr 1fr 1fr 1.1fr;gap:48px}
.hw-fuss-marke p{margin:20px 0 0;font-size:14.5px;line-height:1.65;max-width:42ch}
.hw-fuss-claim{display:block;margin-top:18px;color:var(--gold);
  font-family:Sora,sans-serif;font-size:15px;font-weight:700}
.hw-fuss-spalte h3{color:#fff;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;margin-bottom:16px}
.hw-fuss-spalte a{display:block;padding:6px 0;font-size:14.5px;color:rgba(255,255,255,.72);
  transition:color .25s,transform .25s}
.hw-fuss-spalte a:hover{color:var(--gold);transform:translateX(3px)}
.hw-fuss-unten{width:100%;max-width:var(--max);margin:56px auto 0;padding:22px 28px 0;
  border-top:1px solid rgba(255,255,255,.1);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  font-size:13px;color:rgba(255,255,255,.5)}

/* ----------------------------------------------------- 4 Hero */

.hw-hero{position:relative;min-height:clamp(660px,100svh,960px);display:flex;align-items:center;
  padding:130px 0 90px;overflow:hidden;
  background:linear-gradient(155deg,#101C44 0%,var(--blau-tief) 45%,var(--blau-nacht) 100%);
  color:#fff}
.hw-hero h1{color:#fff}
.hw-hero .hw-lead{color:rgba(255,255,255,.74)}
.hw-hero-grund{position:absolute;inset:0;pointer-events:none}
.hw-hero-glanz{position:absolute;border-radius:50%;filter:blur(90px);opacity:.5}
.hw-hero-glanz-a{width:640px;height:640px;top:-180px;right:-140px;
  background:radial-gradient(circle,rgba(212,175,55,.42),transparent 68%);
  animation:hwGlanzA 22s ease-in-out infinite alternate}
.hw-hero-glanz-b{width:720px;height:720px;bottom:-260px;left:-200px;
  background:radial-gradient(circle,rgba(66,110,220,.38),transparent 66%);
  animation:hwGlanzB 26s ease-in-out infinite alternate}
.hw-hero-raster{position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:72px 72px;
  mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 40%,#000 30%,transparent 78%)}
@keyframes hwGlanzA{to{transform:translate3d(-60px,50px,0) scale(1.12)}}
@keyframes hwGlanzB{to{transform:translate3d(70px,-40px,0) scale(1.08)}}

/*
 * 1.357.0 - DER NACHBAU BEKOMMT SEINE BREITE ZURÜCK.
 *
 * Auftrag Patrick Hollenstein, 09.09.2026: "Auf /partner/ den neuen Look von
 * den Cockpits anpassen, muss super aussehen."
 *
 * Gemessen bei 1440px: auf /unternehmen/ war die rechte Spalte 549px breit,
 * auf /partner/ nur 437px - und auf /privat/ ebenso. Der Grund steht in der
 * Zeile darunter: 1fr-Spalten schrumpfen nicht unter ihren Inhalt, und eine
 * Überschrift wie "Netzwerk." in 76px zieht die Textspalte auf 674px auf.
 * Was übrig blieb, bekam der Bildschirm.
 *
 * Unter 250px Inhaltsbreite legt die Container-Regel weiter unten die
 * Kennzahlen untereinander - deshalb standen auf zwei von drei Seiten vier
 * schmale Kacheln in einer Säule, während dieselbe Kachel auf der dritten
 * als 2x2 dastand. Nicht drei Bilder, sondern eins mit zwei Zufällen.
 *
 * minmax(0,…) erlaubt beiden Spalten zu schrumpfen: die Überschrift bricht
 * wie vorgesehen um, und der Nachbau ist auf allen drei Seiten gleich breit.
 */
.hw-hero-inner{position:relative;display:grid;
  grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:64px;align-items:center}
.hw-hero-text h1{margin:22px 0 26px}
.hw-zeile{display:block}
.hw-gold{color:var(--gold)}

.hw-vertrauen{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:38px;
  padding-top:26px;border-top:1px solid rgba(255,255,255,.14)}
.hw-vertrauen li{position:relative;padding-left:22px;font-size:13.5px;
  color:rgba(255,255,255,.7);font-weight:600}
.hw-vertrauen li::before{content:"";position:absolute;left:0;top:7px;width:11px;height:6px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);
  transform:rotate(-45deg)}

.hw-scrollhinweis{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);
  width:26px;height:42px;border:1.5px solid rgba(255,255,255,.3);border-radius:14px;
  display:grid;place-items:start center;padding-top:8px}
.hw-scrollhinweis span{width:3px;height:8px;border-radius:2px;background:var(--gold);
  animation:hwScroll 1.9s ease-in-out infinite}
/*
 * Die Maus ist 26x42 - das ist die Form, nicht die Trefferflaeche.
 * Ein unsichtbares Feld darueber bringt sie auf die 44x44, die ein
 * Daumen braucht, ohne dass sich am Bild etwas aendert.
 */
.hw-scrollhinweis::after{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:44px;height:44px}
@keyframes hwScroll{0%,100%{transform:translateY(0);opacity:1}60%{transform:translateY(13px);opacity:.25}}

/* -------------------------------------- 5 Sektionen und Raster */

.hw-sektion{padding:var(--sektion) 0;position:relative}
.hw-flaeche{background:var(--flaeche)}
.hw-dunkel{background:linear-gradient(165deg,var(--blau-tief),var(--blau-nacht));color:rgba(255,255,255,.74)}
.hw-dunkel h2,.hw-dunkel h3,.hw-dunkel strong{color:#fff}

.hw-sektionkopf{max-width:760px;margin:0 auto clamp(44px,5vw,72px);text-align:center}
.hw-sektionkopf h2{margin:16px 0 0}
.hw-sektionkopf p{margin:20px auto 0;max-width:60ch;color:var(--grau);font-size:17.5px;line-height:1.65}
.hw-sektionkopf.hw-hell p{color:rgba(255,255,255,.7)}

.hw-drei{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.hw-vier{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.hw-fuenf{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}

.hw-satz{margin:56px auto 0;max-width:20ch;text-align:center;
  font-family:Sora,sans-serif;font-size:clamp(24px,3vw,34px);font-weight:700;
  color:var(--blau);letter-spacing:-.02em;line-height:1.2}
.hw-fussnote{margin:34px auto 0;max-width:70ch;text-align:center;
  font-size:14.5px;line-height:1.62;color:var(--grau)}
.hw-dunkel .hw-fussnote{color:rgba(255,255,255,.55)}
.hw-bildunterschrift{margin-top:16px;text-align:center;font-size:12.5px;color:var(--grau-hell)}

/* ------------------------------------- 6 Karten / Offices / Listen */

.hw-karte{padding:34px 30px;background:var(--weiss);border:1px solid var(--linie);
  border-radius:var(--r);box-shadow:var(--schatten);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}
.hw-karte:hover{transform:translateY(-6px);box-shadow:var(--schatten-hoch);border-color:#D8DFEE}
.hw-karte h3{margin-bottom:12px}
.hw-karte p{color:var(--grau);font-size:15.5px;line-height:1.62}
.hw-karte-still{background:transparent;border-color:var(--linie);box-shadow:none}
.hw-karte-still:hover{background:var(--weiss);box-shadow:var(--schatten)}

.hw-office{position:relative;padding:38px 32px;border-radius:var(--r);overflow:hidden;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
  display:flex;flex-direction:column;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s,background .45s}
.hw-office:hover{transform:translateY(-8px);border-color:rgba(212,175,55,.5);background:rgba(255,255,255,.07)}
.hw-office-glanz{position:absolute;top:-60%;left:-30%;width:160%;height:160%;
  background:radial-gradient(circle at 30% 30%,rgba(212,175,55,.16),transparent 55%);
  opacity:0;transition:opacity .5s}
.hw-office:hover .hw-office-glanz{opacity:1}
.hw-office h3{position:relative;font-size:23px}
.hw-office-claim{position:relative;margin-top:8px;color:var(--gold);font-size:15px;font-weight:700}
.hw-office-text{position:relative;margin-top:14px;color:rgba(255,255,255,.68);
  font-size:15px;line-height:1.62}
.hw-office .hw-liste{position:relative;margin:22px 0 26px}
.hw-office .hw-link{position:relative;margin-top:auto}

.hw-liste li{position:relative;padding:7px 0 7px 26px;font-size:14.5px;color:var(--grau);line-height:1.5}
.hw-liste li::before{content:"";position:absolute;left:2px;top:14px;width:10px;height:5px;
  border-left:2px solid var(--gold);border-bottom:2px solid var(--gold);transform:rotate(-45deg)}
.hw-liste-hell li{color:rgba(255,255,255,.7);border-bottom:1px solid rgba(255,255,255,.07)}
.hw-liste-hell li:last-child{border-bottom:0}

/* ------------------------ 7 Band / Achsen / Qualität / Prozess / Netz */

.hw-band{position:relative;display:grid;grid-auto-flow:column;grid-auto-columns:1fr;
  gap:0;margin:0 auto;max-width:1100px}
.hw-band::before{content:"";position:absolute;left:10%;right:10%;top:11px;height:2px;
  background:linear-gradient(90deg,var(--linie),var(--gold),var(--linie));
  transform:scaleX(0);transform-origin:left;transition:transform 1.4s cubic-bezier(.2,.8,.2,1) .2s}
.hw-band.is-sichtbar::before{transform:scaleX(1)}
.hw-dunkel .hw-band::before{background:linear-gradient(90deg,rgba(255,255,255,.16),var(--gold),rgba(255,255,255,.16))}
.hw-band-schritt{position:relative;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:0 12px;gap:12px}
.hw-band-punkt{width:22px;height:22px;border-radius:50%;background:var(--weiss);
  border:2px solid var(--linie);position:relative;z-index:1;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .5s,background .5s}
.hw-band-schritt:hover .hw-band-punkt{transform:scale(1.25);border-color:var(--gold);
  background:var(--gold);box-shadow:0 0 0 8px rgba(212,175,55,.16)}
.hw-band-name{font-family:Sora,sans-serif;font-size:17px;font-weight:700;color:var(--blau)}
.hw-dunkel .hw-band-name{color:#fff}
.hw-band-text{font-size:13.5px;line-height:1.5;color:var(--grau);max-width:20ch}
.hw-dunkel .hw-band-text{color:rgba(255,255,255,.6)}
.hw-band-partner .hw-band-text{color:var(--gold);font-weight:700}

/* Die Achsen gibt es hell und dunkel. Hell ist der Normalfall - die
 * dunkle Fassung greift nur innerhalb von .hw-dunkel, damit derselbe
 * Baustein auf beiden Untergründen lesbar bleibt. */
.hw-achsen{display:grid;grid-template-columns:repeat(var(--achsen,3),minmax(0,1fr));gap:24px}
.hw-achse{padding:34px 30px;border-radius:var(--r);
  background:var(--weiss);border:1px solid var(--linie);box-shadow:var(--schatten);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s,box-shadow .45s}
.hw-achse:hover{transform:translateY(-6px);border-color:rgba(212,175,55,.55);box-shadow:var(--schatten-hoch)}
.hw-achse-nr{font-family:Sora,sans-serif;font-size:13px;font-weight:800;
  letter-spacing:.12em;color:var(--gold)}
.hw-achse strong{display:block;margin:14px 0 6px;font-family:Sora,sans-serif;
  font-size:22px;color:var(--blau)}
.hw-achse-frage{display:block;color:var(--gold);font-size:14.5px;font-weight:700}
.hw-achse p{margin-top:14px;font-size:14.5px;line-height:1.6;color:var(--grau)}

.hw-dunkel .hw-achse{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);
  box-shadow:none}
.hw-dunkel .hw-achse:hover{border-color:rgba(212,175,55,.45);box-shadow:none}
.hw-dunkel .hw-achse strong{color:#fff}
.hw-dunkel .hw-achse p{color:rgba(255,255,255,.66)}

.hw-qualitaet{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.hw-qual{padding:30px 26px;border-radius:var(--r);background:var(--weiss);
  border:1px solid var(--linie);text-align:center;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.hw-qual:hover{transform:translateY(-6px);box-shadow:var(--schatten-hoch)}
.hw-qual-mark{display:block;width:46px;height:46px;margin:0 auto 16px;border-radius:14px;
  transform:rotate(45deg);box-shadow:inset 0 0 0 1px rgba(255,255,255,.35)}
.hw-qual-bronze .hw-qual-mark{background:linear-gradient(140deg,#C88A4A,#8E5A2B)}
.hw-qual-silber .hw-qual-mark{background:linear-gradient(140deg,#D8DEE9,#9AA4B4)}
.hw-qual-gold .hw-qual-mark{background:linear-gradient(140deg,#F0D177,#C09327)}
.hw-qual-platin .hw-qual-mark{background:linear-gradient(140deg,#EAF0F7,#B6C3D6)}
.hw-qual strong{display:block;font-family:Sora,sans-serif;font-size:19px;color:var(--blau)}
.hw-qual span{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--grau)}

.hw-prozess{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.hw-schritt{position:relative;padding:32px 28px;border-radius:var(--r);
  background:var(--weiss);border:1px solid var(--linie);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s}
.hw-schritt:hover{transform:translateY(-6px);box-shadow:var(--schatten-hoch)}
.hw-schritt-nr{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  background:linear-gradient(140deg,var(--blau),var(--blau-tief));color:var(--gold);
  font-family:Sora,sans-serif;font-size:16px;font-weight:800}
.hw-schritt strong{display:block;margin:18px 0 8px;font-family:Sora,sans-serif;
  font-size:18px;color:var(--blau)}
.hw-schritt p{font-size:14.5px;line-height:1.6;color:var(--grau)}

.hw-kette{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:10px 14px;margin-top:52px;padding:22px 26px;border-radius:999px;
  background:var(--flaeche);border:1px solid var(--linie)}
.hw-kette span{font-family:Sora,sans-serif;font-size:14px;font-weight:700;color:var(--blau)}
.hw-kette i{color:var(--gold);font-style:normal;font-weight:800}

.hw-netz{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;
  padding-top:150px}
.hw-netz-mitte{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:180px;height:118px;display:grid;place-content:center;text-align:center;
  border-radius:var(--r);background:linear-gradient(150deg,var(--blau),var(--blau-tief));
  color:#fff;box-shadow:var(--schatten-hoch)}
.hw-netz-mitte strong{display:block;font-family:Sora,sans-serif;font-size:22px}
.hw-netz-mitte span{font-size:12.5px;color:rgba(255,255,255,.6)}
.hw-netz-rolle{position:relative;padding:26px 22px;border-radius:var(--r);
  background:var(--weiss);border:1px solid var(--linie);text-align:center;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),border-color .45s}
.hw-netz-rolle::before{content:"";position:absolute;left:50%;top:-32px;width:1px;height:32px;
  background:linear-gradient(180deg,transparent,var(--gold))}
.hw-netz-rolle:hover{transform:translateY(-5px);border-color:var(--gold)}
.hw-netz-rolle strong{display:block;font-family:Sora,sans-serif;font-size:18px;color:var(--blau)}
.hw-netz-rolle span{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--grau)}

.hw-trust{padding:26px 22px;border-radius:var(--r-klein);background:var(--flaeche);
  border:1px solid transparent;transition:border-color .4s,background .4s,transform .4s}
.hw-trust:hover{background:var(--weiss);border-color:var(--linie);transform:translateY(-4px)}
.hw-trust strong{display:block;font-family:Sora,sans-serif;font-size:16px;color:var(--blau)}
.hw-trust span{display:block;margin-top:8px;font-size:14px;line-height:1.55;color:var(--grau)}

/* ------------------------------------------------- 8 Preise */

.hw-preise{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;align-items:stretch}
.hw-preis{position:relative;display:flex;flex-direction:column;padding:34px 28px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s,border-color .45s}
.hw-preis:hover{transform:translateY(-8px);box-shadow:var(--schatten-hoch);border-color:#D8DFEE}
.hw-preis.is-empfohlen{border-color:var(--gold);box-shadow:0 20px 60px rgba(212,175,55,.18)}
.hw-preis-marke{position:absolute;top:-13px;left:28px;padding:6px 14px;border-radius:999px;
  background:var(--gold);color:var(--blau-tief);font-size:11px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase}
.hw-preis-marke-still{background:var(--blau);color:#fff}
.hw-preis h3{font-size:19px}
.hw-preis-zahl{display:flex;align-items:baseline;gap:6px;margin:16px 0 2px}
.hw-preis-waehrung{font-size:14px;font-weight:700;color:var(--grau)}
.hw-preis-zahl strong{font-family:Sora,sans-serif;font-size:clamp(34px,3.4vw,44px);
  font-weight:700;color:var(--blau);letter-spacing:-.03em;line-height:1}
.hw-preis-periode{font-size:13.5px;color:var(--grau)}
.hw-preis-zusatz{display:block;font-size:13px;color:var(--grau);margin-bottom:4px}
.hw-preis-claim{margin-top:14px;font-family:Sora,sans-serif;font-size:15.5px;
  font-weight:700;color:var(--blau)}
.hw-preis-nutzen{margin-top:8px;font-size:14px;line-height:1.6;color:var(--grau)}
.hw-preis .hw-liste{margin-top:18px;padding-top:16px;border-top:1px solid var(--linie)}
.hw-preis .hw-liste li{font-size:13.8px;padding-left:24px}
.hw-preis-hinweis{display:block;margin-top:14px;font-size:12.5px;line-height:1.5;color:var(--grau-hell)}
.hw-preis.is-vergeben{background:linear-gradient(170deg,#fff,#F7F9FD)}

.hw-toggle{display:inline-flex;padding:5px;border-radius:999px;background:var(--flaeche);
  border:1px solid var(--linie);margin:0 auto 44px;position:relative}
.hw-toggle button{position:relative;z-index:1;min-width:170px;min-height:46px;padding:0 26px;
  border:0;border-radius:999px;background:transparent;cursor:pointer;
  font-family:Inter,sans-serif;font-size:15px;font-weight:700;color:var(--grau);
  transition:color .3s}
.hw-toggle button.is-aktiv{color:var(--blau-tief)}
.hw-toggle-schieber{position:absolute;top:5px;left:5px;height:calc(100% - 10px);
  border-radius:999px;background:var(--gold);box-shadow:0 8px 20px rgba(212,175,55,.34);
  transition:transform .45s cubic-bezier(.2,.8,.2,1),width .45s cubic-bezier(.2,.8,.2,1)}
.hw-toggle-zeile{display:flex;justify-content:center}

.hw-vergleich{width:100%;border-collapse:collapse;margin-top:12px;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--r);overflow:hidden}
/* Das Theme bringt eigene Tabellenrahmen und Zebrastreifen mit. Sie
   werden hier bewusst abgeräumt: die Tabelle soll wie eine Karte
   wirken, nicht wie eine Tabellenkalkulation. */
.hw-vergleich th,.hw-vergleich td{padding:16px 18px;text-align:center;
  border:0;border-bottom:1px solid var(--linie);background:transparent;font-size:14.5px}
/* Das Theme streift die Zeilen (nth-child odd). Mit zwei Klassen und
   demselben nth-child gewinnt diese Regel - ohne !important. */
/* Gemessen: die Theme-Regel "table tbody > tr:nth-child(2n+1) > th"
   hat Spezifitaet (0,1,3) und schlaegt ".hw-vergleich tbody th" (0,1,2).
   Darum hier derselbe Aufbau mit einer Klasse mehr - kein !important. */
.hw-vergleich tbody > tr:nth-child(2n+1) > th,
.hw-vergleich tbody > tr:nth-child(2n+1) > td,
.hw-vergleich tbody > tr > th,
.hw-vergleich tbody > tr > td,
.hw-vergleich tbody tr,
.hw-vergleich thead tr{background:transparent}
.hw-vergleich thead > tr > th{background:var(--flaeche)}
.hw-vergleich thead th{background:var(--flaeche);font-family:Sora,sans-serif;
  font-size:14px;color:var(--blau)}
.hw-vergleich tbody th{text-align:left;font-weight:600;color:var(--text)}
.hw-vergleich td{color:var(--blau);font-weight:700}
.hw-vergleich tr:last-child th,.hw-vergleich tr:last-child td{border-bottom:0}
.hw-ja{color:var(--gold)}
.hw-nein{color:var(--grau-hell)}
.hw-vergleich-wrap{overflow-x:auto;border-radius:var(--r)}

/* --------------------------------------- 9 Cockpit-Nachbau */

.hw-cockpit{border-radius:22px;overflow:hidden;background:#F7F9FD;
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 40px 90px rgba(6,12,32,.55);
  transform:perspective(1400px) rotateY(-7deg) rotateX(2deg);
  transform-style:preserve-3d;
  transition:transform .8s cubic-bezier(.2,.8,.2,1)}
.hw-cockpit:hover{transform:perspective(1400px) rotateY(-3deg) rotateX(1deg) translateY(-6px)}
.hw-cockpit-leiste{display:flex;align-items:center;gap:14px;padding:11px 16px;
  background:#fff;border-bottom:1px solid var(--linie)}
.hw-cockpit-punkte{display:flex;gap:6px}
.hw-cockpit-punkte i{width:9px;height:9px;border-radius:50%;background:#DDE3EF}
.hw-cockpit-url{font-size:11px;color:var(--grau-hell);letter-spacing:.04em}
.hw-cockpit-body{display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);min-height:420px}
.hw-cockpit-nav{display:flex;flex-direction:column;gap:2px;padding:16px 10px;
  background:#fff;border-right:1px solid var(--linie)}
.hw-cockpit-nav span{padding:10px 12px;border-radius:10px;font-size:13px;
  font-weight:600;color:var(--grau)}
.hw-cockpit-nav .is-aktiv{background:#EEF2FA;color:var(--blau);
  box-shadow:inset 3px 0 0 var(--gold)}
.hw-cockpit-inhalt{padding:18px;display:flex;flex-direction:column;gap:14px}
.hw-cockpit-gruss{display:flex;align-items:center;gap:12px;padding:16px 18px;
  background:#fff;border-radius:16px;border:1px solid var(--linie);
  border-top:3px solid var(--gold)}
.hw-cockpit-avatar{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  background:#E9EDF7;color:var(--blau);font-weight:800;font-size:14px}
.hw-cockpit-gruss small{display:block;font-size:9.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grau)}
.hw-cockpit-gruss strong{display:block;font-family:Sora,sans-serif;font-size:19px;color:var(--blau)}
.hw-cockpit-gruss span{font-size:12px;color:var(--grau)}

/* --------------------------------------- 9b  Cockpit: das heutige Office
 *
 * 1.358.0 - Befund Patrick Hollenstein, 09.09.2026: "Die Seiten haben immer
 * noch das selbe alte Office als Beispiel."
 *
 * Der Nachbau zeigt jetzt, was die Übersicht wirklich zeigt: die Ablage, die
 * Stufe mit ihrem Band, den nächsten Schritt mit seiner Nummer und der Reihe
 * aller Schritte, und die Begleitung. Die alten Kennzahlenkacheln
 * (.hw-cockpit-kpis, .hw-cockpit-weg, .hw-cockpit-next) werden nicht mehr
 * gezeichnet.
 * ---------------------------------------------------------------------- */

.hw-cockpit-knopf{display:inline-block;padding:6px 14px;border-radius:999px;
  background:#EEF2FA;color:var(--blau);font-style:normal;font-size:11px;font-weight:800;
  border:1px solid var(--linie);white-space:nowrap}
.hw-cockpit-knopf.is-primaer{background:var(--blau);border-color:var(--blau);color:#fff}

.hw-cockpit-ablage{display:flex;align-items:center;gap:10px;padding:11px 13px;
  border:1px dashed #C3CEE5;border-radius:14px;background:#FBFCFE}
.hw-cockpit-ablage-icon{display:grid;place-items:center;width:30px;height:30px;flex:none;
  border-radius:9px;background:var(--blau);font-size:14px}
.hw-cockpit-ablage-text{display:block;min-width:0;flex:1}
.hw-cockpit-ablage-text strong{display:block;font-size:12px;font-weight:800;color:var(--blau);line-height:1.3}
.hw-cockpit-ablage-text small{display:block;font-size:10px;color:var(--grau)}

.hw-cockpit-plan{padding:14px;background:#fff;border-radius:16px;border:1px solid var(--linie)}
.hw-cockpit-plan-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hw-cockpit-plan-kopf small{display:block;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau)}
.hw-cockpit-plan-kopf strong{display:block;margin-top:3px;font-family:Sora,sans-serif;
  font-size:14.5px;color:var(--blau);line-height:1.25}
.hw-cockpit-stufe{flex:none;padding:4px 11px;border-radius:999px;border:1px solid var(--linie);
  font-size:9px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--blau)}

.hw-cockpit-band{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px;margin:12px 0 6px}
.hw-cockpit-band i{display:block;height:5px;border-radius:3px;background:#EDF1F8;overflow:hidden}
.hw-cockpit-band i span{display:block;height:100%;border-radius:3px;background:var(--gold);
  transform-origin:left;animation:hwBar 1.6s cubic-bezier(.2,.8,.2,1) both}
.hw-cockpit-stufen{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:6px}
/* Die Stufennamen des Partner Office sind lang ("Strategischer Partner").
   Abgeschnitten mit Auslassungspunkten sagen sie nichts mehr - also brechen
   sie um, statt zu verschwinden. */
.hw-cockpit-stufen span{font-size:8.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grau-hell);text-align:center;line-height:1.2;hyphens:auto;padding:3px 2px}
.hw-cockpit-stufen .is-hier{color:var(--blau);background:#EEF2FA;border-radius:8px}

.hw-cockpit-schritt{display:flex;gap:10px;margin-top:12px;padding:12px;
  border:1px solid var(--linie);border-radius:13px;background:#FBFCFE}
.hw-cockpit-schritt-nr{display:grid;place-items:center;flex:none;width:24px;height:24px;
  border-radius:50%;background:var(--blau);color:#fff;font-size:11px;font-weight:800}
.hw-cockpit-schritt strong{display:block;font-size:12.5px;font-weight:800;color:var(--blau);line-height:1.3}
.hw-cockpit-schritt>div>span{display:block;margin:3px 0 9px;font-size:10.5px;color:var(--grau);line-height:1.45}

.hw-cockpit-reihe{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;
  padding-top:11px;border-top:1px solid var(--linie)}
.hw-cockpit-reihe i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--linie);background:#fff;font-style:normal;font-size:9.5px;font-weight:800;color:var(--grau)}
.hw-cockpit-reihe .is-fertig{background:#EFF6EE;border-color:#9FBF9C;color:#3F6B3C}
.hw-cockpit-reihe .is-jetzt{border-color:var(--gold);color:var(--blau);box-shadow:0 0 0 2px rgba(212,175,55,.22)}
.hw-cockpit-rest{display:block;margin-top:9px;font-size:10px;color:var(--grau)}

.hw-cockpit-begleitung{padding:14px;background:#fff;border-radius:16px;border:1px solid var(--linie)}
.hw-cockpit-begleitung-kopf{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.hw-cockpit-begleitung-kopf small{display:block;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau)}
.hw-cockpit-begleitung-kopf strong{display:block;margin-top:3px;font-family:Sora,sans-serif;
  font-size:14.5px;color:var(--blau)}
.hw-cockpit-begleitung-kopf>span{flex:none;font-size:10.5px;font-weight:700;color:var(--blau);white-space:nowrap}
.hw-cockpit-personen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:11px}
.hw-cockpit-person{display:flex;align-items:center;gap:8px;min-width:0;padding:9px 10px;
  border:1px solid var(--linie);border-radius:12px;background:#FBFCFE}
.hw-cockpit-person i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;
  background:#E9EDF7;color:var(--blau);font-style:normal;font-size:9.5px;font-weight:800}
.hw-cockpit-person>span{min-width:0}
.hw-cockpit-person strong{display:block;font-size:11px;font-weight:800;color:var(--blau);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-cockpit-person small{display:block;font-size:9.5px;color:var(--grau);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

@container (max-width:330px){
  .hw-cockpit-personen{grid-template-columns:minmax(0,1fr)}
  .hw-cockpit-stufen span{font-size:8px}
}
/* ------------------------------------------------------------------
 * 9c COCKPIT: DIE BILDER AUS DEM OFFICE (1.360.0)
 *
 * Patrick Hollenstein, 09.09.2026: "nimm die Bilder die ich dir gegeben
 * habe, dort ist kein Foto von jemandem drauf."
 *
 * Also: der blaue Kopf mit dem Fuchs statt eines Portraits, das Haus
 * genau wie in 1.77.0 gezeichnet, der Kompass mit derselben Geometrie
 * wie Helvanta_Business_Bild. Keine neuen Erfindungen - dieselben
 * Bilder, nur kleiner.
 * ------------------------------------------------------------------ */

/* ---- Der Kopf: blau, mit dem Qualitaets-Fuchs --------------------- */
.hw-cockpit-hero{display:flex;align-items:center;gap:12px;padding:15px 16px;
  border-radius:16px;background:linear-gradient(135deg,#17265F 0%,#0C1738 100%);
  box-shadow:0 10px 26px -14px rgba(12,23,56,.7)}
.hw-cockpit-hero-text{min-width:0;flex:1}
.hw-cockpit-hero small{display:block;font-size:9px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--gold)}
.hw-cockpit-hero strong{display:block;margin-top:3px;font-family:Sora,sans-serif;
  font-size:20px;font-weight:600;color:#fff;letter-spacing:-.01em}
.hw-cockpit-fuchs{flex:none;width:52px;height:52px;object-fit:contain}

/* ---- Die Kachel: derselbe Kopf wie jede Digital-Twin-Kachel ------- */
.hw-cockpit-karte{padding:14px;background:#fff;border-radius:16px;border:1px solid var(--linie)}
.hw-cockpit-karte-kopf{display:flex;align-items:flex-start;justify-content:space-between;
  gap:10px;padding-bottom:11px;margin-bottom:12px;border-bottom:1px solid var(--linie)}
.hw-cockpit-karte-kopf small{display:block;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau)}
.hw-cockpit-karte-kopf strong{display:block;margin-top:3px;font-family:Sora,sans-serif;
  font-size:17px;font-weight:600;color:var(--blau);letter-spacing:-.01em}
.hw-cockpit-karte-kopf .hw-cockpit-knopf{flex:none;white-space:nowrap}
.hw-cockpit-fuss{margin:2px 0 0;font-size:10px;line-height:1.5;color:var(--grau)}

/* ---- Vorsorge: vier Faelle, Balken so breit wie das Einkommen ----- */
.hw-cockpit-vorsorge{display:grid;gap:7px}
.hw-cockpit-fall{padding:10px 11px;background:#FBFCFE;border-radius:12px;
  border:1px solid var(--linie)}
.hw-cockpit-fall small{display:block;font-size:8.5px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau)}
.hw-cockpit-fall strong{display:block;margin-top:2px;font-size:12.5px;font-weight:800;
  color:var(--blau);line-height:1.3}
.hw-cockpit-fall b{display:flex;align-items:baseline;gap:7px;margin-top:5px;
  font-family:Sora,sans-serif;font-size:15px;font-weight:600;color:var(--blau)}
.hw-cockpit-fall b i{font-style:normal;font-size:10px;font-weight:800;color:var(--grau)}
.hw-cockpit-fallbalken{position:relative;display:flex;height:7px;margin-top:6px;
  border-radius:4px;background:#EDF1F8;overflow:hidden}
.hw-cockpit-fallbalken em{display:block;height:100%;transform-origin:left;
  animation:hwBar 1.6s cubic-bezier(.2,.8,.2,1) both}
.hw-cockpit-fallbalken .is-a{background:var(--blau)}
.hw-cockpit-fallbalken .is-b{background:#4A5C9E}
.hw-cockpit-fallbalken .is-c{background:var(--gold)}
.hw-cockpit-marke{position:absolute;top:-2px;bottom:-2px;width:2px;animation:none;
  background:rgba(23,38,95,.5);border-radius:2px}
.hw-cockpit-falltext{display:block;margin-top:5px;font-size:10px;color:var(--grau)}
.hw-cockpit-falltext b{display:inline;margin:0;font-family:inherit;font-size:10px;
  font-weight:800;color:var(--blau)}

/* ---- Wohnen: Adresse, Haus, Raster -------------------------------- */
.hw-cockpit-adresse{display:flex;align-items:center;flex-wrap:wrap;gap:5px;margin:0;
  font-size:12.5px;color:var(--blau)}
.hw-cockpit-adresse strong{font-weight:800;letter-spacing:-.01em}
.hw-cockpit-adresse em{padding:2px 8px;border-radius:999px;background:#EEF2FA;
  font-style:normal;font-size:9px;font-weight:800;letter-spacing:.07em;
  text-transform:uppercase;color:var(--blau)}
.hw-cockpit-fakten{margin:4px 0 0;font-size:10.5px;color:var(--grau)}

.hw-haus{--hw-dach-h:62px;position:relative;max-width:300px;margin:12px auto 0}
.hw-haus-dach{position:relative;display:block;height:var(--hw-dach-h);line-height:0}
.hw-haus-flaeche{position:relative;z-index:1;display:block;width:100%;height:100%}
.hw-dach-links{fill:#22336E}
.hw-dach-rechts{fill:#141F49}
.hw-haus-kamin{position:absolute;z-index:0;left:18%;bottom:24%;width:16px;height:46%;
  border-radius:3px 3px 0 0;
  background:linear-gradient(90deg,#101A3E 0%,#18244F 55%,#0C1430 100%)}
.hw-haus-kamin::after{content:"";position:absolute;left:-4px;right:-4px;top:0;height:6px;
  border-radius:3px;background:linear-gradient(180deg,#3A4C87,#26356B)}
.hw-haus-schild{position:absolute;z-index:2;left:50%;bottom:8px;transform:translateX(-50%);
  max-width:56%;box-sizing:border-box;display:flex;align-items:center;gap:7px;
  padding:5px 11px 5px 5px;border-radius:999px;background:#fff;
  box-shadow:0 10px 22px -8px rgba(10,18,48,.55),0 0 0 1px rgba(255,255,255,.55)}
.hw-haus-schild>b{flex:none;display:grid;place-items:center;width:22px;height:22px;
  border-radius:50%;font-size:11px;font-weight:400;line-height:1;color:#fff;
  background:linear-gradient(180deg,#22336E,#141F49)}
.hw-haus-schild>span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.hw-haus-schild strong{font-size:11px;font-weight:800;color:var(--blau);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hw-haus-schild small{font-size:8px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:#8891AC}
.hw-haus-traufe{position:relative;z-index:3;height:8px;margin:-1px 0 0;border-radius:4px;
  background:linear-gradient(180deg,#1B2A63 0%,#101A3E 100%);
  box-shadow:0 6px 14px -6px rgba(20,31,73,.5)}
.hw-haus-koerper{position:relative;margin:0 12px;padding:12px 12px 46px;
  display:flex;flex-direction:column;gap:7px;
  border-left:2px solid rgba(20,31,73,.9);border-right:2px solid rgba(20,31,73,.9);
  background:linear-gradient(180deg,#FAFBFE 0%,#FFFFFF 45%),
    radial-gradient(120% 60% at 50% 0%,rgba(20,31,73,.06) 0%,rgba(20,31,73,0) 70%)}
.hw-haus-reihe{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.hw-haus-person{display:flex;align-items:center;gap:6px;min-width:0;
  padding:5px 10px 5px 5px;border:1px solid rgba(20,31,73,.10);border-radius:999px;
  background:#fff;box-shadow:0 6px 14px -8px rgba(20,31,73,.35)}
.hw-haus-person>b{flex:none;display:grid;place-items:center;width:22px;height:22px;
  border-radius:50%;background:#EEF1F8;font-size:11px;font-weight:400;line-height:1}
.hw-haus-person>span{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.hw-haus-person strong{font-size:11px;font-weight:800;color:var(--blau)}
.hw-haus-person small{font-size:8px;font-weight:700;letter-spacing:.07em;
  text-transform:uppercase;color:#8891AC}
.hw-haus-tuer{position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  width:30px;height:34px;border:2px solid rgba(20,31,73,.9);border-bottom:none;
  border-radius:18px 18px 3px 3px;
  background:linear-gradient(180deg,#EFF3FB 0%,#DCE3F2 100%)}
.hw-haus-tuer::after{content:"";position:absolute;right:6px;top:20px;width:5px;height:5px;
  border-radius:50%;background:var(--gold);box-shadow:0 0 0 3px rgba(199,161,60,.22)}
.hw-haus-boden{height:9px;border-radius:5px;
  background:linear-gradient(90deg,#1B2A63 0%,#141F49 50%,#1B2A63 100%);
  box-shadow:0 16px 28px -14px rgba(20,31,73,.6)}

.hw-wohn-gitter{margin:14px auto 0}
.hw-wohn-gitter-titel{display:block;margin:0 0 6px;font-size:8.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;color:#A3AABB;text-align:center}
.hw-wohn-gitter-reihe{display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.hw-wohn-feld{display:flex;flex-direction:column;align-items:center;gap:2px;
  width:calc(33.333% - 4px);box-sizing:border-box;padding:8px 5px 9px;text-align:center;
  background:#F8F9FC;border:1px solid var(--linie);border-radius:12px}
.hw-wohn-feld-icon{font-size:14px;line-height:1.1}
.hw-wohn-feld-label{font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:#8A91A4;line-height:1.2;max-width:100%;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hw-wohn-feld-wert{font-size:10px;font-weight:800;color:var(--blau);line-height:1.25;
  max-width:100%;overflow-wrap:anywhere}
.hw-wohn-feld.is-nein{background:#FBFCFE}
.hw-wohn-feld.is-nein .hw-wohn-feld-wert{color:var(--grau);font-weight:600}
.hw-wohn-feld.is-nein .hw-wohn-feld-icon{opacity:.45}
.hw-wohn-feld.is-leer{background:#fff;border-style:dashed}
.hw-wohn-feld.is-leer .hw-wohn-feld-icon{opacity:.35}
.hw-wohn-feld.is-leer .hw-wohn-feld-wert{color:#B7BECD}

/* ---- Kompass: Geometrie und Farben aus dem Business Office -------- */
.hw-kompass svg{display:block;width:100%;height:auto;margin:-8px 0 2px}
.hw-k-rand{fill:#fff;stroke:#17265F;stroke-width:3}
.hw-k-rand2{fill:none;stroke:var(--gold);stroke-width:1.2;opacity:.8}
.hw-k-tick{stroke:#8891AC;stroke-width:1.2}
.hw-k-tick.is-lang{stroke:#17265F;stroke-width:2}
.hw-k-grund{fill:#EEF1F6;stroke:#fff;stroke-width:3}
.hw-k-gold{fill:var(--gold);stroke:none;
  transform-origin:390px 300px;animation:hwK 1.4s cubic-bezier(.2,.8,.2,1) both}
@keyframes hwK{from{opacity:0;transform:scale(.86)}to{opacity:1;transform:none}}
.hw-k-nr{font-size:15px;font-weight:800;fill:#17265F;text-anchor:middle;dominant-baseline:central}
.hw-k-frage{font-size:12px;font-weight:800;fill:#8891AC;letter-spacing:.06em;text-transform:uppercase}
.hw-k-name{font-size:18px;font-weight:800;fill:#17265F}
.hw-k-mitte-ring{fill:none;stroke:var(--gold);stroke-width:2}
.hw-k-rose{fill:#3A4C87}
.hw-k-rose.is-lang{fill:var(--gold)}
.hw-k-nabe{fill:#fff}
.hw-k-firma{font-size:14px;font-weight:800;fill:#fff;text-anchor:middle}
.hw-k-bereich{font-size:8.5px;font-weight:800;fill:var(--gold);text-anchor:middle;
  letter-spacing:.05em;text-transform:uppercase}
.hw-k-tafel{margin-top:4px;padding:12px 13px;border-radius:13px;
  border:1.5px solid var(--gold);background:#FFFBEC}
.hw-k-tafel-frage{display:block;font-size:8.5px;font-weight:800;letter-spacing:.08em;
  text-transform:uppercase;color:var(--grau)}
.hw-k-tafel>strong{display:block;margin:2px 0 5px;font-family:Sora,sans-serif;
  font-size:15px;font-weight:600;color:var(--blau)}
.hw-k-tafel>p{margin:0 0 8px;font-size:10.5px;line-height:1.5;color:var(--grau)}
.hw-k-tafel>ul{list-style:none;margin:0 0 10px;padding:0;display:grid;gap:3px;
  font-size:10.5px;color:var(--grau)}
.hw-k-tafel>ul b{color:var(--blau)}

@container (max-width:330px){
  .hw-cockpit-hero strong{font-size:17px}
  .hw-cockpit-karte-kopf{flex-direction:column;gap:7px}
  .hw-cockpit-karte-kopf .hw-cockpit-knopf{align-self:flex-start}
  .hw-k-frage{font-size:15px}
  .hw-k-name{font-size:22px}
  .hw-k-nr{font-size:18px}
}

.hw-cockpit-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;
  background:var(--linie);border:1px solid var(--linie);border-radius:16px;overflow:hidden}
.hw-cockpit-kpis>div{background:#fff;padding:14px 12px}
.hw-cockpit-kpis small{display:block;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau)}
.hw-cockpit-kpis strong{display:block;margin-top:5px;font-family:Sora,sans-serif;
  font-size:17px;color:var(--blau)}
.hw-cockpit-kpis strong i{font-style:normal;font-size:11px;color:var(--grau)}
.hw-cockpit-kpis>div>span{display:block;margin-top:4px;font-size:10.5px;color:var(--grau)}
.hw-cockpit-bar{height:4px;border-radius:2px;background:#EDF1F8;overflow:hidden}
.hw-cockpit-bar i{display:block;height:100%;background:var(--gold);
  transform-origin:left;animation:hwBar 1.6s cubic-bezier(.2,.8,.2,1) both}
@keyframes hwBar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.hw-cockpit-weg{padding:16px 18px;background:#fff;border-radius:16px;border:1px solid var(--linie)}
.hw-cockpit-weg small{display:block;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grau);margin-bottom:12px}
.hw-cockpit-wegband{position:relative;display:grid;grid-auto-flow:column;
  grid-auto-columns:1fr;align-items:center}
.hw-cockpit-wegband::before{content:"";position:absolute;left:10%;right:10%;top:50%;height:2px;
  background:var(--linie);transform:translateY(-50%)}
.hw-cockpit-wegband span{position:relative;justify-self:center;width:9px;height:9px;
  border-radius:50%;background:#fff;border:2px solid var(--linie)}
.hw-cockpit-wegband .is-hier{width:14px;height:14px;background:var(--gold);
  border-color:var(--gold);box-shadow:0 0 0 4px rgba(212,175,55,.2)}
.hw-cockpit-wegnamen{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;margin-top:8px}
.hw-cockpit-wegnamen i{justify-self:center;font-style:normal;font-size:10px;
  text-align:center;letter-spacing:-.01em;
  font-weight:700;color:var(--grau)}
.hw-cockpit-wegnamen .is-hier{color:var(--blau)}
.hw-cockpit-next{padding:16px 18px;border-radius:16px;
  background:linear-gradient(140deg,var(--blau),var(--blau-tief));color:#fff}
.hw-cockpit-next small{display:block;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold)}
.hw-cockpit-next strong{display:block;margin:6px 0 4px;font-family:Sora,sans-serif;font-size:16px}
.hw-cockpit-next span{font-size:12px;color:rgba(255,255,255,.7)}

/* ------------------------------------------------ 10 FAQ / CTA */

.hw-faq{max-width:840px;margin:0 auto}
.hw-faq-item{border-bottom:1px solid var(--linie)}
.hw-faq-item summary{position:relative;display:flex;align-items:center;justify-content:space-between;
  gap:20px;padding:24px 0;cursor:pointer;list-style:none;
  font-family:Sora,sans-serif;font-size:18px;font-weight:700;color:var(--blau)}
.hw-faq-item summary::-webkit-details-marker{display:none}
.hw-faq-plus{position:relative;flex:0 0 auto;width:22px;height:22px}
.hw-faq-plus::before,.hw-faq-plus::after{content:"";position:absolute;left:50%;top:50%;
  background:var(--gold);border-radius:2px;transform:translate(-50%,-50%);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .3s}
.hw-faq-plus::before{width:16px;height:2px}
.hw-faq-plus::after{width:2px;height:16px}
.hw-faq-item[open] .hw-faq-plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.hw-faq-antwort{padding:0 0 24px;max-width:70ch}
.hw-faq-antwort p{color:var(--grau);font-size:15.5px;line-height:1.68}
.hw-faq-item[open] .hw-faq-antwort{animation:hwFaq .4s cubic-bezier(.2,.8,.2,1)}
@keyframes hwFaq{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.hw-cta{padding-bottom:calc(var(--sektion) + 10px)}
.hw-cta-box{position:relative;overflow:hidden;padding:clamp(48px,6vw,84px) clamp(28px,5vw,72px);
  border-radius:28px;text-align:center;
  background:linear-gradient(150deg,#101C44,var(--blau-nacht));
  box-shadow:var(--schatten-hoch)}
.hw-cta-box::before{content:"";position:absolute;top:-50%;right:-15%;width:520px;height:520px;
  border-radius:50%;filter:blur(80px);
  background:radial-gradient(circle,rgba(212,175,55,.32),transparent 68%)}
.hw-cta-box h2{position:relative;color:#fff}
.hw-cta-box p{position:relative;margin:18px auto 0;max-width:52ch;
  color:rgba(255,255,255,.72);font-size:17px;line-height:1.62}
.hw-cta-box .hw-btns{position:relative;justify-content:center}
.hw-cta-box .hw-btn-still{color:#fff;border-color:rgba(255,255,255,.32)}
.hw-cta-box .hw-btn-still:hover{border-color:var(--gold);color:var(--gold);
  background:rgba(212,175,55,.12)}

/* --------------------------------------------- 11 Bewegung */

[data-hw-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.2,.8,.2,1),transform .8s cubic-bezier(.2,.8,.2,1);
  transition-delay:calc(.07s * var(--i,0))}
[data-hw-reveal].is-sichtbar{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  .hw *,.hw *::before,.hw *::after{animation-duration:.001ms!important;
    animation-iteration-count:1!important;transition-duration:.001ms!important}
  [data-hw-reveal]{opacity:1;transform:none}
  .hw-band::before{transform:scaleX(1)}
  .hw-cockpit{transform:none}
}

/* =========================================================================
 * 11b  Kontakt
 * ===================================================================== */

.hw-kontakt{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:44px;
  align-items:start}

.hw-kontakt-wege h2,.hw-kontakt-formular h2{font-size:22px;margin-bottom:20px}

/*
 * Eigene Farbe, immer.
 *
 * Gemessen: ohne eigene Angabe standen diese Links in rgb(204,51,102) -
 * dasselbe Pink wie zuvor der Burger. Es kommt aus einer fremden Regel
 * und wurde früher zufällig von Elementors CSS überdeckt, das die Seite
 * nicht mehr lädt. Jedes Element der Marke setzt seine Farbe selbst.
 */
.hw-kontakt-weg{display:block;padding:20px 22px;margin-bottom:14px;border-radius:var(--r);
  background:var(--weiss);border:1px solid var(--linie);color:var(--blau);
  transition:transform .35s cubic-bezier(.2,.8,.2,1),border-color .35s,box-shadow .35s}
a.hw-kontakt-weg:hover{transform:translateY(-3px);border-color:var(--gold);
  box-shadow:var(--schatten)}
.hw-kontakt-weg small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--grau)}
.hw-kontakt-weg strong{display:block;margin-top:6px;font-family:Sora,sans-serif;
  font-size:18px;line-height:1.45;color:var(--blau)}
.hw-kontakt-weg-still{cursor:default}
.hw-kontakt-weg-tat strong::after{content:" →"}
.hw-kontakt-karte{display:inline-flex;align-items:center;min-height:44px;
  margin-top:6px;font-size:14px;font-weight:700;color:var(--blau)}
.hw-kontakt-karte::after{content:"→";margin-left:6px}

.hw-kontakt-formular{padding:34px 32px;border-radius:var(--r);background:var(--weiss);
  border:1px solid var(--linie);box-shadow:var(--schatten)}

.hw-form-paar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 18px}
.hw-feld{margin:0 0 18px}
.hw-feld label{display:block;margin-bottom:7px;font-size:13.5px;font-weight:700;
  color:var(--blau)}
.hw-feld label i{font-style:normal;font-weight:400;color:var(--grau-hell)}
.hw-feld input,.hw-feld select,.hw-feld textarea{width:100%;padding:13px 14px;
  border:1px solid var(--linie);border-radius:12px;background:#fff;
  font-family:Inter,sans-serif;font-size:15.5px;color:var(--blau);
  transition:border-color .25s,box-shadow .25s}
.hw-feld input:focus,.hw-feld select:focus,.hw-feld textarea:focus{outline:none;
  border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,175,55,.18)}
.hw-feld textarea{resize:vertical;min-height:140px;line-height:1.6}
.hw-form .hw-btn{width:100%;margin-top:4px}
.hw-form-fuss{margin-top:16px;font-size:12.5px;line-height:1.55;color:var(--grau-hell)}

/* Die Falle: für Menschen unsichtbar, für Skripte ein Feld wie jedes andere. */
.hw-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.hw-hinweis{display:block;margin-bottom:24px;padding:16px 18px;border-radius:14px;
  border:1px solid var(--linie)}
.hw-hinweis strong{display:block;font-family:Sora,sans-serif;font-size:16px;color:var(--blau)}
.hw-hinweis span{display:block;margin-top:5px;font-size:14px;line-height:1.55;color:var(--grau)}
.hw-hinweis-gut{background:#F4F9F3;border-color:#CBE3C6}
.hw-hinweis-warn{background:#FDF7EC;border-color:#EBD8B0}

.hw-hero-schmal{min-height:auto;padding:150px 0 90px}

/* Drei Karten, aber die Zahl steht nicht im Raster: auto-fit fuellt die
   Zeile mit so vielen Karten wie passen. Zwei Personen sehen dann so
   ordentlich aus wie vier. */
.hw-team{display:grid;grid-template-columns:repeat(auto-fit,minmax(0,250px));
  gap:24px;justify-content:center}
.hw-teamkarte{display:flex;flex-direction:column;align-items:center;
  padding:30px 22px;border-radius:var(--r);background:var(--weiss);
  border:1px solid var(--linie);box-shadow:var(--schatten);text-align:center}
.hw-teamfoto{width:96px;height:96px;margin-bottom:16px;border-radius:50%;
  object-fit:cover;border:2px solid var(--gold)}
.hw-teamkarte strong{font-family:Sora,sans-serif;font-size:18px;
  line-height:1.35;color:var(--blau)}
/* Die Funktion steht am Kartenfuss, nicht direkt unter dem Namen: bricht
   ein langer Name auf zwei Zeilen, stehen die Funktionen trotzdem auf
   einer Linie. */
.hw-teamkarte span{margin-top:auto;padding-top:8px;font-size:13.5px;
  line-height:1.5;color:var(--grau)}

/* ------------------------------------------------ 12 Mobile */

@media (max-width:1080px){
  .hw-hero-inner{grid-template-columns:1fr;gap:52px}
  .hw-hero{min-height:auto;padding:120px 0 80px}
  .hw-cockpit{transform:none}
  .hw-vier,.hw-preise{grid-template-columns:repeat(2,1fr)}
  .hw-fuenf{grid-template-columns:repeat(2,1fr)}
  .hw-prozess{grid-template-columns:repeat(2,1fr)}
  .hw-qualitaet{grid-template-columns:repeat(2,1fr)}
  .hw-fuss-inner{grid-template-columns:1fr 1fr;gap:38px}
}

@media (max-width:900px){
  .hw-nav,.hw-nav-login{display:none}
  .hw-kopf-aktionen .hw-btn{display:none}
  .hw-burger{display:flex}
  .hw-kopf-inner{gap:16px}
  .hw-kopf-aktionen{margin-left:auto}
  .hw-drei,.hw-achsen{grid-template-columns:1fr}
  .hw-netz{grid-template-columns:repeat(2,1fr);padding-top:0}
  .hw-netz-mitte{position:static;transform:none;width:100%;height:auto;
    grid-column:1/-1;padding:22px;margin-bottom:8px}
  .hw-netz-rolle::before{display:none}
}

@media (max-width:720px){
  .hw{font-size:16px}
  .hw-inner,.hw-kopf-inner,.hw-fuss-inner,.hw-fuss-unten{padding-left:20px;padding-right:20px}
  .hw-vier,.hw-preise,.hw-fuenf,.hw-prozess,.hw-qualitaet{grid-template-columns:1fr}
  .hw-fuss-inner{grid-template-columns:1fr}
  .hw-btns .hw-btn{width:100%}
  .hw-scrollhinweis{display:none}

  /* Fünf Punkte nebeneinander sind auf dem Handy unlesbar. Das Band
   * kippt in die Senkrechte - derselbe Verlauf, nur gedreht. */
  /*
   * ".hw ul,.hw ol{padding:0}" hat (0,1,1) und schlug den Einzug hier
   * (0,1,0) - der Punkt rutschte an den Rand, die Linie blieb stehen.
   * Dieselbe strukturelle Form gibt der Regel das nötige Gewicht.
   */
  .hw ol.hw-band{grid-auto-flow:row;grid-auto-columns:auto;gap:4px;max-width:none;
    padding-left:8px}
  .hw-band{grid-auto-flow:row;grid-auto-columns:auto;gap:4px;max-width:none}
  /*
   * Die Linie läuft durch die Mitte der Punkte.
   *
   * Gerechnet: Band-Einzug 8px + halber Punkt 11px = Punktmitte bei
   * 19px. Eine 2px-Linie bei left:19px liegt von 19 bis 21 und damit
   * einen Pixel zu weit rechts - sichtbar, weil sie die Kreise dann
   * nicht mehr teilt, sondern streift.
   */
  .hw-band::before{left:18px;right:auto;top:14px;bottom:14px;width:2px;height:auto;
    transform:scaleY(0);transform-origin:top}
  .hw-band.is-sichtbar::before{transform:scaleY(1)}
  .hw-band-schritt{flex-direction:row;align-items:flex-start;text-align:left;
    padding:12px 0 12px 0;gap:16px}
  .hw-band-punkt{flex:0 0 auto;margin-top:3px}
  .hw-band-schritt>span:not(.hw-band-punkt){display:block}
  .hw-band-text{max-width:none}
  .hw-band-schritt{display:grid;grid-template-columns:22px 1fr;column-gap:16px}
  .hw-band-name{grid-column:2}
  .hw-band-text{grid-column:2}

  /*
   * Die Seitenspalte entfällt auf dem Handy.
   *
   * Als waagrechter Streifen liess sie sich nur wegscrollen - in einer
   * Nachbildung, die niemand bedient, ist das kein Menü, sondern ein
   * angeschnittenes Wort. Das echte Office führt seine Navigation auf
   * dem Handy ebenfalls nicht als Spalte. Was zählt, ist der Inhalt,
   * und der bekommt jetzt die ganze Breite.
   */
  .hw-cockpit-body{grid-template-columns:minmax(0,1fr)}
  .hw-cockpit-nav{display:none}

  .hw-kontakt{grid-template-columns:minmax(0,1fr);gap:32px}
  .hw-form-paar{grid-template-columns:minmax(0,1fr);gap:0}
  .hw-kontakt-formular{padding:26px 20px}
  .hw-hero-schmal{padding:120px 0 64px}
    .hw-cockpit-wegnamen i{font-size:9px}
  .hw-kette{border-radius:var(--r);padding:18px}
  .hw-toggle button{min-width:0;flex:1;padding:0 14px;font-size:14px}
  .hw-toggle{display:flex;width:100%}
}


/* =========================================================================
 * 13  Nachtrag — Seitenvarianten und Einzelstücke
 * ===================================================================== */

/* Unterseiten brauchen keinen Vollbild-Hero: der Titel steht sofort da,
 * und der erste Abschnitt ist schon angeschnitten sichtbar. */
.hw-hero-seite{min-height:auto;padding:150px 0 90px}
.hw-hero-kurz{min-height:auto;padding:170px 0 110px;text-align:center}
.hw-hero-mitte{max-width:820px;margin:0 auto}
.hw-hero-mitte .hw-lead{margin-left:auto;margin-right:auto}
.hw-hero-mitte .hw-btns{justify-content:center}
.hw-hero-kurz h1{margin:22px 0 26px}

/* Der Umschalter blendet um; ohne diese Regel gewinnt display:grid
   gegen das hidden-Attribut und beide Blöcke stünden übereinander. */
.hw-preise[hidden],[data-hw-tabelle][hidden]{display:none}

.hw-abstand{height:44px}

/* Die Abgrenzung Strategie gegen Fachberatung. Sie steht bewusst als
   eigener Kasten und nicht als Fussnote - sie ist keine Randbemerkung. */
.hw-abgrenzung{margin-top:34px;padding:28px 30px;border-radius:var(--r);
  background:var(--weiss);border:1px solid var(--linie);border-left:3px solid var(--gold);
  box-shadow:var(--schatten)}
.hw-abgrenzung strong{display:block;margin-bottom:10px;font-family:Sora,sans-serif;
  font-size:16px;color:var(--blau)}
.hw-abgrenzung p{font-size:15px;line-height:1.65;color:var(--grau)}

.hw-zweispalt{display:grid;grid-template-columns:repeat(2,1fr);gap:32px;
  max-width:960px;margin:0 auto}
.hw-zweispalt p{font-size:16.5px;line-height:1.7;color:rgba(255,255,255,.72)}
.hw-zweispalt p:first-child{font-family:Sora,sans-serif;font-size:21px;line-height:1.45;
  color:#fff;font-weight:600}

.hw-cockpit-buehne{max-width:960px;margin:0 auto;padding:40px;
  border-radius:28px;background:linear-gradient(150deg,#101C44,var(--blau-nacht));
  box-shadow:var(--schatten-hoch)}
.hw-cockpit-buehne .hw-bildunterschrift{color:rgba(255,255,255,.5)}

/* Die Vergleichstabelle hat eine Kopfzeile mit Preis - der kleine Text
   darunter darf nicht wie ein Fussnotenzeichen wirken. */
.hw-vergleich thead small{display:block;margin-top:4px;font-family:Inter,sans-serif;
  font-size:12px;font-weight:700;color:var(--gold)}
.hw-ja{font-size:17px}

@media (max-width:900px){
  .hw-zweispalt{grid-template-columns:1fr;gap:20px}
}
@media (max-width:720px){
  .hw-hero-seite{padding:120px 0 70px}
  .hw-hero-kurz{padding:130px 0 80px}
  .hw-cockpit-buehne{padding:18px}
  .hw-abgrenzung{padding:22px}
}


/* =========================================================================
 * 14  Nachtrag — WordPress-Adminleiste und Feinschliff
 * ===================================================================== */

/* Die Adminleiste liegt über allem und ist 32px hoch. Ohne diese Regel
   verschwindet die obere Hälfte des Kopfs darunter — sichtbar nur für
   angemeldete Redaktoren, aber genau die schauen sich die Seite an. */
.admin-bar .hw-kopf{top:32px}
.admin-bar .hw-mobilmenue{top:32px}
@media (max-width:782px){
  .admin-bar .hw-kopf{top:46px}
  .admin-bar .hw-mobilmenue{top:46px}
}

/* Überschriften sollen nicht mit einem einzelnen Wort enden. */
.hw h1,.hw h2,.hw-satz{text-wrap:balance}
.hw-lead,.hw-sektionkopf p{text-wrap:pretty}

/* Sehr lange Wörter im Fliesstext dürfen umbrechen statt zu überlaufen. */
.hw p,.hw li,.hw td,.hw th{overflow-wrap:break-word}


/* =========================================================================
 * 15  Nachtrag — Abstände und Hülle
 * ===================================================================== */

.hw-cockpit-huelle{position:relative}

/* Das Band braucht Luft nach unten: die Kurztexte der Phasen und die
   Fussnote standen sonst fast auf derselben Zeile. */
.hw-band{margin-top:14px}
.hw-band+.hw-fussnote{margin-top:56px}
.hw-preise+.hw-fussnote{margin-top:44px}
.hw-band-text{font-size:14px}

/* Auf sehr breiten Schirmen soll der Hero nicht auseinanderfallen. */
@media (min-width:1600px){
  .hw-inner,.hw-kopf-inner,.hw-fuss-inner,.hw-fuss-unten{max-width:1340px}
}


/* =========================================================================
 * 16  Nachtrag — Ankerziele, Fortschritt, letzte Kanten
 * ===================================================================== */

/* Der Kopf liegt fest über der Seite. Ohne diesen Abstand landet jedes
   Sprungziel genau darunter und wirkt, als sei der Link kaputt. */
:root:has(body.hw){overflow-x:clip}
.hw [id]{scroll-margin-top:110px}
.hw{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.hw{scroll-behavior:auto}}

/* Feiner Fortschrittsbalken unter dem Kopf. Er sagt beiläufig, wie lang
   die Seite noch ist - und ist das einzige Element, das sich beim
   Scrollen ständig bewegt. */
.hw-fortschritt{position:fixed;left:0;top:0;height:2px;width:100%;z-index:101;
  transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),var(--gold-hell));
  pointer-events:none}
.admin-bar .hw-fortschritt{top:32px}
@media (max-width:782px){.admin-bar .hw-fortschritt{top:46px}}

/* Die Fusszeile kann ohne Rechtsspalte auskommen - dann sollen die
   verbleibenden Spalten nicht auseinanderfallen. */
@media (min-width:901px){
  .hw-fuss-inner:has(.hw-fuss-spalte:nth-of-type(3)){grid-template-columns:2fr 1fr 1fr 1fr}
  .hw-fuss-inner:not(:has(.hw-fuss-spalte:nth-of-type(3))){grid-template-columns:2fr 1fr 1fr}
}


/* =========================================================================
 * 17  Nachtrag — Kontrast und Fingerkuppen
 *
 * Gemessen mit einem Kontrastlauf über alle Textknoten und einer
 * Zielgrössenprüfung bei 390px Breite.
 * ===================================================================== */

/* Die Eyebrow-Zeile stand auch auf dunklen Abschnitten in Grau —
   gemessener Kontrast 2.8:1, gefordert sind 4.5:1. */
.hw-dunkel .hw-eyebrow,.hw-hero .hw-eyebrow:not(.hw-eyebrow-gold){color:rgba(255,255,255,.72)}
.hw-cockpit-url{color:var(--grau)}

/* Fingerkuppen brauchen 44px. Auf dem Desktop stören die grösseren
   Flächen nicht, weil sie ohnehin in einer Reihe stehen. */
@media (max-width:900px){
  .hw-link{min-height:44px;align-items:center}
  .hw-marke{min-height:44px}
  .hw-fuss-spalte a,.hw-fuss-marke a{min-height:44px;display:flex;align-items:center}
  .hw-fuss-marke .hw-marke{display:inline-flex}
}


/* =========================================================================
 * 18  Vergleichstabellen auf dem Handy
 *
 * Eine Tabelle, die man seitlich schieben muss, wird nicht gelesen. Ab
 * 720px löst sie sich deshalb in Karten auf: eine Karte je Zeile, in ihr
 * je Spalte eine Zeile aus Spaltenname und Wert. Dieselben Daten,
 * dieselbe Reihenfolge, nur gedreht.
 * ===================================================================== */

@media (max-width:720px){
  .hw-vergleich-wrap{overflow:visible;border:0;border-radius:0;background:none}
  .hw-vergleich{display:block;border:0;background:none}
  .hw-vergleich thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .hw-vergleich tbody,.hw-vergleich tr,.hw-vergleich th,.hw-vergleich td{display:block;width:auto}
  .hw-vergleich tbody > tr,
  .hw-vergleich tbody > tr:nth-child(2n+1),
  .hw-vergleich tbody > tr:nth-child(2n){margin-bottom:14px;padding:18px 20px;background:var(--weiss);
    border:1px solid var(--linie);border-radius:var(--r-klein);box-shadow:var(--schatten)}
  .hw-vergleich tbody th{padding:0 0 12px;border:0;border-bottom:1px solid var(--linie);
    background:transparent;font-family:Sora,sans-serif;font-size:15.5px;color:var(--blau);text-align:left}
  .hw-vergleich td{display:flex;align-items:center;justify-content:space-between;gap:14px;
    padding:9px 0;border:0;background:transparent;text-align:right}
  .hw-vergleich td::before{content:attr(data-label);color:var(--grau);
    font-size:13.5px;font-weight:600;text-align:left}
  .hw-vergleich tbody tr:last-child{margin-bottom:0}
  .hw-za-frei{display:inline-block;margin-left:6px}
}


/* Sicherheitsnetz: Auch im durchsichtigen Zustand liegt ein feiner
   dunkler Verlauf hinter dem Kopf. Über dem Hero fällt er nicht auf -
   auf hellem Grund rettet er die weisse Schrift. */
.hw-kopf-ueber::before{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(8,15,38,.55),rgba(8,15,38,0));
  pointer-events:none}
.hw-kopf{isolation:isolate}


/* =========================================================================
 * 19  Der Cockpit-Ausschnitt darf nie breiter werden als seine Spalte
 *
 * Gemessen bei 1225px Fensterbreite: die vier Kennzahlen und die
 * Seitenleiste ergaben zusammen eine Mindestbreite, die grösser war als
 * die Hero-Spalte. Grid-Elemente haben von Haus aus min-width:auto - sie
 * schrumpfen also nicht unter ihren Inhalt, sondern laufen aus dem Bild.
 * ===================================================================== */

.hw-hero-bild,.hw-cockpit-huelle{min-width:0}
.hw-cockpit{max-width:100%}
.hw-cockpit-inhalt,.hw-cockpit-nav{min-width:0}
.hw-cockpit-kpis>div{min-width:0}
.hw-cockpit-kpis strong,.hw-cockpit-kpis small,.hw-cockpit-kpis>div>span,
.hw-cockpit-next strong,.hw-cockpit-next span{overflow-wrap:break-word}

/*
 * Die Kennzahlen im Hero stehen immer zu zweit.
 *
 * Gemessen auf der Startseite: die Cockpit-Nachbildung nimmt die halbe
 * Breite ein, davon geht die Seitenspalte ab - bei vier Spalten bleiben
 * je rund siebzig Pixel. "BEGLEITUNGSMODELL" brach dort mitten im Wort
 * zu "BEGLEITUN GSMODELL", "Begleitung" zu "Begleit ung". Vier Spalten
 * passen in dieser Spalte auf keinem Bildschirm; die Regel gilt deshalb
 * ohne Breakpoint und nicht erst ab 1240px.
 */

/*
 * Nur zwischen Handy und Desktop.
 *
 * Ohne die untere Grenze griff diese Regel auch bei 390px - und stand
 * dort HINTER der Mobilregel, die auf eine Spalte stellt. Gemessen:
 * die Seitenspalte nahm 124px von 335px und zeigte davon "Übersicht"
 * und den Anfang von "Agenda"; die restlichen drei Einträge lagen
 * ausserhalb, und der Inhalt musste sich mit 209px begnügen.
 */
@media (min-width:901px) and (max-width:1240px){
  .hw-cockpit-body{grid-template-columns:minmax(0,124px) minmax(0,1fr)}
  .hw-cockpit-nav span{font-size:12px;padding:9px 10px}
}

/* =========================================================================
 * 20  Nachtrag — Korrekturen am Hero (Durchsicht 28.08.2026)
 * ===================================================================== */

/* Luft zwischen den Knöpfen und der Vertrauenszeile.
   Der goldene Knopf trägt einen Schein, der optisch nach unten reicht -
   38px sahen deshalb aus wie 20. */
.hw-vertrauen{margin-top:52px}

/*
 * Die drei Punkte stehen auf einer Linie.
 *
 * Vorher brach der dritte um und die Zeile sah aus wie eine Liste, die
 * nicht fertig geworden ist. Ab 1200px ist die Textspalte breit genug
 * für alle drei nebeneinander; darunter darf sie weiter umbrechen -
 * erzwungenes Nebeneinander auf dem Handy wäre schlechter als ein
 * Umbruch.
 */
@media (min-width:1200px){
  .hw-vertrauen{flex-wrap:nowrap;gap:0 22px}
  .hw-vertrauen li{white-space:nowrap;font-size:13px;padding-left:20px}
}

/*
 * Die Bildunterschrift lag hinter dem Cockpit.
 *
 * Der Bildschirm ist um zwei Grad nach hinten gekippt (rotateX). Das
 * Layout rechnet mit der ungekippten Höhe, gezeichnet wird die gekippte -
 * die Karte ragt also nach unten über ihren eigenen Kasten hinaus und
 * legte sich über den Text. 16px Abstand reichten dafür nicht.
 */
.hw-cockpit-huelle .hw-bildunterschrift{margin-top:38px}

/* Profilbild im Cockpit: Silhouette statt Initialen. */
.hw-cockpit-avatar{overflow:hidden;background:#E9EDF7}
.hw-cockpit-avatar svg{width:100%;height:100%;fill:#B9C4DE}

/* Qualitätsstufe mit dem Fuchs. */


/* Mehr Luft zwischen Kartenreihe und Schlusssatz. */
.hw-satz{margin-top:clamp(64px,6vw,88px)}

/*
 * Die Bildunterschrift lag hinter dem Cockpit.
 *
 * Der Bildschirm ist um zwei Grad nach hinten gekippt (rotateX). Das
 * Layout rechnet mit der ungekippten Höhe, gezeichnet wird die gekippte -
 * die Karte ragt also nach unten über ihren eigenen Kasten hinaus.
 * Gemessen blieben mit 38px noch 27px sichtbarer Abstand; 56px ergeben
 * die Luft, die die anderen Bildunterschriften auch haben.
 */
.hw-cockpit-huelle .hw-bildunterschrift{margin-top:56px}

/*
 * Die Qualitätsstufe zeigt den Fuchs, nicht ein abstraktes Zeichen.
 *
 * Bronze, Silber, Gold und Platin sind im Office als Fuchs sichtbar -
 * wer die Stufe auf der Website kennenlernt, soll dasselbe Bild
 * wiedererkennen. Die Dateien kommen aus derselben Zuordnung wie das
 * Cockpit, deshalb steht hier nur die Grösse.
 */
.hw-qual-fuchs{display:block;width:72px;height:72px;margin:0 auto 16px;object-fit:contain}

/* =========================================================================
 * 21  Cockpit-Nachbildung — Breite des Containers, nicht des Fensters
 * ===================================================================== */

/*
 * Die Nachbildung steht je nach Seite in einer halben, einer ganzen oder
 * einer schmalen Spalte. Was in ihr passt, hängt deshalb an ihrer eigenen
 * Breite und nicht an der des Fensters - eine Media Query trifft hier
 * regelmässig daneben. Container Queries fragen genau das Richtige;
 * Browser ohne Unterstützung bekommen die Grundwerte, die für sich schon
 * eng genug gesetzt sind.
 */
.hw-cockpit-inhalt{container-type:inline-size}

/*
 * Gemessen: "grid-auto-columns:1fr" ist minmax(auto,1fr) - die Spalten
 * wachsen also auf ihren Inhalt, sobald der nicht mehr hineinpasst.
 * Bei 213px Bandbreite und 216px Text standen "Start Aufbau Gestaltung
 * Sicherung Pension" ohne jeden Zwischenraum aneinander. minmax(0,1fr)
 * erlaubt den Spalten zu schrumpfen und hält sie gleich breit.
 */
.hw-cockpit-wegnamen{grid-auto-columns:minmax(0,1fr)}

.hw-cockpit-kpis small{letter-spacing:.06em}

@container (max-width:330px){
  .hw-cockpit-kpis small{font-size:8px;letter-spacing:.03em}
  .hw-cockpit-kpis strong{font-size:15px}
  .hw-cockpit-inhalt{padding:14px;gap:12px}
}

@container (max-width:250px){
  .hw-cockpit-kpis{grid-template-columns:1fr}
}

/* =========================================================================
 * 22  Fusszeile — eine Linie, ein Standort
 * ===================================================================== */

/*
 * Die Spaltentitel stehen auf der Linie der Wortmarke.
 *
 * Die Markenspalte beginnt mit einem 40px hohen Fuchs, die anderen mit
 * einer 11.5px hohen Überschrift. Oben ausgerichtet ergab das drei
 * verschiedene Anfangslinien in einer Reihe, die als Reihe gelesen wird.
 * Der Titel bekommt deshalb die Höhe des Logos und sitzt darin mittig -
 * damit fluchtet er mit "HELVANTA" statt mit dessen Oberkante.
 */
.hw-fuss-spalte h3{display:flex;align-items:center;min-height:40px;margin-bottom:12px}
/* Die Markenspalte hat statt einer Ueberschrift das Logo. Damit ihr Text
   auf derselben Linie beginnt wie der erste Link der Nachbarspalten,
   bekommt die Logozeile dieselbe Hoehe und denselben Abstand darunter -
   plus die 6 px, die die Links als Innenabstand tragen.
   Gemessen: vorher begann der Text 24 px zu hoch.
   (0,2,1), sonst gewinnt der Absatz-Reset .hw p:not([class]).) */
.hw .hw-fuss-marke .hw-marke{min-height:40px;margin-bottom:12px}
.hw .hw-fuss-marke p{margin:0;padding-top:6px}


.hw-fuss-adresse{font-style:normal;font-size:14.5px;line-height:1.7;
  color:rgba(255,255,255,.72);padding:6px 0}
.hw-fuss-karte{margin-top:10px;font-weight:700}
.hw-fuss-karte::after{content:"→";margin-left:6px;transition:none}

/*
 * Die kleine Schrift für den Lebensweg erst, wo es wirklich eng wird.
 *
 * Bei 330px galt sie auch auf dem Handy, wo der Inhalt seit dem Wegfall
 * der Seitenspalte 297px hat - dort waren 8px unnötig klein.
 */
@container (max-width:270px){
  .hw-cockpit-wegnamen i{font-size:8px;letter-spacing:-.03em}
}

/* =========================================================================
 * 23  Preiskarten auf gemeinsamen Linien
 * ===================================================================== */

/*
 * Vier Karten, vier verschieden lange Texte - und damit vier
 * verschiedene Höhen für Claim, Beschreibung und Trennlinie. Die Reihe
 * las sich als vier Einzelkarten statt als ein Vergleich, obwohl genau
 * der Vergleich ihr Zweck ist.
 *
 * subgrid löst das an der Wurzel: die Karten übernehmen die Zeilen des
 * Elternrasters, dessen Zeilenhöhe sich am jeweils längsten Inhalt aller
 * vier Karten bemisst. Titel, Preis, Claim, Beschreibung und Liste
 * stehen damit auf gemeinsamen Linien, ohne dass irgendwo eine feste
 * Höhe in Pixeln steht, die beim nächsten Textwechsel falsch wird.
 *
 * Nur für die Begleitungsmodelle: die Partnerkarten tragen je nach Stufe
 * zusätzliche Hinweise und haben deshalb nicht überall gleich viele
 * Zeilen.
 */
/*
 * Nur im mehrspaltigen Layout.
 *
 * Unter 900px steht jede Karte in einer eigenen Zeile. "grid-row:1/span 5"
 * würde alle vier in Zeile 1 zwingen - also übereinander.
 */
@media (min-width:901px){
@supports (grid-template-rows: subgrid){
  .hw-preise[data-hw-preise]{grid-template-rows:auto auto auto auto 1fr;
    column-gap:20px;row-gap:0}
  .hw-preise[data-hw-preise] > .hw-preis{display:grid;grid-row:1/span 5;
    grid-template-rows:subgrid;align-content:start}
}
}

/* Das Profilbild füllt den Kreis. */
.hw-cockpit-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}

/*
 * Die Partnerkarten fluchten ebenso.
 *
 * Gemessen: Claim auf einer Linie, die Trennlinie über der Leistungs-
 * liste aber 23px versetzt, weil ein Leitsatz eine Zeile kürzer ist.
 * Hier braucht es zwei Zeilen mehr als bei den Begleitungsmodellen:
 * je nach Stufe stehen unter der Liste noch Hinweise zur Provision und
 * zur Vergabe. Karten ohne diese Hinweise lassen die Zeilen leer, die
 * damit auf null zusammenfallen.
 */
@media (min-width:901px){
@supports (grid-template-rows: subgrid){
  .hw-preise-vier{grid-template-rows:auto auto auto auto auto 1fr auto auto;
    column-gap:20px;row-gap:0}
  .hw-preise-vier > .hw-preis{display:grid;grid-row:1/span 8;
    grid-template-rows:subgrid;align-content:start}
}
}

/*
 * Der Fuchs steht für die Qualitätsstufe.
 *
 * Vorher stand "Gold" als Wort daneben. Wer die vier Stufen kennt, liest
 * den Fuchs schneller als das Wort - und "Stufe 3 von 4" darunter sagt
 * ohnehin, wo man steht. Der Fuchs ist deshalb so gross wie die Zahl in
 * den Nachbarkacheln, nicht so klein wie ein Aufzählungszeichen.
 */
.hw-cockpit-fuchs{display:block;width:38px;height:38px;margin:6px 0 2px;object-fit:contain}
@container (max-width:330px){
  .hw-cockpit-fuchs{width:32px;height:32px}
}

/*
 * Vier Stufennamen statt fünf Lebenswegphasen.
 *
 * "Mitglied · Zusammenarbeit · Netzwerkpartner · Strategischer Partner"
 * ist deutlich mehr Text als "Start · Aufbau · Gestaltung · Sicherung ·
 * Pension" auf einer nur wenig breiteren Fläche - die Namen standen
 * ohne Zwischenraum aneinander. Sie dürfen hier umbrechen und stehen
 * enger gesetzt; die Punkte darüber tragen die Position.
 */
.hw-cockpit-wegstufe{margin-top:10px;text-align:center}
.hw-cockpit-wegstufe strong{display:block;font-family:Sora,sans-serif;font-size:13px;
  font-weight:700;color:var(--blau)}
.hw-cockpit-wegstufe span{display:block;margin-top:2px;font-size:10.5px;color:var(--grau)}

/*
 * Auf dem Handy trägt die Nachbildung nur die aktive Phase.
 *
 * Gemessen: fünf Namen auf der schmalen Inhaltsspalte standen ohne
 * Zwischenraum aneinander ("AufbauGestaltungSicherungPension"). Die
 * Punkte zeigen die Position; der Name darunter sagt, welche es ist —
 * dieselbe Lösung wie im Partner Office.
 */
/*
 * Ob alle fünf Phasen Platz haben, hängt am Container, nicht am Fenster.
 *
 * Seit die Seitenspalte auf dem Handy entfällt, hat der Inhalt dort 333px
 * statt 150px - genug für "Start · Aufbau · Gestaltung · Sicherung ·
 * Pension". Ausgeblendet wird erst, wo es wirklich eng wird; dann trägt
 * die Nachbildung nur die aktive Phase, und die Punkte zeigen den Rest.
 */
@container (max-width:270px){
  .hw-cockpit-wegnamen i{font-size:8.5px}
  .hw-cockpit-wegnamen i:not(.is-hier){visibility:hidden}
  .hw-cockpit-wegnamen .is-hier{font-size:12px}
}

/*
 * Der Burger gehört uns, in jedem Zustand.
 *
 * Gemessen: color war rgb(204,51,102) — ein Pink aus einer fremden
 * Regel, das im angetippten Zustand als Fläche sichtbar wurde. Seit die
 * Seite die Elementor- und Block-Stile nicht mehr lädt, steht nichts
 * mehr dazwischen, was das zufällig überschrieb. Ein Bedienelement der
 * Marke darf seine Farbe nicht von fremdem CSS geliehen bekommen.
 */
.hw-burger,.hw-burger:hover,.hw-burger:focus,.hw-burger:active,
.hw-burger:focus-visible,.hw-burger.is-offen{
  background:transparent;color:#fff;
  border:1px solid rgba(255,255,255,.24);box-shadow:none;outline:none}
.hw-burger:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hw-burger span{background:#fff}