.ig-section{
  background:#ffffff;border-radius:18px;padding:32px 36px;
  border:1px solid #e6e8f0;
  box-shadow:0 1px 3px rgba(28,31,42,.04);
  scroll-margin-top:88px;
}
@media (max-width:780px){.ig-section{padding:24px 22px;border-radius:14px}}

.ig-section > header{margin-bottom:22px}
.ig-eyebrow{
  font-size:11px;text-transform:uppercase;letter-spacing:2px;
  color:#9098ad;font-weight:700;display:inline-flex;align-items:center;gap:10px;
}
.ig-eyebrow::before{content:"";width:18px;height:2px;background:#5b5dd9;border-radius:2px}
.ig-title{
  font-size:26px;font-weight:800;letter-spacing:-.4px;color:#1c1f2a;
  margin-top:8px;line-height:1.18;
}
.ig-title .accent{
  background:linear-gradient(90deg,#5b5dd9 0%,#c9529e 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ig-sub{
  font-size:14.5px;color:#5a6273;margin-top:10px;max-width:680px;line-height:1.6;
}
.ig-section h3.ig-h3{
  font-size:14.5px;font-weight:800;color:#1c1f2a;margin-top:18px;margin-bottom:8px;
  letter-spacing:-.1px;
}
.ig-section p.ig-p{font-size:14.5px;color:#3a3f4f;line-height:1.65;margin-top:8px}

/* === HERO Section (gradient card) ============================== */
.ig-hero{
  position:relative;overflow:hidden;border-radius:22px;color:#ffffff;
  padding:38px 44px 36px;border:none;
  background:
    radial-gradient(900px 380px at -10% 30%,rgba(91,93,217,.7),transparent 60%),
    radial-gradient(1100px 420px at 110% -20%,rgba(232,150,69,.45),transparent 60%),
    radial-gradient(900px 600px at 50% 130%,rgba(201,82,158,.55),transparent 60%),
    linear-gradient(135deg,#1c1f2a 0%,#3a3eb8 40%,#7f56d9 75%,#c9529e 100%);
  box-shadow:0 22px 50px -18px rgba(58,62,184,.55),0 1px 0 rgba(255,255,255,.05) inset;
}
.ig-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:
    radial-gradient(2px 2px at 12% 22%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.5px 1.5px at 36% 78%,rgba(255,255,255,.4),transparent 60%),
    radial-gradient(2.5px 2.5px at 78% 18%,rgba(255,255,255,.5),transparent 60%),
    radial-gradient(1.2px 1.2px at 88% 65%,rgba(255,255,255,.4),transparent 60%);
  opacity:.55;mix-blend-mode:screen;
}
.ig-hero > *{position:relative;z-index:2}
.ig-hero .ig-eyebrow{color:rgba(255,255,255,.82)}
.ig-hero .ig-eyebrow::before{background:#3ecf8e;box-shadow:0 0 8px #3ecf8e}
.ig-hero .ig-title{color:#ffffff;font-size:38px;letter-spacing:-.6px}
.ig-hero .ig-title .accent{
  background:linear-gradient(90deg,#c8a85b 0%,#fbe6f2 60%,#8fb6ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.ig-hero .ig-sub{color:rgba(255,255,255,.88);font-size:15.5px;max-width:560px}

.ig-hero-layout{display:grid;grid-template-columns:1fr auto;gap:36px;align-items:center;margin-top:22px}
@media (max-width:980px){.ig-hero-layout{grid-template-columns:1fr}}
.ig-hero-figure{
  width:280px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.ig-hero-figure img{width:100%;height:auto;max-height:360px;object-fit:contain;mix-blend-mode:screen;filter:drop-shadow(0 20px 40px rgba(0,0,0,.4))}

/* Stat cards row inside hero */
.ig-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:26px}
@media (max-width:780px){.ig-stats{grid-template-columns:repeat(2,1fr)}}
.ig-stat{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  border-radius:13px;padding:14px;backdrop-filter:blur(10px);
}
.ig-stat-ic{
  width:32px;height:32px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.18);font-size:15px;margin-bottom:10px;color:#ffffff;font-weight:700;
}
.ig-stat-num{font-size:18px;font-weight:800;color:#ffffff;display:block;letter-spacing:-.2px;line-height:1.1}
.ig-stat-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:1.4px;color:rgba(255,255,255,.72);font-weight:700;display:block;margin-top:4px}

/* === Step Path (numbered horizontal flow) ====================== */
.ig-steps{
  display:grid;grid-template-columns:repeat(var(--steps,4),1fr);gap:14px;margin-top:20px;
  counter-reset:step;
}
@media (max-width:880px){.ig-steps{grid-template-columns:1fr;gap:10px}}
.ig-step{
  position:relative;padding:20px 18px 18px;border-radius:13px;
  background:linear-gradient(180deg,#fafbfd 0%,#f3f4f8 100%);
  border:1px solid #e6e8f0;
}
.ig-step::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:-12px;left:14px;
  width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,#5b5dd9,#5b5dd9);color:#ffffff;font-size:12px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 10px -2px rgba(91,93,217,.5);
}
.ig-step h4{font-size:14.5px;font-weight:800;color:#1c1f2a;margin-top:6px;letter-spacing:-.1px}
.ig-step p{font-size:12.5px;color:#5a6273;margin-top:5px;line-height:1.5}
.ig-steps .ig-step:not(:last-child)::after{
  content:"→";position:absolute;right:-13px;top:50%;transform:translateY(-50%);
  color:#9098ad;font-size:16px;z-index:2;font-weight:700;
}
@media (max-width:880px){
  .ig-steps .ig-step:not(:last-child)::after{
    content:"↓";right:50%;top:auto;bottom:-14px;transform:translateX(50%);
  }
}

/* === Signal Card (Signatur / Nicht-Selbst) ===================== */
.ig-signal{
  display:flex;gap:18px;align-items:flex-start;padding:22px 24px;border-radius:14px;
  margin-top:6px;
}
.ig-signal.good{background:linear-gradient(135deg,#e8f5ed,#e8f5ed);border:1px solid #e8f5ed;color:#2c8a4f}
.ig-signal.shadow{background:linear-gradient(135deg,#fce4e8,#fce4e8);border:1px solid #fce4e8;color:#c84a3c}
.ig-signal.neutral{background:linear-gradient(135deg,#f0f1fc,#eaecfa);border:1px solid #cfd6e7;color:#3a3eb8}
.ig-signal-ic{
  width:46px;height:46px;border-radius:13px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;font-size:22px;color:#ffffff;font-weight:800;
  box-shadow:0 6px 14px -4px rgba(0,0,0,.18);
}
.ig-signal.good .ig-signal-ic{background:linear-gradient(135deg,#3ecf8e,#2c8a4f)}
.ig-signal.shadow .ig-signal-ic{background:linear-gradient(135deg,#ea4d64,#c84a3c)}
.ig-signal.neutral .ig-signal-ic{background:linear-gradient(135deg,#5b5dd9,#5b5dd9)}
.ig-signal-body{flex:1;min-width:0}
.ig-signal-body h4{font-size:17px;font-weight:800;line-height:1.25;letter-spacing:-.2px}
.ig-signal-body p{font-size:14px;margin-top:6px;line-height:1.6;color:inherit;opacity:.88;font-weight:500}
.ig-signal-body ul{margin-top:8px;padding-left:0;list-style:none}
.ig-signal-body ul li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.55;margin-top:6px;color:inherit;opacity:.86}
.ig-signal-body ul li::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.6;position:absolute;left:4px;top:8px}

/* === Trait Grid (icon cards) ==================================== */
.ig-trait-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:14px}
@media (max-width:780px){.ig-trait-grid{grid-template-columns:1fr}}
.ig-trait-grid.cols-3{grid-template-columns:repeat(3,1fr)}
@media (max-width:980px){.ig-trait-grid.cols-3{grid-template-columns:repeat(2,1fr)}}
@media (max-width:780px){.ig-trait-grid.cols-3{grid-template-columns:1fr}}
.ig-trait{
  padding:18px;border-radius:13px;background:#fafbfd;border:1px solid #e6e8f0;
  display:flex;gap:14px;align-items:flex-start;
}
.ig-trait-ic{
  width:38px;height:38px;border-radius:10px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#ffffff;font-size:15px;font-weight:700;
  background:linear-gradient(135deg,#5b5dd9,#5b5dd9);
  box-shadow:0 4px 10px -2px rgba(91,93,217,.4);
}
.ig-trait-ic.warm{background:linear-gradient(135deg,#e89645,#e89645);box-shadow:0 4px 10px -2px rgba(232,150,69,.4)}
.ig-trait-ic.pink{background:linear-gradient(135deg,#e665c4,#c9529e);box-shadow:0 4px 10px -2px rgba(201,82,158,.4)}
.ig-trait-ic.green{background:linear-gradient(135deg,#3ecf8e,#2c8a4f);box-shadow:0 4px 10px -2px rgba(44,138,79,.4)}
.ig-trait-ic.indigo{background:linear-gradient(135deg,#5b5dd9,#3a3eb8)}
.ig-trait-ic.rose{background:linear-gradient(135deg,#c9529e,#d63b78)}
.ig-trait-ic svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2}
.ig-trait-body{flex:1;min-width:0}
.ig-trait-body h4{font-size:14.5px;font-weight:800;color:#1c1f2a;margin-bottom:5px;letter-spacing:-.1px;line-height:1.25}
.ig-trait-body p{font-size:13px;color:#5a6273;line-height:1.55}
.ig-trait-body ul{padding-left:0;margin-top:4px;list-style:none}
.ig-trait-body ul li{font-size:13px;color:#5a6273;line-height:1.55;position:relative;padding-left:14px;margin-top:4px}
.ig-trait-body ul li::before{content:"";width:5px;height:5px;border-radius:50%;background:#9098ad;position:absolute;left:2px;top:8px}

/* === Pull Quote ================================================ */
.ig-pull{
  margin-top:18px;padding:26px 30px;border-radius:14px;
  background:linear-gradient(135deg,#eaecfa,#ede7f9);
  border:1px solid #cfd6e7;position:relative;
}
.ig-pull::before{
  content:"\201E";font-size:64px;font-weight:700;color:#5b5dd9;opacity:.35;
  position:absolute;top:-10px;left:14px;font-family:Georgia,serif;line-height:1;
}
.ig-pull p{font-size:17px;font-weight:600;color:#1c1f2a;line-height:1.5;font-style:italic;padding-left:22px}
.ig-pull.warm{background:linear-gradient(135deg,#fef4e0,#fef4e0);border-color:#fef4e0}
.ig-pull.warm::before{color:#e89645}

/* === Question Cards (Fragestellungen) ========================== */
.ig-q-group{margin-top:18px}
.ig-q-group:first-child{margin-top:0}
.ig-q-group h4{
  font-size:11px;text-transform:uppercase;letter-spacing:1.6px;color:#5b5dd9;font-weight:800;
  margin-bottom:10px;display:flex;align-items:center;gap:8px;
}
.ig-q-group h4::before{content:"";width:18px;height:2px;background:#5b5dd9;border-radius:2px}
.ig-q-list{display:flex;flex-direction:column;gap:8px}
.ig-q{
  padding:13px 16px 13px 12px;border-radius:11px;background:#fafbfd;border:1px solid #e6e8f0;
  font-size:13.5px;color:#1c1f2a;font-weight:500;display:flex;gap:10px;align-items:flex-start;line-height:1.45;
}
.ig-q::before{
  content:"?";color:#ffffff;background:linear-gradient(135deg,#5b5dd9,#5b5dd9);
  width:22px;height:22px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;
  flex-shrink:0;
}

/* === Bullet list visual ======================================== */
.ig-bullets{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.ig-bullet{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#3a3f4f;line-height:1.6}
.ig-bullet::before{
  content:"";width:6px;height:6px;border-radius:50%;background:#5b5dd9;flex-shrink:0;margin-top:9px;
}
.ig-bullet strong{color:#1c1f2a;font-weight:700}

/* === Sound visualization (Potenzial, Bauchgefühl) ============= */
.ig-sounds{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:14px}
@media (max-width:680px){.ig-sounds{grid-template-columns:1fr}}
.ig-sound{
  padding:18px 16px;border-radius:13px;text-align:center;
  background:#fafbfd;border:1px solid #e6e8f0;
}
.ig-sound-glyph{
  font-size:22px;font-weight:800;color:#5b5dd9;font-family:Georgia,serif;line-height:1;display:block;
}
.ig-sound.yes{background:linear-gradient(180deg,#e8f5ed,#ffffff);border-color:#e8f5ed}
.ig-sound.yes .ig-sound-glyph{color:#2c8a4f}
.ig-sound.no{background:linear-gradient(180deg,#fce4e8,#ffffff);border-color:#fce4e8}
.ig-sound.no .ig-sound-glyph{color:#c84a3c}
.ig-sound.wait{background:linear-gradient(180deg,#fef4e0,#ffffff);border-color:#c8a85b}
.ig-sound.wait .ig-sound-glyph{color:#a06b1c}
.ig-sound-lbl{font-size:11px;text-transform:uppercase;letter-spacing:1.4px;color:#9098ad;font-weight:800;margin-top:8px;display:block}
.ig-sound-meaning{font-size:13px;color:#3a3f4f;margin-top:6px;line-height:1.5;font-weight:500}

/* === Paginator (Coisar-Stil) =================================== */
.ig-paginator{
  display:flex;justify-content:space-between;align-items:center;
  margin-top:26px;padding-top:18px;border-top:1px solid #e6e8f0;font-size:13px;color:#9098ad;
}
.ig-page-info strong{color:#1c1f2a;font-weight:800}
.ig-page-buttons{display:flex;gap:8px}
.ig-page-btn{
  display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:9px;
  background:#ffffff;border:1px solid #e6e8f0;color:#3a3f4f;font-weight:600;font-size:13px;
  text-decoration:none;transition:border-color .15s,color .15s,transform .12s;
}
.ig-page-btn:hover{border-color:#5b5dd9;color:#5b5dd9;transform:translateY(-1px)}
.ig-page-btn.disabled{opacity:.4;pointer-events:none;cursor:not-allowed}
.ig-page-btn svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2}

/* === Highlight Strip (Lebenseinstellung, Brückenbauer etc) ==== */
.ig-highlight{
  display:flex;gap:18px;align-items:center;padding:22px 24px;border-radius:14px;
  background:linear-gradient(135deg,#5b5dd9 0%,#7a4ed9 100%);color:#ffffff;margin-top:6px;
  box-shadow:0 14px 30px -12px rgba(91,93,217,.5);
}
.ig-highlight-ic{
  width:54px;height:54px;border-radius:14px;flex-shrink:0;
  background:rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;
  font-size:24px;color:#ffffff;
}
.ig-highlight-body h4{font-size:18px;font-weight:800;letter-spacing:-.2px;line-height:1.25}
.ig-highlight-body p{font-size:14px;color:rgba(255,255,255,.88);margin-top:4px;line-height:1.55}

</style><link rel="stylesheet" href="coisar-tokens.css?v=1779450114" data-coisar-tokens="css">
<link rel="stylesheet" href="coisar-mobile.css?v=1779450114" data-coisar-mobile="css">
<link rel="stylesheet" href="coisar-mvp.css?v=1779450114" data-coisar-mvp="css">
</head>
<body class="typ2-page">
<a class="coisar-skip-link" href="#coisar-main">Zum Inhalt springen</a>
<div class="app">
<header class="topbar" data-coisar-topbar="full"><a class="brand" href="index.html" style="text-decoration:none"><img src="images/logo-coisar-schwarz.png" alt="COISAR" style="height:26px;width:auto;display:block" width="400" height="59" decoding="async" data-coisar-dim></a>
  <div class="worlds">
    <a class="world chart active" href="bodygraph.html"><span class="dot"></span><span>Chart</span></a>
    <a class="world soma" href="soma-neu.html"><span class="dot"></span><span>Soma</span></a>
    <a class="world store" href="store.html"><span class="dot"></span><span>Store</span></a>
  </div>
  <span class="tb-spacer"></span>
  <button class="cmdk-trigger" onclick="openCmdK()">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
    <span class="text">In allen Welten suchen…</span>
    <kbd>⌘K</kbd>
  </button>
  <div class="nf-wrap" id="nfWrap" onclick="event.stopPropagation()">
  <button class="tb-icon nf-trigger" id="nfTrigger" title="Benachrichtigungen" aria-haspopup="true" onclick="toggleNotif(event)">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="M18 8a6 6 0 0 0-12 0c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg><span class="pip"></span>
  </button>
  <div class="nf-panel" id="nfPanel" role="dialog" aria-label="Benachrichtigungen">
    <div class="nf-head">
      <h3>Benachrichtigungen</h3>
      <button class="nf-mark-all" id="nfMarkAll" type="button" onclick="markAllNotif(event)">Alle als gelesen</button>
.layout.t2-layout .profile-toc{
  position:sticky;top:88px;padding:22px 14px;background:transparent;
  border-left:1px solid #e6e8f0;max-height:calc(100vh - 100px);overflow-y:auto;
}
/* Generic TOC styles — apply to every `.profile-toc` regardless of the
   page-specific suffix class (typ2-toc / chart2-toc / au2-toc / …). */
.profile-toc{position:sticky;top:88px;padding:22px 14px;background:transparent;border-left:1px solid #e6e8f0;max-height:calc(100vh - 100px);overflow-y:auto}
.profile-toc .toc-label{color:#9098ad;font-size:10px;letter-spacing:1.8px;font-weight:800;text-transform:uppercase;padding:0 10px 12px}
.profile-toc .toc-link{display:block;font-size:12.5px;color:#5a6273;padding:6px 10px;border-radius:8px;text-decoration:none;font-weight:500;line-height:1.3;position:relative}
.profile-toc .toc-link::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);height:0;width:2px;background:#5b5dd9;opacity:0;border-radius:2px;transition:height .15s,opacity .15s}
.profile-toc .toc-link.active{color:#5b5dd9;background:rgba(91,93,217,.08);font-weight:700}
.profile-toc .toc-link.active::before{height:60%;opacity:1}
.profile-toc .toc-link:hover{background:rgba(91,93,217,.06);color:#1c1f2a}
@media (max-width:980px){
  .layout.t2-layout{grid-template-columns:1fr}
  .layout.t2-layout .profile-toc, .profile-toc{display:none}
}

/* ── Tore / Talente index styles (lifted from click-dummy `tore.html`
   inline <style> + coisar-infographic.css). Used by /gates and /talents
   index pages to match the click-dummy infographic look. */

/* Hero pair (Persönlichkeit + Design summary cards). */
.tore-hero-pair{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:14px;margin-top:24px;
  max-width:580px;
}
@media (max-width:680px){.tore-hero-pair{grid-template-columns:1fr;gap:8px}.tore-hero-op{transform:rotate(90deg)}}
.tore-hero-card{
  padding:18px 20px;border-radius:13px;color:#ffffff;
  display:flex;flex-direction:column;gap:6px;align-items:flex-start;
  position:relative;overflow:hidden;
}
.tore-hero-card.persoen{
  background:linear-gradient(135deg,rgba(91,93,217,.35),rgba(91,93,217,.5));
  border:1px solid rgba(91,93,217,.55);
}
.tore-hero-card.design{
  background:linear-gradient(135deg,rgba(200,168,91,.3),rgba(160,107,28,.45));
  border:1px solid rgba(200,168,91,.55);
}
.tore-hero-ic{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:18px;color:#ffffff;
}
.tore-hero-card.persoen .tore-hero-ic{background:linear-gradient(135deg,#5b5dd9,#5b5dd9);box-shadow:0 6px 14px -4px rgba(91,93,217,.5)}
.tore-hero-card.design .tore-hero-ic{background:linear-gradient(135deg,#c8a85b,#a06b1c);box-shadow:0 6px 14px -4px rgba(160,107,28,.55);color:#ffffff}
.tore-hero-num{font-size:32px;font-weight:800;color:#ffffff;line-height:1;letter-spacing:-.6px;margin-top:2px}
.tore-hero-card h4{font-size:15px;font-weight:800;color:#ffffff;letter-spacing:-.1px}
.tore-hero-card p{font-size:12.5px;color:rgba(255,255,255,.82);line-height:1.5}
.tore-hero-op{
  align-self:center;font-size:26px;font-weight:300;color:rgba(255,255,255,.65);
  width:30px;height:30px;display:flex;align-items:center;justify-content:center;
}

/* Section header (Persönlichkeit Tore / Design Tore). */
.tore-sec-head{
  display:flex;align-items:center;gap:14px;
  padding:0 0 18px;margin-bottom:16px;border-bottom:1px solid #e6e8f0;
}
.tore-sec-ic{
  width:44px;height:44px;border-radius:11px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;color:#ffffff;
}
.tore-sec-ic svg{width:22px;height:22px;stroke:#ffffff;fill:none;stroke-width:2}
.tore-sec-ic.persoen{background:linear-gradient(135deg,#5b5dd9,#5b5dd9);box-shadow:0 8px 18px -8px rgba(91,93,217,.5)}
.tore-sec-ic.design{background:linear-gradient(135deg,#c8a85b,#a06b1c);box-shadow:0 8px 18px -8px rgba(160,107,28,.55)}
.tore-sec-body{flex:1;min-width:0}
.tore-sec-body h3{font-size:18px;font-weight:800;color:#1c1f2a;letter-spacing:-.3px;line-height:1.2}
.tore-sec-body p{font-size:13px;color:#5a6273;line-height:1.5;margin-top:3px}
.tore-sec-tag{
  font-size:10.5px;text-transform:uppercase;letter-spacing:1.4px;font-weight:800;
  padding:6px 12px;border-radius:50px;flex-shrink:0;
}
.tore-sec-tag.persoen{background:#eaecfa;color:#5b5dd9}
.tore-sec-tag.design{background:#fef4e0;color:#a06b1c}

/* Gate / talent card grid. */
.tk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:6px}
@media (max-width:780px){.tk-grid{grid-template-columns:1fr}}
.tk-card{
  display:flex;align-items:flex-start;gap:14px;padding:16px 18px;
  background:#ffffff;border:1px solid #e6e8f0;border-radius:14px;
  transition:border-color .15s,transform .12s,box-shadow .15s;position:relative;
  text-decoration:none;color:inherit;
}
.tk-card:hover{border-color:#cfd6e7;transform:translateY(-1px);box-shadow:0 10px 22px -12px rgba(91,93,217,.18)}
.tk-card-icon{
  flex-shrink:0;width:42px;height:42px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:18px;font-weight:700;color:#ffffff;
}
.tk-card.persoen .tk-card-icon{background:linear-gradient(135deg,#7a4ed9,#5b5dd9);box-shadow:0 6px 14px -4px rgba(122,78,217,.4)}
.tk-card.design  .tk-card-icon{background:linear-gradient(135deg,#c8a85b,#a06b1c);box-shadow:0 6px 14px -4px rgba(200,168,91,.4)}
.tk-card.talent  .tk-card-icon{background:linear-gradient(135deg,#3ecf8e,#2c8a4f);box-shadow:0 6px 14px -4px rgba(62,207,142,.4)}
.tk-card-body{flex:1;min-width:0}
.tk-card-num{
  font-size:18px;font-weight:800;color:#1c1f2a;letter-spacing:-.3px;line-height:1;
  margin-bottom:4px;
}
.tk-card.persoen .tk-card-num{color:#5b5dd9}
.tk-card.design  .tk-card-num{color:#a06b1c}
.tk-card.talent  .tk-card-num{color:#2c8a4f}
.tk-card-body h4{font-size:15px;font-weight:700;color:#1c1f2a;letter-spacing:-.2px;margin:0 0 4px}
.tk-card-body p{font-size:13px;color:#5a6273;line-height:1.55;margin:0}
.tk-card-tag{
  position:absolute;top:14px;right:16px;
  font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;
  padding:3px 9px;border-radius:50px;background:#f3f4f8;color:#9098ad;
}

/* Energiezentren — lifted from docs/references/click-dummy/tore.html
   §"Energiezentren-Grid (3x3)". Shared by /energy-centers (index +
   detail). */
.zentren-toolbar{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap;align-items:center}
.zentren-toolbar .zt-lbl{font-size:12.5px;color:#9098ad;font-weight:600;margin-right:4px}
.zentren-toolbar button{
  font-family:inherit;font-size:12.5px;font-weight:600;letter-spacing:.1px;
  padding:7px 14px;border-radius:50px;border:1px solid #e6e8f0;background:#ffffff;color:#5a6273;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s;
}
.zentren-toolbar button:hover{border-color:#cfd6e7;color:#1c1f2a}
.zentren-toolbar button.active{background:#1c1f2a;color:#ffffff;border-color:#1c1f2a}

.zentren-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
@media (max-width:880px){.zentren-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:540px){.zentren-grid{grid-template-columns:1fr}}
.zentrum{
  background:#ffffff;border:1px solid #e6e8f0;border-radius:16px;padding:18px 18px 20px;
  position:relative;transition:border-color .15s,transform .12s,box-shadow .15s;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;
  user-select:none;text-decoration:none;color:inherit;
}
.zentrum:hover{border-color:#cfd6e7;transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(91,93,217,.18)}
.zentrum.defined{border-color:#5b5dd9;background:linear-gradient(160deg,#f3f4f8,#f0f1fc)}
.zentrum-img{
  width:120px;height:120px;display:flex;align-items:center;justify-content:center;
  margin-top:2px;
}
.zentrum-img img{
  max-width:100%;max-height:100%;display:block;
  transition:transform .15s,filter .2s,opacity .15s;
}
.zentrum:hover .zentrum-img img{transform:scale(1.05)}
/* SVG portraits ship purple-gradient. For "offen" centers, desaturate
   so the card visually reads as inactive without needing a 2nd asset. */
.zentrum.undefined .zentrum-img img{filter:grayscale(1) opacity(.45)}
.zentrum.undefined:hover .zentrum-img img{filter:grayscale(.6) opacity(.7)}
.zentrum-tag{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  padding:4px 10px;border-radius:50px;
  background:#f3f4f8;color:#9098ad;
}
.zentrum.defined .zentrum-tag{background:#ede7f9;color:#5b5dd9}
.zentrum h4{font-size:15px;font-weight:700;color:#1c1f2a;letter-spacing:-.2px;margin:0}
.zentrum p{font-size:12.5px;color:#5a6273;line-height:1.55;margin:0;max-width:200px}
.zentrum-toggle{
  position:absolute;top:12px;right:12px;font-size:11px;font-weight:600;
  color:#9098ad;opacity:0;transition:opacity .15s;pointer-events:none;
}
.zentrum:hover .zentrum-toggle{opacity:1}