/* Kundenportal im Look der Startseite: dunkel, Source Sans/Serif, Stahlblau, roter Punkt als Akzent. Mobil zuerst, Touch-Ziele ab 44 px. */
@font-face{font-family:"Source Sans 3";font-weight:400;font-display:swap;src:url(../../fonts/SourceSans3-Regular.woff) format("woff")}
@font-face{font-family:"Source Sans 3";font-weight:600;font-display:swap;src:url(../../fonts/SourceSans3-SemiBold.woff) format("woff")}
@font-face{font-family:"Source Serif 4";font-weight:600;font-display:swap;src:url(../../fonts/SourceSerif4-SemiBold.woff) format("woff")}
:root{--bg:#1f2830;--surface:#27323c;--surface2:#303d49;--ink:#eef1f4;--mute:#a9b6c1;--line:#3b4854;--steel:#8fb0c4;--steel7:#a9c4d4;--accent:#f0944f;--red:#e5484d;--on-steel:#1f2830;
  --sans:"Source Sans 3","Segoe UI",Helvetica,Arial,sans-serif;--serif:"Source Serif 4",Georgia,serif;color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#1f2830}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.6 var(--sans);min-height:100vh;display:flex;flex-direction:column}
a{color:var(--steel);text-decoration:none;border-bottom:1px solid rgba(143,176,196,.35)}
a:hover{border-bottom-color:var(--steel)}
.wrap{width:100%;max-width:860px;margin:0 auto;padding:0 16px}
main.wrap{flex:1;padding-bottom:48px}
.top{border-bottom:1px solid var(--line);position:sticky;top:0;z-index:2;background:rgba(31,40,48,.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:60px}
.top .home{border:0;display:block}.top img{display:block;height:16px;width:auto}
.top .tag{font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding-left:14px;border-left:1px solid var(--line)}
.top nav{margin-left:auto;display:flex;align-items:center;gap:18px}
.top nav a,.lnk{background:none;border:0;padding:0;min-height:44px;display:inline-flex;align-items:center;color:var(--mute);font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.top nav a:hover,.lnk:hover{color:var(--ink)}
.top nav form{margin:0}
.k{font:600 11px/1.4 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--steel);margin:0 0 10px}
h1{margin:0 0 10px;font:600 clamp(26px,6vw,38px)/1.15 var(--serif);letter-spacing:-.01em}
h2{margin:0 0 14px;font:600 18px/1.3 var(--serif)}
h2.sec{margin:34px 0 12px}
.lead{color:var(--mute);margin:0 0 22px;max-width:56ch}
.small{color:var(--mute);font-size:14px;margin:10px 0 0}
.login{max-width:440px;margin:48px auto 0}
.head{padding:34px 0 8px}
.meta{color:var(--mute);font-size:14px}
.pill{display:inline-block;padding:2px 10px;border:1px solid var(--line);border-radius:999px;font:600 11px/1.6 var(--sans);letter-spacing:.08em;color:var(--ink);margin-right:6px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:20px;margin:16px 0;display:flex;flex-direction:column;gap:14px}
.card.danger{border-color:rgba(229,72,77,.35)}
.fld{display:flex;flex-direction:column;gap:6px}
.fld span{font:600 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.fld input,.fld textarea,.fld select{width:100%;min-height:44px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:6px;color:var(--ink);font:400 16px/1.4 var(--sans);padding:10px 12px;outline:none}
.fld input[type=file]{padding:9px 10px;font-size:14px}
.fld input:focus,.fld textarea:focus,.fld select:focus{border-color:var(--steel);background:rgba(255,255,255,.06)}
.fld textarea{resize:vertical}
.chk{display:flex;align-items:center;gap:10px;min-height:44px;color:var(--mute);font-size:14px}
.chk input{width:20px;height:20px;accent-color:var(--steel)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 22px;border-radius:8px;border:1px solid var(--steel);background:var(--steel);color:var(--on-steel);
  font:600 13px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;align-self:flex-start;border-bottom:1px solid var(--steel)}
.btn i{width:7px;height:7px;border-top:2px solid var(--accent);border-right:2px solid var(--accent);transform:rotate(45deg)}
.btn:hover{background:var(--steel7);border-color:var(--steel7)}
.btn.ghost{background:none;color:var(--steel);border-color:var(--line)}
.btn.ghost:hover{color:var(--ink);border-color:var(--steel)}
.note{padding:12px 14px;border-radius:6px;margin:14px 0;font-size:15px}
.note{font-weight:600;color:#fff;animation:meldung .5s ease both}
.note.ok{background:#2f7d4f;border:1px solid #43a36a} /* gespeichert: ganzes Feld grün */
.note.err{background:#b8393e;border:1px solid #e5484d} /* Fehler: ganzes Feld rot */
@keyframes meldung{from{opacity:0;transform:translateY(-4px)}}
.secret{background:var(--surface2);border:1px solid var(--steel);border-radius:8px;padding:16px 18px;margin:16px 0}
.secret p{margin:4px 0}.secret code{font:600 17px/1.5 ui-monospace,Menlo,monospace;color:var(--ink);word-break:break-all;user-select:all}
.tabs{display:flex;gap:6px;overflow-x:auto;border-bottom:1px solid var(--line);margin:18px 0 8px;scrollbar-width:none}
.tabs a{border:0;padding:0 14px;min-height:46px;display:inline-flex;align-items:center;color:var(--mute);font:600 12px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;border-bottom:2px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--ink);border-bottom-color:var(--steel)}
.row{margin:16px 0}
.frame{border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff;height:min(70vh,640px)}
.frame iframe{width:100%;height:100%;border:0;display:block}
.empty{color:var(--mute);padding:18px 0}
.list{list-style:none;margin:8px 0;padding:0;border-top:1px solid var(--line)}
.list li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:12px 0;border-bottom:1px solid var(--line)}
.list li>a{font-weight:600;min-height:28px;display:inline-flex;align-items:center;overflow-wrap:anywhere}
.list li .meta{flex:1 1 220px}
.list form{margin:0 0 0 auto}
.lnk.del{color:var(--mute)}.lnk.del:hover{color:var(--red)}
.thread{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.thread li{max-width:88%;padding:12px 14px;border-radius:10px;background:var(--surface);border:1px solid var(--line)}
.thread li.me{align-self:flex-end;background:var(--surface2)}
.thread li p{margin:6px 0 0;white-space:normal;overflow-wrap:anywhere}
.thread .meta{font-size:12px}
.att{display:inline-block;margin-top:8px;font-size:14px}
.grid{display:grid;grid-template-columns:1fr;gap:0 16px}
@media (min-width:760px){.grid{grid-template-columns:1fr 1fr}.top img{height:20px}}
.foot{border-top:1px solid var(--line)}
.foot .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 18px;min-height:56px;font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--mute);padding-bottom:env(safe-area-inset-bottom,0px)}
.foot .links{display:flex;gap:18px}.foot a{color:var(--mute);border:0}.foot a:hover{color:var(--ink)}
/* Ankunft nach dem Flug durchs Schwarze Loch: aus dem Dunkel heraus scharf werden */
.top,main.wrap,.foot{animation:ankunft 1.1s cubic-bezier(.2,.8,.2,1) both} /* Inhalte werden aus dem Dunkel scharf, die Punkte blenden separat ein */
@keyframes ankunft{from{opacity:0;filter:blur(8px)}to{opacity:1;filter:none}}
@media (prefers-reduced-motion:reduce){.top,main.wrap,.foot,canvas.feld{animation:none}}
/* Passwort anzeigen */
.pw{position:relative;display:block}
.pw input{padding-right:104px}
.pwtog{position:absolute;right:4px;top:50%;transform:translateY(-50%);min-height:38px;padding:0 12px;background:none;border:0;border-radius:4px;color:var(--steel);font:600 11px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;cursor:pointer}
.pwtog:hover,.pwtog:focus-visible{color:var(--ink);background:rgba(255,255,255,.05);outline:none}
/* Kopf und Fuß: nie umbrechen oder abschneiden */
.top nav a,.lnk,.foot span,.foot a{white-space:nowrap}
.top .wrap{min-width:0}
@media (max-width:560px){.top .tag{display:none}.top nav{gap:14px}.top .wrap{gap:10px}}
@media (max-width:380px){.top img{height:13px}.top nav a,.lnk{letter-spacing:.08em;font-size:10px}.foot .wrap{font-size:10px;letter-spacing:.08em}.foot .links{gap:12px}}
/* Punktefeld hinter der Anmeldung (assets/feld.js) */
canvas.feld{position:absolute;left:0;top:0;width:100%;z-index:0;pointer-events:none;animation:punkte 1.2s ease .2s both} /* Punkte erscheinen einfach sanft */
@keyframes punkte{from{opacity:0}}
body{position:relative}main.wrap,.foot{position:relative;z-index:1}.foot{background:var(--bg)}
/* Entwurf-Button im Punktefeld (assets/feld.js) */
.cta-feld{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;margin:18px 0;padding:58px 20px 52px;border:1px solid var(--line);border-radius:10px;background:rgba(39,50,60,.45)}
.cta-feld>*{position:relative;z-index:1}.cta-feld .k{margin:0}
.cta-feld .btn{align-self:center;max-width:100%;text-align:center;line-height:1.3;padding:12px 22px;box-shadow:0 0 0 6px rgba(143,176,196,.08),0 0 28px rgba(143,176,196,.25)}
.cta-hinweis{margin:0;max-width:min(46ch,84%);color:var(--mute);font-size:14.5px;line-height:1.5}
canvas.cta{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}
.note.info{background:rgba(143,176,196,.08);border:1px solid var(--line);color:var(--mute);font-weight:400;font-size:14px;animation:none}
.note.info b{color:var(--ink)}
@media (max-width:560px){.cta-feld{padding:48px 14px 42px}.cta-feld .btn{font-size:12px;letter-spacing:.1em;padding:12px 16px}}
/* Versionsverlauf der Entwürfe (Kunde und Admin) */
.versionen{list-style:none;margin:8px 0 0;padding:0;border-top:1px solid var(--line)}
.versionen li{display:flex;align-items:flex-start;justify-content:space-between;gap:10px 16px;padding:14px 12px;border-bottom:1px solid var(--line);border-left:2px solid transparent}
.versionen li.on{border-left-color:var(--steel);background:rgba(143,176,196,.07)}
.versionen .vlink{border:0;color:var(--ink);display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.versionen .vlink:hover b{color:var(--steel7)}
.versionen b{font-weight:600;overflow-wrap:anywhere}
.versionen .notiz{color:var(--mute);font-size:14.5px;line-height:1.5;border-left:2px solid var(--red);padding-left:10px;margin-top:2px}
.versionen .lnk{flex:0 0 auto;min-height:28px}
.pill.akt{border-color:var(--steel);color:var(--on-steel);background:var(--steel)}
.versionen form{display:flex;flex-direction:column;gap:8px;margin-top:8px}
.versionen.admin li{flex-direction:column}
.versionen.admin .zeile{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.versionen.admin textarea{width:100%;min-height:64px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:6px;color:var(--ink);font:400 15px/1.4 var(--sans);padding:8px 10px}
.versionen li.aus{opacity:.55}
@media (max-width:560px){.versionen li{flex-direction:column}}
/* Zugangsnachricht (Admin) */
.knoepfe{display:flex;flex-wrap:wrap;gap:10px}
.zn textarea[readonly]{font:400 15px/1.5 var(--sans)}
#nachricht .grid .fld{margin-bottom:14px}
.zugang{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin-top:12px;font-size:14px;color:var(--mute)}
.zugang code{font:600 14px/1.4 ui-monospace,Menlo,monospace;color:var(--ink);user-select:all}
.zugang label{display:flex;align-items:center;gap:8px}
.zugang input{width:22em;max-width:100%;min-height:36px;background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:6px;color:var(--ink);font:600 14px/1.4 ui-monospace,Menlo,monospace;padding:6px 96px 6px 10px}
.zn-box{margin:16px 0}.zn-box>summary{cursor:pointer;color:var(--steel);font:600 12px/1.4 var(--sans);letter-spacing:.14em;text-transform:uppercase;padding:10px 0}
.list .zugang{margin:0}.zugang label,.zugang .pw{min-width:0;max-width:100%}
.zeile-knopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px}.zeile-knopf .small{flex:1 1 320px}
.zugang input.kopier{cursor:copy}.zugang input.kopier:not([type=password]){padding-right:10px}
.list li .zugang{flex-basis:100%}
.logins{list-style:none;margin:4px 0 0;padding:0;font-size:14px;color:var(--ink)}.logins li{padding:4px 0;border-bottom:1px solid var(--line)}