/* OKNXT Unterseite E-Mail (Präfix em-). Anbieter nur als Schrift mit neutralen Symbolen. Abstände 150 px wie überall.
   --w und --dreh sind seitenweit Winkel, hier nicht verwenden. */

.em-seite-wrap{--h-grund:#F2F4F9;--h-linie:#E2E7F1;--h-text:#161B2E;--h-text-2:#667089;--h-text-3:#98A1B5;--h-blau:#2F6BFF}
.em-hell{color:var(--h-text)}
.em-seite-wrap img{height:auto;max-width:none}
.em-hell svg{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.em-k{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:9px;border:1px solid var(--h-linie);background:var(--em-f2,#fff);font:600 .74rem/1 "Manrope",sans-serif;color:var(--h-text);white-space:nowrap}
.em-k svg{width:14px;height:14px}
.em-k-voll{color:#fff;border-color:transparent;background:linear-gradient(100deg,#00B4F9,#2F6BFF 55%,#9B05FE)}
.em-k.drueckt{animation:em-druck .4s ease}
@keyframes em-druck{50%{transform:scale(.94)}}
.em-ava{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--f);color:#fff;font:700 .62rem/1 "Manrope",sans-serif;font-style:normal}
.em-zeiger{position:absolute;z-index:20;left:0;top:0;width:26px;height:26px;pointer-events:none;opacity:0;transform:translate(var(--zx,60%),var(--zy,60%));transition:transform .95s cubic-bezier(.65,0,.35,1),opacity .4s}
.em-zeiger.da{opacity:1}
.em-zeiger svg{width:26px;height:26px;fill:#161B2E;stroke:#fff;stroke-width:1.6;filter:drop-shadow(0 4px 8px rgba(0,0,0,.35))}
.em-zeiger i{position:absolute;left:3px;top:2px;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;border:2px solid #2F6BFF;opacity:0}
.em-zeiger.klick i{animation:em-ring .6s ease-out}
@keyframes em-ring{0%{opacity:.9;transform:scale(.3)}100%{opacity:0;transform:scale(1.4)}}
.em-lader{display:inline-block;width:18px;height:18px;border-radius:50%;border:2.5px solid rgba(47,107,255,.2);border-top-color:#2F6BFF;animation:em-dreh .8s linear infinite}
@keyframes em-dreh{to{transform:rotate(360deg)}}

/* ---------- Mail-Programm (Einstieg und Ordnen) ---------- */
.em-app{display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.15fr) minmax(0,1.35fr);border-radius:18px;overflow:hidden;background:#fff;font-size:12px;
  box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 0 1px rgba(143,164,255,.3),0 0 110px -30px rgba(47,107,255,.55)}
.em-ordner{padding:12px 10px;background:#F7F8FB;border-right:1px solid var(--h-linie);display:flex;flex-direction:column;gap:8px;min-width:0}
.em-neu-mail{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px;border-radius:9px;border:1px solid var(--h-linie);background:#fff;font-weight:600;font-size:.95em}
.em-neu-mail svg,.em-konto svg{width:13px;height:13px}
.em-konto{display:flex;align-items:center;gap:5px;font-size:.95em;margin-top:4px}
.em-ordner ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.em-ordner li{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:8px;color:var(--h-text-2);white-space:nowrap;overflow:hidden}
.em-ordner li svg{flex:none;width:14px;height:14px}
.em-ordner li span{overflow:hidden;text-overflow:ellipsis}
.em-ordner li.an{background:#E6EBF8;color:var(--h-text);font-weight:600}
.em-zahl,.em-o-zahl{margin-left:auto;min-width:18px;padding:2px 6px;border-radius:999px;background:#2F6BFF;color:#fff;font-style:normal;font-size:.8em;font-weight:700;text-align:center}
.em-liste{border-right:1px solid var(--h-linie);min-width:0;display:flex;flex-direction:column}
.em-suche{display:flex;align-items:center;gap:6px;margin:10px;padding:8px 10px;border-radius:9px;border:1px solid var(--h-linie);color:var(--h-text-3)}
.em-suche svg{width:13px;height:13px}
.em-mails{list-style:none;margin:0;padding:0;overflow:hidden;flex:1}
.em-mail{display:flex;gap:9px;padding:10px 12px;border-top:1px solid var(--h-linie);position:relative}
.em-mail.an{background:#EEF2FC;box-shadow:inset 3px 0 0 #2F6BFF}
.em-m-text{display:grid;gap:2px;min-width:0;flex:1}
.em-m-zeile{display:flex;justify-content:space-between;gap:8px}
.em-m-zeile b{font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-m-zeile time{font-size:.85em;color:var(--h-text-3);white-space:nowrap}
.em-m-text em{font-style:normal;font-weight:600;font-size:.95em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-m-text small{font-size:.85em;color:var(--h-text-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.em-lesen{position:relative;padding:16px 18px;min-width:0;display:flex;flex-direction:column;gap:10px}
.em-l-betreff{font-size:1.25em;line-height:1.3}
.em-l-von{display:flex;align-items:center;gap:9px}
.em-l-von span{display:grid;flex:1;min-width:0}
.em-l-von small{color:var(--h-text-2);font-size:.88em;overflow:hidden;text-overflow:ellipsis}
.em-l-von time{font-size:.85em;color:var(--h-text-3)}
.em-l-chip{align-self:flex-start;display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;background:#E3F7EF;color:#0E7A5A;font-size:.88em}
.em-l-chip svg{width:12px;height:12px}
.em-lesen p{margin:0;line-height:1.55;color:#3A4257}

/* ---------- Einstieg ---------- */
.em-start{position:relative;padding:clamp(28px,5vh,64px) var(--seitenrand) 0}
.em-start-innen{max-width:var(--ab-breite);margin:0 auto;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,4vw,56px);align-items:center;min-height:calc(100svh - var(--oben-hoehe,100px) - 40px)}
.em-start .h1{max-width:12ch;font-size:clamp(2.3rem,4.2vw,4rem)}
.em-start .unterzeile{max-width:42ch}
.em-fakten{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.em-fakten li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;font-size:.84rem;color:var(--text-2);border:1px solid var(--linie-stark);background:color-mix(in srgb,var(--panel) 80%,transparent)}
.em-fakten li::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--verlauf);box-shadow:0 0 8px rgba(47,107,255,.8)}
.em-start .einstieg-aktionen{display:flex;margin-top:30px}
.em-buehne{position:relative;perspective:1800px}
.em-buehne::before{content:"";position:absolute;inset:-6% 4%;border-radius:50%;background:radial-gradient(closest-side,rgba(47,107,255,.42),rgba(155,5,254,.18) 60%,transparent);filter:blur(34px)}
.em-buehne .em-app{position:relative;height:440px;transform:rotateY(-9deg) rotateX(4deg) scale(.94);opacity:0;transition:transform 1.1s cubic-bezier(.22,1,.36,1),opacity .8s}
.em-buehne.em-an .em-app{transform:rotateY(-6deg) rotateX(2deg);opacity:1}
.em-buehne .em-mail{opacity:0;transform:translateY(-14px)}
.em-buehne .em-mail.da{opacity:1;transform:none;transition:opacity .45s,transform .55s cubic-bezier(.22,1,.36,1)}
.em-buehne .em-mail-neu{animation:em-rein .7s cubic-bezier(.22,1,.36,1)}
.em-mail-neu::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(#00B4F9,#9B05FE);animation:em-weg 2.4s forwards}
@keyframes em-rein{0%{max-height:0;opacity:0;padding-top:0;padding-bottom:0;background:#EAF3FF}60%{opacity:1}100%{max-height:80px;background:#fff}}
@keyframes em-weg{70%{opacity:1}100%{opacity:0}}
.em-zahl.hupf{animation:em-hupf .5s cubic-bezier(.34,1.56,.64,1)}
@keyframes em-hupf{50%{transform:scale(1.35)}}
.em-buehne .em-lesen>*{opacity:0;transform:translateY(8px);transition:opacity .5s,transform .6s cubic-bezier(.22,1,.36,1)}
.em-buehne.em-an .em-lesen>*{opacity:1;transform:none}
.em-buehne.em-an .em-lesen>:nth-child(2){transition-delay:.15s}.em-buehne.em-an .em-lesen>:nth-child(3){transition-delay:.3s}.em-buehne.em-an .em-lesen>:nth-child(n+4){transition-delay:.45s}

/* ---------- 1 · Anbinden ---------- */
.em-kt-huelle{max-width:960px;margin:0 auto}
.em-kt{position:relative;padding:18px;border-radius:22px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(92,203,255,.45);min-height:430px}
.em-kt-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.em-kt-kopf span:first-child{display:grid}.em-kt-kopf b{font-size:1rem}.em-kt-kopf small{font-size:.74rem;color:var(--h-text-2)}
.em-kt-th,.em-kr{display:grid;grid-template-columns:1.1fr 1.7fr 1fr 1fr 70px;gap:12px;align-items:center}
.em-kt-th{padding:0 14px 8px;font:600 .62rem/1 "JetBrains Mono",monospace;letter-spacing:.08em;text-transform:uppercase;color:var(--h-text-3)}
.em-kt-liste{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.em-kt-leer{padding:22px;border-radius:12px;border:1.5px dashed var(--h-linie);text-align:center;color:var(--h-text-3);font-size:.82rem}
.em-kt-liste.hat .em-kt-leer{display:none}
.em-kr{padding:12px 14px;border-radius:12px;background:var(--em-f1,#fff);border:1px solid var(--h-linie);font-size:.8rem;max-height:0;padding-top:0;padding-bottom:0;opacity:0;overflow:hidden;border-width:0;transition:max-height .5s cubic-bezier(.22,1,.36,1),padding .5s,opacity .4s}
.em-kr.da{max-height:80px;padding-top:12px;padding-bottom:12px;opacity:1;border-width:1px;animation:em-glanz 1.4s ease}
@keyframes em-glanz{0%{box-shadow:0 0 0 2px #5CCBFF,0 0 40px rgba(92,203,255,.7)}100%{box-shadow:none}}
.em-kr-name{display:flex;align-items:center;gap:8px;min-width:0}
.em-kr-ic{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:8px;color:#fff;background:linear-gradient(140deg,#2F6BFF,#7B3BFF)}
.em-kr-ic svg{width:14px;height:14px}
.em-kr-mail{color:var(--h-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.em-kr-st em{display:none;align-items:center;gap:5px;font-style:normal;font-weight:600;font-size:.76rem}
.em-st-l{color:var(--h-text-3)}
.em-st-ok{color:var(--em-gruen-t,#0E8A66)}.em-st-ok svg{width:13px;height:13px;stroke-width:2.6}
.em-kr .em-st-l{display:inline-flex}
.em-kr.ok .em-st-l{display:none}.em-kr.ok .em-st-ok{display:inline-flex}
.em-sw{position:relative;width:34px;height:20px;border-radius:999px;background:var(--em-rand,#D5DAE5);transition:background .3s;cursor:pointer}
.em-sw i{position:absolute;left:3px;top:3px;width:14px;height:14px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
.em-sw.an{background:#2F6BFF}.em-sw.an i{transform:translateX(14px)}
.em-dlg-grund{position:absolute;inset:0;border-radius:22px;background:var(--em-dlg-grund,rgba(22,27,46,.38));display:grid;place-items:center;opacity:0;pointer-events:none;transition:opacity .35s;z-index:5}
.em-dlg-grund.da{opacity:1}
.em-dlg{width:min(400px,90%);border-radius:14px;background:var(--em-f1,#fff);box-shadow:0 30px 80px -20px rgba(0,0,0,.6);transform:translateY(14px) scale(.96);transition:transform .45s cubic-bezier(.22,1,.36,1);overflow:hidden}
.em-dlg-grund.da .em-dlg{transform:none}
.em-dlg-kopf{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--h-linie)}
.em-dlg-kopf b{font-size:.92rem}.em-x{font-size:1.2rem;color:var(--h-text-3);line-height:1}
.em-dlg-sicht{display:none;padding:16px;gap:10px}
.em-dlg-sicht.an{display:grid;animation:em-sicht .4s ease}
@keyframes em-sicht{from{opacity:0;transform:translateX(12px)}}
.em-dlg-sicht>small{font-size:.76rem;color:var(--h-text-2)}
.em-opt{display:flex;align-items:center;gap:12px;padding:12px;border-radius:12px;border:1.5px solid var(--h-linie);transition:border-color .25s,background .25s;cursor:pointer}
.em-opt i{display:grid;place-items:center;width:34px;height:34px;border-radius:9px;background:var(--em-grau,#EEF1F7);color:var(--h-text)}
.em-opt i svg{width:17px;height:17px}
.em-opt span{display:grid}.em-opt b{font-size:.84rem}.em-opt small{font-size:.7rem;color:var(--h-text-2)}
.em-opt.an{border-color:#2F6BFF;background:var(--em-blass,#F1F5FF)}
.em-d-ms{justify-items:center;text-align:center;padding:26px 20px}
.em-d-ms b{font-size:.86rem}.em-d-ms small{font-size:.72rem;color:var(--h-text-2);max-width:30ch}
.em-d-ms.ok .em-lader{border-color:#16A36A;animation:none;background:#16A36A url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='white' stroke-width='3'/%3E%3C/svg%3E") center/70% no-repeat}
.em-felder{display:grid;grid-template-columns:1fr 70px;gap:8px}
.em-felder label:nth-child(1),.em-felder label:nth-child(2){grid-column:1/-1}
.em-felder label{display:grid;gap:3px}
.em-felder small{font-size:.64rem;font-weight:600;color:var(--h-text-2)}
.em-felder span{min-height:30px;padding:7px 9px;border-radius:8px;border:1px solid var(--h-linie);background:var(--em-f2,#F7F8FB);font-size:.76rem}
.em-felder span.tippt{border-color:#2F6BFF;background:var(--em-f1,#fff)}
.em-test{display:none;align-items:center;gap:8px;font-size:.76rem;color:var(--h-text-2)}
.em-test .em-lader{width:14px;height:14px;border-width:2px}
.em-test b{display:none;align-items:center;gap:5px;color:var(--em-gruen-t,#0E8A66)}.em-test b svg{width:13px;height:13px;stroke-width:2.6}
.em-test.laeuft{display:flex}
.em-test.ok{display:flex}.em-test.ok .em-lader,.em-test.ok em{display:none}.em-test.ok b{display:inline-flex}
.em-dlg-fuss{display:flex;justify-content:flex-end;padding:12px 16px;border-top:1px solid var(--h-linie)}
.em-punkte{list-style:none;margin:clamp(28px,3vw,40px) auto 0;padding:0;max-width:1080px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.em-punkte li{display:grid;grid-template-columns:auto 1fr;column-gap:12px;row-gap:3px;padding:18px;border-radius:18px;border:1px solid var(--linie-stark);background:color-mix(in srgb,var(--panel) 88%,transparent)}
.em-punkte i{grid-row:span 2;display:grid;place-items:center;width:36px;height:36px;border-radius:10px;color:#fff;background:linear-gradient(140deg,var(--cyan),var(--blau) 55%,var(--violett))}
.em-punkte i svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.9}
.em-punkte b{font-size:.95rem;font-weight:600}.em-punkte small{font-size:.82rem;line-height:1.45;color:var(--text-2)}

/* ---------- 2 · Ordnen ---------- */
.em-ord-huelle{max-width:1080px;margin:0 auto}
.em-ord{position:relative;height:440px;overflow:visible}
.em-ord>div{overflow:hidden}
.em-ord .em-ordner{border-radius:18px 0 0 18px}
.em-o-neu{max-height:0;padding-top:0 !important;padding-bottom:0 !important;opacity:0;transition:max-height .4s,padding .4s,opacity .3s}
.em-o-neu.da{max-height:40px;padding-top:7px !important;padding-bottom:7px !important;opacity:1}
.em-o-neu.tippt .em-o-name{padding:2px 5px;border-radius:5px;border:1px solid #2F6BFF;background:#fff;color:var(--h-text);min-width:60px}
.em-o-neu.tippt .em-o-name::after{content:"";display:inline-block;width:1.5px;height:1em;margin-left:1px;vertical-align:-2px;background:#2F6BFF;animation:em-blink .9s steps(1) infinite}
@keyframes em-blink{50%{opacity:0}}
.em-o-neu .em-o-zahl{opacity:0;transform:scale(.5);transition:opacity .3s,transform .4s cubic-bezier(.34,1.56,.64,1)}
.em-o-neu.voll .em-o-zahl{opacity:1;transform:none}
.em-o-neu.trifft{animation:em-glanz 1.2s ease}
.em-o-plus{display:flex;align-items:center;gap:6px;margin-top:auto;padding:7px 8px;border-radius:8px;color:#2F6BFF;font-weight:600}
.em-o-plus svg{width:13px;height:13px}
.em-ord .em-mail{transition:max-height .45s cubic-bezier(.22,1,.36,1),padding .45s,opacity .3s;max-height:80px}
.em-ord .em-mail.weg{max-height:0;padding-top:0;padding-bottom:0;opacity:0;border-top-width:0}
.em-geist{position:absolute;z-index:15;pointer-events:none;background:#fff;border-radius:10px;box-shadow:0 20px 40px -12px rgba(0,0,0,.45),0 0 0 1.5px #2F6BFF;transition:transform .95s cubic-bezier(.65,0,.35,1),opacity .5s .6s}
.em-verk{position:relative;display:flex;align-items:center;flex-wrap:wrap;gap:8px;font-size:.92em}
.em-verk-lb{color:var(--h-text-3)}
.em-verk-a{display:flex;gap:6px}
.em-zu,.em-neu-k{display:inline-flex;align-items:center;gap:5px;padding:5px 9px;border-radius:7px;border:1px solid var(--h-linie);font-weight:600;color:var(--h-text)}
.em-zu svg,.em-neu-k svg{width:12px;height:12px}
.em-zu.an{border-color:#2F6BFF;color:#2F6BFF;background:#F1F5FF}
.em-verk-ok{display:none}
.em-verk.fertig .em-verk-a{display:none}.em-verk.fertig .em-verk-ok{display:inline-flex;animation:em-glanz 1.2s ease}
.em-wahl{position:absolute;left:52px;top:calc(100% + 6px);z-index:6;width:240px;padding:8px;border-radius:12px;background:#fff;box-shadow:0 24px 50px -14px rgba(0,0,0,.4),0 0 0 1px var(--h-linie);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1)}
.em-wahl.da{opacity:1;transform:none}
.em-wahl-suche{display:flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;border:1px solid #2F6BFF;margin-bottom:6px}
.em-wahl-suche svg{width:12px;height:12px;color:var(--h-text-3)}.em-wahl-suche em{font-style:normal}
.em-wahl ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.em-wahl li{display:flex;align-items:center;gap:8px;padding:6px;border-radius:8px}
.em-wahl li span{display:grid}.em-wahl li small{font-size:.85em;color:var(--h-text-2)}
.em-wahl li .em-ava{width:24px;height:24px;font-size:.55rem}
.em-wahl li.an{background:#EEF2FC}
.em-toast{position:absolute;left:50%;bottom:16px;display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;background:#161B2E;color:#fff;font-size:.92em;white-space:nowrap;transform:translate(-50%,16px);opacity:0;transition:opacity .35s,transform .5s cubic-bezier(.22,1,.36,1);box-shadow:0 16px 30px -12px rgba(0,0,0,.6)}
.em-toast svg{width:13px;height:13px;color:#4ADE9A;stroke-width:2.6}
.em-toast.da{opacity:1;transform:translate(-50%,0)}

/* ---------- 3 · Vorlagen ---------- */
.em-vl-huelle{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:22px;align-items:start}
.em-vz{position:relative;display:grid;gap:9px;padding:20px;border-radius:20px;border:1px solid var(--linie-stark);background:color-mix(in srgb,var(--panel) 88%,transparent);overflow:hidden}
.em-vz::before{content:"";position:absolute;right:-60px;top:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(closest-side,rgba(47,107,255,.45),transparent);filter:blur(10px)}
.em-vz-zahl{position:relative;display:flex;align-items:flex-start;line-height:.9;font:600 clamp(3.4rem,6vw,4.6rem)/.9 "Manrope",sans-serif;letter-spacing:-.04em;background:linear-gradient(100deg,#5CCBFF,#2F6BFF 50%,#B36BFF);-webkit-background-clip:text;background-clip:text;color:transparent}
.em-vz-zahl b{font-weight:700;font-variant-numeric:tabular-nums}.em-vz-zahl i{font-style:normal;font-size:.6em;margin-left:2px}
.em-vz-titel{position:relative;font-size:1.05rem;color:var(--text)}
.em-vz>small{position:relative;font-size:.84rem;line-height:1.5;color:var(--text-2)}
.em-vz ul{position:relative;list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.em-vz .em-kat{margin:0;font-size:.7rem}
.em-vz-bsp{flex-direction:column;flex-wrap:nowrap !important;gap:0 !important;margin-top:4px !important;border-top:1px solid var(--linie-stark)}
.em-vz-bsp li{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--linie-stark);font-size:.84rem;color:var(--text-2);opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.em-vz-bsp li svg{width:14px;height:14px;fill:none;stroke:#5CCBFF;stroke-width:1.9}
.em-vz-bsp .em-vz-mehr{border-bottom:0;color:#8FA4FF;font-weight:600}
.em-vz.an .em-vz-bsp li{opacity:1;transform:none}
.em-vl-lkopf{justify-content:space-between;padding:4px 10px 8px !important;border-bottom:1px solid var(--h-linie);border-radius:0 !important;margin-bottom:4px}
.em-vl-lkopf small{font-size:.72em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--h-text-3)}
.em-vl-lkopf em{font-style:normal;font-size:.8em;font-weight:700;color:var(--em-blau-t,#2F6BFF)}
.em-vl{position:relative;border-radius:18px;background:var(--em-f0,#fff);font-size:13px;box-shadow:0 50px 100px -40px rgba(0,0,0,.95),0 0 0 1px rgba(143,164,255,.3),0 0 110px -30px rgba(47,107,255,.55)}
.em-vl-kopf{display:flex;justify-content:space-between;align-items:center;padding:13px 18px;border-bottom:1px solid var(--h-linie)}
.em-vl-x{position:relative;width:12px;height:12px}.em-vl-x i{position:absolute;left:0;top:5px;width:12px;height:1.6px;background:var(--h-text-2);transform:rotate(45deg)}.em-vl-x i+i{transform:rotate(-45deg)}
.em-vl-zeile{display:flex;align-items:center;gap:12px;padding:10px 18px;border-bottom:1px solid var(--h-linie)}
.em-vl-zeile small{width:34px;color:var(--h-text-3)}
.em-an-chip{display:inline-flex;align-items:center;gap:7px;padding:3px 10px 3px 3px;border-radius:999px;background:var(--em-blass,#EEF2FC);font-size:.92em}
.em-an-chip .em-ava{width:22px;height:22px;font-size:.55rem}
.em-vl-betreff .em-vl-text{font-weight:600}
.em-vl-wahl{position:relative;padding:10px 18px}
.em-sel{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:10px;border:1px solid var(--h-linie);transition:border-color .25s,box-shadow .25s}
.em-sel svg{width:15px;height:15px;color:var(--h-text-2)}.em-sel svg:last-child{margin-left:auto}
.em-sel-text{font-style:normal;color:var(--h-text-2)}
.em-sel.offen{border-color:#2F6BFF;box-shadow:0 0 0 3px rgba(47,107,255,.15)}
.em-sel.gewaehlt .em-sel-text{color:var(--h-text);font-weight:600}
.em-vl-liste{list-style:none;margin:0;padding:6px;position:absolute;left:18px;right:18px;top:calc(100% - 4px);z-index:6;border-radius:12px;background:var(--em-f2,#fff);box-shadow:0 24px 50px -14px rgba(0,0,0,.4),0 0 0 1px var(--h-linie);opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .25s,transform .35s cubic-bezier(.22,1,.36,1)}
.em-vl-liste.da{opacity:1;transform:none}
.em-vl-liste li{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px}
.em-vl-liste li svg{width:15px;height:15px;color:var(--h-text-3)}
.em-vl-liste li.an{background:var(--em-blass,#EEF2FC)}
.em-kat{margin-left:auto;padding:2px 8px;border-radius:5px;font-style:normal;font-size:.8em;font-weight:600}
.em-kat-allg{background:#EEF0F4;color:#5C6478}.em-kat-kal{background:#E6F0FF;color:#2F6BFF}.em-kat-pip{background:#F3E8FF;color:#7B3BFF}.em-kat-sys{background:#E3F7EF;color:#0E7A5A}
.em-vl-inhalt{padding:6px 18px 16px;min-height:170px;line-height:1.7;color:var(--em-text-m,#3A4257)}
.em-vl-inhalt p{margin:0 0 10px}
.em-vl-text{opacity:var(--vt,0);transition:opacity .4s}
.em-vl-inhalt{clip-path:inset(0 0 calc(100% - var(--vh,0%)) 0)}
.em-ph{position:relative;display:inline-block;perspective:400px}
.em-ph>*{display:inline-block;white-space:nowrap;font-style:normal;transition:transform .55s cubic-bezier(.34,1.3,.5,1),opacity .3s;backface-visibility:hidden}
.em-ph i{padding:0 5px;border-radius:5px;background:var(--em-blass,#E6EEFF);color:var(--em-blau-t,#2F6BFF);font:600 .8em/1.6 "JetBrains Mono",monospace}
.em-ph b{padding:0 3px;border-radius:4px;font-weight:700;color:var(--h-text);transform:rotateX(-90deg);opacity:0}
.em-ph b{position:absolute;left:0;top:0}
.em-ph.voll i{position:absolute;left:0;top:0;transform:rotateX(90deg);opacity:0}
.em-ph.voll b{position:static}
.em-ph.voll b{transform:none;opacity:1;animation:em-ph-glanz 1.2s ease}
@keyframes em-ph-glanz{0%,30%{background:rgba(92,203,255,.45)}100%{background:transparent}}
.em-vl-fuss{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-top:1px solid var(--h-linie)}
.em-senden{transition:box-shadow .4s,transform .4s}
.em-senden.bereit{box-shadow:0 0 0 4px rgba(47,107,255,.2),0 0 30px rgba(92,203,255,.8);transform:scale(1.05)}
.em-vl-phasen{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;margin-top:18px;font-size:.62rem}
.em-vl-phasen span{padding:6px 12px;border-radius:999px;border:1px solid var(--linie-stark);color:var(--text-3);transition:all .4s}
.em-vl-phasen span.an{color:#fff;border-color:transparent;background:linear-gradient(100deg,#00B4F9,#2F6BFF 55%,#9B05FE)}
.em-vl-phasen span.fertig{color:var(--text-2);border-color:rgba(92,203,255,.45)}

/* ---------- 4 · Signatur ---------- */
.em-sg-huelle{max-width:1080px;margin:0 auto}
.em-sg{position:relative;padding:18px;border-radius:22px;background:var(--h-grund);border:1px solid rgba(255,255,255,.55);box-shadow:0 50px 100px -50px rgba(0,0,0,.95),0 0 120px -40px rgba(92,203,255,.45)}
.em-sg-reiter{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.em-sg-r{display:inline-flex;align-items:center;gap:7px;padding:8px 12px;border-radius:10px;font-size:.76rem;font-weight:600;color:var(--h-text-2);border:1px solid transparent;cursor:pointer;transition:all .3s}
.em-sg-r svg{width:14px;height:14px}
.em-sg-r.an{background:#fff;color:var(--h-text);border-color:var(--h-linie);box-shadow:0 6px 14px -8px rgba(0,0,0,.25)}
.em-sg-raster{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:14px;align-items:start}
.em-sg-ed,.em-sg-mail{border-radius:14px;background:#fff;border:1px solid var(--h-linie)}
.em-sg-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px}
.em-sg-kopf span:first-child{display:grid}.em-sg-kopf b{font-size:.84rem}.em-sg-kopf small{font-size:.68rem;color:var(--h-text-2)}
.em-sg-leiste{display:flex;align-items:center;gap:12px;margin:0 14px;padding:8px 10px;border-radius:9px 9px 0 0;border:1px solid var(--h-linie);background:#F7F8FB;font:700 .74rem/1 "Manrope",sans-serif;color:var(--h-text-2)}
.em-sg-leiste i{font-style:normal}.em-sg-leiste svg{width:13px;height:13px;display:block}
.em-sg-leiste .em-trenn{width:1px;height:14px;background:var(--h-linie)}
.em-sg-flaeche{position:relative;margin:0 14px 14px;padding:16px;border:1px solid var(--h-linie);border-top:0;border-radius:0 0 9px 9px;min-height:330px}
.em-sig{display:grid;justify-items:start;gap:4px;font-size:.8rem;color:#3A4257}
.em-sg-flaeche .em-sig{position:absolute;inset:16px}
.em-sig>*{opacity:0;transform:translateY(6px);transition:opacity .4s,transform .5s cubic-bezier(.22,1,.36,1)}
.em-sig.an>*{opacity:1;transform:none}
.em-sig.an>*:nth-child(2){transition-delay:.08s}.em-sig.an>*:nth-child(3){transition-delay:.16s}.em-sig.an>*:nth-child(4){transition-delay:.24s}.em-sig.an>*:nth-child(5){transition-delay:.32s}.em-sig.an>*:nth-child(6){transition-delay:.4s}.em-sig.an>*:nth-child(7){transition-delay:.48s}.em-sig.an>*:nth-child(8){transition-delay:.56s}.em-sig.an>*:nth-child(9){transition-delay:.64s}
.em-s-foto{width:64px;height:64px !important;border-radius:50%;object-fit:cover;margin-bottom:4px}
.em-s-name{font-size:.95rem;color:var(--h-text)}
.em-s-firma{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--h-text);margin-top:4px}
.em-s-firma i,.em-s-logo i{width:12px;height:12px;border-radius:50%;border:3px solid #2F6BFF}
.em-s-logo{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;font-size:.92rem}
.em-s-logo em{font-style:normal;font-size:.62rem;letter-spacing:.14em;color:var(--h-text-2)}
.em-s-z{display:inline-flex;align-items:center;gap:6px}.em-s-z svg{width:12px;height:12px;color:var(--h-text-3)}
.em-s-link{color:#2F6BFF}
.em-s-pflicht{margin-top:8px;padding-top:8px;border-top:1px solid var(--h-linie);font-size:.62rem;color:var(--h-text-3);line-height:1.5}
.em-sg-vor{display:grid;gap:8px}
.em-sg-vor>small{font-size:.6rem;letter-spacing:.1em;color:var(--h-text-3);text-transform:uppercase}
.em-sg-mail{padding:14px;font-size:.8rem}
.em-sg-mail>b{display:block;font-size:.88rem;margin-bottom:6px}
.em-sg-mail p{margin:0 0 12px;line-height:1.55;color:#3A4257}
.em-sg-anh{position:relative;padding-top:12px;border-top:1px dashed var(--h-linie);display:grid}
.em-sg-anh .em-sig{grid-area:1/1}
.em-sig-klein{font-size:.66rem;gap:2px}
.em-sig-klein .em-s-foto{width:40px;height:40px !important}
.em-sig-klein .em-s-name{font-size:.78rem}
.em-sg-anh.blitzt{animation:em-sg-blitz 1.2s ease}
@keyframes em-sg-blitz{0%,30%{background:rgba(92,203,255,.18);box-shadow:0 0 0 6px rgba(92,203,255,.18)}100%{background:transparent;box-shadow:none}}

/* ---------- Schmal ---------- */
@media (max-width:1100px){.em-app{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}.em-buehne .em-lesen{display:none}}
@media (max-width:900px){.em-vl-huelle{grid-template-columns:1fr}.em-vz-bsp{display:none !important}.em-start-innen{grid-template-columns:1fr;min-height:0}.em-punkte{grid-template-columns:1fr}.em-kt-th{display:none}.em-kr{grid-template-columns:1fr auto;row-gap:4px}.em-kr-mail{grid-column:1/-1;grid-row:2}.em-kr-anb{display:none}.em-kr .em-sw{display:none}
  .em-kr.da{max-height:110px}.em-ord{grid-template-columns:minmax(0,.8fr) minmax(0,1.3fr);height:auto}.em-ord .em-liste{display:none}.em-ord .em-lesen{border-radius:0 18px 18px 0;padding-bottom:60px}.em-sg-raster{grid-template-columns:1fr}.em-sg-vor{display:none}}
@media (max-width:640px){.em-buehne .em-app{height:400px;grid-template-columns:1fr;transform:none}.em-buehne.em-an .em-app{transform:none}.em-buehne .em-ordner{display:none}
  .em-ord{grid-template-columns:1fr;font-size:11px}.em-ord .em-ordner{border-radius:18px 18px 0 0;border-right:0;border-bottom:1px solid var(--h-linie)}.em-ord .em-ordner ul li:nth-child(n+3):not(.em-o-neu){display:none}.em-ord .em-lesen{border-radius:0 0 18px 18px}
  .em-wahl{left:0}.em-toast{white-space:normal;width:86%;text-align:center;justify-content:center}.em-vl{font-size:12px}.em-vl-liste li b{font-size:.92em}.em-sg-flaeche{min-height:370px}.em-kt{min-height:520px}}


/* ---------- Dunkle Abschnitte im Stil der übrigen Website (Karten wie auf KI-Agenten): Konten, Vorlagen ---------- */
.em-dunkel{--h-grund:var(--panel);--h-linie:rgba(255,255,255,.09);--h-text:#F6F4EE;--h-text-2:#A7AAB6;--h-text-3:#6F7281;--em-f0:var(--panel);--em-f1:#161A24;--em-f2:#1C2130;--em-grau:#1C2130;
  --em-zart:rgba(255,255,255,.04);--em-blass:rgba(110,140,255,.14);--em-blau-t:#8FA4FF;--em-gruen-t:#4ADE9A;--em-rand:rgba(255,255,255,.18);--em-text-m:#C9CCD6;--em-dlg-grund:rgba(5,6,10,.6);color:var(--h-text)}
.em-kt.em-dunkel,.em-vl.em-dunkel{background:var(--panel);border:1px solid var(--linie);box-shadow:var(--schatten)}
.em-dunkel .em-dlg{border:1px solid var(--linie-stark);box-shadow:0 30px 80px -20px rgba(0,0,0,.9)}
.em-dunkel .em-vl-liste{box-shadow:0 24px 50px -14px rgba(0,0,0,.8),0 0 0 1px rgba(255,255,255,.12)}
.em-dunkel .em-kat-allg{background:rgba(255,255,255,.06);color:#A7AAB6}.em-dunkel .em-kat-kal{background:rgba(110,140,255,.14);color:#8FA4FF}
.em-dunkel .em-kat-pip{background:rgba(155,91,255,.16);color:#C3A2FF}.em-dunkel .em-kat-sys{background:rgba(74,222,154,.12);color:#4ADE9A}
.em-dunkel .em-sel.offen{box-shadow:0 0 0 3px rgba(47,107,255,.25)}

/* ---------- Handy: Ordnerspalte im Einstieg, Anbieter und Standard in den Konten, Mailliste beim Ordnen,
   Vorlagen-Beispiele als Chips, Signatur kompakt mit Vorschau (18.10.2026) ---------- */
@media (max-width:640px){
  .em-buehne .em-app{grid-template-columns:minmax(0,.68fr) minmax(0,1fr);font-size:11px;clip-path:inset(0 round 18px)}
  .em-buehne .em-ordner{display:flex;padding:10px 7px;gap:6px}
  .em-buehne .em-ordner li{padding:6px;gap:6px}
  .em-buehne .em-neu-mail{padding:7px 4px;white-space:nowrap}
  .em-buehne .em-suche{margin:8px;padding:7px 8px;white-space:nowrap;overflow:hidden}
  .em-buehne .em-mail{padding:9px 9px;gap:7px}
  .em-buehne .em-ava{flex:none}
  .em-buehne .em-zahl,.em-ord .em-o-zahl{font-size:.9em}
  /* Konten: Anbieter und Standard-Schalter in eigener dritter Zeile */
  .em-kr{grid-template-columns:minmax(0,1fr) auto}
  .em-kr-anb{display:block;grid-column:1;grid-row:3;color:var(--h-text-2);font-size:.92em}
  .em-kr .em-sw{display:block;grid-column:2;grid-row:3;justify-self:end}
  .em-kr.da{max-height:140px}
  /* Ordnen: Ordner und Mailliste nebeneinander, Lesebereich darunter; obere Zeile fest, damit nichts springt */
  .em-ord{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);grid-template-rows:286px auto}
  .em-ord .em-ordner{grid-column:1;grid-row:1;border-radius:18px 0 0 0;border-right:1px solid var(--h-linie);padding:10px 7px;gap:6px}
  .em-ord .em-ordner ul li:nth-child(n+3):not(.em-o-neu){display:flex}
  .em-ord .em-ordner li{padding:5px 6px;gap:6px}
  .em-ord .em-verk{min-height:30px}
  .em-ord .em-o-neu.da{max-height:30px;padding-top:5px !important;padding-bottom:5px !important}
  .em-ord .em-o-plus{padding:5px 6px}
  .em-ord .em-neu-mail{padding:7px 4px;white-space:nowrap}
  .em-ord .em-liste{display:flex;grid-column:2;grid-row:1;border-right:0;border-bottom:1px solid var(--h-linie);border-radius:0 18px 0 0}
  .em-ord .em-suche{margin:8px;padding:6px 8px;white-space:nowrap;overflow:hidden}
  .em-ord .em-mail{padding:8px 9px;gap:7px}
  .em-ord .em-mail .em-ava{flex:none}
  .em-ord .em-lesen{grid-column:1/-1;grid-row:2;border-radius:0 0 18px 18px;padding:14px 14px 84px}
  /* Vorlagen: Beispiele als Chips statt weggelassen, Betreffzeile mit fester Höhe */
  .em-vz .em-vz-bsp{display:flex !important;flex-direction:row;flex-wrap:wrap !important;gap:6px !important;border-top:0;margin-top:2px !important}
  .em-vz-bsp li{padding:3px 8px;border:1px solid var(--linie-stark);border-radius:999px;font-size:.7rem;gap:5px}
  .em-vz-bsp li svg{width:12px;height:12px}
  .em-vz-bsp .em-vz-mehr{border:1px solid transparent;padding-left:2px}
  .em-vz{grid-template-columns:auto minmax(0,1fr);column-gap:12px;padding:16px}.em-vz>*{grid-column:1/-1}
  .em-vz .em-vz-zahl{grid-column:1;font-size:3rem}.em-vz .em-vz-titel{grid-column:2;align-self:end;line-height:1.3}
  .em-vl-betreff{min-height:62px}.em-vl-inhalt{min-height:196px}
  .em-vl-phasen{gap:6px;margin-top:14px}.em-vl-phasen span{padding:5px 8px;letter-spacing:.02em}
  /* Signatur: Zeilen nicht über die Fläche verteilen, Vorschau der neuen Mail wieder zeigen */
  .em-sg{padding:14px}
  .em-sg-r{padding:7px 10px;font-size:.72rem}
  .em-sg-flaeche{display:grid;min-height:0;padding:14px}
  .em-sg-flaeche .em-sig{position:static;grid-area:1/1;align-content:start;visibility:hidden;font-size:.76rem;gap:3px}
  .em-sg-flaeche .em-sig.an{visibility:visible}
  .em-sg-flaeche .em-s-foto{width:48px;height:48px !important}
  .em-sig-a{grid-template-columns:auto minmax(0,1fr);column-gap:12px}.em-sig-a>*{grid-column:2}
  .em-sig-a .em-s-foto{grid-column:1;grid-row:1/span 7;margin:2px 0 0}.em-sig-a .em-s-pflicht{grid-column:1/-1}
  .em-sg-vor{display:grid}
  .em-sg-mail{padding:12px}
  .em-sg-mail p{margin-bottom:10px}
}