/*
Theme Name: Firnlicht
Theme URI: https://testumgebung.neonarc.com
Author: Neon Arc (UCOS Route C)
Description: Block-Theme für das fiktive Suiten-Refugium „Firnlicht" — Route-C-Experiment der UCOS-Engine. Full Site Editing, theme.json-basiert, Signatur „Firnlicht-Glühen". Demonstrationsprojekt, kein reales Hotel.
Version: 0.3.3
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: firnlicht
*/

/* Kein Element darf die Seite horizontal aufschieben; clip statt hidden,
   damit position:sticky im Inneren funktionsfähig bliebe. */
.wp-site-blocks { overflow-x: clip; }

/* Die Marke ist bewusst hell (Firn/Fichte) — der Browser soll Formularfelder
   und Scrollbalken im Dunkelmodus nicht umfärben. */
:root { color-scheme: light; }

/* Basisgröße 18px (settings.json): WordPress setzt keine Wurzelgröße, die
   rem-Skala der theme.json rechnet aber gegen genau diese Wurzel. */
html { font-size: 18px; }

/* ---------------------------------------------------------------
   Signatur „Firnlicht-Glühen" — Ergänzungen, die theme.json nicht
   abbilden kann (Zustände, Selektoren, Bewegung). Tokens kommen als
   --wp--preset--* aus der theme.json; hier werden sie nur verwendet.
   --------------------------------------------------------------- */

/* Lesbarkeit: Fließtext maximal ~70 Zeichen */
.wp-block-post-content p { max-width: 70ch; }

/* Feine Gliederungslinie statt Karten-Schatten */
.glut-linie { border-top: 1px solid var(--wp--preset--color--nebel); }

/* --- Anblick (Hero): Vollbild, Bildwelt, Abendwerden ------------ */
.anblick {
  position: relative;
  min-height: calc(100vh - 6.5rem);
  min-height: calc(100svh - 6.5rem);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  isolation: isolate;
}
/* Stapelfolge (Fund 31.08.: negative z-Indizes werden unter dem
   Seitenhintergrund weggemalt): Bild 0 · Scrim 1 · Inhalt 2. */
.anblick .anblick-bild,
.anblick .anblick-bild img {
  position: absolute;
  inset: 0;
  margin: 0 !important;
  max-width: none !important;
  width: 100%;
  z-index: 0;
}
.anblick .anblick-bild img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@keyframes anblick-atmen { from { transform: scale(1); } to { transform: scale(1.07); } }
.anblick .anblick-bild img {
  animation: anblick-atmen 22s ease-in-out infinite alternate;
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) { .anblick .anblick-bild img { animation: none; } }
.anblick > :not(.anblick-bild) { position: relative; z-index: 2; }
.anblick::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(20, 27, 23, 0.82) 0%, rgba(20, 27, 23, 0.28) 38%, rgba(20, 27, 23, 0) 62%);
}
.anblick .anblick-ort {
  font-size: var(--wp--preset--font-size--klein);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--firnrose);
}
.anblick :is(h1, h2, h3) { color: inherit; }
.anblick h1 {
  font-size: clamp(3.5rem, 9vw, 7.5rem);
  line-height: 1.02;
  letter-spacing: -0.015em;
  margin: 0.1em 0 0.15em;
}
.anblick .anblick-unterzeile {
  font-size: clamp(1.05rem, 2vw, 1.333rem);
  max-width: 34ch;
}
.anblick .anblick-wink {
  margin-top: var(--wp--preset--spacing--m);
  font-size: var(--wp--preset--font-size--klein);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(232, 213, 196, 0.6);
}
.anblick .anblick-wink::after {
  content: "";
  display: block;
  width: 1px;
  height: 3.4rem;
  margin-top: 0.8rem;
  background: linear-gradient(to bottom, rgba(232, 213, 196, 0.7), rgba(232, 213, 196, 0));
}
/* Auf dunklen Flächen erben Überschriften die helle Textfarbe der Fläche —
   theme.json setzt Headings global auf Fichte, was auf Fichte unsichtbar wäre
   (Fund Visual-QA 31.08.: Hero-Titel dunkel auf dunkel). */
.has-fichte-background-color :is(h1, h2, h3, h4),
.has-nacht-background-color :is(h1, h2, h3, h4),
.has-nachgluehen-gradient-background :is(h1, h2, h3, h4) { color: inherit; }

/* Auf dunklen Flächen tritt Firnrose an die Stelle des Terrakotta-Akzents —
   Terrakotta ist auf Fichte zu kontrastarm für Text. */
.has-fichte-background-color a,
.has-nacht-background-color a,
.has-nachgluehen-gradient-background a { color: var(--wp--preset--color--firnrose); }
.has-fichte-background-color .glut-linie,
.has-nacht-background-color .glut-linie,
.has-nachgluehen-gradient-background .glut-linie { border-top-color: rgba(232, 213, 196, 0.35); }

/* --- Leitsatz (Solitär-Zitat) ---------------------------------- */
.leitsatz {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--gross);
  font-style: normal;
  line-height: 1.4;
  max-width: 26ch;
  margin-inline: auto;
  text-align: center;
}

/* --- Fakten-Zeile (dunkles Band) -------------------------------- */
.fakten-zeile { text-align: center; }
.fakten-zeile .fakt-zahl {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(3rem, 6vw, 4.75rem);
  line-height: 1;
  display: block;
  color: var(--wp--preset--color--firnrose);
}
.fakten-zeile .fakt-wort {
  font-size: var(--wp--preset--font-size--klein);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* --- Wechselfolge (Suiten: Bild/Text alternierend) ------------- */
.wechselfolge .wp-block-media-text { margin-block: 0; }

/* --- Preis-Linien ---------------------------------------------- */
.preis-linien .wp-block-table table { border-collapse: collapse; width: 100%; }
.preis-linien .wp-block-table td,
.preis-linien .wp-block-table th {
  border: 0;
  border-bottom: 1px solid rgba(232, 213, 196, 0.25);
  padding: 0.75rem 0.25rem;
  text-align: left;
}

/* --- Kopf- und Fußbereich -------------------------------------- */
.kopfbereich { position: relative; z-index: 10; }
.kopfbereich .wp-block-site-title a { text-decoration: none; }
.kopfbereich .hauptnav { gap: 0.75rem; }
.kopfbereich .hauptnav p { margin: 0; }
.kopfbereich .hauptnav a {
  text-decoration: none;
  font-size: var(--wp--preset--font-size--klein);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.kopfbereich .hauptnav a:hover { color: var(--wp--preset--color--alpengluehen); }
.fussbereich a { text-decoration: none; }
.fussbereich .fussnav { gap: 0.5rem; }
.fussbereich .fussnav p { margin: 0; }

/* --- Aufscheinen (Scroll-Reveal) ------------------------------- */
/* JS (assets/js/aufscheinen.js) setzt .ist-sichtbar per IntersectionObserver.
   Ohne JS bleibt alles sichtbar (progressive enhancement: Klasse wird erst
   per JS auf .aufscheinen-bereit gedimmt). */
.aufscheinen-bereit .aufscheinen {
  opacity: 0;
  transform: translateY(12px);
  transition-property: opacity, transform;
  transition-duration: 600ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.aufscheinen-bereit .aufscheinen.ist-sichtbar { opacity: 1; transform: none; }
/* Staffelung: direkte Kinder eines .aufscheinen-kinder laufen nacheinander ein */
.aufscheinen-bereit .aufscheinen-kinder > * {
  opacity: 0;
  transform: translateY(14px);
  transition-property: opacity, transform;
  transition-duration: 700ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.aufscheinen-bereit .aufscheinen-kinder.ist-sichtbar > * { opacity: 1; transform: none; }
.aufscheinen-bereit .aufscheinen-kinder.ist-sichtbar > :nth-child(2) { transition-delay: 90ms; }
.aufscheinen-bereit .aufscheinen-kinder.ist-sichtbar > :nth-child(3) { transition-delay: 180ms; }
.aufscheinen-bereit .aufscheinen-kinder.ist-sichtbar > :nth-child(4) { transition-delay: 270ms; }
.aufscheinen-bereit .aufscheinen-kinder.ist-sichtbar > :nth-child(5) { transition-delay: 360ms; }
.aufscheinen-bereit .aufscheinen-kinder.ist-sichtbar > :nth-child(6) { transition-delay: 450ms; }
@media (prefers-reduced-motion: reduce) {
  .aufscheinen-bereit .aufscheinen,
  .aufscheinen-bereit .aufscheinen-kinder > * { opacity: 1 !important; transform: none !important; transition: none; }
}

/* --- Glut-Knopf (CTA) -------------------------------------------
   Mechanik: Füllung steigt beim Hover von unten auf (adaptiert aus
   uiverse, RichestsoftSukhbir_big-liger-46, MIT). Ausprägung Firnlicht:
   Fichte-Füllung auf Firn-Grund, 2px-Kante, explizite Eigenschaften. */
.glut-knopf .wp-block-button__link {
  position: relative;
  z-index: 1;
  overflow: hidden;
  background: transparent;
  color: var(--wp--preset--color--fichte);
  border: 1px solid var(--wp--preset--color--fichte);
  border-radius: 2px;
  transition-property: color;
  transition-duration: 400ms;
  transition-timing-function: ease;
}
.glut-knopf .wp-block-button__link::after {
  content: "";
  position: absolute;
  inset: auto 0 -100% 0;
  height: 100%;
  background: var(--wp--preset--color--fichte);
  border-radius: 50% 50% 0 0;
  z-index: -1;
  transition-property: bottom, border-radius;
  transition-duration: 400ms;
  transition-timing-function: ease;
}
.glut-knopf .wp-block-button__link:hover { color: var(--wp--preset--color--firnrose); }
.glut-knopf .wp-block-button__link:hover::after { bottom: 0; border-radius: 0; }
@media (prefers-reduced-motion: reduce) {
  .glut-knopf .wp-block-button__link,
  .glut-knopf .wp-block-button__link::after { transition: none; }
}

/* --- Suiten-Anriss (Verweis-Panel) ------------------------------
   Mechanik: Schatten-Lift beim Hover (adaptiert aus uiverse,
   LeonKohli_chatty-lionfish-6, MIT). Ausprägung: Fichte-Panel,
   feine Firnrose-Linie statt Glow. */
.suiten-anriss {
  border: 1px solid rgba(232, 213, 196, 0.25);
  border-radius: 2px;
  box-shadow: 0 0.5em 0.75em rgba(20, 27, 23, 0.12);
  transition-property: box-shadow, transform;
  transition-duration: 300ms;
  transition-timing-function: ease;
}
.suiten-anriss:hover {
  box-shadow: 0 0.75em 1.5em rgba(20, 27, 23, 0.22);
  transform: translateY(-2px);
}
@media (prefers-reduced-motion: reduce) {
  .suiten-anriss { transition: none; }
  .suiten-anriss:hover { transform: none; }
}

/* --- Trefferflächen (a11y-mobil-gate: min. 24px, Ziel 44px) -----
   Gemessene Befunde 31.08. (Gate gegen die Live-URL): Site-Title 209×23px,
   Anriss-Link 182×22px, WP-Skip-Link 1×1px — alle drei hier behoben. */
.kopfbereich .hauptnav a,
.fussbereich .fussnav a { display: inline-block; padding: 0.75rem 0.55rem; }
.wp-block-button__link { padding: 0.8rem 1.6rem; }
.wp-block-site-title a { display: inline-block; padding: 0.65rem 0.2rem; }
.suiten-anriss a,
.blatt-karte a,
.wechselfolge .wp-block-media-text__content a { display: inline-block; padding: 0.75rem 0; }
/* WP-Skip-Link: statt 1×1px-Clip in voller Größe außerhalb des Viewports halten;
   bei Fokus sichtbar einblenden. Erfüllt WCAG 2.5.8 UND bleibt unsichtbar. */
a#wp-skip-link.screen-reader-text {
  left: -9999px;
  top: 0;
  width: auto;
  height: auto;
  clip: auto;
  clip-path: none;
  padding: 0.8rem 1.2rem;
}
a#wp-skip-link.screen-reader-text:focus {
  left: 1rem;
  top: 1rem;
  background: var(--wp--preset--color--fichte);
  color: var(--wp--preset--color--firn);
  z-index: 100000;
}

/* --- Lichtstunden (Farbuhr): fuenf Stimmungen als begehbares Band */
.lichtstunden-band {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2px;
  min-height: 380px;
}
.lichtstunden-band a {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 1.2rem 1.1rem;
  text-decoration: none;
  color: var(--wp--preset--color--firn);
  overflow: hidden;
  transition-property: flex-grow, filter;
  transition-duration: 450ms;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.lichtstunden-band .stunde-zeit {
  font-size: var(--wp--preset--font-size--klein);
  letter-spacing: 0.2em;
  margin: 0 0 0.3rem;
  opacity: 0.75;
}
.lichtstunden-band .stunde-name {
  font-family: var(--wp--preset--font-family--display);
  font-size: var(--wp--preset--font-size--gross);
  margin: 0;
  line-height: 1.1;
}
.lichtstunden-band a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20, 27, 23, 0.45), rgba(20, 27, 23, 0));
  z-index: -1;
}
.lichtstunden-band a:hover { filter: brightness(1.12); }
.stunde-firn      { background: linear-gradient(170deg, #F4F0E8 0%, #E8D5C4 55%, #8D8A80 100%); color: var(--wp--preset--color--fichte) !important; }
.stunde-morgenrot { background: linear-gradient(170deg, #E8D5C4 0%, #E0A86E 50%, #C97B5A 100%); color: var(--wp--preset--color--nacht) !important; }
.stunde-mittag    { background: linear-gradient(170deg, #F4F0E8 0%, #D9D2C5 55%, #3A5248 100%); color: var(--wp--preset--color--fichte) !important; }
.stunde-daemmer   { background: linear-gradient(170deg, #3A5248 0%, #C97B5A 55%, #141B17 100%); }
.stunde-nachtblau { background: linear-gradient(170deg, #141B17 0%, #24343A 55%, #3A5248 100%); }
.stunde-daemmer .stunde-name, .stunde-nachtblau .stunde-name { color: var(--wp--preset--color--firnrose); }

/* --- Suiten-Blatt (Editorial-Vorschau auf der Startseite) -------- */
.suiten-blatt { position: relative; }
.suiten-blatt .blatt-bild { margin: 0; }
.suiten-blatt .blatt-bild img { width: 100%; height: auto; display: block; }
.suiten-blatt .blatt-karte {
  background: var(--wp--preset--color--firn);
  border-top: 1px solid var(--wp--preset--color--nebel);
  padding: var(--wp--preset--spacing--m);
  max-width: 34rem;
  margin-top: -7rem;
  margin-left: auto;
  margin-right: var(--wp--preset--spacing--m);
  position: relative;
  box-shadow: 0 0.75em 1.5em rgba(20, 27, 23, 0.14);
}
.suiten-blatt .blatt-karte h2 { margin-top: 0; }

/* --- Nummerierte Wechselfolge ----------------------------------- */
.wechselfolge { position: relative; }
.wechselfolge .wechsel-nr {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(3.4rem, 7vw, 5.6rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px var(--wp--preset--color--nebel);
  margin: 0 0 0.2em;
}
.wechselfolge .wp-block-media-text__media img { box-shadow: 0 0.75em 1.75em rgba(20, 27, 23, 0.18); }

/* --- Fuss-Wortmarke --------------------------------------------- */
.fussbereich .fuss-wortmarke {
  font-family: var(--wp--preset--font-family--display);
  font-size: clamp(4rem, 14vw, 11rem);
  line-height: 0.9;
  margin: 0 0 var(--wp--preset--spacing--m);
  color: rgba(232, 213, 196, 0.14);
  letter-spacing: -0.01em;
  user-select: none;
}

/* --- Seiten-Auftakt (Unterseiten) ------------------------------- */
.auftakt-zeile {
  font-size: var(--wp--preset--font-size--klein);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wp--preset--color--alpengluehen);
}

/* --- Mobil ------------------------------------------------------ */
@media (max-width: 781px) {
  .anblick { min-height: 92svh; }
  .leitsatz { font-size: var(--wp--preset--font-size--gross); max-width: 30ch; }
  .lichtstunden-band { grid-template-columns: 1fr; min-height: 0; }
  .lichtstunden-band a { min-height: 96px; }
  .suiten-blatt .blatt-karte { margin: -3rem var(--wp--preset--spacing--s) 0; }
}