/* 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;
  }
}

/* --- Druck ------------------------------------------------------------ */
@media print {
  .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);
}