/* ═══════════════════════════════════════════════════════════════════════════
   Geteilte Bauteile der MiaoSense-Landingpages.

   Warum eine gemeinsame Datei und nicht acht Mal derselbe Block im <style>:
   Die Seite war uneinheitlich, weil jede Seite ihre eigene Kopie hielt. Acht
   Kopien laufen auseinander -- das ist keine Prognose, das ist der Befund vom
   28.08.2026 (zwei verschiedene Logos, drei verschiedene Kopfzeilen).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Sprachumschalter am oberen Seitenrand ──────────────────────────────────
   Bis 28.08. standen die acht Sprachen NUR im Fussbereich. Wer auf /ja/ landete
   und Deutsch wollte, musste die ganze Seite scrollen. Der Fussbereich behaelt
   seine ausgeschriebene Liste; hier oben stehen Kuerzel, damit die Zeile den
   Kopf nicht erschlaegt. Der volle Sprachname haengt am title-Attribut. */
.lang-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.15rem 0.1rem;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}
.lang-top a {
  padding: 0.28rem 0.42rem;
  border-radius: 0.35rem;
  color: var(--fg-muted);
  text-decoration: none;
  line-height: 1;
  transition: color 160ms ease, background-color 160ms ease;
}
.lang-top a[href]:hover,
.lang-top a[href]:focus-visible {
  color: var(--fg);
  background: var(--raised);
}
/* Die aktive Sprache ist kein Link. Sie traegt aria-current="page" -- ohne das
   ist die Reihe fuer Screenreader acht gleichwertige Ziele ohne Standort. */
.lang-top a[aria-current="page"] {
  color: var(--brand);
  font-weight: 600;
  cursor: default;
}

/* Der Kopf traegt jetzt drei Dinge statt zwei. Ohne Umbruch draengt sich das
   auf schmalen Schirmen. */
.top { flex-wrap: wrap; }
.top > p { margin-left: auto; }

@media (max-width: 620px) {
  /* Auf dem Handy laeuft die Reihe waagerecht, statt in drei Zeilen zu brechen. */
  .lang-top {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    max-width: 100%;
    order: 3;
    width: 100%;
  }
  .lang-top::-webkit-scrollbar { display: none; }
  .top > p { order: 2; margin-left: 0; }
}

/* ─── Kaufabschnitt: Play-Badge und QR-Code nebeneinander ────────────────────
   Der QR-Code ist auf dem Handy sinnlos -- niemand scannt seinen eigenen
   Bildschirm. Deshalb erscheint er erst ab Tablet-Breite. Darunter traegt
   allein das Badge, wie bisher. */
.get {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  flex-wrap: wrap;
}
.qr { display: none; margin: 0; text-align: center; }

/* Badge und QR auf EINE Linie.
   `.play-badge` traegt `margin-top: 1.6rem` und `margin-left: -12px` aus der Zeit,
   als das Badge allein in dieser Zeile stand. In einem Flex-Container mit
   align-items:center zaehlt die Margin zur Aussenbox -- das Badge sass dadurch
   unter der Mitte des QR-Blocks, sichtbar gemessen 33 px daneben, nachdem der
   QR-Code am 07.09.2026 auf 156 px vergroessert wurde (vorher 13 px, schon da
   falsch, nur unauffaelliger). Der Abstand nach oben gehoert an die ZEILE, nicht
   an eines ihrer beiden Kinder. Der Schutzraum aus `padding: 12px` bleibt. */
.get { margin-top: 1.6rem; }
.get .play-badge { margin-top: 0; margin-left: 0; }

@media (min-width: 768px) {
  .qr { display: block; }
}

.qr img {
  display: block;
  /* 156 statt 116 px (User-Vorgabe 07.09.2026). Gerechnet, nicht geschaetzt:
     bei box-sizing:border-box bleiben nach dem Padding 140 px fuer 45 Module
     = 3,1 px je Modul. Vorher waren es 2,4 -- scannbar, aber ohne Reserve fuer
     Bildschirmglanz, aeltere Kameras und unruhige Haende.

     🔴 DIE RECHNUNG OBEN STIMMT NICHT MEHR, der Wortlaut bleibt als Begruendung
     fuer die 156 px stehen (11.09.2026, MIA-547). Die 140 px gelten weiter, die
     MODULZAHL nicht: Der QR kodiert seit heute die kurze Weiche
     "miaosense.app/get/<sprache>" statt der langen Play-URL -- 33 Module statt
     45, also **4,24 px je Modul** statt 3,1. Die Reserve ist damit groesser
     geworden, nicht kleiner; die 156 px bleiben trotzdem, weil sie aus der
     Lesbarkeit der Beschriftung und dem Layout kommen, nicht nur aus der
     Modulrechnung. ⭐ Ein Kommentar, der eine Zahl BEGRUENDET, muss mitgezogen
     werden, sonst rechnet der Naechste mit 45 Modulen weiter. */
  width: 156px; height: 156px;
  padding: 0.5rem;
  border-radius: 0.6rem;
  background: #fff;   /* Der Code ist dunkel auf hell erzeugt: die klassische
                         Richtung, die jeder Scanner liest. Die helle Platte
                         gehoert zum Code, nicht zur Dekoration. */
}
.qr figcaption {
  margin-top: 0.5rem;
  font-size: 0.72rem;
  color: var(--fg-muted);
  max-width: 15ch;
  margin-inline: auto;
  line-height: 1.4;
}

/* ─── Die stilisierte Katze im Telefon ───────────────────────────────────────
   Kleiner und tiefer gesetzt (User-Vorgabe 2026-08-28). Das entspricht auch
   der App: dort liegt die Figur mit 120x60dp bei Alignment.BottomStart, sie
   ist eine Randmarke und nicht der Bildschirminhalt.
   Steht hier und nicht acht Mal im <style>, damit sich die acht Seiten nicht
   erneut auseinanderentwickeln. */
/* ⚠️ 2026-08-28 abends: Hier stand eine zweite, aeltere `.s-view .s-cat`-Regel
   (left 4 %, bottom 2 %, width 12 %, height auto) aus der Korrektur vom
   Vormittag. Sie ist ersatzlos entfallen, weil die Figur weiter unten neu und
   an der Aufnahme GEMESSEN gesetzt wird -- zwei Regeln fuer dasselbe Element in
   derselben Datei sind genau der Zustand, aus dem Drift entsteht.
   ⭐ Aufgefallen ist es nicht beim Lesen, sondern weil der neue Waechter
   "Katzenfigur 100 % hoch" meldete: sein Suchmuster lief von der ersten Regel
   ueber `.s-detect { height: 100% }` hinweg in die zweite. Der Fehlalarm hat
   einen echten Doppeleintrag freigelegt. */

/* ═══════════════════════════════════════════════════════════════════════════
   🔴 KAUFABSCHNITT VORUEBERGEHEND STILLGELEGT — Stand 2026-08-28

   Google hat am 28.08.2026 um 05:41 den Produktionszugriff erteilt. Der
   PRODUKTIONSTRACK STEHT ABER AUF INAKTIV: der Play-Eintrag ist oeffentlich
   nicht abrufbar, der Link fuehrt ins Leere.

   Warum Badge und QR deshalb verschwinden und nicht nur der alte Hinweis:
   Preis + offizielles Play-Badge + QR-Code sind zusammen eine AKTIVE
   KAUFAUFFORDERUNG. Zeigt man sie ohne Einschraenkung auf ein nicht
   bedienbares Ziel, ist das eine Irrefuehrung ueber die Verfuegbarkeit
   (§ 5 Abs. 1 S. 2 Nr. 1 UWG) und ein Vorenthalten wesentlicher Information
   bei einer Aufforderung zum Kauf (§ 5a UWG). Befund legal-advisor 2026-08-28.
   ⚠️ Es genuegt NICHT, nichts Falsches zu SAGEN -- Preis, Badge und QR sagen
   zusammen implizit "jetzt kaufbar", auch wenn kein Satz das behauptet.

   ═══ SO WIRD ES BEIM LIVE-GANG ZURUECKGEBAUT ═══
   Genau zwei Handgriffe, sonst nichts:
     1. Diesen Block hier loeschen (die zwei Regeln darunter).
     2. In allen acht index.html den Absatz <p class="pending"> entfernen.
   Markup von Badge und QR bleibt unangetastet stehen -- es wird nur verdeckt,
   damit beim Zurueckbau nichts neu gebaut werden muss und nichts verloren geht.
   ═══════════════════════════════════════════════════════════════════════════ */
/* 2026-09-05: RUECKGEBAUT. vc 20 ist seit heute im Play Store, Badge und QR sind
   wieder sichtbar. Der Block darueber beschreibt den Rueckbau und bleibt als
   Historie stehen -- mit einer Korrektur: er spricht von ZWEI Handgriffen, es
   waren DREI. Der dritte (.price im inline <style>) stand nur im Vermerk darunter.
   Wer die Ueberschrift liest und den Vermerk nicht, laesst den Preis versteckt. */
/* 2026-08-29: Der Preisabsatz gehoert zur selben Stilllegung, seine Regel
   steht aber im inline <style> von index.html -- dort, wo `.price` definiert
   ist und wo eine Regel gegen die spaetere Kaskade auch gewinnt.
   RUECKBAU: BEIDE Stellen entfernen, nicht nur diese. */

.pending {
  margin-inline: auto;
  max-width: 46ch;
  padding: 0.9rem 1.15rem;
  border: 1px solid var(--line);
  border-radius: 0.6rem;
  background: var(--surface);
  color: var(--fg-muted);
  font-size: 0.92rem;
  line-height: 1.55;
  text-align: center;
}

/* ─── Der Bildschirminhalt ────────────────────────────────────────────────────
   Das Foto fuellt den Schirm VOLLSTAENDIG. Der Vorgaenger vom selben Tag stand
   auf `contain` und liess oben und unten den Untergrund durchscheinen -- ein
   Foto, das den Bildschirm nicht fuellt, sieht nach Fehler aus, nicht nach App.

   Der Grund fuer `contain` war, dass die Erkennungsmarken sonst weggeschnitten
   wurden. Die richtige Antwort darauf war nicht, das Foto kleiner zu machen,
   sondern die Marken FREIZUSTELLEN: sie liegen jetzt als SVG darueber, aus der
   echten Aufnahme vermessen und in den Fotoraum zurueckgerechnet.

   ⭐ `slice` beim SVG entspricht `cover` beim Bild. Beide beschneiden identisch,
   deshalb koennen Marken und Motiv bei keiner Fensterbreite auseinanderlaufen.
   Ein fester Prozentwert gegen den Geraeteschirm haette genau das getan. */
.s-scene {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

.s-detect {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  transition: opacity 260ms ease;
}
.s-detect g { transition: stroke-width 260ms ease; }

/* Signaturinteraktion: die Mood-Beschriftung anfassen laesst die Marken
   kraeftiger werden -- dasselbe Verhalten wie zuvor bei der Zeichnung. */
.plate:has(.a-mood:hover) .s-detect g,
.plate:has(.a-mood:focus-visible) .s-detect g { stroke-width: 12; }

/* ─── Bewegung: die Buehne für wortweise Überschriften ───────────────────────
   `.mw` ist der Ausschnitt, `.mw > i` das Wort darin. Ohne JavaScript wird
   nichts geteilt und nichts versteckt -- die Regeln greifen dann ins Leere,
   und die Überschrift steht einfach da. Genau so soll es sein. */
.mw { display: inline-block; overflow: hidden; vertical-align: bottom; }
.mw > i { display: inline-block; font-style: inherit; will-change: transform; }

/* 🔴 Endzustand sofort, nicht bloß kürzer. Das Skript steigt bei dieser
   Einstellung ohnehin vor der ersten Zuweisung aus; diese Regel ist der
   zweite Riegel für den Fall, dass es doch einmal lief. */
@media (prefers-reduced-motion: reduce) {
  .mw, .mw > i { overflow: visible; transform: none !important; opacity: 1 !important; }
  .leaders line, .leaders circle, .s-detect, .anno { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   AURABOX UND KATZENFIGUR — die zwei Bestandteile des Live-Screens, die beim
   Neubau der Landingpage am 2026-08-28 verlorengegangen sind (Befund Robert:
   "keine realistische Stimmungsanzeige").

   ⚠️ Die Aura war ausserdem schon VORHER falsch gebaut: als runder Schein in
   der Bildmitte. Die App zeichnet in `MoodAuraOverlay` (CameraScreen.kt) vier
   KANTENVERLAEUFE, je 96 dp nach innen, in der Stimmungsfarbe, deren Alpha
   zwischen 0,22 und 0,52 atmet (3,5 s, Ruhewert 0,38). Robert nennt es
   "Aurabox" -- das trifft es, ein Ring ist es und war es nie. Hier wird also
   nicht wiederhergestellt, sondern erstmals richtig gebaut.

   Die Reichweite: 96 dp auf dem A40 sind 23 % der Bildschirmbreite und 11 %
   der Hoehe. Prozentwerte in `background-size` loesen sich je Achse gegen die
   eigene Box auf -- deshalb steht hier 23 % / 11 % und keine feste Laenge.
   ═══════════════════════════════════════════════════════════════════════════ */
.s-aura {
  --aura-farbe: color-mix(in srgb, var(--mood) 52%, transparent);
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--aura-farbe), transparent),
    linear-gradient(to top,    var(--aura-farbe), transparent),
    linear-gradient(to right,  var(--aura-farbe), transparent),
    linear-gradient(to left,   var(--aura-farbe), transparent);
  background-size: 100% 11%, 100% 11%, 23% 100%, 23% 100%;
  background-position: top left, bottom left, top left, top right;
  background-repeat: no-repeat;
  /* 🔴 Der Ruhewert steht HIER, nicht in der Animation. Laeuft die Animation
     nicht -- alte Engine, Einstellung, Fehler --, ist die Aura trotzdem da.
     0,73 ist 0,38/0,52, also genau der Ruhewert der App. */
  opacity: 0.73;
  animation: ms-aura-atem 7s ease-in-out infinite;
}
@keyframes ms-aura-atem {
  0%, 100% { opacity: 0.423; }   /* 0,22 / 0,52 */
  50%      { opacity: 1; }       /* 0,52 / 0,52 */
}

/* ─── Die kleine Katzenfigur unten links ──────────────────────────────────────
   SECHS Originalpfade aus `CatIdleAnimation.kt` -- nicht nachgezeichnet.
   Groesse und Lage an der echten Aufnahme gemessen (shot-alert.png): die Figur
   ist dort 157 x 195 px auf einem 1080 x 2340-Schirm und sitzt unten links.
   In der App ist sie 120 x 60 dp bei Alignment.BottomStart, also eine
   RANDMARKE -- nicht der Bildschirminhalt. Genau das war der Befund vom
   Vormittag ("Monsterkatze"): sie stand auf 64 % Hoehe und war das Motiv. */
.s-view .s-cat {
  position: absolute;
  left: 5%; bottom: 4%;
  height: 14%; width: auto;
  transform: none;
}
/* Zwei Durchgaenge: erst Konturen, dann Fuellungen darueber. So verschwinden
   die inneren Naehte zwischen Koerper, Beinen und Kopf, und aussen bleibt eine
   einzige durchgehende Silhouettenkante stehen -- dasselbe Ergebnis wie die
   frueher zusammengefasste Konturlinie, aber der Schwanz kann sich jetzt
   getrennt bewegen. */
.s-cat .fillform path,
.s-cat .s-tail .fuellung { fill: #0b1220; }
/* ⚠️ Die Strichstaerke ist von 26 auf 90 gegangen, und das ist kein Geschmack.
   Bei zwei Durchgaengen liegt die Kontur HINTER der Fuellung -- sichtbar bleibt
   nur ihre aeussere Haelfte. Die Figur wird 43 px breit aus einem 1620 Einheiten
   breiten viewBox gezeichnet, Massstab 0,027: aus 26 Einheiten werden 0,69 px
   gesamt und 0,35 px aussen. Das ist unsichtbar, und im Zoom war die Figur nach
   dem Umbau rein schwarz. Vorher lag die Kontur OBEN und war deshalb trotz
   derselben Staerke zu sehen.
   ⭐ 90 Einheiten ergeben rund 1,2 px sichtbaren Rand -- das ist die "eigene
   Aura" der Figur, die Robert benannt hat.
   Dazu ein weicher Schein in derselben Farbe. Den hat die App NICHT; er ist
   eine bewusste Zutat fuers Web, weil die Figur hier viermal kleiner steht als
   auf dem Handy und eine reine Haarlinie dort untergeht. */
.s-cat {
  filter: drop-shadow(0 0 2px color-mix(in srgb, var(--mood) 65%, transparent));
}
.s-cat .s-kontur path,
.s-cat .s-tail .kontur { fill: none; stroke: var(--mood); stroke-width: 90;
                         stroke-linejoin: round;
                         transition: stroke-width 260ms ease; }

/* ⚠️ 2026-08-28 abends: Hier standen `.s-pupil ellipse` und `.s-iris > *`.
   Robert hat die Augen zum ZWEITEN Mal beanstandet -- beim ersten Mal wurden
   sie nur umgezeichnet (rund -> mandelfoermig), diesmal fallen sie weg:
   "Durch die Augen wird sie zur Monsterkatze!" Bewusste Abweichung von der App,
   die der Figur Augen gibt und sie blinzeln laesst.
   ⭐ Eine Korrektur, die dieselbe Beanstandung ein zweites Mal ausloest, war
   keine Korrektur, sondern eine Variante. */

/* ─── Der Schwanz bewegt sich ─────────────────────────────────────────────────
   Werte woertlich aus `CatIdleAnimation.kt`, Kanal 2: +-4 Grad, 4000 ms, mit
   Ruhepunkten bei 0/2000/4000 ms. Gedreht wird um den ANSATZPUNKT (1163, 1924),
   nicht um die Spitze -- das steht auch so im Quelltext der App, samt der
   Begruendung, dass eine Drehung um die Spitze den Ansatz sichtbar von der
   Huefte loest. Die Kommentare der App nennen +-8 Grad als verworfen: mit dem
   richtigen, tieferen Drehpunkt legt die Spitze denselben Winkel als viel
   groesseren Weg zurueck.
   ⚠️ `transform-box: view-box` heisst: die Koordinaten zaehlen ab der Ecke des
   viewBox, nicht ab dem Nullpunkt des Nutzerkoordinatensystems. Der viewBox
   beginnt bei (20, 29), der Drehpunkt liegt deshalb bei (1143, 1895). Das ist
   im Browser nachgemessen und nicht gerechnet stehengelassen worden. */
.s-cat .s-tail {
  transform-box: view-box;
  transform-origin: 1143px 1895px;
  animation: ms-tail-schwung 4s ease-in-out infinite;
}
@keyframes ms-tail-schwung {
  0%   { transform: rotate(0deg); }
  25%  { transform: rotate(4deg); }
  50%  { transform: rotate(0deg); }
  75%  { transform: rotate(-4deg); }
  100% { transform: rotate(0deg); }
}

/* Signaturinteraktion: die Mood-Beschriftung anfassen macht die Kontur
   kraeftiger -- dasselbe Anfassen, das schon die Erkennungsmarken staerkt. */
.plate:has(.a-mood:hover) .s-cat .s-kontur path,
.plate:has(.a-mood:hover) .s-cat .s-tail .kontur,
.plate:has(.a-mood:focus-visible) .s-cat .s-kontur path,
.plate:has(.a-mood:focus-visible) .s-cat .s-tail .kontur { stroke-width: 150; }

@media (prefers-reduced-motion: reduce) {
  /* Endzustand sofort: die Aura steht auf ihrem Ruhewert, sie verschwindet
     nicht. Die App macht es genauso -- `LocalReducedMotion` haelt dort bei
     0,38, statt die Aura abzuschalten. */
  .s-aura { animation: none; opacity: 0.73; }
  /* Der Schwanz haelt auf seinem `initialValue` an -- genau wie in der App,
     wo `LocalReducedMotion` die vier Kanaele auf ihren Ruhewert setzt und
     die Figur NICHT verschwinden laesst. */
  .s-cat .s-tail { animation: none; transform: rotate(0deg); }
}