/* Demo-Entwürfe als realistische Handy-Screens (erfundene Betriebe).
   Alle Grössen im Screen in em, die Schrift skaliert mit der Breite des Handys (Container-Einheiten). */

.ph {
  container-type: inline-size;
  position: relative;
  width: min(16.5rem, 100%);
  aspect-ratio: 9 / 19.5;
  padding: 2.6%;
  border-radius: 13% / 6%;
  background: linear-gradient(145deg, #3a3f48, #14171c 45%, #2b2f36);
  box-shadow:
    inset 0 0 0 1px #ffffff26,
    0 0 0 1px #00000080,
    0 40px 80px -36px #000000d9,
    0 0 60px -20px #9cc2ff33;
}
.ph-screen {
  --ph-bg: #fff;
  --ph-ink: #111;
  --ph-soft: #666;
  --ph-accent: #111;
  --ph-accent-ink: #fff;
  --ph-line: #e5e5e5;
  --ph-card: #f3f3f3;
  position: relative;
  height: 100%;
  overflow: hidden;
  border-radius: 10.5% / 4.9%;
  background: var(--ph-bg);
  color: var(--ph-ink);
  font-family: var(--font);
  font-size: 3.55cqw;
  line-height: 1.35;
  letter-spacing: -.005em;
  text-align: left;
}
.ph-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--ph-card);
}
.ph-screen svg { width: 1.15em; height: 1.15em; flex: none; }

/* Statusleiste mit Kamera-Aussparung */
.ph-status {
  position: absolute;
  inset: 0 0 auto;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 2.9em;
  padding: 0 1.7em 0 2.1em;
  color: var(--ph-status, var(--ph-ink));
  font-size: .95em;
  font-weight: 600;
}
.ph-island {
  position: absolute;
  top: .75em;
  left: 50%;
  width: 7.2em;
  height: 1.9em;
  margin-left: -3.6em;
  border-radius: 1em;
  background: #000;
}
.ph-icons { display: flex; align-items: center; gap: .35em; }
.ph-icons svg { width: 1.2em; height: 1em; }
.ph-icons .ph-battery { width: 1.85em; }

.ph-home {
  position: absolute;
  bottom: .6em;
  left: 50%;
  z-index: 3;
  width: 9em;
  height: .32em;
  margin-left: -4.5em;
  border-radius: 1em;
  background: var(--ph-ink);
  opacity: .85;
}

/* Seite im Handy */
.ph-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3.2em 1.25em .7em;
  background: var(--ph-bg);
}
.ph-logo { font-weight: 600; font-size: 1.05em; letter-spacing: -.02em; }
.ph-hero { position: relative; height: 13.5em; }
.ph-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #0000 35%, #000000b3);
}
.ph-hero-text {
  position: absolute;
  inset: auto 1.25em 1em;
  z-index: 1;
  color: #fff;
}
.ph-kicker { font-size: .8em; opacity: .9; }
.ph-title {
  margin-top: .25em;
  font-size: 1.55em;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
}
.ph-body { display: grid; gap: .85em; padding: 1em 1.25em 3em; }
.ph-cta {
  display: grid;
  place-items: center;
  min-height: 2.9em;
  border-radius: .55em;
  background: var(--ph-accent);
  color: var(--ph-accent-ink);
  font-weight: 600;
}
.ph-quick { display: grid; grid-template-columns: 1fr 1fr; gap: .5em; }
.ph-quick span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .35em;
  min-height: 2.5em;
  border: 1px solid var(--ph-line);
  border-radius: .55em;
  font-size: .9em;
  font-weight: 500;
}
.ph-quick .ph-open { color: var(--ph-open, var(--ph-ink)); }
.ph-h {
  margin-top: .35em;
  font-size: .78em;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ph-soft);
}
.ph-rows { display: grid; }
.ph-rows span {
  display: flex;
  justify-content: space-between;
  gap: 1em;
  padding-block: .55em;
  border-bottom: 1px solid var(--ph-line);
}
.ph-rows span b { font-weight: 500; }
.ph-rows span i { font-style: normal; color: var(--ph-soft); font-variant-numeric: tabular-nums; }
.ph-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: .45em; }
.ph-gallery figure { margin: 0; }
.ph-gallery img { height: 6.4em; border-radius: .5em; }
.ph-gallery figcaption { margin-top: .3em; font-size: .78em; color: var(--ph-soft); }
.ph-call {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .4em;
  min-height: 2.6em;
  border: 1px solid var(--ph-line);
  border-radius: .55em;
  font-weight: 600;
  color: var(--ph-call, var(--ph-ink));
}
.ph-note { font-size: .82em; color: var(--ph-soft); }

/* Branchen-Themen */
.ph--barber {
  --ph-bg: #121212; --ph-ink: #f2ece3; --ph-soft: #b5ada1; --ph-accent: #d4a24c;
  --ph-accent-ink: #141414; --ph-line: #2c2c2c; --ph-card: #1e1e1e; --ph-open: #e7c27f;
}
.ph--barber .ph-logo { text-transform: uppercase; letter-spacing: .08em; font-size: .9em; }
.ph--cafe {
  --ph-bg: #fbf7f0; --ph-ink: #35261c; --ph-soft: #7a6656; --ph-accent: #3a2a20;
  --ph-accent-ink: #fbf7f0; --ph-line: #eadfce; --ph-card: #efe3d0; --ph-open: #2f6b4f;
}
.ph--salon {
  --ph-bg: #f7f4f2; --ph-ink: #2a2326; --ph-soft: #74686c; --ph-accent: #5d4b60;
  --ph-accent-ink: #fff; --ph-line: #e6dfdc; --ph-card: #ece5e1; --ph-open: #3f6b55;
}
.ph--maler {
  --ph-bg: #f4f3ef; --ph-ink: #1f2933; --ph-soft: #5d6670; --ph-accent: #1f2933;
  --ph-accent-ink: #fff; --ph-line: #dedad0; --ph-card: #e5e1d8; --ph-call: #a2481a;
}

/* Studio für Kosmetik und Nägel: helles Rosé */
.ph--studio {
  --ph-bg: #fbf6f4; --ph-ink: #3a2a2e; --ph-soft: #7d6a6e; --ph-accent: #8a5a63;
  --ph-accent-ink: #fff; --ph-line: #eee2de; --ph-card: #f3e7e3; --ph-open: #4f7a62;
}
.ph-gallery--one { grid-template-columns: 1fr; }
.ph-gallery--one img { height: 5.2em; }

/* Demo-Entwürfe: ohne JavaScript untereinander, mit JavaScript ein grosses Handy mit Umschalter */
.demos[data-astro-cid-rp4n3z66] { grid-template-columns: 1fr; gap: 3.5rem; justify-items: center; }
.demo .ph { justify-self: center; }
.demo-switch .ph { width: min(21rem, 86vw); }
.demo-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.75rem;
}
.demo-tab {
  min-height: 44px;
  padding: .55rem 1.2rem;
  border: 1px solid #ffffff2e;
  border-radius: var(--pill);
  background: #ffffff0d;
  color: var(--ink);
  font: inherit;
  font-size: .9375rem;
  font-weight: 500;
  cursor: pointer;
  transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out);
}
.demo-tab:hover { background: #ffffff1a; }
.demo-tab[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--navy); }
.demo-switch.is-switch .demos[data-astro-cid-rp4n3z66] { gap: 0; }

/* Hero: Demo-Handy statt Logo-Kachel */
.hero-demo { display: grid; justify-items: center; }
.hero-demo .demo { gap: 1rem; }
.hero-demo .ph { width: min(19rem, 70vw); }
.hero-demo .tag { font-size: .875rem; padding: .5rem .9rem; }
.hero-demo figcaption .what { font-size: .875rem; }

/* Vorher/Nachher: Statusleiste und Foto im neuen Entwurf */
.ba .screen .ph-status { --ph-ink: #1d2a24; font-size: .62rem; height: 1.6rem; padding: 0 1rem 0 1.2rem; }
.ba .screen .ph-island { top: .4rem; width: 4.4rem; height: 1.15rem; margin-left: -2.2rem; }
.ba .new { gap: .55rem; padding-top: 1.9rem; }
.ba .new-photo {
  display: block;
  width: calc(100% + 1.8rem);
  max-width: none;
  height: 6.2rem;
  margin: 0 -.9rem .6rem;
  object-fit: cover;
  background: #ebe5d8;
}
.ba .new-row { display: flex; justify-content: space-between; gap: .5rem; }
.ba .new-row i { font-style: normal; color: #5b6660; }