:root{
  /* WWII-inspired palette */
  --bg: #0b0f14;          /* steel/navy */
  --panel: #111721;       /* dark panel */
  --muted: #aab3bc;       /* muted text */
  --accent: #d75a5a;      /* signal red */
  --accent-2: #c2b280;    /* khaki */
  --glass: rgba(255,255,255,0.03);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;background:linear-gradient(180deg,#070c12 0%, var(--bg) 100%);color:#e6eef6}
.reveal{font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial}

/* Backdrop subtle grid/radar feel */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.10;
  background:
    radial-gradient(60rem 60rem at 10% -10%, rgba(194,178,128,0.08), transparent 60%),
    radial-gradient(40rem 40rem at 120% 120%, rgba(215,90,90,0.06), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 24px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.02), rgba(255,255,255,0.02) 1px, transparent 1px, transparent 24px);
}

/* Slide cards with dossier vibe */
.reveal .slides section {
  padding: 48px;
  border-radius: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)),
    linear-gradient(135deg, rgba(194,178,128,0.06), transparent 40%);
  box-shadow: 0 10px 40px rgba(0,0,0,0.55);
  border: 1px solid rgba(194,178,128,0.18);

  /* Prevent the slide card from exceeding the viewport height.
     If content is taller than the available space, allow scrolling inside the card
     instead of letting it overflow off-screen. This prevents the card from being
     visually cropped at the bottom (useful for small screens / tall content). */
  max-height: calc(100vh - 64px);
  overflow: auto;
  -webkit-overflow-scrolling: touch; /* smoother scrolling on mobile */
}

/* Headings */
.reveal h1 {
  font-family: Oswald, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  text-transform: uppercase; letter-spacing: 0.5px;
  font-size: 3rem; margin: 0 0 16px 0; color: #fff;
  position: relative;
}
.reveal h1::after{
  content:""; position:absolute; left:0; bottom:-8px; height:4px; width:120px;
  background: linear-gradient(90deg, var(--accent), rgba(215,90,90,0)); border-radius: 2px;
}

.reveal h2 {
  font-family: Oswald, Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  font-size: 2rem; margin: 0 0 12px 0; color: #f7fafc;
  padding-left: 12px; border-left: 4px solid var(--accent-2);
}

.reveal p, .reveal li { color: var(--muted); font-size: 1.05rem; line-height: 1.5 }
.lead { color: var(--accent-2); font-weight:600 }
.reveal .slides section ul { padding-left: 18px; margin: 10px 0 0 0; }
.reveal .slides section li { margin: 6px 0; }
.reveal .slides section code {
  background: rgba(255,255,255,0.03); padding: 3px 6px; border-radius: 6px; color: #f3f7ff;
  font-family: "IBM Plex Mono", ui-monospace, Menlo, Consolas, monospace; font-size: .95rem;
}

/* Optional decorative stamp style for emphasis */
.stamp {
  display:inline-block; text-transform:uppercase; letter-spacing:.12em; font-weight:700;
  color: var(--accent); border: 2px solid rgba(215,90,90,0.45); padding: 2px 8px; border-radius: 4px;
  transform: rotate(-2deg);
}

/* Status badge used on pages that show it */
.ws-status {
  position: fixed;
  right: 14px;
  bottom: 14px;
  padding: 8px 12px;
  background: var(--glass);
  border-radius: 10px;
  color: #cfefff;
  font-weight: 600;
  font-size: 0.9rem;
  backdrop-filter: blur(6px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.45);
}
.ws-status.disconnected { opacity: 0.6; filter: grayscale(20%); }
.ws-status.connected { border: 1px solid rgba(194,178,128,0.28); }

.remote .lead { margin-bottom: 0; color: #dff6ff; }
.btn { cursor: pointer; }

/* Two-column layout helper for slides */
.two-col { display: flex; gap: 24px; align-items: flex-start; flex-wrap: wrap; }
.two-col .col { flex: 1 1 0; }
.two-col .figure { flex: 0 0 52%; display: flex; flex-direction: column; align-items: center; }
/* cap image height so it cannot push the card beyond the viewport;
   keep width:100% so images remain responsive */
.two-col .figure img {
  width: 100%;
  height: auto;
  max-height: 60vh;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  background: #101621;
}
.two-col .figure figcaption { margin-top: 6px; font-size: 0.9rem; color: #9aa6b2; }
/* Nudge image slightly upward when needed */
.two-col .figure.figure-up { margin-top: -12px; }

/* Tight variant for slides that need the image pulled up and no extra space below.
   Only applied when the figure has both .figure-up and .figure-tight classes.
   - margin-top: further negative to nudge up
   - margin-bottom / padding-bottom: removed so the image sits flush
   - figcaption margin reduced to avoid extra gap */
.two-col .figure.figure-up.figure-tight {
  margin-top: -22px;
  margin-bottom: 0;
  padding-bottom: 0;
}
.two-col .figure.figure-up.figure-tight img {
  display: block;
  margin-bottom: 0;
}
.two-col .figure.figure-up.figure-tight figcaption {
  margin-top: 4px;
  padding-top: 0;
}

@media (max-width: 900px){ .two-col { flex-direction: column; } .two-col .figure { flex-basis: auto; } }

/* Inline figure (centered thumbnail under content)
   This keeps the image visible but small and centered so the slide layout
   matches the single-column slides (heading + bullets) while preserving a
   thumbnail image below the list. */
.figure.figure-inline {
  display: block;
  margin: 24px auto 0;
  text-align: center;
  max-width: 720px;
}
.figure.figure-inline img {
  width: 420px;
  max-width: 60%;
  height: auto;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  background: #101621;
}

/* Responsive adjustment for small screens: make inline image fluid */
@media (max-width: 900px) {
  .figure.figure-inline img { width: 100%; max-width: 90%; }
}
/* Simplify: prefer new, concise list on Ursachen-Slide */
.two-col .col ul { display: none; }
.two-col .col ul.new-list { display: block; }
.two-col .col ul.new-list li { font-size: 1.25rem; line-height: 1.6; }

/* Hide top connection status (status + clients) */
.app-status { display: none !important; }
/* Hide the top app title bar completely */
.app-topbar { display: none !important; }

/* Blank slide variant: truly edge-to-edge black */
.reveal .slides section.blank {
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

/* Hide Reveal UI chrome: left/right navigation arrows and progress/slide indicator.
   Use !important to override Reveal.js inline or theme styles. */
.reveal .controls { display: none !important; }
.reveal .controls .navigate-left,
.reveal .controls .navigate-right { display: none !important; }
.reveal .progress { display: none !important; }
.reveal .slide-number { display: none !important; }

#abb40-bottom figcaption {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

#abb40-bottom {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

/* wirkt NUR in dieser Section */
#achse-afrika .two-col .center-figure {
  grid-column: 1 / -1;
  justify-self: center;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#achse-afrika .two-col .center-figure img {
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: min(90%, 85vw);
}