.nkkt-157 { --nkkt-accent: #3F6A6B; --nkkt-ink: #FFFFFF; --nkkt-panel: #FFFFFF; font-family: "Hanken Grotesk", system-ui, sans-serif; }
.nkkt-157-editor-note { display: none; }
.nkkt-157.is-editor .nkkt-157-editor-note { display: block; padding: 12px 16px; border: 1px dashed #B9AD95; border-radius: 12px; font-size: 14px; color: #2C2E29; background: #F5F4EF; }
.nkkt-157.is-editor .nkkt-157-tab, .nkkt-157.is-editor .nkkt-157-fab { display: none !important; }

/* Kontakt-Lasche rechts (Desktop) */
.nkkt-157-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9980; display: flex; padding-right: env(safe-area-inset-right, 0px); }
.nkkt-157-handle {
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	background: var(--nkkt-accent);
	color: var(--nkkt-ink);
	font: 500 11px "Unbounded", system-ui, sans-serif;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 18px 11px;
	border: 0;
	border-radius: 0 14px 14px 0;
	cursor: pointer;
}
.nkkt-157-handle:hover, .nkkt-157-handle:focus { background: var(--nkkt-accent); color: var(--nkkt-ink); }
.nkkt-157-panel { width: 0; overflow: hidden; border-radius: 0; transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); background: var(--nkkt-panel); box-shadow: -12px 0 40px rgba(28, 29, 25, 0.16); }
.nkkt-157-inner { width: 230px; padding: 20px; display: grid; gap: 12px; }
.nkkt-157-tab:hover .nkkt-157-panel, .nkkt-157-tab:focus-within .nkkt-157-panel, .nkkt-157-tab.is-open .nkkt-157-panel { width: 230px; }
.nkkt-157-eyebrow { font: 400 11px "Unbounded", system-ui, sans-serif; letter-spacing: 0.18em; text-transform: uppercase; color: #5E615B; }
.nkkt-157-val { display: block; font-weight: 600; font-size: 16px; color: #2C2E29; text-decoration: none; }
.nkkt-157-val:hover { color: var(--nkkt-accent); }
.nkkt-157-val small { display: block; color: #5E615B; font-size: 12px; font-weight: 400; }

/* Telefon-Knopf unten links (Handy): 1. Tipp klappt auf, 2. Tipp ruft an, Pfeil klappt ein */
.nkkt-157-fab {
	display: none;
	position: fixed;
	z-index: 9980;
	left: max(16px, env(safe-area-inset-left, 0px));
	bottom: calc(16px + env(safe-area-inset-bottom, 0px));
	height: 52px;
	width: 52px;
	border-radius: 999px;
	background: var(--nkkt-accent);
	color: var(--nkkt-ink);
	align-items: center;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba(28, 29, 25, 0.25);
	transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.nkkt-157-call { display: flex; align-items: center; flex: 1 1 auto; min-width: 52px; height: 100%; color: inherit; text-decoration: none; }
.nkkt-157-call:hover, .nkkt-157-call:focus { color: inherit; }
.nkkt-157-call svg { flex: 0 0 52px; width: 52px; height: 22px; }
.nkkt-157-call span { white-space: nowrap; font-weight: 600; font-size: clamp(12.5px, 3.9vw, 15px); opacity: 0; transition: opacity 0.25s; }
.nkkt-157-call u { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.nkkt-157-close { flex: 0 0 44px; width: 44px; height: 44px; margin-right: 4px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.14); color: inherit; display: grid; place-items: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.25s; }
.nkkt-157-close:hover, .nkkt-157-close:focus { background: rgba(255, 255, 255, 0.22); color: inherit; }
.nkkt-157-close svg { width: 20px; height: 20px; }
.nkkt-157-fab.is-open { width: calc(100vw - 2 * max(16px, env(safe-area-inset-left, 0px))); }
.nkkt-157-fab.is-open .nkkt-157-call span { opacity: 1; transition-delay: 0.15s; }
.nkkt-157-fab.is-open .nkkt-157-close { opacity: 1; pointer-events: auto; transition-delay: 0.15s; }
@media (max-width: 767px) {
	.nkkt-157-tab { display: none; }
	.nkkt-157-fab { display: flex; }
}