/* Gestaltung ausschließlich für Szene 2; FINAL-Einstieg bleibt unberührt. */
.birgit-next {
  position: absolute;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.birgit-next:focus-visible {
  outline: 2px solid #79572f;
  outline-offset: 2px;
}

.birgit-scene-two[hidden],
.birgit-next[hidden] {
  display: none;
}

.birgit-scene-two {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, 1fr);
  align-items: center;
  gap: 3vw;
  padding: 5vw;
  background:
    radial-gradient(ellipse at 35% 55%, rgba(246, 211, 141, 0.30), transparent 48%),
    radial-gradient(ellipse at 0% 95%, rgba(216, 166, 76, 0.27), transparent 45%),
    radial-gradient(ellipse at 100% 18%, rgba(232, 189, 110, 0.26), transparent 46%),
    radial-gradient(ellipse at 50% 25%, rgba(255, 252, 242, 0.8), transparent 65%),
    #f7ecd7;
  animation: birgit-scene-two-reveal 1.6s ease both;
}

/* Transparente Halme liegen nur am äußeren Rand, außerhalb des Layoutflusses. */
.birgit-scene-two::before,
.birgit-scene-two::after {
  content: "";
  position: absolute;
  bottom: 0;
  width: 15%;
  height: 78%;
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22200%22%20height%3D%22700%22%20viewBox%3D%220%200%20200%20700%22%20preserveAspectRatio%3D%22none%22%3E%0A%20%20%3Cg%20fill%3D%22none%22%20stroke%3D%22%23aa813e%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M24%20710%20Q64%20418%2032%2080%20M10%20710%20Q34%20484%205%20310%20M42%20710%20Q44%20507%20106%20339%20M3%20710%20Q26%20337%204%20150%20M61%20710%20Q75%20598%20150%20505%22%2F%3E%0A%20%20%20%20%3Cpath%20d%3D%22M37%20205%20Q13%20183%2012%20154%20M40%20240%20Q69%20216%2071%20180%20M44%20285%20Q18%20267%2013%20234%20M46%20329%20Q79%20299%2086%20258%20M47%20376%20Q22%20354%2016%20320%20M47%20424%20Q79%20401%2091%20365%20M67%20468%20Q52%20433%2057%20409%20M79%20428%20Q109%20415%20119%20387%20M92%20386%20Q82%20357%2090%20334%20M116%20552%20Q111%20525%20119%20507%20M133%20527%20Q160%20525%20171%20508%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%20%20%3Cg%20fill%3D%22%23aa813e%22%20opacity%3D%22.55%22%3E%0A%20%20%20%20%3Cellipse%20cx%3D%2233%22%20cy%3D%22105%22%20rx%3D%223%22%20ry%3D%2224%22%20transform%3D%22rotate%28-6%2033%20105%29%22%2F%3E%0A%20%20%20%20%3Cellipse%20cx%3D%2212%22%20cy%3D%22154%22%20rx%3D%223%22%20ry%3D%2218%22%20transform%3D%22rotate%28-25%2012%20154%29%22%2F%3E%0A%20%20%20%20%3Cellipse%20cx%3D%2271%22%20cy%3D%22180%22%20rx%3D%223%22%20ry%3D%2220%22%20transform%3D%22rotate%2820%2071%20180%29%22%2F%3E%0A%20%20%20%20%3Cellipse%20cx%3D%2213%22%20cy%3D%22234%22%20rx%3D%223%22%20ry%3D%2219%22%20transform%3D%22rotate%28-24%2013%20234%29%22%2F%3E%0A%20%20%20%20%3Cellipse%20cx%3D%2286%22%20cy%3D%22258%22%20rx%3D%223%22%20ry%3D%2222%22%20transform%3D%22rotate%2823%2086%20258%29%22%2F%3E%0A%20%20%20%20%3Cellipse%20cx%3D%2216%22%20cy%3D%22320%22%20rx%3D%223%22%20ry%3D%2220%22%20transform%3D%22rotate%28-24%2016%20320%29%22%2F%3E%0A%20%20%20%20%3Cellipse%20cx%3D%2291%22%20cy%3D%22365%22%20rx%3D%223%22%20ry%3D%2220%22%20transform%3D%22rotate%2830%2091%20365%29%22%2F%3E%0A%20%20%20%20%3Cellipse%20cx%3D%22107%22%20cy%3D%22337%22%20rx%3D%223%22%20ry%3D%2222%22%20transform%3D%22rotate%2821%20107%20337%29%22%2F%3E%0A%20%20%20%20%3Cellipse%20cx%3D%22119%22%20cy%3D%22387%22%20rx%3D%223%22%20ry%3D%2216%22%20transform%3D%22rotate%2834%20119%20387%29%22%2F%3E%0A%20%20%20%20%3Cellipse%20cx%3D%22151%22%20cy%3D%22502%22%20rx%3D%223%22%20ry%3D%2220%22%20transform%3D%22rotate%2842%20151%20502%29%22%2F%3E%0A%20%20%3C%2Fg%3E%0A%3C%2Fsvg%3E%0A") bottom left / 100% 100% no-repeat;
  opacity: 0.19;
}

.birgit-scene-two::before { left: 0; }
.birgit-scene-two::after {
  right: 0;
  height: 67%;
  transform: scaleX(-1);
  opacity: 0.15;
}

.birgit-scene-two__portrait {
  display: block;
  width: 100%;
  max-height: 76dvh;
  object-fit: contain;
  /* Maske folgt dem enthaltenen Fotoformat; nur Randtransparenz, kein Weichzeichner. */
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1448' height='1086' viewBox='0 0 1448 1086'%3E%3Cdefs%3E%3ClinearGradient id='x'%3E%3Cstop stop-color='white' stop-opacity='0'/%3E%3Cstop offset='.025' stop-color='white' stop-opacity='.25'/%3E%3Cstop offset='.065' stop-color='white' stop-opacity='.8'/%3E%3Cstop offset='.11' stop-color='white'/%3E%3Cstop offset='.89' stop-color='white'/%3E%3Cstop offset='.935' stop-color='white' stop-opacity='.8'/%3E%3Cstop offset='.975' stop-color='white' stop-opacity='.25'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='y' x2='0' y2='1'%3E%3Cstop stop-color='white' stop-opacity='0'/%3E%3Cstop offset='.015' stop-color='white' stop-opacity='.45'/%3E%3Cstop offset='.04' stop-color='white'/%3E%3Cstop offset='.86' stop-color='white'/%3E%3Cstop offset='.93' stop-color='white' stop-opacity='.8'/%3E%3Cstop offset='.975' stop-color='white' stop-opacity='.25'/%3E%3Cstop offset='1' stop-color='white' stop-opacity='0'/%3E%3C/linearGradient%3E%3Cmask id='fade'%3E%3Crect width='1448' height='1086' fill='url(%23y)'/%3E%3C/mask%3E%3C/defs%3E%3Crect width='1448' height='1086' fill='url(%23x)' mask='url(%23fade)'/%3E%3C/svg%3E");
  mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  transform-origin: center;
  animation: birgit-scene-two-shrink 2.8s ease-in-out both;
}

.birgit-scene-two__text {
  position: relative;
  color: #886132;
  font: normal clamp(9px, 1.65vw, 26px)/1.75 "Segoe Script", "Snell Roundhand", "Apple Chancery", cursive;
  text-align: left;
  overflow-wrap: break-word;
}

.birgit-scene-two__text p {
  margin: 0;
  animation: birgit-scene-two-reveal 1.8s ease both;
}

.birgit-scene-two__first {
  font-style: normal;
  animation-delay: 3s !important;
}

.birgit-scene-two__accent {
  color: inherit;
  font: inherit;
}
.birgit-scene-two__second {
  margin-top: 2em !important;
  animation-delay: 8s !important;
}
.birgit-scene-two__third { animation-delay: 14s !important; }

@keyframes birgit-scene-two-reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes birgit-scene-two-shrink {
  from { transform: scale(1.35); }
  to { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .birgit-scene-two__portrait { animation: none; }
}