/* ------------------------------------------------------------------
   Logo aus dem DSS-Designsystem (freigegeben 19.10.2026)
   Desktop: Hauptlogo „C+ kurz“ rechts oben, Menü + Modus-Schalter links,
   Blog-Reiter unter dem Logo. Mobil: Wortmarke solo über die volle Breite
   (die Schutzzone steckt im SVG und ergibt links/rechts den gleichen Rand).
   Farbe über currentColor = Textfarbe der aktiven Palette.
   #headnav ist ab 60rem um 25px nach oben versetzt (margin-top: -25px) und
   per transform Bezugsrahmen für die fixierten Elemente darin – das gleicht
   --headnav-shift aus.
------------------------------------------------------------------- */
:root {
  --headnav-shift: 0px;
}
@media screen and (min-width: 60rem) {
  :root {
    --headnav-shift: 25px;
  }
}

.logo svg {
  display: block;
}
.logo .logo-wort {
  display: none;
}

@media screen and (min-width: 769px) {
  .header {
    top: calc(var(--headnav-shift) + 20px);
  }
  .logo {
    margin: 0 30px 0 auto;
    padding: 0;
    font-size: 0;
  }
  .logo .logo-haupt {
    height: 76px;
    width: auto;
  }
  .btn-menu.deskbtn {
    top: calc((150px + var(--headnav-shift)) / 2 - 25px);
    right: auto;
    left: 25px;
  }
  /* Menü-Icon um 180° gedreht: langer Balken unten, kurze Balken linksbündig */
  .btn-menu.deskbtn .btn-menu__bars {
    transform: rotate(180deg);
  }
  /* Menü und Pille stehen mittig im sichtbaren Header-Band (#headnav, 150px
     hoch, ab 60rem 25px nach oben versetzt → Mitte bei (150 + shift) / 2).
     Menü-Box 50px → −25px. Die Pille sitzt im Masken-SVG oben in ihrer
     50px-Box, ihre sichtbare Mitte liegt 17,5px unter der Box-Oberkante. */
  #toggle {
    top: calc((150px + var(--headnav-shift)) / 2 - 17.5px);
    left: 80px;
  }
  /* Schmalere Pille: gleiche Höhe, ca. 30 % kürzer (eigene Maske, damit die
     runden Enden nicht verzerrt werden). */
  #toggle {
    width: 71px;
    -webkit-mask-image: url('../images/dss_switch_schmal.svg');
    mask-image: url('../images/dss_switch_schmal.svg');
  }
  /* Blog-Reiter: Höhe wie bisher live (20 % – 25px), aber nie höher als
     knapp unter dem Logo. Auf dem Desktop immer ausgeklappt („# blog“). */
  button.blog,
  button.blog:hover {
    top: max(calc(20% - 25px), 116px);
    right: 0;
  }
  button.blog::after {
    right: 0;
  }
  button.blog .bloglink {
    opacity: 1;
  }
}

@media (max-width: 768px) {
  /* index.css rückt den Header mobil um 30px ein (für die alte Text-Wortmarke) */
  .header {
    left: 0;
  }
  .logo {
    width: 100%;
    margin: 0;
    padding: 0;
    font-size: 0;
  }
  .logo .logo-haupt {
    display: none;
  }
  .logo .logo-wort {
    display: block;
    width: 100%;
    height: auto;
  }
  /* Hell/Dunkel-Pille unten rechts: dieselbe schmale Form wie auf dem Desktop */
  .switch.seemobile {
    width: 71px;
    -webkit-mask-image: url('../images/dss_switch_schmal.svg');
    mask-image: url('../images/dss_switch_schmal.svg');
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  /* Die alten Verschiebungen (left: -17px, translateX(-13px)) waren für die
     100px breite Pille gedacht; in der schmalen Pille sitzt das Schaf ohne
     sie in beiden Modi 5px vom Rand. */
  .switch.seemobile .slider,
  .dark-mode .switch.seemobile .slider {
    left: 0;
  }
  .switch.seemobile input:checked + .slider:before {
    transform: none;
  }
}

/* Hell/Dunkel-Pille: Schaf aus dem Designsystem (Logos/dss-schaf.svg) statt „D“.
   Die Pille dreht sich beim Umschalten als Ganzes (rotateY 180°) – dadurch
   wandert das Schaf auf die andere Seite und schaut dann nach rechts. */
.slider:before {
  -webkit-mask-image: url('../images/dss_schaf.svg');
  mask-image: url('../images/dss_schaf.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
}