/* aufgehoben. Sprachnachrichten – Frontend
   Farben anpassen: im Theme-CSS z. B.  .kk { --kk-accent: #C2551F; }  */
.kk {
	--kk-accent: #C2551F;
	--kk-accent-ink: #ffffff;
	--kk-text: inherit;
	--kk-muted: rgba(0, 0, 0, .6);
	--kk-line: rgba(0, 0, 0, .14);
	--kk-soft: rgba(194, 85, 31, .08);
	--kk-radius: 16px;
	max-width: 520px;
	margin: 0 auto;
	font: inherit;
	color: var(--kk-text);
	text-align: center;
}
.kk *, .kk *::before, .kk *::after { box-sizing: border-box; }
.kk [hidden] { display: none !important; }
.kk .kk-step { display: flex; flex-direction: column; align-items: center; gap: 14px; }

.kk .kk-mic {
	width: 112px; height: 112px; border-radius: 50%;
	border: 0; cursor: pointer;
	background: var(--kk-accent); color: var(--kk-accent-ink);
	display: grid; place-items: center;
	box-shadow: 0 10px 30px rgba(194, 85, 31, .35);
	transition: transform .15s ease, box-shadow .15s ease;
}
.kk .kk-mic:hover { transform: scale(1.04); }
.kk .kk-mic:focus-visible { outline: 3px solid var(--kk-accent); outline-offset: 4px; }
.kk .kk-mic svg { width: 46px; height: 46px; fill: currentColor; }

.kk .kk-label { font-weight: 600; margin: 0; }
.kk .kk-title { font-size: 1.4em; font-weight: 700; margin: 0 0 .3em; }
.kk .kk-small { font-size: .85em; color: var(--kk-muted); margin: 0; line-height: 1.5; }

.kk .kk-recdot {
	width: 18px; height: 18px; border-radius: 50%; background: #e0344b;
	animation: kk-pulse 1.2s ease-in-out infinite;
}
@keyframes kk-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } }
.kk .kk-timer { font-size: 2em; font-variant-numeric: tabular-nums; font-weight: 600; }

.kk .kk-btn {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 48px; padding: 0 26px; border-radius: 999px;
	border: 2px solid var(--kk-accent); background: transparent; color: var(--kk-accent);
	font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.kk .kk-btn.kk-primary { background: var(--kk-accent); color: var(--kk-accent-ink); }
.kk .kk-btn:focus-visible { outline: 3px solid var(--kk-accent); outline-offset: 3px; }
.kk .kk-link { background: none; border: 0; padding: 4px; color: var(--kk-accent); text-decoration: underline; cursor: pointer; font: inherit; font-size: .9em; }

.kk audio { width: 100%; max-width: 420px; }

.kk .kk-fields { width: 100%; display: flex; flex-direction: column; gap: 12px; text-align: left; margin-top: 6px; }
.kk .kk-field { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: .95em; }
.kk .kk-field em { font-style: normal; font-weight: 400; color: var(--kk-muted); }
.kk .kk-field input {
	width: 100%; min-height: 46px; padding: 10px 14px;
	border: 1px solid var(--kk-line); border-radius: 10px; font: inherit; font-size: 16px;
	background: #fff; color: #222;
}
.kk .kk-field input:focus { outline: 2px solid var(--kk-accent); border-color: transparent; }
.kk .kk-check { display: flex; gap: 10px; align-items: flex-start; font-size: .85em; line-height: 1.5; text-align: left; }
.kk .kk-check input { width: 20px; height: 20px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--kk-accent); }
.kk .kk-check a { color: var(--kk-accent); }
.kk .kk-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

.kk .kk-error { color: #c0263c; font-size: .9em; margin: 0; min-height: 1em; }

.kk .kk-codebox {
	width: 100%; padding: 16px; border-radius: var(--kk-radius);
	background: var(--kk-soft); word-break: break-all;
}
.kk .kk-codebox a { color: var(--kk-accent); font-weight: 600; }
.kk .kk-codebox p { margin: 8px 0 0; }
.kk .kk-codebox strong { letter-spacing: .06em; white-space: nowrap; }

.kk .kk-spinner {
	width: 40px; height: 40px; border-radius: 50%;
	border: 4px solid var(--kk-soft); border-top-color: var(--kk-accent);
	animation: kk-spin .8s linear infinite;
}
@keyframes kk-spin { to { transform: rotate(360deg); } }

.kk .kk-filebtn { position: relative; overflow: hidden; }
.kk .kk-filebtn input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }

.kk .kk-lookup { display: flex; flex-direction: column; gap: 12px; align-items: stretch; text-align: left; }
.kk .kk-lookup input { text-transform: uppercase; letter-spacing: .06em; }
.kk [data-el="result"] { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.kk .kk-own { width: 100%; text-align: left; font-size: .9em; }
.kk .kk-own summary { cursor: pointer; color: var(--kk-accent); }
.kk .kk-own audio { margin-top: 10px; }

@media (prefers-reduced-motion: reduce) {
	.kk .kk-recdot, .kk .kk-spinner { animation: none; }
	.kk .kk-mic { transition: none; }
}

.kk .kk-idfields { display: flex; flex-direction: column; gap: 12px; }
.kk .kk-secret { display: inline-block; align-self: center; cursor: pointer; font-size: .85em; color: var(--kk-muted); text-decoration: underline; text-underline-offset: 3px; padding: 4px; }
.kk .kk-secret:hover { color: var(--kk-accent); }
.kk .kk-secret-cb { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.kk .kk-secret-cb:focus-visible ~ span { outline: 2px solid var(--kk-accent); outline-offset: 2px; }
.kk .kk-secret-aus, .kk .kk-secret-info { display: none; }
.kk.kk-anonym .kk-secret-an { display: none; }
.kk.kk-anonym .kk-secret-aus { display: inline; }
.kk.kk-anonym .kk-secret-info { display: block; text-align: center; }

.kk .kk-ruhe { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--kk-line); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.kk .kk-ruhe[hidden] { display: none; }
.kk .kk-ruhe-dach { margin: 0; font-size: .8em; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--kk-accent); }
.kk .kk-ruhe-text { margin: 0; font-size: 1.15em; line-height: 1.5; font-weight: 600; max-width: 380px; }
.kk .kk-atem { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 10px 0 4px; }
.kk .kk-atem[hidden] { display: none; }
.kk .kk-atem-kreis { width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #F6A779, var(--kk-accent)); opacity: .9; transform: scale(.55); transition: transform 4s ease-in-out; box-shadow: 0 12px 40px rgba(194, 85, 31, .3); }
.kk .kk-atem-kreis.kk-ein { transform: scale(1); transition-duration: 4s; }
.kk .kk-atem-kreis.kk-aus { transform: scale(.55); transition-duration: 6s; }
.kk .kk-atem-text { margin: 0; font-weight: 600; min-height: 1.5em; }
.kk .kk-btn.kk-atem-btn { background: transparent; color: var(--kk-accent); border: 1.5px solid var(--kk-accent); }
@media (prefers-reduced-motion: reduce) { .kk .kk-atem-kreis { transition: none; } }

.kk .kk-impulse { font-size: .85em; }
.kk .kk-abo-frage { margin-top: 18px; padding: 18px 16px; border-radius: 16px; background: var(--kk-soft); display: flex; flex-direction: column; align-items: center; gap: 10px; }
.kk .kk-abo-frage[hidden], .kk .kk-abo-ok[hidden] { display: none; }
.kk .kk-abo-ok { margin: 16px 0 0; padding: 14px 16px; border-radius: 14px; background: var(--kk-soft); font-weight: 600; }