* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: sans-serif;
  background-color: #000000;
}

.swipe-container {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  width: 100vw;
  height: 100vh;
}

/* Schwarzer Contentbereich */
.rubrik {
  flex: 0 0 100vw;
  width: 100vw;
  height: 100vh;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  background-color: #000000;
  color: #ffffff;
}

/* Kopfzeile */
.kopfzeile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 40px;
  width: 100%;
  background-color: var(--kopf-farbe); /* Nutzt die Farbe der jeweiligen Rubrik */
}

.titel {
  font-size: 1.5rem;
  text-align: center;
  flex-grow: 1;
}

/* Interaktiver Pfeil-Container */
.pfeil {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: transform 0.2s ease;
}

.pfeil:hover {
  transform: scale(1.2);
}

/* Reines CSS-Dreieck */
.pfeil-icon {
  display: inline-block;
  width: 0;
  height: 0;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  border-left: 14px solid white;
}

/* Dreht den linken Pfeil um */
.pfeil.links {
  transform: rotate(180deg);
}
.pfeil.links:hover {
  transform: rotate(180deg) scale(1.2);
}

/* Universelles Reset-Symbol */
.loop-icon {
  color: white;
  font-size: 2rem;
  font-weight: bold;
  line-height: 1;
}

.pfeil.unsichtbar {
  visibility: hidden;
}

/* Contentbereich */
.inhalt {
  padding: 40px;
  flex-grow: 1;
  font-size: 1.1rem;
  line-height: 1.6;
  overflow-y: auto; /* Verhindert, dass langer Text auf kleinen Displays abgeschnitten wird */
}

/* Dynamischer Trennstrich (HR) */
hr {
  border: none;
  background-color: var(--kopf-farbe, #ffffff); /* Holt sich die Farbe der aktiven Kopfzeile */
  height: 2px;
  margin: 30px 5px; /* 30px Abstand oben/unten, 5px links/rechts zum Rand */
  border-radius: 5px; /* Abgerundete Enden */
}

/* Farbdefinitionen ber CSS-Variablen */
.color-1 { 
  --kopf-farbe: #3498db; 
  color: white;
}

.color-2 { 
  --kopf-farbe: #2ecc71; 
  color: white;
}

.color-3 { 
  --kopf-farbe: #e74c3c; 
  color: white;
}

/* --- OPTIMIERUNG FšR MOBILE BUTTONS --- */

/* Container, um den Buttons etwas Abstand zum Text zu geben */
.button-container {
  margin: 15px 0;
}

/* Das Design der neuen mobilen Touch-Buttons */
.mobile-button {
  display: inline-block;
  background-color: #87CEEB;     /* Hellblaue Hintergrundfarbe (SkyBlue) */
  color: #1a1a1a !important;     /* Dunkler, gut lesbarer Text auf hellem Grund */
  padding: 12px 24px;            /* Groáer Innenabstand fr leichte Bedienung */
  text-decoration: none;         /* Entfernt die Unterstreichung */
  border-radius: 8px;            /* Abgerundete Ecken im modernen Stil */
  font-weight: bold;
  font-size: 1rem;
  text-align: center;
  
  /* Barrierefreiheit & Touch-Optimierung */
  min-height: 48px;              /* Erfllt die Google-Richtlinie fr Touch-Fl„chen */
  box-sizing: border-box;
  touch-action: manipulation;    /* Eliminiert die 300ms Klick-Verz”gerung auf Mobilger„ten */
  transition: background-color 0.2s ease, transform 0.1s ease;
}

/* Visuelles Feedback beim Tippen oder Hovern */
.mobile-button:hover,
.mobile-button:focus,
.mobile-button:active {
  background-color: #6bbad9;     /* Leicht dunkleres Blau bei Interaktion */
  transform: scale(0.98);        /* Kleiner Drck-Effekt */
  outline: none;
}