[hidden]{display:none !important}

/* --------------------------------------------------------------------------
   Bildlaufleiste
   Die des Browsers ist breit und grau und passt zu nichts auf dieser Seite.
   Zwei Wege, weil sich die Browser hier nicht einig sind: Firefox versteht
   die genormten scrollbar-*-Eigenschaften, Chrome, Edge und Safari die
   ::-webkit-scrollbar-Pseudoelemente.

   Bewusst nicht ausgeblendet, nur schmaler: Eine unsichtbare Leiste nimmt
   dem Besucher die Anzeige, wie weit die Seite noch geht — auf den langen
   Ratgeberseiten ist das die einzige Orientierung. Ausserdem verlangen die
   Barrierefreiheitsregeln eine erkennbare Bedienfläche.
   -------------------------------------------------------------------------- */
html {
  scrollbar-width: thin;                  /* Firefox */
  scrollbar-color: #C9C2AE #F5F1E6;       /* Griff, Schiene */
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #F5F1E6; }
::-webkit-scrollbar-thumb {
  background: #C9C2AE;
  border-radius: 999px;
  /* Der Rand in Schienenfarbe lässt den Griff schmaler wirken, ohne die
     Trefferfläche für die Maus zu verkleinern. */
  border: 2px solid #F5F1E6;
}
::-webkit-scrollbar-thumb:hover { background: #A6851F; }
::-webkit-scrollbar-corner { background: #F5F1E6; }

/* Auf dunklem Grund — etwa der Laufschrift im Kopf — würde die helle
   Schiene als weisser Balken auffallen. */
[data-mr-dark]::-webkit-scrollbar-track { background: #2A2820; }
[data-mr-dark]::-webkit-scrollbar-thumb {
  background: #55503F; border-color: #2A2820;
}

/* Wer Systemeinstellungen für weniger Bewegung gesetzt hat, bekommt auch
   kein weiches Scrollen. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.h1:hover{color:#FFFDF6 !important;transform:translateY(-1px) !important;box-shadow:0 14px 30px -10px rgba(166,133,31,.7), inset 0 1px 0 rgba(255,255,255,.32) !important}
.h2:hover{border-color:#C5A028 !important;color:#A6851F !important}
.h3:hover{border-color:#D8C68A !important;transform:translateY(-3px) !important;box-shadow:0 24px 44px -22px rgba(60,48,12,.34) !important}
.h4:hover{border-color:#C9CBCF !important;transform:translateY(-3px) !important;box-shadow:0 24px 44px -22px rgba(30,32,36,.3) !important}
.h5:hover{color:#A6851F !important;border-bottom:1px solid #C5A028 !important}
.h6:hover{border-color:#D8C68A !important;box-shadow:0 24px 44px -22px rgba(60,48,12,.3) !important}
.h7:hover{background:#A6851F !important}
.h8:hover{border-color:#C9CBCF !important;box-shadow:0 24px 44px -22px rgba(30,32,36,.28) !important}
.h9:hover{color:#241D05 !important;transform:translateY(-1px) !important}
.h10:hover{background:#A6851F !important;color:#FFFDF6 !important}
.h11:hover{border-color:#D8C68A !important;transform:translateY(-2px) !important}
.f12:focus,.f12:focus-within{border-color:#C5A028 !important}
.h13:hover{color:#E6C868 !important}
.h14:hover{color:#A6851F !important}
.h15:hover{color:#FFFDF6 !important;transform:translateY(-1px) !important}
.h16:hover{border-color:#D8C68A !important}
.h17:hover{border-color:#D8C68A !important;box-shadow:0 20px 40px -24px rgba(60,48,12,.3) !important}
.h18:hover{background:#15140F !important;color:#FAF8F3 !important}
.h19:hover{border-color:#D8C68A !important;transform:translateY(-2px) !important;box-shadow:0 22px 44px -24px rgba(60,48,12,.3) !important}
.h20:hover{transform:translateY(-1px) !important}
.h21:hover{border-color:#E0B4B4 !important;color:#C05A5A !important;background:#FDF6F6 !important}
.h22:hover{background:#FAF8F3 !important}
.h23:hover{color:#15140F !important}
.h24:hover{background:#FAF8F3 !important;color:#15140F !important}
.h25:hover{background:#2A2820 !important;color:#FAF8F3 !important}
.h26:hover{color:#15140F !important;border-bottom:2px solid #E3DDCE !important}
.h27:hover{background:#FAF8F3 !important;color:#A6851F !important}
/* --------------------------------------------------------------------------
   Tippziele auf dem Telefon
   Google verlangt für „mobile-friendly" Bedienelemente von mindestens
   24 × 24 px mit etwas Abstand zueinander. Die Linklisten im Fuß der
   Startseite kamen auf 19 px Höhe — breit genug, aber zu flach. Ein wenig
   Innenabstand reicht; am Aussehen ändert sich nichts Sichtbares.
   -------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 760px) {
  a.h13, a.h14, a.h16, a.h23, a.h26, a.h27 {
    display: inline-block; padding: 4px 0; min-height: 24px;
  }
  [data-mr-nav] > a, [data-mr-nav] > div > a { min-height: 44px; display: flex; align-items: center; }

  /* Ankreuzfelder und Auswahlknöpfe: 15 px trifft man mit dem Finger nicht
     zuverlässig. Betrifft vor allem die Filterspalte der Produktliste. */
  input[type="checkbox"], input[type="radio"] {
    width: 24px !important; height: 24px !important; flex-shrink: 0;
  }
  /* Die ganze Zeile antippbar machen, nicht nur das Kästchen. */
  label[data-cat-filter], aside label { min-height: 32px; align-items: center; }

  /* „AGB" und „Datenschutzbestimmungen" stehen als Links mitten im Satz
     über dem Pflichthäkchen. Innenabstand würde den Satzumbruch zerreißen;
     mehr Zeilenhöhe gibt ihnen dieselbe Trefferfläche, ohne dass sich am
     Schriftbild etwas ändert. */
  [data-terms-row] { line-height: 1.75; }
  [data-terms-row] a { padding: 2px 0; }
}

/* Das Suchfeld im Kopf sass als 19 px hohe Zeile in einem 46 px hohen
   Rahmen. Wer den Rahmen antippte statt genau die Zeile, löste nichts aus. */
[data-mr-header] input[type="text"],
[data-mr-header] input[type="search"] {
  height: 100%; align-self: stretch;
  -webkit-appearance: none; appearance: none;   /* kein Safari-Sonderrahmen */
}
/* Das X zum Leeren erscheint in Chrome mitten im Feld und bricht die Zeile. */
[data-mr-header] input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none; appearance: none;
}

/* Aufklappmenüs in der Hauptnavigation.
   Das Markup steht immer im HTML — nur so findet Google die Links.
   Sichtbar wird es beim Überfahren mit der Maus und beim Durchtabben.
   Unter 761 px greift die Navigation auf waagerechtes Scrollen um,
   dort bleiben die Menüs zu. */
[data-act-enter] > [data-mr-menu] { display: none; }
@media (min-width: 761px) {
  [data-act-enter]:hover > [data-mr-menu],
  [data-act-enter]:focus-within > [data-mr-menu] { display: block; }
}