:root {
  --gap: 0;
  --bg: #d7d7d7;
  --text: #000;
  --base-font-size: clamp(0.82rem, 1vw, 1rem);
  --base-line-height: 1.4;
}

* {
  box-sizing: border-box;
}

html, body{margin:0;padding:0;width:100%;overflow-x:hidden;}

body{margin:0;padding:0;width:100%;overflow-x:hidden;}

.hidden {
  display: none !important;
}


body{margin:0;padding:0;width:100%;overflow-x:hidden;}

body.smart-leaving {
  opacity: 0.08;
}

body.smart-leaving::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: rgba(255,255,255,0.14);
  backdrop-filter: blur(2px);
  animation: smartFadeOverlay 0.95s ease forwards;
  z-index: 9999;
}

body.smart-leaving .poem,
body.smart-leaving .poem-wrap,
body.smart-leaving .textblock,
body.smart-leaving .text-block,
body.smart-leaving main,
body.smart-leaving .page,
body.smart-leaving .poem-frame,
body.smart-leaving .poem-container {
  filter: blur(3px);
  transform: scale(0.992) translateY(-3px);
  opacity: 0.12;
  transition: filter 0.9s ease, transform 0.9s ease, opacity 0.9s ease;
}

body.smart-leaving .bg-layer,
body.smart-leaving .image-layer {
  filter: blur(5px);
  transform: scale(1.01);
  opacity: 0.72;
  transition: filter 0.9s ease, transform 0.9s ease, opacity 0.9s ease;
}

@keyframes smartFadeOverlay {
  0% { opacity: 0; }
  100% { opacity: 1; }
}



/* --- v74 Effekt: 'in meinen leeren Händen' Auflösung --- */
.poem-leere-haende{
    background:white;
    animation:bgToBlack 90s linear forwards;
}

@keyframes bgToBlack{
    0%{background:white;}
    100%{background:black;}
}

.poem-leere-haende .line{
    background:black;
    animation:lineToWhite 90s linear forwards;
}

@keyframes lineToWhite{
    0%{background:black;}
    100%{background:white;}
}

/* Text bleibt schwarz damit er im schwarzen Hintergrund verschwindet */
.poem-leere-haende .poem-text{
    color:#000;
}


body.global-transition-active::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9998;
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.0) 0%, rgba(255,255,255,0.04) 42%, rgba(255,255,255,0.12) 100%);
  animation: smartFadeGlass 0.98s ease forwards;
}

@keyframes smartFadeGlass {
  0% { opacity: 0; transform: scale(1.015); }
  100% { opacity: 1; transform: scale(1); }
}


/* === v149 responsive + transition optimizations === */
:root {
  --page-fade-duration: 1.25s;
  --page-fade-ease: cubic-bezier(.22,.61,.36,1);
  --soft-fade-duration: 1.8s;
  --soft-fade-ease: cubic-bezier(.23,1,.32,1);
  --app-height: 100vh;
  --app-width: 100vw;
}

html {
  min-height: 100%;
  min-height: 100svh;
  min-height: 100dvh;
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scrollbar-gutter: auto;
}

body{margin:0;padding:0;width:100%;overflow-x:hidden;}

img, picture, canvas, video, svg {
  max-width: 100%;
}

body,
.page-flash,
.bg-layer,
.image-layer,
.poem-wrap,
.poem,
.scene,
.layer,
.paper,
.cell span,
.thought,
.main-title,
.subtitle {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}

body,
.page-flash,
.bg-layer,
.image-layer,
.poem-wrap,
.poem,
.layer,
.cell span,
.thought,
.main-title {
  transition-timing-function: var(--soft-fade-ease);
}

body.page-loaded {
  opacity: 1;
}

body.is-entering .bg-layer,
body.is-entering .image-layer,
body.is-entering .poem-wrap,
body.is-entering .layer,
body.is-entering .paper {
  transition-duration: 2.25s;
}

body.is-leaving,
body.smart-leaving {
  transition-duration: var(--page-fade-duration);
  transition-timing-function: var(--page-fade-ease);
}

body.smart-leaving::after {
  background: rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

body.global-transition-active::before {
  -webkit-backdrop-filter: blur(1px);
  backdrop-filter: blur(1px);
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body.smart-leaving::after,
  body.global-transition-active::before {
    background: rgba(255,255,255,0.16);
  }
}

@supports not (height: 100dvh) {
  html, body{margin:0;padding:0;width:100%;overflow-x:hidden;}
}

body,
.scene,
.frame,
main,
canvas,
.fullscreen {
  min-height: var(--app-height);
}

.scene,
.frame,
main,
canvas,
.fullscreen {
  width: 100%;
}

a,
button,
[role="button"],
.cell,
.letter,
.contact-link {
  -webkit-tap-highlight-color: transparent;
}

.is-touch .hint {
  opacity: 0.28 !important;
}

@media (hover: none) and (pointer: coarse) {
  body{margin:0;padding:0;width:100%;overflow-x:hidden;}

  .title,
  .poem-cluster,
  .poem,
  .frame,
  .scene,
  .fullscreen {
    padding-left: max(0px, env(safe-area-inset-left));
    padding-right: max(0px, env(safe-area-inset-right));
  }

  .hint {
    bottom: max(0.75rem, env(safe-area-inset-bottom));
    right: max(0.9rem, env(safe-area-inset-right));
    font-size: 0.78rem;
  }

  .cell,
  .letter,
  .contact-link,
  a,
  button {
    touch-action: manipulation;
  }
}

@media (max-width: 1024px) {
  :root {
    --base-font-size: clamp(0.88rem, 1.45vw, 1rem);
  }
}

@media (max-width: 820px) {
  :root {
    --base-font-size: clamp(0.92rem, 3.2vw, 1rem);
    --base-line-height: 1.46;
  }

  body{margin:0;padding:0;width:100%;overflow-x:hidden;}
}

@media (max-width: 640px) {
  :root {
    --base-font-size: clamp(0.94rem, 3.9vw, 1.02rem);
    --base-line-height: 1.5;
  }

  .title,
  .poem-cluster {
    left: max(0.9rem, env(safe-area-inset-left));
    right: max(0.9rem, env(safe-area-inset-right));
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* --- v154 edge-to-edge + smoother transition overrides --- */
html,
body{
  width:100% !important;
  max-width:100% !important;
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden !important;
}

body,
main,
.scene,
.frame,
.fullscreen,
.page,
.poem-wrap,
.poem,
.image-layer,
.bg-layer,
.layer,
canvas{
  max-width:100% !important;
}

body.smart-leaving::after,
body.global-transition-active::before{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

body.smart-leaving .poem,
body.smart-leaving .poem-wrap,
body.smart-leaving .textblock,
body.smart-leaving .text-block,
body.smart-leaving main,
body.smart-leaving .page,
body.smart-leaving .poem-frame,
body.smart-leaving .poem-container,
body.is-leaving .poem,
body.is-leaving .poem-wrap,
body.is-leaving .textblock,
body.is-leaving .text-block,
body.is-leaving main,
body.is-leaving .page{
  filter:none !important;
  transform:translateY(-2px) scale(0.997) !important;
  opacity:0.16 !important;
  transition:opacity 1.15s cubic-bezier(.22,.61,.36,1), transform 1.15s cubic-bezier(.22,.61,.36,1) !important;
}

body.smart-leaving .bg-layer,
body.smart-leaving .image-layer,
body.is-leaving .bg-layer,
body.is-leaving .image-layer{
  filter:none !important;
  transform:scale(1.004) !important;
  opacity:0.84 !important;
  transition:opacity 1.15s cubic-bezier(.22,.61,.36,1), transform 1.15s cubic-bezier(.22,.61,.36,1) !important;
}

.page-flash{
  transition:opacity 1.05s cubic-bezier(.22,.61,.36,1), background 1.05s cubic-bezier(.22,.61,.36,1) !important;
}


/* --- v155: eliminate scrollbar-induced layout shifts and disable scrolling globally --- */
html,
body{
  overflow:hidden !important;
  overflow-x:hidden !important;
  overflow-y:hidden !important;
  scrollbar-width:none !important;      /* Firefox */
  -ms-overflow-style:none !important;   /* IE / old Edge */
  overscroll-behavior:none !important;
  touch-action:manipulation !important;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar,
main::-webkit-scrollbar,
div::-webkit-scrollbar,
section::-webkit-scrollbar{
  width:0 !important;
  height:0 !important;
  display:none !important;
}

main,
.page,
.scene,
.poem-wrap,
.poem-container{
  overflow:hidden !important;
  max-height:100vh !important;
}