/* Kopfzeile des Kunden-Webs auf allen Seiten.
 *
 * Es gibt zwei Bauformen: ``header.site-header`` (Portal, Bestelluebersicht,
 * Zahlseite; Regeln aus style.css) und ``header > div.w-full`` (alle
 * uebrigen; Tailwind). Beide bekamen ihre Handy-Regeln bisher getrennt,
 * und die Bestelluebersicht fiel dabei durch: Das Logo blieb um 2cm
 * eingerueckt, der Sprachumschalter lag auf dem Schriftzug, und der Knopf
 * "Zurueck zum Portal" ueberschnitt sich mit dem Logo.
 *
 * Diese Datei gilt fuer beide Bauformen. style.css und die Seiten setzen
 * Logo-Groessen mit !important; die Regeln hier sind deshalb spezifischer
 * (``header ...``) und ebenfalls !important.
 */

/* ---------- Sprachumschalter: senkrecht, spart Breite ---------- */
header .cb-lang-switcher {
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 1px !important;
  padding: 2px !important;
  flex-shrink: 0;
}
header .cb-lang-option {
  padding: 2px 6px !important;
  font-size: 10px !important;
  line-height: 1.2 !important;
  text-align: center;
}

header .cb-header-actions {
  flex-shrink: 0;
}

/* ---------- Handy ---------- */
@media (max-width: 560px) {
  /* html body: style.css setzt hier auf manchen Seiten 4-8px mit
     !important; so sitzt das Logo ueberall gleich weit vom Rand. */
  html body header.site-header,
  html body header > div.w-full {
    padding-left: 12px !important;
    padding-right: 12px !important;
    gap: 8px;
  }
  header .logo-container {
    gap: 8px !important;
    min-width: 0;
  }
  header .logo-container > img {
    width: 28px !important;
    height: 28px !important;
  }
  header .logo-text {
    font-size: 1.3rem !important;
    white-space: nowrap;
  }
  header .logo-slogan {
    display: none !important;
  }
  header .cb-header-actions {
    gap: 6px !important;
  }
  header .cb-header-actions > a {
    padding: 6px 10px !important;
    font-size: 12.5px !important;
    white-space: nowrap;
  }
  /* Der Pfeil kostet Platz; die Richtung sagt der Text schon. */
  header .cb-header-actions > a svg {
    display: none;
  }
}

@media (max-width: 380px) {
  header .logo-text {
    font-size: 1.1rem !important;
  }
  header .cb-header-actions > a {
    padding: 6px 8px !important;
    font-size: 12px !important;
  }
}

@media (max-width: 340px) {
  header .logo-text {
    display: none !important;
  }
}