/* ==========================================================================
   Sales-Praesentation (praesentation.html, en/praesentation.html)
   Folien im Format 16:9. Alle Masse haengen an --u (1 % der Folienbreite),
   damit die Folie am Bildschirm, im Druck und im PDF gleich aussieht.
   Auf dem Handy fliesst der Inhalt stattdessen untereinander (--u fest).
   Erzeugt mit tools/build-praesentation.js – nicht von Hand bearbeiten.
   ========================================================================== */

.deck-body { background: #141414; }
.deck-body::after { display: none; }          /* kein Goldrahmen um das Fenster */

/* ---------- Werkzeugleiste (nur Bildschirm) ---------- */
.deck-bar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: 16px;
  padding: 12px max(20px, calc((100vw - 1280px) / 2));
  background: rgba(26, 26, 26, 0.92); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.deck-bar .back { color: var(--muted); font-size: 0.92rem; white-space: nowrap; }
.deck-bar .back:hover { color: var(--gold-bright); }
.deck-bar .title { flex: 1; min-width: 0; font-family: var(--display); font-weight: 700; color: var(--head-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.deck-bar .btn { padding: 10px 18px; font-size: 0.9rem; }
.deck-bar button.btn { font-family: inherit; cursor: pointer; background: transparent; }
.deck-bar button.btn-ghost { color: #fff; }
@media (max-width: 640px) {
  .deck-bar { flex-wrap: wrap; gap: 10px; }
  .deck-bar .title { order: -1; flex-basis: 100%; }
  .deck-bar .btn-ghost { display: none; }
}

.deck { display: grid; gap: 34px; padding: 34px max(20px, calc((100vw - 1280px) / 2)) 60px; }

/* ---------- Folie ---------- */
/* Container-Einheiten brauchen einen umgebenden Container: .frame misst die
   Breite, die Folie darin rechnet mit 1cqw = 1 % ihrer Breite */
.frame { container-type: inline-size; }
.slide {
  --u: 1cqw;
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: calc(var(--u) * 4.4) calc(var(--u) * 5.6) calc(var(--u) * 5.4);
  background: linear-gradient(180deg, #232220 0%, #1c1c1c 38%, #181818 100%);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  color: var(--text);
  font-size: calc(var(--u) * 1.45);
  line-height: 1.5;
}
.s-in { flex: 1; min-height: 0; display: flex; flex-direction: column; }

.slide h1, .slide h2, .slide h3 { font-family: var(--display); color: var(--head-soft); letter-spacing: -0.01em; margin: 0; }
/* style.css legt auf h1/h2 den Goldverlauf – auf den Folien nur auf .g */
.slide h1, .slide h2 { background: none; -webkit-background-clip: border-box; background-clip: border-box; }
.slide h2 { font-size: calc(var(--u) * 3.5); font-weight: 800; line-height: 1.12; padding-bottom: var(--descender-fix); }
.slide h3 { font-size: calc(var(--u) * 1.6); font-weight: 700; line-height: 1.25; }
.slide p { margin: 0; }
.slide strong { color: var(--head-soft); }
.g { background: var(--grad-head); -webkit-background-clip: text; background-clip: text; color: transparent; }

.s-kicker {
  align-self: flex-start;
  font-family: var(--mono); font-size: calc(var(--u) * 0.95); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--chip-text); background: var(--chip-bg); border: 1px solid var(--chip-line);
  padding: calc(var(--u) * 0.35) calc(var(--u) * 0.9);
  margin-bottom: calc(var(--u) * 1.6);
}
.s-lead { font-size: calc(var(--u) * 1.75); color: var(--text); line-height: 1.5; margin-top: calc(var(--u) * 1.4); max-width: 62em; }
.s-mono { font-family: var(--mono); font-size: calc(var(--u) * 0.9); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
/* Claim wie .note auf der Website */
.s-claim { font-family: var(--sans); font-weight: 700; letter-spacing: 0.02em; color: var(--text); font-size: calc(var(--u) * 1.5); }

.s-card {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 1.7);
  display: flex; flex-direction: column; gap: calc(var(--u) * 0.8);
}
.s-card p { color: var(--muted); font-size: calc(var(--u) * 1.3); }
/* Nummern wie .card .num auf der Website */
.s-num { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 1.3); line-height: 1; letter-spacing: 0.1em; color: var(--copper); }

/* Fusszeile jeder Folie */
.s-foot {
  position: absolute; left: calc(var(--u) * 5.6); right: calc(var(--u) * 5.6); bottom: calc(var(--u) * 2);
  display: flex; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: calc(var(--u) * 0.85); letter-spacing: 0.1em; color: var(--dim);
}
.s-foot .mark { display: flex; align-items: center; gap: calc(var(--u) * 0.7); }
.s-foot img { height: calc(var(--u) * 1.8); width: auto; }
.s-foot .dia { color: var(--copper); }

/* ---------- 1 Titel ---------- */
.s-title .s-in { display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: calc(var(--u) * 4); }
.s-brand { display: flex; align-items: center; gap: calc(var(--u) * 1); margin-bottom: calc(var(--u) * 3.4); }
.s-brand img { height: calc(var(--u) * 4); width: auto; }
.s-brand span { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 2.6); letter-spacing: 0.04em; }
.s-title h1 { font-size: calc(var(--u) * 5.6); font-weight: 800; line-height: 1.04; padding-bottom: var(--descender-fix); }
.s-title .sub { font-size: calc(var(--u) * 2.1); color: var(--head-soft); margin-top: calc(var(--u) * 2.4); line-height: 1.35; font-family: var(--display); font-weight: 500; }
.s-title .s-claim { margin-top: calc(var(--u) * 3.2); }
.s-title .logo { justify-self: center; width: 100%; max-width: calc(var(--u) * 36); height: auto; }

/* ---------- 2 Realitaet ---------- */
.s-row { display: grid; gap: calc(var(--u) * 2); margin-top: calc(var(--u) * 2.6); }
.s-row.c3 { grid-template-columns: repeat(3, 1fr); }
.s-row.c4 { grid-template-columns: repeat(4, 1fr); }
.s-band {
  margin-top: auto;
  display: grid; grid-template-columns: 1fr; gap: calc(var(--u) * 3); align-items: center;
  padding-top: calc(var(--u) * 2.2); border-top: 1px solid var(--line-strong);
}
.s-band blockquote { font-family: var(--display); font-weight: 600; font-size: calc(var(--u) * 2.1); max-width: 40em; color: var(--head-soft); line-height: 1.35; margin: 0; }
.s-band p { color: var(--muted); font-size: calc(var(--u) * 1.35); }

/* ---------- 3 Einstieg ---------- */
.s-offer .goal { font-family: var(--mono); font-size: calc(var(--u) * 0.95); letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold-bright); }
.s-offer h3 { font-size: calc(var(--u) * 1.85); }
.s-offer p { font-size: calc(var(--u) * 1.45); line-height: 1.5; }
/* Art und Dauer stehen am Kartenfuss */
.s-offer .meta {
  order: 9; margin-top: auto; padding-top: calc(var(--u) * 1.1); border-top: 1px solid var(--line);
  font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 1.3); color: var(--gold-bright);
}
.s-offer .price { margin-top: auto; padding-top: calc(var(--u) * 1); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: calc(var(--u) * 0.2); }
.s-offer .price strong { font-family: var(--display); font-size: calc(var(--u) * 2.4); font-weight: 800; }
.s-offer .price span { font-size: calc(var(--u) * 1); color: var(--dim); }
.s-note { margin-top: calc(var(--u) * 1.6); font-size: calc(var(--u) * 1.05); color: var(--dim); }

/* ---------- 4 Vertrauen ---------- */
.s-trust-head { display: flex; justify-content: space-between; align-items: flex-start; gap: calc(var(--u) * 3); }
.s-trust-head img { width: calc(var(--u) * 11); height: auto; flex: none; }
.s-trust .s-in { justify-content: center; gap: calc(var(--u) * 4.5); }
.s-trust .s-row { margin-top: 0; }
.s-trust h2 { font-size: calc(var(--u) * 4.2); }
.s-trust-head img { width: calc(var(--u) * 13); }

/* ---------- 5 Produkt ---------- */
.s-product .s-in { display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(var(--u) * 4); }
.s-list { list-style: none; margin: calc(var(--u) * 2) 0 0; padding: 0; display: grid; gap: calc(var(--u) * 0.85); }
.s-list li { position: relative; padding-left: calc(var(--u) * 2); font-size: calc(var(--u) * 1.35); color: var(--text); }
.s-list li::before { content: "◆"; position: absolute; left: 0; top: 0.05em; color: var(--copper); font-size: 0.8em; }
.s-steps { display: grid; gap: calc(var(--u) * 1.1); align-content: center; }
.s-step { display: grid; grid-template-columns: calc(var(--u) * 3.6) 1fr; gap: calc(var(--u) * 1.2); align-items: start; padding-bottom: calc(var(--u) * 1.1); border-bottom: 1px solid var(--line); }
.s-step:last-child { border-bottom: 0; padding-bottom: 0; }
.s-step .s-num { font-size: calc(var(--u) * 2.2); font-weight: 800; }
.s-step h3 { font-size: calc(var(--u) * 1.45); margin: calc(var(--u) * 0.3) 0 calc(var(--u) * 0.3); }
.s-step p { font-size: calc(var(--u) * 1.2); color: var(--muted); }

/* ---------- 6 Beispielprozess ---------- */
.s-process .s-in { align-items: center; }
.s-process .s-kicker { align-self: flex-start; margin-bottom: calc(var(--u) * 1.2); }
.s-process .s-in > img { display: block; width: auto; max-width: 100%; height: calc(var(--u) * 41); object-fit: contain; border: 1px solid var(--line); }

/* ---------- 7 Kundenbericht ---------- */
.s-case .s-in { display: grid; grid-template-columns: 1.5fr 1fr; gap: calc(var(--u) * 3.4); }
.s-case .s-row { grid-template-columns: repeat(2, 1fr); gap: calc(var(--u) * 1.4); margin-top: calc(var(--u) * 2); }
.s-case .s-card { padding: calc(var(--u) * 1.3) calc(var(--u) * 1.4); gap: calc(var(--u) * 0.5); }
.s-case .s-card h3 { font-size: calc(var(--u) * 1.35); }
.s-case .s-card p { font-size: calc(var(--u) * 1.13); line-height: 1.45; }
.s-case h2 { font-size: calc(var(--u) * 3); }
.s-quote { display: flex; flex-direction: column; gap: calc(var(--u) * 1.3); background: rgba(255, 255, 255, 0.035); border: 1px solid var(--line); border-top: 2px solid var(--gold); padding: calc(var(--u) * 1.8); }
.s-quote .who { display: flex; align-items: center; gap: calc(var(--u) * 1.3); }
.s-quote .who img:first-child { width: calc(var(--u) * 7); height: calc(var(--u) * 7); object-fit: cover; object-position: 50% 20%; }
.s-quote .who .logo { height: calc(var(--u) * 2.2); width: auto; }
.s-quote blockquote { margin: 0; font-style: italic; font-size: calc(var(--u) * 1.3); line-height: 1.5; color: var(--text); }
.s-quote .role { font-family: var(--sans); font-size: calc(var(--u) * 0.95); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--gold); }
.s-case .tag-line { margin-top: calc(var(--u) * 1.6); font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 1.5); }

/* ---------- 8 Abschluss ---------- */
.s-end .s-in { align-items: center; justify-content: center; text-align: center; }
.s-end .helix { height: calc(var(--u) * 9); width: auto; margin-bottom: calc(var(--u) * 1.8); }
.s-end .s-kicker { align-self: center; }
.s-end .promise { font-family: var(--display); font-weight: 700; font-size: calc(var(--u) * 2.75); line-height: 1.3; color: var(--head-soft); max-width: 30em; padding-bottom: var(--descender-fix); }
.s-end .s-claim { margin-top: calc(var(--u) * 2.4); font-size: calc(var(--u) * 1.7); }
.s-contact { margin-top: calc(var(--u) * 3); display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--u) * 1) calc(var(--u) * 2.6); font-size: calc(var(--u) * 1.3); }
.s-contact a { color: var(--head-soft); }
.s-contact a.cta { color: var(--on-yellow); background: var(--grad-gold); padding: calc(var(--u) * 0.6) calc(var(--u) * 1.6); font-family: var(--display); font-weight: 700; }

/* ---------- Handy: Inhalt fliesst, keine feste Folienhoehe ---------- */
@media (max-width: 760px) {
  .deck { gap: 22px; padding: 22px 14px 40px; }
  .slide { --u: 8.4px; aspect-ratio: auto; padding: 30px 20px 64px; }
  .s-title .s-in, .s-product .s-in, .s-case .s-in, .s-band { grid-template-columns: 1fr; }
  .s-row.c3, .s-row.c4, .s-case .s-row { grid-template-columns: 1fr; }
  .s-title .logo { max-width: 220px; }
  .s-trust-head img { width: 84px; }
  .s-process .s-in > img { height: auto; width: 100%; }
  .s-foot { left: 20px; right: 20px; bottom: 20px; }
}

/* ---------- Druck / PDF: eine Folie pro Seite ---------- */
@page { size: 1280px 720px; margin: 0; }
@media print {
  html, body { background: #1c1c1c !important; }
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .deck-bar, .evobot, html::after { display: none !important; }
  /* Verlauf per background-clip:text hinterlaesst im PDF Nahtlinien um die
     Textboxen – im Druck deshalb einfarbiges Gold */
  .g { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; color: var(--gold) !important; -webkit-text-fill-color: var(--gold) !important; }
  .deck { display: block; padding: 0; }
  .frame { container-type: normal; break-after: page; page-break-after: always; }
  .frame:last-child { break-after: auto; page-break-after: auto; }
  .slide {
    --u: 12.8px;
    width: 1280px; height: 720px; aspect-ratio: auto;
    border: 0; box-shadow: none;
  }
}