/* HIG Gruppe – Pitchdeck v2 · SB Media
   Weiß, ruhig, wenig Text. Rot nur als Element (Kachel, Fläche, Marker), nie als ganze Folie.
   Tokens aus der Marke (hig-gruppe.brkml.dev/marke): Signalrot #DB0F18, Warmschwarz, Creme,
   Plus Jakarta Sans, Radien 15/12/10, 0,7 s Aufblenden. */

@font-face {
  font-family: "Jakarta";
  src: url("assets/jakarta-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --red: #db0f18;
  --red-d: #a80c12;
  --red-50: #fdebe9;
  --ink: #241c1a;
  --muted: #6f645e;
  --line: #e0d6c5;
  --line-2: #bfb4a1;
  --cream: #fbf6ee;
  --stone: #f1f2f1;
  --white: #ffffff;
  --amber: #d98a00;
  --r-lg: 15px;
  --r: 12px;
  --r-sm: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --nav-w: 236px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--stone);
  color: var(--ink);
  font-family: "Jakarta", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

a { color: inherit; text-decoration: none; }

/* ---------- Bühne ---------- */
.stage { position: fixed; inset: 0; display: grid; place-items: center; overflow: hidden; transition: left .25s var(--ease); }
body.nav-on .stage { left: var(--nav-w); }

.slide {
  position: absolute;
  width: 1600px;
  height: 900px;
  background: var(--white);
  padding: 44px 120px 90px;
  display: none;
  flex-direction: column;
  transform: scale(var(--scale, 1));
}
.slide.is-active { display: flex; }

/* Fußzeile: links Absender, Mitte Kapitel-Leiste, rechts Seitenzahl */
.slide__foot {
  position: absolute;
  left: 120px; right: 120px; bottom: 36px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  font-size: 14px; color: var(--muted); letter-spacing: .02em;
}
.slide__foot .num { justify-self: end; font-weight: 500; }
.chapters { display: flex; gap: 6px; }
.chapters span {
  font-size: 12px; font-weight: 500; letter-spacing: .04em;
  width: 34px; height: 24px; border-radius: 999px;
  display: grid; place-items: center;
  color: var(--line-2); border: 1px solid var(--line);
}
.chapters span.is-on { background: var(--red); border-color: var(--red); color: var(--white); }
.chapters span.is-done { color: var(--muted); }

/* ---------- Kopf der Inhaltsfolien ---------- */
.kicker {
  position: absolute; top: 44px; right: 120px;
  display: flex; flex-direction: row-reverse; align-items: center; gap: 14px; min-height: 48px;
}
.kicker .no {
  width: 48px; height: 48px; border-radius: var(--r);
  background: var(--red); color: var(--white);
  display: grid; place-items: center;
  font-size: 20px; font-weight: 600; letter-spacing: -.01em;
}
.kicker .t { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); font-weight: 500; }

/* ---------- Typo ---------- */
h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -.028em; line-height: 1.08; }
h1 { font-size: 80px; }
h2 { font-size: 46px; font-weight: 500; margin-bottom: 44px; max-width: 1000px; }
h3 { font-size: 24px; letter-spacing: -.015em; }
p  { margin: 0; line-height: 1.5; }
.lead { font-size: 28px; color: var(--muted); line-height: 1.45; max-width: 1150px; }
.small { font-size: 17px; color: var(--muted); line-height: 1.5; }
strong { font-weight: 600; }
.red { color: var(--red); }
.muted { color: var(--muted); }

/* ---------- Aufzählung: Giebel als Marker, großzügiger Abstand ---------- */
.bullets { list-style: none; margin: 0; padding: 0; font-size: 27px; line-height: 1.35; }
.bullets li { position: relative; padding-left: 46px; margin-bottom: 24px; max-width: 1250px; }
.bullets li:last-child { margin-bottom: 0; }
.bullets li::before {
  content: ""; position: absolute; left: 0; top: .12em;
  width: 24px; height: 24px; background: var(--red);
  -webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%2711%27%3E%3Cpath%20d%3D%27M20%2088%20V31%20L50%2020%20L80%2031%20V88%27/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%20100%20100%27%20fill%3D%27none%27%20stroke%3D%27black%27%20stroke-width%3D%2711%27%3E%3Cpath%20d%3D%27M20%2088%20V31%20L50%2020%20L80%2031%20V88%27/%3E%3C/svg%3E") center / contain no-repeat;
}
.bullets.sm { font-size: 24px; }
.bullets.sm li { padding-left: 38px; margin-bottom: 16px; }
.bullets.sm li::before { width: 20px; height: 20px; top: .16em; }
.bullets li .sub { display: block; font-size: 19px; color: var(--muted); margin-top: 4px; }

/* ---------- Link zur Ressource (klickbar, öffnet neuen Tab) ---------- */
.resource {
  margin-top: auto; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 22px;
  padding: 10px 12px 10px 24px;
  background: var(--red); color: var(--white); border-radius: var(--r);
  font-size: 20px; transition: background-color .2s;
}
.resource:hover { background: var(--red-d); }
.resource .k { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--white); opacity: .8; font-weight: 500; }
.resource .u { font-weight: 500; }
.resource .go {
  width: 38px; height: 38px; border-radius: var(--r-sm); background: rgba(255,255,255,.16); color: var(--white);
  display: grid; place-items: center; font-size: 22px;
}

/* ---------- Titel & Danke: weiße Folie, rote Fläche als Element ---------- */
.slide--split { padding: 40px 40px 40px 120px; flex-direction: row; gap: 80px; }
.slide--split .main { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.slide--split .panel {
  width: 460px; flex: none; align-self: stretch;
  background: var(--red); border-radius: var(--r-lg);
  display: grid; place-items: center; color: var(--white); position: relative;
}
.slide--split .panel img { width: 220px; filter: brightness(0) invert(1); }
.slide--split .panel .cap {
  position: absolute; left: 36px; right: 36px; bottom: 32px;
  font-size: 15px; letter-spacing: .1em; text-transform: uppercase; opacity: .85;
}
.logos { display: flex; align-items: center; gap: 22px; margin-bottom: 72px; }
.logos img.hig { height: 60px; }
.logos .x { color: var(--line-2); font-size: 26px; }
.sb { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); }
.sb img { height: 34px; width: auto; }
.sb span { font-size: 32px; font-weight: 500; letter-spacing: -.02em; line-height: 1; }
.slide--split h1 { max-width: 900px; margin-bottom: 32px; }

/* ---------- Wer wir sind ---------- */
.team { display: flex; gap: 64px; margin-bottom: 52px; }
.person { display: flex; align-items: center; gap: 22px; }
.person img { width: 136px; height: 136px; object-fit: cover; object-position: top; border-radius: var(--r-lg); background: var(--stone); }
.person h3 { margin-bottom: 6px; }
.person p { font-size: 19px; color: var(--muted); }
.refs { margin-top: auto; padding-top: 32px; border-top: 1px solid var(--line); }
.refs .k { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 26px; }
.refs .row { display: flex; align-items: center; justify-content: space-between; gap: 32px; }
.refs img { height: 38px; width: auto; max-width: 150px; min-width: 0; flex: 0 1 auto; object-fit: contain; filter: brightness(0); opacity: .62; }
.refs .word { font-size: 20px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); opacity: .62; white-space: nowrap; }

/* ---------- Ablauf ---------- */
.toc { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.toc li {
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  padding: 26px 26px 24px; min-height: 196px;
  display: flex; flex-direction: column;
}
.toc .n { font-size: 15px; font-weight: 600; color: var(--red); letter-spacing: .04em; margin-bottom: auto; }
.toc h3 { font-size: 28px; margin: 36px 0 8px; }
.toc p { font-size: 17px; color: var(--muted); }
.toc .top { display: flex; justify-content: space-between; align-items: center; min-height: 26px; margin-bottom: auto; }
.toc .top .n { margin: 0; }
.toc .live { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; font-weight: 500; color: var(--red); border: 1px solid var(--red); border-radius: 999px; padding: 3px 10px; }
.toc li.is-note { background: var(--cream); border-color: var(--cream); justify-content: flex-end; }
.toc li.is-note p { font-size: 20px; color: var(--ink); line-height: 1.4; }

/* ---------- Kennzahlen ---------- */
.stats { display: flex; gap: 20px; margin-top: auto; }
.stat { flex: 1; background: var(--cream); border-radius: var(--r-lg); padding: 24px 28px; display: flex; align-items: baseline; gap: 16px; }
.stat .n { font-size: 48px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: var(--red); }
.stat .l { font-size: 19px; color: var(--muted); }

/* ---------- Anwendungsfall (HIG Connect live) ---------- */
.steps { list-style: none; margin: 0 0 32px; padding: 0; counter-reset: st; display: flex; flex-direction: column; gap: 12px; max-width: 1250px; }
.steps li { display: grid; grid-template-columns: 44px 300px 1fr; gap: 24px; align-items: baseline; padding-bottom: 12px; border-bottom: 1px solid var(--line); font-size: 22px; }
.steps li:last-child { border-bottom: 0; }
.steps li::before {
  counter-increment: st; content: counter(st);
  width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--red-50); color: var(--red);
  font-size: 17px; font-weight: 600; display: grid; place-items: center; align-self: center;
}
.steps .who { font-weight: 600; }
.steps .who small { display: block; font-size: 15px; font-weight: 400; color: var(--muted); margin-top: 2px; }
.steps .what { color: var(--ink); }

/* ---------- Technik & Betrieb ---------- */
.flow { display: flex; align-items: stretch; gap: 0; margin-bottom: 36px; }
.flow .node { flex: 1; border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 20px 22px; }
.flow .node.is-red { background: var(--red); border-color: var(--red); color: var(--white); }
.flow .node.is-red .l { color: var(--white); opacity: .85; }
.flow .node.is-ink { background: var(--ink); border-color: var(--ink); color: var(--white); }
.flow .node.is-ink .l { color: var(--white); opacity: .75; }
.flow .node h3 { font-size: 21px; margin-bottom: 6px; }
.flow .node .l { font-size: 16px; color: var(--muted); line-height: 1.4; }
.flow .arr { width: 44px; display: grid; place-items: center; color: var(--line-2); font-size: 24px; flex: none; }
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar { background: var(--cream); border-radius: var(--r-lg); padding: 28px 30px; }
.pillar .k { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); font-weight: 500; margin-bottom: 12px; }
.pillar h3 { font-size: 26px; margin-bottom: 12px; }
.pillar p { font-size: 18px; color: var(--muted); line-height: 1.45; }

/* ---------- Diagramm (Nutzermodell) ---------- */
.diagram { flex: 1; display: grid; place-items: center; min-height: 0; }
.diagram svg { width: 100%; height: 100%; font-family: inherit; }
.diagram text { fill: var(--ink); font-size: 17px; }
.diagram .t-k { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; fill: var(--muted); }
.diagram .t-s { font-size: 14px; fill: var(--muted); }
.diagram .t-h { font-size: 19px; font-weight: 500; }
.diagram .t-w { fill: #fff; }
.diagram .t-w.t-s { fill: rgba(255,255,255,.8); }
.diagram .box { fill: #fff; stroke: var(--line-2); stroke-width: 1.5; rx: 12; }
.diagram .box--red { fill: var(--red); stroke: var(--red); }
.diagram .link { stroke: var(--ink); stroke-width: 2; fill: none; }
.diagram .link--muted { stroke: var(--line-2); }
.diagram .link--red { stroke: var(--red); }

/* ---------- Angebot ---------- */
table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 24px; }
th, td { text-align: left; padding: 16px 22px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; padding-top: 0; }
td.num, th.num { text-align: right; white-space: nowrap; }
td.hrs, th.hrs { width: 11%; color: var(--muted); font-weight: 400; padding-right: 34px; }
tr.sum td.hrs { color: rgba(255,255,255,.85); font-weight: 400; font-size: .8em; }
td.num { font-weight: 600; }
td .sub { display: block; font-size: 17px; color: var(--muted); margin-top: 4px; font-weight: 400; }
tr.sum td { border-bottom: 0; background: var(--red); color: var(--white); font-weight: 600; font-size: 28px; padding-top: 18px; padding-bottom: 18px; }
table.dense { font-size: 21px; }
table.dense th, table.dense td { padding: 8px 20px; }
table.dense td .sub { font-size: 15px; }
table.dense tr.sum td { font-size: 24px; padding-top: 12px; padding-bottom: 12px; }
.extras--2 { grid-template-columns: repeat(2, 1fr); }
.extras--2 div { padding: 14px 24px; }
tr.is-opt td { color: var(--muted); }
tr.is-opt td strong { color: var(--ink); font-weight: 500; }
tr.sum td:first-child { border-radius: var(--r) 0 0 var(--r); }
tr.sum td:last-child { border-radius: 0 var(--r) var(--r) 0; }
tr.sum td .sub { color: var(--white); opacity: .85; }
.extras { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: auto; padding-top: 24px; }
.extras div { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 18px 24px; font-size: 18px; line-height: 1.45; color: var(--muted); }
.extras strong { display: block; color: var(--ink); font-size: 22px; margin-bottom: 4px; }

/* ---------- Gesamtübersicht ---------- */
.sumgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; flex: 1; max-height: 400px; }
.scard { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 26px 28px; display: flex; flex-direction: column; }
.scard .k { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--red); font-weight: 500; margin-bottom: 14px; }
.scard h3 { font-size: 27px; margin-bottom: 12px; }
.scard p { font-size: 18px; color: var(--muted); line-height: 1.45; }
.scard p .opt { display: block; margin-top: 6px; font-size: 16px; }
.scard .v { margin-top: auto; padding-top: 28px; font-size: 27px; font-weight: 600; letter-spacing: -.02em; }
.scard .v span { display: block; margin-top: 4px; font-size: 16px; font-weight: 400; color: var(--muted); letter-spacing: 0; }
.tpanel {
  margin-top: auto; background: var(--red); color: var(--white); border-radius: var(--r-lg);
  padding: 30px 36px; display: flex; align-items: center; justify-content: space-between; gap: 40px;
}
.tpanel .k { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; opacity: .85; font-weight: 500; margin-bottom: 10px; }
.tpanel .n { font-size: 52px; font-weight: 600; letter-spacing: -.03em; line-height: 1; }
.tpanel .side { text-align: right; font-size: 19px; line-height: 1.45; }
.tpanel .side .ln { margin-top: 10px; font-size: 17px; opacity: .85; }

/* ---------- Nächste Schritte ---------- */
.process { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: auto 1fr; gap: 20px 20px; flex: 1; max-height: 560px; }
.process .phase {
  font-size: 14px; letter-spacing: .12em; text-transform: uppercase; font-weight: 500; color: var(--muted);
  padding-bottom: 12px; border-bottom: 2px solid var(--line-2);
}
.process .phase.is-you { grid-column: 2 / 6; color: var(--red); border-color: var(--red); }
.step { border: 1px solid var(--line-2); border-radius: var(--r-lg); padding: 26px 24px; display: flex; flex-direction: column; }
.step .n { font-size: 22px; font-weight: 600; color: var(--red); line-height: 1; margin-bottom: 36px; }
.step h3 { font-size: 25px; margin-bottom: 12px; }
.step p { font-size: 19px; color: var(--muted); line-height: 1.45; }
.step ul { list-style: none; margin: 10px 0 0; padding: 0; font-size: 19px; line-height: 1.45; }
.step li { position: relative; padding-left: 18px; margin-bottom: 6px; }
.step li::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 2px; background: var(--red); }
.step.is-red { background: var(--red); border-color: var(--red); color: var(--white); }
.step.is-red .n { color: var(--white); }
.step.is-red p { color: var(--white); opacity: .85; }
.step.is-red li::before { background: var(--white); }

/* ---------- Fragen ---------- */
.faq { display: flex; flex-direction: column; max-width: 1300px; }
.faq div { display: grid; grid-template-columns: 470px 1fr; gap: 40px; padding: 17px 0; border-top: 1px solid var(--line); align-items: baseline; }
.faq div:last-child { border-bottom: 1px solid var(--line); }
.faq .q { font-size: 22px; font-weight: 600; }
.faq .a { font-size: 19px; color: var(--muted); line-height: 1.45; }

/* ---------- Danke ---------- */
.contacts { display: flex; flex-direction: column; gap: 6px; margin-top: 52px; font-size: 21px; line-height: 1.5; }
.contacts span { color: var(--muted); }
.contacts .k { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 6px; }
.links { display: flex; flex-direction: column; gap: 10px; margin-top: 44px; font-size: 19px; }
.links a { color: var(--muted); }
.links a b { color: var(--red); font-weight: 500; margin-right: 10px; }

/* ---------- Platzhalter ---------- */
.todo { display: inline-block; border: 1px solid var(--amber); color: var(--amber); border-radius: 999px; padding: 2px 12px; font-size: .8em; font-weight: 500; }

/* ---------- Schrittweises Einblenden (→ / Enter / Klick) ---------- */
.fragment { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.fragment.is-on { opacity: 1; transform: none; }
.fragment:not(.is-on) { pointer-events: none; }

/* ---------- Notizen (Taste N) ---------- */
.notes {
  display: none; position: fixed; left: 0; right: 0; bottom: 0;
  background: var(--ink); color: #fff;
  padding: 18px 32px; font-size: 18px; line-height: 1.5;
  max-height: 34vh; overflow: auto; z-index: 20;
}
.notes .k { color: rgba(255,255,255,.6); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
body.show-notes .notes { display: block; }

/* ---------- Folienübersicht links (Esc / O), im Vollbild ausgeblendet ---------- */
.nav {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--nav-w); z-index: 25;
  background: var(--white); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  transform: translateX(-100%); transition: transform .25s var(--ease);
}
body.nav-on .nav { transform: none; }
.nav__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 14px 10px 18px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500;
}
.nav__close { border: 0; background: none; color: var(--muted); font: inherit; font-size: 18px; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.nav__close:hover { background: var(--stone); color: var(--ink); }
.nav__list { flex: 1; overflow-y: auto; padding: 4px 14px 14px 8px; }
.thumb { display: flex; gap: 8px; align-items: flex-start; width: 100%; margin: 0 0 10px; padding: 0; border: 0; background: none; font: inherit; cursor: pointer; text-align: left; }
.thumb .i { width: 22px; flex: none; font-size: 12px; color: var(--muted); text-align: right; padding-top: 2px; }
.thumb .f {
  position: relative; flex: none; width: 184px; height: 103.5px; overflow: hidden;
  border-radius: 6px; border: 1px solid var(--line-2); background: var(--white);
}
.thumb .f .slide { display: flex; position: absolute; left: 0; top: 0; transform: scale(.115); transform-origin: 0 0; pointer-events: none; }
.thumb .f .fragment { opacity: 1; transform: none; transition: none; }
.thumb:hover .f { border-color: var(--muted); }
.thumb.is-on .i { color: var(--red); font-weight: 600; }
.thumb.is-on .f { border: 2px solid var(--red); }
.nav__keys { padding: 10px 18px 14px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--muted); line-height: 1.6; }
.nav__keys b { font-weight: 600; color: var(--ink); }
.nav-open {
  position: fixed; left: 12px; top: 12px; z-index: 24;
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid var(--line-2);
  background: rgba(255,255,255,.9); color: var(--muted); font-size: 16px; cursor: pointer;
  opacity: 0; transition: opacity .2s;
}
body:not(.nav-on):not(.is-fs) .nav-open:hover,
body:not(.nav-on):not(.is-fs):hover .nav-open { opacity: 1; }
body.is-fs .nav-open, body.nav-on .nav-open { display: none; }

/* ---------- Druck / PDF ---------- */
@media print {
  @page { size: 1600px 900px; margin: 0; }
  html, body { overflow: visible; background: #fff; }
  .stage { position: static; display: block; }
  .slide { display: flex !important; position: relative; transform: none !important; break-after: page; }
  .fragment { opacity: 1 !important; transform: none !important; }
  .notes, .nav, .nav-open { display: none !important; }
}