/* Version 1.5.45 – Mitlaufende, schrumpfende Kopfzeile am Desktop */

/*
 * Wunsch: Beim Herunterscrollen am PC oder Laptop soll das Menü oben sichtbar
 * bleiben, damit man nicht zum Seitenanfang zurückscrollen muss, um den
 * Bereich zu wechseln. Sichtbar bleiben soll es in einer kompakteren Form.
 *
 * Ausgangslage: Auf dem Desktop ist die Kopfzeile position:absolute und
 * scrollt mit dem Seiteninhalt nach oben aus dem Bild. Auf schmalen Geräten
 * (unter 901 Pixeln) ist sie bereits position:fixed; dort ändert diese Datei
 * nichts.
 *
 * Umsetzung nur für breite Bildschirme: Sobald weit genug gescrollt wurde,
 * setzt ein per JavaScript vergebenes Kennzeichen am body die Kopfzeile auf
 * fixed, verringert ihre Höhe, verkleinert das Logo und macht den
 * Hintergrund hell mit einer feinen Trennlinie, damit die Schrift lesbar
 * bleibt. Der Wechsel ist weich animiert.
 */

@media(min-width:901px){

  /* Sanfte Übergänge für alle Eigenschaften, die sich beim Schrumpfen
     ändern. So springt nichts, sondern gleitet. */
  .site-header{
    transition:height .28s ease, background-color .28s ease,
               box-shadow .28s ease, border-color .28s ease;
  }
  .site-header .brand img{
    transition:width .28s ease, max-height .28s ease;
  }
  .site-header nav{
    transition:font-size .28s ease;
  }
  .site-header .nav-cta{
    transition:padding .28s ease;
  }

  /* Der zusammengeschobene Zustand. Das Kennzeichen sitzt am body, damit die
     absolut positionierte Kopfzeile zuverlässig darauf reagiert. */
  body.kopf-kompakt .site-header{
    position:fixed;
    top:0;
    left:0;
    height:66px;
    background:rgba(251,249,244,.94);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    border-bottom:1px solid rgba(38,59,50,.12);
    box-shadow:0 6px 24px rgba(30,45,36,.08);
  }

  /* Logo kleiner. */
  body.kopf-kompakt .site-header .brand img{
    width:190px;
    max-height:52px;
  }

  /* Menü etwas kompakter, ohne die Lesbarkeit zu verlieren. */
  body.kopf-kompakt .site-header nav{
    font-size:.82rem;
  }
  body.kopf-kompakt .site-header nav>a:not(.nav-cta){
    padding:.7rem 0;
  }
  body.kopf-kompakt .site-header .nav-cta{
    padding:.62rem 1.05rem;
  }

  /* Damit beim Umschalten auf fixed der darunterliegende Inhalt nicht um die
     Kopfzeilenhöhe nach oben springt, wird dieselbe Höhe als Abstand oben am
     Seiteninhalt ausgeglichen. Der Startbereich beginnt ohnehin mit viel
     Freiraum, sodass dieser Ausgleich dort nicht auffällt. */
  body.kopf-kompakt{
    padding-top:66px;
  }
  body.kopf-kompakt .hero{
    margin-top:-66px;
  }
}

/* Wer weniger Bewegung wünscht, bekommt denselben Endzustand ohne das weiche
   Gleiten. */
@media(min-width:901px) and (prefers-reduced-motion:reduce){
  .site-header,
  .site-header .brand img,
  .site-header nav,
  .site-header .nav-cta{
    transition:none;
  }
}