/* ============================================================
   Reicht Holding — RAIBA Pitch Theme for Reveal.js
   Base palette + typography from official Reicht CI.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ===== Reicht CI Manual · Edition 01 · 14.05.2026 (verbindlich) ===== */
  /* Primärfarbe */
  --reicht-blue: #004387;     /* Reicht Blue · PANTONE 287 C · dominante Markenfarbe (≥60% Flächen) */
  --reicht-deep: #002F60;     /* Reicht Deep · Sekundär-Akzent · sehr dunkle Flächen */
  --reicht-sky: #E8EEF5;      /* Reicht Sky · Hintergrund-Flächen, dezente Karten */
  --reicht-sand: #C9A876;     /* Reicht Sand · Akzent · sparsam (Eyebrows, Lines) */
  --reicht-paper: #F6F5F1;    /* Reicht Paper · Hintergrund Print/Body */

  /* Neutralfarben */
  --anthrazit: #1A1A1A;       /* Fließtext (NIE reines Schwarz) */
  --slate: #7A7A75;           /* Sekundärtext, Metadaten, Datum */
  --stone: #DCDAD0;           /* Trennlinien, Rahmen, dezente Strukturen */
  --white: #FFFFFF;

  /* Aliase für Layout-Code-Klarheit */
  --navy: var(--reicht-blue);
  --ink: var(--reicht-deep);
  --paper: var(--reicht-paper);
  --paper-pure: #FAF9F5;
  --gold: var(--reicht-sand);
  --gold-soft: #D6BC91;
  --slate-light: var(--stone);

  /* Context accents (dezent, sparsam — nur bei thematisch passenden Slides) */
  --agri-sage: #6B8E5A;        /* For Agri-PV / Halbenrain */
  --emob-mint: #4CAF7D;        /* For E-Mobility / Green Charge */
  --storage-cyan: #3B8EA5;     /* For Stromspeicher */

  /* Typografie · CI-konform */
  --font-display: 'Jost', system-ui, sans-serif;          /* Headlines, Display, Auszeichnung */
  --font-body: 'Inter', system-ui, sans-serif;            /* Fließtext, UI */
  --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Eyebrows, technische Details */
}

/* ============================================================
   Reveal.js Base Overrides
   ============================================================ */

.reveal {
  font-family: var(--font-body);
  font-size: 28px;             /* slide base — 1rem = 28px in slide coords */
  color: var(--anthrazit);
  letter-spacing: -0.005em;
}

.reveal .slides {
  text-align: left;
}

.reveal section {
  padding: 0 !important;
}

/* Headings · Jost Medium 500 per CI Manual */
.reveal h1, .reveal h2, .reveal h3, .reveal h4 {
  font-family: var(--font-display);
  color: var(--anthrazit);
  font-weight: 500;           /* Jost Medium per CI */
  text-transform: none;
  line-height: 1.05;
  margin: 0;
}

.reveal h1 { font-size: 3.6rem; letter-spacing: -0.025em; line-height: 1.05; }   /* Display */
.reveal h2 { font-size: 2.6rem; letter-spacing: -0.022em; line-height: 1.10; }   /* Headline */
.reveal h3 { font-size: 1.7rem; letter-spacing: -0.015em; line-height: 1.20; }   /* Zwischenüberschrift */
.reveal h4 { font-size: 1.25rem; letter-spacing: -0.01em; line-height: 1.25; }

/* Body text · Inter Regular 400 / 1.65 */
.reveal p {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--anthrazit);
  margin: 0;
}

.reveal strong { color: var(--anthrazit); font-weight: 600; }

/* Links */
.reveal a {
  color: var(--reicht-blue);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
}

/* Lists */
.reveal ul, .reveal ol {
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--anthrazit);
  margin: 0;
  padding: 0 0 0 1.2em;
}
.reveal li { margin-bottom: 0.4em; }
.reveal li strong { color: var(--anthrazit); font-weight: 600; }

/* ============================================================
   Reusable slide compositions
   ============================================================ */

/* Force sections to the configured 1920x1080 logical canvas */
.reveal .slides > section {
  width: 1920px !important;
  height: 1080px !important;
  padding: 0 !important;
  top: 0 !important;
  left: 0 !important;
}

/* All slides reset */
.slide {
  width: 1920px;
  height: 1080px;
  padding: 5rem 6rem;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  background: var(--paper);
  position: relative;
}

/* Navy variant · Reicht Blue als dominante Markenfarbe (Section-Breaks, Hero) */
.slide--navy {
  background: var(--reicht-blue);
  color: var(--white);
}
.slide--navy h1, .slide--navy h2, .slide--navy h3 { color: var(--white); }
.slide--navy p, .slide--navy li { color: rgba(255,255,255,0.86); }
.slide--navy strong { color: var(--white); }

/* Deep variant · Reicht Deep nur für Closing / Sub-Akzente (sparsam) */
.slide--deep {
  background: var(--reicht-deep);
  color: var(--white);
}
.slide--deep h1, .slide--deep h2, .slide--deep h3, .slide--deep h4 { color: var(--white); }
.slide--deep p, .slide--deep li { color: rgba(255,255,255,0.82); }
.slide--deep strong { color: var(--white); }

/* Legacy alias — bestehende Slides nutzen .slide--dark */
.slide--dark {
  background: var(--reicht-blue);
  color: var(--white);
}
.slide--dark h1, .slide--dark h2, .slide--dark h3, .slide--dark h4 { color: var(--white); }
.slide--dark p, .slide--dark li { color: rgba(255,255,255,0.86); }
.slide--dark strong { color: var(--white); }

/* Hero mit Hintergrund-Video/Bild — full-bleed, kein äußeres Padding */
.slide--hero {
  background: var(--reicht-blue);
  color: var(--white);
  position: relative;
  overflow: hidden;
  padding: 0;
}
.slide--hero .hero-media,
.slide--hero video.hero-media,
.slide--hero img.hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.85;
  z-index: 1;
}
.slide--hero .hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(0,30,65,0.55) 0%,     /* oben dunkel — für Logo + Eyebrow */
      rgba(0,30,65,0.08) 28%,    /* schnell transparent */
      rgba(0,30,65,0.10) 55%,    /* Mitte fast voll Video */
      rgba(0,30,65,0.55) 88%,    /* nach unten dunkel — für Titel */
      rgba(0,30,65,0.78) 100%);  /* ganz unten am dunkelsten */
  z-index: 2;
}
.slide--hero .hero-content {
  z-index: 3 !important;
}
.slide--hero .hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.slide--hero h1 { color: var(--white); }
.slide--hero p { color: rgba(255,255,255,0.85); }

/* Eyebrow · JetBrains Mono Regular 400 · 0.18em tracking · Versalien (CI) */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--reicht-blue);
  margin-bottom: 1.2rem;
  display: inline-block;
}
.slide--navy .eyebrow, .slide--deep .eyebrow, .slide--dark .eyebrow, .slide--hero .eyebrow {
  color: var(--reicht-sand);
}

/* Section number variant: "01" big */
.eyebrow-num {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.15em;
  color: var(--reicht-blue);
}

/* Lead/Subhead · Inter Regular 18px/1.50 (CI) */
.subhead {
  font-family: var(--font-body);
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--anthrazit);
  margin-top: 1.5rem;
  max-width: 36ch;
  line-height: 1.5;
}
.slide--navy .subhead, .slide--deep .subhead, .slide--dark .subhead, .slide--hero .subhead {
  color: rgba(255,255,255,0.86);
}

/* Caption · Inter Regular 12px/1.40 / Slate (CI) */
.caption {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

/* ============================================================
   Layout primitives
   ============================================================ */

/* 3-column grid for "Drei Säulen" / process steps */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
  margin-top: 3rem;
}

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

/* Card for grid items */
.card {
  background: var(--paper-pure);
  border: 1px solid var(--stone);
  border-radius: 4px;
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
}
.slide--navy .card, .slide--deep .card, .slide--dark .card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.16);
}

.card__num {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  color: var(--reicht-blue);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.card__title {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--anthrazit);
  margin-bottom: 1rem;
  line-height: 1.15;
  letter-spacing: -0.015em;
}
.slide--navy .card__title, .slide--deep .card__title, .slide--dark .card__title { color: var(--white); }

.card__list { list-style: none; padding: 0; font-size: 0.92rem; font-family: var(--font-body); }
.card__list li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--stone);
  color: var(--anthrazit);
}
.card__list li:last-child { border-bottom: none; }
.slide--navy .card__list li, .slide--deep .card__list li, .slide--dark .card__list li {
  border-bottom-color: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.86);
}

/* Big number stat */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  margin: 3rem 0;
}
.stat-num {
  font-family: var(--font-display);
  font-size: 5.0rem;
  font-weight: 500;            /* Jost Medium per CI */
  color: var(--reicht-blue);
  line-height: 1;
  letter-spacing: -0.035em;
}
.slide--navy .stat-num, .slide--deep .stat-num, .slide--dark .stat-num, .slide--hero .stat-num {
  color: var(--white);
}
.stat-label {
  font-family: var(--font-body);
  font-size: 0.95rem;
  color: var(--slate);
  margin-top: 0.8rem;
  font-weight: 500;
  max-width: 16ch;
}
.slide--navy .stat-label, .slide--deep .stat-label, .slide--dark .stat-label {
  color: rgba(255,255,255,0.72);
}

/* Half-bleed image (right side image, content on left) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100%;
  gap: 0;
}
.split__content { padding: 5rem 4rem 5rem 6rem; display: flex; flex-direction: column; justify-content: center; }
.split__media { background-size: cover; background-position: center; }

/* Top bar (logo + section info) */
.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3rem;
}
.topbar__logo img {
  height: 48px;                  /* +26% — kräftigeres Markenzeichen */
  width: auto;
}
.slide--navy .topbar__logo img,
.slide--deep .topbar__logo img,
.slide--dark .topbar__logo img,
.slide--hero .topbar__logo img,
.slide--fullhero .topbar__logo img { filter: brightness(0) invert(1); }

/* Footer (page number + event info) */
.slide-footer {
  position: absolute;
  bottom: 1.8rem;
  left: 6rem;
  right: 6rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}
.slide--navy .slide-footer,
.slide--deep .slide-footer,
.slide--dark .slide-footer,
.slide--hero .slide-footer { color: rgba(255,255,255,0.55); }

/* "by klimesch.ai" attribution — off by default, enable on final slide(s) */
.attribution {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--slate-light);
  opacity: 0.65;
}

/* ============================================================
   Reveal.js controls + progress bar — keep but subtle
   ============================================================ */
.reveal .controls { color: var(--reicht-blue); }
.reveal .progress { background: rgba(0,67,135,0.08); height: 3px; }
.reveal .progress span { background: var(--reicht-sand); }

/* Backgrounds in reveal */
.reveal .slide-background-content { background-color: var(--reicht-paper); }