/* Direkter Draht: Telefon und WhatsApp auf allen Seiten.
   Kopfzeile (ab 768 px): Anrufen mit Nummer (Nummer ab 1280 px, darunter nur Symbol) und WhatsApp.
   Handy (unter 768 px): feste Leiste unten mit Erstgespraech, Nummer und WhatsApp.
   WhatsApp-Symbol: Simple Icons (CC0). Kontraste: Text #161512 bzw. #4F4B43 auf Creme, ueber 7:1. */
.kopf-direkt { display: inline-flex; align-items: center; gap: 6px; }
.kopf-tel, .kopf-wa { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border-radius: 999px;
  color: #161512; text-decoration: none; font-size: 14px; font-weight: 500; font-variant-numeric: tabular-nums; white-space: nowrap;
  transition: background .2s ease, color .2s ease; }
.kopf-tel { padding: 0 12px; }
.kopf-wa { width: 40px; }
.kopf-tel:hover, .kopf-wa:hover { background: #EFE9DE; }
.kopf-tel:focus-visible, .kopf-wa:focus-visible { outline: 2px solid #C2643A; outline-offset: 2px; }
.kopf-tel svg, .kopf-wa svg, .direkt-leiste svg, .direkt-zeile svg { flex: none; }
@media (max-width: 1279px) { .kopf-tel__nr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .kopf-tel { width: 40px; padding: 0; } }

/* Feste Leiste unten auf dem Handy */
.direkt-leiste { display: none; }
@media (max-width: 767px) {
  .direkt-leiste { display: flex; gap: 8px; align-items: stretch; position: fixed; left: 0; right: 0; bottom: 0; z-index: 46;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgba(246,242,236,.95);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-top: 1px solid #E5DFD5;
    transition: transform .3s ease; font-family: 'Inter', system-ui, sans-serif; }
  .direkt-leiste.ist-versteckt { transform: translateY(110%); }
  body.mit-direkt-leiste { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
.direkt-leiste a { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; border-radius: 999px;
  text-decoration: none; font-size: 15px; font-weight: 500; white-space: nowrap; }
.direkt-leiste__haupt { flex: 1 1 0; background: #161512; color: #F6F2EC; padding: 0 14px; }
.direkt-leiste__tel { flex: 1.25 1 0; color: #161512; border: 1px solid #161512; padding: 0 10px; font-variant-numeric: tabular-nums; font-size: 14.5px !important; }
.direkt-leiste__wa { flex: none; width: 48px; color: #161512; border: 1px solid #161512; }
.direkt-leiste a { min-width: 0; }
/* Bis 429 px passt die volle Nummer nicht neben Erstgespraech und WhatsApp (bei 375 px ragte WhatsApp
   10 px aus dem Bild). Dort steht "Anrufen"; die Nummer nennt das aria-label des Links. */
@media (max-width: 429px) { .direkt-leiste__tel span { display: none; } .direkt-leiste__tel::after { content: "Anrufen"; } .direkt-leiste__tel { flex: 1 1 0; } }
@media (max-width: 339px) { .direkt-leiste__tel::after { content: none; } .direkt-leiste__tel { flex: none; width: 48px; } }
@media (prefers-reduced-motion: reduce) { .direkt-leiste { transition: none; } }
@media print { .direkt-leiste, .kopf-direkt { display: none !important; } }

/* Kleine Zeile unter den Knoepfen im Kopfbereich der Startseite */
.direkt-zeile { margin-top: 18px; font-size: 15px; color: #4F4B43; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.direkt-zeile a { color: #161512; display: inline-flex; align-items: center; gap: 7px; text-decoration: underline; text-decoration-color: #C9C1B3; text-underline-offset: 4px; font-variant-numeric: tabular-nums; }
.direkt-zeile a:hover { text-decoration-color: #A34E28; }

/* Wissensseiten: eigene Kopfzeile; auf dem Handy uebernimmt die Leiste unten */
@media (max-width: 767px) { .kopf .kopf-direkt { display: none; } }
.kopf .kopf-direkt { margin-left: 8px; }