/* busyelectrons.com – Look der App Busy Electrons (ElexiusConnect: Stil.h, Kopf.h, MainComponent.cpp).
   Werte wie in der App: Seite weiß, Kacheln #F5F5F3, Poppins Light klein geschrieben, Grün #2E7D32 für den Weg nach vorn,
   Orange #F2581D nur für den Minus-Balken des aktuellen Menüpunkts. Eine helle Fassung wie die App. */
@font-face { font-family: "Poppins"; font-weight: 300; font-style: normal; font-display: swap;
             src: url("fonts/Poppins-Light.ttf") format("truetype"); }
:root {
  color-scheme: light;
  --page: #FFFFFF; --field: #F5F5F3; --hair: #EBEBE8; --edge: #D4D4D0;
  --ink: #000000; --body: #111111; --dim: #6B6B67; --go: #2E7D32; --orange: #F2581D; --schwarz: #151515;
  --pad: 26px; --gap: 14px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--page); color: var(--body); }
body { font: 300 15px/1.45 "Poppins", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased;
       max-width: 1500px; margin: 0 auto; padding: 0 var(--pad); }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; font-weight: 300; }

/* ---------- Kopf wie die App: Schriftzug, Menüpunkte mit Piktogramm und zwei Zeilen, Zeichen e⁻ ---------- */
.kopf { display: flex; align-items: flex-start; gap: 40px; padding-top: 20px; height: 103px;
        border-bottom: 1px solid var(--edge); }
.schriftzug img { height: 38px; display: block; }
.kopf nav { display: flex; gap: 26px; flex: 1; }
.punkt { display: flex; align-items: flex-start; gap: 7px; color: var(--dim); position: relative; }
.punkt .pikto { width: 30px; height: 30px; flex: none; margin-top: 2px; }
.punkt .text { display: flex; flex-direction: column; }
.punkt .wort { font-size: 20.5px; line-height: 20px; }
.punkt .zeile { font-size: 13px; line-height: 12.5px; }
.punkt .zeile:first-of-type { margin-top: 4px; }
.punkt:hover, .punkt.aktiv { color: var(--ink); }
.punkt.aktiv .zeile, .punkt:hover .zeile { color: var(--body); }
.punkt.aktiv::before { content: ""; position: absolute; left: 30px; top: 0; width: 8px; height: 2.75px; background: var(--orange); }
.zeichen { height: 30px; margin-top: 2px; }

/* ---------- Titel über den Kacheln: all plugins · 5 plugins ---------- */
.titel { display: flex; align-items: baseline; gap: 14px; padding: 28px 0 18px; }
.titel h1 { font-size: 32px; color: var(--ink); }
.titel .anzahl { font-size: 17px; color: var(--dim); }

/* ---------- Download: eine breite graue Fläche wie eine Kachel, mit dem App-Symbol ---------- */
.download { display: flex; align-items: center; gap: 40px; background: var(--field); padding: 36px 44px;
            margin-bottom: var(--gap); scroll-margin-top: 20px; }
.appsymbol { width: 132px; height: 132px; flex: none; }
.dtext h2 { font-size: 30px; color: var(--ink); margin-bottom: 6px; }
.dtext p { max-width: 34em; color: var(--body); }
.dtext .klein { font-size: 12.5px; color: var(--dim); margin-top: 12px; }
.pille { display: inline-block; margin-top: 18px; padding: 11px 28px; border-radius: 99px; font-size: 15px; line-height: 1; }
.pille.gruen { background: var(--go); color: #fff; }
.pille.gruen:hover { background: #26692A; }

/* ---------- Kacheln wie im TE-Shop / in der App: Name und Preis oben, Gerät in der Mitte, ein Wort unten ---------- */
.raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); padding-bottom: 40px; }
.kachel { position: relative; aspect-ratio: 476 / 624; background: var(--field); container-type: inline-size;
          transition: background-color .15s; }
.kachel:hover { background: #EFEFEC; }
.kachel .name, .kachel .preis { position: absolute; left: 12px; right: 12px; text-align: center;
          font-size: clamp(14px, 5.8cqw, 21px); line-height: 1.32; color: var(--body);
          white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kachel .name  { top: calc(18.35cqw - 1.32em); }
.kachel .preis { top: 18.35cqw; }
.kachel .geraet { position: absolute; left: 50%; top: 74.07cqw; transform: translate(-50%, -50%); height: auto;
          width: 40%; max-width: 86%; max-height: 68cqw; object-fit: contain; }   /* Grundgröße; je Gerät unten genauer */
.kachel .wort { position: absolute; left: 50%; bottom: 7.21cqw; transform: translate(-50%, 50%);
          font-size: clamp(14px, 5.8cqw, 21px); white-space: nowrap; }
.wort.gruen { color: var(--go); }
.wort.gruen:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.wort.grau { color: var(--dim); }

/* ---------- Text (Impressum, Datenschutz) ---------- */
.text { max-width: 44em; padding-bottom: 48px; }
.text h2 { font-size: 18px; color: var(--ink); margin: 26px 0 6px; }
.text p { color: var(--body); }
.text a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.folgt { color: var(--dim); }

/* ---------- Fuß wie die Statuszeile der App ---------- */
.fuss { display: flex; justify-content: space-between; border-top: 1px solid var(--edge); padding: 10px 0 18px;
        font-size: 13px; color: var(--dim); }
.fuss a:hover { color: var(--ink); }

/* ---------- schmaler: wie die App erst weniger Spalten, im Kopf erst die Zeilen, dann die Worte weg ---------- */
@media (max-width: 1100px) { .raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .punkt .zeile { display: none; } .kopf { height: 80px; } }
@media (max-width: 760px)  { .raster { grid-template-columns: repeat(2, minmax(0, 1fr)); }
                             .download { flex-direction: column; align-items: flex-start; padding: 28px 24px; gap: 20px; }
                             .appsymbol { width: 96px; height: 96px; } }
@media (max-width: 600px)  { :root { --pad: 16px; } .punkt .wort { display: none; } .kopf { gap: 18px; height: 70px; }
                             .kopf nav { gap: 14px; } .schriftzug img { height: 30px; } .titel h1 { font-size: 26px; } }
@media (max-width: 600px)  { :root { --gap: 8px; } .kachel .name, .kachel .preis, .kachel .wort { font-size: clamp(12px, 6.4cqw, 21px); } }
@media (max-width: 300px)  { .raster { grid-template-columns: minmax(0, 1fr); } }

/* Gerätegrößen, erzeugt von baue.py (wie Tile::bildLage der App) */
.kachel .g-pre73 { width: 34.77%; }
.kachel .g-pre312 { width: 31.87%; }
.kachel .g-model2 { width: 33.16%; }
.kachel .g-preamp76 { width: 60.43%; }
.kachel .g-plimsoll-vhc-l { width: 61.59%; }