/* VITRINE — App-Bühne der Handelsrepublic.
   Der Rahmen ist das Mockup iPhone.svg, in seinen Maßen unverändert:
   Kasten 742 × 1506, Schirm 669.673 × 1452.731 bei (36.3165, 26.5789),
   Schirmradius 79.72, Rahmen rundum 26.57. Daraus folgt ein logischer
   Schirm von 402 × 872 Punkten (iPhone 16 Pro).

   ALLES rechnet aus einer einzigen Zahl: --z, dem Maßstab. Wer die Größe
   ändert, ändert --z — nie eine der Kennzahlen darunter. */

:root{
  --papier:#EFEBE1;
  --tinte:#1B1327;
  --grau:#6E6A60;
  --linie:#D9D4C7;
  --akzent:#2F5BFF;

  /* Die Viewport-BREITE der App in Punkten. 402 ist die wahre Breite des
     Mockup-Schirms (iPhone 16 Pro). Ein Entwurf, der auf eine andere Breite
     gebaut ist — NAO-Screens etwa auf 390 —, trägt hier seine eigene ein;
     die HÖHE folgt daraus zwingend aus dem Seitenverhältnis des Mockups und
     wird nie von Hand gesetzt. Sonst wäre die App verzerrt statt skaliert. */
  --pw:402;
}

*{ box-sizing:border-box; }

/* Ohne !important verliert die Browserregel [hidden]{display:none} gegen
   jede eigene display-Angabe — Werkbank und Dialog stünden sonst von
   Anfang an offen. Derselbe Fall wie in der App. */
[hidden]{ display:none !important; }

html,body{
  margin:0;
  height:100%;
  background:var(--papier);
  color:var(--tinte);
  font-family:Inter, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing:antialiased;
}
body{ display:flex; flex-direction:column; overflow:hidden; }
a{ color:inherit; text-decoration:none; }

/* ── Leiste ─────────────────────────────────────────────────────────── */

.leiste{
  flex:none;
  display:flex; align-items:center; gap:18px;
  padding:0 clamp(12px,1.6vw,24px);
  height:52px;
  border-bottom:1px solid var(--linie);
  background:var(--papier);
}
.leiste__zurueck{
  font-size:11px; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--grau);
}
.leiste__zurueck:hover{ color:var(--tinte); }
.leiste__marke{
  font-size:13px; font-weight:800; letter-spacing:.22em; text-transform:uppercase;
}
.leiste__werkzeug{ margin-left:auto; display:flex; gap:6px; }

.knopf{
  font:inherit;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:7px 12px;
  border:1px solid var(--linie);
  background:transparent;
  color:var(--grau);
  cursor:pointer;
  transition:color .12s ease, border-color .12s ease, background .12s ease;
}
.knopf:hover{ color:var(--tinte); border-color:var(--tinte); }
.knopf[aria-pressed="true"]{
  color:#fff; background:var(--akzent); border-color:var(--akzent);
}

/* ── Bühne ──────────────────────────────────────────────────────────── */

.buehne{
  flex:1; min-height:0;
  display:flex; align-items:center; justify-content:center;
  padding:clamp(12px,2vw,28px);
  overflow:auto;
  /* Hauchdünnes Werkbankraster — harte Linien, kein Verlauf. */
  background-image:
    repeating-linear-gradient(to right, rgba(27,19,39,.05) 0 1px, transparent 1px 32px),
    repeating-linear-gradient(to bottom, rgba(27,19,39,.05) 0 1px, transparent 1px 32px);
}

/* ── Gerät ──────────────────────────────────────────────────────────── */

.geraet{
  --z:1;                                     /* Maßstab des Rahmens     */
  --sw:calc(402 * var(--z) * 1px);           /* Schirmbreite in px      */
  --sh:calc(872.06 * var(--z) * 1px);        /* Schirmhöhe in px        */
  --u:calc(var(--sw) / 669.673);             /* eine SVG-Einheit in px  */
  --k:calc(402 * var(--z) / var(--pw));      /* Maßstab der App         */

  position:relative;
  flex:none;
  width:calc(742 * var(--u));
  height:calc(1506 * var(--u));
  color:var(--tinte);                       /* die Farbe des Rahmens  */
}

/* Der Schirmkasten ist rundum 2 px GRÖSSER als das Loch im Mockup und
   trägt 2 px Polsterung — dadurch sitzt die App unverändert an ihrer
   Stelle (Polsterung + border-box), aber der Kasten reicht unter die
   Blende.

   Warum das nötig ist: Kasten und Blende haben beide weich gerasterte
   Kanten. Liegen sie auf derselben Linie, blenden beide gegen das aus,
   was dahinter liegt — den Papiergrund der Bühne. Genau dieser Streifen
   blitzt dann zwischen App und Rahmen auf, oben am dunklen Aufmacher am
   deutlichsten. Überlappen sie, kann dort nichts mehr durchscheinen.
   Ein INNEN liegender Ring hilft nicht: der deckt die App ab, nicht die
   Fuge nach außen. */
.geraet__schirm{
  position:absolute;
  left:calc(36.3165 * var(--u) - 2px);
  top:calc(26.5789 * var(--u) - 2px);
  width:calc(var(--sw) + 4px);
  height:calc(var(--sh) + 4px);
  padding:2px;
  border-radius:calc(79.72 * var(--u) + 2px);
  overflow:hidden;
  /* Die Polsterung zeigt diese Farbe — dieselbe wie die Blende, also
     unsichtbar, gleich wie hell oder dunkel die App an der Kante ist. */
  background:var(--tinte);
}

/* Die App läuft in ihrem eigenen Dokument mit fester Punktgröße und wird
   als Ganzes skaliert. Sie sieht deshalb IMMER 402 × 872 — egal, wie klein
   der Rahmen gerade dargestellt ist. */
.geraet__app{
  display:block;
  width:calc(var(--pw) * 1px);
  /* 2.169337 = 1452.731 / 669.673, das Seitenverhältnis des Schirms im
     Mockup. So füllt die App den Schirm bei --k exakt aus — gleichmäßig
     in beiden Achsen. */
  height:calc(2.169337 * var(--pw) * 1px);
  border:0;
  background:#fff;
  transform:scale(var(--k));
  transform-origin:0 0;
}

/* Das Mockup selbst: liegt über der App, deckt deren Ecken ab und fängt
   keine Klicks. Die Dynamic Island gehört dazu. */
.geraet__rahmen{
  position:absolute; inset:0;
  width:100%; height:100%;
  pointer-events:none;
}

/* ── Fuß ────────────────────────────────────────────────────────────── */

.fuss{
  flex:none;
  margin:0;
  padding:10px clamp(12px,1.6vw,24px);
  border-top:1px solid var(--linie);
  font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size:11px; color:var(--grau);
  display:flex; gap:14px; flex-wrap:wrap;
}
.fuss b{ font-weight:500; color:var(--tinte); }

@media (max-width:640px){
  .leiste{ height:auto; padding-top:8px; padding-bottom:8px; flex-wrap:wrap; }
  .leiste__werkzeug{ width:100%; margin-left:0; }
}

/* ══ Werkbank und Einbetten ═════════════════════════════════════════════
   Der Bearbeiten-Modus bekommt eine eigene Leiste UNTER der Kopfzeile —
   außerhalb des Geräts. Eine Werkzeugleiste im Schirm verdeckte genau das,
   was gerade bearbeitet wird. */

.knopf--voll{
  color:#fff; background:var(--akzent); border-color:var(--akzent);
}
.knopf--voll:hover{ color:#fff; background:#1F49E8; border-color:#1F49E8; }
.knopf[disabled]{ opacity:.45; cursor:default; }

.werkbank{
  flex:none;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  padding:10px clamp(12px,1.6vw,24px);
  border-bottom:1px solid var(--linie);
  background:#F6F3EA;
}
.werkbank__wahl{
  display:flex; align-items:center; gap:8px;
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  color:var(--grau);
}
.werkbank__wahl select{
  font:inherit; font-size:12px; letter-spacing:0; text-transform:none;
  padding:6px 8px;
  border:1px solid var(--linie); background:#fff; color:var(--tinte);
}
.werkbank__meldung{
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size:11px; color:var(--grau);
}
.werkbank__meldung[data-art="gut"]{ color:#1B7F4B; }
.werkbank__meldung[data-art="schlecht"]{ color:#B3261E; }

/* ── Dialog ─────────────────────────────────────────────────────────── */

.dialog{
  position:fixed; inset:0; z-index:100;
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  background:rgba(27,19,39,.42);
}
.dialog__blatt{
  width:min(620px, 100%);
  max-height:100%;
  overflow:auto;
  background:var(--papier);
  border:1px solid var(--tinte);
  padding:clamp(18px,2.4vw,30px);
}
.dialog__titel{ margin:0; font-size:20px; font-weight:800; letter-spacing:-.02em; }
.dialog__text{ margin:10px 0 0; font-size:13px; line-height:1.55; color:var(--grau); }
.dialog__text code{ font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace; color:var(--tinte); }
.dialog__code{
  display:block; width:100%; margin-top:14px;
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size:12px; line-height:1.6;
  padding:12px;
  border:1px solid var(--linie); background:#fff; color:var(--tinte);
  resize:vertical;
}
.dialog__schalter{
  display:flex; align-items:center; gap:8px;
  margin-top:12px; font-size:12px; color:var(--grau);
}
.dialog__fuss{ display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }

.dialog__wahl{ display:flex; flex-direction:column; gap:10px; margin-top:14px; }
.dialog__wahl label{
  display:grid; grid-template-columns:auto 1fr; gap:2px 10px;
  padding:12px; border:1px solid var(--linie); background:#fff;
  cursor:pointer;
}
.dialog__wahl label:has(:checked){ border-color:var(--akzent); background:#fff; }
.dialog__wahl input{ grid-row:1 / span 2; align-self:start; margin-top:3px; }
.dialog__wahl b{ font-size:13px; }
.dialog__wahl small{ font-size:12px; line-height:1.5; color:var(--grau); }
.dialog__wahl code{ font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace; }
.dialog__masse{
  margin-top:8px;
  font-family:"IBM Plex Mono", ui-monospace, Menlo, monospace;
  font-size:11px; color:var(--grau);
}

/* ══ Galerie ════════════════════════════════════════════════════════════
   Sechzehn Kacheln, eine je Fonds — vier mal vier, die Fläche füllend,
   ohne Rand und ohne Scrollen. Die Liste kommt aus api/nao.php; hier steht
   kein einziger Produktname im Markup.

   Das Bild füllt die ganze Kachel, der Text liegt darauf. Getrennt
   übereinander bliebe bei einem Sechzehntel des Fensters für beides zu
   wenig — so bekommt das Bild die volle Fläche und der Text seinen Platz
   trotzdem. */

.galerie{
  flex:1; min-height:0;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-template-rows:repeat(4, 1fr);
  gap:1px;
  background:var(--linie);
  overflow:hidden;
}

.kachel{
  position:relative;
  overflow:hidden;
  background:var(--tinte);
  padding:0; border:0; margin:0;
  text-align:left; font:inherit; color:inherit;
  cursor:pointer;
}
.kachel__bild{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
}
.kachel__bild img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Der Aufmacher trägt sein Motiv im oberen Drittel. Mittig geschnitten
   zeigte die Kachel den leeren Grund darunter. */
.kachel__aufmacher{ object-position:50% 22%; }
/* Ohne Bild: das Kürzel des Fonds auf Tinte — die Kachel soll fertig
   aussehen, nicht unfertig. */
.kachel__kuerzel{
  font-size:clamp(22px, 3vw, 40px); font-weight:800; letter-spacing:-.03em;
  color:var(--papier); opacity:.55;
}

/* Ein Schleier, kein Verlauf: eine flache Fläche, wie überall im Haus.
   Sie muss nur so dunkel sein, dass die Schrift auf jedem Foto trägt. */
.kachel__text{
  position:absolute; left:0; right:0; bottom:0;
  padding:10px 12px 11px;
  background:rgba(14, 17, 22, .82);
  color:#F2F1EC;
  display:flex; flex-direction:column; gap:2px;
}
.kachel__klasse{
  font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  opacity:.62;
}
.kachel__name{
  font-size:clamp(12px, 1.05vw, 15px); font-weight:700;
  letter-spacing:-.015em; line-height:1.2;
}
.kachel__rendite{ font-size:11px; opacity:.66; margin-top:1px; }
.kachel__rendite b{ color:#8FA6FF; font-weight:700; }
.kachel__eigen{
  position:absolute; top:8px; right:10px;
  font-size:9px; letter-spacing:.1em; text-transform:uppercase; font-weight:700;
  color:#fff; background:var(--akzent);
  padding:3px 6px;
}
.kachel:hover .kachel__text{ background:rgba(14, 17, 22, .92); }

/* Bild auf die Kachel ziehen */
.kachel[data-ueber]{ outline:2px solid var(--akzent); outline-offset:-2px; }
.kachel[data-ueber] .kachel__bild{ opacity:.45; }
.kachel[data-laedt]{ opacity:.45; pointer-events:none; }

.leiste__hinweis{
  font-size:11px; color:var(--grau);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:flex; align-items:center; gap:10px;
}

/* Unter 1000 px passen sechzehn lesbare Kacheln nicht mehr ohne Scrollen
   in ein Fenster — dann lieber scrollen als unleserlich stauchen. */
@media (max-width: 1000px){
  .galerie{ grid-template-columns:repeat(3, 1fr); grid-template-rows:none; grid-auto-rows:minmax(150px, 22vh); overflow:auto; }
  .leiste__hinweis{ display:none; }
}
@media (max-width: 640px){
  .galerie{ grid-template-columns:repeat(2, 1fr); }
}

.leiste__produkt{
  font-size:12px; font-weight:600; letter-spacing:-.01em;
  color:var(--grau);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:34ch;
}

/* Bild auf die Kachel ziehen */

.kachel[data-ueber]{ background:#fff; outline:2px solid var(--akzent); outline-offset:-2px; }
.kachel[data-ueber] .kachel__bild{ opacity:.5; }
.kachel[data-laedt]{ opacity:.5; pointer-events:none; }