/* ===========================================================================
   Produktseite — geteilte Bausteine
   ---------------------------------------------------------------------------
   Schaufenster (Produktliste links, Gerät rechts) und die Geräterahmen selbst:
   Telefon für die iPhone-Apps, MacBook für Fokus. Beides ist von den Apps
   unabhängig: jede App bringt ihr eigenes Stylesheet mit und wird in einen
   dieser Rahmen gesetzt.
   =========================================================================== */

/* --- Produktschaufenster: Liste links, Gerät rechts ----------------------- */
.showcase {
  display: grid;
  grid-template-columns: 1fr minmax(300px, 366px);
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}

.showcase > * {
  min-width: 0;
}

@media (max-width: 920px) {
  .showcase {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .showcase__side {
    justify-self: stretch;
  }
}

/* Fokus läuft auf dem Mac, nicht auf dem Handy — und ein Laptop liegt quer.
   Neben einer Spalte Text bliebe für den Bildschirm so wenig Platz, dass das
   Menü der App darauf zur Briefmarke würde. Deshalb rückt die Produktliste
   für diese Bühne nach oben (drei Kacheln in einer Reihe) und das MacBook
   bekommt die ganze Breite darunter. */
@media (min-width: 921px) {
  .showcase[data-stage='mac'] {
    grid-template-columns: minmax(0, 1fr);
  }

  .showcase[data-stage='mac'] .showcase__side {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
  }

  .showcase[data-stage='mac'] .showcase__detail {
    grid-column: 1 / -1;
  }

  .showcase[data-stage='mac'] .mac {
    justify-self: center;
  }
}

.showcase__side {
  display: grid;
  gap: 10px;
}

.showcase__intro {
  margin-bottom: 8px;
}

.showcase__intro p {
  margin-top: 16px;
  color: var(--text-secondary);
}

.product-btn {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--text-secondary);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease),
    color 0.22s var(--ease), transform 0.22s var(--ease);
}

.product-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
  transform: translateX(3px);
}

.product-btn[aria-selected='true'] {
  border-color: var(--accent-line);
  background: var(--accent-soft);
  color: var(--text);
}

.product-btn__mark {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.1), 0 8px 20px -10px rgba(0, 0, 0, 0.6);
}

.product-btn__mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.product-btn__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.product-btn__name {
  font-size: 15px;
  font-weight: 600;
}

.product-btn__desc {
  font-size: 12.5px;
  color: var(--text-muted);
}

.product-btn__state {
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.product-btn__state.is-live {
  border-color: rgba(108, 195, 148, 0.4);
  background: rgba(108, 195, 148, 0.1);
  color: #8fd6b0;
}

.showcase__detail {
  margin-top: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--border);
}

.showcase__detail-title {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.showcase__features {
  display: grid;
  gap: 9px;
  margin-top: 12px;
  list-style: none;
}

.showcase__features li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.showcase__features svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--accent);
}

.showcase__hint {
  margin-top: 16px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* --- Telefonrahmen -------------------------------------------------------- */
.phone {
  position: relative;
  /* Ein Maß, aus dem sich alles andere ableitet: die Ecke des Bildschirms
     wird sowohl von `border-radius` als auch von `clip-path` gebraucht, und
     beide müssen zusammenpassen. */
  --screen-radius: 42px;
  width: 100%;
  max-width: 366px;
  aspect-ratio: 366 / 748;
  /* Ein Rand von 11 px war zu wenig: die App ging fast bis an die Außenkante
     und das Gehäuse verschwand hinter ihr — sie „ragte aus dem Handy heraus“.
     Echte Geräte haben unten etwas mehr Rand als oben, deshalb ungleich. */
  padding: 15px 15px 19px;
  border-radius: 56px;
  background: linear-gradient(158deg, #454b57 0%, #1d222b 22%, #0e1116 52%, #262c36 88%, #4a505c 100%);
  box-shadow: 0 40px 80px -34px rgba(0, 0, 0, 0.95), 0 0 0 1px rgba(255, 255, 255, 0.07);
  /* Eigener Stapelkontext: sonst können Kinder der App (die eigene z-index
     bekommen) über den Rahmen hinweg gezeichnet werden. */
  isolation: isolate;
}

/* Schmale Lichtkante innen — sie trennt Gehäuse und Bildschirm sichtbar
   voneinander, sonst laufen dunkler Rahmen und dunkle App ineinander. */
.phone::after {
  content: '';
  position: absolute;
  inset: 11px;
  z-index: 3;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 46px;
  pointer-events: none;
}

/* Tasten an der Seite */
.phone::before {
  content: '';
  position: absolute;
  top: 100px;
  right: -1px;
  width: 5px;
  height: 175px;
  border-radius: 0 3px 3px 0;
  background: linear-gradient(
    to bottom,
    #343a45 0 30px,
    transparent 30px 42px,
    #626b78 42px 105px,
    transparent 105px 115px,
    #343a45 115px 175px
  );
  box-shadow: 1px 0 0 rgba(0, 0, 0, 0.55);
  z-index: 4;
}

.phone__screen {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--screen-radius);
  /* Neutral — jede App setzt ihren eigenen Hintergrund */
  background: #0a0a0a;
  overflow: hidden;

  /* Der Bildschirm ist der Bezugsrahmen der App: die Apps richten sich nach
     seiner Breite (@container), nicht nach der des Fensters. Sonst bleibt
     eine Kopfzeile im 366-px-Rahmen zu breit, nur weil der Bildschirm des
     Besuchers groß ist — und umgekehrt. */
  container-type: inline-size;
  container-name: phone-screen;

  /* Warum diese Zeilen: `overflow: hidden` allein beschneidet den
     abgerundeten Rand nicht zuverlässig, sobald ein Kind eine eigene
     Zeichenebene aufmacht (Scrollbereich, Animation, backdrop-filter).
     Safari zeigt dann die eckigen Kanten der App über dem runden Rahmen —
     die App „ragt aus dem Handy heraus“. `clip-path` beschneidet auch solche
     Ebenen, die Maske erzwingt zusätzlich eine eigene Zeichenebene. */
  clip-path: inset(0 round var(--screen-radius));
  transform: translateZ(0);
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  mask-image: radial-gradient(#fff, #000);
}

/* Sanftes Auslaufen über der schwebenden Tab-Leiste, damit unter ihr keine
   halb abgeschnittene Karte durchblitzt. Jede App setzt ihre eigene Farbe. */
.phone__screen::after {
  content: '';
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 4;
  height: 88px;
  pointer-events: none;
  background: linear-gradient(to top, var(--screen-fade, #0a0a0a) 26%, transparent);
}

.phone__screen.app-soon::after {
  content: none;
}

/* Bedienleiste unten */
.phone__screen::before {
  content: '';
  position: absolute;
  bottom: 8px;
  left: 50%;
  z-index: 6;
  width: 108px;
  height: 4px;
  margin-left: -54px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.42);
  pointer-events: none;
}

/* Dynamic Island wie im Original */
.phone__island {
  position: absolute;
  top: 13px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  width: 92px;
  height: 26px;
  border-radius: 999px;
  background: #000;
}

.phone__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 13px 24px 6px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.phone__status-right {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
}

.phone__battery {
  display: inline-grid;
  place-items: center;
  min-width: 25px;
  padding: 1px 5px;
  border-radius: 5px;
  background: #fff;
  color: #000;
  font-size: 10px;
  font-weight: 700;
}

/* --- Der Rahmen auf echten Handys ----------------------------------------- *
   Auf dem Handy war nicht die Breite das Problem, sondern die Höhe: mit dem
   festen Seitenverhältnis wurde der Rahmen höher als die Sichtfläche des
   Browsers (bei 350 px Breite braucht 366 × 748 rund 715 px Höhe — mehr, als
   ein iPhone im Portrait übrig lässt). Ober- und Unterkante des Gehäuses
   lagen damit außerhalb des Fensters, und die App schien oben und unten aus
   dem Rahmen zu laufen. Deshalb richtet sich die Höhe hier nach der
   Sichtfläche: das Gerät wird etwas gedrungener, ist dafür ganz zu sehen.

   `svh` und nicht `vh`: iOS Safari rechnet bei `vh` die eingefahrene
   Adressleiste mit, der Rahmen wäre also wieder zu hoch. `svh` ist die
   kleinste Sichtfläche — sie gilt auch mit ausgefahrener Leiste und ändert
   sich beim Scrollen nicht, anders als `dvh`, mit dem der Rahmen unterwegs
   nachwachsen würde. Die `vh`-Zeile davor bleibt als Rückfall. */
@media (max-width: 920px) {
  .phone {
    aspect-ratio: auto;
    height: min(748px, calc(100vh - var(--nav-h) - 30px));
    height: min(748px, calc(100svh - var(--nav-h) - 30px));
    /* Im Querformat bleibt der Rahmen lieber angeschnitten als briefmarkengroß. */
    min-height: 470px;
  }
}

/* Auf schmalen Geräten zählt jedes Pixel Bildschirmbreite: das Gehäuse wird
   dünner, damit der App mehr Platz bleibt und ihr Inhalt nicht an die
   Innenkante stößt. */
@media (max-width: 400px) {
  .phone {
    --screen-radius: 34px;
    padding: 10px 10px 13px;
    border-radius: 44px;
  }

  .phone::after {
    inset: 7px;
    border-radius: 37px;
  }

  /* Die Seitentaste sitzt am echten Gerät auf einem Drittel der Höhe. */
  .phone::before {
    top: 84px;
    height: 148px;
  }
}

/* --- MacBook-Rahmen ------------------------------------------------------- *
   Fokus ist eine Menüleisten-App für den Mac. Ein Telefonrahmen würde die
   Sache falsch erzählen, deshalb steht diese App in einem Laptop: Deckel mit
   dünnem Rand und Notch, darunter Scharnier und Unterteil. Der Bildschirm
   selbst bringt nichts mit — den füllt fokus.css mit dem Schreibtisch.
   ------------------------------------------------------------------------- */
.mac {
  position: relative;
  width: 100%;
  max-width: 1000px;
}

/* Deckel: außen Aluminium, innen der schwarze Rand um den Bildschirm. Unten
   etwas mehr Rand als oben — dort sitzt am echten Gerät die Kante zum
   Scharnier. */
.mac__lid {
  padding: 10px 10px 13px;
  border-radius: 15px 15px 7px 7px;
  background: linear-gradient(157deg, #4c525c 0%, #23272e 20%, #14171c 55%, #21252c 84%, #4a505a 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08),
    0 34px 64px -32px rgba(0, 0, 0, 0.92);
}

.mac__screen {
  position: relative;
  /* 16:10 wie bei jedem MacBook. */
  aspect-ratio: 16 / 10;
  border-radius: 6px;
  /* `clip` statt `hidden`: ein Bildschirm ist kein Scrollbereich. Mit `hidden`
     kann der Browser ihn verschieben (etwa um ein fokussiertes Element zu
     zeigen) — dann sitzt der ganze Schreibtisch um ein paar Pixel daneben. */
  overflow: clip;
  background: #05070b;

  /* Der Bildschirm ist der Bezugsrahmen der App: das Menü der App richtet
     sich nach seiner Größe (@container), nicht nach der des Fensters. Weil
     hier Breite UND Höhe feststehen, darf es `size` statt `inline-size`
     sein — nur so lässt sich auch auf die Höhe reagieren. */
  container-type: size;
  container-name: mac-screen;

  /* Gleiche Absicherung wie beim Telefon: `overflow` allein hält eigene
     Zeichenebenen (Blur, Animation) nicht in den runden Ecken. */
  clip-path: inset(0 round 6px);
  isolation: isolate;
}

/* Notch wie bei den aktuellen Modellen: schneidet oben in den Bildschirm. */
.mac__notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  width: 10.5%;
  max-width: 116px;
  height: 3.4%;
  min-height: 12px;
  border-radius: 0 0 7px 7px;
  background: #05070b;
  pointer-events: none;
}

/* Sehr feiner Glanz auf dem Glas — nur angedeutet, damit die App darunter
   lesbar bleibt. */
.mac__glare {
  position: absolute;
  inset: 0;
  z-index: 38;
  pointer-events: none;
  background: linear-gradient(112deg, rgba(255, 255, 255, 0.055) 0 22%, transparent 42%);
}

/* Scharnier: dunkler Streifen zwischen Deckel und Unterteil. */
.mac__hinge {
  width: 24%;
  height: 4px;
  margin: 0 auto;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(#0f1216, #2a2f36);
}

/* Unterteil: am echten Gerät etwas breiter als der Deckel, mit der kleinen
   Griffmulde in der Mitte. */
.mac__base {
  position: relative;
  width: 106%;
  margin-left: -3%;
  height: 13px;
  border-radius: 3px 3px 11px 11px;
  background: linear-gradient(#5b626c 0 1px, #3a4048 1px, #22262c 55%, #14171b);
  box-shadow: 0 22px 30px -22px rgba(0, 0, 0, 0.9);
}

.mac__base::after {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 13%;
  height: 5px;
  transform: translateX(-50%);
  border-radius: 0 0 7px 7px;
  background: linear-gradient(#1b1f24, #2e343b);
}

/* --- Ohne Laptop bis Tabletbreite ---------------------------------------- *
   Ein Gerät im Querformat lässt sich auf einem schmalen Bildschirm nicht
   ehrlich zeigen: bei 16:10 blieben vom Menü der App gut 200 px Höhe, und
   zieht man den Bildschirm höher, ist es kein MacBook mehr, sondern
   gestreckt. Bis 920 px fällt das Gehäuse deshalb weg und es bleibt der
   Ausschnitt, auf den es ankommt — ein Stück Mac-Bildschirm mit der
   Menüleiste oben und dem Menü der App darunter. Gleiche Stelle wie am
   echten Mac, nur ohne Deckel. Das ist auch die Breite, ab der das
   Schaufenster ohnehin einspaltig wird.
   ------------------------------------------------------------------------- */
@media (max-width: 920px) {
  .mac__lid {
    padding: 0;
    border-radius: 16px;
    background: none;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1),
      0 24px 46px -26px rgba(0, 0, 0, 0.85);
  }

  /* Deckelkante, Scharnier, Unterteil, Notch und Glanz gehören zum Gehäuse. */
  .mac__hinge,
  .mac__base,
  .mac__notch,
  .mac__glare {
    display: none;
  }

  .mac__screen {
    /* Die Höhe richtet sich jetzt nach dem Inhalt — nichts wird gestreckt. */
    aspect-ratio: auto;
    height: auto;
    min-height: 142px;
    border-radius: 16px;
    clip-path: inset(0 round 16px);
    /* Ohne feste Höhe kann nur noch die Breite Bezug sein. Damit greifen die
       Höhen-Abfragen (kompakter Modus) hier nicht mehr — richtig so: das Menü
       darf in voller Größe stehen, gescrollt wird die Seite. */
    container-type: inline-size;
  }
}

/* Kleiner, ruhiger Hinweis: die Apps sind noch nicht veröffentlicht. Steht
   überall dort, wo jemand sie für fertig halten könnte — bewusst so leise,
   dass es nicht wie eine Entschuldigung wirkt. */
.unreleased {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.explain .unreleased {
  margin-top: 10px;
}

/* --- Funktionen im Einzelnen --------------------------------------------- *
   Unter der Vorschau: was hinter den Knöpfen steckt. Kacheln, damit man
   springen kann, statt einen Block Text zu lesen.
   ------------------------------------------------------------------------- */
.explain {
  margin-top: clamp(38px, 5vw, 64px);
  padding-top: clamp(28px, 3.5vw, 40px);
  border-top: 1px solid var(--border);
}

.explain[hidden] {
  display: none;
}

.explain__title {
  font-size: clamp(20px, 2.4vw, 27px);
  letter-spacing: -0.01em;
}

.explain__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: clamp(16px, 2vw, 26px);
  margin-top: clamp(20px, 2.5vw, 30px);
}

.explain__card h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}

.explain__icon {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: rgba(86, 194, 240, 0.1);
  color: var(--accent);
}

.explain__card p {
  margin-top: 9px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-secondary);
}

/* --- Platzhalter für Produkte ohne Vorschau ------------------------------- */
.app-soon {
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 14px;
  height: 100%;
  padding: 32px 26px;
  text-align: center;
}

.app-soon__icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-secondary);
}

.app-soon__title {
  font-family: var(--font-display);
  font-size: 19px;
  color: var(--text);
}

.app-soon__text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 24ch;
}

/* --- Labs: Bühne und Bestellung im Stil der anderen Marken --------------------- */
.lb-hero .hero__meta .dot-work {
  flex: none;
}

.lb-stage {
  padding-top: clamp(8px, 2vw, 24px);
}

.ds-order {
  margin-top: clamp(56px, 7vw, 96px);
}

.product-btn {
  padding: 12px 16px;
}

.product-btn[aria-selected='true'] .product-btn__mark {
  box-shadow: 0 0 0 1px var(--accent-line), 0 10px 26px -10px var(--accent);
}