/* Drei Praxisfotos hinter kleiner Originalgrafik und diffusem Hintergrundlicht.
   Grafik und Schrift sind proportional auf 74 % der vorherigen Größe verkleinert. */
.praxis-intro {
  position: relative;
  isolation: isolate;
  flex: none;
  display: grid;
  place-items: center;
  width: 100%;
  height: 100svh;
  min-height: 25rem;
  overflow: clip;
  background: #c5cee0;
}

.intro-fotos {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: minmax(0, 1fr);
  opacity: .72;
  pointer-events: none;
}

/* Jede Spalte begrenzt auch vergrößerte Fotos auf exakt ein Drittel. */
.intro-fotospalte {
  min-width: 0;
  min-height: 0;
  overflow: clip;
}

.intro-foto {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  object-fit: cover;
  object-position: center;
  filter: saturate(.65);
}

/* Unterkante der vorderen Kerzenschale auf der Markierung im Nutzer-Screenshot:
   gegenüber dem letzten Stand um rund 10 % der Introhöhe nach unten. */
.intro-fotospalte:last-child .intro-foto {
  height: 110%;
  transform: translateY(-5.9091%) scale(1.2);
  transform-origin: center;
}

/* Blaugrauer Schleier und helle Mitte halten Logo, Schrift und Navigation lesbar. */
.intro-licht {
  position: absolute;
  inset: -12%;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, rgb(212 222 238 / .90) 0%, rgb(212 222 238 / .65) 16%, transparent 35%, transparent 70%, rgb(196 210 231 / .30) 100%),
    radial-gradient(ellipse 38% 48% at 50% 50%, rgb(222 230 241 / .94) 0%, rgb(215 224 238 / .80) 36%, rgb(202 214 231 / .18) 100%),
    linear-gradient(110deg, rgb(205 215 232 / .54), rgb(192 205 227 / .46));
}

.intro-bild {
  position: relative;
  z-index: 2;
  display: block;
  width: min(66vw, 73svh, 700px);
  aspect-ratio: 1182 / 1073;
}

.intro-canvas {
  position: absolute; left: -12%; top: -12%;
  width: 124%; height: 124%;
  display: none; pointer-events: none;
}
/* Gleiche Skalierung und Deckkraft für Canvas und statischen Bildzustand. */
.intro-canvas, .intro-original {
  transform: scale(.74);
  transform-origin: center;
  opacity: .90;
}
.intro-webgl-bereit .intro-original { opacity: 0; }
html.intro-laeuft .intro-original { opacity: 0; }
html.intro-laeuft .intro-fallback .intro-original { animation: intro-logoaufbau 2867ms 567ms cubic-bezier(.22, .61, .36, 1) both; }

.intro-original {
  position: absolute; inset: 0;
  display: block; width: 100%; height: 100%;
  object-fit: contain; pointer-events: none;
  opacity: .90;
}


.intro-schrift {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: grid;
  place-content: center;
  padding: 0 9%;
  color: var(--kopf-grund);
  font-family: var(--schrift);
  font-size: clamp(1.073rem, 2.368vw, 1.887rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .09em;
  text-transform: uppercase;
  text-align: center;
  opacity: 1;
  pointer-events: none;
}

.intro-schrift > span { display: block; transform: translateY(-25%); }

.intro-nav {
  position: absolute;
  z-index: 3;
  top: 0;
  right: max(var(--rand), calc((100vw - var(--seitenbreite)) / 2 + var(--rand)));
  width: max-content;
  height: var(--kopf);
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  color: var(--kopf-grund);
  font-family: var(--schrift);
  font-size: .95rem;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: .05em;
}

.intro-nav a {
  display: flex;
  align-items: center;
  height: 100%;
  text-decoration: none;
  text-underline-offset: 1.2em;
  text-decoration-thickness: 1px;
}
.intro-nav a:hover { text-decoration: underline; }
.intro-nav a:focus-visible { opacity: 1; outline-color: var(--kopf-grund); }
.intro-laeuft .intro-nav:focus-within { animation: none; opacity: 1; }

/* Der Hintergrund steht sofort. Erst danach baut sich das Logo auf. */
.intro-laeuft .intro-canvas { animation: intro-logoaufbau 2867ms 567ms cubic-bezier(.22, .61, .36, 1) both; }
.intro-laeuft .intro-schrift { animation: intro-schrift 2600ms 1133ms ease both; }
.intro-laeuft .intro-nav { animation: intro-navigation 2400ms 2000ms ease both; }
/* Die Einblendung wartet auf die geladenen Fotos und den Logo-Renderer. */
.intro-laeuft .praxis-intro:not(.intro-webgl-bereit):not(.intro-fallback) .intro-canvas,
.intro-laeuft .praxis-intro:not(.intro-webgl-bereit):not(.intro-fallback) .intro-schrift,
.intro-laeuft .praxis-intro:not(.intro-webgl-bereit):not(.intro-fallback) .intro-nav { animation-play-state: paused; }

@keyframes intro-logoaufbau {
  from { opacity: 0; filter: blur(14px); }
  55% { opacity: .66; filter: blur(4px); }
  to { opacity: .90; filter: blur(0); }
}
@keyframes intro-schrift { from { opacity: 0; } to { opacity: 1; } }
@keyframes intro-navigation { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 860px) {
  /* Auf kleinen Bildschirmen stehen die Reiter wie im fixierten Kopfbereich am oberen Rand. */
  .intro-nav {
    top: 0;
    left: var(--rand);
    right: var(--rand);
    width: auto;
    height: calc(var(--kopf) - var(--logo-zeile) - 1px);
    justify-content: space-between;
    gap: 1rem;
  }
}

@media (max-width: 600px) {
  /* Auch mobil: Fenster links, unscharfe Bäume mittig, Kerzen rechts. */
  .intro-fotospalte:last-child .intro-foto { object-position: 60% center; }
  .intro-bild { width: min(89vw, 66svh); }
}

@media (max-height: 460px) and (orientation: landscape) {
  .praxis-intro { min-height: 0; }
  .intro-bild { width: min(55vw, 68svh); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-foto, .intro-licht, .intro-canvas, .intro-schrift, .intro-nav { animation: none !important; }
}

@media print { .praxis-intro { display: none; } }