/* AH-BK · Kontaktbox am rechten Rand (includes/kontakt-float.php) */
/* Kontaktbox am rechten Rand, unterhalb der Mitte (frei von den Slider-Pfeilen) (includes/kontakt-float.php): minimiert als senkrechte Lasche, offen als Panel */
.kf { position: fixed; right: 0; top: 72%; z-index: 800; transform: translateY(-50%); transition: opacity .3s, translate .3s }
.kf:not([data-zustand]) { opacity: 0; translate: 16px 0; pointer-events: none }
/* Lasche fährt erst beim Scrollen herein (zusammen mit „Nach oben“, Klasse aus nach-oben.js) – oben steht der Kontakt ja schon in der Kopfzeile. Offenes Panel bleibt. */
html:not(.weit-gescrollt) .kf[data-zustand="zu"] { visibility: hidden; opacity: 0; translate: 100% 0; pointer-events: none }
.kf { transition: opacity .3s, translate .3s, visibility .3s }
.kf :focus-visible { outline-color: var(--accent) }
.kf-panel { position: relative; width: 320px; padding: 24px 24px 22px; border-radius: var(--r-lg) 0 0 var(--r-lg); background: var(--primary-900); color: #fff; box-shadow: 0 22px 50px rgba(8, 14, 32, .35); animation: kf-rein .35s cubic-bezier(.2, .8, .2, 1) }
.kf-dock { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px; border-radius: var(--r-md) 0 0 var(--r-md); background: var(--primary-900); color: #fff; box-shadow: 0 14px 34px rgba(8, 14, 32, .32); animation: kf-rein .3s cubic-bezier(.2, .8, .2, 1) }
@keyframes kf-rein { from { transform: translateX(100%) } to { transform: none } }
.kf-dock[hidden], .kf-panel[hidden] { display: none }
.kf-zu { position: absolute; top: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; font-size: 1rem; cursor: pointer; transition: background var(--t) }
.kf-zu:hover { background: rgba(255, 255, 255, .2) }
.kf-titel { margin: 0 40px 10px 0; font-size: 1.3rem; font-weight: 800; line-height: 1.25; letter-spacing: -.01em }
.kf-anmelden { width: 100%; justify-content: center; margin-top: 18px }
.kf-dock-btn { width: 42px; height: 42px; display: grid; place-items: center; border: 0; border-radius: var(--r-md); background: none; color: #fff; font-size: 1.1rem; cursor: pointer; transition: background var(--t), color var(--t) }
.kf-dock-btn:hover { background: rgba(255, 255, 255, .12) }
.kf-auf { height: 46px; margin-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-md) var(--r-md) 0 0; color: var(--primary-900) }
/* Aufklappen deutlich, aber schlicht: weißer Kreis mit Pfeil; beim Hereinfahren stupst der Pfeil zweimal nach links */
.kf-auf svg { width: 32px; height: 32px; padding: 7px; border-radius: 50%; background: #fff; stroke-width: 2.6; transition: transform var(--t), background var(--t) }
.kf-auf:hover { background: none }
.kf-auf:hover svg { background: var(--accent); transform: translateX(-2px) }
.weit-gescrollt .kf-auf svg { animation: kf-stups .5s ease-in-out .5s 2 }
@keyframes kf-stups { 50% { transform: translateX(-4px) } }
.kf-dock-btn--anmelden { margin-top: 2px; background: var(--accent); color: var(--primary-900) }
.kf-dock-btn--anmelden:hover { background: var(--accent-strong) }
/* „Nach oben“ als unterste Taste der Leiste (assets/js/module/nach-oben.js) */
.kf-nach-oben { margin-top: 3px; border-top: 1px solid rgba(255, 255, 255, .14); border-radius: 0 0 var(--r-md) var(--r-md) }

/* Responsive */
@media (prefers-reduced-motion: reduce) {
	.kf-panel, .kf-dock, .weit-gescrollt .kf-auf svg { animation: none }
}

/* Handy: unten rechts, da die Slider-Pfeile dort im unteren Hero-Bereich liegen */
@media (max-width: 760px) {
	.kf { top: auto; bottom: 16px; transform: none }
	.kf-dock { padding: 4px; border-radius: var(--r-md) 0 0 var(--r-md) }
	.kf-dock-btn { width: 36px; height: 36px; border-radius: var(--r-md); font-size: 1rem }
	.kf-auf { height: 40px } .kf-auf svg { width: 28px; height: 28px; padding: 6px }
	.kf-panel { width: min(320px, calc(100vw - 24px)) }
}

/* „Nach oben“ freistehend – nur auf Seiten ohne Kontaktbox (includes/layout.php, assets/js/module/nach-oben.js): unten rechts, ruhig – weißer Kreis, Pfeil blau; erscheint beim Scrollen */
.nach-oben { position: fixed; right: 24px; bottom: 24px; z-index: 790; display: grid; place-items: center; width: 46px; height: 46px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: #fff; color: var(--primary); font-size: 1.25rem; box-shadow: var(--shadow-sm); cursor: pointer; opacity: 0; translate: 0 12px; pointer-events: none; transition: opacity var(--t), translate var(--t), color var(--t-fast), border-color var(--t-fast) }
.nach-oben.ist-sichtbar { opacity: 1; translate: 0 0; pointer-events: auto }
.nach-oben:hover { border-color: var(--primary); color: var(--accent-strong) }
.nach-oben:focus-visible { outline: 3px solid var(--primary); outline-offset: 3px }
@media (prefers-reduced-motion: reduce) { .nach-oben { transition: none; translate: none } }
@media (max-width: 760px) { .nach-oben { right: 12px; bottom: 16px; width: 42px; height: 42px } }