/* Ergaenzungen, die der Oxygen-Importer nicht abbilden kann. */

/* --- Fokus, der nie verschwindet ------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--fy-crimson-glow, #EE0629);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- Auswahlfarbe ---------------------------------------------------- */
::selection {
  background: var(--fy-crimson, #BD0924);
  color: #fff;
}

/* --- Bilder verhalten sich nie wie Inline-Text ------------------------ */
img,
svg,
video {
  max-width: 100%;
}

/* --- Kein horizontales Scrollen, egal was passiert -------------------- */
html,
body {
  max-width: 100%;
}

/* --- Sperre beim geoeffneten Navigationsoverlay -----------------------
 * Nur overflow: hidden reicht nicht: iOS scrollt den Hintergrund
 * trotzdem weiter. Der Koerper wird deshalb festgestellt, und das
 * Skript merkt sich die Scrollposition und stellt sie beim Schliessen
 * wieder her.                                                          */
body.fy-nav-locked {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* --- Scrollverankerung abschalten -------------------------------------
 * Der Kopfbereich wird beim Scrollen niedriger. Chrome gleicht diese
 * Groessenaenderung ueber die Scrollverankerung aus und schiebt die
 * Scrollposition zurueck. Zusammen mit einer Zustandsschwelle ergibt
 * das eine Schleife, die als Flackern sichtbar wird. Die Seite laedt
 * nichts nach, sie braucht die Verankerung also nicht.                 */
html,
body {
  overflow-anchor: none;
}

/* --- Listen im Fliesstext -------------------------------------------- */
.fy-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  max-width: 62ch;
}

.fy-list > li {
  position: relative;
  padding-left: 1.4rem;
}

.fy-list > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--fy-crimson, #BD0924);
}

.fy-list-ink > li::before {
  background: var(--fy-oak, #C08B4F);
}

/* --- Rich-Text-Rechtstexte lesbar halten ------------------------------ */
.fy-prose h2 {
  font-family: var(--fy-font-display, serif);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin: 2.5rem 0 0.75rem;
}

.fy-prose h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin: 1.75rem 0 0.5rem;
}

.fy-prose p,
.fy-prose li {
  max-width: 72ch;
  line-height: 1.7;
}

.fy-prose a {
  color: var(--fy-crimson, #BD0924);
  text-underline-offset: 3px;
}

/* --- Consent-Gate: geladener Zustand ---------------------------------- */
.fy-consent-loaded {
  padding: 0;
  border: 0;
  background: transparent;
}

.fy-embed-frame {
  display: block;
  width: 100%;
  min-height: 460px;
  border: 0;
  border-radius: var(--fy-r-md, 4px);
}

/* --- Hero-Auftritt ---------------------------------------------------- */
@keyframes fy-rise {
  from {
    transform: translateY(105%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.fy-hero-line,
.fy-hero-line-offset {
  animation: fy-rise 720ms cubic-bezier(0.2, 0.7, 0.25, 1) both;
}

.fy-hero-line-offset {
  animation-delay: 110ms;
}

.fy-hero-copy .fy-lead {
  animation: fy-rise 720ms cubic-bezier(0.2, 0.7, 0.25, 1) 220ms both;
}

.fy-hero-copy .fy-row {
  animation: fy-rise 720ms cubic-bezier(0.2, 0.7, 0.25, 1) 320ms both;
}

/* --- Bewegung respektieren: harte Regel ------------------------------- */
/* Diese Sperre gilt mit !important und schlaegt damit jede andere
 * Regel. Sie muss deshalb an der ausdruecklichen Wahl des Besuchers
 * vorbeigehen: wer Bewegung eingeschaltet hat, bekommt sie auch dann,
 * wenn der Browser weniger Bewegung meldet. Ohne dieses html:not()
 * waere der Schalter wirkungslos. */
@media (prefers-reduced-motion: reduce) {
  html:not(.fy-motion-on) {
    scroll-behavior: auto;
  }

  html:not(.fy-motion-on) *,
  html:not(.fy-motion-on) *::before,
  html:not(.fy-motion-on) *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  html:not(.fy-motion-on) .fy-reveal {
    opacity: 1;
    transform: none;
  }

  html:not(.fy-motion-on) .fy-progress-rail-fill {
    transition: none;
  }
}

/* =====================================================================
 * Scrollhilfen unten rechts
 *
 * Entstehen per Skript (fy.js, scrollHelfer). Der Pfeil nach unten sitzt
 * zuunterst, der nach oben darueber. Beide bleiben unter dem Cookie-Hinweis
 * (940) und ueber der Scrollbahn (900), und sie weichen der Bahn am
 * rechten Rand aus. Eckig wie alle Knoepfe der Seite.
 * ===================================================================== */
.fy-scrollhilfe {
  position: fixed;
  right: clamp(0.75rem, 2vw, 1.5rem);
  bottom: calc(clamp(0.75rem, 2vw, 1.5rem) + env(safe-area-inset-bottom, 0px));
  z-index: 920;
  display: flex;
  flex-direction: column-reverse;
  gap: 0.5rem;
  pointer-events: none;
}

.fy-scrollhilfe-knopf {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--fy-mist) 38%, transparent);
  border-radius: var(--fy-r-md);
  background-color: color-mix(in srgb, var(--fy-ink) 80%, transparent);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  backdrop-filter: blur(12px) saturate(160%);
  color: var(--fy-paper);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition:
    opacity var(--fy-dur-s) var(--fy-ease),
    transform var(--fy-dur-s) var(--fy-ease),
    visibility 0s linear var(--fy-dur-s),
    background-color var(--fy-dur-s) var(--fy-ease),
    border-color var(--fy-dur-s) var(--fy-ease),
    color var(--fy-dur-s) var(--fy-ease);
}

.fy-scrollhilfe-knopf.fy-scrollhilfe-an {
  opacity: 1;
  visibility: visible;
  transform: none;
  pointer-events: auto;
  transition:
    opacity var(--fy-dur-s) var(--fy-ease),
    transform var(--fy-dur-s) var(--fy-ease),
    visibility 0s linear 0s,
    background-color var(--fy-dur-s) var(--fy-ease),
    border-color var(--fy-dur-s) var(--fy-ease),
    color var(--fy-dur-s) var(--fy-ease);
}

.fy-scrollhilfe-runter {
  color: var(--fy-crimson-glow);
}

.fy-scrollhilfe-knopf:hover {
  border-color: var(--fy-crimson);
  background-color: var(--fy-crimson);
  color: var(--fy-paper-raised);
}

/* Der Doppelpfeil wippt leise, damit er als Hinweis gelesen wird. */
@keyframes fy-scrollhilfe-wippen {
  0%, 100% { transform: translateY(-2px); }
  50% { transform: translateY(2px); }
}

.fy-scrollhilfe-runter.fy-scrollhilfe-an svg {
  animation: fy-scrollhilfe-wippen calc(var(--fy-dur) * 1.6) var(--fy-ease) infinite;
}

/* Im hellen Modus ist --fy-ink warmer Stein und --fy-paper weiss.
 * Die Pfeilfarbe wird deshalb eigens gesetzt, das Rot bleibt Rot. */
html[data-fy-theme="light"] .fy-scrollhilfe-knopf {
  background-color: color-mix(in srgb, var(--fy-paper) 86%, transparent);
  border-color: color-mix(in srgb, var(--fy-slate) 35%, transparent);
  color: var(--fy-slate);
  box-shadow: 0 6px 18px color-mix(in srgb, var(--fy-slate) 22%, transparent);
}

html[data-fy-theme="light"] .fy-scrollhilfe-runter {
  color: var(--fy-crimson);
}

html[data-fy-theme="light"] .fy-scrollhilfe-knopf:hover {
  border-color: var(--fy-crimson);
  background-color: var(--fy-crimson);
  color: var(--fy-paper);
}

body.fy-nav-locked .fy-scrollhilfe {
  display: none;
}

/* =====================================================================
 * Seitennummerierung, global
 *
 * Gilt fuer alles, was WordPress, WooCommerce oder ein Query-Block an
 * Seitenzahlen ausgibt: Shop, Kategorien, Suche, Bestellungen im Konto.
 * Eckige Felder mit 44 px Touchflaeche, die aktuelle Seite rot. Die
 * Farben folgen dem Band, auf dem die Nummerierung steht, deshalb
 * currentColor statt fester Flaechen. WooCommerce setzt eigene Rahmen,
 * Floats und Innenabstaende mit hoher Spezifitaet, darum die langen
 * Selektoren.
 * ===================================================================== */
.woocommerce nav.woocommerce-pagination,
.navigation.pagination,
.wp-block-query-pagination {
  display: flex;
  justify-content: center;
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers,
.navigation.pagination .nav-links,
.wp-block-query-pagination .wp-block-query-pagination-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  border: 0;
  list-style: none;
  white-space: normal;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li {
  float: none;
  display: block;
  margin: 0;
  border: 0;
  overflow: visible;
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li .page-numbers,
.navigation.pagination .page-numbers,
.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-next,
.wp-block-query-pagination-previous {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin: 0;
  padding: 0 0.85rem;
  border: 1px solid color-mix(in srgb, currentColor 22%, transparent);
  border-radius: var(--fy-r-sm);
  background: transparent;
  color: inherit;
  font-family: var(--fy-font-util), sans-serif;
  font-size: 0.875rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
  line-height: 1;
  text-decoration: none;
  transition:
    background-color var(--fy-dur-s) var(--fy-ease),
    border-color var(--fy-dur-s) var(--fy-ease),
    color var(--fy-dur-s) var(--fy-ease);
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:hover,
.woocommerce nav.woocommerce-pagination ul.page-numbers li a.page-numbers:focus-visible,
.navigation.pagination a.page-numbers:hover,
.wp-block-query-pagination a.page-numbers:hover,
.wp-block-query-pagination-next:hover,
.wp-block-query-pagination-previous:hover {
  border-color: var(--fy-crimson);
  background: transparent;
  color: var(--fy-crimson);
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li span.current,
.navigation.pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers.current {
  border-color: var(--fy-crimson);
  background: var(--fy-crimson);
  color: var(--fy-paper-raised);
}

.woocommerce nav.woocommerce-pagination ul.page-numbers li .dots,
.navigation.pagination .page-numbers.dots,
.wp-block-query-pagination .page-numbers.dots {
  min-width: 0;
  padding: 0 0.25rem;
  border-color: transparent;
}

/* Vor und zurueck als Pfeile etwas groesser, damit sie als Richtung lesbar sind. */
.woocommerce nav.woocommerce-pagination ul.page-numbers li .next,
.woocommerce nav.woocommerce-pagination ul.page-numbers li .prev,
.navigation.pagination .page-numbers.next,
.navigation.pagination .page-numbers.prev {
  font-size: 1.1rem;
}

/* Bestellungen im Konto: WooCommerce nutzt hier Knoepfe statt Zahlen. */
.woocommerce-pagination .woocommerce-button--next,
.woocommerce-pagination .woocommerce-button--previous {
  min-height: 44px;
}

/* --- Druck ------------------------------------------------------------ */
@media print {
  .fy-scrollhilfe,
  .fy-header,
  .fy-progress-rail,
  .fy-nav-panel,
  .fy-nav-toggle {
    display: none !important;
  }

  .fy-section-ink {
    background: #fff !important;
    color: #000 !important;
  }
}

/* --- SVG: Oxygen setzt fill auf die Icon-Farbe und ueberschreibt damit ---- *
 * das Praesentationsattribut fill="none". Hier wird die Absicht der
 * Zeichnung wiederhergestellt: Umrisse bleiben Umrisse, Flaechen bleiben
 * Flaechen.                                                                */
.oxy-svg-icon svg[fill="none"] {
  fill: none;
}

.oxy-svg-icon svg [fill="currentColor"] {
  fill: currentColor;
}

.oxy-svg-icon svg [stroke="currentColor"] {
  stroke: currentColor;
}

/* --- Hero: Luft zwischen Schriftzug und Unterzeile -------------------- */
.fy-hero-title {
  padding-bottom: 0.35rem;
}

.fy-hero-media {
  align-self: stretch;
}

.fy-hero-grid {
  align-items: stretch;
}

.fy-hero-copy {
  justify-content: flex-end;
}

/* Das Consent-Gate ist immer eine dunkle Karte, auch auf hellem Grund.
 * Buttons darin brauchen deshalb die helle Variante, sonst steht
 * dunkle Schrift auf dunklem Grund. */
.fy-consent .fy-btn-ghost {
  color: var(--fy-paper);
  border-color: rgba(255, 255, 255, 0.22);
}

.fy-consent .fy-btn-ghost:hover {
  color: var(--fy-oak);
  border-color: var(--fy-oak);
}

.fy-consent .fy-link {
  color: var(--fy-oak);
  background-image: linear-gradient(var(--fy-oak), var(--fy-oak));
}

html[data-fy-theme="light"] .fy-consent .fy-btn-ghost {
  color: #F3F1EC;
}

/* =====================================================================
 * Die Zeichenerklaerung
 *
 * Der Kasten ist dunkel, auch wenn er in einem hellen Band steht. Die
 * Schriftfarbe kann deshalb nicht vom Band geerbt werden: dort steht
 * dunkle Schrift, und die verschwindet auf dunklem Grund. Sie wird
 * hier eigens gesetzt, im hellen Modus umgekehrt.
 * ===================================================================== */
.fy-zeichen .fy-zeichen-titel {
  color: var(--fy-paper);
}

.fy-zeichen .fy-zeichen-text {
  color: var(--fy-mist);
}

html[data-fy-theme="light"] .fy-zeichen .fy-zeichen-titel {
  color: #17171B;
}

html[data-fy-theme="light"] .fy-zeichen .fy-zeichen-text {
  color: var(--fy-slate);
}

/* =====================================================================
 * Die vier Leistungsbereiche auf der Preisseite
 *
 * Ohne Skript stehen alle vier Bereiche untereinander und sind
 * vollstaendig lesbar. Erst wenn das Skript laeuft, setzt es die
 * Klasse fy-panels-ready, und die vier Schalter zeigen jeweils einen
 * Bereich. Die Sichtbarkeit haengt am Skript, der Inhalt nicht.
 * ===================================================================== */
.fy-panels.fy-panels-ready > .fy-panel {
  display: none;
}

.fy-panels.fy-panels-ready > .fy-panel.fy-panel-active {
  display: flex;
}

.fy-tab.fy-tab-active {
  border-color: var(--fy-crimson);
  background-color: var(--fy-crimson);
}

.fy-tab.fy-tab-active:hover {
  border-color: var(--fy-crimson-deep);
  background-color: var(--fy-crimson-deep);
}

.fy-tab.fy-tab-active .fy-tab-label {
  color: #fff;
}

.fy-tab.fy-tab-active .fy-tab-meta {
  color: rgba(255, 255, 255, .78);
}

/* =====================================================================
 * Philosophie im Hero der Seite Trainingskonzept
 *
 * Die Bausteine tragen die vorhandenen Oxygen-Klassen, die Zusaetze
 * haengen an data-fy-*-Attributen: so braucht es keine neuen Selektoren
 * im Builder. Der Effekt laeuft wie der Hero ueber Keyframes und nur
 * ueber CSS, ohne Skript ist alles sofort lesbar.
 * ===================================================================== */

/* Der Dreiklang: drei Zeilen steigen nacheinander auf, das Schluesselwort
 * bekommt danach einen roten Strich, der von links einzieht. */
@keyframes fy-strich {
  from { background-size: 0% 0.12em; }
  to { background-size: 100% 0.12em; }
}

/* Oxanium hat keine Kursive, die Absatzklasse der Vorlage darf hier nicht kursiv setzen. */
html [data-fy-effekt="dreiklang"] {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 0.2em;
  margin: 0.5rem 0 0;
  font-family: var(--fy-font-display), sans-serif;
  font-size: clamp(1.35rem, 2.4vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.004em;
  max-width: 28ch;
}

/* Eigene Keyframes: fy-rise gibt es in fy-motion.css ein zweites Mal, dort
 * mit Neigung fuer die Hero-Zeilen der Startseite. Der Dreiklang steht aufrecht. */
@keyframes fy-dreiklang-auf {
  from { transform: translateY(0.6em); opacity: 0; }
  to { transform: none; opacity: 1; }
}

[data-fy-effekt="dreiklang"] > span {
  display: block;
  animation: fy-dreiklang-auf 720ms var(--fy-ease) both;
}

[data-fy-effekt="dreiklang"] > span:nth-child(1) { animation-delay: 420ms; }
[data-fy-effekt="dreiklang"] > span:nth-child(2) { animation-delay: 560ms; }
[data-fy-effekt="dreiklang"] > span:nth-child(3) { animation-delay: 700ms; }

[data-fy-effekt="dreiklang"] em {
  font-style: normal;
  color: var(--fy-crimson-glow);
  background-image: linear-gradient(var(--fy-crimson), var(--fy-crimson));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 0.12em;
  padding-bottom: 0.04em;
  animation: fy-strich 900ms var(--fy-ease) both;
}

[data-fy-effekt="dreiklang"] > span:nth-child(1) em { animation-delay: 1000ms; }
[data-fy-effekt="dreiklang"] > span:nth-child(2) em { animation-delay: 1140ms; }
[data-fy-effekt="dreiklang"] > span:nth-child(3) em { animation-delay: 1280ms; }

/* Glow nie als Textfarbe auf hellem Grund. */
html[data-fy-theme="light"] [data-fy-effekt="dreiklang"] em {
  color: var(--fy-crimson);
}

/* Die zweite Reihe unter dem Hero: Haltung links, Gruender rechts.
 * Das html davor schlaegt die Rasterklasse der Vorlage, die Oxygen spaeter laedt. */
html [data-fy-philosophie="reihe"] {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent);
}

/* Das Zitat steht geneigt wie der Schriftzug an der Studiowand. */
html [data-fy-effekt="zitat"] {
  font-style: normal;
  margin: 1.5rem 0 0;
  padding: 0.25rem 0 0.25rem 1.25rem;
  border-left: 3px solid var(--fy-crimson);
  font-family: var(--fy-font-display), sans-serif;
  font-size: clamp(1.35rem, 2.5vw, 2.1rem);
  font-weight: 700;
  line-height: 1.25;
  max-width: 26ch;
  transform: skewX(-8deg);
  transform-origin: 0 100%;
}

@media (max-width: 767px) {
  html [data-fy-philosophie="reihe"] {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-fy-effekt="zitat"] {
    transform: skewX(-6deg);
  }
}

/* Der Seitenkopf der Unterseiten laesst den Energiefluss durchscheinen wie
 * Hero, dunkle Baender und Footer (fy-pillar.css). Derselbe Schleier, damit
 * der Strahl im Hintergrund bleibt und der Schrift nichts wegnimmt. Ohne
 * WebGL bleibt der Kopf deckend. */
html.fy-pillar-on body .fy-pagehead {
  background-color: transparent;
  background-image: linear-gradient(var(--fy-veil), var(--fy-veil));
}