/*
 * fotonerd-schutz: gesperrte Bilder (Platzhalter + Schloss), Passwort-Dialog, einfache Entsperr-Seite.
 * Farben und Kurven kommen aus dem Seitendesign (--gelb, --papier, --raus ...), mit Rückfallwerten.
 */

/* ------------------------------------------------------------ gesperrtes Bild */
.gbild {
  --gb-gelb: var(--gelb, #f5c417);
  --gb-papier: var(--papier, #f4f1ea);
  --gb-dunkel: var(--schwarz, #0c0b0d);
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--gb-b, 4) / var(--gb-h, 5);
  overflow: hidden;
  background: #2a2830;
  container-type: inline-size;
  isolation: isolate;
}
.gbild__ph {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--gb-fokus, 50% 50%);
  /* nur der 28-px-Platzhalter wird weichgezeichnet und hochskaliert, nie das echte Bild */
  filter: blur(10px) saturate(1.05);
  transform: scale(1.18);
  transition: opacity .9s var(--raus, cubic-bezier(.2, .8, .2, 1)) .12s, filter .9s ease .12s;
  user-select: none; -webkit-user-drag: none;
}
.gbild__echt {
  position: absolute; inset: 0; z-index: 1;
  width: 100%; height: 100%;
  object-fit: cover; object-position: var(--gb-fokus, 50% 50%);
  opacity: 0;
  user-select: none; -webkit-user-drag: none;
}

/* Schloss: füllt das ganze Bild (große Tippfläche), Symbol und Hinweis in der Mitte */
.gbild__schloss {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .6rem;
  padding: .75rem;
  color: var(--gb-papier);
  text-decoration: none; text-align: center;
  background: rgb(12 11 13 / .22);
  cursor: pointer;
  transition: opacity .35s ease, transform .5s var(--raus, cubic-bezier(.2, .8, .2, 1)), background-color .25s;
  -webkit-tap-highlight-color: transparent;
}
.gbild__schloss--aus { cursor: default; }
@media (hover: hover) { a.gbild__schloss:hover { background: rgb(12 11 13 / .34); } }
.gbild__schloss:focus-visible { outline: 3px solid var(--gb-gelb); outline-offset: -6px; }
.gbild__icon {
  width: clamp(2.25rem, 18cqi, 3.5rem); height: auto;
  padding: .7rem; box-sizing: content-box;
  border-radius: 50%;
  background: rgb(12 11 13 / .82);
  color: var(--gb-papier);
  overflow: visible;
  box-shadow: 0 0 0 1px rgb(244 241 234 / .22);
}
.gbild__buegel { transform-box: view-box; transform-origin: 16px 10.5px; transition: transform .38s cubic-bezier(.34, 1.56, .64, 1); }
.gbild__hinweis {
  max-width: 17em;
  padding: .3em .8em;
  border-radius: 99px;
  background: rgb(12 11 13 / .82);
  font-size: .8125rem; line-height: 1.3; font-weight: 600;
  letter-spacing: .01em;
}
@container (max-width: 170px) { .gbild__hinweis { display: none; } }

/* Aufdecken */
.gbild.is-auf .gbild__buegel { transform: translateY(-2.6px) rotate(-32deg); }
.gbild.is-auf .gbild__icon { animation: gb-hupf .42s cubic-bezier(.34, 1.56, .64, 1); }
@keyframes gb-hupf { 0% { transform: scale(1); } 40% { transform: scale(1.22) rotate(-5deg); } 100% { transform: scale(1.08); } }

.gbild.is-zeigt .gbild__echt {
  opacity: 1;
  /* weiche Maske wächst aus der Mitte (vom Schloss) nach außen */
  -webkit-mask-image: radial-gradient(circle closest-side, #000 62%, transparent 100%);
          mask-image: radial-gradient(circle closest-side, #000 62%, transparent 100%);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%; mask-position: 50% 50%;
  animation: gb-maske 1.1s var(--raus, cubic-bezier(.2, .8, .2, 1)) both;
}
@keyframes gb-maske {
  from { -webkit-mask-size: 0% 0%; mask-size: 0% 0%; }
  to   { -webkit-mask-size: 340% 340%; mask-size: 340% 340%; }
}
.gbild.is-zeigt .gbild__ph { opacity: 0; filter: blur(26px); }
.gbild.is-zeigt .gbild__schloss { opacity: 0; transform: scale(1.35); pointer-events: none; background: transparent; }

/* nach der Seite schon freigeschaltet / bei „weniger Bewegung“: nur Einblenden */
.gbild.is-schnell .gbild__echt {
  animation: gb-blende .4s ease both;
  -webkit-mask-image: none; mask-image: none;
}
.gbild.is-schnell .gbild__ph { transition-delay: 0s; filter: none; }
.gbild.is-schnell .gbild__schloss { transition-duration: .25s; transform: none; }
@keyframes gb-blende { from { opacity: 0; } to { opacity: 1; } }

.gbild.is-frei .gbild__echt { opacity: 1; animation: none; -webkit-mask-image: none; mask-image: none; }
.gbild.is-frei .gbild__ph,
.gbild.is-frei .gbild__schloss { display: none; }

@media (prefers-reduced-motion: reduce) {
  .gbild__ph, .gbild__schloss, .gbild__buegel { transition-duration: .01ms; transition-delay: 0s; }
  .gbild.is-zeigt .gbild__echt { animation: gb-blende .25s ease both; -webkit-mask-image: none; mask-image: none; }
  .gbild.is-auf .gbild__icon { animation: none; }
  .gbild.is-auf .gbild__buegel { transform: none; }
  .gbild.is-zeigt .gbild__ph { filter: none; }
}

/* ------------------------------------------------------------ Passwort-Dialog */
.gdialog {
  --gb-gelb: var(--gelb, #f5c417);
  --gb-papier: var(--papier, #f4f1ea);
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  margin: auto;
  padding: 0;
  border: 1px solid rgb(244 241 234 / .16);
  border-radius: var(--r, 6px);
  background: var(--box, #1d1c20);
  color: var(--gb-papier);
  font-family: var(--schrift, system-ui, sans-serif);
  box-shadow: 0 30px 90px rgb(0 0 0 / .6);
  overflow: auto;
  animation: gd-rein .32s var(--raus, cubic-bezier(.2, .8, .2, 1));
}
.gdialog::backdrop { background: rgb(8 7 9 / .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: gd-blende .3s ease; }
.gdialog.is-zu { animation: gd-raus .16s ease forwards; }
.gdialog.is-zu::backdrop { animation: gd-raus .16s ease forwards; }
.gdialog.is-wackelt .gdialog__form { animation: gd-wackeln .42s cubic-bezier(.36, .07, .19, .97); }
@keyframes gd-rein { from { opacity: 0; transform: translateY(14px) scale(.97); } }
@keyframes gd-raus { to { opacity: 0; transform: translateY(6px) scale(.98); } }
@keyframes gd-blende { from { opacity: 0; } }
@keyframes gd-wackeln { 10%, 90% { transform: translateX(-2px); } 20%, 80% { transform: translateX(4px); } 30%, 50%, 70% { transform: translateX(-7px); } 40%, 60% { transform: translateX(7px); } }

.gdialog__form { position: relative; display: grid; gap: .5rem; padding: 2rem 1.75rem 1.75rem; }
.gdialog__zu {
  position: absolute; top: .5rem; right: .5rem;
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem;
  border: 0; border-radius: 50%; background: transparent; color: var(--gb-papier); cursor: pointer;
}
.gdialog__zu:hover { background: rgb(244 241 234 / .1); }
.gdialog__symbol { display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border-radius: 50%; background: var(--gb-gelb); color: var(--marke, #111012); margin-bottom: .5rem; }
.gdialog__titel { margin: 0; font-size: 1.5rem; line-height: 1.2; font-weight: 700; }
.gdialog__text { margin: 0 0 .75rem; color: var(--grau, #b3aea5); font-size: 1rem; line-height: 1.5; }
.gdialog__label { font-size: .9375rem; font-weight: 600; }
.gdialog__feld {
  width: 100%; box-sizing: border-box; min-height: 3.25rem; padding: .6rem .9rem;
  border: 1px solid rgb(244 241 234 / .38); border-radius: var(--r, 6px);
  background: var(--schwarz, #0c0b0d); color: var(--gb-papier);
  font: inherit; font-size: 1.0625rem;
}
.gdialog__feld[aria-invalid="true"] { border-color: #ff8a80; }
.gdialog__feld:focus-visible { outline: 2px solid var(--gb-gelb); outline-offset: 2px; }
.gdialog__fehler { min-height: 1.4em; margin: 0; color: #ffb4ab; font-size: .9375rem; line-height: 1.4; }
.gdialog__knoepfe { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .25rem; }
.gdialog__knopf {
  min-height: 3rem; padding: 0 1.5rem; border-radius: 99px;
  border: 2px solid var(--gb-gelb); font: inherit; font-weight: 700; font-size: 1rem; cursor: pointer;
  transition: background-color .2s, color .2s, scale .16s;
}
.gdialog__knopf:active { scale: .97; }
.gdialog__knopf--haupt { background: var(--gb-gelb); color: var(--marke, #111012); }
.gdialog__knopf--haupt:hover { background: var(--gb-papier); border-color: var(--gb-papier); }
.gdialog__knopf--rand { background: transparent; color: var(--gb-papier); border-color: rgb(244 241 234 / .38); }
.gdialog__knopf--rand:hover { border-color: var(--gb-papier); }
.gdialog__knopf:focus-visible { outline: 2px solid var(--gb-papier); outline-offset: 3px; }
.gdialog__knopf:disabled { opacity: .6; cursor: progress; }
.gdialog.is-sendet .gdialog__symbol { animation: gd-puls 1s ease-in-out infinite; }
@keyframes gd-puls { 50% { transform: scale(1.08); } }

@media (prefers-reduced-motion: reduce) {
  .gdialog, .gdialog::backdrop, .gdialog.is-zu, .gdialog.is-zu::backdrop { animation-duration: .01ms; }
  .gdialog.is-wackelt .gdialog__form { animation: none; }
  .gdialog.is-sendet .gdialog__symbol { animation: none; }
}

/* ------------------------------------------------------------ einfache Seite (ohne JavaScript) */
.gseite { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 1.25rem; background: #0c0b0d; color: #f4f1ea; font-family: system-ui, sans-serif; line-height: 1.5; }
.gseite__karte { width: min(30rem, 100%); padding: 2rem; border-radius: 6px; background: #1d1c20; }
.gseite h1 { margin: 0 0 1rem; font-size: 1.6rem; line-height: 1.2; }
.gseite p { margin: 0 0 1rem; }
.gseite__nojs { color: #b3aea5; font-size: .9375rem; }
.gseite__fehler { color: #ffb4ab; font-weight: 600; }
.gseite label { display: block; margin-bottom: .35rem; font-weight: 600; }
.gseite input[type="password"] { width: 100%; box-sizing: border-box; min-height: 3.25rem; padding: .6rem .9rem; border: 1px solid rgb(244 241 234 / .4); border-radius: 6px; background: #0c0b0d; color: inherit; font: inherit; font-size: 1.0625rem; }
.gseite button { margin-top: 1rem; min-height: 3rem; padding: 0 1.75rem; border: 0; border-radius: 99px; background: #f5c417; color: #111012; font: inherit; font-weight: 700; cursor: pointer; }
.gseite a { color: #f5c417; }
.gseite :focus-visible { outline: 2px solid #f5c417; outline-offset: 3px; }
.gseite__bild { margin: 0 0 1rem; }
.gseite__bild img { display: block; width: 100%; height: auto; border-radius: 4px; }
.gseite__bild figcaption { margin-top: .5rem; color: #b3aea5; font-size: .9375rem; }

/* ------------------------------------------------------------ gesperrtes Bild in Rasterkacheln (Link außen, Schloss ohne eigenen Link) */
.raster__link .gbild { height: 100%; aspect-ratio: auto; }
.raster .raster__link .gbild img.gbild__ph { transition: opacity .9s var(--raus, cubic-bezier(.2, .8, .2, 1)) .12s, filter .9s ease .12s; transform: scale(1.18); }
.raster .raster__link:hover .gbild img.gbild__ph { transform: scale(1.18); }
.raster .raster__link:active .gbild img.gbild__ph { filter: blur(10px) saturate(1.05); }
.raster .raster__link .gbild.is-zeigt img.gbild__ph { filter: blur(0); transform: scale(1); }
.raster .raster__link .gbild img.gbild__echt { transition: opacity .9s var(--raus, cubic-bezier(.2, .8, .2, 1)); }
.raster__link .gbild__schloss { pointer-events: none; }
.raster__link:focus-visible { outline: 3px solid var(--gb-gelb, #f5c417); }