/* RESET / BASIS */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  height: 100vh;
  overflow: hidden;            /* Wichtig: Scroll nur im Content */
  background: #2A2D36;            /* Außenbereich schwarz wie App-Hintergrund */
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text",
               system-ui, sans-serif;
}

/* APP-CONTAINER */
.app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* =========================
   HEADER (FIX)
   ========================= */
.header {
  flex-shrink: 0;
  width: 100%;
}

.header img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   FOOTER (FIX)
   ========================= */
.footer {
  flex-shrink: 0;
  width: 100%;
}

.footer img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   SCROLLBEREICH
   ========================= */
.content {
  flex: 1;
  width: 100%;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch; /* iOS-Scroll-Feeling */
  background: #ffffff;
}

/* =========================
   CONTENT-BILDER
   ========================= */
.content-image {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   ANIMATION (VIDEO / GIF)
   ========================= */
.animation {
  width: 100%;
}

.animation video,
.animation img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   SICHERHEIT: KEINE SELEKTION
   ========================= */
img,
video {
  -webkit-user-drag: none;
  user-select: none;
  pointer-events: none; /* nichts klickbar */
}

/* =========================
   SCROLLBAR VERSTECKEN
   ========================= */

/* Chrome, Edge, Safari */
.content::-webkit-scrollbar {
  display: none;
}

/* Firefox */
.content {
  scrollbar-width: none;
}

/* Internet Explorer / alte Edge */
.content {
  -ms-overflow-style: none;
}

/* Bild + Text übereinander */
.content-with-text {
  position: relative;
  width: 100%;
}

/* Datums-Text */
.date-overlay {
  position: absolute;
  top: 42%;        /* ggf. feinjustieren */
  left: 37%;
  font-size: 15.5px; /* anpassen an Screenshot */
  color: #0e0e0f;
  font-weight: 400;
  letter-spacing: 0.1px;
  pointer-events: none;
  user-select: none;
}