/* ==========================================================================
   Amorazza - pages/kachel.css   (ENTWURF, V796)

   NUR das, was die drei Entwuerfe ZUSAETZLICH brauchen. wia.css bleibt
   unberuehrt - dort haengen was-ist-amorazza.php und andere Seiten dran.

   Christian am 11.09.2026: "ich moechte ausschliesslich sanfte farben
   gemaess unserer ci und kein tiefrot oder schwarz."
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. DER APHORISMUS WAR SCHWARZ.
   wia.css Zeile 419 setzt background: var(--ink-900) und color: #fff.
   Hier wird daraus eine sanfte Rosé-Flaeche mit dunkelroter Schrift -
   dieselbe Aussage, nur ohne den harten Block mitten auf der Seite.
   -------------------------------------------------------------------------- */
body.page-kachel .wia-stance-aphorism.k1-sanft {
  background: var(--rose-50, #fdf6f3);
  color: var(--rose-600, #993556);
  border: 1px solid var(--rose-100, #fbeaf0);
}

/* --------------------------------------------------------------------------
   2. DER VERWEIS INS FEATUREBOOK.
   Er darf NICHT aussehen wie der Wunschnamen-Knopf. Zwei gleich laute
   Aufforderungen hintereinander heben sich gegenseitig auf - genau das
   war der Fehler im ersten Entwurf.
   Ruhige Flaeche, ruhiger Knopf, klar erkennbar, aber leiser.
   -------------------------------------------------------------------------- */
body.page-kachel .k-weiter {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 32px);
  background: var(--rose-50, #fdf6f3);
  border: 1px solid var(--rose-100, #fbeaf0);
  border-radius: 20px;
  text-align: center;
}
body.page-kachel .k-weiter h2 {
  margin: 0 0 10px;
  color: var(--rose-600, #993556);
  font-size: var(--fs-title);
  line-height: 1.3;
}
body.page-kachel .k-weiter p {
  margin: 0 0 18px;
  color: var(--text-leise, #6f5f67);
}
body.page-kachel .k-weiter a {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  background: transparent;
  color: var(--rose-600, #993556);
  border: 1.5px solid var(--rose-200, #f4c0d1);
  text-decoration: none;
  font-weight: 600;
  transition: background-color .25s, border-color .25s, color .25s;
}
body.page-kachel .k-weiter a:hover,
body.page-kachel .k-weiter a:focus-visible {
  background: var(--rose-100, #fbeaf0);
  border-color: var(--rose-400, #d4537e);
  color: var(--rose-800, #4b1528);
}

/* --------------------------------------------------------------------------
   3. LUFT ZWISCHEN DEN ABSCHNITTEN.
   Im ersten Entwurf standen Karten und nackte Textbloecke gemischt, weil
   zwei Baukaesten uebereinanderlagen. Jetzt gibt es nur noch einen -
   diese Regel sorgt nur dafuer, dass die Zwischenueberschrift Luft
   bekommt und nicht an der Karte darueber klebt.
   -------------------------------------------------------------------------- */
body.page-kachel .wia-features-h {
  margin-top: clamp(38px, 7vw, 62px);
}

/* --------------------------------------------------------------------------
   4. DIE TELEFONVORSCHAU IM FEATUREBOOK.
   Sie kommt aus pages/elevator.css und ist dort auf body.page-elevator
   eingegrenzt. Statt beide Stylesheets zu laden - was im ersten Entwurf
   zwei Gestaltungswelten auf eine Seite brachte - traegt der Koerper
   zusaetzlich page-elevator NUR fuer kachel2. Diese Regel gibt dem
   Rahmen die Luft, die er zwischen den Karten braucht.
   -------------------------------------------------------------------------- */
body.page-kachel .k-telefon-block {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(24px, 4vw, 32px);
  background: var(--rose-50, #fdf6f3);
  border: 1px solid var(--rose-100, #fbeaf0);
  border-radius: 20px;
  text-align: center;
}
body.page-kachel .k-telefon-block h2 {
  margin: 0 0 10px;
  color: var(--rose-600, #993556);
  font-size: var(--fs-title);
}
body.page-kachel .k-telefon-block p {
  margin: 0 auto 6px;
  max-width: 52ch;
  color: var(--text-leise, #6f5f67);
}

/* --------------------------------------------------------------------------
   5. EIN RHYTHMUS FUER DIE GANZE SEITE.

   URSACHE DES PROBLEMS, gemessen: Der Behaelter heisst im Original
   <main class="wia-page">; in V796 hiess er "wia-main". Die Regel
       body.page-wia .wia-page section { margin-bottom: 24px; }
   griff deshalb nicht, und die Abstaende waren 0/0/62/20/0/24/48/48
   statt durchgehend 24.

   Dazu kommt der Elevator-Block: er bringt .ev-seite mit eigener Breite,
   eigenem Innenabstand und 40 Pixel zwischen seinen Abschnitten mit.

   Diese Regeln setzen ALLES auf 24 - aussen wie innen - und nehmen dem
   jeweils letzten Element den Abstand nach unten.
   -------------------------------------------------------------------------- */
body.page-kachel .wia-page .ev-seite {
  max-width: none;
  padding: 0;
}

body.page-kachel .wia-page > * {
  margin-bottom: 24px;
}
body.page-kachel .wia-page > *:last-child {
  margin-bottom: 0;
}

body.page-kachel .wia-page .ev-seite > * {
  margin-bottom: 24px;
}
body.page-kachel .wia-page .ev-seite > *:last-child {
  margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   6. DER SCHRECK-SMILEY IM 50er-BLOCK.
   Christian am 11.09.: "kannst du hier ein 'ich bin erschrocken'-Smiley
   gross einfuegen?"
   Eigene Zeile ueber dem Text, deutlich groesser als die Schrift.
   aria-hidden: ein Vorleseprogramm wuerde sonst den Namen des Zeichens
   vorlesen, und der traegt hier nichts.
   -------------------------------------------------------------------------- */
body.page-kachel .k-schreck {
  display: block;
  font-size: clamp(2.6rem, 9vw, 4rem);
  line-height: 1;
  margin: 0 0 14px;
}

/* --------------------------------------------------------------------------
   7. DIE MISSION STAERKER HERVOR.
   Christian: "hebe unsere mission, insbesondere: Wir von Amorazza haben
   uns zum Ziel gesetzt ... staerker hervor."
   Groessere Schrift, mehr Zeilenluft, CI-Rot statt Grauton - und ein
   Strich an der linken Kante, damit der Satz auch beim Ueberfliegen
   auffaellt. Nur dieser eine Absatz, nicht der ganze Abschnitt.
   -------------------------------------------------------------------------- */
body.page-kachel .wia-page .wia-stance-mission-text.k-mission-gross {
  font-size: clamp(1.12rem, 1rem + 0.9vw, 1.5rem);
  line-height: 1.5;
  font-weight: 600;
  color: var(--rose-600, #993556);
  border-left: 4px solid var(--rose-200, #f4c0d1);
  padding-left: clamp(14px, 3vw, 20px);
  margin: 6px 0 18px;
}

/* --------------------------------------------------------------------------
   8. DIE HALTUNGS-KACHEL unter "Was macht Amorazza anders und besonders?"
   Christian am 11.09.: "Baue eine Kachel ein mit Rand und folgendem Text."
   Rand, sanfte Flaeche, linksbuendiger Text - in einer Kachel mit sechs
   Absaetzen liest sich zentrierter Satzspiegel schlecht.
   Der Schlussteil "Hier bin ich. / So bin ich. / Vielleicht bin ich genau
   der Mensch, den Du suchst." steht mittig und groesser - er ist die
   Zuspitzung.
   -------------------------------------------------------------------------- */
body.page-kachel .wia-page .k-haltung {
  margin: 20px 0 0;
  padding: clamp(22px, 4vw, 32px);
  background: var(--rose-50, #fdf6f3);
  border: 1px solid var(--rose-200, #f4c0d1);
  border-radius: 20px;
  text-align: left;
}
body.page-kachel .wia-page .k-haltung p {
  margin: 0 0 14px;
  text-align: left;
}
body.page-kachel .wia-page .k-haltung p:last-child {
  margin-bottom: 0;
}
body.page-kachel .wia-page .k-haltung .k-haltung-schluss {
  margin-top: 18px;
  text-align: center;
  font-size: clamp(1.08rem, 1rem + 0.7vw, 1.32rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--rose-600, #993556);
}

/* Dieselbe Kachel, etwas ruhiger - sie steht INNERHALB eines Punktes und
   soll den Abschnitt nicht ueberlagern. */
body.page-kachel .wia-page .k-haltung-klein {
  margin: 16px 0 0;
}
body.page-kachel .wia-page .k-haltung-klein .k-haltung-schluss {
  font-size: clamp(1.02rem, 1rem + 0.4vw, 1.18rem);
}

/* --------------------------------------------------------------------------
   9. DAS TELEFON SCHUETZEN.

   GEFUNDEN, weil Christian meldete, die Flaggen seien verschwunden.
   GEMESSEN: das Markup des Telefons ist Byte fuer Byte dasselbe wie in
   elevator.php (2934 Bytes, vier Flaggen). Nicht das Markup war das
   Problem, sondern die Schrift.

       .ev-spruch im Original:   12 px, Zeilenhoehe 19,44
       .ev-spruch in diesem Entwurf: 19 px, Zeilenhoehe 30,4

   Ursache: .ev-spruch ist ein <p> und liegt hier INNERHALB von
   .wia-page. Die Regel body.page-wia .wia-page p (0,2,2) wiegt schwerer
   als .page-elevator .ev-spruch (0,2,0) und setzt die Schrift groesser.

   FOLGE: der rollende Inhalt war 1096 statt 920 Pixel hoch. Die
   Rollbewegung laeuft ueber eine feste Strecke - das Ende, wo die
   Flaggen stehen, kam nie ins Bild.

   Diese Regel nimmt der wia-Typografie den Zugriff auf das Innere des
   Telefons. Die Werte sind woertlich die aus elevator.css.
   -------------------------------------------------------------------------- */
body.page-kachel .wia-page .ev-telefon p {
  font-size: 12px;
  line-height: 1.62;
  color: #5f5e5a;
}
/* NUR die Absatzregel war noetig. Flaggen und Kompass-Karten waren in
   beiden Fassungen schon gleich - eigene Regeln dafuer machten den
   Inhalt zu KLEIN (864 statt 920). Gemessen, dann wieder entfernt. */

/* --------------------------------------------------------------------------
   10. DIE FLAGGEN ZUM TEXT.
   Christian am 11.09.: "Einen Bild dazu von ausgefuellten flags je 3 Stueck".
   Gebautes Markup, kein Bild - dieselben Klassen wie im Telefonrahmen.
   Nebeneinander, solange Platz ist; darunter auf schmalen Schirmen.
   Die Schriftgroesse der Flaggen kommt aus elevator.css; hier wird sie
   nur gegen die wia-Typografie geschuetzt, wie beim Telefon.
   -------------------------------------------------------------------------- */
body.page-kachel .wia-page .k-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 16px 0 0;
}
body.page-kachel .wia-page .k-flags .ev-flagge {
  flex: 1 1 240px;
  margin: 0;
}
body.page-kachel .wia-page .k-flags .ev-flagge b {
  display: block;
  margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   11. RAHMEN UM DIE MEDAILLENTEXTE.
   Christian am 11.09.: "Alle Medaillentext einrahmen mit einer duennen
   abgerundeten dunkelgrauen linie, mehr nicht."
   Also: Linie, Radius, Innenabstand - keine Flaeche, keine Farbe.
   Gilt fuer die Textabsaetze der sechs Punkte. Der Telefonrahmen und der
   Flaggenblock bleiben aussen vor - sie sind keine Texte.
   -------------------------------------------------------------------------- */
body.page-kachel .wia-page .ev-punkt > p {
  border: 1px solid #6b6b6b;
  border-radius: 14px;
  padding: clamp(14px, 2.6vw, 20px);
  margin: 14px 0 0;
}

/* --------------------------------------------------------------------------
   12. DER UEBER-MICH-BEREICH IM TELEFON.
   Christian am 11.09.: "Weil wir haben den 'Ueber Mich' Bereich
   verschoenert mit Gaensefuesschen und leichtem Rahmen ... und der
   Animation bitte beruecksichtigen."

   Vorbild ist der echte Block aus Discover (components.css ab Zeile 782):
   weisse Flaeche, Rahmen in rose-100, Radius, Ueberschrift in rose-600 in
   Versalien, und zwei Anfuehrungszeichen in Georgia - das oeffnende oben
   links, das schliessende unten rechts.

   HIER VERKLEINERT auf die Telefonbreite: der Schirm ist 214 Pixel breit,
   die echte Karte etwa doppelt so breit. Zeichen 26 statt 46 Pixel,
   Innenabstand 42/16/14 statt 78/34/30.

   ACHTUNG, DIE ROLLBEWEGUNG: ev-rollen schiebt um feste -505 Pixel
   (elevator.css Zeile 164). Wird der Inhalt zu hoch, kommt das Ende - wo
   die Flaggen stehen - nicht mehr ins Bild. Genau das war der Fehler, den
   Christian in V802 gemeldet hat. Nachgemessen, siehe Changelog.
   -------------------------------------------------------------------------- */
body.page-kachel .wia-page .ev-telefon .ev-bio {
  position: relative;
  /* Der echte Block ist linksbuendig (components.css 804 ff.). Im
     Telefon zentriert der Schirm sonst die Ueberschrift. */
  text-align: left;
  margin: 11px 2px;
  padding: 42px 16px 14px;
  background: #ffffff;
  border: 1px solid var(--rose-100, #fbeaf0);
  border-radius: 10px;
}
body.page-kachel .wia-page .ev-telefon .ev-bio-titel {
  margin: 0 0 5px;
  font-size: 9px;
  font-weight: 600;
  color: var(--rose-600, #993556);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
body.page-kachel .wia-page .ev-telefon .ev-bio-text {
  margin: 0;
  font-size: 11px;
  line-height: 1.55;
  color: #444444;
}
body.page-kachel .wia-page .ev-telefon .ev-bio::before,
body.page-kachel .wia-page .ev-telefon .ev-bio::after {
  position: absolute;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 0;
  color: var(--rose-600, #993556);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
body.page-kachel .wia-page .ev-telefon .ev-bio::before {
  content: '\201E';
  top: 20px;
  left: 16px;
}
body.page-kachel .wia-page .ev-telefon .ev-bio::after {
  content: '\201C';
  right: 7px;
  bottom: 7px;
}

/* --------------------------------------------------------------------------
   13. DAS TELEFON GROESSER, UND DIE ROLLBEWEGUNG WEIT GENUG.
   Christian am 11.09.: "das handy scrollt immer noch zu wenig, der
   unterste satz ist abgeschnitten. mach es grosszuegiger und kannst du
   das handy insgesamt groesser machen?"

   GEMESSEN, warum der Satz abgeschnitten war:
       Der Schirm hat vier Teile: Kopfleiste 33, Quota-Zeile 27, das
       Rollfenster (.ev-blende) und unten die Aktionsleiste 42.
       NUR DAS ROLLFENSTER ZEIGT INHALT - beim grossen Telefon 550 Pixel.
       Der Inhalt ist 978 hoch, noetig sind also 428 Pixel Weg.
       ev-rollen schob 505 - beim alten, kleineren Telefon war das
       Fenster aber nur 462 hoch, und die letzten Pixel kamen nie ins
       Bild. Der erste Versuch mit 405 war wieder zu wenig: ich hatte
       gegen den ganzen Schirm gerechnet statt gegen das Rollfenster.
       Jetzt 448 - die 428 plus 20 Pixel Luft unter der letzten Zeile.

   GROESSER: 250x540 -> 310x670. Dasselbe Seitenverhaeltnis, etwa ein
   Viertel mehr. Der Schirm waechst mit (height 100%), der Inhalt bleibt
   gleich gross - es wird also mehr auf einmal sichtbar.

   Die Strecke steht in einer EIGENEN Bewegung k-rollen. @keyframes
   lassen sich nicht ueberschreiben, nur ersetzen. Der Wert ist
   nachgemessen, nicht geschaetzt - siehe Changelog.
   -------------------------------------------------------------------------- */
/* HOEHE, Christian am 12.09.: "mach das handy bei kachel 1 laenger,
   sodass die 100 Fragen auch reinpassen und der user das sieht."
   GEMESSEN, wo die Bloecke im Inhalt liegen:
        367-429  Interessen
        436-499  Eigenschaften
        506-552  Ansichten 100 Fragen
        559-621  Lebensplanung
   Das Rollfenster war 550 hoch - die 100 Fragen endeten bei 552 und
   wurden am Anfang genau abgeschnitten.
   Das Telefon ist deshalb von 670 auf 760 gewachsen; das Rollfenster
   waechst mit auf 640. Damit stehen alle VIER Gemeinsamkeiten-Bloecke
   sofort da, ohne dass man warten muss. */
body.page-kachel .wia-page .ev-telefon {
  width: 310px;
  height: 760px;
}
/* DIE ZEITEN, Christian am 12.09.: "oben und unten 1 sekunde reicht
   voellig."
   Umlauf 14 Sekunden:
       0 -  7 %   oben halten          0,98 s
       7 - 54 %   nach unten rollen    6,58 s
      54 - 61 %   unten halten         0,98 s
      61 - 100 %  zurueck nach oben    5,46 s
   Der Umlauf ist von 17 auf 14 Sekunden gekuerzt - sonst waere allein
   das Rollen langsamer geworden, und danach hatte niemand gefragt.
   Die Rollzeiten bleiben damit fast wie vorher (6,46 und 5,78). */
body.page-kachel .wia-page .ev-telefon .ev-lauf {
  animation: k-rollen 14s ease-in-out infinite;
}
@keyframes k-rollen {
  0%, 7%    { transform: translateY(0); }
  54%, 61%  { transform: translateY(-367px); }
  100%      { transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   14. DAS FEATUREBOOK - kachel2.php
   Christian am 12.09.: Aufbau wie features.php, Ueberschrift, Kurztext,
   und ein Pfeil, der die ausfuehrliche Beschreibung aufklappt.

   .card kommt aus components.css und ist auch ohne Anmeldung da.
   Der Pfeil ist <details>/<summary> - kein JavaScript noetig.
   -------------------------------------------------------------------------- */
body.page-featurebook .wia-page .fb-gruppe {
  margin: clamp(34px, 6vw, 54px) 0 2px;
  text-align: center;
}
body.page-featurebook .wia-page .fb-gruppe-unter {
  margin: 0 auto 18px;
  max-width: 46ch;
  text-align: center;
  color: var(--text-leise, #6f5f67);
}
body.page-featurebook .wia-page .fb-eintrag {
  margin-bottom: 12px;
  text-align: left;
}
body.page-featurebook .wia-page .fb-eintrag h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  text-align: left;
}
body.page-featurebook .wia-page .fb-zeichen {
  font-size: 1.25em;
  line-height: 1;
}
body.page-featurebook .wia-page .fb-kurz {
  margin: 0;
  text-align: left;
  color: var(--ink-800, #333);
}

/* Die Marke Free/Premium - klein, ruhig, nicht wie ein Preisschild. */
body.page-featurebook .wia-page .fb-marke {
  font-size: 0.62em;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
body.page-featurebook .wia-page .fb-marke-free {
  background: #eef6f0;
  color: #1f7a3f;
}
body.page-featurebook .wia-page .fb-marke-premium {
  background: var(--rose-50, #fdf6f3);
  color: var(--rose-600, #993556);
}

/* Der Pfeil. Das eigene Dreieck des Browsers ist abgeschaltet und durch
   ein gedrehtes Zeichen ersetzt - sonst sieht es auf jedem System
   anders aus. */
body.page-featurebook .wia-page .fb-mehr {
  margin-top: 10px;
}
body.page-featurebook .wia-page .fb-mehr > summary {
  display: flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  list-style: none;
  color: var(--rose-600, #993556);
  font-size: var(--fs-meta, 0.85rem);
  font-weight: 600;
}
body.page-featurebook .wia-page .fb-mehr > summary::-webkit-details-marker {
  display: none;
}
body.page-featurebook .wia-page .fb-mehr > summary::before {
  content: '';
  width: 0;
  height: 0;
  border-left: 6px solid currentColor;
  border-top: 4.5px solid transparent;
  border-bottom: 4.5px solid transparent;
  transition: transform .2s ease;
}
body.page-featurebook .wia-page .fb-mehr[open] > summary::before {
  transform: rotate(90deg);
}
body.page-featurebook .wia-page .fb-mehr > summary:hover,
body.page-featurebook .wia-page .fb-mehr > summary:focus-visible {
  color: var(--rose-800, #4b1528);
}
body.page-featurebook .wia-page .fb-mehr > p {
  margin: 10px 0 0;
  padding: 14px 16px;
  text-align: left;
  background: var(--rose-50, #fdf6f3);
  border-radius: 12px;
  color: var(--ink-800, #333);
}

/* --------------------------------------------------------------------------
   15. DIE TELEFONE IM FEATUREBOOK - EINE GROESSE FUER ALLE.

   Christian am 14.09.: "diese groesse ist die groesse unserer handys,
   basta. Passt der Screenshot hinein, gut, wenn nicht animation."

   MASS GENOMMEN AM TELEFON IN KACHEL 1:
       Rahmen   310 x 760, Innenabstand 9, Radius 34
       Schirm   292 x 742, Radius 26
   Vorher hatte das Featurebook ZWEI andere Groessen - 268x709 fuer
   Standbilder und 302x643 fuer rollende. Drei verschiedene Telefone auf
   zwei Seiten.

   DIE REGEL, gerechnet je Bild:
       Bildhoehe bei 292 Breite  <=  742   ->  Standbild
       groesser                            ->  Bewegung,
                                               Weg = Hoehe - 742 + 20
   kachel2.php setzt --fb-weg je Rahmen. Fehlt der Wert, wird nicht
   gerollt - die sichere Seite.
   -------------------------------------------------------------------------- */
/* DER RAHMEN IST DERSELBE WIE IN KACHEL 1.
   Vorher stand hier eine flache Farbe (#1c1b1a) mit einem weichen
   Schatten. Das Telefon in Kachel 1 hat stattdessen einen Verlauf, der
   Metall nachahmt: helle Kanten links und rechts, dunkle Mitte, dazu
   eine haarfeine schwarze Linie aussen.
   Woertlich aus elevator.css Zeile 65 uebernommen. Die Prozentwerte im
   Verlauf sind Anteile der Breite, sie gelten also auch bei 310 statt
   250 Pixeln. */
body.page-featurebook .wia-page .fb-telefon {
  position: relative;
  width: 310px;
  height: 760px;
  margin: 16px auto 4px;
  padding: 9px;
  border-radius: 34px;
  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);
  box-sizing: border-box;
}
body.page-featurebook .wia-page .fb-schirm {
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 26px;
  background: #ffffff;
}
body.page-featurebook .wia-page .fb-schirm img {
  display: block;
  width: 100%;
  height: auto;
}
/* NICHT GLEICHE DAUER, SONDERN GLEICHE GESCHWINDIGKEIT.
   Mit festen 20 Sekunden ergaben sich je nach Weg 11 bis 63 Pixel je
   Sekunde - Quick Match kroch mit 75 Pixeln in 20 Sekunden dahin,
   waehrend der Kompass ueber 400 schob. Sichtbar bewegte sich im einen
   Fall nichts, im anderen zu viel.

   Das Telefon in Kachel 1 ist das Mass: 367 Pixel in 47 Prozent von
   14 Sekunden = 55,8 Pixel je Sekunde.
   kachel2.php setzt --fb-dauer je Telefon, gerechnet als
       Dauer = Weg / 26,2 + 2 Sekunden, mindestens 6
   Die 26,2 sind 55,8 mal 0,47 - damit haelt die Rollstrecke bei jedem
   Bild ungefaehr dasselbe Tempo. Die zwei Sekunden sind das Halten oben
   und unten, die Untergrenze verhindert ein Zucken bei kurzen Wegen. */
body.page-featurebook .wia-page .fb-telefon-lauf .fb-schirm img {
  animation: fb-rollen var(--fb-dauer, 14s) ease-in-out infinite;
}

/* DIE STRECKE STEHT AM EINZELNEN TELEFON, nicht hier: jedes Bild ist
   anders hoch. Fehlt --fb-weg, steht das Bild still. */
@keyframes fb-rollen {
  0%, 5%    { transform: translateY(0); }
  47%, 52%  { transform: translateY(var(--fb-weg, 0px)); }
  100%      { transform: translateY(0); }
}

/* Wer Bewegung abgeschaltet hat, sieht den Anfang - ohne Rollen. */
@media (prefers-reduced-motion: reduce) {
  body.page-featurebook .wia-page .fb-telefon-lauf .fb-schirm img {
    animation: none;
  }
}

/* --------------------------------------------------------------------------
   17. DER KOPF IM TELEFON - SYSTEMGETREU.
   Christian am 14.09.: "kachel 1 die animation ist das bild oben nicht
   systemgetreu, farben und es fehlen die icons".

   Der Nachbau in elevator.css hatte nur Text auf rosa Flaeche. Der echte
   Kopf (app-shell.css ab Zeile 506) sieht anders aus:
       Flaeche       #ffffff, unten 1px #fce8ee
       Reiter        untereinander Sinnbild und Wort, Farbe #888
       aktiv         #d4537e, darunter ein 3px-Strich in derselben Farbe
   Diese Regeln ziehen das nach, verkleinert auf die Telefonbreite:
   Sinnbild 15 statt 22-26 px, Wort 8 statt fs-meta.
   NUR ueber page-kachel - elevator.php bleibt, wie sie ist.
   -------------------------------------------------------------------------- */
body.page-kachel .wia-page .ev-telefon .ev-app-kopf {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0;
  background: #ffffff;
  border-bottom: 1px solid #fce8ee;
}
body.page-kachel .wia-page .ev-telefon .ev-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 5px 0 4px;
  color: #888888;
  font-weight: 500;
  border-bottom: 3px solid transparent;
}
body.page-kachel .wia-page .ev-telefon .ev-tab-icon {
  font-size: 15px;
  line-height: 1;
}
body.page-kachel .wia-page .ev-telefon .ev-tab-wort {
  font-size: 8px;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
body.page-kachel .wia-page .ev-telefon .ev-tab-aktiv {
  color: #d4537e;
  border-bottom-color: #d4537e;
}