/* Gedenkblüte — die Anschauungsseite eines Erinnerungsortes.
   Setzt basis.css und ort.css voraus (Gabenleiste, Abschnitte).

   Seit dem 02.08.2026: Der Baum der Erinnerung IST der Ort. Er wächst vor
   einer Landschaft, die der Besitzer wählt und jederzeit wechseln kann. */

/* ---------- Kleine Ergänzungen zum Bestand ---------- */

/* Sprünge innerhalb der Seite gleiten. Wer Bewegung meidet, springt. */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.blatt--linie { border-top: 1px solid rgba(244, 239, 230, 0.08); }

/* ---------- Der Ort: Baum vor Landschaft ---------- */

.himmel {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  padding-top: clamp(5rem, 12vh, 7rem);
}

.himmel__grund { position: absolute; inset: 0; pointer-events: none; }
.himmel__bild {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  /* Die Landschaft lebt: ein sehr langsames Atmen und Treiben. Zwei
     Bewegungen mit Primzahl-Laufzeiten — bis sich beide gleichzeitig
     wiederholen, vergehen fast zwei Stunden; kein Auge erkennt den Kreis.
     Die Grundvergrößerung sorgt dafür, dass beim Treiben nie ein Rand
     ins Bild kommt. */
  animation:
    himmel-atmen 67s ease-in-out infinite alternate,
    himmel-treiben 101s ease-in-out infinite alternate;
}
@keyframes himmel-atmen {
  from { scale: 1.04; }
  to   { scale: 1.1; }
}
@keyframes himmel-treiben {
  from { translate: -1% 0.3%; }
  to   { translate: 1% -0.4%; }
}

/* Stille Lichtfunken, die aus der Wiese aufsteigen — das Gegenstück zu den
   fallenden Samen des Baums. */
/* Die aufsteigenden Lichtpunkte sind ausgeschaltet. Sie schwebten als
   Bokeh-Kreise ueber der gemalten Landschaft und vor allem ueber den
   Dingen, die darauf stehen — und nichts verraet eine gemalte Szene so
   schnell als Bildschirm wie leuchtende Kreise, die vor einer Kerze
   vorbeiziehen. Die Regeln bleiben stehen; ein display:block hier holt
   sie zurueck, falls sie einmal wieder gewuenscht sind. */
.himmel__leben {
  display: none;
  position: absolute; inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.himmel__leben span {
  position: absolute;
  bottom: -3vh;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(233, 207, 154, 0.85), rgba(233, 207, 154, 0) 70%);
  filter: blur(1px);
  opacity: 0;
  animation: funke-steigen var(--dauer, 31s) linear var(--warte, 0s) infinite;
}
.himmel__leben span:nth-child(2n) { animation-name: funke-steigen-links; }
.himmel__leben span:nth-child(1) { left: 12%; --dauer: 29s; --warte: -4s;  scale: 0.8; }
.himmel__leben span:nth-child(2) { left: 26%; --dauer: 37s; --warte: -19s; scale: 1.1; }
.himmel__leben span:nth-child(3) { left: 38%; --dauer: 31s; --warte: -11s; scale: 0.7; }
.himmel__leben span:nth-child(4) { left: 55%; --dauer: 41s; --warte: -27s; scale: 1; }
.himmel__leben span:nth-child(5) { left: 67%; --dauer: 33s; --warte: -7s;  scale: 0.9; }
.himmel__leben span:nth-child(6) { left: 79%; --dauer: 39s; --warte: -23s; scale: 1.2; }
.himmel__leben span:nth-child(7) { left: 88%; --dauer: 35s; --warte: -15s; scale: 0.75; }
@keyframes funke-steigen {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: 0.65; }
  55%  { transform: translate3d(2.2vw, -48vh, 0); opacity: 0.4; }
  100% { transform: translate3d(-1.4vw, -90vh, 0); opacity: 0; }
}
@keyframes funke-steigen-links {
  0%   { transform: translate3d(0, 0, 0); opacity: 0; }
  10%  { opacity: 0.55; }
  55%  { transform: translate3d(-2.4vw, -44vh, 0); opacity: 0.38; }
  100% { transform: translate3d(1.2vw, -88vh, 0); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .himmel__bild { animation: none; }
  .himmel__leben { display: none; }
}
/* Beim Wechseln der Landschaft blendet das neue Bild über das alte. */
.himmel__bild--kommt {
  opacity: 0;
  transition: opacity 900ms ease;
}
.himmel__bild--da { opacity: 1; }

/* Oben Luft für die Kopfleiste, unten Halt für Name und Bedienung — und in
   der Mitte ein stiller Grund, damit der Baum vor jeder Landschaft steht. */
.himmel__schleier {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    /* Der Grund hinter der Krone tritt zurück, damit der Baum hervortritt —
       Wertkontrast statt Schlagschatten, wie ein Maler es täte. */
    radial-gradient(44% 58% at 50% 44%, rgba(9, 17, 13, 0.42), transparent 72%),
    linear-gradient(to bottom, rgba(12, 22, 17, 0.6) 0%, transparent 26%,
                    transparent 44%, rgba(9, 17, 13, 0.9) 100%);
}

/* Der Baum ist die Mitte der Seite — eine eigene Ebene hinter Name und
   Bedienung. Sein Stamm beginnt hinter der gläsernen Leiste am unteren
   Rand: Er wurzelt im Bildgrund, nicht auf halber Höhe. */
.himmel__buehne {
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 0;
  /* Hinter der Namens-Tafel — der Stamm wächst aus ihr heraus, nicht davor. */
  z-index: 1;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  /* Leere Fläche der Bühne lässt Klicks zur Tafel durch;
     nur das SVG (Krone/Blüten) fängt Zeiger ab. */
  pointer-events: none;
}
.himmel__buehne .bluete__svg {
  pointer-events: auto;
}
.bluete__svg {
  display: block;
  width: auto;
  max-width: 100%;
  /* Die genaue Höhe setzt baum.js nach dem Messen der Tafel;
     dieser Wert trägt nur den ersten Aufbau — bewusst niedriger,
     damit die Krone auf Handy und Tablet im Viewport bleibt. */
  height: min(68svh, 48rem);
  /* Kein Schlagschatten: Der verriete den Baum als aufgeklebtes Objekt —
     ein Gemälde kennt solche Ränder nicht. Stattdessen ein Hauch warmes
     Eigenleuchten, als finge er das Abendlicht; die Geltung kommt vom
     dunkleren Grund dahinter (siehe Schleier), nicht von einer Kante. */
  filter: drop-shadow(0 0 22px rgba(233, 207, 154, 0.2));
}

/* Fallende Samen: SMIL steuert Bewegung und Sichtbarkeit; hier nur, dass
   sie nichts abfangen und weich wirken. */
.bluete__samen { pointer-events: none; }

/* Die freie Fläche (Kerzen) ist fort. */

/* ---------- Name und Worte ---------- */

/* Der Name steht auf Milchglas: Die Landschaft und der Stamm scheinen
   weich hindurch, und die Schrift bleibt vor jedem Hintergrund lesbar.
   Die Platte hält sich klein — sie ist eine Tafel am Baum, kein Banner.
   Ihr Rand ist eine feine Goldlinie: Der Verlauf im Rahmen lässt sie oben
   heller und unten tiefer erscheinen, wie ein wirklich gezogenes Metall. */
.himmel__name {
  position: relative;
  z-index: 3;
  text-align: center;
  /* Der Abstand nach unten hält die Bodenlinie frei: Dort stehen Kerzen und
     Gießkanne, und ein Schild, das bis auf den Boden reicht, stellt sich vor
     sie. Das Schild hängt am Baum, es liegt nicht davor. */
  margin: 0 1rem clamp(0.15rem, 0.5vh, 0.4rem);
  max-width: min(29rem, calc(100% - 2rem));
  padding: clamp(0.45rem, 0.9vw, 0.7rem) clamp(1.2rem, 2.6vw, 1.8rem);
  border-radius: 0.8rem;
  border: 1px solid transparent;
  /* Kein goldenes Schild: Gold war die Fläche, und eine goldene Fläche neben
     einer gemalten Wiese sieht aus wie Messing im Wohnzimmer. Jetzt ist es
     dunkler Marmor — ein tiefer, leicht grünlicher Stein mit ein paar hellen
     Adern. Die Adern sind schräge Verläufe in verschiedenen Winkeln und
     Breiten; keine wiederholt sich im Takt der anderen, deshalb sieht man
     kein Muster, sondern Stein. Der feine Goldrand bleibt: Er fasst den
     Stein ein, statt ihn zu sein. */
  background:
    /* Kein Adernwerk mehr: Gemalte Adern in CSS werden entweder zu Streifen
       oder zu nichts. Stattdessen ein ruhiger Verlauf - oben ein Hauch
       Licht, wie es von schraeg oben auf polierten Stein faellt, nach unten
       hin tief. Das reicht: Was die Tafel als Stein lesbar macht, ist der
       Verlauf und die feine Fassung, nicht ein Muster. */
    linear-gradient(158deg,
      rgba(255, 255, 245, 0.055) 0%,
      rgba(255, 255, 245, 0) 42%) padding-box,
    radial-gradient(135% 100% at 26% 4%, #4e5c52, #202a24 54%, #101713) padding-box,
    /* die Fassung */
    linear-gradient(150deg,
      rgba(240, 222, 180, 0.85) 0%,
      rgba(200, 169, 126, 0.4) 34%,
      rgba(248, 236, 206, 0.75) 56%,
      rgba(176, 143, 99, 0.45) 78%,
      rgba(226, 204, 158, 0.7) 100%) border-box;
  /* Ein wirklicher Schatten: dicht und dunkel unter der Kante, weit und
     weich darunter — so liegt die Tafel VOR der Landschaft statt darin. */
  box-shadow:
    0 2px 4px rgba(6, 12, 9, 0.55),
    0 10px 22px rgba(6, 12, 9, 0.5),
    0 26px 60px rgba(6, 12, 9, 0.45),
    0 48px 90px rgba(6, 12, 9, 0.3),
    inset 0 1px 0 rgba(255, 247, 230, 0.07);
}

/* Gravur statt Aufdruck: Über jedem Buchstaben liegt die Schattenkante des
   Schnitts, unter ihm fängt die Bruchkante das Licht. Der weiche dunkle
   Hauch darunter bleibt — er trägt die Lesbarkeit vor jeder Landschaft. */
.himmel__zeit,
.himmel__spruch,
.bluete__stand {
  text-shadow:
    0 -1px 1px rgba(10, 18, 14, 0.9),
    0 1px 0 rgba(255, 250, 236, 0.22),
    0 3px 20px rgba(9, 17, 13, 0.85);
}

.himmel__name h1 {
  font-size: clamp(2.3rem, 5vw, 3.5rem);
  line-height: 1.06;
  color: var(--gold);
}
/* Der Name ist in Gold geschnitten, und einmal in der Minute wandert ein
   Lichtstreif darüber, wie die Sonne über eine Messingtafel geht. Der
   Verlauf beginnt und endet in ruhigem Gold — der Glanz zieht durch und
   lässt die Schrift danach wieder still liegen. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .himmel__name h1 {
    background-image: linear-gradient(100deg,
      #e6d4a8 0%, #c8a97e 20%, #b79a6e 30%,
      #fff8e6 40%, #f3e4bd 46%,
      #c19f72 60%, #cdae82 80%, #e4cfa2 100%);
    background-size: 300% 100%;
    /* 0 % und 100 % sind die Endanschläge: Bei einem Verlauf, der breiter ist
       als sein Feld, heißt 100 % "rechte Kante des Verlaufs an rechter Kante
       des Feldes". Alles darüber hinaus schiebt ihn aus dem Feld — und weil
       die Schrift nur der Ausschnitt des Verlaufs ist, verschwindet sie dann
       ganz. Genau das war hier der Fall. */
    background-position: 100% 0;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    /* Die Gravur des Namens: Schatten und Lichtkante müssen hier als
       drop-shadow kommen — text-shadow läge über der ausgeschnittenen
       Schrift und würde das Gold zudecken. */
    filter:
      drop-shadow(0 -1px 1px rgba(10, 18, 14, 0.9))
      drop-shadow(0 1px 0 rgba(255, 250, 236, 0.28))
      drop-shadow(0 6px 26px rgba(9, 17, 13, 0.8));
    animation: name-glanz 14s ease-in-out infinite;
  }
}
@keyframes name-glanz {
  0%        { background-position: 100% 0; }
  45%, 100% { background-position: 0% 0; }
}
/* Wer Bewegung meidet, bekommt dasselbe Gold — nur ohne den Zug des Lichts. */
@media (prefers-reduced-motion: reduce) {
  .himmel__name h1 { animation: none; background-position: 45% 0; }
}

.himmel__zeit {
  margin-top: clamp(0.5rem, 1.2vw, 0.8rem);
  font-family: var(--display);
  font-size: clamp(1.05rem, 2vw, 1.45rem);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: rgba(214, 189, 148, 0.92);
}
.himmel__spruch {
  margin: clamp(0.55rem, 1.3vw, 0.85rem) auto 0;
  max-width: 23rem;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(0.92rem, 1.4vw, 1.08rem);
  line-height: 1.5;
  color: var(--creme);
}
/* Die Standzeile spricht vom Baum, nicht von Zahlenwerk. Bricht sie um,
   sollen beide Zeilen gleich lang stehen — sonst hängt ein Wort allein. */
.bluete__stand {
  margin-top: clamp(0.7rem, 1.5vw, 1rem);
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  line-height: 1.75;
  text-transform: uppercase;
  text-wrap: balance;
  color: rgba(198, 184, 160, 0.88);
}

/* ---------- Bedienung am unteren Rand ---------- */

.himmel__fuss {
  position: relative;
  z-index: 3;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  padding-bottom: clamp(1.2rem, 3vh, 2rem);
  margin-top: clamp(1rem, 2.5vh, 1.8rem);
}
.himmel__fuss .gaben {
  align-self: auto;
  margin: 0;
}

/* Die Landschaft wählen: eine stille Reihe unter den Gaben. */
.waehler {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35rem 0.7rem;
}
.waehler__wort {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--creme-still);
  opacity: 0.75;
  margin-right: 0.3rem;
}
.waehler__wahl {
  border: 1px solid transparent;
  background: none;
  color: var(--creme-still);
  font-family: var(--serif);
  font-size: 0.85rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 300ms ease, background 300ms ease, border-color 300ms ease;
}
.waehler__wahl:hover, .waehler__wahl:focus-visible {
  opacity: 1;
  background: rgba(244, 239, 230, 0.08);
}
.waehler__wahl[aria-pressed="true"] {
  opacity: 1;
  color: var(--creme);
  border-color: rgba(200, 169, 126, 0.55);
  background: rgba(200, 169, 126, 0.12);
}


/* Tag ist Tag, Nacht ist Nacht: Die Uhr des Betrachters legt ein Licht über
   die Landschaft. Nachts beginnt der Ort ohnehin unter Sternen. */
.himmel[data-zeit="daemmerung"] .himmel__schleier {
  background:
    linear-gradient(to bottom, rgba(64, 40, 52, 0.25), rgba(209, 141, 77, 0.13) 52%, rgba(22, 16, 24, 0.4)),
    radial-gradient(58% 46% at 50% 58%, rgba(9, 17, 13, 0.34), transparent 74%),
    linear-gradient(to bottom, rgba(12, 22, 17, 0.6) 0%, transparent 26%,
                    transparent 44%, rgba(9, 17, 13, 0.9) 100%);
}
.himmel[data-zeit="nacht"] .himmel__schleier {
  background:
    linear-gradient(to bottom, rgba(10, 14, 30, 0.32), rgba(10, 14, 30, 0.16) 50%, rgba(6, 10, 20, 0.48)),
    radial-gradient(58% 46% at 50% 58%, rgba(9, 17, 13, 0.34), transparent 74%),
    linear-gradient(to bottom, rgba(12, 22, 17, 0.6) 0%, transparent 26%,
                    transparent 44%, rgba(9, 17, 13, 0.9) 100%);
}

/* ---------- Die Blüten der Erinnerung ---------- */

.bluete__erinnerung { cursor: pointer; }
.bluete__erinnerung:focus { outline: none; }
.bluete__erinnerung:focus-visible .bluete__krone,
.bluete__erinnerung:hover .bluete__krone { filter: drop-shadow(0 0 6px rgba(244, 239, 230, 0.6)); }

/* ---------- Die Gießkanne ---------- */

/* Sie steht am Boden und will genommen werden — solange man sie hält,
   folgt sie dem Finger, und der Zeiger zeigt es an. Ohne touch-action
   würde die Seite mitrutschen, statt dass die Kanne sich hebt. */
/* Kein Schlagschatten im Ruhezustand — dieselbe Regel wie beim Baum: Der
   gemalte Grund kennt keine solchen Kanten. Erst wer sie berührt, sieht
   sie aufleuchten. */
.kanne {
  cursor: grab;
  touch-action: none;
  outline: none;
}
.kanne--gehalten { cursor: grabbing; }
.kanne:hover    { filter: drop-shadow(0 0 9px rgba(233, 207, 154, 0.5)); }
.kanne:focus-visible {
  filter: drop-shadow(0 0 7px rgba(244, 239, 230, 0.85));
}

/* Wird gegossen, öffnet sich jede Blüte kurz weiter — sie wächst nicht,
   sie atmet. Die Herkunft der Bewegung ist die Blüte selbst, deshalb
   fill-box: sonst skalierte sie um den Nullpunkt des Baums davon. */
.bluete__krone { transform-box: fill-box; transform-origin: 50% 50%; }
.bluete__krone--getraenkt { animation: bluete-getraenkt 1.5s cubic-bezier(0.34, 0, 0.3, 1); }
@keyframes bluete-getraenkt {
  0%   { transform: scale(1); }
  28%  { transform: scale(1.28); }
  56%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .bluete__krone--getraenkt { animation: none; }
}

/* Vorschau dicht an der Blüte — fest am Viewport, über der Aktionsleiste. */
.bluete__wort {
  position: fixed;
  left: 0;
  top: 0;
  width: max-content;
  max-width: 15rem;
  padding: 0.55rem 0.85rem 0.6rem;
  border-radius: 0.7rem;
  background: rgba(12, 22, 17, 0.94);
  border: 1px solid rgba(200, 169, 126, 0.4);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  text-align: center;
  color: var(--creme);
  pointer-events: none;
  z-index: 45;
  opacity: 0;
  /* Anker = Oberkante der Blüte; Karte sitzt knapp darüber. */
  transform: translate(-50%, calc(-100% - 0.45rem)) translateY(0.25rem) scale(0.96);
  transition:
    opacity 260ms ease,
    transform 320ms cubic-bezier(0.22, 0.82, 0.28, 1);
}
.bluete__wort--sichtbar {
  opacity: 1;
  transform: translate(-50%, calc(-100% - 0.45rem)) translateY(0) scale(1);
}
/* Anker = Unterkante der Blüte; Karte sitzt knapp darunter. */
.bluete__wort--unten {
  transform: translate(-50%, 0.45rem) translateY(-0.25rem) scale(0.96);
}
.bluete__wort--unten.bluete__wort--sichtbar {
  transform: translate(-50%, 0.45rem) translateY(0) scale(1);
}
.bluete__wort-leise {
  display: block;
  font-family: var(--serif);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--creme-still);
  opacity: 0.82;
  margin-bottom: 0.22rem;
}
.bluete__wort-name {
  display: block;
  font-family: var(--display);
  font-style: normal;
  font-size: 1.15rem;
  line-height: 1.15;
  color: var(--gold);
}
@media (prefers-reduced-motion: reduce) {
  .bluete__wort {
    transition: opacity 100ms ease;
    transform: translate(-50%, calc(-100% - 0.45rem));
  }
  .bluete__wort--sichtbar { transform: translate(-50%, calc(-100% - 0.45rem)); }
  .bluete__wort--unten,
  .bluete__wort--unten.bluete__wort--sichtbar { transform: translate(-50%, 0.45rem); }
}

/* Die Kerzen der Besucher: kleine Lichter am Boden, jedes mit eigenem Atem. */
.licht-punkt {
  animation: licht-flackern var(--flacker-dauer, 3s) ease-in-out var(--flacker-versatz, 0s) infinite alternate;
}
@keyframes licht-flackern {
  from { opacity: 0.45; }
  to   { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .licht-punkt { animation: none; }
}

/* ---------- Das Fenster einer Erinnerung ---------- */

/* Ein Klick auf eine Blüte öffnet die Erinnerung hier — niemand muss durch
   die halbe Seite scrollen und den Weg zurück suchen. */
.schleier-fenster {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  background: rgba(9, 17, 13, 0.7);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.schleier-fenster[hidden] { display: none; }

.fenster {
  position: relative;
  width: min(28rem, 100%);
  max-height: min(84svh, 42rem);
  overflow: auto;
  padding: clamp(1.4rem, 4vw, 2.2rem);
  text-align: center;
  animation: fenster-auf 340ms cubic-bezier(0.2, 0.9, 0.3, 1);
}
@keyframes fenster-auf {
  from { opacity: 0; translate: 0 0.9rem; scale: 0.97; }
}
@media (prefers-reduced-motion: reduce) {
  .fenster { animation: none; }
}

.fenster__bild { margin: 1rem 0 0; }
.fenster__bild img {
  display: block;
  width: 100%;
  max-height: 15rem;
  object-fit: cover;
  border-radius: 0.6rem;
}
.fenster__text {
  margin-top: 1.1rem;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.65;
  color: var(--creme);
}
.fenster__wer {
  margin-top: 0.9rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.fenster__zu {
  margin-top: 1.4rem;
  border: 1px solid rgba(244, 239, 230, 0.25);
  background: rgba(244, 239, 230, 0.06);
  color: var(--creme-still);
  font-family: var(--serif);
  font-size: 0.9rem;
  padding: 0.55rem 1.4rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 300ms ease, color 300ms ease;
}
.fenster__zu:hover, .fenster__zu:focus-visible {
  background: rgba(244, 239, 230, 0.12);
  color: var(--creme);
}

/* ---------- Das Erinnerungsbuch: eine Seite, Vor/Zurück ---------- */

/* Einband vorne, Seiten übereinander. Große Pfeile links/rechts am Buch.
   Oben „Eintrag erstellen“, unten der Seitenstand als Knopf. */
.hueter--buch {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
}
.buch__oben,
.buch__unten {
  display: flex;
  justify-content: center;
  width: 100%;
  margin: 0;
}
.buch-gestell {
  display: grid;
  grid-template-columns: auto minmax(0, 34rem) auto;
  align-items: center;
  gap: 0.55rem;
  width: min(42rem, 100%);
}
.buch {
  position: relative;
  width: 100%;
  height: auto;
  margin: 0;
  outline: none;
}
.blattseite { display: contents; }

.buchseite {
  position: relative;
  overflow: visible;
  display: flex;
  flex-direction: column;
  min-height: clamp(26rem, 78vw, 34rem);
  padding: clamp(1.3rem, 3.2vw, 2.4rem) clamp(1.3rem, 3vw, 2.2rem);
  background: linear-gradient(105deg, #e9e0cc 0%, #f6f0e0 14%, #f2ead7 55%, #e4dac2 100%);
  border-radius: 10px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.42);
  color: #3a3227;
}
/* Einband behält den harten Kasten — sonst läuft das Bildnis über den Goldrahmen. */
.buchseite--deckel {
  overflow: hidden;
}
.buchseite[hidden] { display: none !important; }
.buchseite--leer,
.buchseite--ruecken { display: none !important; }

.buchseite img,
.buchseite video,
.buchseite .einlage {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.buchseite .einlage img,
.buchseite .einlage video {
  max-height: 14rem;
  object-fit: cover;
}

/* Große Pfeile an den Buchseiten. */
.buch__pfeil {
  appearance: none;
  border: 0;
  background: rgba(244, 239, 230, 0.1);
  color: var(--creme);
  width: 3.8rem;
  height: 3.8rem;
  border-radius: 999px;
  font-family: var(--serif);
  font-size: 2.85rem;
  line-height: 1;
  display: grid;
  place-items: center;
  cursor: pointer;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
  flex-shrink: 0;
}
.buch__pfeil:hover,
.buch__pfeil:focus-visible {
  background: rgba(200, 169, 126, 0.28);
  color: var(--gold);
  outline: none;
}
.buch__pfeil:disabled {
  opacity: 0.28;
  cursor: default;
  box-shadow: none;
}

.buch__knopf {
  border: 1px solid rgba(244, 239, 230, 0.22);
  background: rgba(244, 239, 230, 0.06);
  color: var(--creme-still);
  font-family: var(--serif);
  font-size: 0.88rem;
  padding: 0.55rem 1.15rem;
  border-radius: 0.65rem;
  cursor: pointer;
  text-decoration: none;
}
.buch__knopf:hover, .buch__knopf:focus-visible {
  background: rgba(244, 239, 230, 0.14);
  color: var(--creme);
}
.buch__knopf:disabled {
  opacity: 0.85;
  cursor: default;
  color: var(--creme-still);
}
.buch__knopf--eintrag {
  border-color: rgba(200, 169, 126, 0.55);
  color: var(--gold);
  font-size: 0.95rem;
  padding: 0.65rem 1.4rem;
}
.buch__knopf--eintrag:hover, .buch__knopf--eintrag:focus-visible {
  background: rgba(200, 169, 126, 0.28);
}
.buch__knopf--stand {
  min-width: 9.5rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.78rem;
  opacity: 0.92;
}
.buch__steuer,
.buch__wink,
.buch__stand { display: none; }

@media (max-width: 699px) {
  .buch-gestell {
    grid-template-columns: 2.9rem minmax(0, 1fr) 2.9rem;
    gap: 0.2rem;
    width: 100%;
  }
  .buch__pfeil {
    width: 2.9rem;
    height: 2.9rem;
    font-size: 2.2rem;
  }
  .buchseite {
    min-height: 24rem;
  }
  .buchseite--deckel {
    min-height: 26rem;
  }
}

/* Schrift auf Papier — dunkel auf hell, sonst wie überall. */
.buchseite h3 {
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: #2f2820;
  margin: 0.5rem 0 0.9rem;
  text-shadow: none;
}
.buchseite p { max-width: none; }
.buchseite > p:not([class]),
.buchseite__frei,
.buchseite__frei p {
  font-size: clamp(0.92rem, 1.5vw, 1.02rem);
  line-height: 1.68;
  color: #4a4133;
}
.buchseite__frei p { margin-top: 0.5rem; }
.buchseite__frei p:first-child { margin-top: 0; }
.buchseite__kapitelzeit {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a6f45;
}
.buchseite__wer {
  margin: 0.15rem 0 0.7rem;
  font-size: 0.88rem;
  font-style: italic;
  color: #6a5d48;
}

/* Die Blüte des Eintrags, neben dem Namen im Buch — dieselbe Farbe, die
   sie draußen am Baum trägt. Sie steht in der Zeile, nicht darüber. */
.buchseite__bluete {
  width: 1.5em;
  height: 1.5em;
  vertical-align: -0.42em;
  margin-right: 0.45em;
  flex: none;
}

/* Das Bildnis: wie eine Radierung — schwarzweiß, ohne Kontur.
   Die weiche Ellipse sitzt am Rahmen (.bildnis-fass), nicht am <img>,
   sonst bleibt die rechteckige Bounding-Box sichtbar. */
.buchseite__bildnis {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  color: #6b5f4c;
  filter: grayscale(1) contrast(1.18) brightness(1.06) sepia(0.32);
  opacity: 0.78;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.buchseite__bildnis-fass {
  display: block;
  position: relative;
  width: min(92%, 22rem);
  aspect-ratio: 1 / 1.12;
  margin: 0 auto;
  overflow: visible;
  -webkit-mask-image: radial-gradient(
    ellipse 62% 66% at 50% 44%,
    #000 0%,
    #000 18%,
    rgba(0, 0, 0, 0.8) 38%,
    rgba(0, 0, 0, 0.4) 55%,
    rgba(0, 0, 0, 0.12) 70%,
    transparent 86%
  );
  mask-image: radial-gradient(
    ellipse 62% 66% at 50% 44%,
    #000 0%,
    #000 18%,
    rgba(0, 0, 0, 0.8) 38%,
    rgba(0, 0, 0, 0.4) 55%,
    rgba(0, 0, 0, 0.12) 70%,
    transparent 86%
  );
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.buchseite__bildnis-fass > .buchseite__bildnis {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
}
/* Klickbarer Träger für den Besitzer — Maske nur innen am Fass. */
.buchseite__bildnis-wahl {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  width: min(92%, 22rem);
  margin: 0 auto 0.15rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: inherit;
  font: inherit;
  text-align: center;
}
.buchseite__bildnis-wahl .buchseite__bildnis-fass {
  width: 100%;
  margin: 0;
}
.buchseite__bildnis-wahl:hover .buchseite__bildnis,
.buchseite__bildnis-wahl:focus-visible .buchseite__bildnis {
  opacity: 0.92;
  filter: grayscale(1) contrast(1.22) brightness(1.04) sepia(0.28);
}
.buchseite__bildnis-wahl:focus-visible {
  outline: 2px solid rgba(200, 169, 126, 0.7);
  outline-offset: 4px;
  border-radius: 4px;
}
/* Hinweis nur beim Berühren — nicht zwischen Foto und Name im Fluss. */
.buchseite__bildnis-wink {
  position: absolute;
  left: 50%;
  bottom: 10%;
  z-index: 2;
  margin: 0;
  padding: 0.35rem 0.7rem;
  transform: translateX(-50%);
  border-radius: 999px;
  background: rgba(246, 240, 224, 0.88);
  box-shadow: 0 2px 10px rgba(60, 48, 30, 0.18);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  font-style: italic;
  color: #6a5d48;
  opacity: 0;
  pointer-events: none;
  white-space: nowrap;
  transition: opacity 220ms ease;
}
.buchseite__bildnis-wahl:hover .buchseite__bildnis-wink,
.buchseite__bildnis-wahl:focus-visible .buchseite__bildnis-wink,
.buchseite__bildnis-wahl--leer .buchseite__bildnis-wink {
  opacity: 1;
}
.buchseite__bildnis-wahl:disabled {
  cursor: wait;
  opacity: 0.7;
}
.buchseite__bildnis-wahl:disabled .buchseite__bildnis-wink {
  opacity: 1;
}
/* Deckel: dunkler Grund — multiply zeichnet ein Rechteck.
   soft-light + starke Ellipse, exakt mittig hinter Name und Blüte. */
.buchseite--deckel .buchseite__bildnis-fass {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 98%;
  height: 98%;
  max-width: none;
  aspect-ratio: auto;
  margin: 0;
  transform: translate(-50%, -50%);
  z-index: 0;
  -webkit-mask-image: radial-gradient(
    ellipse 64% 68% at 50% 48%,
    #000 0%,
    #000 16%,
    rgba(0, 0, 0, 0.75) 36%,
    rgba(0, 0, 0, 0.35) 54%,
    rgba(0, 0, 0, 0.1) 70%,
    transparent 86%
  );
  mask-image: radial-gradient(
    ellipse 64% 68% at 50% 48%,
    #000 0%,
    #000 16%,
    rgba(0, 0, 0, 0.75) 36%,
    rgba(0, 0, 0, 0.35) 54%,
    rgba(0, 0, 0, 0.1) 70%,
    transparent 86%
  );
}
.buchseite--deckel .buchseite__bildnis {
  color: var(--creme);
  opacity: 0.55;
  filter: grayscale(1) contrast(1.2) brightness(0.95) sepia(0.2);
  mix-blend-mode: soft-light;
}
.buchseite--deckel .buchseite__zier,
.buchseite--deckel .buchseite__reihe,
.buchseite--deckel .buchseite__deckelname {
  position: relative;
  z-index: 1;
}
.buchseite__nummer {
  margin-top: auto;
  padding-top: 0.8rem;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.8rem;
  color: #8a7a5e;
}

/* Der Einband: wie ein gebundenes Buchcover — Leder, Gold, Rückenfalz. */
.buchseite--deckel,
.buchseite--ruecken {
  align-items: center;
  justify-content: flex-end;
  text-align: center;
  gap: 0;
  min-height: clamp(28rem, 84vw, 38rem);
  padding: clamp(1.6rem, 4vw, 2.8rem);
  padding-bottom: clamp(2.2rem, 6vw, 3.4rem);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.38) 0%, transparent 4.5%),
    linear-gradient(135deg, #3a3224 0%, #2a2418 28%, #1a1710 72%, #12100c 100%);
  color: var(--gold);
  box-shadow:
    inset 0 0 0 1px rgba(200, 169, 126, 0.18),
    inset 0 0 60px rgba(0, 0, 0, 0.35),
    0 16px 42px rgba(0, 0, 0, 0.5);
}
.buchseite--deckel::before {
  content: "";
  position: absolute;
  inset: 0.55rem;
  border: 1px solid rgba(200, 169, 126, 0.28);
  border-radius: 4px;
  pointer-events: none;
  z-index: 1;
}
.buchseite--deckel::after {
  content: "";
  position: absolute;
  inset: 0.95rem;
  border: 1px solid rgba(200, 169, 126, 0.48);
  border-radius: 3px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(200, 169, 126, 0.12);
  z-index: 1;
}
.buchseite__einband {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.28rem;
  max-width: 18rem;
  padding: 0.2rem 0.6rem;
}
.buchseite__zier { width: 2.4rem; height: 2.4rem; color: #8a6f45; }
.buchseite--deckel .buchseite__zier {
  width: 3rem;
  height: 3rem;
  color: var(--gold);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.45));
}
.buchseite__reihe {
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0;
}
.buchseite--deckel .buchseite__reihe {
  font-size: 0.68rem;
  letter-spacing: 0.34em;
  opacity: 0.92;
}
.buchseite__deckelname {
  font-family: var(--display);
  font-size: clamp(1.7rem, 3.4vw, 2.3rem);
  color: var(--creme);
  margin: 0;
}
.buchseite--deckel .buchseite__deckelname {
  font-size: clamp(2rem, 4.2vw, 2.85rem);
  font-weight: 500;
  line-height: 1.1;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}
.buchseite__deckelzeit {
  margin: 0;
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: rgba(244, 239, 230, 0.78);
  letter-spacing: 0.04em;
}

/* Titelblatt und Zitatseite: stille, mittige Seiten. */
.buchseite--titel,
.buchseite--zitat {
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.6rem;
}
/* Titelseite: Bildnis und Name als eine Gruppe — nicht auseinandergezogen. */
.buchseite--titel {
  justify-content: flex-start;
  padding-top: clamp(1.4rem, 5vh, 2.8rem);
  gap: 0.35rem;
}
.buchseite--titel .buchseite__bildnis-wahl,
.buchseite--titel .buchseite__bildnis-fass {
  width: min(86%, 18rem);
  max-height: min(42vh, 16rem);
  aspect-ratio: 1 / 1.05;
}
.buchseite--titel .buchseite__bildnis-wahl .buchseite__bildnis-fass {
  max-height: min(42vh, 16rem);
}
.buchseite--titel h3 {
  margin: 0.15rem 0 0.1rem;
  font-size: clamp(1.85rem, 5.5vw, 2.55rem);
  line-height: 1.15;
}
.buchseite--titel .buchseite__zeit {
  margin: 0;
  font-size: clamp(1.05rem, 2.8vw, 1.35rem);
  letter-spacing: 0.2em;
  text-indent: 0.2em;
}
.buchseite--titel .buchseite__leise {
  margin-top: 0.55rem;
  font-size: clamp(0.95rem, 2.2vw, 1.1rem);
}
.buchseite__zeit {
  font-family: var(--display);
  letter-spacing: 0.24em;
  text-indent: 0.24em;
  color: #6d5f49;
}
.buchseite__leise {
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: #7a6b52;
}
.buchseite__zitat {
  font-family: var(--display);
  font-style: italic;
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  line-height: 1.7;
  color: #4a4133;
  max-width: 17rem;
}

/* Bild- und Videoseiten: wie ein eingeklebter Abzug im Album. */
.buchseite--bild { justify-content: center; }
.buchseite--bild figure {
  margin: 0;
  background: #fbf7ec;
  padding: 0.5rem;
  border-radius: 3px;
  box-shadow: 0 8px 22px rgba(60, 48, 30, 0.35);
  rotate: -1.2deg;
}
.buchseite--bild img,
.buchseite--bild video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.buchseite--bild figcaption {
  padding: 0.55rem 0.2rem 0.6rem;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.92rem;
  color: #4d4438;
}

.buchseite--einladung .buchseite__einladungsweg { margin-top: 1.1rem; }
.buchseite--einladung a {
  color: #8a6f45;
  text-decoration: none;
  border-bottom: 1px solid rgba(138, 111, 69, 0.5);
  padding-bottom: 0.15rem;
}
.buchseite--einladung a:hover { color: #5d4a2c; border-color: #5d4a2c; }

/* Die Steuerung darunter. */
/* Die Knöpfe stehen genau unter dem Buch: dieselbe Breite wie es, und die
   äußeren bündig mit seinen Kanten. Wird es eng, rücken sie zusammen und
   stellen sich mittig — lieber gedrängt als über den Rand hinaus. */
/* ---------- Der Eintrags-Editor: eine Buchseite zum Beschreiben ---------- */

/* Kein Formular neben dem Buch, sondern eine Seite AUS dem Buch: dasselbe
   Papier, dieselbe Schrift. Was man tippt, ist genau das, was im Buch
   stehen wird. */
.schleier-fenster--editor { z-index: 50; }

/* Breit statt hoch: links die Seite, rechts alles Werkzeug — nichts muss
   rollen, alles ist auf einen Blick da. */
.editor {
  position: relative;
  width: min(56rem, 96vw);
  max-height: min(94svh, 46rem);
  overflow: auto;
  padding: clamp(1.2rem, 3vw, 1.8rem);
  text-align: left;
  display: grid;
  grid-template-columns: minmax(0, 30rem) minmax(15rem, 1fr);
  grid-auto-rows: min-content;
  column-gap: clamp(1.2rem, 3vw, 2rem);
}
.editor .ueberschrift-klein {
  grid-column: 1 / -1;
  text-align: center;
  margin-bottom: 0.9rem;
}
.editor__zeit { grid-column: 1 / -1; margin-bottom: 0.35rem; }
.editor__wer { grid-column: 1 / -1; margin-bottom: 0.7rem; }
.editor__blaetter { grid-column: 1; grid-row: 4 / span 4; }
.editor__seitenzeile { grid-column: 2; justify-content: flex-start; margin-top: 0; }
.editor__werkzeuge { grid-column: 2; }
.editor__farbe { grid-column: 2; }
.editor__fuss { grid-column: 2; align-self: end; }

@media (max-width: 780px) {
  .editor {
    display: block;
    width: min(36rem, 96vw);
  }
}

.editor__seite {
  background: linear-gradient(105deg, #e9e0cc 0%, #f6f0e0 14%, #f2ead7 55%, #e4dac2 100%);
  border-radius: 8px;
  box-shadow: inset 0 0 30px rgba(60, 48, 30, 0.14), 0 10px 30px rgba(0, 0, 0, 0.35);
  padding: clamp(1.1rem, 3vw, 1.8rem);
  color: #3a3227;
}
.editor__zeit {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--serif);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8a6f45;
}
.editor__zeit::placeholder {
  color: rgba(138, 111, 69, 0.55);
  text-transform: none;
  letter-spacing: 0.08em;
}
.editor__wer {
  display: block;
  width: 100%;
  border: 0;
  background: none;
  outline: none;
  font-family: var(--serif);
  font-size: 0.95rem;
  color: #5a4e3a;
  font-style: italic;
}
.editor__wer::placeholder {
  color: rgba(90, 78, 58, 0.42);
  font-style: italic;
}
.editor__titel {
  margin: 0.5rem 0 0.9rem;
  font-family: var(--display);
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  color: #2f2820;
  text-shadow: none;
  outline: none;
}
.editor__text {
  font-size: 1rem;
  line-height: 1.68;
  color: #4a4133;
  min-height: 9rem;
  outline: none;
}
.editor__titel:empty::before,
.editor__text:empty::before {
  content: attr(data-platzhalter);
  color: rgba(90, 78, 58, 0.42);
  font-style: italic;
  pointer-events: none;
}

/* Eingelegte Bilder und Videos — wie Abzüge im Album, im Editor wie im Buch. */
.einlage {
  margin: 0.9rem 0;
  background: #fbf7ec;
  padding: 0.5rem;
  border-radius: 3px;
  box-shadow: 0 6px 18px rgba(60, 48, 30, 0.3);
  rotate: -0.8deg;
}
.einlage img, .einlage video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 2px;
}
.buchseite__frei p { margin-top: 0.5rem; }
/* Die freie Fläche einer Buchseite: Bezugsrahmen für frei platzierte
   Einlagen — ihre Prozentwerte meinen genau diese Fläche. */
.buchseite__frei {
  position: relative;
  flex: 1;
  min-height: 0;
}

.editor__werkzeuge {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.9rem;
}
.editor__werk {
  border: 1px solid rgba(244, 239, 230, 0.22);
  background: rgba(244, 239, 230, 0.05);
  color: var(--creme-still);
  font-family: var(--serif);
  min-width: 2.1rem;
  height: 2.1rem;
  padding: 0 0.6rem;
  border-radius: 0.55rem;
  cursor: pointer;
  transition: background 300ms ease, color 300ms ease;
}
.editor__werk:hover, .editor__werk:focus-visible {
  background: rgba(200, 169, 126, 0.15);
  color: var(--creme);
}
.editor__strich { width: 1px; height: 1.4rem; background: rgba(244, 239, 230, 0.2); }

.editor__fuss {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem 1.1rem;
  margin-top: 1.1rem;
}
.editor__legen {
  border: 1px solid rgba(200, 169, 126, 0.55);
  background: rgba(200, 169, 126, 0.16);
  color: var(--creme);
  font-family: var(--serif);
  font-size: 0.98rem;
  padding: 0.7rem 1.5rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 300ms ease, box-shadow 300ms ease;
}
.editor__legen:hover, .editor__legen:focus-visible {
  background: rgba(200, 169, 126, 0.28);
  box-shadow: 0 0 24px rgba(200, 169, 126, 0.25);
}
.editor__zu { margin-top: 0; }
.editor__hinweis {
  font-size: 0.8rem;
  color: var(--creme-still);
  opacity: 0.75;
  max-width: 22rem;
}

/* Ein Eintrag darf mehrere Seiten haben; gezeigt wird immer eine. Die
   Seite hat die Form der echten Buchseite — was hier passt, passt dort. */
.editor__blaetter { margin-top: 0; }
.editor__seite[hidden] { display: none; }
.editor__seite {
  position: relative;
  aspect-ratio: 13 / 14;
  overflow: hidden;
}
.editor__zeit { margin-top: 0.3rem; }
.editor__text {
  position: relative;
  min-height: 0;
  height: 100%;
}
.editor__seite h3 + .editor__text { height: auto; flex: 1; }
.editor__seite { display: flex; flex-direction: column; }

.editor__seitenzeile {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
}
.editor__seitenstand {
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--creme-still);
  opacity: 0.85;
  min-width: 8.5rem;
  text-align: center;
}

/* Fein: der leise Bruder von Fett. */
.fein { font-weight: 300; opacity: 0.88; }

/* Frei platzierte Einlagen: mit der Hand verschieben, an der Ecke ziehen.
   Ort und Größe leben in Prozenten der Seite — so stehen sie im Buch exakt
   dort, wo sie im Editor standen. */
.einlage--frei {
  position: absolute;
  margin: 0;
  cursor: grab;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}
.einlage--frei:active { cursor: grabbing; }
.einlage--frei img, .einlage--frei video {
  pointer-events: none;
  max-height: none;
}
.einlage__griff {
  position: absolute;
  right: -0.55rem;
  bottom: -0.55rem;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  border: 2px solid rgba(200, 169, 126, 0.9);
  background: var(--creme);
  cursor: nwse-resize;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}
/* Im fertigen Buch sind Griffe unsichtbar und Einlagen unantastbar. */
.buchseite .einlage__griff { display: none; }
.buchseite .einlage--frei { cursor: default; }

/* Die Farbe der Blüte: ein Ring mit allen Farben, die Probe in der Mitte. */
.editor__farbe {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: 1.1rem;
}
.editor__farbwort {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.farbring {
  position: relative;
  width: 5.6rem;
  aspect-ratio: 1;
  flex: none;
  border-radius: 50%;
  cursor: pointer;
  touch-action: none;
  outline: none;
}
.farbring::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    hsl(0 55% 80%), hsl(45 55% 80%), hsl(90 45% 78%), hsl(135 45% 78%),
    hsl(180 45% 80%), hsl(225 45% 82%), hsl(270 45% 82%), hsl(315 50% 82%),
    hsl(360 55% 80%));
  -webkit-mask: radial-gradient(closest-side, transparent 62%, #000 63%);
  mask: radial-gradient(closest-side, transparent 62%, #000 63%);
}
.farbring:focus-visible::before { filter: drop-shadow(0 0 8px rgba(200, 169, 126, 0.6)); }
.farbring__zeiger {
  position: absolute;
  left: 50%; top: 50%;
  width: 0.95rem; height: 0.95rem;
  border-radius: 50%;
  border: 2px solid var(--creme);
  background: rgba(12, 22, 17, 0.55);
  translate: -50% -50%;
  pointer-events: none;
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
}
.farbring__probe {
  position: absolute;
  inset: 24%;
  pointer-events: none;
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.35));
}

/* Der zweite Regler: die Kraft der Farbe. Sein Balken zeigt selbst, was er
   tut — von blass nach satt, im gewählten Ton. */
.editor__kraftfeld {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1 1 9rem;
  min-width: 8rem;
  cursor: pointer;
}
.editor__kraft {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 0.42rem;
  border-radius: 999px;
  background: linear-gradient(to right,
    rgba(244, 239, 230, 0.5), rgba(200, 169, 126, 0.75), var(--gold));
  outline: none;
  cursor: pointer;
}
.editor__kraft::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  border: 2px solid var(--creme);
  background: rgba(12, 22, 17, 0.6);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  cursor: grab;
}
.editor__kraft::-moz-range-thumb {
  width: 1.05rem; height: 1.05rem;
  border-radius: 50%;
  border: 2px solid var(--creme);
  background: rgba(12, 22, 17, 0.6);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.5);
  cursor: grab;
}
.editor__kraft:focus-visible { box-shadow: 0 0 0 2px rgba(200, 169, 126, 0.5); }

/* Bild und Video bleiben beieinander — sie wandern nur zusammen um. */
.editor__werkpaar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.45rem;
}

/* ---------- Lichtbilder ---------- */

/* Abzüge auf Papier, auf dunklen Samt gelegt: cremefarbener Rand, eine Spur
   verdreht, als hätte eine Hand sie hingelegt. Beim Näherkommen richten sie
   sich auf. */
.lichter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: clamp(1.4rem, 3.2vw, 2.4rem);
  margin-top: clamp(1.6rem, 4vw, 2.6rem);
  /* Platz für die leichte Drehung — sonst schneidet overflow den Papierrand ab. */
  padding: 0.65rem 0.35rem 0.85rem;
  overflow: visible;
}
.licht {
  margin: 0;
  background: linear-gradient(175deg, #f7f2e9, #e9e2d3);
  /* Gleicher Papierrand rundum — auch ohne Bildunterschrift. */
  padding: 0.55rem;
  border-radius: 2px;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.45), 0 2px 8px rgba(0, 0, 0, 0.35);
  rotate: -1.1deg;
  transition: rotate 400ms ease, translate 400ms ease, box-shadow 400ms ease;
}
.licht:nth-child(2n)  { rotate: 1.3deg; }
.licht:nth-child(3n)  { rotate: -0.6deg; }
.licht:hover {
  rotate: 0deg;
  translate: 0 -0.35rem;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.4);
}
.licht img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.licht figcaption {
  padding: 0.5rem 0.15rem 0.1rem;
  text-align: center;
  font-family: var(--display);
  font-style: italic;
  font-size: 0.95rem;
  color: #4d4438;
}

/* ---------- Der ehrliche Hinweis ---------- */

.leise--entwurf {
  text-align: center;
  max-width: 34rem;
  margin: 0 auto clamp(2rem, 5vw, 3rem);
  padding: 0 var(--rand);
  font-size: 0.82rem;
  color: var(--creme-still);
  opacity: 0.7;
}

.leise__knopf {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.18em;
  cursor: pointer;
}

.leise__knopf:hover,
.leise__knopf:focus-visible {
  opacity: 1;
}

@media (max-width: 56rem) {
  .bluete__svg {
    height: min(62svh, 36rem);
  }
}

/* ---------- Der Ort auf dem Handy ---------- */

/* Hochkant ist der Platz nicht knapp, er ist ANDERS verteilt: 375 mal 812
   statt 1400 mal 800. Bis zum 02.08.2026 wurde derselbe Aufbau nur kleiner
   gerechnet, und das ging schief — die Gabenleiste stapelte ihre drei
   Knöpfe untereinander und war allein 140 px hoch, die Tafel nahm 91 % der
   Breite, und der Baum bekam den Rest. Also bekommt das Handy einen eigenen
   Aufbau: eine Zeile für die Gaben, eine schmale Zeile für die Landschaft,
   eine schmalere Tafel — und alles, was dadurch frei wird, gehört dem Baum.
   Er ist der Grund, warum jemand hier ist. */
@media (max-width: 40rem) {

  /* Die Landschaft: eine schmale Zeile, die man seitlich schieben kann. */
  .himmel .waehler {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    gap: 0.4rem;
    padding: 0 0.5rem 0.1rem;
    scrollbar-width: none;
  }
  .himmel .waehler::-webkit-scrollbar { display: none; }
  .waehler__wort { display: none; }
  .waehler__wahl { flex: none; font-size: 0.78rem; padding: 0.24rem 0.6rem; }

  /* Die Tafel unten: kompakt, aber lesbar — Gravur und größere Schrift
     bleiben; nur die Abstände werden enger. */
  .himmel__fuss {
    gap: 0.35rem;
    padding-bottom: 0.55rem;
  }
  .himmel__name {
    max-width: min(21rem, calc(100% - 1.2rem));
    padding: 0.48rem 0.85rem 0.58rem;
    border-radius: 0.6rem;
  }
  .himmel__name h1 { font-size: 1.95rem; line-height: 1.2; }
  .himmel__zeit { font-size: 0.98rem; letter-spacing: 0.16em; margin-top: 0.18rem; }
  .himmel__spruch { font-size: 0.92rem; max-width: 18rem; margin-top: 0.24rem; }
  .bluete__stand {
    font-size: 0.62rem;
    letter-spacing: 0.09em;
    line-height: 1.5;
    margin-top: 0.28rem;
  }
  .bluete__svg {
    height: min(56svh, 28rem);
  }
}