/* Kontaktleiste oben und Kontakt-Karte mit Foto – auf allen Seiten */
.topbar { display:flex; justify-content:center; flex-wrap:wrap; gap:6px 20px; padding:8px 16px; background:var(--accent-dark, #1b3655); font-size:.8rem; }
.topbar a { display:inline-flex; align-items:center; gap:6px; color:#fff; text-decoration:none; font-weight:500; }
.topbar a:hover { text-decoration:underline; }
.topbar svg { width:15px; height:15px; flex-shrink:0; }
@media (prefers-color-scheme: dark) { .topbar { background:#0f1a26; } }
@media (max-width:420px) { .topbar .tb-full { display:none; } }
@media (min-width:421px) { .topbar .tb-short { display:none; } }

.kontakt { display:flex; gap:16px; align-items:flex-start; background:var(--card, #fff); border:2px solid var(--accent, #2f5d8a); border-radius:12px; padding:20px; margin:16px 0; }
.kontakt-foto { width:76px; height:76px; border-radius:50%; object-fit:cover; flex-shrink:0; box-shadow:0 0 0 3px var(--card, #fff), 0 0 0 4px var(--border, #e0e0e3); }
.kontakt-body { flex:1; min-width:0; }
.kontakt h2 { font-size:1.05rem; color:var(--accent-dark, #1b3655); margin:0 0 2px; }
.kontakt-name { font-size:.8rem; color:var(--muted, #6b6b70); margin:0 0 12px; }
.kontakt-links { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.k-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:8px; text-decoration:none; font-weight:600; font-size:.9rem;
  border:1px solid var(--accent, #2f5d8a); color:var(--accent, #2f5d8a); background:var(--card, #fff); transition:transform .12s ease; }
.k-btn:active { transform:scale(.97); }
.k-btn.k-primary { background:var(--accent, #2f5d8a); color:#fff; }
.k-btn svg { width:17px; height:17px; flex-shrink:0; }
.k-mail { display:flex; align-items:center; gap:8px; font-size:.86rem; color:var(--accent, #2f5d8a); text-decoration:none; word-break:break-all; margin-bottom:8px; }
.k-mail svg, .kontakt-adr svg { width:16px; height:16px; flex-shrink:0; }
.kontakt-adr { display:flex; gap:8px; align-items:flex-start; font-size:.8rem; color:var(--muted, #6b6b70); margin:0; line-height:1.45; }
@media (max-width:420px) {
  .kontakt { flex-direction:column; align-items:center; text-align:center; }
  .kontakt-links { justify-content:center; }
  .k-mail, .kontakt-adr { justify-content:center; }
}
@media (prefers-reduced-motion:reduce) { .k-btn { transition:none; } }
.kontakt-name strong { display:block; color:var(--text, #1c1c1e); font-size:.92rem; }
.kontakt-info { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.kontakt-info li { display:flex; gap:8px; align-items:flex-start; font-size:.8rem; color:var(--muted, #6b6b70); line-height:1.45; }
.kontakt-info svg { width:16px; height:16px; flex-shrink:0; margin-top:1px; }
@media (max-width:420px) { .kontakt-info { align-items:center; } .kontakt-info li { text-align:left; } }

/* Kompakte Kopfzeile: kleines Logo, Name, Anrufen + WhatsApp (ersetzt Kontaktleiste und großen Logo-Kopf) */
.sitehead { position:sticky; top:0; z-index:90; background:var(--card, #fff); border-bottom:1px solid var(--border, #e0e0e3); }
.sitehead-in { max-width:560px; margin:0 auto; padding:8px 16px; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.sh-brand { display:flex; align-items:center; gap:10px; text-decoration:none; min-width:0; }
.sh-brand img { width:40px; height:40px; border-radius:8px; object-fit:contain; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.12); flex-shrink:0; }
.sh-brand span { display:flex; flex-direction:column; line-height:1.2; min-width:0; }
.sh-brand strong { font-size:.9rem; color:var(--accent-dark, #1b3655); white-space:nowrap; }
.sh-brand small { font-size:.72rem; color:var(--muted, #6b6b70); white-space:nowrap; }
.sh-actions { display:flex; gap:8px; flex-shrink:0; }
.sh-actions a { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 12px; border-radius:99px; text-decoration:none; font-size:.8rem; font-weight:600;
  background:var(--accent-bg, #eaf1f8); color:var(--accent-dark, #1b3655); transition:transform .12s ease; }
.sh-actions a:first-child { background:var(--accent, #2f5d8a); color:#fff; }
.sh-actions a:active { transform:scale(.95); }
.sh-actions svg { width:17px; height:17px; }
@media (max-width:420px) { .sh-actions span { display:none; } .sh-actions a { width:40px; padding:0; justify-content:center; } }
body > .wrap { padding-top:20px; }

/* WhatsApp-Button erst nach dem Scrollen (überdeckt sonst die ersten Inhalte) */
.call-fab { opacity:0; pointer-events:none; transform:translateY(12px); transition:opacity .2s ease, transform .2s ease; }
.call-fab.fab-on { opacity:1; pointer-events:auto; transform:none; }
@media (prefers-reduced-motion:reduce) { .call-fab, .sh-actions a { transition:none; } }
.kontakt-social { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; padding-top:12px; border-top:1px solid var(--border, #e0e0e3); }
.kontakt-social > span { font-size:.76rem; font-weight:600; color:var(--muted, #6b6b70); margin-right:2px; }
.kontakt-social a { display:inline-flex; align-items:center; gap:6px; padding:7px 11px; border-radius:99px; border:1px solid var(--border, #e0e0e3);
  color:var(--accent-dark, #1b3655); text-decoration:none; font-size:.78rem; font-weight:600; background:var(--bg, #f7f7f8); transition:transform .12s ease; }
.kontakt-social a:active { transform:scale(.96); }
.kontakt-social svg { width:15px; height:15px; }
@media (hover:hover) { .kontakt-social a:hover { border-color:var(--accent, #2f5d8a); } }
@media (max-width:420px) { .kontakt-social { justify-content:center; } .kontakt-social > span { width:100%; text-align:center; } }
@media (max-width:420px) {
  .kontakt-social { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:6px; }
  .kontakt-social > span { grid-column:1 / -1; }
  .kontakt-social a { justify-content:center; padding:7px 4px; font-size:.74rem; gap:5px; }
}
/* "Folge mir" und die drei Social-Buttons immer zentriert, auf allen Bildschirmgrößen */
.kontakt-social { justify-content:center; text-align:center; }
.kontakt-social > span { width:100%; text-align:center; margin:0 0 2px; }
@media (min-width:421px) { .kontakt-social { display:flex; flex-wrap:wrap; justify-content:center; } }
/* Nur Logos: runde Icon-Buttons, zentriert */
.kontakt-social, .kontakt-social { display:flex !important; flex-wrap:wrap; justify-content:center; gap:12px; }
.kontakt-social a { width:44px; height:44px; padding:0 !important; justify-content:center; border-radius:50%; }
.kontakt-social svg { width:20px; height:20px; }
/* Social-Logos außerhalb der Kontakt-Karte, mittig auf der Seite */
.page-social { border-top:none !important; padding-top:0 !important; margin:4px 0 24px !important; }