/* Forest Air — Erfahrungen
   ===========================================================================
   Vierundfünfzig Zuschriften, fünf Videos, ein Podcast. Die Seite lebt davon,
   dass die Stimmen wirken — also muss die Gestaltung leise sein.

   VIER ENTSCHEIDUNGEN
   -------------------
   1) Die Zitate stehen in Barlow, nicht in Cormorant kursiv. Kursive Antiqua
      über zwölf Zeilen liest sich schwer, und hier stehen vierundfünfzig
      solcher Absätze untereinander. Der kursive Ton bleibt den Vorspannen
      und dem großen Anführungszeichen als Zierrat.

   2) Die Karten liegen in CSS-Spalten (column-count), nicht in einem Raster
      mit gleich hohen Zeilen. Die Texte sind zwischen vier und vierzehn
      Zeilen lang; in einem Raster entstünden daraus Löcher, in Spalten
      fließt es.

   3) Kein Sternchen, kein Balken, keine Durchschnittsnote. Auf der Seite
      steht nichts, was nicht in den Daten steht — in Deutschland ist eine
      geschönte Kundenbewertung ein Abmahngrund.

   4) Die Videos laden erst beim Drücken (preload="none" + Standbild). Vorher
      hing an jeder Kachel der ganze Film als Vorschau — für fünf Standbilder
      über 200 MB.
   =========================================================================== */

.fa-ef{
  --ef-linie:rgba(231,228,214,.13);
  --ef-linie-hell:rgba(231,220,201,.34);
  position:relative;
}
.fa-ef-innen{max-width:1140px;margin:0 auto;padding:0 var(--rand)}

/* ================================================================== Auftakt */
.fa-ef-hero{
  background:
    radial-gradient(80% 62% at 50% -8%,rgba(231,220,201,.11) 0%,rgba(231,220,201,0) 62%),
    linear-gradient(180deg,#1E201B 0%,#232323 62%,#212320 100%);
  padding:clamp(54px,7.5vw,96px) 0 clamp(38px,5vw,60px);
  text-align:center;
}
.fa-ef-hero .fa-fq-ober{justify-content:center}
.fa-ef-hero h1{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.012em;
  font-size:clamp(36px,7.4vw,84px);line-height:.98;margin:0 0 16px;color:var(--creme);
  text-shadow:0 2px 0 rgba(0,0,0,.32),0 20px 54px rgba(0,0,0,.45);
}
.fa-ef-hero h1 em,.fa-ef-kopf h2 em{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  text-transform:none;letter-spacing:0;color:var(--mondlicht);
  font-size:1.06em;line-height:.95;
}
.fa-ef-lede{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:clamp(18px,2.4vw,25px);line-height:1.42;color:var(--mondlicht);
  margin:0 auto;max-width:28em;
}
/* Die Echtheitszeile. Sie ist kein Kleingedrucktes — sie ist der Grund,
   warum man den Karten darunter glauben kann. */
.fa-ef-echt{
  margin:24px auto 0;max-width:34em;padding:12px 20px;
  border:1px solid var(--ef-linie);border-radius:12px;
  background:rgba(245,242,235,.04);
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:14px;line-height:1.65;color:#C9C6B8;
}

.fa-ef-kopf{text-align:center;margin:0 0 clamp(26px,4vw,44px)}
.fa-ef-kopf .fa-fq-ober{justify-content:center}
.fa-ef-kopf h2{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.018em;
  font-size:clamp(26px,4.6vw,52px);line-height:1.02;margin:0 0 12px;color:var(--creme);
}

/* ========================================================== Hervorgehoben */
.fa-ef-gross,.fa-ef-podcast{
  background:linear-gradient(180deg,#212320 0%,#232323 100%);
  padding:clamp(34px,5vw,64px) 0;
}
.fa-ef-gross-karte,.fa-ef-pod-karte{
  display:grid;gap:clamp(20px,3vw,38px);align-items:center;
  background:linear-gradient(180deg,#2A2C26 0%,#232520 100%);
  border:1px solid var(--ef-linie);border-radius:20px;
  padding:clamp(18px,2.6vw,28px);
}
.fa-ef-gross-karte{grid-template-columns:minmax(0,0.72fr) minmax(0,1fr)}
.fa-ef-pod-karte{grid-template-columns:minmax(0,1fr) minmax(0,0.95fr)}

.fa-ef-film{
  width:100%;height:auto;display:block;border-radius:14px;
  background:#15170F;border:1px solid var(--ef-linie);
}
.fa-ef-gross-film .fa-ef-film{aspect-ratio:3/4;object-fit:cover}
/* siehe handbuecher.css: der Fokusrahmen auf <video> wird ausdruecklich gesetzt */
.fa-ef-film:focus-visible{outline:2px solid var(--mondlicht);outline-offset:3px}

.fa-ef-abzeichen{
  display:inline-block;margin:0 0 14px;padding:5px 13px;border-radius:999px;
  background:rgba(231,220,201,.13);border:1px solid rgba(231,220,201,.30);
  color:var(--mondlicht);
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
}
.fa-ef-rolle{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:#B4B8A1;
  margin:0 0 8px;
}
.fa-ef-gross-text h2,.fa-ef-pod-text h2{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.016em;
  font-size:clamp(24px,3.4vw,40px);line-height:1.04;margin:0 0 14px;color:var(--creme);
}
.fa-ef-bio{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:15.5px;line-height:1.75;color:#DAD6C8;margin:0 0 18px;max-width:42em;
}
.fa-ef-sprachhinweis{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:#ADB19A;
  margin:14px 0 0;
}

/* Podcast-Bild mit Abspielzeichen */
.fa-ef-pod-bild{
  position:relative;display:block;border-radius:14px;overflow:hidden;
  border:1px solid var(--ef-linie);
}
.fa-ef-pod-bild img{width:100%;height:auto;display:block;aspect-ratio:16/9;object-fit:cover}
.fa-ef-spielen{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:66px;height:66px;border-radius:50%;
  background:rgba(245,242,235,.92);
  box-shadow:0 10px 30px rgba(0,0,0,.4);
  transition:transform .3s ease;
}
.fa-ef-spielen::before{
  content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);
  border-left:17px solid #232323;border-top:10px solid transparent;
  border-bottom:10px solid transparent;
}
.fa-ef-pod-bild:focus-visible{outline:2px solid var(--mondlicht);outline-offset:3px}
@media (prefers-reduced-motion:no-preference){
  body:not(.rm) .fa-ef-pod-bild:hover .fa-ef-spielen{transform:translate(-50%,-50%) scale(1.07)}
}

/* Kommentare unter der Folge */
.fa-ef-kommentare{margin:clamp(26px,3.6vw,42px) 0 0;text-align:center}
.fa-ef-komm-titel{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;color:#C4C7B2;margin:0 0 6px;
}
.fa-ef-komm-hinweis{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:13px;color:#ADB19A;margin:0 0 18px;
}
.fa-ef-komm-raster{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;
  text-align:left;
}
.fa-ef-komm{
  margin:0;padding:15px 17px;border-radius:12px;
  background:rgba(245,242,235,.045);border:1px solid var(--ef-linie);
}
.fa-ef-komm blockquote{
  margin:0 0 9px;
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:14.5px;line-height:1.62;color:#DAD6C8;
}
.fa-ef-komm figcaption{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:10.5px;letter-spacing:.14em;color:#A8AC95;word-break:break-word;
}

/* ============================================================ Videokacheln */
.fa-ef-kacheln{
  background:linear-gradient(180deg,#232323 0%,#1F211C 100%);
  padding:clamp(38px,5.5vw,72px) 0;
}
.fa-ef-kachelraster{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;
}
.fa-ef-kachel{
  background:linear-gradient(180deg,#2A2C26 0%,#232520 100%);
  border:1px solid var(--ef-linie);border-radius:16px;overflow:hidden;
  transition:border-color .3s ease,transform .3s ease,box-shadow .3s ease;
}
.fa-ef-kachel:hover{border-color:rgba(231,220,201,.26)}
@media (prefers-reduced-motion:no-preference){
  body:not(.rm) .fa-ef-kachel:hover{transform:translateY(-3px);
    box-shadow:0 20px 44px rgba(0,0,0,.38)}
}
.fa-ef-kachel .fa-ef-film{
  border:0;border-radius:0;aspect-ratio:16/10;object-fit:cover;
}
.fa-ef-kachel-fuss{padding:16px 18px 18px;text-align:center}
.fa-ef-kachel-ober{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#B4B8A1;margin:0 0 6px;
}
.fa-ef-kachel-name{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.05em;
  font-size:20px;line-height:1;color:var(--creme);margin:0;
}
.fa-ef-kachel-ort{
  font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;
  font-size:16px;color:var(--mondlicht);margin:6px 0 0;
}
.fa-ef-sprachmarke{
  display:inline-block;margin:10px 0 0;padding:4px 11px;border-radius:999px;
  border:1px solid rgba(231,228,214,.24);color:#C4C7B2;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:10px;letter-spacing:.18em;text-transform:uppercase;
}

/* ============================================================ Alle Stimmen */
.fa-ef-alle{
  background:linear-gradient(180deg,#1F211C 0%,#232323 22%,#212320 100%);
  padding:clamp(40px,6vw,80px) 0;
}
.fa-ef-reiter-leiste{
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:0 0 14px;
}
.fa-ef-reiter{
  display:inline-flex;align-items:baseline;gap:8px;cursor:pointer;
  background:transparent;border:1px solid rgba(231,228,214,.16);border-radius:999px;
  padding:9px 16px;color:#DDD9CD;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px;letter-spacing:.06em;
  transition:border-color .25s ease,background .25s ease,color .25s ease;
}
.fa-ef-reiter b{font-weight:500}
.fa-ef-reiter i{font-style:normal;color:#A8AC95;font-size:10.5px;letter-spacing:.1em}
.fa-ef-reiter:hover,.fa-ef-reiter:focus-visible{
  border-color:var(--ef-linie-hell);background:rgba(231,220,201,.08);color:var(--creme);
}
.fa-ef-reiter.an{
  background:var(--mondlicht);border-color:var(--mondlicht);color:var(--nachthimmel);
}
.fa-ef-reiter.an i{color:#4A4E3F}

.fa-ef-zaehler{
  text-align:center;margin:0 0 22px;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:#ADB19A;
}
.fa-ef-zaehler:empty{display:none}

/* Spalten statt Raster — siehe Kopf dieser Datei. */
/* ==========================================================================
   Die Zuschriften — neu gebaut am 15.08.
   --------------------------------------------------------------------------
   VORHER: columns:3, also Mauerwerk. Jede Karte war so hoch wie ihr Text,
   und weil die Zuschriften zwischen zwei und zwoelf Zeilen lang sind, stand
   dort ein Saegezahn aus 54 verschieden hohen Kaesten. Man liest das nicht
   als Sammlung, sondern als Unordnung.

   JETZT: ein echtes Raster mit gleich hohen Karten. Lange Zuschriften
   werden auf sieben Zeilen beschnitten und lassen sich aufklappen — die
   Karte waechst an Ort und Stelle, das Raster bleibt ruhig.

   DIE BUEHNE
   Jede Karte neigt sich leicht zum Zeiger (hoechstens 5 Grad — darueber
   wirkt es wie Spielzeug), bekommt einen Lichtstreifen, der der Maus folgt,
   und hebt sich an. Die Neigung sitzt auf .fa-ef-st-flaeche, NICHT auf der
   Karte selbst: sonst rechnet das Raster die Drehung mit und die Nachbarn
   zappeln.

   Ohne Zeiger (Telefon) und bei prefers-reduced-motion passiert nichts
   davon — die Karten stehen dann ruhig und gleich hoch da.
   ========================================================================== */
.fa-ef-stimmen{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(310px,1fr));
  gap:18px; align-items:stretch; perspective:1200px;
}
.fa-ef-stimme{ margin:0; padding:0; position:relative; transform-style:preserve-3d; }
.fa-ef-stimme[hidden]{display:none}

.fa-ef-st-flaeche{
  position:relative; overflow:hidden;
  height:100%; display:flex; flex-direction:column;
  padding:22px 22px 18px; border-radius:14px;
  background:var(--creme);
  border:1px solid rgba(35,35,35,.08);
  box-shadow:0 10px 26px rgba(0,0,0,.24);
  transform:rotateX(var(--nx,0deg)) rotateY(var(--ny,0deg)) translateZ(0);
  transition:transform .45s cubic-bezier(.2,.7,.3,1),
             box-shadow .45s ease, border-color .3s ease;
}
.fa-ef-stimme.zeigt .fa-ef-st-flaeche{
  transition:transform .08s linear, box-shadow .3s ease;
  box-shadow:0 26px 54px rgba(0,0,0,.42);
  border-color:rgba(86,94,76,.28);
}
.fa-ef-st-glanz{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  transition:opacity .35s ease;
  background:radial-gradient(220px 220px at var(--mx,50%) var(--my,0%),
             rgba(255,255,255,.55), transparent 70%);
  mix-blend-mode:soft-light;
}
.fa-ef-stimme.zeigt .fa-ef-st-glanz{opacity:1}

.fa-ef-st-flaeche::before{
  content:"\201C";position:absolute;right:16px;top:2px;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:60px;line-height:1;
  color:rgba(86,94,76,.16);pointer-events:none;
  transition:color .35s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.fa-ef-stimme.zeigt .fa-ef-st-flaeche::before{
  color:rgba(86,94,76,.30); transform:translateY(-2px) scale(1.06);
}

/* Beschnitt auf sieben Zeilen. Weniger hiesse mehr halbe Karten,
   mehr hiesse wieder ungleiche Hoehen. */
.fa-ef-stimme blockquote{
  display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:7;
  overflow:hidden;
}
.fa-ef-stimme.offen blockquote{ -webkit-line-clamp:unset; overflow:visible; }
.fa-ef-st-mehr{
  align-self:flex-start; margin:0 0 12px; padding:6px 0;
  background:none; border:0; cursor:pointer; font:inherit;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:#565E4C; border-bottom:1px solid rgba(86,94,76,.4);
}
.fa-ef-st-mehr:hover{ color:#232323; border-color:#232323; }
.fa-ef-st-mehr[hidden]{ display:none; }
/* Die Bildunterschrift sitzt unten, damit die Namen aller Karten einer
   Reihe auf derselben Linie stehen. Das ist der halbe Gewinn an Ruhe. */
.fa-ef-stimme figcaption{ margin-top:auto; }

.fa-auf-an .fa-ef-stimme[data-ef-auf]{
  opacity:0; transform:translateY(20px);
  transition:opacity .6s ease var(--verzug,0ms),
             transform .7s cubic-bezier(.2,.7,.3,1) var(--verzug,0ms);
}
.fa-auf-an .fa-ef-stimme[data-ef-auf].sichtbar{ opacity:1; transform:none; }

@media (hover:none){
  .fa-ef-st-flaeche{ transform:none !important; }
  .fa-ef-st-glanz{ display:none; }
}
@media (prefers-reduced-motion:reduce){
  .fa-ef-st-flaeche{ transform:none !important; transition:none; }
  .fa-ef-st-glanz{ display:none; }
  .fa-auf-an .fa-ef-stimme[data-ef-auf]{ opacity:1; transform:none; transition:none; }
}
body.rm .fa-ef-st-flaeche{ transform:none !important; }
body.rm .fa-ef-st-glanz{ display:none; }

.fa-ef-stimme-kat{
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:#565E4C;
  margin:0 0 11px;font-weight:500;
}
.fa-ef-stimme blockquote{
  margin:0 0 14px;
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:15px;line-height:1.72;color:#2B2E26;
}
.fa-ef-stimme figcaption{
  border-top:1px solid rgba(35,35,35,.12);padding-top:11px;
  font-family:"Space Grotesk","Helvetica Neue",Arial,sans-serif;
  font-size:11px;letter-spacing:.13em;text-transform:uppercase;
}
.fa-ef-stimme figcaption b{display:block;color:#232323;font-weight:500}
.fa-ef-stimme figcaption span{display:block;color:#565E4C;margin-top:3px;font-size:10.5px}

.fa-ef-mehr-halter{display:flex;justify-content:center;margin:6px 0 0}
.fa-ef-mehr-halter [hidden]{display:none}

/* ================================================================ Abschluss */
.fa-ef-schluss{
  background:
    radial-gradient(70% 100% at 50% 0%,rgba(86,94,76,.30) 0%,rgba(86,94,76,0) 70%),
    linear-gradient(180deg,#212320 0%,#232323 100%);
  padding:clamp(48px,7vw,90px) 0;text-align:center;
  border-top:1px solid var(--ef-linie);
}
.fa-ef-schluss .fa-fq-ober{justify-content:center}
.fa-ef-schluss h2{
  font-family:"Anton","Arial Narrow",sans-serif;font-weight:400;
  text-transform:uppercase;letter-spacing:.014em;
  font-size:clamp(26px,4.4vw,50px);line-height:1.02;margin:0 0 14px;color:var(--creme);
}
.fa-ef-schluss-text{
  font-family:"Barlow","Helvetica Neue",Arial,sans-serif;
  font-size:16px;line-height:1.72;color:#DAD6C8;margin:0 auto 26px;max-width:36em;
}

/* =================================================================== Schmal */
@media (max-width:1000px){
  .fa-ef-stimmen{columns:2}
}
@media (max-width:860px){
  .fa-ef-gross-karte,.fa-ef-pod-karte{grid-template-columns:minmax(0,1fr)}
  /* Auf dem Handy zuerst das Bild, dann der Text — sonst steht man vor
     vier Absätzen, bevor man sieht, worum es geht. */
  .fa-ef-pod-karte .fa-ef-pod-bild{order:-1}
  .fa-ef-gross-film .fa-ef-film{aspect-ratio:4/3}
}
@media (max-width:660px){
  .fa-ef-stimmen{columns:1}
  .fa-ef-stimme{padding:18px 17px 16px}
  .fa-ef-kachelraster{grid-template-columns:minmax(0,1fr)}
}

/* ═══════════════════════════════════════════════════════════════ Glanz
   ===========================================================================
   Einblenden beim Scrollen, Zeigereaktionen, Tiefe. Gehoert zu
   assets/js/seitenglanz.js — dort steht die ausfuehrliche Begruendung.

   FUENF ENTSCHEIDUNGEN
   --------------------

   1  Bewegt werden nur `opacity`, `translate` und `transform`. Kein Filter,
      keine Hoehe, keine Farbe im Bewegungsablauf: hier stehen
      vierundfuenfzig Karten untereinander, und alles andere zwingt den
      Browser, fuer jede einzelne das Layout neu zu rechnen.

   2  Das Einblenden benutzt `translate`, die Zeigereaktionen `transform`.
      Getrennte Eigenschaften, damit eine Karte, die gerade einfliegt,
      trotzdem auf den Zeiger reagieren kann.

   3  Die Videokacheln werden beim Zeigen NICHT vergroessert. In ihnen steckt
      ein <video controls>; mitskalierte Abspielknoepfe sehen kaputt aus und
      der Trefferpunkt liegt danebem. Sie bekommen stattdessen Rand, Schatten
      und eine Lichtkante.

   4  Die Zuschriften stehen auf hellem Grund. Kontrastgesetz: Text
      Nachthimmel, Nebentext Forest — deshalb ist die Zierleiste an ihrer
      linken Kante Forest und nicht Mondlicht.

   5  Trefferflaechen werden ECHT vergroessert (min-height, padding), nie ueber
      ein negativ eingeruecktes Pseudoelement. Die neun Reiter ueber den
      Zuschriften stehen mit acht Bildpunkten Abstand nebeneinander; ein
      unsichtbarer Rand von je fuenfzehn Bildpunkten laege ueber dem
      Nachbarn und finge dessen Klicks ab.
   =========================================================================== */

/* ------------------------------------------------------------- Einblenden */
html.fa-glanz .gl-auf{
  opacity:0;
  translate:var(--gl-x,0px) var(--gl-y,22px);
  transition:
    opacity   .62s var(--e-weich,cubic-bezier(.22,.61,.36,1)),
    translate .80s var(--e-satt,cubic-bezier(.16,1,.3,1)),
    transform .34s var(--e-satt,cubic-bezier(.16,1,.3,1)),
    background-color .30s ease,
    border-color     .30s ease,
    box-shadow       .34s ease;
}
html.fa-glanz .fa-ef-stimme.gl-auf{--gl-y:16px}
html.fa-glanz .fa-ef-hero h1.gl-auf{--gl-y:26px}
/* Muss NACH den Richtungen stehen: gleiche Gewichtung, die spaetere Regel
   gewinnt. */
html.fa-glanz .gl-auf.gl-da{opacity:1;translate:none}

html.fa-glanz body.rm .gl-auf{opacity:1;translate:none;transition:none}
@media (prefers-reduced-motion:reduce){
  html.fa-glanz .gl-auf{opacity:1;translate:none;transition:none}
}

/* ------------------------------------------------------------ Lichtkante */
/* Eine Haarlinie an der Oberkante, die beim Zeigen von links durchlaeuft.
   Sie waechst ueber transform:scaleX und bleibt dabei im eigenen Kasten —
   ein wandernder Lichtstreifen mit translateX wuerde ueber den Rand
   hinauslaufen, und dagegen haette es ein overflow:hidden gebraucht, das
   die Fokusringe der Verweise darin abgeschnitten haette. */
.fa-ef-gross-karte,.fa-ef-pod-karte,.fa-ef-kachel,.fa-ef-komm{position:relative}
.fa-ef-gross-karte::after,.fa-ef-pod-karte::after,
.fa-ef-kachel::after,.fa-ef-komm::after{
  content:"";position:absolute;left:0;right:0;top:0;height:1px;pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(90deg,rgba(231,220,201,0),rgba(231,220,201,.75) 45%,
                                   rgba(231,220,201,0));
  transform:scaleX(0);transform-origin:0 50%;
  transition:transform .6s var(--e-satt,cubic-bezier(.16,1,.3,1));
}
body:not(.rm) .fa-ef-gross-karte:hover::after,
body:not(.rm) .fa-ef-pod-karte:hover::after,
body:not(.rm) .fa-ef-kachel:hover::after,
body:not(.rm) .fa-ef-komm:hover::after,
body:not(.rm) .fa-ef-gross-karte:focus-within::after,
body:not(.rm) .fa-ef-pod-karte:focus-within::after,
body:not(.rm) .fa-ef-kachel:focus-within::after{transform:scaleX(1)}

/* -------------------------------------------------- Die grossen Karten */
.fa-ef-gross-karte,.fa-ef-pod-karte{
  transition:border-color .35s ease,box-shadow .45s ease;
  box-shadow:0 34px 78px -56px rgba(0,0,0,1);
}
.fa-ef-gross-karte:hover,.fa-ef-pod-karte:hover{
  border-color:var(--ef-linie-hell);
  box-shadow:0 44px 92px -50px rgba(0,0,0,1);
}
/* Das Podcast-Bild lebt beim Zeigen auf; das Abspielzeichen wuchs schon
   vorher, jetzt zieht das Bild mit. */
.fa-ef-pod-bild img{transition:transform .9s var(--e-satt,ease)}
body:not(.rm) .fa-ef-pod-bild:hover img{transform:scale(1.045)}

/* ------------------------------------------------------- Videokacheln */
/* Siehe Entscheidung 3: kein Massstab auf der Kachel, weil ein <video> mit
   Bedienleiste darin steckt. Das Anheben von drei auf fuenf Bildpunkte,
   dazu Rand und Schatten. */
.fa-ef-kachel{box-shadow:0 22px 52px -44px rgba(0,0,0,1)}
.fa-ef-kachel:hover{border-color:var(--ef-linie-hell)}
@media (prefers-reduced-motion:no-preference){
  body:not(.rm) .fa-ef-kachel:hover{
    transform:translateY(-5px);box-shadow:0 30px 60px -30px rgba(0,0,0,.55);
  }
}
.fa-ef-kachel-name{transition:color .3s ease}
.fa-ef-kachel:hover .fa-ef-kachel-name{color:var(--mondlicht)}

/* -------------------------------------------------------- Kommentare */
.fa-ef-komm{transition:border-color .3s ease,background .3s ease,
                       transform .34s var(--e-satt,ease),box-shadow .34s ease}
.fa-ef-komm:hover{background:rgba(245,242,235,.075);border-color:var(--ef-linie-hell)}
body:not(.rm) .fa-ef-komm:hover{
  transform:translateY(-3px);box-shadow:0 18px 38px -26px rgba(0,0,0,.9);
}

/* --------------------------------------------------------- Zuschriften */
/* Heller Grund — Kontrastgesetz. Die Leiste an der linken Kante ist Forest,
   das grosse Anfuehrungszeichen wird beim Zeigen etwas deutlicher. */
.fa-ef-stimme::after{
  content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;
  border-radius:0 3px 3px 0;background:var(--forest);
  transform:scaleY(0);transform-origin:50% 0;
  transition:transform .45s var(--e-satt,cubic-bezier(.16,1,.3,1));
  pointer-events:none;
}
.fa-ef-stimme{transition:transform .34s var(--e-satt,cubic-bezier(.16,1,.3,1)),
                         box-shadow .34s ease}
.fa-ef-stimme::before{transition:color .35s ease}
body:not(.rm) .fa-ef-stimme:hover{
  transform:translateY(-4px);box-shadow:0 24px 46px rgba(0,0,0,.34);
}
body:not(.rm) .fa-ef-stimme:hover::after{transform:scaleY(1)}
.fa-ef-stimme:hover::before{color:rgba(86,94,76,.30)}

/* --------------------------------------------------------------- Reiter */
.fa-ef-reiter{transition:border-color .25s ease,background .25s ease,color .25s ease,
                         transform .28s var(--e-satt,ease)}
body:not(.rm) .fa-ef-reiter:hover{transform:translateY(-2px)}

/* ═══════════════════════════════════════════════════════ Rhythmus, Tiefe */
/* Die Abschnitte hatten alle denselben Grund und dieselbe Polsterung; die
   Seite las sich als ein einziger langer Streifen. Eine Haarlinie an der
   Oberkante gliedert, ohne einen Strich zu ziehen. */
.fa-ef-kacheln::before,.fa-ef-alle::before{
  content:"";position:absolute;left:50%;top:0;transform:translateX(-50%);
  width:min(100% - 48px,1140px);height:1px;
  background:linear-gradient(90deg,rgba(231,228,214,0),rgba(231,228,214,.20) 30%,
                                   rgba(231,228,214,.20) 70%,rgba(231,228,214,0));
}
@media (min-width:1001px){
  .fa-ef-stimmen{column-gap:22px}
  .fa-ef-stimme{margin-bottom:22px}
  .fa-ef-kachelraster{gap:22px}
}

/* ═════════════════════════════════════ Handy: Schrift und Trefferflaechen
   Gemessen bei 390 px, nicht geschaetzt. Zwei Vorgaben:
   keine Schrift unter 11,5 px, keine Tippflaeche unter 44 px.
   Vergroessert wird ausschliesslich echt — siehe Entscheidung 5 im Kopf. */
@media (max-width:700px){
  .fa-ef-abzeichen,
  .fa-ef-rolle,
  .fa-ef-sprachhinweis,
  .fa-ef-kachel-ober,
  .fa-ef-sprachmarke,
  .fa-ef-zaehler,
  .fa-ef-komm figcaption,
  .fa-ef-reiter i,
  .fa-ef-stimme figcaption,
  .fa-ef-stimme figcaption span{font-size:11.5px !important}
  .fa-ef-abzeichen,.fa-ef-rolle,.fa-ef-sprachhinweis,
  .fa-ef-kachel-ober,.fa-ef-sprachmarke{letter-spacing:.16em}

  /* align-items:center ist hier Pflicht, nicht Geschmack. Die Reiter richten
     sich sonst an der Schriftlinie aus (align-items:baseline aus der
     Grundregel); in einem 44 px hohen Knopf ohne Polsterung klebt die
     Beschriftung dann einen Bildpunkt unter der Oberkante und siebenund-
     zwanzig ueber der Unterkante. Gemessen, nicht vermutet. */
  .fa-ef-reiter{min-height:44px;padding:0 16px;align-items:center}
  /* Neun Reiter, die vorher 36 px hoch waren. Mit 44 px braucht die Leiste
     eine Zeile mehr — dafuer trifft man sie. */
  .fa-ef-reiter-leiste{gap:8px}
}

@media (prefers-reduced-motion:reduce){
  .fa-ef-gross-karte,.fa-ef-pod-karte,.fa-ef-kachel,.fa-ef-komm,.fa-ef-stimme,
  .fa-ef-gross-karte::after,.fa-ef-pod-karte::after,.fa-ef-kachel::after,
  .fa-ef-komm::after,.fa-ef-stimme::after,.fa-ef-stimme::before,
  .fa-ef-pod-bild img,.fa-ef-reiter,.fa-ef-kachel-name{transition:none}
  body .fa-ef-kachel:hover,body .fa-ef-komm:hover,body .fa-ef-stimme:hover,
  body .fa-ef-reiter:hover{transform:none}
}