/* Peste / Tagebuchwächter */
@font-face {
  font-family: "DracTitel";
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
  src: local("Crimson Pro"), url("fonts/crimson-pro-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DracTitel";
  font-weight: 200 900;
  font-style: italic;
  font-display: swap;
  src: local("Crimson Pro Italic"), url("fonts/crimson-pro-latin-wght-italic.woff2") format("woff2");
}
@font-face {
  font-family: "DracText";
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  src: local("Raleway"), url("fonts/raleway-latin-wght-normal.woff2") format("woff2");
}
@font-face {
  font-family: "DracText";
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
  src: local("Raleway Italic"), local("Raleway-Italic"), url("fonts/raleway-latin-wght-italic.woff2") format("woff2");
}
:root {
  --void: #0c0811;
  --ink: #0d0a0a;
  --bone: #f1e8d6;
  --ash: #a397a6;
  --red: #e0283a;
  --violet: #b875ff;
  --gold: #ffcf7a;
  --water: #8fd3e8;
  --f-title: "DracTitel", "Crimson Pro", "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --f-text: "DracText", "Raleway", "Segoe UI", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
  --u: clamp(4.2px, 1.15vw, 5px);
  --ui-line: rgba(233,225,208,.14);
  --ui-line-hi: rgba(233,225,208,.32);
  --ui-fill: rgba(255,255,255,.035);
  --ui-fill-hi: rgba(255,255,255,.075);
  --ui-r: 12px;
  --knopf-schrift: 600 11px/1 var(--f-text);
  --knopf-sperr: .14em;
  --knopf-h: 38px;
  --knopf-b: 132px;
}
* { box-sizing: border-box; }
html,
body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  color: var(--bone);
}
html { background: var(--void); }
body {
  font: 15px/1.45 var(--f-text);
  font-variant-numeric: lining-nums;
  padding-left: max(8px, env(safe-area-inset-left, 0px));
  padding-right: max(8px, env(safe-area-inset-right, 0px));
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  background: radial-gradient(ellipse 60% 45% at 50% 48%, rgba(184,117,255,.13), rgba(0,0,0,0) 70%), radial-gradient(ellipse 40% 30% at 50% 88%, rgba(224,40,58,.10), rgba(0,0,0,0) 70%), var(--void);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  transition: background 2s;
  background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0) 35%, rgba(0,0,0,.6) 100%);
}
body.focus::after { background: radial-gradient(circle at 50% 42%, rgba(0,0,0,0) 20%, rgba(10,8,12,.94) 58%); }
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--violet); outline-offset: 3px; border-radius: 50%; }
.wrap {
  --w: min(100cqw, 100cqh * 2048 / 2500, 680px);
  --kreis-schrift: max(16px, calc(var(--w) * .026));
  --kreis-klein: calc(var(--w) * .012);
  container-type: size;
  height: 100%;
  display: grid;
  justify-items: center;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  grid-template-rows: minmax(0, 1fr) auto;
}
@media (max-width: 560px) and (orientation: portrait) {
  body { padding: env(safe-area-inset-top, 0px) 0 0; }
}
.layer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.screen {
  position: absolute;
  left: 22.381%;
  top: 20%;
  width: 62.381%;
  height: 54.333%;
  overflow: hidden;
  background: radial-gradient(ellipse 70% 60% at 50% 45%, #3a1229 0%, #1b0b1d 45%, #0a060c 100%);
  box-shadow: inset 0 0 30px rgba(0,0,0,.9);
}
.screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .25s;
  background: radial-gradient(ellipse 18% 60% at 50% 45%, rgba(255,80,70,.95), rgba(224,40,58,.6) 40%, rgba(120,0,20,0) 75%);
}
.motes i {
  position: absolute;
  bottom: -6%;
  width: 1.6%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 0 6px 1px var(--gold);
  opacity: 0;
  animation: mote 9s linear infinite;
}
.motes i:nth-child(2n) { background: var(--violet); box-shadow: 0 0 6px 1px var(--violet); }
.motes i:nth-child(3n) { background: #ff6b7a; box-shadow: 0 0 6px 1px #ff6b7a; width: 1.1%; }
.motes i:nth-child(1) { left: 14%; animation-delay: 0s; }
.motes i:nth-child(2) { left: 28%; animation-delay: -2.2s; }
.motes i:nth-child(3) { left: 41%; animation-delay: -5.1s; }
.motes i:nth-child(4) { left: 57%; animation-delay: -1.3s; }
.motes i:nth-child(5) { left: 69%; animation-delay: -6.6s; }
.motes i:nth-child(6) { left: 82%; animation-delay: -3.7s; }
.motes i:nth-child(7) { left: 35%; animation-delay: -7.9s; }
.motes i:nth-child(8) { left: 63%; animation-delay: -4.4s; }
@keyframes mote { 0% { transform: translate(0, 0); opacity: 0; } 15% { opacity: .9; } 50% { transform: translate(6px, -60cqw); } 85% { opacity: .6; } 100% { transform: translate(-4px, -110cqw); opacity: 0; } }
.scr-body { position: absolute; inset: 0; }
.sprite {
  position: absolute;
  width: 82%;
  left: 9%;
  top: 5%;
  transform: translateX(var(--x, 0%));
  filter: drop-shadow(0 0 10px rgba(224,40,58,.25));
  transition: width 1.4s ease, left 1.4s ease, top 1.4s ease, opacity 1.4s ease, transform 1.6s ease-in-out, filter 1.4s;
}
.sprite.bob { animation: bob 4.5s ease-in-out infinite; }
@keyframes bob { 0%,100% { translate: 0 0; } 50% { translate: 0 -2.5%; } }
.sprite.small { width: 40%; left: 30%; top: 31%; transform: none; }
.scr-title {
  position: absolute;
  top: 3%;
  left: 0;
  right: 0;
  text-align: center;
  font: 5.2cqw/1 var(--f-title);
  color: var(--bone);
  text-shadow: 0 0 10px rgba(184,117,255,.6);
  opacity: 0;
  transition: opacity .3s;
  pointer-events: none;
}
.panel {
  position: absolute;
  inset: 13% 6% 4%;
  display: grid;
  align-content: start;
  gap: calc(1.6 * var(--u));
  font-size: calc(3.3 * var(--u));
  overflow-y: auto;
  scrollbar-width: none;
  -webkit-mask-image: linear-gradient(180deg, #000 88%, transparent);
  mask-image: linear-gradient(180deg, #000 88%, transparent);
  padding-bottom: 6%;
}
.panel::-webkit-scrollbar { display: none; }
.panel .row { display: flex; justify-content: space-between; align-items: center; gap: calc(2 * var(--u)); }
.panel .k { text-transform: uppercase; letter-spacing: .12em; font-weight: 600; font-size: calc(2.7 * var(--u)); color: var(--bone); }
.panel .v { color: var(--ash); font-style: italic; }
.opt { display: grid; gap: 0; }
.opt.cur { box-shadow: inset 0 0 0 1px rgba(224,40,58,.6); }
.opt small { font-size: calc(2.9 * var(--u)); }
.drops { display: flex; flex-wrap: wrap; gap: calc(1.5 * var(--u)); justify-content: center; }
.drops i {
  width: calc(3 * var(--u));
  height: calc(4 * var(--u));
  border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
  border: 1px solid var(--water);
  opacity: .5;
}
.drops i.on { background: var(--water); opacity: 1; box-shadow: 0 0 6px var(--water); }
.big { text-align: center; font: calc(7 * var(--u))/1 var(--f-title); color: var(--bone); text-shadow: 0 0 12px rgba(184,117,255,.6); }
.big.water { color: var(--water); font-family: var(--f-text); font-size: calc(6 * var(--u)); text-shadow: 0 0 10px rgba(143,211,232,.5); }
.panel p { margin: 0; }
.panel a { color: var(--gold); white-space: nowrap; }
.center { text-align: center; }
.muted { color: var(--ash); font-style: italic; }
.write { width: 100%; resize: none; -webkit-user-select: text; user-select: text; }
.dissolve { margin-top: calc(4 * var(--u)); text-align: center; color: #ee1d2a; text-shadow: 0 0 10px rgba(238,29,42,.45); }
.dissolve span { animation: dissolve 1.1s ease-in forwards; white-space: pre-wrap; }
@keyframes dissolve { to { opacity: 0; filter: blur(4px); color: var(--red); } }
.light-item { font-size: calc(3.1 * var(--u)); padding-left: calc(3.4 * var(--u)); position: relative; color: #e6dac4; }
.light-item::before {
  content: "";
  position: absolute;
  left: calc(.4 * var(--u));
  top: .5em;
  width: calc(1.5 * var(--u));
  height: calc(1.5 * var(--u));
  transform: rotate(45deg);
  background: var(--gold);
  box-shadow: 0 0 6px var(--gold);
}
.opt.mood { grid-template-columns: auto 1fr; align-items: center; gap: calc(2.4 * var(--u)); padding-left: calc(2 * var(--u)); }
.mdot { display: inline-block; width: calc(2.7 * var(--u)); height: calc(2.7 * var(--u)); transform: rotate(45deg); border-radius: 1px; }
.plan-line { font-size: calc(3.2 * var(--u)); color: #e6dac4; }
.ring {
  position: absolute;
  left: 53.57%;
  top: 47.2%;
  width: 46%;
  aspect-ratio: 1;
  translate: -50% -50%;
  border-radius: 50%;
  pointer-events: none;
  border: 2px solid var(--red);
  box-shadow: 0 0 24px rgba(224,40,58,.5), inset 0 0 18px rgba(184,117,255,.35);
  transform: scale(.6);
  transition-property: transform;
  transition-timing-function: ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
  .motes i,
  .sprite.bob {
    animation: none;
  }
  .motes { display: none; }
  .sprite { transition: none; }
  .dissolve span { animation-duration: .6s; }
}
.sprite::before { content: ""; display: block; padding-top: 100%; }
.sprite > img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  max-width: none;
  display: block;
  overflow: visible;
}
.sprite.tappable { cursor: pointer; }
.opt.off { opacity: .45; }
.opt .tag {
  font-style: italic;
  font-variant: normal;
  letter-spacing: 0;
  font-size: calc(2.6 * var(--u));
  color: #b9d79c;
  margin-left: calc(2 * var(--u));
}
.opt:focus-visible { border-radius: calc(2 * var(--u)); }
.month { display: grid; gap: calc(2 * var(--u)); }
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: calc(.9 * var(--u)); }
.cal .wd { text-align: center; font-size: calc(2.1 * var(--u)); color: var(--ash); text-transform: uppercase; letter-spacing: .08em; }
.cal .c {
  position: relative;
  aspect-ratio: 1;
  border-radius: calc(1.4 * var(--u));
  background: rgba(255,255,255,.05);
  display: grid;
  place-items: start center;
  padding-top: calc(.4 * var(--u));
  overflow: hidden;
}
.cal .c.has { background: var(--mc); }
.cal .c.has b { color: #120c14; text-shadow: 0 0 2px rgba(255,255,255,.4); }
.cal .c.empty { background: none; }
.cal .c.today { box-shadow: inset 0 0 0 1.5px var(--bone); }
.cal .c b { font-size: calc(2.4 * var(--u)); font-weight: 400; line-height: 1; color: #cbbfd0; }
.cal .marks { position: absolute; left: 0; right: 0; bottom: calc(.5 * var(--u)); display: flex; justify-content: center; gap: calc(.5 * var(--u)); }
.cal .marks u { width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); display: block; }
.cal .marks .w { border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%; border: 1px solid var(--water); background: rgba(143,211,232,.15); }
.cal .marks .o { border-radius: 50%; border: 1.5px solid #9bc27a; }
.cal .marks .l { background: var(--gold); transform: rotate(45deg) scale(.85); }
.cal .c.has .marks u { filter: drop-shadow(0 0 1px #000); }
.mbar { display: flex; height: calc(2.4 * var(--u)); border-radius: 99px; overflow: hidden; background: rgba(255,255,255,.06); }
.mbar i { flex-basis: 0; }
.mbar i.none { flex-grow: 1; }
.mleg {
  display: flex;
  flex-wrap: wrap;
  gap: calc(.6 * var(--u)) calc(2.4 * var(--u));
  font-size: calc(2.6 * var(--u));
  color: #d9cdbb;
  justify-content: center;
}
.mleg span { display: inline-flex; align-items: center; gap: calc(1 * var(--u)); }
.mleg .zero { opacity: .45; }
.mleg .mdot { width: calc(2 * var(--u)); height: calc(2 * var(--u)); }
.mstats { display: grid; grid-template-columns: repeat(5, 1fr); gap: calc(1 * var(--u)); text-align: center; }
.mstats span { display: grid; }
.mstats b { font: calc(4.4 * var(--u))/1.1 var(--f-title); color: var(--bone); font-weight: 400; }
.mstats small { font-size: calc(2.3 * var(--u)); color: var(--ash); font-style: italic; }
.mkey { font-size: calc(2.4 * var(--u)); }
@media print {
  @page { size: A4; margin: 16mm 15mm; }
  :root { color-scheme: light; }
  html,
  body {
    height: auto;
    overflow: visible;
    background: #fff !important;
    color: #1d1620;
  }
  body { padding: 0; }
  body::after { display: none; }
  .wrap { display: none !important; }
}
.day {
  width: min(100%, 540px);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  position: relative;
  z-index: 2;
  padding: max(6px, env(safe-area-inset-top, 0px)) 6px 0;
}
.word { font-size: 16px; }
.word.main { font-style: normal; font-family: var(--f-title); font-size: 18px; }
.opt { cursor: pointer; position: relative; box-shadow: none !important; }
.opt::before { content: ""; position: absolute; transform: rotate(45deg); border: 1px solid rgba(184,117,255,.6); transition: background .2s; }
.opt:hover::before,
.opt.cur::before {
  background: var(--red);
  border-color: var(--red);
  box-shadow: 0 0 6px var(--red);
}
.opt:hover .k,
.opt.cur .k {
  color: #fff;
  text-shadow: 0 0 8px rgba(224,40,58,.6);
}
.opt.worry .k { color: var(--gold); }
.opt.mood::before { display: none; }
.opt.mood.chosen .k { text-underline-offset: calc(.5 * var(--u)); text-decoration-color: var(--red); text-decoration: none; }
.sep { margin: calc(1.4 * var(--u)) 0 0 !important; font-size: calc(2.9 * var(--u)); }
.bdate { color: var(--ash); font-style: italic; }
.link {
  border: 0;
  background: none;
  padding: calc(1 * var(--u)) calc(2 * var(--u));
  font-size: calc(3.2 * var(--u));
  color: #cdbfd8;
  font-style: italic;
}
.link.gold { color: var(--gold); justify-self: start; padding-left: 0; }
.link.dim { opacity: .25; pointer-events: none; }
.tabs { display: flex; justify-content: center; gap: calc(1 * var(--u)); margin-top: calc(-1 * var(--u)); }
.tabs .link { text-transform: uppercase; font-style: normal; font-weight: 600; letter-spacing: .12em; }
.tabs .link.on { text-underline-offset: calc(1 * var(--u)); text-decoration-color: var(--red); }
.mnav { display: flex; justify-content: center; align-items: center; gap: calc(3 * var(--u)); }
.mnav .link { font-style: normal; }
.mname { font: calc(4.4 * var(--u))/1 var(--f-title); color: var(--bone); }
.scene-clip { width: 100%; height: 100%; position: relative; overflow: hidden; container-type: size; }
.scene { position: absolute; left: 50%; width: var(--w); margin-left: calc(var(--w) / -2); }
.props { overflow: visible; pointer-events: none; }
.sky .sun { fill: none; stroke: #ffcf7a; stroke-width: 7; stroke-linecap: round; opacity: 0; transition: opacity 1.5s; }
.sky .sun circle { fill: rgba(255,207,122,.18); }
.sky .moon { fill: #e9dccb; opacity: .85; transition: opacity 1.5s; }
.sky .stars circle { fill: #e9dccb; opacity: .5; animation: twinkle 4s ease-in-out infinite; }
.sky .stars circle:nth-child(2n) { animation-delay: -2s; }
@keyframes twinkle { 50% { opacity: .15; } }
.scene:not(.night) .sky .sun { opacity: .9; }
.scene:not(.night) .sky .moon,
.scene:not(.night) .sky .stars {
  opacity: 0;
}
.scene.walked .sky { filter: drop-shadow(0 0 14px rgba(255,207,122,.7)); }
.windows ellipse { fill: var(--mood); opacity: 0; transition: opacity 1.2s, fill 1.2s; }
.scene.mooded .windows ellipse { opacity: .95; }
.kerzenlicht ellipse { fill: #ffb24a; opacity: 0; transition: opacity 1s; }
.scene.lit .kerzenlicht ellipse { opacity: .55; }
.pokal .water {
  fill: #8fd3e8;
  stroke: none;
  opacity: .75;
  transform-box: fill-box;
  transform-origin: 50% 100%;
  transform: scaleY(var(--water, 0));
  transition: transform 1s ease;
}
.schale .glow { fill: #ff6b7a; stroke: none; opacity: 0; }
.scene.lockruf .schale .glow { animation: glimm 3.6s ease-in-out infinite; }
@keyframes glimm { 50% { opacity: .55; } }
.sand rect { fill: #e9c27a; stroke: none; transform-box: fill-box; }
.sand .s-top { transform-origin: 50% 100%; transform: scaleY(1); }
.sand .s-bot { transform-origin: 50% 100%; transform: scaleY(.08); }
.sand .s-fall { stroke: #e9c27a; stroke-width: 4; stroke-dasharray: 6 10; opacity: 0; }
.scene.breathed .sand .s-top { transform: scaleY(.08); }
.scene.breathed .sand .s-bot { transform: scaleY(1); }
.scene.breathing .sand .s-top { transform: scaleY(.04); transition: transform var(--sand, 60s) linear; }
.scene.breathing .sand .s-bot { transform: scaleY(1); transition: transform var(--sand, 60s) linear; }
.scene.breathing .sand .s-fall { opacity: 1; animation: fall .5s linear infinite; }
@keyframes fall { to { stroke-dashoffset: -16; } }
.scene .screen { border-radius: 1.5%; container-type: inline-size; transition: opacity 1.5s, background 1.5s; }
.scene .sprite { width: 90%; left: 5%; top: 2%; }
.hot { position: absolute; border: 0; padding: 0; background: none; border-radius: 40%; cursor: pointer; }
.hot .tip {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  white-space: nowrap;
  pointer-events: none;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: #fff4e0;
  padding: 4px 10px;
  border-radius: 99px;
  background: rgba(20,10,24,.78);
  box-shadow: 0 0 12px rgba(184,117,255,.55);
  opacity: 0;
  transition: opacity .3s;
}
.hot:hover .tip,
.hot:focus-visible .tip,
body.show-names .hot .tip {
  opacity: 1;
}
.hot:hover,
.hot:focus-visible {
  background: radial-gradient(closest-side, rgba(255,207,122,.18), rgba(255,207,122,0));
}
.hot:active { background: radial-gradient(closest-side, rgba(255,207,122,.3), rgba(255,207,122,0)); }
.hot.on { background: radial-gradient(closest-side, rgba(224,40,58,.22), rgba(224,40,58,0)); }
.scene:not(.alive) .h-schale { cursor: default; }
.names {
  position: absolute;
  right: max(10px, env(safe-area-inset-right, 0px));
  top: max(10px, env(safe-area-inset-top, 0px));
  z-index: 4;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 50%;
  background: rgba(20,10,24,.5);
  color: #b8a8c4;
  display: grid;
  place-items: center;
}
.names svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
body.show-names .names { color: var(--gold); }
.wrap { position: relative; }
.sheet { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.sheet > .panel { grid-row: 2; }
.sheet > .ctx { grid-row: 3; }
.sheet .scr-title {
  position: static;
  opacity: 1;
  font: 26px/1.1 var(--f-title);
  text-align: center;
  margin: 0 0 6px;
  color: var(--bone);
  text-shadow: 0 0 10px rgba(184,117,255,.5);
}
.sheet .panel {
  position: static;
  inset: auto;
  overflow-y: auto;
  -webkit-mask-image: none;
  mask-image: none;
  scrollbar-gutter: stable;
  padding-right: 2px;
}
.sheet .ctx { display: flex; justify-content: center; align-items: center; }
.sheet .big { font-size: 30px; }
body.sheet-open .names { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .sky .stars circle { animation: none; }
  .sheet { animation: none; }
}
.scene .sprite.glow { width: 74%; left: 13%; top: 10%; }
.sprite.glow::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle at 50% 56%, rgba(255,120,100,.95) 0%, rgba(232,40,58,.7) 16%, rgba(150,12,34,.38) 38%, rgba(90,0,20,0) 66%);
  filter: blur(3px);
  animation: glowAtem 6s ease-in-out infinite;
  transition: opacity 1.5s, transform 1.5s, filter 1.5s;
}
@keyframes glowAtem { 0%,100% { transform: scale(.92); opacity: .78; } 50% { transform: scale(1.04); opacity: 1; } }
@keyframes glowGier { 0%,100% { transform: scale(.95); opacity: .85; } 50% { transform: scale(1.12); opacity: 1; filter: blur(2px) brightness(1.25); } }
.sprite.glow.g-sog::after { animation: glowGier 2.6s ease-in-out infinite; }
.sprite.glow.g-verzehren::after { animation: none; transform: scale(1.3); opacity: 1; filter: blur(1px) brightness(1.5); }
.sprite.glow.g-stille::after { animation-duration: 10s; opacity: .25; }
.sprite.glow.g-gleichgewicht::after { animation-duration: 8s; filter: blur(5px) hue-rotate(12deg); }
.sprite.glow.g-augen::after { transform: scale(.55); opacity: .55; animation: glowAtem 7s ease-in-out infinite; }
.sprite.glow.fx-gaze::after { filter: blur(1px) brightness(1.6); transform: scale(1.12); }
.sprite.glow.fx-emerge::after { animation: glowEmerge 2s ease-out; }
@keyframes glowEmerge { from { transform: scale(.1); opacity: 0; } }
.pest-holder { position: absolute; aspect-ratio: 1; pointer-events: none; }
.pest-holder svg { display: block; overflow: visible; filter: drop-shadow(-1px -1px 1px rgba(255,214,170,.3)) drop-shadow(-6px -1px 5px rgba(255,170,90,.24)); }
.h-pest { z-index: 2; }
.pest g { transition: transform .45s ease, opacity .25s; }
.pest .p-augen-zu,
.pest .p-mund-offen {
  opacity: 0;
}
.pest .p-leib { animation: pAtem 3.8s ease-in-out infinite; }
@keyframes pAtem { 50% { transform: scale(1.012, 1.018); } }
.pest .p-ohr-l { animation: pOhrL 9s ease-in-out infinite; }
.pest .p-ohr-r { animation: pOhrR 13s ease-in-out infinite; }
@keyframes pOhrL { 0%,90%,100% { transform: rotate(0); } 93% { transform: rotate(-14deg); } 96% { transform: rotate(3deg); } }
@keyframes pOhrR { 0%,86%,100% { transform: rotate(0); } 89% { transform: rotate(16deg); } 92% { transform: rotate(-3deg); } }
.pest .p-bart-l { animation: pBartL 7s ease-in-out infinite; }
.pest .p-bart-r { animation: pBartR 8s ease-in-out infinite; }
@keyframes pBartL { 0%,80%,100% { transform: rotate(0); } 84% { transform: rotate(5deg); } 88% { transform: rotate(-2deg); } }
@keyframes pBartR { 0%,76%,100% { transform: rotate(0); } 80% { transform: rotate(-5deg); } 84% { transform: rotate(2deg); } }
.pest .p-kopf { animation: pKopf 12s ease-in-out infinite; }
@keyframes pKopf { 0%,100% { transform: rotate(0); } 30% { transform: rotate(-2.5deg); } 65% { transform: rotate(2deg); } }
.pest .p-auge { transition: transform .09s ease; }
.pest.blink .p-auge { transform: scaleY(.08); }
.pest.ps-blinzeln .p-auge { transform: scaleY(.35); transition-duration: .7s; }
.pest.ps-blinzeln .p-kopf { animation: none; transform: rotate(-4deg); }
.pest.ps-gekrault .p-augen-offen,
.pest.ps-schlaf .p-augen-offen,
.pest.ps-gaehnen .p-augen-offen {
  opacity: 0;
}
.pest.ps-gekrault .p-augen-zu,
.pest.ps-schlaf .p-augen-zu,
.pest.ps-gaehnen .p-augen-zu {
  opacity: 1;
}
.pest.ps-gekrault .p-kopf { animation: pKraul 1.6s ease-in-out infinite; }
@keyframes pKraul { 0%,100% { transform: rotate(9deg); } 50% { transform: rotate(13deg); } }
.pest.ps-gekrault .p-ohr-l { animation: none; transform: rotate(-12deg); }
.pest.ps-gekrault .p-ohr-r { animation: none; transform: rotate(10deg); }
.pest.ps-schlaf .p-kopf { animation: none; transform: translateY(14px) rotate(7deg); }
.pest.ps-schlaf .p-leib { animation-duration: 6s; }
.pest.ps-schlaf .p-ohr-l,
.pest.ps-schlaf .p-ohr-r {
  animation: none;
}
.pest.ps-neugierig .p-kopf { animation: none; transform: rotate(-10deg); }
.pest.ps-neugierig .p-auge { transform: scale(1.14); }
.pest.ps-neugierig .p-ohr-l { animation: none; transform: rotate(6deg); }
.pest.ps-neugierig .p-ohr-r { animation: none; transform: rotate(-6deg); }
.pest.ps-misstrauisch .p-ohr-l { animation: none; transform: rotate(-30deg); }
.pest.ps-misstrauisch .p-ohr-r { animation: none; transform: rotate(30deg); }
.pest.ps-misstrauisch .p-auge { transform: scaleY(.55); }
.pest.ps-misstrauisch .p-augen-offen { filter: drop-shadow(0 0 4px #e3262b) drop-shadow(0 0 10px #e3262b); }
.pest.ps-misstrauisch .p-kopf { animation: none; transform: rotate(-5deg) translateX(-6px); }
.pest.ps-gaehnen .p-kopf { animation: none; transform: rotate(-7deg) translateY(-4px); }
@media (prefers-reduced-motion: reduce) {
  .pest *,
  .sprite.glow::after {
    animation: none !important;
  }
}
.pest .p-arm-r-vorn { opacity: 0; }
.pest .p-arm-r-vorn .p-unterarm-r { filter: drop-shadow(-1px -1px 1px rgba(255,214,170,.3)) drop-shadow(-6px -1px 5px rgba(255,170,90,.24)); }
.pest .p-zunge { opacity: 0; }
.pest .p-arm-r-vorn,
.pest .p-arm-r-vorn .p-unterarm-r {
  transition: transform .5s ease, opacity .2s;
}
.pest.ps-putzen .p-arm-r { opacity: 0; }
.pest.ps-putzen .p-arm-r-vorn { opacity: 1; transform: rotate(14deg); }
.pest.ps-putzen .p-arm-r-vorn .p-unterarm-r { transform: rotate(152deg); animation: pLecken .9s ease-in-out .5s infinite; }
@keyframes pLecken { 0%,100% { transform: rotate(152deg); } 50% { transform: rotate(160deg) translateY(4px); } }
.pest.ps-putzen .p-zunge { animation: pZunge .9s ease-in-out .5s infinite; }
@keyframes pZunge { 0%,40%,100% { opacity: 0; } 55%,80% { opacity: 1; } }
.pest.ps-putzen .p-kopf { animation: pPutzKopf .9s ease-in-out .5s infinite; transform: rotate(9deg) translate(6px, 8px); }
@keyframes pPutzKopf { 0%,100% { transform: rotate(9deg) translate(6px, 8px); } 50% { transform: rotate(12deg) translate(8px, 11px); } }
.pest.ps-putzen .p-ohr-l,
.pest.ps-putzen .p-ohr-r {
  animation: none;
}
.handlayer {
  pointer-events: none;
  z-index: 3;
  overflow: visible;
  opacity: 0;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.85)) drop-shadow(0 0 2px rgba(0,0,0,.6));
}
.props .gabe { fill: #ffd0a0; opacity: 0; filter: drop-shadow(0 0 8px #ff7a50) drop-shadow(0 0 16px #e3262b); transition: opacity .4s; }
.props .gabe.on { opacity: 1; animation: gabe 1.2s ease-in-out infinite; }
@keyframes gabe { 50% { transform: translateY(-6px); } }
.breath-txt { position: absolute; translate: -50% -50%; z-index: 4; pointer-events: none; white-space: nowrap; }
.scene { aspect-ratio: 2048 / 3000; }
.scene .art { filter: none; mix-blend-mode: normal; object-fit: contain; transition: filter .6s ease; }
.scene .art.vorn { z-index: 2; pointer-events: none; }
.props-vorn { z-index: 2; pointer-events: none; overflow: visible; }
.windows { pointer-events: none; }
.windows rect { fill: #3a2418; transition: fill 1.2s; }
.scene.mooded .windows rect { fill: var(--mood); }
.scene.night:not(.mooded) .windows rect { fill: #24160f; }
.props-vorn .kerzenlicht ellipse { fill: #ffb24a; opacity: .18; transition: opacity 1s; }
.scene.lit .props-vorn .kerzenlicht ellipse { opacity: .6; animation: kerzeGlut 3.2s ease-in-out infinite; }
@keyframes kerzeGlut { 50% { opacity: .45; } }
.props-vorn .sanduhrlicht ellipse { fill: #c9a7ff; opacity: 0; transition: opacity 1s; }
.scene.breathed .props-vorn .sanduhrlicht ellipse { opacity: .2; }
.scene.breathing .props-vorn .sanduhrlicht ellipse { animation: sandGlut 5s ease-in-out infinite; }
@keyframes sandGlut { 0%,100% { opacity: .15; } 50% { opacity: .5; } }
.props .schale .glow { fill: #ff6b7a; }
.scene .ring { left: 48.05%; top: 48.27%; width: 34%; }
.breath-txt { left: 48.05%; top: 48.27%; }
.pest-holder { left: 56.2%; top: 46.7%; width: 37.1%; z-index: 1; }
.hot { z-index: 5; }
.h-himmel { left: 2%; width: 46%; }
.h-turm { left: 50.7%; top: 13%; width: 44%; height: 14%; }
.h-schale { left: 31.8%; top: 26.1%; width: 14.1%; height: 6%; }
.h-sanduhr { left: 16.5%; top: 56.3%; width: 9.6%; height: 9.8%; }
.h-buch { left: 21.6%; top: 62%; width: 37%; height: 17.5%; }
.h-kerze { left: 59.1%; top: 65.3%; width: 7.6%; height: 13.3%; }
.h-pokal { left: 75.9%; top: 65.3%; width: 9.8%; height: 10.5%; }
.h-schluessel { left: 34.5%; top: 81%; width: 13.3%; height: 4%; }
.h-pest { left: 66%; top: 49.5%; width: 17%; height: 15.5%; }
.scene {
  top: calc(50cqh - var(--w) * 1550 / 2048);
  translate: none;
}
.h-himmel { top: 10.5%; height: 14%; }
.flamme { transform-origin: 1283px 1975px; animation: flackern 1.6s ease-in-out infinite; }
.flamme .f-aussen { fill: #ff9a3c; opacity: .9; filter: drop-shadow(0 0 10px #ff8a2a); }
.flamme .f-innen { fill: #ffe08a; }
.flamme .f-kern { fill: #fffbea; }
@keyframes flackern { 0%,100% { transform: scale(1, 1) skewX(0); } 25% { transform: scale(.94, 1.06) skewX(2deg); } 50% { transform: scale(1.04, .95) skewX(-2deg); } 75% { transform: scale(.97, 1.03) skewX(1deg); } }
.scene:not(.lit) .flamme { opacity: .75; transform-origin: 1283px 1975px; scale: .8; }
.scene.lit .flamme .f-aussen { filter: drop-shadow(0 0 16px #ffae4a) drop-shadow(0 0 30px #ff7a20); }
.runen { position: absolute; left: 25%; top: 61%; width: 36%; height: 12%; z-index: 3; pointer-events: none; overflow: visible; }
.rune {
  position: absolute;
  height: auto;
  opacity: 0;
  translate: -50% -50%;
  animation: runeSteig 6s ease-in-out forwards;
  width: 12%;
  filter: brightness(2.4) saturate(1.5) drop-shadow(0 0 5px #ff6a5a) drop-shadow(0 0 14px #e3262b);
}
@keyframes runeSteig { 0% { opacity: 0; transform: translate(0, 0) rotate(0) scale(calc(var(--s) * .7)); } 20% { opacity: .95; } 70% { opacity: .7; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) rotate(var(--rot)) scale(var(--s)); } }
.moodgrid { display: grid; grid-template-columns: 1fr 1fr; }
.moodgrid .opt.mood { display: grid; grid-template-columns: auto 1fr; column-gap: calc(1.6 * var(--u)); align-items: center; text-align: left; }
.moodgrid .opt.mood .mdot { grid-column: 1; }
.moodgrid .opt.mood .k { grid-column: 2; justify-self: start; text-align: left; }
.moodgrid .opt.mood small { grid-column: 1 / -1; padding-left: calc(3.4 * var(--u)); }
.sand-fluss .s-strahl {
  stroke: #ead2a8;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 5 7;
  opacity: .75;
  animation: strahl .6s linear infinite;
}
@keyframes strahl { to { stroke-dashoffset: -12; } }
.sand-fluss .korn { fill: #f1dcb4; opacity: 0; animation: korn 1.1s linear infinite; }
.sand-fluss .k2 { animation-delay: -.37s; }
.sand-fluss .k3 { animation-delay: -.74s; }
@keyframes korn { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translate(0, 72px); } }
.sand-fluss .s-haufen { fill: #e6caa0; opacity: .85; transform-origin: 437px 1934px; animation: haufen 24s ease-in-out infinite alternate; }
@keyframes haufen { from { transform: scale(.85, .7); } to { transform: scale(1.05, 1.15); } }
.scene.breathing .sand-fluss .s-strahl { stroke-width: 4.5; opacity: 1; animation-duration: .35s; }
.scene.breathing .sand-fluss .korn { animation-duration: .7s; }
@media (prefers-reduced-motion: reduce) {
  .sand-fluss * { animation: none !important; }
}
.sky-line {
  position: absolute;
  left: 19.5%;
  top: 10.5%;
  z-index: 4;
  margin: 0;
  pointer-events: none;
  line-height: 1.38;
  font-style: italic;
  color: #ece2d2;
  text-shadow: 0 1px 3px rgba(0,0,0,.9);
}
.sky-line.neu { animation: inschrift 1.6s ease-out; }
@keyframes inschrift { from { opacity: 0; filter: blur(4px); transform: translateY(6px); } }
.sky-line.s-nichts {
  color: #ffb3b3;
  letter-spacing: .03em;
  text-shadow: 0 0 8px rgba(227,38,43,.85), 0 0 20px rgba(160,10,30,.6), 0 1px 3px #000;
  animation: kraeuseln 6s ease-in-out infinite;
  text-align: center;
}
.sky-line.s-nichts.neu { animation: inschrift 1.8s ease-out, kraeuseln 6s ease-in-out 1.8s infinite; }
@keyframes kraeuseln { 50% { text-shadow: 0 0 12px rgba(227,38,43,.95), 0 0 28px rgba(160,10,30,.7), 0 1px 3px #000; } }
.sky-line.s-pest { color: #ffe3a8; text-shadow: 0 0 8px rgba(255,170,70,.6), 0 1px 3px #000; }
.sky-line.oracle { font-family: var(--f-title); font-style: normal; color: #ffd0d0; }
.funke {
  position: absolute;
  width: .9%;
  aspect-ratio: 1;
  border-radius: 50%;
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  animation: funkeSteig 2.4s ease-out forwards;
}
.funke.f-pest { background: #ffd27a; box-shadow: 0 0 6px #ffb347, 0 0 12px #ff9a3c; }
.funke.f-nichts { background: #ff6a5a; box-shadow: 0 0 6px #e3262b, 0 0 14px #b3141d; }
@keyframes funkeSteig { 0% { opacity: 0; transform: translate(0, 0); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), -18cqw); } }
.props-vorn .pokal .water {
  fill: url(#wasserTiefe);
  opacity: .5;
  transform-box: view-box;
  transform-origin: 0 2130px;
  transform: scaleY(var(--water, 0));
  transition: transform 1.2s cubic-bezier(.3,1.4,.5,1);
}
.props-vorn .pokal .surface { transition: transform 1.2s cubic-bezier(.3,1.4,.5,1); opacity: min(1, calc(var(--water, 0) * 8)); }
.props-vorn .pokal .surface ellipse {
  fill: #d9f4ff;
  opacity: .55;
  transform-box: fill-box;
  transform-origin: center;
  animation: schwappen 3.4s ease-in-out infinite;
}
.props-vorn .pokal .surface path {
  fill: none;
  stroke: #f2fbff;
  stroke-width: 2.5;
  opacity: .8;
  stroke-linecap: round;
  animation: schwappen 3.4s ease-in-out -1.7s infinite;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes schwappen { 0%,100% { transform: scale(1, 1) translateY(0); } 50% { transform: scale(1, 1.6) translateY(-1px); } }
.sky-line.s-nichts.oracle { top: 34%; }
.sky-line.s-pest { top: auto; bottom: 52.5%; text-align: center; }
.sky-line {
  font-size: max(10px, calc(var(--w) * .021));
  width: max-content;
  border-radius: 12px;
  background: rgba(20,10,24,.62);
  box-shadow: 0 0 12px rgba(184,117,255,.35);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  text-wrap: balance;
  box-sizing: border-box;
}
.sky-line:empty { display: none; }
.sky-line.s-welt,
.sky-line:not(.s-nichts):not(.s-pest) {
  max-width: 33%;
  left: 48%;
  top: 35.5%;
  translate: -50% 0;
  text-align: center;
}
.sky-line.s-nichts {
  left: 48%;
  top: 35.5%;
  translate: -50% 0;
  max-width: 31%;
  width: max-content;
  box-shadow: 0 0 14px rgba(227,38,43,.45);
  background: rgba(24,6,10,.55);
}
.sky-line.s-pest { left: 74%; translate: -50% 0; max-width: 34%; width: max-content; box-shadow: 0 0 12px rgba(255,170,70,.35); }
.sky-line.oracle { font-size: max(11.5px, calc(var(--w) * .026)); }
.h-pest .tip { top: 74%; }
.sheet .month { gap: calc(1.4 * var(--u)); }
.sheet .cal .c { border-radius: calc(1 * var(--u)); aspect-ratio: 1; }
.sheet .cal .marks { bottom: calc(.3 * var(--u)); }
.sheet .cal .marks u { width: calc(1.2 * var(--u)); height: calc(1.2 * var(--u)); }
.sheet .mbar { height: calc(1.6 * var(--u)); }
.sheet .mleg { display: grid; justify-items: start; }
.sheet .mleg .mdot { width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); }
.sheet .mstats b { font-size: calc(3.6 * var(--u)); }
.sheet .mstats small { font-size: calc(1.9 * var(--u)); }
.sheet .mkey { font-size: calc(2 * var(--u)); margin: 0; }
.sheet .mnav .mname { font-size: calc(3.8 * var(--u)); }
.sheet .tabs { margin-bottom: calc(.5 * var(--u)); }
.sheet:has(.month) .scr-title { font-size: 22px; margin-bottom: 2px; }
.cal .marks .ci {
  width: calc(1.9 * var(--u));
  height: calc(2 * var(--u));
  display: block;
  overflow: visible;
  filter: drop-shadow(0 0 1px rgba(0,0,0,.9));
}
.ci .i-tropfen { fill: #8fd3e8; }
.ci .i-pflanze { fill: #9bc27a; stroke: #9bc27a; stroke-width: 1.1; stroke-linecap: round; }
.ci .i-flamme { fill: #ffcf7a; }
.ci .i-wachs { fill: #f1e8d6; }
.ckey { display: flex; flex-wrap: wrap; justify-content: center; gap: .2em 1em; }
.ckey span { display: inline-flex; align-items: center; gap: .25em; }
.ckey .ci { width: 1.1em; height: 1.2em; }
@media print {
  .ci .i-tropfen { fill: #3b8fb0; }
  .ci .i-pflanze { fill: #4f7d33; stroke: #4f7d33; }
  .ci .i-flamme { fill: #c89a2e; }
  .ci .i-wachs { fill: #d8cfc0; stroke: #8a7f70; stroke-width: .5; }
  .ci { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}
.month { position: relative; }
.cal .c.lit { cursor: pointer; }
.cal .c.lit:hover { outline: 1px solid rgba(255,207,122,.7); }
.lpop {
  position: absolute;
  z-index: 6;
  display: none;
  max-width: 78%;
  min-width: 40%;
  padding: .6em .8em;
  border-radius: 12px;
  background: rgba(20,10,24,.92);
  box-shadow: 0 0 14px rgba(255,190,110,.4), 0 6px 18px rgba(0,0,0,.6);
  font-size: max(12px, calc(2.6 * var(--u)));
  pointer-events: none;
}
.lpop.on { display: block; animation: inschrift .3s ease-out; pointer-events: auto; }
.lp-head { display: flex; justify-content: space-between; gap: 1em; margin-bottom: .3em; color: var(--bone); }
.lp-mood { display: inline-flex; align-items: center; gap: .35em; color: var(--ash); font-style: italic; }
.lp-mood .mdot { width: .7em; height: .7em; }
.lp-licht { margin: .2em 0 0; font-style: italic; color: #ffe9c4; line-height: 1.35; }
.lp-licht .ci { width: .9em; height: 1em; vertical-align: -.1em; }
.zaehler { font-style: italic; }
.zaehler.knapp { color: var(--gold); }
.sheet .cal { margin: 0 auto; }
.sheet .mbar,
.sheet .mleg {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
}
.sheet .mleg span { white-space: nowrap; }
.sheet .mleg {
  width: 100%;
  font-size: calc(2.1 * var(--u));
  gap: calc(.5 * var(--u)) calc(1 * var(--u));
  grid-template-columns: repeat(5, max-content);
  justify-content: center;
  column-gap: calc(1.8 * var(--u));
}
.sheet .cal { width: auto; grid-template-columns: repeat(7, 42px); justify-content: center; gap: 4px; }
.sheet .cal .c b { font-size: 12px; }
.sheet .cal .wd { font-size: 10px; }
.sheet .mbar { width: 318px; max-width: 100%; }
.sheet .print-hinweis {
  margin: 10px auto 0;
  max-width: 318px;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
  color: #f0dca0;
  background: rgba(200,154,46,.12);
  border: 1px solid rgba(200,154,46,.35);
}
.pest-holder.gemalt { left: 47.5%; }
.scene:has(.pest-holder.gemalt) .sky-line.s-pest { left: 65.5%; }
.scene:has(.pest-holder.gemalt) .h-pest { left: 56.5%; top: 45%; width: 18.5%; height: 20%; }
.scene:has(.pest-holder.gemalt) .h-pest .tip { top: 57%; }
.word {
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid var(--ui-line);
  background: var(--ui-fill);
  font: 500 15px/1 var(--f-text);
  font-style: normal;
  letter-spacing: .02em;
  color: #e6dccb;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s, transform .12s, box-shadow .2s;
  white-space: nowrap;
}
.word:hover { background: var(--ui-fill-hi); border-color: var(--ui-line-hi); color: var(--bone); }
.word:active { transform: scale(.97); }
.word:empty { display: none; }
.word.main {
  padding: 0 26px;
  border-radius: 999px;
  font: 600 15px/1 var(--f-text);
  letter-spacing: .04em;
  color: #fff4f1;
  border: 1px solid rgba(255,170,170,.28);
  background: linear-gradient(180deg, #c8323f 0%, #8f1b2b 100%);
  box-shadow: 0 8px 22px -8px rgba(200,50,63,.75), inset 0 1px 0 rgba(255,255,255,.2);
}
.word.main:hover { background: linear-gradient(180deg, #d63b48 0%, #9c2131 100%); border-color: rgba(255,190,190,.45); }
.word:focus-visible,
.opt:focus-visible,
.link:focus-visible,
.write:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.sheet .ctx { gap: 10px; padding-top: 18px; }
.write {
  font: 400 15px/1.5 var(--f-text);
  color: var(--bone);
  background: rgba(8,5,12,.55);
  border: 1px solid var(--ui-line);
  border-radius: var(--ui-r);
  padding: 12px 14px;
  transition: border-color .2s, box-shadow .2s, background .2s;
}
.write:hover { border-color: var(--ui-line-hi); }
.write:focus { outline: none; border-color: rgba(224,40,58,.7); background: rgba(8,5,12,.7); box-shadow: 0 0 0 3px rgba(224,40,58,.18); }
.write::placeholder { color: rgba(233,225,208,.38); font-style: normal; }
.write.small { font-size: 14px; }
.write.licht { min-height: 0; }
.zaehler { display: block; text-align: right; margin-top: 4px; font-size: 11px; letter-spacing: .04em; color: rgba(233,225,208,.4); }
.opt {
  margin: 0 0 6px;
  border-radius: var(--ui-r);
  border: 1px solid var(--ui-line);
  background: var(--ui-fill) !important;
  transition: background .18s, border-color .18s, transform .12s;
}
.opt::before { top: 50%; margin-top: -4px; width: 7px; height: 7px; }
.opt:hover { background: var(--ui-fill-hi) !important; border-color: rgba(184,117,255,.4); }
.opt:active { transform: scale(.99); }
.opt.cur { border-color: rgba(224,40,58,.6); background: rgba(224,40,58,.1) !important; }
.opt .k { font-weight: 600; }
.opt small { font-style: normal; color: rgba(233,225,208,.55); }
.opt.mood { padding: 10px 12px; }
.moodgrid { gap: 6px !important; }
.moodgrid .opt.mood { margin: 0; padding: 9px 10px; }
.opt.mood.chosen { border-color: rgba(224,40,58,.7); background: rgba(224,40,58,.12) !important; }
.sheet .tabs {
  display: flex;
  width: max-content;
  margin: 0 auto 10px;
  padding: 3px;
  gap: 2px;
  border-radius: 999px;
  border: 1px solid var(--ui-line);
  background: var(--ui-fill);
  justify-self: center;
  align-self: center;
}
.tabs .link { border-radius: 999px; font-size: 11px; transition: background .2s, color .2s; }
.tabs .link.on {
  background: rgba(233,225,208,.12);
  color: var(--bone);
  text-decoration: none;
  text-shadow: none;
  box-shadow: inset 0 0 0 1px rgba(233,225,208,.16);
}
.mnav .link {
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 1px solid var(--ui-line);
  background: var(--ui-fill);
  font-size: 18px;
  line-height: 1;
  display: inline-grid;
  place-items: center;
}
.mnav .link:hover { border-color: var(--ui-line-hi); background: var(--ui-fill-hi); }
.link.gold {
  border-radius: 999px;
  border: 1px solid rgba(200,154,46,.4);
  background: rgba(200,154,46,.06);
  font-style: normal;
  font-weight: 500;
  font-size: 13px;
}
.link.gold:hover { background: rgba(200,154,46,.14); border-color: rgba(200,154,46,.7); }
.pest.ps-einauge .p-augen-offen,
.pest.ps-einauge .p-augen-zu {
  opacity: 1;
}
.pest.ps-einauge .p-auge-l { opacity: 0; }
.pest.ps-einauge .p-auge-r { transform: scaleY(.6); transition-duration: .5s; }
.pest.ps-einauge .p-zu-r { opacity: 0; }
.pest.ps-einauge .p-kopf { animation: none; transform: translateY(10px) rotate(5deg); }
.pest.ps-einauge .p-leib { animation-duration: 6s; }
.hilfe-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.himmel { position: fixed; inset: 0; pointer-events: none; z-index: 0; }
.wrap { z-index: 1; }
.himmel i {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 4s ease;
  -webkit-mask-image: radial-gradient(ellipse 52% 50% at 50% 46%, #000 45%, transparent 100%);
  mask-image: radial-gradient(ellipse 52% 50% at 50% 46%, #000 45%, transparent 100%);
}
.himmel .h-morgen {
  background: radial-gradient(ellipse 70% 40% at 70% 12%, rgba(240,170,150,.22), rgba(0,0,0,0) 70%), linear-gradient(180deg, #3d3052 0%, #34283f 32%, rgba(12,8,17,0) 82%);
}
.himmel .h-tag {
  background: radial-gradient(ellipse 70% 40% at 50% 8%, rgba(205,220,245,.18), rgba(0,0,0,0) 70%), linear-gradient(180deg, #3a4a68 0%, #2c3550 34%, rgba(12,8,17,0) 85%);
}
.himmel .h-abend {
  background: radial-gradient(ellipse 70% 40% at 28% 14%, rgba(255,150,90,.2), rgba(0,0,0,0) 70%), linear-gradient(180deg, #4d2b40 0%, #3a2238 34%, rgba(12,8,17,0) 85%);
}
body.zeit-morgen .h-morgen,
body.zeit-tag .h-tag,
body.zeit-abend .h-abend {
  opacity: 1;
}
@media print {
  .himmel { display: none; }
}
.breath-txt.gabe {
  display: grid;
  justify-items: center;
  white-space: normal;
  text-align: center;
  font-size: calc(var(--w) * .036);
  line-height: 1.2;
  font: italic 400 calc(var(--w) * .022) / 1.3 var(--f-title);
  gap: calc(var(--w) * .006);
  width: 24%;
  letter-spacing: .01em;
  color: rgba(255,244,236,.92);
  text-shadow: 0 0 6px rgba(255,120,110,.55), 0 0 16px rgba(224,40,58,.3), 0 1px 2px rgba(0,0,0,.7);
}
.breath-txt.gabe small {
  text-transform: uppercase;
  opacity: .85;
  font: 500 calc(var(--w) * .012) / 1 var(--f-text);
  letter-spacing: .22em;
  color: rgba(255,217,200,.7);
  text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.scene.gabe-an .sky-line { opacity: 0; transition: opacity .4s; }
.scene.gabe-an .ring {
  border-width: 1px;
  border-color: rgba(224,40,58,.7);
  box-shadow: 0 0 14px rgba(224,40,58,.3), inset 0 0 12px rgba(184,117,255,.2);
}
.pop-grund {
  position: fixed;
  inset: 0;
  z-index: 4;
  background: radial-gradient(ellipse at 50% 45%, rgba(8,5,12,.12), rgba(8,5,12,.42));
  -webkit-backdrop-filter: blur(1.5px);
  backdrop-filter: blur(1.5px);
  animation: grundIn .3s ease;
}
@keyframes grundIn { from { opacity: 0; } }
.sheet {
  position: fixed;
  left: 50%;
  top: 50%;
  bottom: auto;
  translate: -50% -50%;
  z-index: 5;
  width: min(calc(100vw - 32px), 380px);
  max-height: min(calc(100vh - 48px), 680px);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(44,24,52,.86), rgba(20,12,26,.9));
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(233,225,208,.12);
  box-shadow: 0 24px 60px -12px rgba(0,0,0,.7), 0 0 0 1px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.07);
  animation: popIn .32s cubic-bezier(.2,.9,.25,1.05);
}
@keyframes popIn { from { opacity: 0; transform: scale(.94); } }
.sheet:has(.month) { max-height: min(calc(100vh - 32px), 760px); }
.zieh { display: none; }
@media (display-mode: window-controls-overlay) {
  .zieh {
    display: block;
    position: fixed;
    z-index: 20;
    top: env(titlebar-area-y, 0);
    left: env(titlebar-area-x, 0);
    width: env(titlebar-area-width, 100%);
    height: env(titlebar-area-height, 32px);
    -webkit-app-region: drag;
    app-region: drag;
  }
}
@media print {
  .pop-grund,
  .zieh {
    display: none !important;
  }
}
.breath-txt {
  font: italic 400 calc(var(--w) * .03) / 1.2 var(--f-title);
  color: rgba(255,244,236,.9);
  text-shadow: 0 0 6px rgba(255,120,110,.5), 0 0 16px rgba(224,40,58,.28), 0 1px 2px rgba(0,0,0,.7);
  transform: none !important;
  letter-spacing: .03em;
}
.breath-txt.in { animation: atemWortZart 1.2s ease-out; }
@keyframes atemWortZart { from { opacity: 0; letter-spacing: .12em; } }
.scene.breathing .ring {
  border-width: 1px;
  border-color: rgba(224,40,58,.7);
  box-shadow: 0 0 14px rgba(224,40,58,.3), inset 0 0 12px rgba(184,117,255,.2);
}
.sky .sun.sun-gold { fill: none; stroke: none; }
.sky .sun.sun-gold circle { fill: none; }
.sky .sun-gold .sun-schein { fill: rgba(255,200,110,.10) !important; filter: blur(14px); }
.sky .sun-gold .sun-strahlen path { fill: url(#goldKorn); }
.sky .sun-gold .sun-ring { fill: none !important; stroke: url(#goldKorn); stroke-width: 13; }
.sky .sun-gold .sun-strahlen { transform-box: fill-box; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .sky .sun-gold .sun-strahlen { animation: none; }
}
.breath-txt,
.breath-txt.gabe {
  font-size: var(--kreis-schrift);
  line-height: 1.25;
}
.breath-txt.gabe small { font-size: var(--kreis-klein); }
.breath-txt.in,
.breath-txt.gabe.in {
  animation: atemWortStill .8s ease-out;
}
@keyframes atemWortStill { from { opacity: 0; } }
.pest.ps-langblinzeln .p-auge { animation: langBlinzeln 2.6s ease-in-out both; }
.pest.ps-langblinzeln .p-augen-zu { animation: langBlinzelnZu 2.6s ease-in-out both; }
.pest.ps-langblinzeln .p-kopf { animation: none; transform: rotate(3deg) translateY(3px); transition: transform 1.2s ease; }
@keyframes langBlinzeln { 0% { transform: scaleY(1); } 35%, 62% { transform: scaleY(.05); } 100% { transform: scaleY(1); } }
@keyframes langBlinzelnZu { 0%, 25% { opacity: 0; } 38%, 58% { opacity: 1; } 70%, 100% { opacity: 0; } }
.pest.ps-lauschen .p-ohr-l { animation: none; transform: rotate(-16deg); transition: transform .35s ease; }
.pest.ps-lauschen .p-kopf { animation: none; transform: rotate(-3deg); transition: transform .6s ease; }
.pest.ps-schaut .p-kopf { animation: none; transform: rotate(-9deg) translate(-4px, -3px); transition: transform .8s ease; }
.pest.ps-schaut .p-ohr-l,
.pest.ps-schaut .p-ohr-r {
  animation: none;
  transform: rotate(-6deg);
  transition: transform .5s ease;
}
.sky .sun-gold { filter: drop-shadow(0 0 4px rgba(255,190,90,.3)); }
.pest .p-mund-zu { opacity: 1; }
.pest.ps-gaehnen .p-mund-offen { opacity: 1; transform-box: fill-box; transform-origin: 50% 0; animation: pGaehn 1.3s ease-in-out both; }
@keyframes pGaehn { 0% { transform: scaleY(.3); opacity: 0; } 25% { opacity: 1; } 45%, 75% { transform: scaleY(1); } 100% { transform: scaleY(.4); opacity: 0; } }
.pest.ps-putzen .p-augen-offen { opacity: 0; }
.pest.ps-putzen .p-augen-zu { opacity: 1; }
.pest.gemalt .p-pfote-r { transition: opacity .2s; }
.pest.gemalt.ps-putzen .p-arm-r-vorn { transform: none; }
.pest.gemalt .p-arm-r-vorn .p-oberarm-r { transition: transform .5s ease; }
.pest.gemalt.ps-putzen .p-arm-r-vorn .p-oberarm-r { transform: rotate(24deg) scale(.95, .4); opacity: 0; }
.pest.gemalt.ps-putzen .p-kopf { transform: rotate(4deg) translateY(6px); }
.scene .ring { z-index: 0; }
.regen {
  z-index: 3;
  opacity: 0;
  transition: opacity 3s ease;
  -webkit-mask-image: radial-gradient(ellipse 47% 40% at 50% 47%, #000 62%, transparent 100%);
  mask-image: radial-gradient(ellipse 47% 40% at 50% 47%, #000 62%, transparent 100%);
}
.scene.truebe .regen { opacity: 1; }
.regen .tropfen { stroke-linecap: round; animation: tropfen 1.6s linear infinite; stroke: rgba(205,218,245,.6); stroke-width: 2.6; }
.regen .tropfen.t2 { animation-duration: 2s; stroke: rgba(205,218,245,.42); stroke-width: 2; }
.regen .tropfen.t3 { animation-duration: 2.6s; stroke: rgba(205,218,245,.28); stroke-width: 1.5; }
@keyframes tropfen { from { transform: translate(0, -300px); } to { transform: translate(-60px, 300px); } }
.regen .v1 { animation-delay: -.2s; }
.regen .v2 { animation-delay: -.4s; }
.regen .v3 { animation-delay: -.6s; }
.regen .v4 { animation-delay: -.8s; }
.regen .v5 { animation-delay: -1s; }
.regen .v6 { animation-delay: -1.2s; }
.regen .v7 { animation-delay: -1.4s; }
.scene:not(.truebe) .regen .tropfen { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .regen .tropfen { animation: none; }
}
.word,
.word.main,
.tabs .link,
.link.gold {
  font: var(--knopf-schrift);
  letter-spacing: var(--knopf-sperr);
  text-transform: uppercase;
  font-style: normal;
}
.sheet .ctx .word,
.sheet .ctx .word.main {
  min-height: var(--knopf-h);
  min-width: var(--knopf-b);
  flex: 0 1 auto;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: normal;
  line-height: 1.25;
  text-align: center;
}
.sheet .ctx:has(> .word:nth-child(3):not(:empty)) .word { min-width: 0; flex: 1 1 0; }
.sheet .ctx:has(> .word:nth-child(3):not(:empty)) { gap: 6px; }
.tabs .link { padding: 9px 16px; }
.link.gold { padding: 10px 16px; }
.sheet .ctx:has(> .word:nth-child(3):not(:empty)) .word { letter-spacing: .06em; padding: 0 4px; white-space: nowrap; }
.sheet:has(.ctx > .word:nth-child(3):not(:empty)) { width: min(calc(100vw - 32px), 400px); }
.pest.gemalt.ps-putzen .p-kopf { animation: pPutz3 1.1s ease-in-out .4s infinite; }
@keyframes pPutz3 { 0%,100% { transform: rotate(4deg) translateY(6px); } 35% { transform: rotate(8deg) translate(-2px, 12px); } 60% { transform: rotate(3deg) translateY(4px); } }
.pest.gemalt.ps-putzen .p-zunge { animation: pZunge3 1.1s ease-in-out .4s infinite; }
@keyframes pZunge3 { 0%, 20%, 70%, 100% { opacity: 0; } 30%, 55% { opacity: 1; } }
.sky .sun-gold .sun-strahlen { animation: strahlenWiegen 14s ease-in-out infinite; }
@keyframes strahlenWiegen { 0%,100% { transform: rotate(-1.2deg) scale(1); } 50% { transform: rotate(1.2deg) scale(1.035); } }
.sky .sun-gold .sun-strahlen path:nth-child(odd) { animation: strahlSchimmer 7s ease-in-out infinite; }
.sky .sun-gold .sun-strahlen path:nth-child(4n) { animation: strahlSchimmer 9s ease-in-out -3s infinite; }
@keyframes strahlSchimmer { 0%,100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) {
  .sky .sun-gold .sun-strahlen,
  .sky .sun-gold .sun-strahlen path {
    animation: none !important;
  }
}
* { scrollbar-width: thin; scrollbar-color: rgba(233,225,208,.22) transparent; }
*::-webkit-scrollbar { width: 6px; height: 6px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: rgba(233,225,208,.2); border-radius: 999px; border: 1px solid rgba(0,0,0,.2); }
*::-webkit-scrollbar-thumb:hover { background: rgba(200,154,46,.45); }
*::-webkit-scrollbar-corner { background: transparent; }
textarea.write { scrollbar-gutter: auto; }
.pest.gemalt.ps-putzen .p-arm-r-vorn .p-pfote-r { transform: scale(-1, 1) rotate(-38deg); }
.pest.gemalt.ps-putzen .p-arm-r-vorn .p-unterarm-r {
  transform: translate(-16px, -142px) scale(1, -.82);
  animation: pLecken4 1.1s ease-in-out .4s infinite;
}
@keyframes pLecken4 { 0%, 100% { transform: translate(-16px, -142px) scale(1, -.82); } 35% { transform: translate(-14px, -132px) scale(1.02, -.78) rotate(-3deg); } 60% { transform: translate(-17px, -146px) scale(1, -.83) rotate(1deg); } }
.ci .i-buch { fill: #efe6d6; stroke: #5b4a66; stroke-width: .8; stroke-linejoin: round; }
.ci .i-falz { fill: none; stroke: #5b4a66; stroke-width: .8; }
.sheet .cal .marks { gap: 1px; }
.sheet .cal .marks .ci { width: 9px; height: 10px; }
.sheet .tnav .mname { font-size: 19px; }
.write.tagebuch { min-height: 190px; resize: vertical; line-height: 1.6; font-size: 15px; }
.tag-info { margin: 6px 2px 0; font-size: 11px; color: rgba(233,225,208,.45); font-style: italic; text-align: right; }
.sheet .tag-frueher { display: block; margin: 16px 0 6px; }
.tag-eintrag {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px;
  align-items: baseline;
  width: 100%;
  text-align: left;
  margin: 0 0 4px;
  padding: 9px 12px;
  border-radius: var(--ui-r);
  border: 1px solid var(--ui-line);
  background: var(--ui-fill);
  color: rgba(233,225,208,.82);
  font: 400 13px/1.4 var(--f-text);
  cursor: pointer;
  transition: background .18s, border-color .18s;
}
.tag-eintrag:hover { background: var(--ui-fill-hi); border-color: rgba(184,117,255,.4); }
.tag-eintrag .bdate { color: var(--gold); font-style: normal; font-size: 11px; white-space: nowrap; }
.tag-eintrag span { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.lpop .lp-tag { color: rgba(233,225,208,.8); }
.lpop .lp-open { margin-top: 6px; }
.scene .screen { left: 30.68%; top: 35.27%; width: 34.93%; height: 26.01%; rotate: -3.5deg; }
.scene .vignette { z-index: 2; pointer-events: none; transition: opacity 2s ease; }
.scene.night .vignette { opacity: 1; }
.scene .sky-line,
.scene .sky-line.s-pest,
.scene .sky-line.s-nichts,
.scene .sky-line.s-welt,
.scene .sky-line.oracle {
  font: italic 400 var(--kreis-schrift) / 1.3 var(--f-title);
  letter-spacing: .02em;
}
.scene .rotstrahlen { pointer-events: none; opacity: 0; mix-blend-mode: screen; filter: blur(3px); z-index: 3; }
.scene .rotstrahlen.an { animation: rotStrahl 2.5s ease-out; }
@keyframes rotStrahl { 0% { opacity: 0; } 12% { opacity: 1; } 45% { opacity: .75; } 100% { opacity: 0; } }
.scene .rotstrahlen .rs { transform-box: view-box; transform-origin: 987px 1419px; }
.scene .rotstrahlen.an .rs { animation: rsWisch 2.5s ease-out; }
.scene .rotstrahlen.an .v1,
.scene .rotstrahlen.an .v4 {
  animation-duration: 2.1s;
}
.scene .rotstrahlen.an .v2,
.scene .rotstrahlen.an .v6 {
  animation-duration: 2.8s;
}
@keyframes rsWisch { 0% { transform: rotate(4deg) scale(.6); } 100% { transform: rotate(-3deg) scale(1.05); } }
@media (prefers-reduced-motion: reduce) {
  .scene .rotstrahlen.an,
  .scene .rotstrahlen.an .rs {
    animation-duration: .01s;
  }
}
.filterdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.scene .ranken { filter: url(#wind); }
@media (prefers-reduced-motion: reduce) {
  .scene .ranken { filter: none; }
}
.scene .pilzlicht { pointer-events: none; z-index: 3; transform: translateY(1.2%); }
.pilzlicht .pl {
  position: absolute;
  aspect-ratio: 1;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, #fff6c8 0%, #f3d27a 40%, rgba(243,210,122,0) 72%);
  width: 1%;
  box-shadow: 0 0 10px 4px rgba(245,215,120,.55);
}
.pilzlicht .a0 { left: 13.2%; top: 65.6%; }
.pilzlicht .a1 { left: 14.8%; top: 66%; }
.pilzlicht .a2 { left: 16.3%; top: 65.4%; }
.pilzlicht .a3 { left: 14.1%; top: 65.1%; animation-delay: -3.6s; animation-duration: 6.6s; }
.pilzlicht .a4 { left: 15.6%; top: 66.2%; animation-delay: -4.5s; animation-duration: 7.4s; }
.pilzlicht .a5 { left: 12.8%; top: 66.4%; animation-delay: -5.3s; }
.pilzlicht .b0 { left: 86.4%; top: 77.6%; }
.pilzlicht .b1 { left: 88.1%; top: 78.2%; animation-duration: 6.8s; }
.pilzlicht .b2 { left: 89.6%; top: 77.4%; }
.pilzlicht .pl:nth-child(odd) { animation-name: pilzSteigen2; }
@keyframes pilzSteigen2 { 0% { opacity: 0; transform: translate(0, 0) scale(.6); } 18% { opacity: .9; } 55% { transform: translate(-7px, -42px) scale(1); } 100% { opacity: 0; transform: translate(5px, -100px) scale(.45); } }
@media (prefers-reduced-motion: reduce) {
  .pilzlicht .pl { animation: none; }
}
.scene .pilz {
  position: absolute;
  z-index: 0;
  height: auto;
  pointer-events: none;
  transform-origin: 50% 100%;
  animation: pilzHuepf 14s ease-in-out infinite;
}
.scene .pilz.p0 { left: 11.23%; top: 62.47%; width: 6.54%; }
.scene .pilz.p1 { left: 84.81%; top: 74.77%; width: 8.69%; animation-delay: -7s; }
@keyframes pilzHuepf { 0%, 8%, 100% { transform: translateY(0) scale(1, 1); } 1.5% { transform: translateY(0) scale(1.05, .9); } 3.5% { transform: translateY(-4%) scale(.96, 1.06); } 5.5% { transform: translateY(0) scale(1.04, .94); } 7% { transform: translateY(0) scale(1, 1); } }
.pilzlicht .pl { animation: pilzSteigenS 14s ease-out infinite !important; }
@keyframes pilzSteigenS { 0%, 4% { opacity: 0; transform: translate(0, 0) scale(.6); } 8% { opacity: .95; } 22% { transform: translate(6px, -40px) scale(1); } 38%, 100% { opacity: 0; transform: translate(-4px, -95px) scale(.45); } }
.pilzlicht .a0 { animation-delay: 0s !important; }
.pilzlicht .a1 { animation-delay: -.25s !important; animation-duration: 14s !important; }
.pilzlicht .a2 { animation-delay: -.5s !important; }
.pilzlicht .b0 { animation-delay: -7s !important; }
.pilzlicht .b1 { animation-delay: -7.25s !important; }
.pilzlicht .b2 { animation-delay: -7.5s !important; }
.pilzlicht .a1,
.pilzlicht .b1 {
  opacity: 0;
  animation-name: pilzSteigenS2 !important;
}
@keyframes pilzSteigenS2 { 0%, 5% { opacity: 0; transform: translate(0, 0) scale(.6); } 9% { opacity: .9; } 24% { transform: translate(-7px, -46px) scale(1); } 40%, 100% { opacity: 0; transform: translate(5px, -105px) scale(.45); } }
.scene .pilz-tap { position: absolute; z-index: 5; padding: 0; border: 0; background: none; cursor: pointer; border-radius: 50%; }
.scene .pilz-tap.t0 { left: 10.6%; top: 62.4%; width: 7.6%; height: 5.4%; }
.scene .pilz-tap.t1 { left: 84.2%; top: 74.6%; width: 9.8%; height: 5.6%; }
.scene .pilz-tap:focus-visible { outline: 1px solid rgba(255,207,122,.6); }
.scene .pilz.huepft { animation: pilzKlick .8s ease-in-out; }
@keyframes pilzKlick { 0%, 100% { transform: translateY(0) scale(1, 1); } 15% { transform: translateY(0) scale(1.08, .86); } 40% { transform: translateY(-9%) scale(.94, 1.08); } 65% { transform: translateY(0) scale(1.05, .93); } 82% { transform: translateY(-2%) scale(.99, 1.02); } }
.scene .spore {
  position: absolute; z-index: 3; width: 1.1%; aspect-ratio: 1; border-radius: 50%; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff6c8 0%, #f3d27a 45%, rgba(243,210,122,0) 75%);
  box-shadow: 0 0 6px 2px rgba(245,215,120,.45);
  animation: sporeFlug 2.4s ease-out forwards;
}
.scene .spore.gruen { background: radial-gradient(circle, #f1ffd0 0%, #b9d77a 45%, rgba(185,215,122,0) 75%); box-shadow: 0 0 6px 2px rgba(185,215,122,.4); }
@keyframes sporeFlug { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 15% { opacity: .95; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(1.1); } }
@media (prefers-reduced-motion: reduce) {
  .scene .pilz,
  .scene .spore,
  .pilzlicht .pl {
    animation: none !important;
  }
}
.scene.mond .sky .sun { opacity: 0; }
.scene.mond .sky .moon { opacity: .85; }
.scene.mond .sky .stars { opacity: 1; }
.tag-lesen { padding: 12px 14px; border-radius: var(--ui-r); border: 1px solid var(--ui-line); background: rgba(8,5,12,.35); min-height: 80px; }
.tag-lesen p { margin: 0 0 6px; font: 400 15px/1.6 var(--f-text); color: rgba(233,225,208,.9); white-space: pre-wrap; }
.tag-lesen p:last-child { margin-bottom: 0; }
#vgMaske { mask-type: alpha; }
.scene .sky-line,
.breath-txt {
  font-weight: 400;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}
.scene .sky-line {
  text-shadow: 0 1px 2px rgba(0,0,0,.55);
  font-family: "DracTitel", "Crimson Pro", Georgia, "Cambria", "Times New Roman", serif;
  color: rgba(255,234,196,.88);
}
.breath-txt,
.breath-txt.gabe {
  text-shadow: 0 0 5px rgba(224,40,58,.25), 0 1px 2px rgba(0,0,0,.6);
}
body,
.sheet,
.panel,
.write,
.write.tagebuch,
.tag-lesen p,
.light-item,
.tag-eintrag,
.lpop,
.lpop .lp-licht,
.opt,
.opt small,
.muted,
.tag-info,
.zaehler,
.print-hinweis,
.sheet p {
  font-weight: 300;
}
.opt .k,
.sheet .k {
  font-weight: 400;
}
.word,
.word.main,
.tabs .link,
.link.gold {
  font-weight: 500;
}
.tag-eintrag .bdate,
.light-item .bdate,
.lpop .lp-head b {
  font-weight: 400;
}
.scene .buchteil { position: absolute; height: auto; z-index: 2; pointer-events: none; }
.scene .feder { left: 39.21%; top: 65.77%; width: 22.07%; transform-origin: 6% 92%; }
.scene .tinte {
  left: 33.45%;
  top: 70.33%;
  width: 6.40%;
  opacity: 0;
  -webkit-mask-image: linear-gradient(90deg, #000 0 50%, transparent 60% 100%);
  mask-image: linear-gradient(90deg, #000 0 50%, transparent 60% 100%);
  -webkit-mask-size: 260% 100%;
  mask-size: 260% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
  transition: opacity 1.4s ease .2s, -webkit-mask-position 0s 1.6s, mask-position 0s 1.6s;
}
.scene.buch-an .tinte {
  opacity: 1;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transition: opacity .25s ease, -webkit-mask-position 1.3s cubic-bezier(.4,0,.2,1) .15s, mask-position 1.3s cubic-bezier(.4,0,.2,1) .15s;
}
.scene.buch-an .feder { animation: federZuck 1.5s ease-out; }
@keyframes federZuck { 0% { transform: rotate(0); } 8% { transform: rotate(-3.5deg); } 16% { transform: rotate(2deg); } 26% { transform: rotate(-2.2deg) translateX(1%); } 40% { transform: rotate(1deg) translateX(2%); } 60% { transform: rotate(-.6deg) translateX(3%); } 100% { transform: rotate(0) translateX(0); } }
@media (prefers-reduced-motion: reduce) {
  .scene.buch-an .feder { animation: none; }
}
.hot,
.hot:hover,
.hot:focus,
.hot:focus-visible,
.hot.on {
  background: none !important;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}
.hot:focus-visible .tip { outline: 1px solid rgba(233,225,208,.5); outline-offset: 2px; }
.scene .sky-line.s-nichts { text-shadow: 0 1px 2px rgba(0,0,0,.55); animation: none; }
.scene .sky-line.s-nichts.neu { animation: inschrift 1.8s ease-out; }
.pest.gemalt.ps-putzen .p-mund-offen { animation: pMundAuf3 1.1s ease-in-out .4s infinite; }
.pest.gemalt.ps-putzen .p-mund-zu { animation: pMundZu3 1.1s ease-in-out .4s infinite; }
@keyframes pMundAuf3 { 0%, 18%, 72%, 100% { opacity: 0; } 26%, 58% { opacity: 1; } }
@keyframes pMundZu3 { 0%, 18%, 72%, 100% { opacity: 1; } 26%, 58% { opacity: 0; } }
.sheet p,
.sheet .muted,
.sheet p.muted,
.opt small,
.sheet a {
  font-size: 15px;
  line-height: 1.55;
}
.write,
.write.small,
.write.licht,
.write.tagebuch,
.sheet .light-item,
.sheet .plan-line,
.sheet .dissolve,
.tag-lesen p,
.lpop .lp-licht {
  font-family: var(--f-title);
  font-size: var(--kreis-schrift);
  font-weight: 200;
  font-style: normal;
  line-height: 1.5;
}
.sheet .light-item .bdate { font-family: var(--f-text); font-size: 12.5px; }
.sheet .scr-title,
.sheet:has(.month) .scr-title {
  font: 400 26px/1.1 var(--f-title);
  margin: 0 0 6px;
}
.sheet .scr-title:empty { display: none; }
.mname,
.tnav .mname {
  font: 400 19px/1.1 var(--f-title);
}
.opt .k,
.sheet .k {
  font-size: 13.5px;
}
.moodgrid .opt small { font-size: 15px; line-height: 1.4; }
.props-vorn .pokal .surface { transform: translateY(calc(var(--water, 0) * -105px)); }
.opt small,
.moodgrid .opt small,
.zaehler,
.tag-info,
.muted,
.print-hinweis,
.lpop .lp-head small {
  color: var(--ash);
}
.willkommen-logo { display: block; width: 92px; height: auto; margin: 0 auto 2px; opacity: .9; filter: drop-shadow(0 0 8px rgba(226,184,104,.25)); }
.sheet p.wispern { font: italic 400 17px/1.4 var(--f-title); color: #ffd9d9; text-align: center; margin: 0 0 4px; }
.tour { inset: 0; z-index: 20; cursor: pointer; animation: tourEin .5s ease-out both; }
.tour.geht { opacity: 0; transition: opacity .45s ease; }
@keyframes tourEin { from { opacity: 0; } }
.tour-linien { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; z-index: 1; }
.tour-linien .tl {
  fill: none;
  stroke: rgba(255,207,122,.75);
  stroke-width: 1;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  animation: tourLinie .9s ease-out forwards;
}
.tour-linien .tp { fill: #ffcf7a; filter: drop-shadow(0 0 4px rgba(255,207,122,.9)); opacity: 0; animation: tourPunkt .5s ease-out forwards; }
@keyframes tourLinie { to { stroke-dashoffset: 0; } }
@keyframes tourPunkt { to { opacity: 1; } }
.tour-text {
  position: absolute;
  margin: 0;
  background: rgba(14,9,20,.86) !important;
  opacity: 0;
  animation: tourPunkt .5s ease-out forwards;
  padding-left: 14px;
}
.tour-text .k { text-transform: uppercase; letter-spacing: .12em; color: var(--bone); }
.tour-hinweis { position: absolute; left: 0; right: 0; bottom: 4%; margin: 0; text-align: center; animation: tourPunkt 1s ease-out 1.2s both; }
body.tour-an .hot {
  background: radial-gradient(closest-side, rgba(255,207,122,.32), rgba(255,207,122,0)) !important;
  animation: tourPuls 2.4s ease-in-out infinite;
}
body.tour-an .hot .tip,
body.tour-an .sky-line {
  opacity: 0 !important;
}
@keyframes tourPuls { 50% { filter: brightness(1.5); } }
.tour { position: fixed; background: none; pointer-events: none; }
body.tour-scroll .wrap { overflow-y: auto; overscroll-behavior: contain; }
body.tour-scroll .scene-clip { height: calc(var(--w) * 3000 / 2048); overflow: visible; }
body.tour-scroll .scene { top: 0; }
body.willkommen .hot .tip,
body.willkommen .names {
  opacity: 0 !important;
  pointer-events: none;
}
.tour-ebene {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 21;
  transform-origin: 0 0;
  cursor: pointer;
  animation: tourEin .5s ease-out both;
}
body.tour-an .scene .art { filter: brightness(.7); }
.tour-ebene.geht { opacity: 0; transition: opacity .45s ease; }
.tour-ebene .tour-linien { position: absolute; inset: 0; width: 100%; height: 100%; }
.tour-ebene .tour-hinweis { bottom: auto; translate: 0 -50%; }
.tour-text::before { display: none; }
.scene .sky-line.s-nichts { color: #ff8f8f; }
.scene:has(.pest-holder.gemalt) .sky-line.s-pest { bottom: calc(59% - 5px); max-width: calc(var(--w) * .42); margin-right: calc(var(--w) * -.6); }
.sheet { padding: 18px; }
.sheet .panel { padding: 0 4px 0 0; }
.opt { padding: 14px 14px 14px 36px; }
.opt::before { left: 14px; }
.opt.mood,
.moodgrid .opt.mood {
  padding: 12px;
}
.tour-text { padding: 14px; }
.sky-line { padding: .55em; }
.write,
.tag-lesen {
  padding: 14px;
}
.scene .atem-hinweis { bottom: auto; top: 97.2%; font-size: 15px; z-index: 6; pointer-events: none; }
.pest.ps-gaehnen .p-mund-zu { opacity: 1; animation: pGaehnZu 1.3s ease-in-out both; }
@keyframes pGaehnZu { 0% { opacity: 1; } 25% { opacity: 0; } 100% { opacity: 1; } }
.sheet:has(.dissolve) {
  width: min(calc(100vw - 32px), 320px);
  aspect-ratio: 1;
  border-radius: 50%;
  padding: 46px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: radial-gradient(circle, rgba(40,6,14,.75) 0%, rgba(24,6,12,.6) 60%, rgba(24,6,12,.35) 100%);
  border-color: rgba(238,29,42,.4);
  box-shadow: 0 0 40px rgba(238,29,42,.25), inset 0 0 34px rgba(238,29,42,.16);
  animation: sorgeKreis 2.4s ease-in-out infinite;
}
@keyframes sorgeKreis { 50% { scale: 1.035; box-shadow: 0 0 56px rgba(238,29,42,.35), inset 0 0 40px rgba(238,29,42,.22); } }
.sheet:has(.dissolve) .ctx,
.sheet:has(.dissolve) .scr-title { display: none; }
.sheet:has(.dissolve) .panel { width: 100%; flex: 0 0 auto; overflow: visible; padding: 0; display: block; }
.sheet .dissolve { margin: 0; font-size: calc(var(--kreis-schrift) * 1.35); line-height: 1.35; }
@media (max-width: 560px) {
  .sheet,
  .sheet:has(.month) {
    top: calc(50% - 22px);
    max-height: calc(100dvh - 120px);
  }
  .scene .atem-hinweis { position: fixed; top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 22px); left: 0; right: 0; }
  .sheet .panel { grid-template-columns: minmax(0, 1fr); }
  .sheet .month { min-width: 0; grid-template-columns: minmax(0, 1fr); }
  .sheet .cal { width: 100%; grid-template-columns: repeat(7, minmax(0, 42px)); gap: 3px; }
  .sheet .mleg { grid-template-columns: repeat(3, max-content); }
  .sheet .mstats { grid-template-columns: repeat(3, 1fr); row-gap: 10px; }
  .sheet .tabs { max-width: 100%; }
  .sheet .tabs .link { padding: 9px 10px; letter-spacing: .06em; }
}
.scene img:not([src]) { visibility: hidden; }
.sheet .panel.weiter { mask-image: linear-gradient(to bottom, #000 calc(100% - 56px), transparent); }