/* follow.css */

/* --------------------------------
   Farb- und Schrift-Variablen
----------------------------------- */
:root {
  --color-bg: #fff;         /* Weißer Hintergrund */
  --color-text: #111;       /* Dunkler Text */
  --color-link: #000;       /* Linkfarbe normal (schwarz) */
  --color-link-hover: red;  /* Link-Hover-Farbe (rot) */
}

/* --------------------------------
   Body-Grundstil
   -------------------------------- */
body {
  background-color: var(--color-bg);
  color: var(--color-text);

  /* Schrift: Helvetica, semibold (600) & italic für den normalen Fließtext */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600; /* semibold */
  font-style: italic;

  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* --------------------------------
   Links
   -------------------------------- */
a {
  text-decoration: none;
  color: var(--color-link);
  transition: color 0.01s; /* optional sehr kurzer Übergang */
}

a:hover {
  /* Hover-Farbe wird rot */
  color: var(--color-link-hover);
}

a:focus {
  text-decoration: underline;
}

/* --------------------------------
   Rahmen (frame)
   -------------------------------- */
.frame {
  /* Beispiel-Farbe fürs Frame-Element */
  color: #ef442c;
  
  /* Falls du hier die Schriftgröße separat beeinflussen möchtest */
  font-size: 2.5rem;
  font-weight: 800; /* kannst du anpassen oder entfernen, wenn nur .frame__title gestylt wird */
  
  padding: 3rem 5vw;
  text-align: center;
  position: relative;
  z-index: 1000;
}

/* --------------------------------
   Titel und Headlines
   -------------------------------- */
.frame__title,
.content__headline {
  /* Bold & italic */
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 700; /* bold */
  font-style: italic;
  margin: 2rem 0 1rem;
}

/* Unterschiedliche Schriftgrößen für Titel vs. Überschriften (optional) */
.frame__title {
  font-size: 3rem; /* Großer Haupt-Titel */
}

.content__headline {
  font-size: 2rem; /* Etwas kleiner als der Haupttitel */
  text-transform: none; /* kann entfernt werden, wenn du Normalcase willst */
}

/* --------------------------------
   Content
   -------------------------------- */
.content__type {
  /* Semibold italic ist bereits per body-Definition gesetzt.
     Falls du hier eine andere Größe willst: */
  font-size: 1.2rem;  
  line-height: 1.4;   
  margin: 3rem auto 5rem;
}

/* Bilder */
.content__img {
  max-width: 100%;
  display: block;
  margin: 0 auto 5rem;
  backface-visibility: hidden;
}

/* --------------------------------
   3D-Fold-Effekte
   -------------------------------- */
.folds {
  position: relative;
  transform-style: preserve-3d;
}

.fold-3d {
  position: absolute;
  left: 0;
  right: 0;
  perspective: 100vh;
  transform-style: preserve-3d;
}

.fold-3d-top {
  bottom: 100%;
  perspective-origin: 50% 100%;
}

.fold-3d-bottom {
  top: 100%;
  perspective-origin: 50% 0%;
}

.fold {
  overflow: hidden;
  border-top: 0;
  border-bottom: 0;
}

.fold-top {
  height: 50vh;
  width: 100%;
  transform-origin: bottom center;
}

.fold-bottom {
  height: 50vh;
  width: 100%;
  transform-origin: top center;
}

.fold-center {
  height: 50vh;
  width: 50vw;
}

.fold-top .fold-scroller,
.fold-bottom .fold-scroller {
  transform-origin: top center;
}

.fold-scroller {
  display: flex;
  flex-direction: column;
}

.fold-content {
  padding: 0 2rem;
}

/* --------------------------------
   Debug
   -------------------------------- */
.debug .fold-top,
.debug .fold-bottom {
  background: #dadada;
}

.debug .test-center {
  background: #bababa;
}