/* ==========================================================================
   Amorazza - ELEVATOR (V710)
   Alles unter .page-elevator, damit nichts nach aussen wirkt.
   C11: JEDE var() traegt einen Rueckfallwert.
   ========================================================================== */

.page-elevator .ev-seite {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 56px;
}

/* --- Kopf --- */
.page-elevator .ev-kopf {
  text-align: center;
  margin-bottom: 34px;
}
.page-elevator .ev-kopf h1 {
  margin: 0 0 8px;
  font-size: 1.7em;
  line-height: 1.3;
  color: var(--ci-dunkel, #4b1528);
}
.page-elevator .ev-unter {
  margin: 0;
  color: var(--text-leise, #6f5f67);
}

/* --- ein Punkt --- */
.page-elevator .ev-punkt {
  margin: 0 0 40px;
  text-align: center;
}
/* V712: groesser. Vorher 148px fest - das war deutlich kleiner als im
   Medaillen-Fenster auf der Startseite. Dort stehen sie in einem Raster
   von drei Spalten in einer rund 1000px breiten Buehne, also je etwa
   320px. Genau darauf ist die Obergrenze gesetzt.
   width: 100% mit max-width statt fester Breite: auf schmalen Geraeten
   schrumpft die Medaille mit, statt ueber den Rand zu laufen.
   Die Dateien sind 512x512 - bis 320px wird also nicht hochgerechnet. */
.page-elevator .ev-medaille {
  width: 100%;
  max-width: 320px;
  height: auto;
  display: block;
  margin: 0 auto 14px;
}
.page-elevator .ev-punkt h2 {
  margin: 0 0 10px;
  font-size: 1.12em;
  color: var(--ci-dunkel, #4b1528);
}
.page-elevator .ev-punkt p {
  margin: 0 0 12px;
  text-align: left;
  line-height: 1.62;
}
.page-elevator .ev-punkt p:last-child { margin-bottom: 0; }

/* ==========================================================================
   DIE DISCOVER-VORSCHAU
   Ein Telefonrahmen mit echtem Markup, das von selbst scrollt.
   Seitenverhaeltnis 250:540 - dieselbe Proportion wie 1080x2340.
   ========================================================================== */
.page-elevator .ev-telefon {
  position: relative;
  width: 250px;
  height: 540px;
  margin: 22px auto 26px;
  padding: 9px;
  border-radius: 34px;
  /* Metall mit hellen Kanten links und rechts. */
  background: linear-gradient(140deg,
              #8d9298 0 3%, #2a2d31 9%, #131518 40%,
              #0e0f11 60%, #2a2d31 88%, #7f848a 97% 100%);
  box-shadow: 0 0 0 1px #08090a, 0 12px 26px rgba(0, 0, 0, 0.34);
}
/* Der Lichtstreifen liegt UEBER dem Schirm, darf ihn aber nicht
   abfangen - deshalb pointer-events: none. */
.page-elevator .ev-glanz {
  position: absolute;
  inset: 0;
  border-radius: 34px;
  pointer-events: none;
  background: linear-gradient(118deg,
              rgba(255,255,255,0.50) 0 1.5%, transparent 4% 46%,
              rgba(255,255,255,0.14) 49% 52%, transparent 55% 96.5%,
              rgba(255,255,255,0.34) 99% 100%);
}
.page-elevator .ev-schirm {
  position: relative;
  height: 100%;
  border-radius: 26px;
  overflow: hidden;
  background: #ffffff;
  display: flex;
  flex-direction: column;
}

/* Kopfzeile der App */
/* V711: mittig statt linksbuendig. flex ohne justify-content faellt auf
   flex-start zurueck - die drei Woerter klebten dadurch am linken Rand. */
.page-elevator .ev-app-kopf {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 7px 10px;
  font-size: 11px;
  color: var(--ci-mittel, #993556);
  background: var(--flaeche-zart, #fbeaf0);
  border-bottom: 0.5px solid var(--linie, #f4c0d1);
}
.page-elevator .ev-app-aktiv { color: var(--ci-dunkel, #4b1528); }

/* Die drei Pillen */
.page-elevator .ev-quota {
  display: flex;
  gap: 5px;
  justify-content: flex-end;
  padding: 5px 8px 0;
}
.page-elevator .ev-pille {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10px;
  color: var(--ci-mittel, #993556);
  background: var(--flaeche-zart, #fbeaf0);
  border: 0.5px solid var(--linie, #f4c0d1);
}
.page-elevator .ev-pille b { font-weight: 600; }
.page-elevator .ev-pille-match { background: #f4c0d1; }
.page-elevator .ev-punkt-rot {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e24b4a;
  color: #ffffff;
  font-size: 8px;
  font-style: normal;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Das Fenster, in dem gescrollt wird */
.page-elevator .ev-blende {
  flex: 1;
  overflow: hidden;
}
.page-elevator .ev-lauf {
  padding: 9px;
  animation: ev-rollen 15s ease-in-out infinite;
}
/* Sechs Sekunden nach unten, zwei halten, sechs zurueck, kurz stehen. */
@keyframes ev-rollen {
  0%, 7%    { transform: translateY(0); }
  45%, 58%  { transform: translateY(-505px); }
  96%, 100% { transform: translateY(0); }
}

.page-elevator .ev-name {
  border: 0.5px solid var(--linie, #f4c0d1);
  border-radius: 12px;
  padding: 7px 10px;
  margin-bottom: 8px;
  font-size: 12px;
  color: var(--ci-dunkel, #4b1528);
}
.page-elevator .ev-foto {
  width: 100%;
  height: auto;
  border-radius: 12px;
  display: block;
}
.page-elevator .ev-ebene {
  margin: 12px 0 9px !important;
  text-align: center !important;
  font-size: 12px;
  color: var(--ci-rosa, #d4537e);
}

.page-elevator .ev-karte {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 7px;
  padding: 7px 9px;
  border-radius: 12px;
  background: #f1efe8;
  font-size: 11.5px;
  line-height: 1.45;
  color: #2c2c2a;
  text-align: left;
}
.page-elevator .ev-karte img {
  width: 30px;
  height: 30px;
  flex: none;
}
.page-elevator .ev-karte b {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: #5f5e5a;
}
.page-elevator .ev-spruch {
  margin: 11px 2px !important;
  font-size: 12px;
  color: #5f5e5a;
}

.page-elevator .ev-flagge {
  border: 0.5px solid;
  border-radius: 12px;
  padding: 7px 9px;
  margin-bottom: 7px;
  text-align: left;
}
.page-elevator .ev-flagge b {
  display: block;
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 600;
}
.page-elevator .ev-flagge span {
  font-size: 11.5px;
  line-height: 1.5;
}
.page-elevator .ev-flagge-rot   { border-color: #f09595; background: #fcebeb; }
.page-elevator .ev-flagge-rot b { color: #a32d2d; }
.page-elevator .ev-flagge-rot span { color: #501313; }
.page-elevator .ev-flagge-gruen   { border-color: #97c459; background: #eaf3de; margin-bottom: 0; }
.page-elevator .ev-flagge-gruen b { color: #3b6d11; }
.page-elevator .ev-flagge-gruen span { color: #173404; }

.page-elevator .ev-leiste {
  display: flex;
  justify-content: space-around;
  padding: 7px 0;
  font-size: 17px;
  background: #ffffff;
  border-top: 0.5px solid #d3d1c7;
}
.page-elevator .ev-l-nein { color: #e24b4a; }
.page-elevator .ev-l-grau { color: #888780; }
.page-elevator .ev-l-merk { color: #ba7517; }

/* T6: keine Bewegung, wenn keine gewuenscht ist. Sichtbar bleibt der
   Anfang der Karte - das Bild und die ersten Herzen. */
@media (prefers-reduced-motion: reduce) {
  .page-elevator .ev-lauf { animation: none; }
}

/* --- Fuss --- */
.page-elevator .ev-fuss {
  text-align: center;
  margin: 8px 0 0;
}
.page-elevator .ev-knopf {
  display: inline-block;
  padding: 12px 26px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  color: var(--auf-rosa, #ffffff);
  background: var(--ci-mittel, #993556);
}
.page-elevator .ev-knopf:hover {
  background: var(--ci-dunkel, #7a2643);
  color: var(--auf-rosa, #ffffff);
}

/* V712: die Kachel vor Punkt 5. Bezieht sich auf die Punkte 2 bis 4,
   ist aber kein eigener Zaehlpunkt - deshalb ein abgesetzter Kasten
   statt eines siebten Abschnitts mit Medaille. */
.page-elevator .ev-kachel {
  margin: 0 0 40px;
  padding: 18px 20px;
  border: 1px solid var(--ci-rosa, #d4537e);
  border-radius: 14px;
  background: var(--flaeche-zart, #fdf7f9);
}
.page-elevator .ev-kachel h2 {
  margin: 0 0 10px;
  font-size: 1.12em;
  text-align: center;
  color: var(--ci-dunkel, #4b1528);
}
.page-elevator .ev-kachel p {
  margin: 0 0 12px;
  line-height: 1.62;
}
.page-elevator .ev-kachel p:last-child { margin-bottom: 0; }

/* V714: die zwei Bildschirmfotos stehen IM Text und werden umflossen.
   Eines rechts, eines links, je rund ein Drittel der Kachelbreite.

   FLOAT, nicht Raster: nur so schmiegt sich der Text an die Bilder.
   Ein umflossenes Bild muss VOR dem Text stehen, den es verdraengen
   soll - deshalb liegen die figure-Elemente jeweils VOR ihrem Absatz.

   overflow: auto am Umschlag schliesst die Floats ein. Ohne das wuerde
   ein Bild, das laenger ist als sein Text, unten aus der Kachel
   herausragen. */
.page-elevator .ev-melde-text {
  overflow: auto;
}
/* V715: dreissig Prozent groesser - auf den Bildschirmfotos ist
   Schrift zu lesen, und bei einem Drittel war sie zu klein.
       33%   -> 43%
       260px -> 340px
   Der Text daneben behaelt damit rund 57% der Kachelbreite, also
   etwa 340px - genug fuer eine lesbare Zeile. Weiter waere es
   nicht gegangen, ohne den Umfluss zu einer Spalte aus
   Silbentrennung zu machen. */
/* V719: KEIN margin-Kurzschreiber mehr.
   Hier lag der Fehler seit V714: diese Regel ist SPEZIFISCHER
   (zwei Klassen + Element) als .page-elevator .ev-bild-links
   (zwei Klassen). "margin: 4px 0 10px" hat damit die Seitenraender
   auf 0 gesetzt und jedes margin-right/-left der Float-Regeln
   ueberstimmt. Die Bilder hatten also NIE Abstand zum Text -
   sichtbar war nur der unsichtbare weisse Rand in den Bilddateien,
   und den hat V717 weggeschnitten.
   Jetzt nur noch oben und unten, in Langschreibweise. */
.page-elevator .ev-melde-text figure {
  width: 43%;
  max-width: 340px;
  margin-top: 4px;
  margin-bottom: 10px;
  /* MUSS dastehen: <figure> traegt vom Browser aus
     "margin: 1em 40px". Ohne diese zwei Zeilen blieben die 40px
     seitlich stehen und ruecken das Bild vom Kachelrand ein.
     Die zwei Float-Regeln darunter sind spezifischer und
     ueberschreiben jeweils die Seite, auf der der Text steht. */
  margin-left: 0;
  margin-right: 0;
}
/* Beide gleich weit weg vom Text - 22px. Die Ungleichheit aus V716
   (16 gegen 22) war ohnehin wirkungslos, siehe oben.
   Unter .ev-melde-text gestellt, damit sie dieselbe Spezifitaet
   tragen wie die Regel darueber und nicht wieder verlieren. */
.page-elevator .ev-melde-text .ev-bild-rechts {
  float: right;
  margin-left: 22px;
}
/* clear: both MUSS hier stehen, seit die Absaetze flow-root sind.
   Ist der erste Absatz kuerzer als das Bild rechts daneben, wuerde
   dieses zweite Bild sonst NEBEN das erste rutschen - 43 plus 43
   Prozent passen nebeneinander. Der zweite Absatz haette dann nur
   noch den schmalen Rest dazwischen. Mit clear beginnt das zweite
   Bild immer unterhalb des ersten. */
.page-elevator .ev-melde-text .ev-bild-links {
  float: left;
  clear: both;
  margin-right: 22px;
}
.page-elevator .ev-melde-text img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  border: 0.5px solid var(--linie, #e3d7dd);
  background: var(--flaeche, #ffffff);
}
/* V717: die Unterschrift darf die Bildbreite nicht ueberschreiten.
   Sie war der Teil, der dem Text zu nahe kam - laenger als die
   sichtbare Karte, und damit stand sie in dem Abstand, den das Bild
   eigentlich haelt. balance bricht sie auf zwei gleich lange Zeilen,
   statt eine lange und ein einzelnes Wort. */
/* V718: die Unterschrift wird zum UMBRUCH gezwungen.
   max-width: 100% aus V717 hat nicht gereicht - es begrenzt die Box,
   nicht den Textfluss darin; eine Zeile, die knapp passt, bleibt eine
   Zeile und ragt ueber die Bildkante.
   88% ist SCHMALER als das Bild darueber. Damit MUSS die Zeile
   brechen, und sie endet garantiert vor der Bildkante - egal, wie
   breit die Kachel gerade ist oder wie lang die Unterschrift wird.
   text-wrap: balance teilt sie dabei in zwei etwa gleich lange
   Zeilen statt in eine lange und ein einzelnes Wort.
   margin-inline: auto haelt sie mittig unter dem Bild. */
.page-elevator .ev-melde-text figcaption {
  margin-top: 6px;
  margin-inline: auto;
  max-width: 88%;
  text-align: center;
  text-wrap: balance;
  overflow-wrap: break-word;
  font-size: 0.82em;
  line-height: 1.4;
  color: var(--text-leise, #6f5f67);
}
/* V720: der Text fliesst NICHT mehr unter das Bild.
   flow-root macht aus jedem Absatz einen eigenen Block, der sich
   NEBEN den Float stellt statt ihn zu umfliessen. Damit kann die
   letzte Zeile nicht mehr unter dem Bild landen und dort einzeln
   stehen - vorher blieb ein "sind." allein am linken Rand haengen.
   Was daraus wird, ist ein sauberes Nebeneinander aus Bild und
   Textspalte; unter dem Bild bleibt hoechstens ein kleines leeres
   Eck, wenn der Absatz kuerzer ist. */
.page-elevator .ev-melde-text p {
  display: flow-root;
  text-align: left;
}

/* Unter 560px hat ein Drittel keine sinnvolle Breite mehr - dann steht
   jedes Bild fuer sich, mittig, und der Text laeuft darunter weiter. */
@media (max-width: 560px) {
  .page-elevator .ev-melde-text figure {
    width: 100%;
    max-width: 400px;
    margin-top: 14px;
    margin-bottom: 14px;
  }
  /* Die zwei Float-Regeln sind jetzt gleich spezifisch - sie
     muessen hier ausdruecklich zurueckgenommen werden, sonst
     bliebe das Bild schwebend und seitlich eingerueckt. */
  .page-elevator .ev-melde-text .ev-bild-rechts,
  .page-elevator .ev-melde-text .ev-bild-links {
    float: none;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 420px) {
  .page-elevator .ev-medaille { max-width: 220px; }
  .page-elevator .ev-kopf h1  { font-size: 1.4em; }
  .page-elevator .ev-kachel   { padding: 15px 16px; }
}