/* ============================================================
   digitalantrieb / 07 - WEBSITE-VORSCHAU
   Keine nachgebaute Attrappe aus Div-Kaesten, sondern die
   echte Demo-Seite aus /demo, gerendert in einem Rahmen.
   Beim Scrollen faehrt sie durch den Ausschnitt, sodass die
   ganze Seite sichtbar wird.
   ============================================================ */

.preview { position: relative; overflow: clip; }

.preview__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 2vw, 2rem);
  row-gap: clamp(2.5rem, 5vw, 4rem);
  align-items: start;
}

.preview__title { margin-bottom: clamp(2.5rem, 6vw, 5rem); max-width: 24ch; }
.preview__head { grid-column: 1 / span 4; }
.preview__head .body { margin-bottom: var(--stack-3); }

.preview__facts {
  display: grid;
  gap: 0;
  margin-bottom: var(--stack-3);
  border-top: var(--hair) solid var(--rule);
}
.preview__facts div {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  gap: 0.75rem;
  padding-block: 0.7rem;
  border-bottom: var(--hair) solid var(--rule);
  font-size: var(--t-sm);
  color: var(--on-stage-2);
}
.preview__facts span {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  color: var(--signal);
  padding-top: 0.3em;
}

/* Der Rahmen laeuft rechts aus dem Format, wie das Hero-Bild. */
.preview__stage {
  grid-column: 5 / span 8;
  position: relative;
  margin-right: calc(var(--gutter) * -1);
}

.frame {
  position: relative;
  background: var(--surface-2);
  border: var(--hair) solid var(--rule);
  border-radius: 12px;
  padding: 0.55rem;
  box-shadow: 0 40px 90px -40px rgba(0, 0, 0, 0.9);
}

/* Adressleiste. Nur so viel Browser, dass klar ist, was man sieht. */
.frame__bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.35rem 0.4rem 0.75rem;
}
.frame__dots { display: flex; gap: 5px; flex: none; }
.frame__dots i {
  width: 8px; height: 8px;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--chalk) 22%, transparent);
}
.frame__url {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-round);
  background: color-mix(in srgb, var(--chalk) 7%, transparent);
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.04em;
  color: var(--on-stage-2);
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.frame__lock { flex: none; width: 9px; color: var(--signal); }
.frame__lock path { stroke: currentColor; stroke-width: 1.6; fill: none; }

/* Ausschnitt. Die Demo-Seite ist deutlich hoeher und wird
   beim Scrollen hindurchgefahren. */
.frame__view {
  position: relative;
  aspect-ratio: 16 / 10.5;
  overflow: hidden;
  border-radius: 6px;
  background: #FBFAF8;
}
.frame__scale {
  position: absolute;
  top: 0; left: 0;
  width: 1440px;
  height: 2640px;
  transform-origin: top left;
  /* Der Massstab kommt aus dem Modul, damit er zur Rahmenbreite passt */
  transform: scale(var(--frame-scale, 0.5));
}
.frame__slide {
  width: 100%;
  height: 100%;
  will-change: transform;
}
.frame__view iframe {
  width: 1440px;
  height: 2640px;
  border: 0;
  display: block;
  /* Der Rahmen soll das Scrollen der Seite nicht abfangen */
  pointer-events: none;
}

/* Verlauf an der Unterkante: der Ausschnitt endet weich,
   statt die Demo-Seite hart abzuschneiden. */
.frame__view::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 14%;
  pointer-events: none;
  background: linear-gradient(to top, rgba(251, 250, 248, 0.9), transparent);
}

.frame__note {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.85rem;
  padding-inline: 0.4rem;
}

/* Fallback, falls der Rahmen nicht geladen werden kann */
.frame__fallback {
  display: none;
  position: absolute;
  inset: 0;
  place-items: center;
  padding: 2rem;
  text-align: center;
  background: var(--surface-2);
  color: var(--on-stage-2);
  font-size: var(--t-sm);
}
.frame.is-blocked .frame__fallback { display: grid; }
.frame.is-blocked .frame__scale { display: none; }

@media (max-width: 1024px) {
  .preview__head { grid-column: 1 / -1; }
  .preview__stage { grid-column: 1 / -1; margin-right: 0; }
}

@media (max-width: 640px) {
  .frame { padding: 0.4rem; border-radius: 9px; }
  .frame__view { aspect-ratio: 3 / 4; }
  .frame__bar { padding-bottom: 0.55rem; }
  .frame__dots { display: none; }
}

/* ============================================================
   DER RUF ZU DEN BEISPIELEN

   Hier standen drei Kacheln mit Stockfotos. Sie sind entfallen,
   weil unter /beispiele/ sieben vollstaendige Websites laufen,
   die man anklicken kann - drei Fotos mit Schlagworten daneben
   waren die schwaechere Fassung derselben Aussage.

   An ihre Stelle tritt EIN Ziel. Der Abschnitt hatte vorher
   zwei Wege zur selben Seite: einen kleinen Knopf links und
   die Kacheln darunter. Zwei Aufforderungen zum selben Ort
   sind keine doppelte Chance, sondern eine geteilte.

   Die Flaeche ist ganz anklickbar, nicht nur der Pfeil. Ein
   Ziel von 700 Pixeln Breite trifft auch, wer mit dem Daumen
   zielt.
   ============================================================ */

.demo-ruf {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--stack-2) var(--stack-3);

  margin-top: var(--stack-4);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);

  border: var(--hair) solid var(--signal);
  background: color-mix(in srgb, var(--signal) 8%, transparent);
  text-decoration: none;
  color: inherit;

  transition: background-color var(--d-l3) var(--e-out),
              border-color var(--d-l3) var(--e-out);
}

.demo-ruf:hover,
.demo-ruf:focus-visible {
  background: var(--signal);
  border-color: var(--signal);
  color: var(--ink);
}

.demo-ruf__marke {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: var(--track-meta);
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 0.4rem;
  transition: color var(--d-l3) var(--e-out);
}
.demo-ruf:hover .demo-ruf__marke,
.demo-ruf:focus-visible .demo-ruf__marke { color: var(--ink); }

.demo-ruf__titel {
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.2vw, 2.3rem);
  line-height: 1.06;
  letter-spacing: var(--track-lg);
  margin: 0 0 0.6rem;
  color: var(--chalk);
  transition: color var(--d-l3) var(--e-out);
}
.demo-ruf:hover .demo-ruf__titel,
.demo-ruf:focus-visible .demo-ruf__titel { color: var(--ink); }

/* Die sieben Branchen als Zeile. Sie sagen in zwei Sekunden,
   was hinter dem Knopf liegt - besser als jede Beschreibung. */
.demo-ruf__branchen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.5rem;
  margin: 0;
}
.demo-ruf__branchen span {
  font-family: var(--font-mono);
  font-size: var(--t-meta);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border: var(--hair) solid var(--rule);
  border-radius: var(--r-round);
  padding: 0.25rem 0.65rem;
  color: var(--on-stage-2);
  transition: border-color var(--d-l3) var(--e-out), color var(--d-l3) var(--e-out);
}
.demo-ruf:hover .demo-ruf__branchen span,
.demo-ruf:focus-visible .demo-ruf__branchen span {
  border-color: color-mix(in srgb, var(--ink) 30%, transparent);
  color: var(--ink);
}

.demo-ruf__pfeil {
  display: grid;
  place-items: center;
  width: clamp(3rem, 6vw, 4rem);
  height: clamp(3rem, 6vw, 4rem);
  border-radius: 50%;
  background: var(--signal);
  color: var(--ink);
  flex: none;
  transition: transform var(--d-l3) var(--e-out), background-color var(--d-l3) var(--e-out);
}
.demo-ruf__pfeil svg { width: 40%; height: auto; }
.demo-ruf:hover .demo-ruf__pfeil,
.demo-ruf:focus-visible .demo-ruf__pfeil {
  transform: translateX(6px);
  background: var(--ink);
  color: var(--signal);
}

.demo-ruf:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; }

@media (max-width: 40rem) {
  .demo-ruf { grid-template-columns: 1fr; }
  .demo-ruf__pfeil { justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-ruf, .demo-ruf__pfeil, .demo-ruf__titel,
  .demo-ruf__marke, .demo-ruf__branchen span { transition: none; }
  .demo-ruf:hover .demo-ruf__pfeil { transform: none; }
}