/* Layout-Variablen */
:root {
  --border-w: 25px;
  --content-gap: 5px;

  /* PNGs sind 2x gerendert, sollen aber auf dem Handy in voller Breite (100vw) angezeigt werden.
     Höhe wird proportional aus den Original-Dimensionen berechnet. */
  --header-h: calc(100vw * 885 / 2048); /* Header-Steampunk.png: 2048x885 */
  --footer-h: calc(100vw * 454 / 2048); /* Footer-Steampunk.png: 2048x454 */

  /* Background Farben */
  --bg-edge: #000000;
  --bg-center: #08172a; /* dunkles Blau */
}

/* Basic reset */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #e9eef7;

  /* Background radial: außen schwarz -> Mitte dunkelblau */
  background: radial-gradient(circle at center, var(--bg-center) 0%, var(--bg-edge) 70%);
  position: relative;
  overflow-x: hidden;
}

/* Chip-Pattern overlay über die gesamte Fläche */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("chip-pattern.svg");
  background-repeat: repeat;
  background-size: 420px auto; /* ggf. anpassen */
  opacity: 0.12;              /* Intensität des Overlays */
  pointer-events: none;
  z-index: 1;
}

/* Content Layer: scrollt unter Footer */
.content {
  position: relative;
  z-index: 2;

  /* Abstand oben/links/rechts 50px + Platz für Borders + Header */
  padding-top: calc(var(--header-h) + var(--content-gap));
  padding-left: calc(var(--border-w) + var(--content-gap));
  padding-right: calc(var(--border-w) + var(--content-gap));

  /* Kein padding-bottom in Footer-Höhe -> Content läuft unter Footer durch */
  padding-bottom: 0;

  min-height: 100vh;
}

/* Demo-Card Styling */
.card {
  backdrop-filter: blur(4px);
  background: rgba(0, 0, 0, 0.35);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 14px;
}

/* Borders: fixiert, 50px breit, volle Höhe (unter Header/Footer) */
.border {
  position: fixed;
  top: 0;
  height: 100vh;
  width: var(--border-w);
  z-index: 5;
  pointer-events: none; /* Border soll keine Klicks blockieren */
}

.border img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
}

.border--left { left: 0; }
.border--right { right: 0; }

/* Header: fixiert oben, transparente PNG liegt über Borders + Content */
.app-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--header-h);
  z-index: 10;
  pointer-events: none; /* Deko; entfernen, wenn interaktiv */
}

.app-header img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* volle Breite; Höhe ergibt sich über Container */
  display: block;
}

/* Footer: fixiert unten, transparente PNG liegt über Borders + Content */
.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--footer-h);
  z-index: 10;
  pointer-events: none; /* Deko; entfernen, wenn interaktiv */
}

.app-footer img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* volle Breite; Höhe ergibt sich über Container */
  display: block;
}

/* Optional: iOS Safe-Area (Notch/Homebar) berücksichtigen */
@supports (padding: max(0px)) {
  .app-header {
    height: calc(var(--header-h) + env(safe-area-inset-top));
  }
  .content {
    padding-top: calc(var(--header-h) + var(--content-gap) + env(safe-area-inset-top));
  }
  .app-footer {
    height: calc(var(--footer-h) + env(safe-area-inset-bottom));
  }
}