/* ISMS-GRC-WEB V2.20 — Darstellungsebene auf Basis des Nocturne Design Systems.
   Keine externen Webfonts oder automatisch geladenen Internet-Ressourcen: Die Site bleibt vollständig intern/offline nutzbar.
   Inhalte, Struktur und Reihenfolge der Seiten bleiben unverändert; hier wird
   ausschließlich die visuelle Ebene definiert. */

:root{
  /* Nocturne tokens */
  --nb:#161826;            /* Grund */
  --nb-2:#12141f;          /* tieferer Grund */
  --surface-1:#20222f;
  --surface-2:#262936;
  --text:#e9e9ed;
  --n100:#f3f5fe;--n200:#e4e7f5;--n300:#cfd3e5;--n400:#b2b6ca;--n500:#9397ab;
  --n600:#75798c;--n700:#595d6c;--n800:#3f424d;--n900:#292b31;
  --a:#9184d9;--a300:#d2cefd;--a400:#b5abfc;--a500:#968ae0;--a600:#796cbf;
  --a700:#5d5294;--a800:#423a6a;--a900:#2b2741;
  --section-ground:#262a60;
  --divider:rgba(233,233,237,.16);
  --hair:rgba(233,233,237,.10);
  --radius-sm:4px;--radius-md:8px;--radius-lg:14px;
  --shadow-sm:0 0 0 1px var(--n800);
  --shadow-md:0 0 0 1px var(--n800),0 6px 18px rgba(0,0,0,.5);
  --font:"Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;

  /* Kompatibilität: Variablennamen aus dem Bestand (u. a. Inline-Styles) */
  --bg:var(--nb);--bg2:var(--nb-2);--panel:var(--surface-1);--panel2:var(--surface-2);
  --ink:var(--text);--muted:var(--n400);--accent:var(--a);--accent2:var(--a300);
  --line:var(--divider);--white:#f3f5fe;--dark:#12141f;
  --surface:var(--surface-1);--accent-soft:rgba(145,132,217,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--nb);color:var(--text);
  font-family:var(--font);font-size:16.5px;line-height:1.72;font-weight:400;
  letter-spacing:-.003em;text-rendering:optimizeLegibility;
}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 520px at 82% -6%,rgba(145,132,217,.13),transparent 70%),
    radial-gradient(760px 460px at 4% 108%,rgba(145,132,217,.07),transparent 70%);
}
::selection{background:rgba(145,132,217,.3)}
:focus{outline:none}
:focus-visible{outline:2px solid var(--a);outline-offset:2px;border-radius:2px}
img{display:block;max-width:100%}
figure{margin:0}
b,strong{font-weight:600;color:var(--n100)}
a{color:var(--a);text-decoration:none;text-underline-offset:3px}
a:hover{color:var(--a400);text-decoration:underline}

/* ── Typografie ─────────────────────────────────────────────────────────── */
h1,h2,h3,h4{font-family:var(--font);font-weight:500;line-height:1.1;letter-spacing:-.022em;color:var(--n100);margin:0 0 14px;text-wrap:pretty}
h1{font-size:clamp(38px,4.6vw,66px);line-height:1.04;letter-spacing:-.032em;margin:0 0 22px}
h2{font-size:clamp(26px,2.7vw,40px);margin:0 0 18px}
h3{font-size:20px;letter-spacing:-.014em;margin:0 0 8px}
p{margin:0 0 14px;text-wrap:pretty}
.eyebrow,.kicker{
  display:block;font-size:11px;font-weight:600;letter-spacing:.19em;text-transform:uppercase;
  color:var(--a300);margin:0 0 16px;
}
.lead{font-size:clamp(18px,1.5vw,21.5px);line-height:1.6;max-width:62ch;color:var(--n300);font-weight:400}
.intro{max-width:74ch;color:var(--n400)}
blockquote{margin:0}
hr{border:0;height:1px;background:linear-gradient(to right,transparent,var(--divider) 48px,var(--divider) calc(100% - 48px),transparent)}

/* ── Rahmen ─────────────────────────────────────────────────────────────── */
.wrap{max-width:1340px;margin:auto;padding:34px 40px 72px}

.topbar{
  display:grid;grid-template-columns:auto 1fr;gap:10px 28px;align-items:center;
  padding:6px 0 26px;margin-bottom:26px;position:relative;
}
.topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:linear-gradient(to right,transparent,var(--divider) 48px,var(--divider) calc(100% - 260px),transparent);
}
.identity{
  grid-column:1/-1;display:flex;flex-direction:row;align-items:center;gap:8px 18px;flex-wrap:wrap;
  padding:0 0 18px;font-size:12.5px;letter-spacing:0;
}
.identity strong{font-size:12.5px;font-weight:600;color:var(--n200)}
.identity span{color:var(--n500)}
.identity a{color:var(--n400)}
.identity a:hover{color:var(--a300);text-decoration:none}
.brand{
  display:block;font-size:17px;font-weight:600;letter-spacing:.03em;color:var(--n100);white-space:nowrap;
}
.brand:hover{color:var(--n100);text-decoration:none}
.brand small{display:block;margin-top:5px;font-size:9.5px;font-weight:500;letter-spacing:.2em;color:var(--a300);white-space:nowrap}
.nav{display:flex;gap:4px;flex-wrap:wrap;justify-self:end;align-items:center}
.nav a{
  padding:8px 12px;border-radius:var(--radius-md);border:1px solid transparent;
  font-size:13.5px;color:var(--n400);white-space:nowrap;
}
.nav a:hover{color:var(--n100);background:rgba(233,233,237,.055);text-decoration:none}
.nav a.active{color:var(--a300);border-color:rgba(145,132,217,.42)}

/* ── Startseiten-Hero ───────────────────────────────────────────────────── */
.hero{
  padding:62px 0 66px;border:0;border-radius:0;background:none;box-shadow:none;position:relative;
}
.hero .eyebrow{max-width:70ch;line-height:2;letter-spacing:.17em}
.hero h1{max-width:22ch}
.hero .lead{max-width:64ch;margin-top:4px}
.status{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px}
.status span{
  padding:6px 12px;border:1px solid var(--hair);border-radius:999px;
  font-size:11px;font-weight:500;letter-spacing:.11em;text-transform:uppercase;color:var(--n500);
}

/* ── Suche ──────────────────────────────────────────────────────────────── */
.search{margin-top:38px;position:relative;max-width:640px}
.search input{
  width:100%;padding:15px 18px;font-family:var(--font);font-size:15px;color:var(--text);
  background:var(--surface-1);border:1px solid var(--n800);border-radius:var(--radius-md);
}
.search input::placeholder{color:var(--n600)}
.search input:hover{border-color:var(--n700)}
.search input:focus{border-color:var(--a);outline:none}
.search-results{
  display:none;margin-top:10px;padding:8px;background:var(--surface-1);
  border:1px solid var(--n800);border-radius:var(--radius-md);box-shadow:var(--shadow-md);
}
.search-results.show{display:block}
.search-item{
  display:block;padding:11px 12px;border-radius:var(--radius-sm);
  color:var(--n200);font-size:14px;border-bottom:1px solid var(--hair);
}
.search-item:last-child{border-bottom:0}
.search-item:hover{background:rgba(145,132,217,.1);color:var(--n100);text-decoration:none}
.search-item small{display:block;color:var(--n500);font-size:12px}

/* ── Abschnitte ─────────────────────────────────────────────────────────── */
.section{
  position:relative;margin:0;padding:64px 0 0;border:0;border-radius:0;background:none;
}
.section::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,var(--divider) 48px,var(--divider) calc(100% - 48px),transparent);
}
.hero+.section{padding-top:56px}
.section>h2{max-width:34ch}
.section>.intro{margin-bottom:6px}

/* ── Innenseiten ────────────────────────────────────────────────────────── */
.page-layout{display:grid;grid-template-columns:252px 1fr;gap:56px;align-items:start}
.side{
  position:sticky;top:26px;align-self:start;padding:0 22px 0 0;border:0;border-radius:0;
  background:none;border-right:1px solid var(--hair);
}
.side .kicker{margin:0 0 14px;font-size:10px;letter-spacing:.2em;color:var(--n600)}
.side a{
  display:block;padding:6px 0 6px 13px;margin-left:-1px;font-size:13.5px;line-height:1.4;
  color:var(--n400);border-left:2px solid transparent;
}
.side a:hover{color:var(--n100);border-left-color:var(--n700);text-decoration:none}
.side a.active,.side .active{color:var(--a300);font-weight:500;border-left-color:var(--a)}
.side hr{margin:18px 0 16px;background:var(--hair) !important;border-color:transparent !important}
.article{min-width:0;padding-bottom:20px}
.pagehero{padding:2px 0 26px}
.pagehero h1{font-size:clamp(32px,3.4vw,50px);max-width:26ch}
.pagehero .lead,.pagehero p{max-width:66ch}

.footer{
  margin-top:72px;padding:26px 0 0;position:relative;
  text-align:left;color:var(--n600);font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;
}
.footer::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,var(--divider),var(--divider) calc(100% - 48px),transparent);
}

/* ── Karten & Raster ────────────────────────────────────────────────────── */
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px;align-items:stretch}
.grid.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.card{
  display:flex;flex-direction:column;padding:22px 22px 24px;
  background:linear-gradient(168deg,var(--surface-2),var(--surface-1) 70%);
  color:var(--n200);border:1px solid var(--n800);border-radius:var(--radius-md);box-shadow:none;
}
a.card{width:100%;transition:border-color .18s,transform .18s,background .18s}
a.card:hover{border-color:rgba(145,132,217,.55);transform:translateY(-2px);text-decoration:none;color:var(--n200)}
a.card:active{transform:none}
.card h3{color:var(--n100)}
.card p{font-size:14px;line-height:1.6;color:var(--n400);margin-bottom:0}
.card p+p{margin-top:10px}
.card p:last-child{margin-bottom:0}
.card>.tag{margin-bottom:10px}
.tag{
  display:inline-block;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--a300);
}
.grid>.card,.grid>a.card,.grid.equal-cards>.card{height:100%}

.triad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:22px;align-items:stretch}
.mini{
  display:flex;flex-direction:column;height:100%;padding:18px 18px 20px;
  background:var(--surface-1);color:var(--n300);border:1px solid var(--n800);border-radius:var(--radius-md);
  font-size:14px;line-height:1.6;
}
.mini b{display:block;margin-bottom:6px;font-size:15px;font-weight:600;color:var(--n100);letter-spacing:-.01em}
.mini span{display:block;color:var(--n400);line-height:1.55}
.mini p{color:var(--n400);font-size:14px}
.mini p:last-child{margin-bottom:0}

/* ── Schrittfolgen ──────────────────────────────────────────────────────── */
.steps{display:grid;gap:10px;margin-top:24px}
.step{
  display:grid;grid-template-columns:40px 1fr;gap:18px;align-items:start;
  padding:18px 20px;border:1px solid var(--hair);border-radius:var(--radius-md);
  background:rgba(233,233,237,.022);
}
.step:hover{border-color:var(--n800)}
.step b{color:var(--n100);font-weight:600}
.step p{color:var(--n400);margin-bottom:0;font-size:15px}
.step p+p{margin-top:8px}
.num{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:transparent;border:1px solid rgba(145,132,217,.5);
  color:var(--a300);font-size:13px;font-weight:600;letter-spacing:.02em;
}

/* ── Hinweise ───────────────────────────────────────────────────────────── */
.note,.callout,.role-note,.learn-note{
  margin:26px 0;padding:18px 22px;border:0;border-left:2px solid var(--a);
  border-radius:0 var(--radius-md) var(--radius-md) 0;
  background:rgba(145,132,217,.075);color:var(--n300);font-size:15px;
}
.note b,.callout b,.role-note b,.learn-note b{color:var(--n100)}
.note p:last-child,.callout p:last-child,.role-note p:last-child,.learn-note p:last-child{margin-bottom:0}
.termhint{margin:-8px 0 14px;font-size:13px;color:var(--n500)}

/* ── Aktion ─────────────────────────────────────────────────────────────── */
.button,.case-link{
  display:inline-flex;align-items:center;gap:8px;padding:10px 16px;
  border:1px solid var(--a);border-radius:var(--radius-md);background:transparent;
  color:var(--a300) !important;font-size:14px;font-weight:500;letter-spacing:0;
}
.button:hover,.case-link:hover{background:rgba(145,132,217,.12);text-decoration:none}
.button:active,.case-link:active{background:rgba(145,132,217,.22)}

/* ── Kernmodell auf der Startseite ──────────────────────────────────────── */
.grc-stack{display:flex;flex-direction:column;gap:8px;margin-top:26px}
.stack-level{
  padding:20px 24px;border:1px solid var(--hair);border-radius:var(--radius-md);
  background:rgba(233,233,237,.022);text-align:left;
}
.stack-level b{display:block;font-size:12px;font-weight:600;letter-spacing:.17em;color:var(--a300)}
.stack-level span{display:block;margin-top:7px;color:var(--n400);font-size:15px}
.stack-level.strong{background:rgba(145,132,217,.09);border-color:rgba(145,132,217,.4)}
.stack-arrow{padding:2px 0 2px 26px;font-size:15px;color:var(--n700);line-height:1}
.lifecycle-flow,.relation-flow{
  display:flex;gap:8px;align-items:center;justify-content:flex-start;flex-wrap:wrap;
  padding:20px 24px;border:1px solid var(--hair);border-radius:var(--radius-md);
  background:rgba(233,233,237,.022);
}
.lifecycle-flow span,.relation-flow span{
  padding:6px 11px;border-radius:999px;border:1px solid var(--hair);background:transparent;
  font-size:11px;font-weight:600;letter-spacing:.11em;color:var(--n300);
}
.lifecycle-flow b,.relation-flow b{color:var(--a);font-size:12px;font-weight:400}
.lens-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:8px}
.lens-row>span{
  padding:14px 16px;border:1px solid var(--hair);border-radius:var(--radius-md);text-align:left;
  font-size:11px;font-weight:600;letter-spacing:.15em;color:var(--n300);
}
.lens-row.big>span{padding:20px;font-size:12px}
.lens-row small{display:block;margin-top:8px;font-weight:400;letter-spacing:0;text-transform:none;color:var(--n500);font-size:13px}

.principle-grid,.assessment-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px;align-items:stretch}
.assessment-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.principle-grid>div,.assessment-grid>div{
  height:100%;padding:20px;border:1px solid var(--n800);border-radius:var(--radius-md);
  background:var(--surface-1);
}
.principle-grid b,.assessment-grid b{display:block;margin-bottom:7px;font-size:15px;color:var(--n100)}
.principle-grid span,.assessment-grid p{color:var(--n400);font-size:14px}
.assessment-grid>div>span{
  display:inline-grid;place-items:center;width:28px;height:28px;margin-bottom:12px;border-radius:50%;
  background:transparent;border:1px solid rgba(145,132,217,.5);color:var(--a300);font-size:12px;font-weight:600;
}

.object-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px;align-items:stretch}
.object-card{
  position:relative;height:100%;padding:20px;border:1px solid var(--n800);border-radius:var(--radius-md);
  background:var(--surface-1);
}
.object-card>span{
  display:block;margin-bottom:8px;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;
  color:var(--a300);line-height:1.4;
}
.object-card p{color:var(--n400);font-size:14px;margin-bottom:0}
.relation-box{
  display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:18px;padding:20px 24px;
  border:1px solid var(--hair);border-radius:var(--radius-md);
}
.relation-box span{font-weight:600;color:var(--n100)}
.relation-box b{color:var(--n500);font-size:12px;font-weight:400;letter-spacing:.06em}

.comparison{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px;align-items:stretch}
.comparison>div,.comparison>.card{
  height:100%;padding:22px;border:1px solid var(--n800);border-radius:var(--radius-md);
  background:var(--surface-1);color:var(--n300);
}
.comparison h3,.comparison>.card h3{color:var(--n100)}
.comparison p,.comparison li,.comparison>.card p{color:var(--n400);font-size:14.5px}
.comparison .bad,.comparison .good{display:block;margin-bottom:8px;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.comparison .bad{color:var(--n500)}
.comparison .good{color:var(--a300)}

.mapping-types{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.mapping-types span{
  padding:7px 13px;border-radius:999px;border:1px solid var(--hair);background:transparent;
  font-size:12.5px;font-weight:500;color:var(--n300);
}
.flow-columns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:24px;align-items:stretch}
.flow-columns>div{height:100%;padding:22px;border:1px solid var(--n800);border-radius:var(--radius-md);background:var(--surface-1)}
.flow-columns b{color:var(--a300);font-weight:600}
.flow-columns p{color:var(--n400);font-size:14.5px}

/* ── Praxisfall ─────────────────────────────────────────────────────────── */
.case-strip{
  display:grid;grid-template-columns:auto auto 1fr;gap:6px 18px;align-items:center;
  margin:0 0 34px;padding:18px 22px;border:1px solid var(--hair);border-radius:var(--radius-md);
  background:rgba(145,132,217,.05);
}
.case-label{
  writing-mode:vertical-rl;transform:rotate(180deg);
  font-size:9.5px;font-weight:600;letter-spacing:.18em;color:var(--n600);
}
.case-step{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:transparent;border:1px solid rgba(145,132,217,.5);color:var(--a300);
  font-size:12px;font-weight:600;
}
.case-strip p{margin:2px 0;color:var(--n300);font-size:15px}
.case-strip .case-link{margin-top:10px;font-size:13px}
.case-timeline{display:flex;flex-direction:column;gap:10px;margin-top:24px}
.case-row{
  display:grid;grid-template-columns:38px 1fr;gap:18px;padding:18px 22px;
  border:1px solid var(--hair);border-radius:var(--radius-md);background:rgba(233,233,237,.022);
}
.case-row>span{
  width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:transparent;border:1px solid rgba(145,132,217,.5);color:var(--a300);font-size:12px;font-weight:600;
}
.case-row p{margin:4px 0 0;color:var(--n400)}
.story-intro{
  max-width:74ch;margin-top:26px;padding:0;border:0;border-radius:0;background:none;
}
.story-intro p{font-size:17px;line-height:1.7;color:var(--n300)}
.story-intro blockquote{
  margin:26px 0;padding:20px 26px;border-left:2px solid var(--a);
  background:rgba(145,132,217,.075);border-radius:0 var(--radius-md) var(--radius-md) 0;
  font-size:20px;line-height:1.5;color:var(--n200);
}
.story-intro blockquote strong{color:var(--n100)}
.story-intro .button{margin-top:8px}

/* ── Quellen ────────────────────────────────────────────────────────────── */
.source-list{display:grid;gap:10px;margin-top:24px}
.source-card{
  display:block;padding:20px 22px;border:1px solid var(--n800);border-radius:var(--radius-md);
  background:var(--surface-1);color:var(--n300);
}
.source-card:hover{border-color:rgba(145,132,217,.5);text-decoration:none}
.source-card p{color:var(--n400);margin:6px 0;font-size:14.5px}
.source-card span{display:block;font-size:11.5px;color:var(--a300);word-break:break-all;letter-spacing:.02em}

/* ── Begriffe ───────────────────────────────────────────────────────────── */
.glossary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:24px}
.term{
  padding:18px 20px;border:1px solid var(--hair);border-radius:var(--radius-md);
  background:rgba(233,233,237,.022);
}
.term strong{display:block;color:var(--n100);font-size:15px;margin-bottom:4px}
.term p{margin:4px 0 0;color:var(--n400);font-size:14px}
.term p:last-child{margin-bottom:0}
.term-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr));align-items:stretch}
.term-summary-grid>.card{height:100%}

/* ── Lernhilfen ─────────────────────────────────────────────────────────── */
.learning{
  margin:52px 0 0;padding:34px 0 0;border:0;border-radius:0;background:none;box-shadow:none;
  position:relative;overflow-x:auto;
}
.learning::before{
  content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(to right,transparent,var(--divider) 48px,var(--divider) calc(100% - 48px),transparent);
}
.learning h2{margin-top:0}
.learning .learnlead{font-size:17.5px;line-height:1.65;color:var(--n300);max-width:74ch}
.learn-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:24px;align-items:stretch}
.learn-grid.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.learn-step{
  height:100%;padding:18px;border:1px solid var(--n800);border-radius:var(--radius-md);
  background:var(--surface-1);color:var(--n300);
}
.learn-step b{display:block;margin-bottom:7px;color:var(--a300);font-size:14px;font-weight:600;letter-spacing:.01em}
.learn-step p{margin:0;color:var(--n400);font-size:14px;line-height:1.6}
.learn-flow{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:22px 0}
.learn-flow span{
  padding:7px 12px;border:1px solid var(--hair);border-radius:999px;background:transparent;
  color:var(--n300);font-size:12px;font-weight:500;
}
.learn-flow i{color:var(--a);font-style:normal;font-weight:400}
.learn-source{margin-top:20px;font-size:12.5px;color:var(--n500)}
.learn-source a{color:var(--a300);overflow-wrap:anywhere}

.mini-table{
  width:100%;min-width:620px;margin-top:22px;border-collapse:collapse;
  background:transparent;color:var(--n300);font-size:14.5px;
}
.mini-table th,.mini-table td{padding:13px 16px;border-bottom:1px solid var(--hair);text-align:left;vertical-align:top}
.mini-table th{
  background:transparent;color:var(--n500);font-size:10.5px;font-weight:600;
  letter-spacing:.15em;text-transform:uppercase;border-bottom:1px solid var(--divider);
}
.mini-table tr:last-child td{border-bottom:0}
.mini-table td b,.mini-table td strong{color:var(--n100)}

/* ── Werkzeug-Navigation ────────────────────────────────────────────────── */
.tool-context-nav{
  display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 0 30px;padding:0 0 18px;
  border:0;border-bottom:1px solid var(--hair);border-radius:0;background:none;
}
.tool-context-nav a{
  padding:6px 12px;border:1px solid transparent;border-radius:var(--radius-md);
  color:var(--n400);font-size:13px;
}
.tool-context-nav a:hover{color:var(--n100);background:rgba(233,233,237,.055);text-decoration:none}
.tool-context-nav a.active{color:var(--a300);border-color:rgba(145,132,217,.42);font-weight:500}
.tool-context-nav .scope{
  padding:6px 12px 6px 0;color:var(--n600);font-size:10px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;
}

/* ── Diagramme ──────────────────────────────────────────────────────────── */
.framework-figure{
  margin:30px 0 0;padding:0;background:transparent;border:1px solid var(--hair);
  border-radius:var(--radius-lg);overflow:hidden;
}
.framework-figure img{display:block;width:100%;height:auto;border-radius:0}
.framework-figure figcaption{
  margin:0;padding:16px 22px;font-size:13.5px;line-height:1.6;color:var(--n500);
  border-top:1px solid var(--hair);
}
.cycle-figure{padding:0;background:transparent;border-color:var(--hair);overflow-x:auto;overscroll-behavior-inline:contain;-webkit-overflow-scrolling:touch}
.cycle-figure img{border-radius:0;min-width:960px}
.cycle-figure figcaption{position:sticky;left:0;max-width:100vw;background:var(--surface-1)}
.relation-text-alt{
  margin-top:16px;padding:14px 18px;border:1px solid var(--hair);border-radius:var(--radius-md);
  background:rgba(233,233,237,.022);
}
.relation-text-alt summary{cursor:pointer;color:var(--a300);font-weight:500;font-size:14px}
.relation-text-alt p{color:var(--n400);line-height:1.6;font-size:14.5px;margin:12px 0 0}

/* ── Domänen-Raster ─────────────────────────────────────────────────────── */
.cyber-domain-grid{grid-auto-rows:1fr}
.cyber-domain-grid>.card{height:100%;min-height:0;justify-content:flex-start}
.cyber-domain-grid>.card h3{min-height:0;margin-bottom:10px}
.domain-interface-card{background:rgba(145,132,217,.08);border-color:rgba(145,132,217,.4)}
.domain-interface-card h3{color:var(--n100)}
.domain-interface-card p{color:var(--n300)}
.governance-management-grid{align-items:stretch}
.governance-management-grid>*{height:100%}

/* ── Responsiv ──────────────────────────────────────────────────────────── */
@media(max-width:1180px){
  .wrap{padding:28px 28px 60px}
  .page-layout{gap:40px;grid-template-columns:224px 1fr}
}
@media(max-width:1050px){
  .grid,.grid.four,.grid.three,.learn-grid,.learn-grid.six,.assessment-grid,
  .principle-grid,.object-grid,.flow-columns,.lens-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  .comparison{grid-template-columns:1fr}
  .page-layout{grid-template-columns:1fr;gap:30px}
  .side{
    position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 12px;
    padding:18px 0;border-right:0;border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  }
  .side .kicker{grid-column:1/-1;margin-bottom:4px}
  .side .status{grid-column:1/-1;margin-top:8px;gap:8px}
  .side a{padding:7px 0 7px 11px}
  .side hr{display:none}
  .topbar{grid-template-columns:1fr auto}
}
@media(max-width:820px){
  .side{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:680px){
  .wrap{padding:20px 18px 48px}
  body{font-size:16px}
  .nav{display:none}
  .hero{padding:36px 0 40px}
  .section{padding-top:44px}
  .grid,.grid.four,.grid.three,.triad,.glossary,.term-summary-grid,.learn-grid,.learn-grid.six,
  .assessment-grid,.principle-grid,.object-grid,.flow-columns,.lens-row{grid-template-columns:1fr !important}
  .side{grid-template-columns:1fr}
  .case-strip{grid-template-columns:1fr}
  .case-label{writing-mode:horizontal-tb;transform:none}
  .case-step{display:none}
  .step{grid-template-columns:32px 1fr;gap:14px;padding:16px}
  .learning{overflow-x:auto}
}