/* ============================================
   ECX 50 - Altbestand unter dem neuen Header
   Bestehende Seiten, die noch nicht umgebaut sind,
   aber bereits unter der klebenden ECX-Nav laufen.
   Nur Korrekturen, keine Gestaltung.
   ============================================ */

/*
 * SEITENGRUND
 *
 * style.css setzt body { background-color: #d6d6d6 } - ein kraeftiges
 * Grau, das unter dem hellen ECX-Header wie ein Rest aus einer anderen
 * Gestaltung wirkt.
 *
 * Statt schlicht Weiss ein flacher Verlauf: aussen --ec-blue-50
 * (#eaf0f6), innen --surface (#fff). Unter dem Inhalt bleibt es weiss.
 *
 * Zur Farbwahl: zuerst stand hier --bg (#f6f8fb). Das sind nur neun
 * Stufen neben Weiss - im Vergleich nebeneinander war davon nichts zu
 * sehen, der Verlauf haette nur in der Datei existiert. --ec-blue-50
 * liegt 21 Stufen daneben und ist als ruhiger Anlauf zum Rand
 * wahrnehmbar, ohne unruhig zu wirken: eine einzige glatte Rampe, keine
 * Kante, kein Farbwechsel unter dem Text.
 *
 * Die Haltepunkte richten sich an der Inhaltsspalte aus, nicht an
 * Prozentwerten: --ecx-rand ist genau der Streifen, der links und rechts
 * neben den 1210px des Inhalts frei bleibt. Weiss beginnt damit exakt
 * dort, wo der Inhalt anfaengt.
 *
 *   1868px Fenster  Rand 329px, Verlauf nur im freien Streifen
 *   1240px Fenster  Rand 15px, praktisch weiss
 *   unter 1210px    Rand 0, vollstaendig weiss - dort fuellt der Inhalt
 *                   ohnehin die Breite und ein Verlauf haette nichts,
 *                   worauf er sich beziehen koennte
 *
 * Nur fuer Seiten mit altem Inhalt. Auf ECX-Seiten setzt body.ecx den
 * Grund bereits selbst (10-base.css), deshalb das :not(.ecx).
 */
body.ecx-kopf:not(.ecx) {
  --ecx-rand: max(0px, calc((100% - 1210px) / 2));

  background-color: var(--surface);
  background-image: linear-gradient(
    90deg,
    var(--ec-blue-50) 0,
    var(--surface) var(--ecx-rand),
    var(--surface) calc(100% - var(--ecx-rand)),
    var(--ec-blue-50) 100%
  );
}

/*
 * KLEBENDE ELEMENTE AUS DEM ALTBESTAND
 *
 * style.css setzt drei Elemente auf position:sticky mit einem kleinen
 * Abstand nach oben:
 *
 *   .sponsor-banner-container   top: 20px   (Zeile 1088)
 *   .sponsor-banner             top: 40px   (Zeile 1412)
 *   .inner-div                  top: 20px   (Zeile 1539)
 *
 * Diese Werte stammen aus einer Zeit ohne klebende Kopfleiste. Die
 * ECX-Nav klebt bei top:0 und ist 67px hoch - ein Element, das bei 20px
 * haengenbleibt, verschwindet also dahinter. Auf den
 * Klassifikations-Seiten wird die Sponsorenwerbung rechts dadurch oben
 * angeschnitten.
 *
 * Woher die drei kommen: .sponsor-banner-container baut der Shortcode
 * display_sponsor_banner() in der functions.php, und zwar nur bei
 * Beitraegen der Kategorie "Klassifikationen"/"Classifications".
 * .sponsor-banner und .inner-div stehen im Toolset-Inhaltstemplate 15545
 * ("Inhalts-Template fuer Template for Klassifikationen"). Andere
 * Seitentypen sind nicht betroffen - Lehrvideo, Veranstaltung, Archive,
 * Suche und 404 haben ueberhaupt kein klebendes Element ausser der
 * ECX-Nav selbst. Geprueft ueber alle Views, Layouts und Bloecke sowie
 * im Browser.
 *
 * Alle drei bekommen denselben Wert. .sponsor-banner liegt IM
 * .sponsor-banner-container (ueber .row > .col-12 > .js-wpv-view-layout)
 * und deckt ihn deckungsgleich ab; zwei verschiedene Werte wuerden das
 * innere Element im aeusseren verrutschen lassen.
 */

@media (min-width: 900px) {
  body.ecx-kopf {
    /*
     * Hoehe der klebenden Nav-Leiste. Kein deklarierter Wert, sondern
     * gemessen - sie ergibt sich aus Polster und Zeilenhoehe der
     * Menuepunkte. Aendert sich das Nav-Polster, gehoert die Zahl hier
     * nachgezogen.
     */
    --ecx-nav-hoehe: 67px;

    /* Unterkante der klebenden Leiste. */
    --ecx-nav-unten: var(--ecx-nav-hoehe);
  }

  /* Die Adminleiste schiebt die Nav-Leiste nach unten, siehe nav.css. */
  body.ecx-kopf.admin-bar { --ecx-nav-unten: calc(var(--ecx-nav-hoehe) + 32px); }

  body.ecx-kopf .sponsor-banner-container,
  body.ecx-kopf .sponsor-banner,
  body.ecx-kopf .inner-div {
    /* 20px Luft unter der Leiste, wie im Altbestand zum Fensterrand. */
    top: calc(var(--ecx-nav-unten) + 20px);
  }
}

/*
 * Zwischen 900 und 1080 ist die Nav-Leiste enger gesetzt und dadurch
 * niedriger (nav.css, Regelbreakpoint 1080).
 */
@media (min-width: 900px) and (max-width: 1080px) {
  body.ecx-kopf { --ecx-nav-hoehe: 57px; }
}

/*
 * Unter 900 entfaellt die Nav-Leiste, das Panel uebernimmt - dann klebt
 * nichts mehr ueber dem Inhalt und die Werte aus dem Altbestand stimmen
 * wieder. Deshalb gibt es hier bewusst keine Regel.
 */