:root{
/* ---- Marke ---- */
--zki-blue: var(--e-global-color-primary, #1A54F9);
--zki-blue-deep: var(--e-global-color-ef2cd4b, #3359A5);
--zki-blue-tint: var(--e-global-color-a3eba1e, #E1EBFF);
--zki-yellow: var(--e-global-color-secondary, #FCBC0F);
--zki-yellow-tint: var(--e-global-color-dc08c37, #FFF3B7);
--zki-ink: var(--e-global-color-text, #222727);
--zki-grey: var(--e-global-color-a843588, #F3F6F7);
--zki-white: var(--e-global-color-28f8675, #fff);
/* ---- Chatbot-Widget (aus dem Produkt-Screenshot gemessen) ---- */
--zki-bot-body: #F9F9FA;
--zki-bot-foot: #F0F0F0;
--zki-bot-field: #F8F9FA;
--zki-bot-scroll:#C8CDCD;
--zki-bot-h: 660px;
/* ---- Abgeleitete Töne (kein Pendant im Kit) ---- */
--zki-ink-700:#4A5252; --zki-ink-500:#646E6E;
--zki-line:#E3E8EA; --zki-line-2:#D3DCE6;
/* ---- Ampel der Abwesenheitsprognose (Farbwerte wie im Produkt) ---- */
--zki-amp-good:#A5D46A; --zki-amp-warn:#F8D775; --zki-amp-crit:#E4707E;
--zki-amp-good-tx:#3F6B14;
/* ---- Statusfarben für UI-Feedback in den Mockups ---- */
--zki-ok:#0C7A46; --zki-ok-bg:#E6F5ED;
/* ---- WebClient Schicht-/Urlaubsplaner ---- */
--zki-wc-head:#E8EEF6; --zki-wc-name:#EDF2F9; --zki-wc-line:#C9D3DF; --zki-wc-sel:#4A7CB5;
--zki-wc-fr:#D9EAD3; --zki-wc-sbs:#FFFB8F; --zki-wc-num:#FCE4D6; --zki-wc-abw:#DDDDDD;
/* ---- Typografie ---- */
--zki-font-text: var(--e-global-typography-text-font-family, "Switzer Variable"),
"Switzer", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--zki-font-size: var(--e-global-typography-text-font-size, 18px);
/* ---- Form ----
Radien leiten sich vom Basis-Radius der Seite ab (1.25rem = 20px). */
--zki-radius: var(--standard-radius, 1.25rem);
--zki-r-card: var(--zki-radius); /* 20px */
--zki-r-bot: calc(var(--zki-radius) * .9); /* 18px */
--zki-r-sm: calc(var(--zki-radius) * .8); /* 16px */
--zki-r-msg: calc(var(--zki-radius) * .75); /* 15px */
--zki-r-pill: 99px;
--zki-shadow-md:0 10px 30px rgba(34,39,39,.09);
--zki-shadow-lg:0 24px 60px rgba(34,39,39,.14);
--zki-ease:cubic-bezier(.22,.68,.35,1);
--zki-pace:1;
}
/* ============================================================================
2 · Grundlagen der Mockups
========================================================================= */
:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) *,:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) *::before,:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) *::after{ box-sizing:border-box; }
:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend){
color:var(--zki-ink); font-family:var(--zki-font-text); font-size:var(--zki-font-size);
line-height:1.62; -webkit-font-smoothing:antialiased;
}
:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) img,:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) svg{ max-width:100%; display:block; }
:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) h3,:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) h4{
font-family:var(--zki-font-text); font-weight:600; line-height:1.07;
letter-spacing:-.015em; margin:0 0 .5em; color:inherit;
}
:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) p{ margin:0 0 1.1em; }
:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) strong,:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) b{ font-weight:600; }
:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) :focus-visible{ outline:3px solid var(--zki-blue); outline-offset:3px; border-radius:4px; }
.zki-vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.zki-mock{ position:relative; }
/* ============================================================================
3 · Chatbot-/Assistant-Fenster
========================================================================= */
.zki-bot{
width:100%; max-width:380px; height:var(--zki-bot-h); margin-inline:auto; background:var(--zki-bot-body);
border-radius:var(--zki-r-bot); overflow:hidden; box-shadow:var(--zki-shadow-lg);
display:flex; flex-direction:column;
}
.zki-bot__head{ background:var(--zki-blue); color:var(--zki-white); display:flex; align-items:center; gap:13px; padding:16px 18px; }
.zki-bot__logo{ display:flex; }
.zki-bot__logo svg{ width:50px; height:auto; color:var(--zki-white); }
.zki-bot__head h3{ font-size:19px; font-weight:700; color:var(--zki-white); margin:0; letter-spacing:-.01em; }
.zki-bot__max{ margin-left:auto; width:19px; height:19px; opacity:.92; }
.zki-bot__body{
padding:18px; flex:1 1 auto; min-height:0;
display:flex; flex-direction:column;
overflow-y:auto; scrollbar-gutter:stable;
scrollbar-width:thin; scrollbar-color:var(--zki-bot-scroll) transparent;
}
.zki-bot__body::-webkit-scrollbar{ width:9px; }
.zki-bot__body::-webkit-scrollbar-track{ background:transparent; }
.zki-bot__body::-webkit-scrollbar-thumb{
background:var(--zki-bot-scroll); border-radius:var(--zki-r-pill);
border:3px solid transparent; background-clip:content-box;
}
.zki-bot__av{ width:34px; height:34px; border-radius:8px; background:var(--zki-blue); display:grid; place-items:center; margin-bottom:11px; }
.zki-bot__av svg{ width:19px; height:19px; color:var(--zki-white); }
.zki-bot__msg{ opacity:0; transform:translateY(12px); }
.zki-wait{ display:none !important; }
.zki-on .zki-bot__msg{ animation:zkiFadeUp .55s var(--zki-ease) forwards; }
@keyframes zkiFadeUp{ to{ opacity:1; transform:none; } }
.zki-bot__bubble{ background:var(--zki-white); border-radius:var(--zki-r-msg); padding:14px 17px; font-size:15px; line-height:1.5; box-shadow:0 1px 3px rgba(34,39,39,.07); }
.zki-bot__bubble p{ margin:0 0 .7em; } .zki-bot__bubble p:last-child{ margin:0; }
.zki-bot__bubble h4{ font-family:var(--zki-font-text); font-size:15.5px; font-weight:700; margin:0 0 .6em; letter-spacing:-.01em; line-height:1.25; }
.zki-bot__bubble ol{ margin:0; padding-left:1.15em; font-size:14.5px; }
.zki-bot__bubble ol > li{ margin-bottom:.55em; font-weight:600; }
.zki-bot__bubble ul{ margin:.35em 0 0; padding-left:1.1em; }
.zki-bot__bubble ul li{ font-weight:400; margin-bottom:.3em; }
.zki-bot__user{ background:var(--zki-blue); color:var(--zki-white); border-radius:var(--zki-r-bot); padding:12px 19px; font-size:15px; line-height:1.45; max-width:88%; margin-left:auto; }
.zki-bot__sugg.zki-bot__sugg{
display:block; width:100% !important; background:var(--zki-white) !important;
border:1px solid var(--zki-blue) !important; color:var(--zki-blue) !important;
border-radius:var(--zki-r-pill) !important; padding:13px 22px !important;
font-family:var(--zki-font-text) !important; font-size:15px !important; font-weight:400 !important;
line-height:1.45 !important; text-align:left !important; margin-top:11px !important; cursor:pointer;
white-space:normal !important; overflow-wrap:break-word; max-width:100% !important;
text-transform:none !important; letter-spacing:normal !important;
appearance:none !important; -webkit-appearance:none !important;
box-shadow:none !important; text-decoration:none !important;
transition:background-color .2s var(--zki-ease);
}
.zki-bot__sugg.zki-bot__sugg:hover{ background:var(--zki-blue-tint) !important; }
.zki-bot__src{ display:inline-flex; align-items:center; gap:6px; margin-top:11px; font-size:12px; font-weight:500; color:var(--zki-blue-deep); background:var(--zki-blue-tint); padding:4px 10px; border-radius:var(--zki-r-pill); }
.zki-bot__src svg{ width:12px; height:12px; flex:none; }
.zki-bot__foot{ background:var(--zki-bot-foot); padding:14px 16px 11px; margin-top:auto; }
.zki-bot__inrow{ display:flex; align-items:center; gap:12px; }
.zki-bot__tune,.zki-bot__send{ width:21px; height:21px; flex:none; }
.zki-bot__tune{ color:var(--zki-ink-700); } .zki-bot__send{ color:var(--zki-blue); }
.zki-bot__field{ flex:1; background:var(--zki-bot-field); border:1px solid #E4E6E8; border-radius:var(--zki-r-pill); padding:11px 19px; font-size:15px; color:#7E8686; }
.zki-bot__privacy{ text-align:center; font-size:12.5px; color:var(--zki-ink-500); margin:9px 0 0; }
.zki-soon{
display:inline-block; vertical-align:middle; margin-left:10px;
font-family:var(--zki-font-text); font-size:12px; font-weight:600; line-height:1.4;
letter-spacing:0; text-transform:none; white-space:nowrap;
color:#7A5200; background:var(--zki-yellow-tint); border:1px solid #F0D98A;
padding:3px 10px; border-radius:var(--zki-r-pill);
}
.zki-bot__head .zki-soon{ margin-left:0; flex:none; }
.zki-late{ opacity:0; transform:translateY(10px); }
.zki-on .zki-late{ animation:zkiFadeUp .5s var(--zki-ease) forwards; }
/* Anklickbare Vorschlagsfragen */
.zki-bot__answer{ display:none; }
.zki-bot__answer.zki-shown{ display:block; }
.zki-bot__sugglist.zki-hidden{ display:none; }
.zki-bot__body.zki-answered > .zki-bot__msg{ display:none; }
.zki-bot__back.zki-bot__back{
display:inline-flex; align-items:center; gap:6px;
margin-top:12px !important; padding:0 !important; width:auto !important;
background:none !important; border:0 !important; border-radius:0 !important;
font-family:var(--zki-font-text) !important; font-size:12.5px !important; font-weight:600 !important;
line-height:1.4 !important; color:var(--zki-blue) !important; cursor:pointer;
text-transform:none !important; letter-spacing:normal !important;
appearance:none !important; -webkit-appearance:none !important;
box-shadow:none !important; text-decoration:none !important;
}
.zki-bot__back.zki-bot__back svg{ width:12px; height:12px; }
.zki-bot__back.zki-bot__back:hover{ text-decoration:underline !important; }
:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) button{
appearance:none !important; -webkit-appearance:none !important;
background:none !important; background-image:none !important;
border:0 !important; border-radius:0 !important;
margin:0 !important; padding:0 !important; width:auto !important;
min-width:0 !important; min-height:0 !important;
font:inherit !important; color:inherit !important;
text-transform:none !important; letter-spacing:normal !important;
text-decoration:none !important; text-shadow:none !important;
box-shadow:none !important; outline-offset:3px;
white-space:normal !important; overflow-wrap:break-word;
max-width:100% !important;
}
:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) button:hover,:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) button:focus,:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) button:active{
background:none !important; box-shadow:none !important; transform:none;
}
/* ============================================================================
4 · Datenübertragung (Assistant)
========================================================================= */
.zki-fetch{
position:relative; display:flex; align-items:center; gap:9px; overflow:hidden;
background:var(--zki-grey); border:1px solid var(--zki-line); border-radius:9px;
padding:8px 11px; margin-bottom:7px; font-size:12.5px; color:var(--zki-ink-700);
}
.zki-fetch::before{
content:""; position:absolute; inset:0; transform-origin:left; transform:scaleX(0);
background:linear-gradient(90deg, rgba(26,84,249,.16), rgba(26,84,249,.03));
}
.zki-on .zki-fetch::before{ animation:zkiFetch 1.1s var(--zki-ease) forwards; }
@keyframes zkiFetch{ to{ transform:scaleX(1); } }
.zki-fetch > *{ position:relative; }
.zki-fetch__i{ width:15px; height:15px; flex:none; color:var(--zki-blue); }
.zki-fetch__t{ line-height:1.3; }
.zki-fetch__c{ margin-left:auto; width:14px; height:14px; flex:none; color:var(--zki-ok); opacity:0; transform:scale(.5); }
.zki-on .zki-fetch__c{ animation:zkiCheck .35s var(--zki-ease) forwards; animation-delay:.95s; }
@keyframes zkiCheck{ to{ opacity:1; transform:scale(1); } }
.zki-fetch--wait{ background:var(--zki-white); border-style:dashed; color:var(--zki-ink-500); }
.zki-fetch--wait::before{ display:none; }
.zki-fetch--wait .zki-fetch__i{ color:var(--zki-ink-500); }
.zki-appv{ border:2px solid var(--zki-yellow); border-radius:12px; overflow:hidden; }
.zki-appv__h{ background:var(--zki-yellow-tint); padding:9px 12px; font-size:13px; font-weight:600; display:flex; align-items:center; gap:8px; }
.zki-appv__h > svg{ width:15px; height:15px; flex:none; }
.zki-appv__r{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-top:1px solid var(--zki-line); font-size:13.5px; background:var(--zki-white); }
.zki-appv__r span:last-child{ margin-left:auto; color:var(--zki-ink-700); font-size:12.5px; }
.zki-appv__c{ display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding:11px 12px; border-top:1px solid var(--zki-line); background:var(--zki-white); }
.zki-appv__b.zki-appv__b{
font-family:var(--zki-font-text) !important; font-size:13.5px !important; font-weight:600 !important;
border-radius:var(--zki-r-pill) !important; padding:9px 15px !important;
border:2px solid transparent !important; width:auto !important;
line-height:1.3 !important; cursor:pointer;
white-space:normal !important; max-width:100% !important;
text-transform:none !important; letter-spacing:normal !important;
appearance:none !important; -webkit-appearance:none !important;
box-shadow:none !important; text-decoration:none !important;
}
.zki-appv__b--y.zki-appv__b--y{ background:var(--zki-ink) !important; color:var(--zki-white) !important; }
.zki-appv__b--n.zki-appv__b--n{ background:var(--zki-white) !important; border-color:var(--zki-line-2) !important; color:var(--zki-ink-700) !important; }
.zki-appv__b--y.zki-appv__b--y:is(:hover,:focus,:active){ background:var(--zki-ink) !important; color:var(--zki-white) !important; }
.zki-appv__b--n.zki-appv__b--n:is(:hover,:focus,:active){ background:var(--zki-white) !important; border-color:var(--zki-line-2) !important; color:var(--zki-ink-700) !important; }
.zki-appv__date{ margin-left:auto; font-size:12px; font-weight:600; color:#7A5200; background:var(--zki-white); border-radius:var(--zki-r-pill); padding:4px 10px; }
/* Datei-Ergebnis */
.zki-file{ display:flex; align-items:center; gap:11px; margin-top:11px; padding:11px; border:1px solid var(--zki-line); border-radius:11px; }
.zki-file__i{ width:34px; height:34px; border-radius:9px; background:var(--zki-ok-bg); color:var(--zki-ok); display:grid; place-items:center; flex:none; }
.zki-file__i svg{ width:16px; height:16px; }
.zki-file__n{ font-size:14px; font-weight:600; }
.zki-file__s{ font-size:12px; color:var(--zki-ink-500); }
.zki-prompts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; max-width:45ch; }
.zki-prompts span{ font-size:13px; background:var(--zki-grey); color:var(--zki-ink-700); padding:7px 13px; border-radius:var(--zki-r-pill); }
/* ============================================================================
5 · Prognose · ESS-Antragskarte
========================================================================= */
.zki-ess{ background:var(--zki-white); border:1px solid var(--zki-line); border-radius:14px; padding:clamp(16px,2.4vw,22px); box-shadow:var(--zki-shadow-lg); }
.zki-ess__lbl{ font-size:12.5px; font-weight:600; color:var(--zki-ink-700); }
.zki-ess__val{ font-size:17px; margin:0 0 14px; }
.zki-ess__band{ border:1px solid var(--zki-line); border-radius:8px; overflow:hidden; margin:16px 0 18px; }
.zki-ess__bh.zki-ess__bh{
display:flex; align-items:center; gap:11px; width:100% !important;
padding:11px 14px !important; font-size:15px !important; font-weight:400 !important;
font-family:var(--zki-font-text) !important; color:inherit !important;
background:none !important; border:0 !important; border-radius:0 !important;
text-align:left !important; text-transform:none !important; cursor:pointer;
white-space:normal !important; overflow-wrap:break-word;
}
.zki-ess__bh > i{ width:11px; height:11px; border-radius:50%; flex:none; }
.zki-ess__chev{
margin-left:auto; color:var(--zki-ink-500); width:15px; height:15px; flex:none;
transition:transform .3s var(--zki-ease);
}
.zki-ess__band.zki-closed .zki-ess__chev{ transform:rotate(180deg); }
.zki-ess__days{
display:grid; grid-template-columns:repeat(5,1fr);
border-top:1px solid var(--zki-line);
overflow:hidden; max-height:130px;
transition:max-height .35s var(--zki-ease), border-top-width .35s var(--zki-ease);
}
.zki-ess__band.zki-closed .zki-ess__days{ max-height:0; border-top-width:0; }
.zki-ess__day{ text-align:center; padding:11px 2px 14px; border-left:1px solid var(--zki-line); opacity:0; transform:translateY(10px); }
.zki-ess__day:first-child{ border-left:0; }
.zki-on .zki-ess__day{ animation:zkiFadeUp .65s var(--zki-ease) forwards; animation-delay:calc(var(--d,0s) * var(--zki-pace)); }
.zki-ess__dow{ font-size:12.5px; color:var(--zki-ink-500); }
.zki-ess__date{ font-size:clamp(16px,2vw,19px); font-weight:600; font-family:var(--zki-font-text); margin:1px 0 8px; }
.zki-ess__dot{ display:block; width:15px; height:15px; border-radius:50%; margin:0 auto; }
.zki-ess__foot{ display:flex; flex-wrap:wrap; gap:8px 48px; }
.zki-ess__created{ margin:16px 0 0; padding-top:14px; border-top:1px solid var(--zki-line); font-size:13.5px; color:var(--zki-ink-700); }
.zki-legend{ display:flex; flex-wrap:wrap; gap:9px 20px; margin-top:14px; font-size:13px; color:var(--zki-ink-700); }
.zki-legend span{ display:inline-flex; align-items:center; gap:8px; }
.zki-legend i{ width:13px; height:13px; border-radius:50%; flex:none; }
/* ============================================================================
6 · Prognose · WebClient Schicht-/Urlaubsplaner
========================================================================= */
.zki-wc{ background:var(--zki-white); border:1px solid var(--zki-wc-line); border-radius:10px; overflow:hidden; box-shadow:var(--zki-shadow-lg); }
.zki-wc__scroll{ overflow:hidden; }
.zki-wc__t{ border-collapse:collapse; table-layout:fixed; width:100%; font-size:11px; }
.zki-wc__t th,.zki-wc__t td{
border:1px solid var(--zki-wc-line);
padding:5px 2px; text-align:center; white-space:nowrap; overflow:hidden;
}
.zki-wc__kw{ background:var(--zki-wc-head); font-weight:600; font-size:11.5px; padding:6px 2px; }
.zki-wc__dh{ position:relative; background:#F7F9FC; font-weight:500; line-height:1.25; padding:6px 2px 5px; }
.zki-wc__dh b{ display:block; font-weight:700; font-size:11.5px; }
.zki-wc__dh em{ display:block; font-style:normal; color:var(--zki-ink-500); font-size:11px; font-weight:600; }
/* Markierter Tag (im Planer der angeklickte Tag) */
.zki-wc__dh--sel{ background:var(--zki-wc-sel); }
.zki-wc__dh--sel b,.zki-wc__dh--sel em{ color:var(--zki-white); }
.zki-wc__dh--sel .zki-wc__dot{ box-shadow:0 0 0 2px var(--zki-white); }
/* Tage mit hohem Risiko färben sich nach dem Einblenden leicht ein */
.zki-wc__dh--crit::after{
content:""; position:absolute; inset:0; background:rgba(228,112,126,.18); opacity:0; pointer-events:none;
}
.zki-on .zki-wc__dh--crit::after{ animation:zkiTint .5s var(--zki-ease) forwards; animation-delay:calc(var(--d,0s) * var(--zki-pace) + .7s); }
@keyframes zkiTint{ to{ opacity:1; } }
.zki-wc__dot{ position:relative; display:block; width:9px; height:9px; border-radius:50%; margin:4px auto 0; transform:scale(0); }
.zki-on .zki-wc__dot{ animation:zkiPop .5s var(--zki-ease) forwards; animation-delay:calc(var(--d,0s) * var(--zki-pace)); }
@keyframes zkiPop{ to{ transform:scale(1); } }
/* … und ihr Punkt pulsiert dezent weiter */
.zki-on .zki-wc__dot--crit{
animation:zkiPop .5s var(--zki-ease) forwards, zkiRingRed 2.8s var(--zki-ease) infinite;
animation-delay:calc(var(--d,0s) * var(--zki-pace)), calc(var(--d,0s) * var(--zki-pace) + .9s);
}
@keyframes zkiRingRed{ 0%{ box-shadow:0 0 0 0 rgba(228,112,126,.8); } 60%,100%{ box-shadow:0 0 0 7px rgba(228,112,126,0); } }
/* Namensspalte ist Kopfspalte: eingefärbt wie die KW- und Tagesleiste */
.zki-wc__n{ width:21%; text-align:left; padding-left:9px; background:var(--zki-wc-head); }
.zki-wc__t td.zki-wc__n{ background:var(--zki-wc-name); font-weight:700; }
.zki-wc__t td.fr{ background:var(--zki-wc-fr); }
.zki-wc__t td.sbs{ background:var(--zki-wc-sbs); }
.zki-wc__t td.num{ background:var(--zki-wc-num); }
.zki-wc__t td.abw{ background:var(--zki-wc-abw); }
/* ============================================================================
7 · Prognose · Konzeptgrafik Datenbasis
========================================================================= */
.zki-flow{ background:var(--zki-blue-tint); border-radius:var(--zki-r-card); padding:clamp(20px,3vw,26px); }
.zki-flow__t{ font-family:var(--zki-font-text); font-size:16px; font-weight:600; margin:0 0 18px; }
.zki-flow__s{ display:flex; align-items:center; gap:13px; background:var(--zki-white); border-radius:var(--zki-r-sm); padding:13px 15px; opacity:0; transform:translateX(-12px); }
.zki-on .zki-flow__s{ animation:zkiSlide .65s var(--zki-ease) forwards; animation-delay:calc(var(--d,0s) * var(--zki-pace)); }
@keyframes zkiSlide{ to{ opacity:1; transform:none; } }
.zki-flow__n{ width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:var(--zki-blue); color:var(--zki-white); font-size:12px; font-weight:700; flex:none; }
.zki-flow__x{ font-size:14.5px; font-weight:500; }
.zki-flow__a{ width:2px; height:14px; margin-left:26px; background:var(--zki-blue); opacity:.35; }
.zki-flow__note{ margin:18px 0 0; font-size:13px; color:var(--zki-blue-deep); display:flex; align-items:center; gap:8px; }
.zki-flow__note svg{ width:15px; height:15px; flex:none; }
/* ============================================================================
8 · Prognose · Tageskachel (Einzeltag aus dem Planer)
========================================================================= */
.zki-cal{
width:162px; margin:0;
background:var(--zki-white); border:1px solid var(--zki-wc-line); border-radius:10px;
overflow:hidden; box-shadow:var(--zki-shadow-md);
animation:zkiBob 7s ease-in-out infinite;
}
@keyframes zkiBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }
.zki-cal__h{
background:var(--zki-wc-head); border-bottom:1px solid var(--zki-wc-line);
padding:6px 11px; font-size:11px; font-weight:600; color:var(--zki-blue-deep);
display:flex; align-items:center; gap:7px;
}
.zki-cal__h svg{ width:12px; height:12px; flex:none; }
.zki-cal__day{ text-align:center; padding:13px 10px 15px; }
.zki-cal__day em{ display:block; font-style:normal; font-size:11.5px; color:var(--zki-ink-500); }
.zki-cal__day b{ display:block; font-family:var(--zki-font-text); font-size:25px; font-weight:600; line-height:1.1; margin:2px 0 11px; }
.zki-cal__dot{
display:block; width:16px; height:16px; border-radius:50%; margin:0 auto 9px;
background:var(--zki-amp-good); box-shadow:0 0 0 0 rgba(165,212,106,.85);
animation:zkiRing 2.8s var(--zki-ease) infinite;
}
@keyframes zkiRing{ 60%,100%{ box-shadow:0 0 0 11px rgba(165,212,106,0); } }
.zki-cal__day strong{ display:block; font-size:11.5px; font-weight:600; color:var(--zki-amp-good-tx); }
.zki-cal__f{ border-top:1px solid var(--zki-wc-line); padding:6px 11px; font-size:10.5px; color:var(--zki-ink-500); }
/* ============================================================================
9 · Responsive (Elementor-Breakpoints)
========================================================================= */
@media (max-width:767px){
:root{ --zki-bot-h:660px; }
.zki-bot{ max-width:100%; }
.zki-ess__foot{ gap:8px 28px; }
.zki-legend{ gap:8px 14px; font-size:12.5px; }
.zki-cal{ animation:none; }
.zki-wc__t .wk2{ display:none; }
.zki-wc__t{ font-size:10px; }
.zki-wc__t th,.zki-wc__t td{ padding:4px 1px; }
.zki-wc__kw{ font-size:10.5px; }
.zki-wc__dh b{ font-size:10.5px; } .zki-wc__dh em{ font-size:10px; }
.zki-wc__n{ width:30%; padding-left:6px; }
.zki-bot__sugg.zki-bot__sugg { font-size: 14px !important; }
}
/* ============================================================================
10 · Reduzierte Bewegung
========================================================================= */
@media (prefers-reduced-motion: reduce){
:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) *,:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) *::before,:is(.zki-mock,.zmi-ki,.zki-bot,.zki-ess,.zki-wc,.zki-flow,.zki-cal,.zki-legend) *::after{
animation-duration:.001ms !important; animation-iteration-count:1 !important;
transition-duration:.001ms !important;
}
.zki-bot__msg,.zki-late,.zki-ess__day,.zki-flow__s{ opacity:1; transform:none; }
.zki-wait{ display:none !important; }
.zki-wc__dot{ transform:scale(1); }
}
