/* ======================================================================
   geraet.css — Telefon und Browserfenster, in denen eine echte Seite steckt.

   ANLASS, 13.09.2026. Der Inhaber: „da sieht man nur eckige Kästen mit einem schlecht
   platzierten Screenshot, keine Varianz und nicht visuell ansprechend. Das müssten doch
   Top-Mockups mit Geräten und Varianz sein." Nachgemessen mit Puppeteer stimmte jedes Wort:

     - `/gebaut`  zeigte 480×1039-Aufnahmen (Handy, hoch) in 132×99-Kästen (4:3, quer).
                  Sichtbar blieben rund 35 % — bei jeder Seite ausgerechnet die Kopfleiste.
                  Vierzehn Stück untereinander, alle gleich, alle grau.
     - `/check`   dasselbe in 173×108 (8:5). Sichtbar: rund 10 %.
     - Startseite `hausundgarten-m390.webp` (892×558) auf 1438×898 aufgezogen — 61 % über
                  nativ, also sichtbar unscharf.
     - überall    `box-shadow: none`, auf der Handwerksseite dazu `border-radius: 0`.

   DAS PRINZIP, aus dem alles Weitere folgt:
   **Der Zuschnitt passiert in der Kamera, nicht im Kasten.** Jede Aufnahme steckt in einem
   Kasten mit IHREM Seitenverhältnis. Dann braucht es kein `object-fit` mehr, und es kann
   auch nichts mehr beschnitten werden. Wo hier trotzdem `cover` steht, steht daneben, warum.

   Die Maße sind gerechnet, nicht geschätzt:
     - Radienprobe: der innere Radius ist der äußere minus die Rahmenstärke (Rs = Rg − r).
       Sonst läuft die Schirmecke nicht parallel zur Gehäuseecke, und genau daran erkennt
       man ein gezeichnetes Gerät.
     - Schatten: zwei Lagen, Versatz nur nach unten, Weichzeichnung mindestens doppelter
       Versatz. Ein Schatten, der breiter streut als er fällt, liest als Licht von oben —
       das ist, wie Licht in einem Raum tatsächlich fällt.
     - Ein Farbton statt Verlauf. Metallverläufe stehen auf der Verbotsliste.

   WAS HIER NICHT VORKOMMT, und warum: keine Uhrzeit in der Statusleiste (sie wäre erfunden
   und in jeder Bildschirmaufnahme falsch), kein Schlosssymbol (es behauptet HTTPS, ohne es
   zu prüfen), kein Glanzstreifen, kein Metall, keine Kippung, keine Endlosbewegung.
   ====================================================================== */

:root {
  --g-gehaeuse: #1A1D21;   /* ein Ton, kein Verlauf */
  --g-kante:    rgba(255,255,255,.07);
  --g-papier:   #fff;
}

/* ---------------------------------------------------------------- Telefon
   Aufnahmen: -m390 (390×844) und -m780 (780×1688). Verhältnis 0,462.
   Der Schirm bekommt exakt dieses Verhältnis — deshalb ist hier nichts beschnitten,
   zum ersten Mal seit die Seite steht. */
.geraet-handy {
  display: block; position: relative;
  border-radius: 14.5%/6.7%;
  padding: 3.2%;                      /* Gehäusesteg rundum */
  background: var(--g-gehaeuse);
  box-shadow:
    0 1px 2px rgba(24,18,12,.30),
    0 18px 34px -14px rgba(24,18,12,.42),
    inset 0 0 0 1px var(--g-kante);
}
.geraet-handy .geraet-schirm {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 390/844;
  /* Rs = Rg − r: 14.5% − 3.2% = 11.3% waagerecht, 6.7% − 3.2%·(390/844) ≈ 5.2% senkrecht */
  border-radius: 11.3%/5.2%;
  background: var(--g-papier);
}
/* `aspect-ratio` und `object-fit` werden hier ausdruecklich zurueckgesetzt, nicht weil sie
   gebraucht wuerden, sondern weil aeltere Regeln sie an denselben Bildern setzen. Auf /check
   stand `.ck-beweis img{aspect-ratio:8/5}` — spezifisch genug, um zu bleiben, und das Bild
   fuellte danach nur das obere Drittel des Schirms; darunter stand weisse Flaeche. Ein
   Bausatz, der an mehreren Orten eingesetzt wird, muss gegen die Altlasten dieser Orte
   immun sein, sonst repariert man ihn an jedem Ort einzeln. */
.geraet-handy .geraet-schirm img,
.geraet-fenster .geraet-schirm img {
  display: block; width: 100%; height: auto;   /* kein Zuschnitt: das Verhältnis stimmt */
  aspect-ratio: auto; object-fit: fill; object-position: 50% 50%;
  max-width: none; border-radius: 0; box-shadow: none; filter: none; transform: none;
}
/* Der Steg über dem Schirm, in dem bei einem echten Gerät die Kamera sitzt. Eine Linie,
   kein gezeichnetes Bauteil — was man nicht genau weiß, deutet man an. */
.geraet-handy::before {
  content: ""; position: absolute; left: 50%; top: 1.1%;
  width: 17%; height: .9%; min-height: 3px;
  transform: translateX(-50%);
  border-radius: 99px; background: rgba(255,255,255,.13);
}

/* ------------------------------------------------------------ Browserfenster
   Aufnahmen: -720 (720×450), -1280 (1280×800), muster-*-w480 (480×300). Alle 1,60.
   Die Adresszeile trägt die echte Domain als TEXT — nie als eingebettete Seite. */
.geraet-fenster {
  display: block; position: relative;
  border-radius: 10px;
  background: var(--g-gehaeuse);
  box-shadow:
    0 1px 2px rgba(24,18,12,.30),
    0 20px 38px -16px rgba(24,18,12,.44),
    inset 0 0 0 1px var(--g-kante);
  overflow: hidden;
}
.geraet-leiste {
  display: flex; align-items: center; gap: 7px;
  padding: 7px 10px;
  font: 500 11px/1 Switzer, system-ui, sans-serif;
  color: rgba(255,255,255,.62);
}
/* Die drei Punkte links. Keine Farben — farbige Ampelpunkte sind das Zeichen EINES
   bestimmten Betriebssystems, und wir wissen nicht, womit der Betrachter arbeitet. */
.geraet-punkte { display: flex; gap: 5px; flex: none; }
.geraet-punkte i {
  width: 7px; height: 7px; border-radius: 50%;
  background: rgba(255,255,255,.20);
}
.geraet-adresse {
  flex: 1 1 auto; min-width: 0;
  padding: 3px 9px; border-radius: 99px;
  background: rgba(255,255,255,.09);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.geraet-fenster .geraet-schirm {
  display: block; position: relative; overflow: hidden;
  aspect-ratio: 16/10;
  background: var(--g-papier);
}

/* ------------------------------------------------------------------- Varianz
   Befund 6 war: vierzehn Kacheln, alle gleich groß, alle gleich zugeschnitten.
   Die Reihe bekommt deshalb drei Größen statt einer — und zwar nach einer REGEL,
   nicht nach Gefühl: die eigene Seite und der Handwerksbeleg stehen groß, alles
   andere wechselt in einem Rhythmus, der sich nicht mit der Spaltenzahl deckt
   (3 gegen 2 Spalten), damit nie zwei gleiche nebeneinander landen.

   Bewusst NICHT als Mittel der Varianz: Drehung, Perspektive, wechselnde Rahmen,
   verschiedene Schatten. Das war das Vokabular, das der Inhaber viermal verworfen hat. */
.geraet--gross  { width: 100%; }
.geraet--mittel { width: 86%; margin-inline: auto; }
.geraet--klein  { width: 74%; margin-inline: auto; }

@media (prefers-reduced-motion: no-preference) {
  .geraet-handy, .geraet-fenster { transition: box-shadow .28s cubic-bezier(.2,.7,.3,1); }
  a:hover > .geraet-handy, a:hover > .geraet-fenster {
    box-shadow:
      0 2px 4px rgba(24,18,12,.34),
      0 26px 48px -18px rgba(24,18,12,.52),
      inset 0 0 0 1px rgba(255,255,255,.12);
  }
}

/* Sehr kleine Geräte.

   13.09.2026, nachgemessen und korrigiert: Diese Grenze stand zuerst bei 180 px, mit der
   Begründung, ein Gerät dürfe nicht kleiner sein als seine eigenen Bauteile. Der Gedanke
   stimmt, die Zahl war falsch. Auf `/gebaut` am Handy sind die Zellen rund 165 px breit —
   die Regel griff also ausgerechnet dort, wo gerade das Gerät gebaut worden war, und es
   blieb wieder ein eckiger Kasten übrig. Genau der Vorwurf, der den Umbau ausgelöst hat.

   Nachgemessen: Bei 165 px Zellenbreite ist der Gehäusesteg 5,3 px breit. Das ist schmal,
   aber sichtbar und maßstäblich richtig. Bei 120 px wären es 3,8 px — und darunter verliert
   die Rundung ihre Form. Deshalb steht die Grenze jetzt dort, mit der Zahl daneben, aus der
   sie folgt. Der Kamerasteg fällt schon früher weg: 17 % von 165 px sind 28 px Breite bei
   3 px Höhe, das liest als Schmutz, nicht als Bauteil. */
@container (max-width: 150px) {
  .geraet-handy { padding: 0; border-radius: 4px; }
  .geraet-handy .geraet-schirm { border-radius: 3px; }
  .geraet-leiste { display: none; }
}
@container (max-width: 210px) {
  .geraet-handy::before { display: none; }
}