/* =====================================================================
 * Hell und Dunkel
 *
 * Das Seitendesign lebt vom Wechsel zweier Gruende: Tusche und Papier.
 * Im dunklen Modus ist Tusche fast schwarz und Papier warmweiss.
 * Im hellen Modus wird derselbe Wechsel zu warmem Stein und Weiss
 * uebersetzt, damit die Bandstruktur der Seite erhalten bleibt.
 *
 * Wichtig: --fy-ink ist im dunklen Modus zugleich Grundfarbe und
 * Textfarbe auf Papier. Beim Umschalten muessen deshalb die Textfarben
 * eigens gesetzt werden, sonst wird Text steinfarben auf Weiss.
 *
 * Der Selektor ist bewusst html[data-fy-theme], nicht nur [data-fy-theme]:
 * Oxygen schreibt seine Variablen auf :root und laedt sein Stylesheet
 * nach diesem hier. Ohne das zusaetzliche html gewinnt bei gleicher
 * Spezifitaet die spaeter geladene Regel.
 * ===================================================================== */

html[data-fy-theme="light"] {
  --fy-ink: #E5DFD1;
  --fy-ink-raised: #FFFFFF;
  --fy-ink-sunken: #D3CCBA;
  --fy-paper: #FFFFFF;
  --fy-paper-raised: #F8F6F1;
  --fy-mist: #45454C;
  --fy-slate: #4E4E55;
  --fy-oak: #7E5215;
  --fy-line-ink: rgba(11, 11, 12, 0.16);
  --fy-line-paper: rgba(11, 11, 12, 0.12);
  --fy-shadow-card: 0 1px 2px rgba(11, 11, 12, 0.05), 0 14px 34px -16px rgba(11, 11, 12, 0.18);
  scrollbar-color: var(--fy-crimson) #D8D2C2;
}

/* Alles, was im dunklen Modus helle Schrift auf dunklem Grund war,
 * bekommt hier eine dunkle Schriftfarbe. */
html[data-fy-theme="light"] body,
html[data-fy-theme="light"] .fy-section-paper,
html[data-fy-theme="light"] .fy-section-ink,
html[data-fy-theme="light"] .fy-hero,
html[data-fy-theme="light"] .fy-pagehead,
html[data-fy-theme="light"] .fy-footer-wordmark,
html[data-fy-theme="light"] .fy-card,
html[data-fy-theme="light"] .fy-card-ink,
html[data-fy-theme="light"] .fy-schedule-day,
html[data-fy-theme="light"] .fy-footer,
html[data-fy-theme="light"] .fy-consent,
html[data-fy-theme="light"] .fy-hero-sub,
html[data-fy-theme="light"] .fy-hero-line-offset,
html[data-fy-theme="light"] .fy-brand,
html[data-fy-theme="light"] .fy-brand-name,
html[data-fy-theme="light"] .fy-nav-link,
html[data-fy-theme="light"] .fy-nav-toggle,
html[data-fy-theme="light"] .fy-nav-close,
html[data-fy-theme="light"] .fy-nav-panel-link,
html[data-fy-theme="light"] .fy-pillar,
html[data-fy-theme="light"] .fy-pillar-title,
html[data-fy-theme="light"] .fy-ref-teaser,
html[data-fy-theme="light"] .fy-ref-name,
html[data-fy-theme="light"] .fy-btn-ghost-ink {
  color: #17171B;
}

/* Die rote Sektion bleibt in beiden Modi rot mit weisser Schrift. */
html[data-fy-theme="light"] .fy-section-crimson {
  color: #FFFFFF;
}

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

html[data-fy-theme="light"] .fy-btn-ghost-ink:hover {
  color: var(--fy-crimson);
  border-color: var(--fy-crimson);
}

html[data-fy-theme="light"] .fy-pillar:hover {
  background: rgba(11, 11, 12, 0.05);
}

/* Damit die Baender trotz heller Palette klar auseinander liegen,
 * bekommen die starken Sektionen feine Trennlinien. */
html[data-fy-theme="light"] .fy-section-ink {
  border-top: 1px solid rgba(11, 11, 12, 0.09);
  border-bottom: 1px solid rgba(11, 11, 12, 0.09);
}

/* Der Kopfbereich bleibt Glas, nur eben helles Glas. */
html[data-fy-theme="light"] .fy-header {
  background-color: rgba(255, 255, 255, 0.5);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.48) 100%);
  border-bottom-color: rgba(11, 11, 12, 0.11);
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.9), 0 18px 40px -30px rgba(11, 11, 12, 0.45);
}

html[data-fy-theme="light"] .fy-header-scrolled {
  background-color: rgba(255, 255, 255, 0.78);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.94) 0%, rgba(255, 255, 255, 0.74) 100%);
  border-bottom-color: rgba(11, 11, 12, 0.15);
}

html[data-fy-theme="light"] .fy-nav-panel {
  background: var(--fy-paper);
}

html[data-fy-theme="light"] .fy-progress-rail {
  background: rgba(11, 11, 12, 0.1);
}

html[data-fy-theme="light"] .fy-hero-img {
  filter: saturate(0.96) contrast(1.01);
}

html[data-fy-theme="light"] .fy-card-ink:hover {
  box-shadow: 0 0 0 1px rgba(189, 9, 36, 0.28), 0 18px 40px -20px rgba(11, 11, 12, 0.28);
}

html[data-fy-theme="light"]::-webkit-scrollbar-track {
  background: #D8D2C2;
}

html[data-fy-theme="light"]::-webkit-scrollbar-thumb {
  border-color: #D8D2C2;
}

html[data-fy-theme="light"] .fy-theme-icon {
  transform: rotate(180deg);
}

/* =====================================================================
 * Schraeglage des Wandschriftzugs
 *
 * Oxanium bringt keine echte Kursive mit, und die synthetische Variante
 * ueber font-style: oblique wird nicht zuverlaessig gezeichnet.
 * Deshalb wird die Neigung als Transformation gesetzt. Der Ursprung liegt
 * auf der Grundlinie, damit die Zeile nicht wandert.
 * ===================================================================== */
.fy-hero-line,
.fy-hero-line-offset,
.fy-display {
  transform: skewX(-8deg);
  transform-origin: 0 100%;
}

.fy-brand-name {
  transform: skewX(-7deg);
  transform-origin: 0 100%;
}

.fy-quote {
  transform: skewX(-5deg);
  transform-origin: 0 100%;
}

.fy-hero-copy {
  padding-right: 0.35em;
}

/* =====================================================================
 * Der Umschalter
 * ===================================================================== */
.fy-theme-icon svg > circle {
  display: none;
}

.fy-theme-icon {
  width: 30px;
  height: 30px;
}

@media (max-width: 1023px) {
  .fy-theme-icon {
    width: 27px;
    height: 27px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .fy-theme-icon {
    transition: none;
  }
}

/* =====================================================================
 * Inhalt darf niemals von JavaScript abhaengen.
 *
 * .fy-reveal startet in Oxygen mit Opazitaet 0. Faellt das Skript aus,
 * bleibt der halbe Seiteninhalt unsichtbar, auch fuer Suchmaschinen.
 * Deshalb wird das Verstecken erst aktiv, wenn das Kopf-Skript die
 * Klasse fy-js gesetzt hat.
 * ===================================================================== */
html:not(.fy-js) .fy-reveal {
  opacity: 1;
  transform: none;
}

html.fy-js .fy-reveal-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html.fy-js .fy-reveal {
    opacity: 1;
    transform: none;
  }
}

/* =====================================================================
 * Kopfbereich: Anbindung an die Hero-Farbe
 *
 * Der Verlauf startet oben durchsichtig und endet unten in genau der
 * Farbe der Hero-Sektion (--fy-ink). Dadurch geht die Unterkante des
 * Kopfbereichs nahtlos in die Sektion darunter ueber, statt als Balken
 * darauf zu liegen. Weil --fy-ink beim Umschalten mitwandert, stimmt
 * die Anbindung in beiden Modi automatisch.
 * ===================================================================== */
html[data-fy-theme="light"] .fy-header {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(229, 223, 209, 0.5) 42%, var(--fy-ink) 100%);
}

html[data-fy-theme="light"] .fy-header-scrolled {
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.92) 0%, rgba(255, 255, 255, 0.7) 100%);
}

/* Helle Baender zeichnen Browser-Bedienelemente und Standardlinks hell,
 * auch wenn die Seite im dunklen Modus laeuft. Sonst erben Kontrollkaestchen,
 * Auswahllisten und Links das dunkle Farbschema auf hellem Grund. */
.fy-section-paper {
  color-scheme: light;
}