/* Layout der drei Startseiten-Entwuerfe. */

.e-titel { padding-block: clamp(28px, 6vw, 80px) clamp(56px, 8vw, 110px); overflow: hidden; }
.e-titeltext h1 { text-wrap: balance; font: 700 clamp(3rem, 7.6vw, 6.4rem)/.9 var(--schmal); letter-spacing: -.012em;
  margin: 0 0 24px; text-wrap: balance; }
.e-titeltext .lead { font-size: clamp(1.1rem, 1.7vw, 1.3rem); color: #d9d2c0; max-width: 40ch; margin: 0 0 30px; }
.e-titeltext.zentriert { text-align: center; margin-inline: auto; max-width: 900px; }
.e-titeltext.zentriert h1 { max-width: 13ch; margin-inline: auto; }
.e-titeltext.zentriert .lead { margin-inline: auto; }
.e-kopf { max-width: 760px; margin-bottom: clamp(32px, 4vw, 52px); }
.e-kopf p { color: #d9d2c0; margin: 0; }
.e-kompakt { padding-block: clamp(48px, 7vw, 90px); }
.e-zwei { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 110px); align-items: center; }
.e-zwei.gespiegelt > :first-child { order: 2; }
.e-zwei .text p { color: #d9d2c0; max-width: 54ch; }
.e-geraet-rechts, .e-geraet-links { width: min(100%, 460px); justify-self: center; }
.e-geraet-rechts.schmal { width: min(70%, 300px); }
.schicht-text { margin-top: 20px; min-height: 5.5em; }
.schicht-text p { color: #d9d2c0; margin: 0; max-width: 48ch; }
.schicht-text .quelle { display: block; margin-top: 8px; color: var(--staub); font-size: .92rem; }
@media (max-width: 900px) {
  .e-zwei { grid-template-columns: minmax(0, 1fr); }
  .e-zwei.gespiegelt > :first-child { order: 0; }
}

/* ---- A: Cockpit-Buehne ---- */
.e-a .e-titeltext { margin-bottom: clamp(40px, 6vw, 72px); }
.e-buehne { display: grid; place-items: center; min-height: 200px; }
.e-buehne .geraet.ipad.quer { width: min(100%, 1100px); }
.e-buehne .geraet.ipad.hoch { width: min(82%, 520px); }
.e-buehne .geraet.iphone.hoch { width: min(64%, 330px); }
.e-buehne .geraet.iphone.quer { width: min(100%, 980px); }
.e-buehne .geraet[hidden] { display: none; }
.e-pultzeile { display: flex; justify-content: center; margin-top: 34px; }
/* sanfter Lichtschein hinter dem Geraet */
.e-buehne::before { content: ""; position: absolute; z-index: -1; width: 70%; height: 55%;
  background: radial-gradient(closest-side, rgb(225 204 79 / .10), transparent); filter: blur(10px); }
.e-buehne { position: relative; }

/* ---- B: Geteilter Titel ---- */
.e-b-raster { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.e-b-komposition { position: relative; transform-origin: 60% 50%; will-change: transform; padding-bottom: 12%; }
.e-b-ipad { width: 100%; }
.e-b-iphone { position: absolute; width: 30%; left: -6%; bottom: -2%; }
.bento { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); }
.zelle { background: linear-gradient(180deg, rgb(26 26 30 / .92), rgb(19 19 22 / .92)); border: 1px solid var(--kante);
  border-radius: 28px; padding: clamp(22px, 3vw, 36px); overflow: hidden; display: grid; gap: 22px; align-content: start; }
.zelle h3 { font: 600 clamp(1.5rem, 2.4vw, 2rem)/1.05 var(--schmal); margin: 0 0 10px; }
.zelle p { color: #d9d2c0; margin: 0; }
.zelle.gross { grid-row: span 2; grid-template-rows: auto 1fr; }
.zelle.breit { grid-column: 1 / -1; }
.zelle-bild { display: grid; justify-items: center; align-items: end; }
.zelle.gross .zelle-bild .geraet { width: min(92%, 380px); }
.zelle-bild.unten { margin-bottom: calc(-1 * clamp(22px, 3vw, 36px) - 30%); }
.zelle-bild.unten .geraet { width: min(64%, 240px); }
.zelle:nth-child(3) .zelle-bild.unten .geraet { width: min(78%, 300px); }
@media (max-width: 900px) {
  .e-b-raster { grid-template-columns: minmax(0, 1fr); }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .zelle.gross { grid-row: auto; }
  .zelle-bild.unten { margin-bottom: calc(-1 * clamp(22px, 3vw, 36px) - 20%); }
}

/* ---- C: Scroll-Geschichte ---- */
.e-c-titelgeraet { margin-top: clamp(40px, 6vw, 70px); display: grid; justify-items: center; }
.e-c-titelgeraet .geraet { width: min(100%, 980px); }
.e-geschichte { padding-block: clamp(60px, 8vw, 110px); }
.e-c-raster { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 7vw, 110px); }
.e-c-klebt { position: sticky; top: calc(50vh - min(32vw, 330px)); align-self: start; width: min(100%, 460px); justify-self: center; }
.kapitel { min-height: 78vh; display: flex; flex-direction: column; justify-content: center;
  opacity: .28; transition: opacity .5s ease; }
.kapitel.aktiv { opacity: 1; }
.kapitel h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.kapitel p { color: #d9d2c0; max-width: 44ch; margin: 0; }
@media (max-width: 900px) {
  .e-c-raster { grid-template-columns: minmax(0, 1fr); }
  /* Auf dem Telefon steht das Geraet klein oben, der Text laeuft darunter
     durch -- mit genug Abstand, dass keine Ueberschrift darunter verschwindet. */
  .e-c-raster { gap: 0; }
  .e-c-klebt { position: sticky; top: 56px; width: min(46%, 200px); z-index: 1; }
  .e-c-kapitel { position: relative; z-index: 2; }
  .kapitel { min-height: 70vh; justify-content: flex-end; padding-bottom: 12vh; opacity: 1; }
  .kapitel h2, .kapitel p { background: rgb(10 10 11 / .9); box-shadow: 0 0 0 10px rgb(10 10 11 / .9); }
}
@media (prefers-reduced-motion: reduce) { .kapitel { opacity: 1; } }