/* A tactile contact selector with a responsive, articulated KÜNI figure. */
.contact-choice {
 --switch-ink: #0C1C22;
 --switch-teal: #006277;
 display: grid;
 grid-template-columns: minmax(0, 1fr) 192px;
 gap: 22px;
 align-items: center;
 max-width: 800px;
 min-height: 234px;
 margin: 0 0 30px;
 padding: 20px 30px;
 border: 1px solid #C8D9DC;
 border-radius: 18px;
 background: #F7FAFA;
}
.contact-choice[hidden] { display: none !important; }
.contact-choice__copy { min-width: 0; }
.contact-choice__title { margin: 0 0 18px; color: #0C1C22; font: 600 21px/1.3 var(--display); letter-spacing: -.025em; }
.contact-choice__switch {
 display: flex;
 position: relative;
 isolation: isolate;
 width: 100%;
 max-width: 330px;
 padding: 5px;
 border: 1px solid #173B46;
 border-radius: 15px;
 background: #102A33;
 box-shadow: inset 0 2px 5px #0005, 0 1px 0 #FFFFFF;
}
.contact-choice__thumb {
 position: absolute;
 z-index: -1;
 top: 5px;
 bottom: 5px;
 left: 5px;
 width: calc(50% - 5px);
 border: 1px solid #FFFFFF;
 border-radius: 10px;
 background: linear-gradient(180deg, #FFFFFF, #DFE8E9);
 box-shadow: 0 3px 6px #0005;
 transition: transform 420ms cubic-bezier(.22,1,.36,1), background 220ms, border-color 220ms;
}
.contact-choice[data-mode="assistant"] .contact-choice__thumb {
 transform: translateX(100%);
 background: linear-gradient(180deg, #09778B, #005D70);
 border-color: #369CAC;
}
.contact-choice__option {
 flex: 1 1 50%;
 min-width: 0;
 min-height: 48px;
 padding: 10px 8px;
 border: 0;
 border-radius: 9px;
 background: transparent;
 color: #C2D4D8;
 cursor: pointer;
 font: 600 16px/1.3 var(--text);
 text-align: center;
 transition: color 180ms;
 -webkit-tap-highlight-color: transparent;
}
.contact-choice__option[aria-pressed="true"] { color: #0C1C22; }
.contact-choice[data-mode="assistant"] .contact-choice__option[aria-pressed="true"] { color: #FFFFFF; }
.contact-choice__option:focus-visible { outline: 3px solid #C9922E !important; outline-offset: 3px; }
.contact-choice__option svg { vertical-align: -2px; margin-right: 5px; }
/* Die Marke im dunklen Schalter: helle Platte wie auf allen dunklen Flaechen,
   die Farbe bleibt #006277, in beiden Stellungen lesbar. */
.contact-choice__option .ku { padding: .06em .3em .1em; border-radius: 4px; background: #DCEEF2; }
.contact-choice__status { max-width: 34ch; margin: 14px 0 0; min-height: 42px; color: #465E65; font: 400 15px/1.4 var(--text); }
.contact-choice__stage { position: relative; align-self: stretch; display: grid; align-items: center; justify-items: center; min-width: 0; }
.contact-choice__figure { display: block; width: 100%; height: auto; overflow: visible; }
.contact-choice__figure * { transform-box: view-box; }
.kueni-rig { transform-origin: 120px 215px; transform: translateY(30px); }
.kueni-head { transform-origin: 120px 125px; transform: rotate(-9deg); transition: transform 400ms cubic-bezier(.22,1,.36,1); }
.kueni-arm-left { transform-origin: 78px 142px; transform: rotate(-22deg); transition: transform 420ms; }
.kueni-arm-right { transform-origin: 161px 142px; transform: rotate(20deg); transition: transform 420ms; }
.kueni-leg-left { transform-origin: 99px 179px; transform: rotate(67deg); transition: transform 380ms; }
.kueni-leg-right { transform-origin: 140px 179px; transform: rotate(-67deg); transition: transform 380ms; }
.kueni-eyes-awake, .kueni-mouth-awake { opacity: 0; transition: opacity 180ms; }
.kueni-eyes-rest, .kueni-mouth-rest { opacity: 1; transition: opacity 180ms; }
.kueni-light { fill: #738C94; transition: fill 250ms, filter 250ms; }
.kueni-floor { transform-origin: 120px 220px; transform: scaleX(1.08); opacity: .18; transition: transform 350ms, opacity 350ms; }
.contact-choice[data-mode="assistant"] .kueni-rig { transform: translateY(0); }
.contact-choice[data-mode="assistant"] .kueni-head { transform: rotate(0); }
.contact-choice[data-mode="assistant"] .kueni-arm-left { transform: rotate(12deg); }
.contact-choice[data-mode="assistant"] .kueni-arm-right { transform: translateX(8px) rotate(-102deg); }
.contact-choice[data-mode="assistant"] .kueni-leg-left, .contact-choice[data-mode="assistant"] .kueni-leg-right { transform: rotate(0); }
.contact-choice[data-mode="assistant"] .kueni-eyes-awake, .contact-choice[data-mode="assistant"] .kueni-mouth-awake { opacity: 1; }
.contact-choice[data-mode="assistant"] .kueni-eyes-rest, .contact-choice[data-mode="assistant"] .kueni-mouth-rest { opacity: 0; }
.contact-choice[data-mode="assistant"] .kueni-light { fill: #62E8E4; filter: url(#kueni-switch-glow); }
.contact-choice[data-mode="assistant"] .kueni-floor { transform: scaleX(.84); opacity: .13; }
.contact-choice.is-waking .kueni-rig { animation: kueni-switch-wake 720ms both; }
.contact-choice.is-waking .kueni-arm-right { animation: kueni-switch-wave 1100ms 220ms both; }
.contact-choice.is-waking .kueni-floor { animation: kueni-switch-shadow 720ms both; }
.contact-choice.is-resting .kueni-rig { animation: kueni-switch-rest 500ms both; }
.contact-choice.is-changing + #contact-form-panel:not([hidden]),
.contact-choice.is-changing ~ #contact-assistant-panel:not([hidden]) { animation: kueni-switch-panel 230ms ease-out both; }
@keyframes kueni-switch-wake {
 0% { transform: translateY(30px) scale(1); }
 18% { transform: translateY(34px) scale(1.035,.96); }
 50% { transform: translateY(-17px) scale(.98,1.02); }
 76% { transform: translateY(3px) scale(1.025,.975); }
 100% { transform: translateY(0) scale(1); }
}
@keyframes kueni-switch-wave {
 0% { transform: translateX(0) rotate(20deg); }
 35% { transform: translateX(8px) rotate(-112deg); }
 53% { transform: translateX(8px) rotate(-82deg); }
 71% { transform: translateX(8px) rotate(-115deg); }
 86% { transform: translateX(8px) rotate(-88deg); }
 100% { transform: translateX(8px) rotate(-102deg); }
}
@keyframes kueni-switch-rest {
 0% { transform: translateY(0) scale(1); }
 72% { transform: translateY(32px) scale(1.025,.98); }
 100% { transform: translateY(30px) scale(1); }
}
@keyframes kueni-switch-shadow {
 0% { transform: scaleX(1.08); opacity: .18; }
 50% { transform: scaleX(.65); opacity: .08; }
 100% { transform: scaleX(.84); opacity: .13; }
}
@keyframes kueni-switch-panel { from { opacity: .55; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 600px) {
 .contact-choice { grid-template-columns: minmax(0,1fr) clamp(90px,28vw,142px); gap: 10px; padding: 17px 16px; min-height: 194px; border-radius: 15px; }
 .contact-choice__title { font-size: 18px; margin-bottom: 14px; }
 .contact-choice__figure { width: 125%; max-width: none; }
 .contact-choice__switch { padding: 4px; border-radius: 13px; }
 .contact-choice__thumb { top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 9px; }
 .contact-choice__option { min-height: 44px; font-size: 14px; padding: 9px 4px; }
 .contact-choice__option svg { width: 12px; height: 12px; margin-right: 3px; }
 .contact-choice__status { font-size: 14px; line-height: 1.45; min-height: 41px; margin-top: 12px; }
}
@media (max-width: 350px) {
 .contact-choice { grid-template-columns: minmax(0,1fr) 82px; gap: 6px; padding-inline: 12px; }
 .contact-choice__title { font-size: 17px; }
 .contact-choice__option svg { display: none; }
}
@media (prefers-reduced-motion: reduce) {
 .contact-choice *, .contact-choice *::before { animation: none !important; transition: none !important; }
 .contact-choice.is-changing + #contact-form-panel, .contact-choice.is-changing ~ #contact-assistant-panel { animation: none !important; }
}