/* =========================================================================
   Cura Group: Design-System
   Marke: Open Sans (lt. Brand-Portfolio), Farbstufen pro Gesellschaft.
   Jede Seite setzt <html data-brand="group|wealth|insurance|properties">.
   ========================================================================= */

/* ---------- Schriften und Icons (seit v96 hier statt in eigenen Dateien: ein Stylesheet weniger, das das Rendern blockiert) ---------- */
/* Open Sans (variabel: wdth 75-100, wght 300-800), lokal gehostet. Lizenz: SIL Open Font License 1.1, siehe assets/fonts/OFL.txt */
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/open-sans-latin-ext-italic.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/open-sans-latin-italic.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/open-sans-latin-ext-normal.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 75% 100%;
  font-display: swap;
  src: url("../fonts/open-sans-latin-normal.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Phosphor Icons 2.1.1 (Regular), lokal gehostet. Lizenz: MIT, siehe assets/icons/LICENSE.
   Nur die auf der Website benutzten Icons. Neues Icon: Regel aus assets/icons/phosphor.css hierher kopieren. */
/* icons-font */
@font-face {
  font-family: "Phosphor";
  src: url("data:font/woff;base64,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") format("woff");
  font-weight: normal; font-style: normal; font-display: block;
}
/* /icons-font */
.ph {
  font-family: "Phosphor" !important; speak: never; font-style: normal; font-weight: normal; font-variant: normal;
  text-transform: none; line-height: 1; letter-spacing: 0; font-feature-settings: "liga"; font-variant-ligatures: discretionary-ligatures;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.ph.ph-arrow-left:before { content: "\e058"; }
.ph.ph-arrow-right:before { content: "\e06c"; }
.ph.ph-arrow-square-out:before { content: "\e5de"; }
.ph.ph-arrow-up-right:before { content: "\e092"; }
.ph.ph-arrows-clockwise:before { content: "\e094"; }
.ph.ph-arrows-split:before { content: "\ed3c"; }
.ph.ph-bell-simple:before { content: "\e0d0"; }
.ph.ph-buildings:before { content: "\e102"; }
.ph.ph-calendar-check:before { content: "\e712"; }
.ph.ph-caret-down:before { content: "\e136"; }
.ph.ph-chart-line-up:before { content: "\e156"; }
.ph.ph-chats:before { content: "\e17c"; }
.ph.ph-check:before { content: "\e182"; }
.ph.ph-check-circle:before { content: "\e184"; }
.ph.ph-circle-notch:before { content: "\eb44"; }
.ph.ph-compass:before { content: "\e1c8"; }
.ph.ph-cursor-click:before { content: "\e7c8"; }
.ph.ph-door-open:before { content: "\e7e6"; }
.ph.ph-eye:before { content: "\e220"; }
.ph.ph-folders:before { content: "\e260"; }
.ph.ph-handshake:before { content: "\e582"; }
.ph.ph-house-line:before { content: "\e2c4"; }
.ph.ph-key:before { content: "\e2d6"; }
.ph.ph-lifebuoy:before { content: "\e63a"; }
.ph.ph-lightbulb:before { content: "\e2dc"; }
.ph.ph-list:before { content: "\e2f0"; }
.ph.ph-magnifying-glass:before { content: "\e30c"; }
.ph.ph-map-pin:before { content: "\e316"; }
.ph.ph-megaphone:before { content: "\e324"; }
.ph.ph-paper-plane-tilt:before { content: "\e398"; }
.ph.ph-phone:before { content: "\e3b8"; }
.ph.ph-puzzle-piece:before { content: "\e596"; }
.ph.ph-receipt:before { content: "\e3ec"; }
.ph.ph-rocket-launch:before { content: "\e3fe"; }
.ph.ph-ruler:before { content: "\e6b8"; }
.ph.ph-scales:before { content: "\e750"; }
.ph.ph-shield-check:before { content: "\e40c"; }
.ph.ph-signature:before { content: "\ebac"; }
.ph.ph-sun-horizon:before { content: "\e5b6"; }
.ph.ph-target:before { content: "\e47c"; }
.ph.ph-trend-up:before { content: "\e4ae"; }
.ph.ph-trophy:before { content: "\e67e"; }
.ph.ph-umbrella:before { content: "\e684"; }
.ph.ph-user-circle:before { content: "\e4c4"; }
.ph.ph-users:before { content: "\e4d6"; }
.ph.ph-users-three:before { content: "\e68e"; }
.ph.ph-x:before { content: "\e4f6"; }
/* ---------- Markenfarben (aus 02_CG_Portfolio.pdf) ---------- */
:root,
[data-brand="group"] {
  --b900: #001f16; --b800: #00352b; --b700: #005346; --b600: #007866; --b500: #008e79;
  --b-bright: #12b39a;
}
[data-brand="wealth"] {
  --b900: #000b25; --b800: #00203e; --b700: #003761; --b600: #00528c; --b500: #0062a7;
  --b-bright: #3d93d6;
}
[data-brand="insurance"] {
  --b900: #230014; --b800: #37002a; --b700: #520644; --b600: #751265; --b500: #8b1878;
  --b-bright: #c04aac;
}
[data-brand="properties"] {
  --b900: #330100; --b800: #500800; --b700: #770f00; --b600: #ae0f0a; --b500: #d20a10;
  --b-bright: #ff4a3d;
}
/* Circle: Gold aus dem Logo des Flyers (#6a3300 → #af6b00 → #d69400) */
[data-brand="circle"] {
  --b900: #241200; --b800: #3d2000; --b700: #6a3300; --b600: #8f5200; --b500: #af6b00;
  --b-bright: #d69400;
}

/* Farben der Gesellschaften, für Querverweise auf jeder Seite verfügbar */
:root {
  --c-group: #008e79; --c-group-d: #00352b;
  --c-wealth: #0062a7; --c-wealth-d: #00203e;
  --c-insurance: #8b1878; --c-insurance-d: #37002a;
  --c-properties: #d20a10; --c-properties-d: #500800;
  --c-circle: #af6b00; --c-circle-d: #3d2000;
}

/* ---------- Semantische Tokens: Hell ---------- */
:root {
  --bg: color-mix(in oklab, var(--b500) 4%, #fafaf8);
  --bg-2: color-mix(in oklab, var(--b500) 9%, #f3f3f1);
  --bg-3: color-mix(in oklab, var(--b500) 16%, #ecece9);
  --ink: color-mix(in oklab, var(--b900) 55%, #121212);
  --ink-2: color-mix(in oklab, var(--b900) 30%, #4a4d4c);
  --ink-3: color-mix(in oklab, var(--b900) 20%, #6c706e);
  --line: color-mix(in oklab, var(--ink) 14%, transparent);
  --line-strong: color-mix(in oklab, var(--ink) 28%, transparent);
  --accent: var(--b600);              /* Flächen, Buttons (weisse Schrift) */
  --accent-ink: var(--b700);          /* Akzent als Textfarbe */
  --accent-soft: color-mix(in oklab, var(--b500) 14%, transparent);
  --on-accent: #ffffff;
  --contour: var(--b600);
  --contour-alpha: 0.22;
  --surface-dark: var(--b900);        /* Bewusst dunkle Flächen (Hero-Bild-Scrims) */
  --shadow: 0 24px 60px -24px color-mix(in oklab, var(--b900) 35%, transparent);
  --mark-ink: var(--ink);
  color-scheme: light;
}

/* ---------- Semantische Tokens: Dunkel (folgt der Systemeinstellung, kein Umschalter) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg: color-mix(in oklab, var(--b900) 78%, #060606);
    --bg-2: color-mix(in oklab, var(--b900) 70%, var(--b800));
    --bg-3: color-mix(in oklab, var(--b800) 80%, var(--b700));
    --ink: color-mix(in oklab, var(--b500) 6%, #f2f3f1);
    --ink-2: color-mix(in oklab, var(--b500) 10%, #c3c7c5);
    --ink-3: color-mix(in oklab, var(--b500) 12%, #9a9f9d);
    --line: color-mix(in oklab, var(--ink) 13%, transparent);
    --line-strong: color-mix(in oklab, var(--ink) 26%, transparent);
    --accent: var(--b600);
    --accent-ink: color-mix(in oklab, var(--b-bright) 70%, #ffffff);
    --accent-soft: color-mix(in oklab, var(--b500) 22%, transparent);
    --contour: var(--b-bright);
    --contour-alpha: 0.2;
    --shadow: 0 24px 60px -24px rgb(0 0 0 / 0.6);
    color-scheme: dark;
  }
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  transition: background-color .4s ease, color .4s ease;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
button, input, textarea, select { font: inherit; color: inherit; }
/* <picture> (WebP mit JPG als Rückfall) ohne eigene Box: das <img> darin verhält sich wie bisher */
picture { display: contents; }
::selection { background: var(--accent); color: var(--on-accent); }
:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 3px; border-radius: 4px; }

.skip-link {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--accent); color: var(--on-accent); padding: .6rem 1rem; border-radius: 999px;
}
.skip-link:focus { top: 12px; }

.wrap { width: min(1360px, 100% - 32px); margin-inline: auto; }
@media (min-width: 768px) { .wrap { width: min(1360px, 100% - 64px); } }

/* ---------- Typografie ---------- */
.display, h1, h2, h3 {
  font-family: "Open Sans", system-ui, sans-serif;
  font-stretch: 84%;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1.04;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: clamp(2.9rem, 7.4vw, 7rem); }
h2 { font-size: clamp(2.3rem, 5.2vw, 4.9rem); }
h3 { font-size: clamp(1.4rem, 2.1vw, 1.9rem); line-height: 1.12; }
.light { font-weight: 300; font-stretch: 100%; letter-spacing: 0; }
.accent { color: var(--accent-ink); }
.lead {
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 300;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 44ch;
  margin: 0;
}
p { margin: 0; max-width: 65ch; }
.muted { color: var(--ink-2); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .98rem; font-weight: 700; letter-spacing: 0;
  color: var(--accent-ink);
  margin: 0 0 1.4rem;
}
/* Normale Schreibweise; ein kurzer grafischer Strich in der Firmenfarbe markiert die Zeile */
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: currentColor; flex: none; }
.eyebrow svg { width: 26px; height: auto; }

/* ---------- Buttons ---------- */
.btn {
  --btn-bg: var(--accent); --btn-fg: var(--on-accent);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .65rem;
  padding: .95rem 1.5rem; border-radius: 999px; border: 0;
  background: var(--btn-bg); color: var(--btn-fg);
  font-weight: 700; font-size: 1rem; line-height: 1; white-space: nowrap;
  text-decoration: none; cursor: pointer;
  transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: color-mix(in oklab, var(--btn-bg) 78%, #000);
  transform: translateY(101%); transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.btn:hover::before { transform: translateY(0); }
.btn:hover { box-shadow: 0 14px 30px -14px color-mix(in oklab, var(--btn-bg) 80%, transparent); }
.btn:active { transform: scale(.98) translateY(1px); }
.btn i { font-size: 1.15em; transition: transform .35s cubic-bezier(.16,1,.3,1); }
.btn:hover i { transform: translateX(3px); }
.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--ink);
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
}
.btn--ghost::before { background: var(--accent-soft); }
.btn--ghost:hover { box-shadow: inset 0 0 0 1.5px var(--accent-ink); }
.btn--light { --btn-bg: #f6f7f5; --btn-fg: var(--b900); }
.btn--light::before { background: #ffffff; }
.btn-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.text-link {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; color: var(--accent-ink); text-decoration: none;
}
.text-link i { transition: transform .3s cubic-bezier(.16,1,.3,1); }
.text-link:hover i { transform: translateX(4px); }

/* ---------- Logo ---------- */
/* Original-Logos aus 02_CG_Portfolio.pdf: Zeichen bzw. Flügel über dem Schriftzug (Noto Sans Medium als Pfade, Symbol #logo in jeder Seite).
   Grösse über font-size: 1em = Schriftgrösse des Schriftzugs, --lw/--lh = Breite/Höhe des Logos in em (stehen am <svg>) */
.logo { display: inline-flex; align-items: center; text-decoration: none; color: var(--mark-ink); font-size: 16px; line-height: 0; }
.logo__img { display: block; flex: none; width: calc(var(--lw) * 1em); height: calc(var(--lh) * 1em); overflow: visible; }
.footer .logo { font-size: 19px; }
.menu__top .logo { font-size: 14px; }

/* ---------- Navigation ---------- */
/* Immer derselbe Hintergrund, in der Farbe der Gesellschaft hinterlegt (über --bg) */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  transition: transform .5s cubic-bezier(.16,1,.3,1);
  background: color-mix(in oklab, var(--bg) 96%, var(--b500));
  box-shadow: 0 1px 0 var(--line);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav__inner { height: 72px; display: flex; align-items: center; gap: 1.5rem; }
/* <nav aria-label="Hauptnavigation"> um die Liste (seit v96); unter 1240 px ausgeblendet wie bisher die Liste */
.nav__main { display: none; margin-left: auto; }
.nav__links { display: none; align-items: center; gap: .25rem; margin-left: auto; list-style: none; padding: 0; margin-block: 0; }
.nav__links a {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .55rem .8rem; border-radius: 999px;
  font-size: .94rem; font-weight: 600; text-decoration: none; color: var(--ink-2);
  transition: color .25s ease, background-color .25s ease;
  white-space: nowrap;
}
.nav__links a:hover, .nav__links a[aria-current="page"] { color: var(--ink); background: var(--accent-soft); }
.nav__links .co-swoosh { width: 24px; height: auto; }
.nav__actions { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.icon-btn {
  display: inline-grid; place-items: center; width: 42px; height: 42px; border-radius: 999px;
  border: 0; background: transparent; color: var(--ink); cursor: pointer; font-size: 1.25rem;
  text-decoration: none;
  transition: background-color .25s ease;
}
.icon-btn:hover { background: var(--accent-soft); }
.nav .btn { padding: .75rem 1.15rem; font-size: .92rem; display: none; }
.nav__burger { display: inline-grid; }
.nav__login-label { display: none; }
/* Ab 1240 px volles Menüband (sechs Einträge seit Cura Circle), darunter Handy-Menü */
@media (min-width: 1240px) {
  .nav__main { display: block; }
  .nav__links { display: flex; }
  .nav__main + .nav__actions, .nav__links + .nav__actions { margin-left: .5rem; }
  .nav .btn { display: inline-flex; }
  .nav__burger { display: none; }
}
@media (min-width: 1440px) {
  .nav__login { width: auto; padding: 0 .8rem; gap: .4rem; font-size: .94rem; font-weight: 600; color: var(--ink-2); display: inline-flex; align-items: center; }
  .nav__login-label { display: inline; }
}

@media (max-width: 440px) {
  .nav__inner { gap: .75rem; }
  .nav .logo { font-size: 14px; }
  .nav__login { display: none; }
}

/* Mobile-Menü */
.menu {
  position: fixed; inset: 0; z-index: 60;
  background: var(--bg);
  display: flex; flex-direction: column;
  padding: 16px;
  clip-path: circle(0% at calc(100% - 37px) 36px);
  visibility: hidden;
  transition: clip-path .7s cubic-bezier(.77,0,.18,1), visibility 0s linear .7s;
}
.menu.is-open { clip-path: circle(150% at calc(100% - 37px) 36px); visibility: visible; transition: clip-path .7s cubic-bezier(.77,0,.18,1); }
.menu__top { display: flex; align-items: center; justify-content: space-between; height: 56px; }
.menu__list { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: .3rem; }
.menu__list a {
  display: flex; align-items: center; gap: .9rem; padding: .55rem 0;
  font-size: clamp(2rem, 9vw, 3rem); font-weight: 800; font-stretch: 84%; letter-spacing: 0;
  text-decoration: none; line-height: 1.05;
}
.menu__list a svg { width: 34px; height: auto; }
.menu__foot { margin-top: auto; display: grid; gap: 1rem; padding-bottom: 8px; }
.menu__foot .btn { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .menu, .menu.is-open { transition: none; } }

/* ---------- Topografie-Canvas ---------- */
.topo { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

/* ---------- Abschnitte ---------- */
section { position: relative; }
.section { padding-block: clamp(5rem, 11vw, 10rem); }
.section--tight { padding-block: clamp(4rem, 8vw, 7rem); }
.section--alt { background: var(--bg-2); }
.stack > * + * { margin-top: 1.5rem; }
.stack-lg > * + * { margin-top: 2.5rem; }

/* Reveal-Animationen */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] {
    opacity: 0; transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
    transition-delay: calc(var(--i, 0) * 80ms);
  }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
  .js [data-reveal="clip"] { opacity: 1; transform: none; clip-path: inset(0 0 100% 0); transition: clip-path 1.2s cubic-bezier(.77,0,.18,1); }
  .js [data-reveal="clip"].is-in { clip-path: inset(0 0 0 0); }
  /* Im ersten Abschnitt (Hero) startet das Einblenden per CSS sofort beim ersten Bild,
     ohne auf JavaScript zu warten. Sonst erscheint der Hero-Text spät (Largest Contentful Paint). */
  .js main > section:first-child [data-reveal]:not([data-reveal="clip"]) {
    opacity: 1; transform: none; transition: none;
    animation: heroIn .9s cubic-bezier(.16,1,.3,1) both;
    animation-delay: calc(var(--i, 0) * 50ms);
  }
}
@keyframes heroIn { from { opacity: 0; transform: translateY(28px); } }

/* Rückfall ohne cura.js (seit v98): Das Inline-Skript im <head> setzt "js", cura.js zusätzlich "js-ok".
   Fehlt "js-ok" nach 3 s (Skript nicht geladen oder abgebrochen), werden versteckte Inhalte trotzdem
   sichtbar, u. a. das Kontaktformular. Läuft cura.js, greift diese Regel nicht. */
@keyframes jsFallback { to { opacity: 1; transform: none; clip-path: inset(0 0 0 0); } }
@keyframes jsFallbackPeak { to { clip-path: polygon(0% 100%, 50% 0%, 100% 100%); } }
@keyframes jsFallbackRing { to { clip-path: circle(50% at 50% 50%); } }
.js:not(.js-ok) [data-reveal], .js:not(.js-ok) .split-line > span,
.js:not(.js-ok) .peak-img svg.peak-swoosh, .js:not(.js-ok) .ring-orbit { animation: jsFallback .6s ease 3s forwards; }
.js:not(.js-ok) .peak-img img { animation: jsFallbackPeak .6s ease 3s forwards; }
.js:not(.js-ok) .ring-img img { animation: jsFallbackRing .6s ease 3s forwards; }

/* Wort-für-Wort-Animation in Hero-Titeln */
.split-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.split-line > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .split-line > span { transform: translateY(105%); transition: transform 1.1s cubic-bezier(.16,1,.3,1); transition-delay: calc(var(--i, 0) * 110ms + 150ms); }
  .js .is-ready .split-line > span { transform: none; }
}

/* =========================================================================
   HERO (Gruppe)
   ========================================================================= */
.hero {
  position: relative; min-height: 100dvh; display: flex; align-items: center;
  padding-block: 112px 64px; overflow: hidden; isolation: isolate;
}
.hero__grid { position: relative; z-index: 1; display: grid; gap: 2.5rem; align-items: center; }
.hero__copy { display: grid; gap: 1.75rem; max-width: 760px; }
.hero__mark { width: min(78vw, 360px); justify-self: start; order: -1; }
@media (min-width: 900px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; }
  .hero__mark { order: 0; width: 100%; max-width: 520px; justify-self: end; }
}
.hero__mark svg { width: 100%; height: auto; overflow: visible; }
/* Längerer Titel der Gruppe: drei Zeilen, ab Tablet je Zeile ohne Umbruch */
.hero h1.h1--group { font-size: clamp(2.2rem, 4.4vw, 4.1rem); }
@media (min-width: 900px) { .hero h1.h1--group .split-line { white-space: nowrap; } }
.hero__mark .draw { fill: transparent; stroke: var(--accent-ink); stroke-width: .7; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero__mark .draw { stroke-dasharray: var(--len, 1200); stroke-dashoffset: var(--len, 1200); transition: stroke-dashoffset 2.4s cubic-bezier(.65,0,.35,1), fill 1.2s ease 1.9s, stroke-opacity 1s ease 2.2s; }
  .js .is-ready .hero__mark .draw { stroke-dashoffset: 0; }
}
.is-ready .hero__mark .draw.f-peak { fill: url(#g-peak); stroke-opacity: 0; }
.is-ready .hero__mark .draw.f-swoosh { fill: url(#g-swoosh); stroke-opacity: 0; }
.is-ready .hero__mark .draw.f-leg { fill: var(--b500); stroke-opacity: 0; } /* #008e79 wie im Portfolio */
.hero__meta {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 28px;
  display: none;
}
@media (min-width: 900px) { .hero__meta { display: block; } }
.hero__meta .wrap { display: flex; justify-content: space-between; align-items: end; gap: 2rem; color: var(--ink-3); font-size: .88rem; }
.coords { font-variant-numeric: tabular-nums; letter-spacing: .02em; }

/* =========================================================================
   GESELLSCHAFTEN: Akkordeon-Panels
   ========================================================================= */
.companies-head { display: grid; gap: 1.5rem; margin-bottom: clamp(2.5rem, 5vw, 4rem); max-width: 900px; }
.panels { display: grid; gap: 12px; }
.panel {
  --pc: var(--c-group); --pcd: var(--c-group-d);
  position: relative; overflow: hidden; isolation: isolate;
  border-radius: 20px; min-height: 340px; padding: 28px;
  color: #f5f6f4; text-decoration: none;
  /* --shade dunkelt den hellen Teil des Verlaufs ab, wo der Text sonst unter 4.5:1 fällt (seit v96) */
  background: linear-gradient(rgb(0 0 0 / var(--shade, 0)), rgb(0 0 0 / var(--shade, 0))), linear-gradient(160deg, var(--pc), var(--pcd) 75%);
  display: flex; flex-direction: column; justify-content: space-between; gap: 2rem;
  transition: flex-grow .8s cubic-bezier(.16,1,.3,1), box-shadow .5s ease;
}
.panel--wealth { --pc: var(--c-wealth); --pcd: var(--c-wealth-d); }
.panel--insurance { --pc: var(--c-insurance); --pcd: var(--c-insurance-d); }
.panel--properties { --pc: var(--c-properties); --pcd: var(--c-properties-d); --shade: .1; }
.panel--circle { --pc: var(--c-circle); --pcd: var(--c-circle-d); --shade: .2; }
.panel__swoosh { position: absolute; z-index: -1; right: -18%; bottom: -12%; width: 120%; opacity: .2; transition: transform 1.2s cubic-bezier(.16,1,.3,1), opacity .6s ease; }
.panel__swoosh { fill: #ffffff; }
.panel:hover .panel__swoosh, .panel:focus-visible .panel__swoosh { transform: translate(-6%, -6%) rotate(-4deg); opacity: .3; }
.panel__top { display: flex; justify-content: space-between; align-items: start; gap: 1rem; }
.panel__name { flex: 1 1 0; min-width: 0; font-size: 1.05rem; font-weight: 600; letter-spacing: .01em; opacity: .9; } /* bricht um, Pfeil und Badge bleiben rechts */
.panel__arrow { width: 46px; height: 46px; border-radius: 999px; display: grid; place-items: center; background: rgb(255 255 255 / .14); font-size: 1.2rem; transition: background-color .4s ease, transform .5s cubic-bezier(.16,1,.3,1); flex: none; }
.panel:hover .panel__arrow { background: #fff; color: var(--pcd); transform: rotate(-45deg); }
.panel__title { font-size: clamp(2.1rem, 3.6vw, 3.4rem); font-weight: 800; font-stretch: 84%; letter-spacing: 0; line-height: .98; }
.panel__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: .9rem; } /* Spalte darf schmaler sein als der versteckte Text, sonst wird der Titel abgeschnitten */
.panel__text { color: rgb(255 255 255 / .82); max-width: 34ch; font-size: 1rem; }
.panel__tags { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0; }
.panel__tags li { font-size: .8rem; font-weight: 600; padding: .3rem .65rem; border-radius: 999px; box-shadow: inset 0 0 0 1px rgb(255 255 255 / .3); }
@media (min-width: 1024px) {
  .panels { display: flex; height: 600px; }
  .panel { flex: 1 1 0; min-width: 0; min-height: 0; }
  .panel:hover, .panel:focus-visible, .panel.is-active { flex-grow: 2.3; }
  .panel .panel__extra { opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .6s cubic-bezier(.16,1,.3,1); }
  .panel:hover .panel__extra, .panel:focus-visible .panel__extra, .panel.is-active .panel__extra { opacity: 1; transform: none; transition-delay: .2s; }
  .panel__text { min-width: 30ch; }
}
@media (prefers-reduced-motion: reduce) { .panel, .panel__swoosh, .panel .panel__extra { transition: none !important; } }

/* =========================================================================
   LEBENSSITUATIONEN: interaktive Auswahl
   ========================================================================= */
.life { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .life { grid-template-columns: .9fr 1.1fr; gap: 5rem; align-items: start; } }
.life__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 2rem; }
.chip {
  border: 0; cursor: pointer; padding: .8rem 1.15rem; border-radius: 999px;
  background: var(--bg); color: var(--ink); font-weight: 600; font-size: .98rem;
  box-shadow: inset 0 0 0 1.5px var(--line-strong);
  transition: background-color .3s ease, color .3s ease, box-shadow .3s ease, transform .3s cubic-bezier(.16,1,.3,1);
  display: inline-flex; align-items: center; gap: .5rem;
}
.chip:hover { box-shadow: inset 0 0 0 1.5px var(--accent-ink); }
.chip:active { transform: scale(.97); }
.chip[aria-selected="true"] { background: var(--accent); color: var(--on-accent); box-shadow: none; }
.life__board {
  position: relative; border-radius: 24px; padding: clamp(24px, 3.5vw, 44px);
  background: var(--bg); box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
  min-height: 460px; overflow: hidden;
}
.life__q { font-size: clamp(1.6rem, 2.6vw, 2.3rem); font-weight: 300; letter-spacing: 0; line-height: 1.2; margin-bottom: 2rem; max-width: 26ch; }
.life__q strong { font-weight: 800; font-stretch: 84%; }
.roles { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.role {
  --rc: var(--c-group);
  display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start;
  padding: 18px; border-radius: 16px; background: var(--bg-2);
}
.role--wealth { --rc: var(--c-wealth); }
.role--insurance { --rc: var(--c-insurance); }
.role--properties { --rc: var(--c-properties); }
.role--circle { --rc: var(--c-circle); }
.role__icon { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--rc); }
.role__icon svg { width: 30px; height: auto; }
.role__icon svg { fill: #fff; }
.role__co { font-size: .82rem; font-weight: 700; color: var(--ink-3); }
.role__text { font-weight: 600; line-height: 1.4; }
@media (prefers-reduced-motion: no-preference) {
  .role { animation: roleIn .7s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(var(--i, 0) * 90ms); }
  .life__q { animation: roleIn .6s cubic-bezier(.16,1,.3,1) both; }
}
@keyframes roleIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* =========================================================================
   STORY: Vollbild-Foto mit Kennzahlen
   ========================================================================= */
.story { position: relative; min-height: 92dvh; display: flex; align-items: end; color: #f4f5f3; overflow: hidden; isolation: isolate; }
.story__img { position: absolute; inset: -8% 0; z-index: -2; }
.story__img img { width: 100%; height: 100%; object-fit: cover; }
.story::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in oklab, var(--b900) 20%, transparent) 0%, color-mix(in oklab, var(--b900) 55%, transparent) 45%, color-mix(in oklab, var(--b900) 94%, #000) 100%); }
.story__inner { padding-block: 8rem 4.5rem; display: grid; gap: 3.5rem; }
.story h2 { max-width: 15ch; color: #fff; }
.story .lead { color: rgb(255 255 255 / .82); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2rem; border-top: 1px solid rgb(255 255 255 / .25); padding-top: 2rem; }
.figure__num { font-size: clamp(3rem, 6vw, 5.4rem); font-weight: 800; font-stretch: 84%; letter-spacing: -0.01em; line-height: 1; font-variant-numeric: tabular-nums; }
.figure__label { color: rgb(255 255 255 / .78); margin-top: .5rem; max-width: 22ch; }


/* =========================================================================
   TEAM
   ========================================================================= */
/* Alle Kacheln gleich gross, auf einer Linie */
.team { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); align-items: start; }
@media (min-width: 900px) { .team { grid-template-columns: repeat(3, 1fr); } }
.person { display: grid; gap: 1.1rem; align-content: start; }
.person__photo {
  position: relative; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden;
  background: linear-gradient(160deg, var(--b700), var(--b900));
  display: grid; place-items: center; isolation: isolate;
}
.person__photo canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9; }
/* Porträtfoto: füllt die Kachel und deckt Höhenlinien und Initialen ab */
.person__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
.person__initials { font-size: clamp(5rem, 11vw, 8.5rem); font-weight: 800; font-stretch: 75%; letter-spacing: -0.01em; color: rgb(255 255 255 / .92); line-height: 1; }
.person__name { font-size: 1.5rem; font-weight: 800; font-stretch: 84%; letter-spacing: 0; }
.person__role { color: var(--accent-ink); font-weight: 600; font-size: .95rem; }
.person__text { color: var(--ink-2); font-size: 1rem; }

/* --- Über uns der Gesellschaften: Text + Eckdaten links, Person oder Kennzahl rechts --- */
.about { display: grid; gap: 3rem; align-items: start; }
@media (min-width: 960px) { .about { grid-template-columns: 1.25fr .75fr; gap: 5rem; } }
.about h2 { max-width: 16ch; }
.about__text { color: var(--ink-2); font-size: 1.08rem; max-width: 60ch; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem 2rem; margin: 0; padding-top: 1.75rem; border-top: 1px solid var(--line); }
.facts dt { font-size: .9rem; font-weight: 600; color: var(--ink-3); }
.facts dd { margin: .3rem 0 0; color: var(--ink); font-weight: 600; }
.about__col { display: grid; gap: 1.75rem; }
.about__side { display: grid; gap: 1.1rem; max-width: 420px; }
.about__meta { display: grid; gap: 1.1rem; }
/* Desktop: zwei gemeinsame Zeilen. Die Kachel reicht vom Titel bis genau zur Linie über den Eckdaten. */
@media (min-width: 960px) {
  .about { grid-template-rows: auto auto; row-gap: 0; }
  .about__col, .about__side { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  .about__intro { padding-bottom: 2.25rem; }
  .about__side .person__photo { aspect-ratio: auto; height: 100%; min-height: 360px; }
  .about__meta { padding-top: 1.75rem; }
}
/* Zwei Ansprechpartner nebeneinander; jede Kachel reicht ebenfalls genau bis zur Linie */
.about__side--duo { max-width: none; grid-template-columns: 1fr 1fr; column-gap: 20px; }
.about__side--duo > .person { align-content: start; }
@media (max-width: 359px) { .about__side--duo { grid-template-columns: 1fr; } }
@media (max-width: 599px) { .about__side--duo { column-gap: 12px; } .about__side--duo .person__initials { font-size: clamp(3rem, 14vw, 5rem); } }
@media (min-width: 960px) {
  .about:has(.about__side--duo) { grid-template-columns: 1fr 1fr; }
  .about__side--duo > .person { grid-row: span 2; display: grid; grid-template-rows: subgrid; row-gap: 0; }
  /* Porträtformat 4:5 behalten, unten bündig mit der Linie statt bis zum Titel gestreckt */
  .about__side--duo .person__photo { aspect-ratio: 4 / 5; height: auto; min-height: 0; align-self: end; }
}

/* =========================================================================
   KONTAKT
   ========================================================================= */
.contact { display: grid; gap: 3rem; }
@media (min-width: 1024px) { .contact { grid-template-columns: .85fr 1.15fr; gap: 5rem; } }
.contact__info { display: grid; gap: 2rem; align-content: start; }
.contact__lines { display: grid; gap: 1.1rem; }
.contact__line { display: flex; gap: .9rem; align-items: start; text-decoration: none; }
.contact__line i { font-size: 1.4rem; color: var(--accent-ink); margin-top: .1rem; }
.contact__line strong { display: block; font-size: 1.15rem; }
.contact__line span { color: var(--ink-2); }
a.contact__line:hover strong { text-decoration: underline; text-underline-offset: .2em; }
.form {
  background: var(--bg); border-radius: 24px; padding: clamp(22px, 3.5vw, 44px);
  box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
  display: grid; gap: 1.2rem;
}
.section--alt .form { background: var(--bg); }
.form__row { display: grid; gap: 1.2rem; }
@media (min-width: 640px) { .form__row { grid-template-columns: 1fr 1fr; } }
.field { display: grid; gap: .45rem; }
.field label { font-weight: 600; font-size: .92rem; }
.field label .req { color: var(--accent-ink); }
.field input, .field textarea, .field select {
  width: 100%; padding: .9rem 1rem; border-radius: 12px; border: 1.5px solid var(--field-line);
  background: var(--bg-2); color: var(--ink); font-size: 1rem;
  transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease;
}
.field textarea { min-height: 140px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-3); }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--accent-ink); box-shadow: 0 0 0 4px var(--accent-soft); background: var(--bg); }
.field .help { font-size: .84rem; color: var(--ink-3); }
/* Feldrahmen mit mindestens 3:1 Kontrast zum Feld- und Seitenhintergrund (WCAG 1.4.11), seit v96 */
.field { --field-line: color-mix(in srgb, var(--ink) 50%, transparent); }
.form__req { margin: 0; font-size: .84rem; color: var(--ink-3); }
.field .error { font-size: .86rem; color: #c4122f; font-weight: 600; display: none; }
@media (prefers-color-scheme: dark) { .field .error { color: #ff8a8a; } }
.field.has-error input, .field.has-error textarea { border-color: #c4122f; }
.field.has-error .error { display: block; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin-top: .4rem; }
.form__foot small { color: var(--ink-3); max-width: 40ch; }
.form__success { display: none; text-align: left; gap: 1rem; padding: 1rem 0; }
.form.is-sent > :not(.form__success) { display: none; }
.form.is-sent .form__success { display: grid; }
.form__success i { font-size: 2.6rem; color: var(--accent-ink); }
.btn.is-loading { pointer-events: none; opacity: .8; }
.btn.is-loading i { animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* =========================================================================
   FOOTER
   ========================================================================= */
/* Dunkel in der Farbe der Gesellschaft, damit sich die Fusszeile klar vom letzten Abschnitt abhebt.
   Die Farb-Tokens werden innerhalb der Fusszeile auf helle Schrift umgestellt. */
.footer {
  --ink: #f4f5f3; --ink-2: rgb(255 255 255 / .74); --ink-3: rgb(255 255 255 / .56);
  --line: rgb(255 255 255 / .14); --accent-ink: color-mix(in oklab, var(--b-bright) 65%, #fff);
  position: relative; overflow: hidden; isolation: isolate; padding-block: 5rem 2rem;
  background: radial-gradient(90% 140% at 100% 0%, color-mix(in oklab, var(--b700) 55%, transparent), transparent 60%), var(--b900);
  color: var(--ink);
}
/* Feine Linie in der Markenfarbe als Übergang */
.footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(90deg, var(--b-bright), var(--b600) 45%, transparent 85%); }
@media (prefers-color-scheme: dark) { .footer { background: radial-gradient(90% 140% at 100% 0%, color-mix(in oklab, var(--b700) 40%, transparent), transparent 60%), color-mix(in oklab, var(--b900) 55%, #000); } }
.footer__big {
  font-size: clamp(1.8rem, 9.4vw, 9.2rem); font-weight: 800; font-stretch: 75%; letter-spacing: -0.01em; line-height: 1.05;
  color: var(--accent-ink); opacity: .14; margin-top: 4rem; white-space: nowrap; user-select: none;
}
.footer__grid { display: grid; gap: 2.5rem; }
@media (min-width: 900px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
/* Spaltentitel: seit v96 h2 statt h4 (Reihenfolge der Überschriften), Aussehen unverändert */
.footer h2 { margin: 0 0 1rem; font-size: .95rem; font-weight: 700; font-stretch: 100%; line-height: inherit; text-wrap: wrap; color: var(--ink); }
.footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.footer a { text-decoration: none; color: var(--ink-2); }
.footer a:hover { color: var(--ink); text-decoration: underline; }
.footer__co { display: inline-flex; align-items: center; gap: .55rem; }
/* Kleine Original-Logos (Symbole #logo-group, #logo-insurance usw. in jeder Seite), Grösse über font-size wie bei .logo */
.co-logo { display: block; flex: none; width: calc(var(--lw) * 1em); height: calc(var(--lh) * 1em); overflow: visible; }
.footer__co .co-logo { font-size: 15px; }
.footer__co:hover { text-decoration: none; }
.footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .88rem; }
.footer__legal ul { display: flex; gap: 1.25rem; }

/* =========================================================================
   GESELLSCHAFTS-SEITEN
   ========================================================================= */

/* --- Hero: Split mit Gipfel-Maske (Wealth) --- */
.hero-split { position: relative; min-height: 100dvh; padding-block: 112px 56px; display: flex; align-items: center; overflow: hidden; isolation: isolate; }
.hero-split__grid { position: relative; z-index: 1; display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 960px) { .hero-split__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } }
.peak-img { position: relative; aspect-ratio: 1.4 / 1; }
.peak-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
}
@media (prefers-reduced-motion: no-preference) {
  .js .peak-img img { clip-path: polygon(50% 100%, 50% 100%, 50% 100%); transition: clip-path 1.6s cubic-bezier(.77,0,.18,1) .1s; }
  .js .is-ready .peak-img img { clip-path: polygon(0% 100%, 50% 0%, 100% 100%); }
}
.peak-img svg.peak-swoosh { position: absolute; left: 4%; bottom: -2%; width: 92%; height: auto; z-index: 2; filter: drop-shadow(0 18px 30px rgb(0 0 0 / .25)); }
@media (prefers-reduced-motion: no-preference) {
  .js .peak-img svg.peak-swoosh { opacity: 0; transform: translateX(-8%); transition: opacity 1s ease 1.3s, transform 1.4s cubic-bezier(.16,1,.3,1) 1.3s; }
  .js .is-ready .peak-img svg.peak-swoosh { opacity: 1; transform: none; }
}

/* --- Hero: Netzwerk mit Foto im Kreis (Circle) --- */
.ring-img { position: relative; width: min(100%, 560px); aspect-ratio: 1; justify-self: center; }
.ring-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 58% 50%;
  border-radius: 50%; clip-path: circle(50% at 50% 50%);
  box-shadow: 0 30px 80px -30px color-mix(in oklab, var(--b900) 55%, transparent);
}
@media (max-width: 959px) { .ring-img { width: min(82%, 460px); } }
/* Umlaufbahn um das Foto: feiner Ring, darauf Punkte (Menschen), die langsam kreisen */
.ring-orbit { position: absolute; inset: -8%; width: 116%; height: 116%; overflow: visible; pointer-events: none; }
.ring-orbit__path { fill: none; stroke: color-mix(in oklab, var(--b-bright) 55%, transparent); stroke-width: 1.2px; vector-effect: non-scaling-stroke; }
.ring-orbit__dots circle { fill: var(--b-bright); }
.ring-orbit__dots { transform-box: view-box; transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
  .ring-orbit__dots { animation: orbit 90s linear infinite; }
  .js .ring-orbit { opacity: 0; transform: scale(.94); transition: opacity 1.2s ease 1.1s, transform 1.6s cubic-bezier(.16,1,.3,1) 1.1s; }
  .js .is-ready .ring-orbit { opacity: 1; transform: none; }
}
@keyframes orbit { to { transform: rotate(360deg); } }
/* Längerer Hero-Titel (Circle): zwei Zeilen statt vier */
.hero-split h1.h1--long { font-size: clamp(2.6rem, 4.9vw, 5.2rem); }
@media (min-width: 960px) { .hero-split h1.h1--long .split-line { white-space: nowrap; } }
@media (prefers-reduced-motion: no-preference) {
  .js .ring-img img { clip-path: circle(0% at 50% 50%); transition: clip-path 1.6s cubic-bezier(.77,0,.18,1) .1s; }
  .js .is-ready .ring-img img { clip-path: circle(50% at 50% 50%); }
}

/* --- Hero: Lupe / Scan (Insurance) --- */
.hero-scan { position: relative; min-height: 100dvh; display: flex; align-items: center; padding-block: 112px 64px; overflow: hidden; isolation: isolate; color: #f6f4f6; background: var(--b900); }
.scan__layer { position: absolute; inset: 0; z-index: -3; }
.scan__layer img { width: 100%; height: 100%; object-fit: cover; }
.scan__base img { filter: grayscale(1) contrast(1.1) brightness(.55); }
.scan__lens {
  z-index: -2;
  --x: 70%; --y: 45%; --r: 0px;
  -webkit-mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 98%, transparent 100%);
  mask-image: radial-gradient(circle var(--r) at var(--x) var(--y), #000 98%, transparent 100%);
}
.scan__lens img { filter: grayscale(1) contrast(1.15) brightness(.9); }
.scan__lens::after { content: ""; position: absolute; inset: 0; background: var(--b500); mix-blend-mode: color; }
.scan__ring { position: absolute; z-index: -1; left: 0; top: 0; width: 1px; height: 1px; pointer-events: none; }
.scan__ring::before { content: ""; position: absolute; width: calc(var(--r) * 2); height: calc(var(--r) * 2); left: calc(var(--r) * -1); top: calc(var(--r) * -1); border-radius: 50%; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .55), 0 0 0 1px rgb(0 0 0 / .1); }
.scan__tag { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: .8rem; font-weight: 700; padding: .35rem .7rem; border-radius: 999px; background: #fff; color: var(--b800); transform: translate(-50%, -50%); opacity: 0; transition: opacity .3s ease; }
/* Schmal: Text liegt über der ganzen Breite, die Labels würden ihn verdecken */
@media (max-width: 760px) { .scan__tag { display: none; } }
.hero-scan::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, color-mix(in oklab, var(--b900) 92%, #000) 0%, color-mix(in oklab, var(--b900) 70%, transparent) 45%, transparent 75%); }
.hero-scan .lead { color: rgb(255 255 255 / .82); }
.hero-scan .eyebrow { color: color-mix(in oklab, var(--b-bright) 60%, #fff); }
.hero-scan h1 { color: #fff; font-size: clamp(2.9rem, 6.4vw, 6.2rem); }
.hero-scan .hero__copy { max-width: 820px; }
.hero-scan .btn--ghost { --btn-fg: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .45); }
.hero-scan .btn--ghost::before { background: rgb(255 255 255 / .12); }

/* --- Hero: Vollbild (Properties) --- */
.hero-full { position: relative; min-height: 100dvh; display: flex; align-items: end; padding-block: 112px 56px; overflow: hidden; isolation: isolate; color: #fff; background: var(--b900); }
.hero-full__img { position: absolute; inset: 0; z-index: -2; }
.hero-full__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-full__img img { transform: scale(1.12); transition: transform 2.6s cubic-bezier(.16,1,.3,1); }
  .js .is-ready .hero-full__img img { transform: scale(1); }
}
.hero-full::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(0 0 0 / .35) 0%, transparent 30%, color-mix(in oklab, var(--b900) 55%, transparent) 60%, color-mix(in oklab, var(--b900) 96%, #000) 100%); }
.hero-full__grid { display: grid; gap: 2rem; }
@media (min-width: 960px) { .hero-full__grid { grid-template-columns: 1.5fr .7fr; align-items: end; } }
.hero-full h1 { font-size: clamp(3rem, 8.6vw, 8.4rem); max-width: 12ch; color: #fff; }
.hero-full .lead { color: rgb(255 255 255 / .85); }
.hero-full .eyebrow { color: color-mix(in oklab, var(--b-bright) 30%, #fff); text-shadow: 0 1px 12px rgb(0 0 0 / .35); }
.hero-full .btn--ghost { --btn-fg: #fff; box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .45); }
.hero-full .btn--ghost::before { background: rgb(255 255 255 / .12); }

/* --- Intro-Statement mit wortweiser Aufhellung --- */
.statement { font-size: clamp(1.8rem, 3.9vw, 3.6rem); font-weight: 300; letter-spacing: 0; line-height: 1.18; max-width: 22ch; margin: 0; text-wrap: pretty; }
.statement strong { font-weight: 800; font-stretch: 84%; letter-spacing: 0; }
.statement .w { transition: opacity .5s ease, color .5s ease; }
/* Noch nicht aufgehellte Wörter: .5 statt .18, damit der Kontrast 3:1 erreicht (grosse Schrift, WCAG 1.4.3), seit v96 */
.js .statement[data-scrub] .w { opacity: .5; }
.js .statement[data-scrub] .w.on { opacity: 1; }
.reduced .statement[data-scrub] .w { opacity: 1 !important; }

/* --- Angebot "60 Minuten" --- */
.offer { display: grid; gap: 3rem; align-items: center; }
@media (min-width: 960px) { .offer { grid-template-columns: auto 1fr; gap: 5rem; } }
.offer__num { display: flex; align-items: flex-start; font-size: clamp(9rem, 24vw, 21rem); font-weight: 800; font-stretch: 75%; letter-spacing: -0.01em; line-height: .78; color: var(--accent-ink); }
/* „Min.“ steht rechts oben neben der Zahl, nicht auf ihr */
.offer__num small { margin: .02em 0 0 .14em; font-size: .15em; line-height: 1; letter-spacing: .01em; font-weight: 700; color: var(--accent-ink); font-stretch: 100%; }
.offer__list { list-style: none; padding: 0; margin: 2rem 0; display: grid; gap: 1rem; }
.offer__list li { display: grid; grid-template-columns: 28px 1fr; gap: .8rem; font-size: 1.08rem; }
.offer__list li i { color: var(--accent-ink); font-size: 1.35rem; }

/* --- Grafik „Bereiche um eine Person“ (Wealth, Insurance, Properties, Circle): jeder Bereich führt zur passenden Leistung --- */
/* Handy: Figur oben, Bereiche als Liste. Ab 760 px: Netz wie in der Vorlage. Details zeigt das Pop-up */
/* Mitte: gefüllte Person (Hand am Kinn) und ein Symbol der Gesellschaft, beides als SVG; .fp--q für Bereiche mit Frage (Insurance) */
.fp__hint { display: flex; align-items: center; gap: .5rem; color: var(--ink-3); font-size: .95rem; font-weight: 600; }
.fp__hint i { font-size: 1.2rem; color: var(--accent-ink); }
.fp { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fp__lines { display: none; }
.fp__core {
  grid-column: 1 / -1; justify-self: center; width: min(72vw, 280px); aspect-ratio: 1.55; margin-bottom: 1rem; border-radius: 50%;
  display: grid; place-items: center; align-content: center; color: #fff; box-shadow: var(--shadow);
  background: radial-gradient(120% 100% at 50% 25%, var(--b600), var(--b900));
}
.fp__icons { display: flex; align-items: flex-end; gap: .35em; height: clamp(4.4rem, 9vw, 7.6rem); margin-top: .3rem; }
.fp__icons svg { display: block; height: 100%; width: auto; fill: currentColor; }
.fp__icons .fp__obj { height: 80%; }
.fp__core:has(.fp__cap) .fp__icons { height: clamp(3.6rem, 7.4vw, 6.2rem); }
.fp__cap { margin-top: .35rem; font-size: clamp(.8rem, 1.2vw, 1rem); font-weight: 700; font-stretch: 84%; letter-spacing: .02em; opacity: .9; }
.fp__node em { display: block; font-style: normal; font-weight: 400; font-size: .84rem; line-height: 1.35; color: var(--ink-2); }
.fp__q { margin-bottom: -.15em; font-size: clamp(1.3rem, 2.4vw, 2.3rem); font-weight: 800; font-stretch: 84%; letter-spacing: .12em; color: color-mix(in oklab, var(--b-bright) 55%, #fff); }
.fp__node {
  display: grid; gap: .25rem; padding: .8rem .6rem; border-radius: 14px; text-align: center; text-decoration: none; hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word;
  background: var(--bg); color: var(--ink); font-weight: 700; font-size: 1rem; line-height: 1.2;
  box-shadow: inset 0 0 0 1px var(--line); transition: box-shadow .3s ease, color .3s ease;
}
.fp__node small { display: none; } /* Name der Leistung: nicht sichtbar, cura.js sendet ihn mit der Anfrage mit */
.fp__node:hover, .fp__node:focus-visible, .fp__node.is-sib { box-shadow: var(--shadow), inset 0 0 0 1.5px var(--accent-ink); }
@media (min-width: 760px) {
  .fp { display: block; max-width: 1080px; width: 100%; margin-inline: auto; aspect-ratio: 1000 / 760; }
  .fp__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
  .fp__lines line { stroke: var(--b500); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .32; transition: opacity .3s ease; }
  .fp.is-hl .fp__lines line { opacity: .08; }
  .fp.is-hl .fp__lines line.on { opacity: 1; stroke: var(--accent-ink); stroke-width: 2; }
  .fp__core { position: absolute; left: 50%; top: 49.5%; width: 38%; margin: 0; transform: translate(-50%, -50%); }
  .fp__node { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%); width: max-content; min-width: 18%; padding: .9rem 1.4rem; font-size: clamp(.95rem, 1.3vw, 1.08rem); hyphens: manual; }
  .fp__node:hover, .fp__node:focus-visible { z-index: 3; }
  .fp--q { aspect-ratio: 1000 / 820; }
  .fp--q .fp__node { width: 25%; min-width: 0; padding: .9rem 1.1rem; }
  .fp--q .fp__core { width: 34%; }
}
.fp__node.is-open { background: var(--accent-soft); box-shadow: inset 0 0 0 2px var(--accent-ink); }
/* Pop-up zum gewählten Bereich: Schliessen führt direkt zurück zum Diagramm. Kein Milchglas, keine Versalien (Entscheidung 29) */
html:has(.fp-modal[open]) { overflow: hidden; scrollbar-gutter: stable; }
.fp-modal {
  width: min(640px, calc(100vw - 32px)); max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 0; border-radius: 20px;
  background: var(--bg); color: var(--ink); box-shadow: 0 30px 80px -24px rgb(0 0 0 / .5); overflow: hidden;
}
.fp-modal[open] { animation: fp-modal-in .28s cubic-bezier(.16,1,.3,1); }
@keyframes fp-modal-in { from { opacity: 0; transform: translateY(12px); } }
.fp-modal::backdrop { background: rgb(0 0 0 / .45); background: color-mix(in oklab, var(--b800) 55%, transparent); }
.fp-modal__box { position: relative; max-height: calc(100dvh - 32px); overflow-y: auto; overscroll-behavior: contain; padding: clamp(1.5rem, 4vw, 2.5rem); }
.fp-modal__x { position: absolute; top: .75rem; right: .75rem; }
.fp-modal .eyebrow { margin: 0 0 .6rem; padding-right: 2.5rem; }
.fp-modal h2 { margin: 0 0 1rem; padding-right: 2rem; font-size: clamp(1.8rem, 4.4vw, 2.6rem); line-height: 1.08; }
.fp-modal__lead { margin: 0 0 .4rem; font-size: 1.08rem; font-weight: 700; line-height: 1.35; }
.fp-modal__text { margin: 0 0 1.1rem; color: var(--ink-2); line-height: 1.5; }
.fp-modal__list { list-style: none; margin: 0 0 1.1rem; padding: 0; }
.fp-modal__list li { display: flex; align-items: center; gap: .8rem; padding: .6rem 0; font-weight: 600; line-height: 1.3; }
.fp-modal__list li + li { border-top: 1px solid var(--line); }
.fp-modal__list i { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-size: 1rem; }
.fp-modal__rel { margin: 0 0 .8rem; padding: .65rem .9rem; border-radius: 10px; background: var(--accent-soft); color: var(--accent-ink); font-size: .92rem; line-height: 1.4; }
.fp-modal__note { margin: 0; color: var(--ink-3); font-size: .88rem; line-height: 1.4; }
.fp-modal__actions { margin-top: 1.25rem; }
.fp-modal__actions .btn { flex: 1 1 auto; justify-content: center; padding-inline: 1rem; font-size: .95rem; }
@media (max-width: 520px) {
  .fp-modal__box { padding: 1.25rem; }
  .fp-modal h2 { margin-bottom: .6rem; }
  .fp-modal__text, .fp-modal__list { margin-bottom: .7rem; }
  .fp-modal__list li { padding: .4rem 0; }
  .fp-modal__rel { margin-bottom: .6rem; padding: .5rem .75rem; }
  .fp-modal__actions { margin-top: .9rem; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .fp__lines line, .fp__node { transition: none; } .fp-modal[open] { animation: none; } }

/* --- Der Weg: drei Schritte, aufsteigend --- */
.path { position: relative; margin-top: clamp(2.5rem, 5vw, 4rem); }
.path__line { position: absolute; inset: 0; width: 100%; height: 100%; display: none; pointer-events: none; overflow: visible; }
.path__line path { fill: none; stroke: var(--accent-ink); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linecap: round; }
.path__line path.track { stroke: var(--line-strong); stroke-dasharray: 2 8; }
.steps { position: relative; list-style: none; padding: 0; margin: 0; display: grid; gap: 1.25rem; }
.step {
  position: relative; border-radius: 22px; padding: clamp(22px, 2.6vw, 32px);
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line);
  display: grid; gap: .9rem; align-content: start;
}
/* Karten heben sich immer vom Abschnitt ab: auf hellem Grund getönt, auf getöntem Grund hell */
.section--alt .step, .section--alt .svc-card { background: var(--bg); }
.step__n { width: 52px; height: 52px; border-radius: 999px; display: grid; place-items: center; font-weight: 800; font-size: 1.15rem; background: var(--accent); color: var(--on-accent); }
.step h3 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.step p { color: var(--ink-2); font-size: 1rem; }
.step__note { font-size: .86rem; font-weight: 700; color: var(--accent-ink); }
@media (min-width: 960px) {
  .path__line { display: block; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: 2rem; align-items: start; }
  .step:nth-child(1) { margin-top: 260px; }
  .step:nth-child(2) { margin-top: 130px; }
  .step:nth-child(3) { margin-top: 0; }
  /* Vier Schritte (Insurance): flachere Treppe */
  .steps--4 { grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
  .steps--4 .step:nth-child(1) { margin-top: 270px; }
  .steps--4 .step:nth-child(2) { margin-top: 180px; }
  .steps--4 .step:nth-child(3) { margin-top: 90px; }
  .steps--4 .step:nth-child(4) { margin-top: 0; }
  .steps--4 .step h3 { font-size: clamp(1.4rem, 1.8vw, 1.75rem); }
}

/* --- Querverweis Schwester-Gesellschaften --- */
.sisters { display: grid; gap: 12px; }
@media (min-width: 768px) { .sisters { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sisters { grid-template-columns: repeat(4, 1fr); } }
.sister {
  --sc: var(--c-group); --scd: var(--c-group-d);
  position: relative; overflow: hidden; isolation: isolate;
  display: grid; gap: 2.5rem; padding: 26px; border-radius: 20px; text-decoration: none; color: #fff;
  background: linear-gradient(150deg, var(--sc), var(--scd));
  min-height: 220px; align-content: space-between;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.sister:hover { transform: translateY(-4px); }
.sister--wealth { --sc: var(--c-wealth); --scd: var(--c-wealth-d); }
.sister--insurance { --sc: var(--c-insurance); --scd: var(--c-insurance-d); }
.sister--properties { --sc: var(--c-properties); --scd: var(--c-properties-d); }
.sister--circle { --sc: var(--c-circle); --scd: var(--c-circle-d); }
.sister svg { position: absolute; z-index: -1; right: -12%; bottom: -20%; width: 90%; opacity: .2; transition: transform 1s cubic-bezier(.16,1,.3,1); }
.sister svg { fill: #fff; }
.sister:hover svg { transform: translate(-5%, -5%); }
.sister__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; }
.sister__name { font-size: clamp(1.5rem, 1.9vw, 1.9rem); font-weight: 800; font-stretch: 84%; letter-spacing: 0; line-height: 1.05; }
/* Rechtsform (GmbH/AG) kleiner auf eigener Zeile, damit alle Kacheln gleich aufgebaut sind */
.sister__name small { display: block; margin-top: .3em; font-size: max(.62em, .95rem); font-weight: 600; font-stretch: 100%; opacity: .85; }
.sister p { color: rgb(255 255 255 / .82); font-size: .98rem; }

/* --- Circle: drei Nutzen (früher auch Insurance) --- */
/* Drei ruhige Spalten: Symbol, Wort und Text auf einer Achse untereinander */
.finds { list-style: none; padding: 0; margin: clamp(2.5rem, 5vw, 4rem) 0 0; display: grid; gap: 2.5rem 3rem; }
@media (min-width: 900px) { .finds { grid-template-columns: repeat(3, 1fr); } }
.find { display: grid; gap: 1rem; align-content: start; padding-top: 2rem; border-top: 1px solid var(--line); }
.find__icon { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 999px; background: var(--accent-soft); color: var(--accent-ink); font-size: 1.6rem; }
.find__word { font-size: clamp(1.9rem, 2.6vw, 2.5rem); font-weight: 800; font-stretch: 84%; letter-spacing: 0; line-height: 1.05; }
.find p { color: var(--ink-2); max-width: 36ch; }
/* Titel ab Tablet-Breite auf einer Zeile (Insurance „Drei Dinge“, Wealth „Fünf Massnahmen“) */
.title-line { max-width: none; }
@media (min-width: 900px) { .title-line { white-space: nowrap; } }

.promise__grid p { color: var(--ink-2); font-size: 1rem; }

/* --- Properties: Off-Market --- */
.offmarket { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: clamp(28px, 6vw, 88px); background: linear-gradient(140deg, var(--b700), var(--b900)); color: #fff; display: grid; gap: 2rem; }
@media (min-width: 960px) { .offmarket { grid-template-columns: 1.2fr .8fr; align-items: end; } }
.offmarket h2 { color: #fff; max-width: 13ch; }
.offmarket p { color: rgb(255 255 255 / .84); }
.offmarket canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .9; }

/* --- CTA-Band --- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; padding: clamp(32px, 6vw, 96px); background: linear-gradient(150deg, var(--b600), var(--b900)); color: #fff; display: grid; gap: 2rem; }
.cta-band h2 { color: #fff; max-width: 16ch; }
.cta-band p { color: rgb(255 255 255 / .84); }
.cta-band canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; opacity: .85; }
@media (min-width: 960px) { .cta-band { grid-template-columns: 1.3fr .7fr; align-items: end; } }

/* =========================================================================
   RECHTSSEITEN (Impressum, Datenschutz)
   ========================================================================= */
.legal-hero { position: relative; overflow: hidden; isolation: isolate; padding-block: 150px 64px; border-bottom: 1px solid var(--line); background: var(--bg-2); }
/* Seitenkopf der Unterseiten: ruhige Fläche, rechts unten der Logo-Schwung gross und zart in der Farbe der Gesellschaft */
.legal-hero__art { position: absolute; z-index: -1; right: -3%; bottom: -12%; width: min(56vw, 780px); pointer-events: none; }
.legal-hero__art use { fill: var(--b500); opacity: .14; }
.legal-hero__art use + use { opacity: .22; transform: translate(20px, 18px) scale(.6); transform-origin: right bottom; }
@media (max-width: 599px) { .legal-hero__art { width: 92vw; bottom: -18%; right: -14%; } }
.legal-hero h1 { font-size: clamp(2.8rem, 6.5vw, 5.8rem); }
.legal-hero .lead { margin-top: 1.25rem; }
.legal { display: grid; gap: 3rem; padding-block: clamp(3rem, 7vw, 6rem); }
@media (min-width: 1024px) { .legal { grid-template-columns: 260px 1fr; gap: 5rem; } }
.legal__toc { align-self: start; }
@media (min-width: 1024px) { .legal__toc { position: sticky; top: 110px; } }
.legal__toc p { font-size: .95rem; font-weight: 700; color: var(--ink-3); margin-bottom: .9rem; }
.legal__toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; counter-reset: toc; }
.legal__toc a { display: block; padding: .4rem .75rem; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-size: .95rem; font-weight: 600; transition: background-color .25s ease, color .25s ease; }
.legal__toc a:hover { background: var(--accent-soft); color: var(--ink); }
.prose { max-width: 72ch; }
.prose h2 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin: 3.5rem 0 1rem; scroll-margin-top: 110px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.2rem; font-stretch: 100%; letter-spacing: -0.01em; margin: 2rem 0 .6rem; }
.prose p, .prose li { color: var(--ink-2); }
.prose p + p { margin-top: 1rem; }
.prose ul { padding-left: 1.2rem; margin: .8rem 0 1rem; display: grid; gap: .4rem; }
.prose a { color: var(--accent-ink); }
.prose strong { color: var(--ink); }
.org { display: grid; gap: 12px; margin: 1.5rem 0 0; }
@media (min-width: 1200px) { .org { grid-template-columns: 1fr 1fr; } }
.org__card { --oc: var(--c-group); position: relative; padding: 22px 22px 22px 26px; border-radius: 18px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.org__card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--oc); }
.org__card--insurance { --oc: var(--c-insurance); }
.org__card--wealth { --oc: var(--c-wealth); }
.org__card--properties { --oc: var(--c-properties); }
.org__card--circle { --oc: var(--c-circle); }
.org__card h3 { margin: 0 0 .7rem; font-stretch: 84%; font-size: 1.35rem; }
.org__card dl { display: grid; grid-template-columns: auto 1fr; gap: .3rem 1rem; margin: 0; font-size: .95rem; }
.org__card dt { color: var(--ink-3); font-weight: 600; }
.org__card dd { margin: 0; color: var(--ink); }
.todo { background: #ffe58a; color: #3a2c00; padding: .05em .4em; border-radius: 4px; font-weight: 700; font-size: .92em; }
.legal-meta { margin-top: 3.5rem; padding-top: 1.25rem; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .92rem; }

/* =========================================================================
   Leistungen: Aufklappmenü im Menüband, Übersichtsseiten, Leistungsseiten
   ========================================================================= */
.nav__drop { position: relative; }
.nav__drop > a .ph-caret-down { font-size: .8em; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.nav__drop:hover > a .ph-caret-down, .nav__drop:focus-within > a .ph-caret-down { transform: rotate(180deg); }
.nav__links a[aria-current="true"] { color: var(--ink); background: var(--accent-soft); }
/* padding-top überbrückt die Lücke zwischen Eintrag und Liste, damit das Menü beim Hinunterfahren offen bleibt */
.nav__sub {
  position: absolute; top: 100%; left: 50%; padding-top: 12px;
  transform: translate(-50%, 6px); opacity: 0; visibility: hidden;
  transition: opacity .2s ease, transform .3s cubic-bezier(.16,1,.3,1), visibility 0s linear .3s;
}
.nav__drop:hover .nav__sub, .nav__drop:focus-within .nav__sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav__drop.is-closed .nav__sub { opacity: 0; visibility: hidden; }
.nav__sub ul {
  list-style: none; margin: 0; padding: 8px; width: 380px; display: grid; gap: 2px;
  background: var(--bg); border-radius: 18px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
}
.nav__links .nav__sub a { display: flex; align-items: flex-start; gap: .8rem; padding: .6rem .75rem; border-radius: 12px; white-space: normal; color: var(--ink); line-height: 1.3; }
.nav__sub a i { flex: none; font-size: 1.3rem; color: var(--accent-ink); margin-top: .05rem; }
.nav__sub small { display: block; margin-top: .15rem; font-size: .84rem; font-weight: 400; color: var(--ink-3); }
.nav__links .nav__sub-all { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--line); }
.nav__links .nav__sub-all a { align-items: center; color: var(--accent-ink); }
.nav__sub-all a i { font-size: 1.05rem; color: inherit; margin: 0; }
/* Firmengruppe: Liste in einer Spalte, links das kleine Logo, rechts die Unterzeile (bündig auf der Schriftlinie).
   Cura Group AG durch eine feine Linie abgesetzt, darunter "Alle Gesellschaften im Überblick".
   Zeile färbt sich beim Darüberfahren zart in der Farbe der Gesellschaft (--co), die eigene Gesellschaft dauerhaft. */
.nav__sub .co-logo { font-size: 14px; }
.nav__sub--co ul { width: 372px; gap: 2px; padding: 8px; }
.co-item--insurance { --co: var(--c-insurance); }
.co-item--wealth { --co: var(--c-wealth); }
.co-item--properties { --co: var(--c-properties); }
.co-item--circle { --co: var(--c-circle); }
.co-item--group { --co: var(--c-group); }
.nav__links .nav__sub a.co-item {
  position: relative; align-items: center; padding: .7rem 2rem .7rem .9rem; border-radius: 12px;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.co-item > span { display: grid; grid-template-columns: 108px 1fr; align-items: end; gap: 1rem; }
.nav__sub--co .co-item small { margin: 0; padding-bottom: .05rem; font-size: .8rem; line-height: 1.35; white-space: nowrap; }
.co-item::after {
  content: ""; position: absolute; top: 50%; right: .9rem; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--co); opacity: 0; transform: scale(.4); transition: opacity .3s ease, transform .4s cubic-bezier(.16,1,.3,1);
}
.nav__links .nav__sub a.co-item:hover, .nav__links .nav__sub a.co-item:focus-visible, .nav__links .nav__sub a.co-item[aria-current] {
  background: color-mix(in oklab, var(--co) 9%, var(--bg)); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--co) 38%, transparent);
}
.co-item:hover::after, .co-item:focus-visible::after, .co-item[aria-current]::after { opacity: 1; transform: none; }
.nav__sub--co li:has(.co-item--group) { margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }
.co-item--group .co-logo { font-size: 11px; }
@media (prefers-color-scheme: dark) {
  .nav__links .nav__sub a.co-item:hover, .nav__links .nav__sub a.co-item:focus-visible, .nav__links .nav__sub a.co-item[aria-current] { background: color-mix(in oklab, var(--co) 18%, var(--bg)); }
}
@media (prefers-reduced-motion: reduce) { .co-item, .co-item::after { transition: none; } }
/* Viele Leistungen (Insurance): zweispaltig, "Alle Leistungen" über die ganze Breite */
.nav__sub--wide ul { width: 700px; grid-template-columns: 1fr 1fr; }
.nav__sub--wide .nav__sub-all { grid-column: 1 / -1; }
.nav__sub a svg:not(.co-logo) { flex: none; width: 28px; height: auto; margin-top: .2rem; }
@media (prefers-reduced-motion: reduce) { .nav__sub { transition: none; } }

/* Mobile-Menü: Leistungen als kleine Unterliste */
.menu { overflow-y: auto; }
.menu__sub { list-style: none; padding: 0 0 .6rem; margin: 0; display: grid; gap: .1rem; }
.menu__list .menu__sub a { font-size: 1.05rem; font-weight: 600; font-stretch: 100%; padding: .35rem 0 .35rem 1rem; color: var(--ink-2); border-left: 2px solid var(--line); line-height: 1.3; }

/* Kopf der Unterseiten */
.svc-hero { padding-block: 140px 56px; }
.svc-hero h1 { font-size: clamp(2.4rem, 5.4vw, 5rem); max-width: 22ch; }
.svc-hero .lead { max-width: 52ch; }
/* Lange Fachwörter (Pensionskassenlösung, Liegenschaftsverwaltung) auf schmalen Bildschirmen trennen */
.svc-hero h1, .svc-cta h2, .svc-card__title { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
.svc-hero h1 .split-line > span { max-width: 100%; }
@media (max-width: 599px) { .svc-hero h1 { font-size: clamp(2rem, 9.6vw, 2.6rem); } }
/* Kontaktaufrufe aus dem Textdokument sind teils lang: Button darf umbrechen */
.svc-cta .btn { white-space: normal; line-height: 1.25; max-width: 100%; }
/* Pfad mit "Zurück" davor: auf allen Seiten ausser der Startseite der Cura Group AG */
.crumbbar { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1rem; margin: 0 0 1.6rem; }
.crumbbar .crumbs { margin: 0; }
.crumbbar__back { display: inline-flex; align-items: center; gap: .4rem; font-size: .95rem; font-weight: 700; color: var(--accent-ink); text-decoration: none; white-space: nowrap; }
.crumbbar__back i { font-size: 1.1rem; transition: transform .3s cubic-bezier(.16,1,.3,1); }
.crumbbar__back:hover { text-decoration: underline; }
.crumbbar__back:hover i { transform: translateX(-3px); }
.crumbbar__back::after { content: ""; width: 1px; height: 1.2em; margin-left: .6rem; background: var(--line-strong); }
.hero__copy .crumbbar { margin: 0; }
.hero-full .crumbbar__back, .hero-scan .crumbbar__back { color: #fff; }
.hero-full .crumbbar__back::after, .hero-scan .crumbbar__back::after { background: rgb(255 255 255 / .4); }
.hero-full .crumbs, .hero-full .crumbs li + li::before, .hero-scan .crumbs, .hero-scan .crumbs li + li::before { color: rgb(255 255 255 / .75); }
.hero-full .crumbs a, .hero-scan .crumbs a { color: #fff; }
.hero-full .crumbs a:hover, .hero-scan .crumbs a:hover { color: #fff; }
.hero-full .crumbbar { text-shadow: 0 1px 3px rgb(0 0 0 / .75), 0 0 14px rgb(0 0 0 / .55); }
.hero-full .crumbs, .hero-full .crumbs li + li::before { color: rgb(255 255 255 / .92); }
@media (max-width: 560px) { .crumbbar__back::after { display: none; } }
@media (prefers-reduced-motion: reduce) { .crumbbar__back i { transition: none; } }
.crumbs { list-style: none; padding: 0; margin: 0 0 1.6rem; display: flex; flex-wrap: wrap; gap: .4rem; font-size: .95rem; color: var(--ink-3); }
.crumbs li + li::before { content: "/"; margin-right: .4rem; color: var(--ink-3); }
.crumbs a { color: var(--ink-2); font-weight: 600; text-decoration: none; }
.crumbs a:hover { color: var(--accent-ink); text-decoration: underline; }

/* Übersicht: Karten */
.svc-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
@media (min-width: 700px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .svc-grid { grid-template-columns: repeat(3, 1fr); } }
.svc-card {
  display: flex; flex-direction: column; gap: .9rem; height: 100%; padding: 26px; border-radius: 20px;
  background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; color: inherit;
  transition: box-shadow .4s ease, background-color .4s ease;
}
.svc-card:hover { background: var(--bg); box-shadow: var(--shadow), inset 0 0 0 1.5px var(--accent-ink); }
.svc-card__icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; background: var(--accent-soft); color: var(--accent-ink); margin-bottom: .4rem; }
.svc-card__title { font-size: clamp(1.45rem, 2vw, 1.8rem); line-height: 1.12; }
.svc-card__sub { font-size: .92rem; font-weight: 600; color: var(--ink-3); margin-top: -.4rem; }
.svc-card p { color: var(--ink-2); }
.svc-card .text-link { margin-top: auto; padding-top: .6rem; }
.svc-card:hover .text-link i { transform: translateX(4px); }

/* Leistungsseite: Text und Seitenspalte */
.svc-page { display: grid; gap: 3rem; padding-block: clamp(3rem, 7vw, 6rem); }
@media (min-width: 1024px) { .svc-page { grid-template-columns: minmax(0, 1fr) 360px; gap: 5rem; } .svc-aside { position: sticky; top: 110px; align-self: start; } }
.svc-body { max-width: 68ch; }
.svc-body p { color: var(--ink-2); }
.svc-body p:first-child { font-size: clamp(1.15rem, 1.5vw, 1.35rem); font-weight: 300; line-height: 1.55; color: var(--ink); }
.svc-body p + p { margin-top: 1.25rem; }
/* Insurance: Aufzählung aus dem Dienstleistungskatalog */
.svc-body h2 { margin: 2.5rem 0 1.25rem; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.svc-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .9rem; }
.svc-list li { display: grid; grid-template-columns: 28px 1fr; gap: .8rem; color: var(--ink-2); font-size: 1.08rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.svc-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.svc-list i { color: var(--accent-ink); font-size: 1.3rem; margin-top: .1rem; }
.svc-aside { display: grid; gap: 2rem; }
.svc-cta { padding: 26px; border-radius: 20px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); display: grid; gap: 1rem; justify-items: start; }
.svc-cta h2 { font-size: clamp(1.5rem, 2.2vw, 1.9rem); line-height: 1.12; }
.svc-cta p { color: var(--ink-2); }
.svc-cta .contact__line { margin-top: .3rem; }
.svc-more > p { font-size: .95rem; font-weight: 700; color: var(--ink-3); margin-bottom: .7rem; }
.svc-more ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .15rem; }
.svc-more a { display: flex; align-items: center; gap: .7rem; padding: .45rem .75rem; border-radius: 10px; text-decoration: none; color: var(--ink-2); font-size: .95rem; font-weight: 600; transition: background-color .25s ease, color .25s ease; }
.svc-more a i { font-size: 1.15rem; color: var(--accent-ink); }
.svc-more a:hover { background: var(--accent-soft); color: var(--ink); }

/* Kundenlogin: Auswahl zwischen den Portalen (öffnen in neuem Fenster) */
@media (min-width: 1100px) { .svc-grid--2 { grid-template-columns: 1fr 1fr; max-width: 980px; } }
.portal-note a { color: var(--accent-ink); }

/* Grain über allem (fixiert, ohne Pointer-Events) */
.grain { position: fixed; inset: 0; z-index: 70; pointer-events: none; opacity: .045; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Zielgrösse der Textlinks in der Fusszeile mindestens 24 px (WCAG 2.5.8), seit v96.
   Padding vergrössert die Klickfläche, der negative Rand gleicht es aus: das Layout bleibt gleich. */
.footer ul a { display: inline-block; padding-block: 4px; margin-block: -4px; }

/* Kontrastmodus (Windows): Fokus als echte Umrandung statt Schatten, seit v96 */
@media (forced-colors: active) {
  :focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
  .field input:focus, .field textarea:focus, .field select:focus { outline: 2px solid Highlight; outline-offset: 2px; }
  .field input, .field textarea, .field select { border-color: CanvasText; }
  .chip[aria-selected="true"] { outline: 2px solid Highlight; }
}

/* Druck: nur der Inhalt, schwarz auf weiss, ohne Navigation, Deko und Animationen (seit v96) */
@media print {
  .skip-link, .nav, .menu, .grain, .topo, canvas, .footer__big, .hero__mark, .legal-hero__art, .peak-swoosh, .ring-orbit,
  .scan__layer, .scan__ring, .scan__tag, .hero-full__img, .story__img, .crumbbar__back, .btn-row, .form, .fp__hint { display: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; color: #000 !important; background: transparent !important; box-shadow: none !important; text-shadow: none !important; }
  html, body { background: #fff !important; }
  [data-reveal], .split-line > span, .peak-img img, .ring-img img { opacity: 1 !important; transform: none !important; clip-path: none !important; }
  .statement .w { opacity: 1 !important; }
  .hero, .hero-split, .hero-scan, .hero-full, .story, .legal-hero { min-height: 0 !important; padding-block: 0 1rem !important; }
  .section, .section--tight { padding-block: 1.5rem !important; }
  a { text-decoration: underline; }
  h1, h2, h3 { break-after: avoid; }
  img, svg, figure, li { break-inside: avoid; }
}