/* ShareSpace shell. Component geometry, typography and colors come from v4379. */
@layer base {
*{box-sizing:border-box;margin:0;padding:0}
html{min-height:100%;scrollbar-gutter:stable}
body{min-height:100vh;font-family:var(--f);font-size:var(--fs-body);line-height:1.5;-webkit-font-smoothing:antialiased}
#app{overflow-x:clip}
button,input,textarea,select{font:inherit;color:inherit}
button,a,input,textarea,select{touch-action:manipulation}
button{background:none;border:0;cursor:pointer;text-align:inherit}
button:disabled{opacity:.5;cursor:default}
a{color:var(--klar-accent);text-decoration:none}
button:focus-visible,a:focus-visible{outline:var(--sp-1) solid var(--klar-accent);outline-offset:var(--sp-2)}
input,textarea,select{min-width:0;max-width:100%;font-size:var(--fs-input);background:transparent;border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-field);padding:var(--sp-4);outline:none}
input:focus,textarea:focus,select:focus{border-color:var(--klar-accent)}
input::placeholder,textarea::placeholder{color:var(--klar-muted);opacity:1}
button,a{ -webkit-tap-highlight-color:transparent }
}
@layer screens {
.ss-kopf{display:flex;align-items:center;gap:var(--sp-5);padding:var(--sp-4) var(--edge);border-bottom:var(--klar-line-width) solid var(--klar-line);background:var(--klar-bg);position:sticky;top:0;z-index:5}
.ss-marke{display:flex;align-items:center;gap:var(--sp-4);min-width:0}
.ss-logo{display:block;height:var(--shell-head-row-size);max-width:100%;object-fit:contain}
.ss-wort{font-size:var(--fs-eb);font-weight:var(--klar-fw-label);letter-spacing:var(--lsp-eb);text-transform:uppercase;color:var(--klar-sub)}
.ss-such{flex:0 1 340px;margin-left:auto;min-width:0}
.ss-such input{width:100%}
.ss-browse{display:none}
.ss-theme{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);font-size:var(--fs-sub);min-height:44px;flex-shrink:0}
.ss-profil{position:relative;flex-shrink:0}
.ss-avatar{width:44px;height:44px;border-radius:var(--r-field);background:var(--klar-surface-subtle);border:var(--klar-line-width) solid var(--klar-line);color:var(--klar-ink);font-weight:var(--klar-fw-row);display:flex;align-items:center;justify-content:center;overflow:hidden}
.ss-avatar img{width:100%;height:100%;object-fit:cover}
/* The approved account menu shares its row/group contract with the dialogs. */
.ss-menue{position:absolute;right:0;top:calc(100% + var(--sp-3));width:min(460px,calc(100vw - 2 * var(--edge)));z-index:10;background:var(--klar-bg);color:var(--klar-ink);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-dialog);display:block}
.ss-account-scroll{display:block;padding:var(--edge);border-radius:inherit;max-height:calc(100dvh - var(--ss-head-height,80px) - var(--sp-7));overflow:auto;overscroll-behavior:contain}
.ss-account-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);font-size:var(--fs-lead);font-weight:var(--klar-fw-title);line-height:1.4;margin-bottom:var(--sp-6)}
.ss-account-person{display:flex;align-items:center;gap:var(--sp-4);padding:14px var(--sp-5);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-field);background:var(--klar-surface-subtle)}
.ss-account-avatar{display:flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;border-radius:var(--r-field);background:var(--klar-soft);color:var(--klar-sub);font-size:var(--fs-sub);overflow:hidden}
.ss-account-avatar img{width:100%;height:100%;object-fit:cover}
.ss-account-text{display:block;flex:1;min-width:0}.ss-account-text b{display:block;font-size:var(--fs-row);font-weight:var(--klar-fw-row);line-height:1.4}.ss-account-text>span{display:block;font-size:var(--fs-sub);font-weight:400;color:var(--klar-sub);overflow-wrap:anywhere;margin-top:var(--sp-1);line-height:1.4}
.ss-account-state{flex:none;display:inline-flex;align-items:center;padding:var(--sp-1) var(--sp-3);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-chip);font-size:var(--fs-mini);color:var(--klar-sub)}.ss-account-state.on{color:var(--ok);border-color:var(--ok)}

.ss-rumpf{display:flex;align-items:flex-start;min-height:calc(100vh - 80px)}
.ss-links{width:280px;flex-shrink:0;align-self:stretch;border-right:var(--klar-line-width) solid var(--klar-line);padding:var(--sp-6);display:flex;flex-direction:column}
.ss-zeile{display:flex;align-items:center;gap:var(--sp-4);width:100%;min-height:44px;padding:var(--sp-3);font-size:var(--fs-body);border-radius:var(--r-field)}
.ss-zeile.an{color:var(--klar-accent);background:var(--klar-active)}
.ss-zeile>span:not(.zahl):not(.klapp){flex:1;min-width:0;overflow-wrap:anywhere}
.ss-zeile .zahl{font-size:var(--fs-sub);color:var(--klar-sub)}
.ss-zeile .klapp{display:flex;width:var(--sp-5);height:var(--sp-5);flex-shrink:0;transition:transform var(--motion-state) var(--ease-standard)}
.ss-zeile .klapp.auf{transform:rotate(90deg)}
.ss-baum{margin-left:var(--sp-7)}
.ss-zeile.ast{font-size:var(--fs-sub)}
.ss-zeile.korb{margin-top:var(--sp-7);border-top:var(--klar-line-width) solid var(--klar-line);border-radius:0}
.ss-speicher{padding-top:var(--sp-5);font-size:var(--fs-sub);color:var(--klar-sub)}
.bar{display:block;height:var(--sp-2);background:var(--klar-soft);border-radius:var(--r-chip);margin-top:var(--sp-3);overflow:hidden}
.bar i{display:block;height:100%;background:var(--klar-accent);transition:width var(--motion-progress) var(--ease-linear)}
.ss-start,.ss-mitte{flex:1;min-width:0;padding-block:var(--sp-6)}
.ss-brot{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--sp-6);padding-right:var(--edge);margin-bottom:var(--sp-6)}
.ss-brot>.scr-titelblock{flex:1;min-width:220px}
.ss-brot>.rechts{display:flex;flex-wrap:wrap;gap:var(--sp-3);padding-left:var(--edge)}
.ss-mitte>.ss-liste,.ss-mitte>.ss-leer,.ss-mitte>.ss-drop,.ss-mitte>.ss-dhin,.ss-mitte>.ss-fortschritt{margin-inline:calc(var(--edge) + var(--sp-3)) var(--edge)}
.ss-liste+.ss-liste,.ss-after-list{margin-top:var(--sp-4)}
.ss-dkachel .grau,.ss-dkachel .meta{font-size:var(--fs-sub);color:var(--klar-sub);flex-shrink:0}
.ss-dkachel.an .pf-row-t{color:var(--klar-accent)}
.ss-dkachel.flach>.bt-av{height:var(--sp-7)}
.ss-dkachel>.ss-gtyp,.ss-dkachel>.ss-mini,.ss-dkachel>.ss-ogross,.ss-dkachel>.ss-omini{width:var(--kreis-liste);height:var(--kreis-liste);border-radius:var(--r-field);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--fs-eb);background-size:contain;background-repeat:no-repeat;background-position:center}
.ss-dkachel>.ss-ogross,.ss-dkachel>.ss-omini{font-size:var(--fs-lead)}
.ss-dkachel.ordner .pfeil{width:var(--sp-5);height:var(--sp-5);flex-shrink:0;color:var(--klar-sub)}
.ss-status{font-size:var(--fs-eb);flex-shrink:0}
.ss-status.frei{color:var(--ok)}
.ss-status.wartet{color:var(--klar-accent)}
.ss-typ{font-style:normal;font-size:var(--fs-eb);font-weight:var(--klar-fw-label)}
.ss-typ.gross{font-size:var(--fs-title)}
.ss-knopf,.ss-abbr,.ss-tun,.ss-dialog .dk button,.hneu{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:var(--sp-3) var(--sp-5);border:var(--klar-line-width) solid var(--klar-accent);border-radius:var(--r-chip);font-size:var(--fs-sub);font-weight:var(--klar-fw-label);color:var(--klar-accent);background:transparent;line-height:1.4}
.ss-knopf.still,.ss-abbr,.ss-dialog .dk .ab{border-color:var(--klar-line);color:var(--klar-ink)}
.ss-knopf.rot-rand,.ss-dialog .dk .rot{color:var(--bad);border-color:var(--bad)}
.ss-knopf.aus,.ss-tun.aus{opacity:.45;pointer-events:none}
.ss-knopf.rot-rand{width:100%;margin-top:var(--sp-4)}
.ss-filter,.ss-dichte,.ss-os{display:flex;gap:var(--sp-3);flex-wrap:wrap}
.ss-filter{margin-bottom:var(--sp-4)}
.ss-chip,.ss-dichte button,.ss-os button{display:flex;align-items:center;justify-content:center;min-height:44px;padding:var(--sp-3) var(--sp-4);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-chip);font-size:var(--fs-sub);color:var(--klar-sub)}
.ss-chip.an,.ss-dichte button.an,.ss-os button.an{border-color:var(--klar-accent);color:var(--klar-accent);background:var(--klar-active)}
.ss-dichte button svg{width:var(--sp-5);height:var(--sp-5)}
.ss-mehr{font-size:var(--fs-sub);color:var(--klar-sub);text-transform:none;letter-spacing:0;font-weight:var(--klar-fw-label);min-height:var(--sp-7)}
.ss-drop,.ss-leer{border:var(--klar-line-width) dashed var(--klar-line);border-radius:var(--r-card);padding:var(--sp-5);font-size:var(--fs-sub);color:var(--klar-sub);background:var(--klar-surface-subtle)}
.ss-drop{margin-top:var(--sp-6);text-align:center}
.ss-drop.heiss{border-color:var(--klar-accent);color:var(--klar-accent)}
.ss-fortschritt{margin-top:var(--sp-4);font-size:var(--fs-sub)}
.ss-warte-karte{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-5);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-card);background:var(--klar-surface-subtle)}
.ss-warte-karte+.ss-warte-karte{margin-top:var(--sp-4)}
.ss-warte-karte .t{flex:1;min-width:160px}
.ss-warte-karte b{display:block;font-size:var(--fs-row);font-weight:var(--klar-fw-row);overflow-wrap:anywhere}
.ss-warte-karte .t span{display:block;font-size:var(--fs-sub);color:var(--klar-sub)}
.ss-rechts{width:360px;flex-shrink:0;border-left:var(--klar-line-width) solid var(--klar-line);padding:var(--sp-6);min-width:0}
.ss-vorschau{height:170px;display:flex;align-items:center;justify-content:center;border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-card);overflow:hidden;background:var(--klar-surface-subtle);margin-bottom:var(--sp-4)}
.ss-vorschau img{width:100%;height:100%;object-fit:contain}
.ss-dname{font-size:var(--fs-val);font-weight:var(--klar-fw-row);overflow-wrap:anywhere}
.ss-dunter,.ss-dhin{font-size:var(--fs-sub);color:var(--klar-sub);overflow-wrap:anywhere}
.ss-dunter{margin-top:var(--sp-2);margin-bottom:var(--sp-6)}
.ss-dhin{margin-bottom:var(--sp-4)}
.ss-daktion{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-bottom:var(--sp-7)}
.ss-daktion>*{flex:1}
.ss-paar{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.ss-feld{padding:var(--sp-4);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-field);min-width:0;background:var(--klar-surface-subtle)}
.ss-feld .wort,.hfeld .wort{display:block;font-size:var(--fs-eb);color:var(--klar-sub)}
.ss-feld .wert{display:block;font-size:var(--fs-body);overflow-wrap:anywhere}
.ss-feld.zeile{display:flex;gap:var(--sp-3);justify-content:space-between;margin-bottom:var(--sp-3)}
.ss-feld .r{font-size:var(--fs-sub);color:var(--klar-sub)}
.ss-feld .offen{color:var(--klar-accent)}
.ss-rechts textarea,.ss-anwahl input{width:100%;margin-bottom:var(--sp-3)}
.ss-anwahl .liste,.ss-anwahl .treffer{border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-field);margin-bottom:var(--sp-3)}
.ss-anwahl .liste button{display:block;width:100%;min-height:44px;padding:var(--sp-3) var(--sp-4)}
.ss-anwahl .treffer{display:flex;align-items:center;justify-content:space-between;padding-left:var(--sp-4);border-color:var(--klar-accent)}
.ss-anwahl .treffer button{min-width:44px;min-height:44px}
.ss-anwahl .keine{padding:var(--sp-4);color:var(--klar-sub)}
.ss-gate{min-height:100vh;display:grid;place-items:center;padding:var(--sp-8) var(--edge)}
.ss-gate>.ss-theme{position:absolute;right:var(--edge);top:var(--sp-4)}
.ss-gate-karte{width:100%;max-width:440px;padding-block:var(--sp-8)}
.ss-gate-karte>.ss-logo{margin-left:var(--edge);margin-bottom:var(--sp-7)}
.ss-gate-karte>.unter{margin:var(--sp-6) var(--edge);font-size:var(--fs-sub);color:var(--klar-sub)}
.ss-gate-karte label{display:block;margin:var(--sp-7) var(--edge) var(--sp-3);font-size:var(--fs-eb);font-weight:var(--klar-fw-label);color:var(--klar-accent);text-transform:uppercase;letter-spacing:var(--lsp-eb)}
.ss-gate-karte>input,.ss-gate-karte>.ss-knopf{display:block;width:calc(100% - 2 * var(--edge));margin:0 var(--edge) var(--sp-5)}
.ss-gate-karte>.fehler{margin:var(--sp-4) var(--edge);font-size:var(--fs-sub);color:var(--bad)}
.ss-schleier{position:fixed;inset:0;z-index:50;background:var(--paint-pf-dim-background);display:flex;align-items:center;justify-content:center;padding:var(--edge)}
.ss-dialog{width:440px;max-width:100%;max-height:calc(100dvh - 2 * var(--edge));overflow:auto;background:var(--klar-card);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-card);padding:var(--sp-6);overscroll-behavior:contain}
.ss-dialog.hilfe{width:600px}
.ss-dialog .dt,.ss-dialog-titel,.hkopf .ht{font-size:var(--fs-title);font-weight:var(--klar-fw-title);text-transform:uppercase;line-height:1.2;overflow-wrap:anywhere}
.ss-dialog .du{font-size:var(--fs-sub);color:var(--klar-sub);margin-top:var(--sp-2)}
.ss-dialog .df{width:100%;margin-top:var(--sp-6)}
.ss-dialog .dk{display:flex;gap:var(--sp-3);margin-top:var(--sp-7)}
.ss-dialog .dk button{flex:1}
.ss-dialog>input{width:100%;margin-bottom:var(--sp-4)}
.ss-dialog-titel{margin-bottom:var(--sp-6)}
.ss-dialog-liste{max-height:280px;overflow:auto;border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-field)}
.ss-grip{display:flex;min-height:44px;margin-bottom:var(--sp-6)}
.ss-grip>span:first-child{display:none}
.ss-fest{display:flex;justify-content:space-between;gap:var(--sp-3);width:100%}
.hkopf{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-6)}
.hkopf>.ez-eb{margin:0}
.hkopf .hx{margin-left:auto;min-width:44px;min-height:44px;color:var(--klar-sub)}
.ss-os.rechts{margin-left:auto}
.hliste{display:flex;flex-direction:column;gap:var(--sp-4);font-size:var(--fs-sub)}
.hs{display:flex;align-items:flex-start;gap:var(--sp-4)}
.hz{display:flex;align-items:center;justify-content:center;width:var(--sp-7);height:var(--sp-7);flex-shrink:0;border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-chip);color:var(--klar-accent)}
.hfeld{display:flex;align-items:center;gap:var(--sp-4);padding:var(--sp-4) 0;border-top:var(--klar-line-width) solid var(--klar-line);font-size:var(--fs-sub)}
.hfeld .wort{flex:0 0 72px}
.hfeld .wert{min-width:0;overflow-wrap:anywhere}
.hfeld .hkop,.hfeld .hneu{margin-left:auto;flex-shrink:0;min-width:44px;min-height:44px}
.hkop svg{width:var(--sp-5);height:var(--sp-5)}
.hneu{padding:var(--sp-3);font-size:var(--fs-sub)}
.ss-kmenue{position:fixed;z-index:60;width:260px;max-width:calc(100vw - 2 * var(--edge));background:var(--klar-card);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-field);padding:var(--sp-2);display:flex;flex-direction:column}
.ss-kmenue button{min-height:44px;padding:var(--sp-3) var(--sp-4);font-size:var(--fs-sub);width:100%;border-radius:var(--r-field)}
.ss-kmenue button:hover{background:var(--klar-active)}
.ss-kmenue .rot{color:var(--bad)}
.ss-kmenue .wohin{padding:var(--sp-3) var(--sp-4);font-size:var(--fs-eb);color:var(--klar-accent)}
.ss-kmenue .trenn{height:var(--klar-line-width);background:var(--klar-line);margin:var(--sp-2) var(--sp-4)}
.ss-kast{position:relative}
.ss-kast .hat-unter{display:flex;justify-content:space-between;align-items:center;gap:var(--sp-3)}
.ss-kast svg{width:var(--sp-4);height:var(--sp-4)}
.ss-kmenue.unter{display:none;position:absolute;left:100%;top:0;max-height:60vh;overflow:auto}
.ss-kast:hover>.unter,.ss-kast:focus-within>.unter{display:flex}
.ss-zeile.ziel{outline:var(--klar-line-width) solid var(--klar-accent)}
.ss-inline{width:100%;font-size:var(--fs-input)}
.ss-meld{position:fixed;left:50%;bottom:var(--sp-6);transform:translateX(-50%);max-width:calc(100vw - 2 * var(--edge));background:var(--klar-card);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-card);padding:var(--sp-4) var(--sp-6);z-index:70;font-size:var(--fs-body)}
.sichliste{display:flex;flex-direction:column;max-height:52vh;overflow:auto}
.sichzeile{display:flex;align-items:center;gap:var(--sp-4);padding-block:var(--sp-4);border-bottom:var(--klar-line-width) solid var(--klar-line)}
.sichzeile:last-child{border-bottom:0}
.sichzeile .mitte{flex:1;min-width:0}
.sichzeile b{display:block;font-size:var(--fs-body);font-weight:var(--klar-fw-row);overflow-wrap:anywhere}
.sichzeile span,.sichzeile .art{font-size:var(--fs-sub);color:var(--klar-sub)}
.sichzeile .art.monat{color:var(--klar-accent)}
@media(max-width:1100px){.ss-links{width:240px}.ss-rechts{width:300px}.ss-theme>span:first-child{display:none}.ss-content:has(.ss-rechts){flex-wrap:wrap}.ss-content:has(.ss-rechts)>.ss-mitte{flex-basis:100%}.ss-rechts{width:100%;margin-left:0;border-top:var(--klar-line-width) solid var(--klar-line)}}
@media(max-width:680px){.ss-kopf{flex-wrap:wrap;gap:var(--sp-3)}.ss-marke{margin-right:auto}.ss-wort{font-size:var(--fs-mini)}.ss-logo{height:var(--sp-8)}.ss-such{order:4;flex-basis:100%;margin:0}.ss-theme>span:first-child{display:none}.ss-rumpf{display:block}.ss-links{width:100%;border:0;border-bottom:var(--klar-line-width) solid var(--klar-line);padding:var(--sp-5) var(--edge);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2) var(--sp-3)}.ss-links>.ez-eb,.ss-links>.ss-speicher,.ss-links>.ss-baum{grid-column:1/-1}.ss-links>.ss-zeile.korb{margin:0;border:0}.ss-rumpf:has(.ss-rechts){display:block}.ss-rechts{width:100%;margin:0;border-left:0}.ss-brot{display:block}.ss-brot>.rechts{margin-top:var(--sp-6)}.ss-dkachel .grau,.ss-dkachel .meta{display:none}.ss-dkachel .ss-status{max-width:72px;overflow-wrap:anywhere}.ss-dkachel[data-korb]{flex-wrap:wrap}.ss-dkachel[data-korb]>.ss-knopf{margin-left:calc(var(--kreis-liste) + var(--sp-4))}.ss-dialog .hfeld{flex-wrap:wrap}.hfeld .wert{flex:1;min-width:120px}.hfeld .hneu{margin-left:84px}.ss-gate>.ss-theme>span:first-child{display:block}.sichzeile{flex-wrap:wrap}.ss-kmenue.unter{left:auto;right:0;top:100%}}
@media(max-width:680px){.ss-kopf .ss-wort{display:none}.ss-kopf .ss-logo{height:var(--sp-7)}.ss-browse{display:block;order:5;width:100%;min-height:44px;color:var(--klar-accent);font-size:var(--fs-sub);text-align:left}.ss-browse::after{content:'⌄';float:right}.ss-browse[aria-expanded=true]::after{content:'⌃'}#app:not(.ss-nav-open) .ss-links{display:none}.ss-links>[data-gid]{grid-column:1/-1}.ss-paar{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:var(--motion-reduced)!important;transition-duration:var(--motion-reduced)!important}}
}

@layer screens {
.ss-link-label{display:block;margin-top:var(--sp-5);font-size:var(--fs-sub)}
#ss-link-body{margin-top:var(--sp-5)}
#ss-public-url{width:100%;margin-top:var(--sp-3)}
.ss-link-actions{display:flex;gap:var(--sp-3);flex-wrap:wrap;margin-top:var(--sp-4)}
.ss-link-actions .rot-rand{width:auto;margin-top:0}
}

/* Ancestor navigation uses the existing subtitle axis and theme tokens. */
@layer screens {
.ss-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);overflow-wrap:anywhere;min-width:0}
.ss-crumbs button{min-height:44px;max-width:100%;white-space:normal;overflow-wrap:anywhere;text-align:left;color:var(--klar-sub)}
.ss-crumbs b{font-weight:inherit;color:var(--klar-sub)}
}

@layer screens {.ss-folder-create>label{font-size:var(--fs-sub);color:var(--klar-sub)}.ss-folder-create>input{display:block}}

/* Sidebar footer stays in the viewport; only the folder tree scrolls. */
@layer screens {
@media(min-width:681px){
.ss-links{position:sticky;top:var(--ss-head-height,80px);height:calc(100dvh - var(--ss-head-height,80px));align-self:flex-start;overflow:hidden}
.ss-rumpf:has(.ss-rechts)>.ss-links{align-self:flex-start}
.ss-links-nav{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain}
.ss-links-footer{flex:none;padding-top:var(--sp-7)}
.ss-links-footer>.ss-zeile.korb{margin-top:0}
}
@media(max-width:680px){
.ss-links{display:flex;flex-direction:column;gap:0}
.ss-links-nav,.ss-links-footer{width:100%}
.ss-links-footer{padding-top:var(--sp-7)}
.ss-links-footer>.ss-zeile.korb{margin-top:0}
}
}

@layer screens {
.ss-content{display:flex;align-items:flex-start;flex:1;min-width:0}
@media(max-width:680px){.ss-content{display:block}}
}

/* List titles: regular weight, same KLAR type size and spacing. */
@layer screens { .ss-dkachel{--klar-fw-row:400} }

@layer screens {
.ss-sortierung{display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-3);margin:0 var(--edge) var(--sp-5) calc(var(--edge) + var(--sp-3));font-size:var(--fs-sub);color:var(--klar-sub)}
.ss-sort-wahl{position:relative;max-width:100%}
.ss-sort-wahl select{appearance:none;-webkit-appearance:none;display:block;height:44px;min-height:44px;margin:0;font:inherit;line-height:1.2;padding:0 calc(var(--sp-6) + var(--sp-5) + var(--sp-3)) 0 var(--sp-4);color:var(--klar-ink);background:var(--klar-card);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-field)}
.ss-sort-wahl>svg{position:absolute;right:var(--sp-4);top:50%;transform:translateY(-50%);width:var(--sp-6);height:var(--sp-6);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.ss-sort-wahl select:focus-visible{outline:var(--sp-1) solid var(--klar-accent);outline-offset:var(--sp-2)}
@media(max-width:680px){.ss-sortierung{justify-content:space-between}}
}

@layer screens {
.ss-dkachel,.ss-zeile,.ss-kmenue{-webkit-user-select:none;user-select:none}
:is(.ss-dkachel,.ss-zeile,.ss-kmenue) :is(input,textarea,[contenteditable=true]){-webkit-user-select:text;user-select:text}
}

/* Approved variant 1: compact folder toolbar. Shared tokens retain their roles. */
@layer vertraege {
.ss-toolbar.ss-brot{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3) var(--sp-4);padding:0 var(--edge);margin-bottom:var(--sp-4)}
.ss-toolbar.ss-brot>.scr-titelblock{flex:1;min-width:min(220px,100%);padding:0;min-height:44px}
.ss-toolbar.ss-brot>.rechts{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3);padding:0;margin:0;max-width:100%;min-width:0}
.ss-toolbar .ss-sort-inline{margin:0;display:flex;min-width:0}
.ss-toolbar .ss-knopf{height:44px;min-height:44px;padding-block:var(--sp-3)}
.ss-toolbar .scr-unter{margin-top:var(--sp-2)}
.ss-toolbar .ss-crumbs{gap:0 var(--sp-3);line-height:1.2}
.ss-toolbar .ss-crumbs button{min-height:44px;display:inline-flex;align-items:center}
.ss-toolbar+.ss-liste{margin-top:0}
@media(max-width:680px){
.ss-toolbar.ss-brot>.scr-titelblock{flex-basis:100%}
.ss-toolbar.ss-brot>.rechts{width:100%}
.ss-toolbar .ss-sort-inline{flex:1 1 130px}
.ss-toolbar .ss-sort-wahl,.ss-toolbar .ss-sort-wahl select{width:100%}
}
}

/* Multiple selection and folder uploads reuse Klar list and pill contracts. */
@layer screens {
.ss-selection{margin:0 var(--edge) var(--sp-4);padding:var(--sp-4);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-card);background:var(--klar-surface-subtle)}
.ss-selection-actions{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-3)}
.ss-selection-actions .rot-rand{width:auto;margin-top:0}
.ss-selection-actions>[role="status"]{margin-right:auto;font-size:var(--fs-sub)}
.ss-selection p{margin-top:var(--sp-3);font-size:var(--fs-sub);color:var(--klar-sub)}
.ss-selection [role="alert"]{color:var(--bad)}
/* Fixed selection slot: hover changes visibility, never the file alignment. */
.ss-file-entry{position:relative}
.ss-file-entry.ss-selected{background:var(--klar-active)}
.ss-file-entry>.ss-file-open{margin-left:calc(44px + var(--sp-3));display:flex;align-items:center;gap:var(--sp-4);flex:1;min-width:0;align-self:stretch;text-align:left;color:inherit;font:inherit;background:transparent;border:0;padding:0;cursor:pointer}
.ss-file-open>.ss-gtyp,.ss-file-open>.ss-mini{width:var(--kreis-liste);height:var(--sp-7);border-radius:var(--r-field);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:var(--fs-eb);background-size:contain;background-repeat:no-repeat;background-position:center}
.ss-file-entry>.ss-file-select{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;border:0;background:transparent;color:var(--klar-sub);border-radius:var(--r-chip);cursor:pointer;opacity:0;touch-action:manipulation}
.ss-selection-circle{width:var(--sp-7);height:var(--sp-7);border:var(--klar-line-width) solid currentColor;border-radius:50%;display:flex;align-items:center;justify-content:center}
.ss-selection-circle svg{width:var(--sp-5);height:var(--sp-5)}
.ss-selection-arrow,.ss-selection-tick{display:none}
.ss-file-entry:hover>.ss-file-select,.ss-file-entry:focus-within>.ss-file-select,.ss-file-entry.ss-selecting>.ss-file-select,.ss-file-entry.ss-selected>.ss-file-select{opacity:1}
.ss-file-select:is(:hover,:focus-visible){color:var(--klar-accent)}
.ss-file-select[aria-pressed="false"]:is(:hover,:focus-visible) .ss-selection-arrow{display:block}
.ss-file-select[aria-pressed="true"]{color:var(--klar-accent)}
.ss-file-select[aria-pressed="true"] .ss-selection-circle{background:var(--klar-active)}
.ss-file-select[aria-pressed="true"] .ss-selection-tick{display:block}
.ss-file-select:focus-visible,.ss-file-open:focus-visible{outline:2px solid var(--klar-accent);outline-offset:2px}
@media(hover:none),(pointer:coarse){.ss-file-entry>.ss-file-select{opacity:1}}
.ss-upload-status{position:fixed;right:var(--edge);bottom:var(--edge);z-index:15;max-width:calc(100vw - 2 * var(--edge));width:380px;max-height:50vh;overflow:auto;border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-card);background:var(--klar-card);padding:var(--sp-5);display:flex;flex-direction:column;gap:var(--sp-3);overflow-wrap:anywhere;font-size:var(--fs-sub)}
.ss-upload-status b{font-weight:var(--klar-fw-row);font-size:var(--fs-row)}
.ss-upload-status p{color:var(--klar-sub)}
.ss-upload-status [role="alert"]{color:var(--bad)}
.ss-upload-status progress{width:100%;accent-color:var(--klar-accent);height:var(--sp-3)}
.ss-upload-status ul{padding-left:var(--sp-5)}
.ss-upload-status summary{min-height:44px;display:flex;align-items:center;cursor:pointer}
.ss-mitte.heiss{outline:var(--klar-line-width) dashed var(--klar-accent);outline-offset:calc(-1 * var(--sp-3))}
.ss-dialog #ss-bulk-target{width:100%;margin-block:var(--sp-3) var(--sp-4)}
}

@layer vertraege {
body[data-layout="klar"] .ab-modern .ab-group>.ss-file-entry::after{left:calc(44px + var(--sp-3) + var(--kreis-liste) + var(--sp-4))}
}

/* One shared file table and a stable command slot, referenced to the supplied OneDrive states. */
@layer screens {
.ss-mitte{container-type:inline-size}
.ss-sidebar-create{flex:none;padding-bottom:var(--sp-6)}
.ss-upload-primary{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);width:100%;min-height:44px;padding:var(--sp-3) var(--sp-5);border:var(--klar-line-width) solid var(--klar-accent);border-radius:var(--r-chip);background:transparent;color:var(--klar-accent);font-size:var(--fs-body);font-weight:var(--klar-fw-label)}
.ss-upload-primary svg,.ss-command-button svg,.ss-selected-count svg{width:var(--sp-6);height:var(--sp-6);flex:none}
.ss-commandbar{display:flex;align-items:stretch;gap:var(--sp-4);margin:0 var(--edge) var(--sp-4);min-height:68px;padding:var(--sp-3) var(--sp-4);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-card);background:var(--klar-card)}
.ss-command-switch{display:grid;flex:1;min-width:0;position:relative}
.ss-command-panel{grid-area:1/1;min-width:0;display:flex;align-items:center;gap:var(--sp-4);visibility:hidden;pointer-events:none}
.ss-commandbar[data-selected="false"] .ss-command-normal,.ss-commandbar[data-selected="true"] .ss-command-selection{visibility:visible;pointer-events:auto}
.ss-command-title{flex:1;min-width:100px;overflow:hidden}
.ss-command-title h1{font-size:var(--fs-val);font-weight:var(--klar-fw-row);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ss-command-title .ss-crumbs{display:flex;align-items:center;gap:var(--sp-2);white-space:nowrap;overflow:auto;font-size:var(--fs-mini);color:var(--klar-sub)}
.ss-command-title .ss-crumbs button{min-height:var(--sp-7);flex:none}
.ss-command-title .ss-crumbs b{font-weight:var(--klar-fw-row)}
.ss-command-actions{display:flex;align-items:center;gap:var(--sp-2);min-width:0;overflow-x:auto;overscroll-behavior-inline:contain;scrollbar-width:thin;flex:none}
.ss-command-selection .ss-command-actions{flex:1}
.ss-command-button{display:flex;align-items:center;justify-content:center;gap:var(--sp-3);min-height:44px;padding:var(--sp-3);border-radius:var(--r-field);font-size:var(--fs-sub);font-weight:var(--klar-fw-label);white-space:nowrap;flex:none;color:var(--klar-ink)}
.ss-command-button:hover{background:var(--klar-active)}
.ss-command-button[id$="trash"]{color:var(--bad)}
.ss-selected-count{flex:none;gap:var(--sp-2);white-space:nowrap}
.ss-command-sort{display:flex;align-items:center;flex:none}
.ss-command-sort .ss-sortierung{margin:0}
.ss-command-message{margin:0 var(--edge) var(--sp-4);font-size:var(--fs-sub);color:var(--klar-sub)}
.ss-command-message[role="alert"]{color:var(--bad)}
.ss-command-ghost{position:absolute;inset:0;visibility:visible;pointer-events:none;z-index:2;background:var(--klar-card)}
.ss-browser-frame{position:relative;margin:0 var(--edge);border:var(--klar-line-width) solid var(--klar-line);border-radius:var(--r-card);background:transparent;display:flex;flex-direction:column;min-height:0}
.ss-browser-table{--klar-fw-row:400;min-height:0;border-radius:calc(var(--r-card) - var(--klar-line-width));overflow:hidden}
.ss-browser-table table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed;font-size:var(--fs-row);font-weight:var(--klar-fw-row)}
.ss-col-select{width:56px}.ss-col-date{width:120px}.ss-col-size{width:128px}.ss-col-area{width:170px}
.ss-browser-table th{height:52px;text-align:left;font-size:var(--fs-sub);font-weight:var(--klar-fw-label);color:var(--klar-sub);border-bottom:var(--klar-line-width) solid var(--klar-line);padding:var(--sp-2) var(--sp-4)}
.ss-browser-table th button{display:flex;align-items:center;min-height:44px;gap:var(--sp-2);white-space:nowrap}
.ss-browser-table td{padding:var(--sp-2) var(--sp-4);vertical-align:middle;position:relative}
.ss-browser-row+tr td{border-top:var(--klar-line-width) solid var(--klar-line)}
.ss-browser-table .ss-cell-select{padding-inline:var(--sp-3) var(--sp-1)}
.ss-browser-table .ss-cell-name{padding-left:var(--sp-2)}
.ss-browser-table .ss-cell-date,.ss-browser-table .ss-cell-size,.ss-browser-table .ss-cell-area{font-size:var(--fs-sub);color:var(--klar-sub);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-browser-table .ss-cell-area{padding-right:var(--sp-5)}
.ss-browser-table .ss-table-name{display:flex;align-items:center;gap:var(--sp-4);width:100%;min-height:44px;min-width:0;font-size:var(--fs-row);font-weight:var(--klar-fw-row);color:var(--klar-ink);text-align:left}
.ss-table-title{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.ss-table-icon{display:flex;align-items:center;justify-content:center;width:var(--kreis-liste);height:var(--kreis-liste);flex:none;font-size:var(--fs-val);background-size:contain;background-repeat:no-repeat;background-position:center}
.ss-table-icon.ss-gtyp{font-size:var(--fs-eb)}
.ss-table-icon:is(.ss-mini,.ez-pdf-thumbnail){height:var(--sp-8)}
.ss-browser-table .ss-file-select,.ss-browser-table .ss-table-all{display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:var(--r-chip);background:transparent;color:var(--klar-sub);opacity:0}
.ss-browser-table thead:hover .ss-table-all,.ss-browser-table .ss-table-all:focus-visible,.ss-browser-table.ss-selecting .ss-table-all{opacity:1}
.ss-browser-row:hover,.ss-browser-row:has(:focus-visible){background:var(--klar-surface-subtle)}
.ss-browser-row.ss-selected{background:var(--klar-active)}
.ss-browser-row:hover .ss-file-select,.ss-browser-row:has(:focus-visible) .ss-file-select,.ss-browser-table.ss-selecting .ss-file-select{opacity:1}
.ss-browser-table .ss-file-select:is(:hover,:focus-visible,[aria-pressed="true"]),.ss-table-all[aria-pressed="true"]{color:var(--klar-accent)}
.ss-browser-table .ss-file-select[aria-pressed="true"] .ss-selection-circle{background:var(--klar-accent);color:var(--klar-bg);border-color:var(--klar-accent)}
.ss-table-empty{height:120px;text-align:center;color:var(--klar-sub);font-size:var(--fs-sub)}
.ss-browser-row{-webkit-user-select:none;user-select:none}.ss-browser-row input{-webkit-user-select:text;user-select:text}
.ss-mitte>.ss-drop{margin-inline:var(--edge)}
@media(hover:none),(pointer:coarse){.ss-browser-table .ss-file-select,.ss-browser-table .ss-table-all{opacity:1}}
@container(max-width:960px){.ss-cell-area,.ss-col-area{display:none}.ss-col-date{width:108px}.ss-col-size{width:112px}}
@container(max-width:720px){
.ss-commandbar{flex-wrap:wrap;gap:var(--sp-2);min-height:116px}
.ss-command-switch{flex-basis:100%}
.ss-command-normal{display:grid;grid-template-rows:44px 44px;gap:0}
.ss-command-normal .ss-command-actions{width:100%}
.ss-command-title:has(.ss-crumbs)>h1{display:none}
.ss-command-title{height:44px;display:flex;align-items:center}
.ss-command-title{flex-basis:100%}
.ss-command-actions{max-width:100%;flex:1;}
.ss-command-selection{flex-wrap:wrap;gap:var(--sp-2)}
.ss-command-selection .ss-command-actions{flex-basis:100%}
.ss-selected-count{position:absolute;right:0;bottom:-44px;min-height:36px;padding-block:var(--sp-2)}
.ss-command-sort{position:absolute;left:var(--sp-4);bottom:var(--sp-3)}
.ss-commandbar{position:relative;padding-bottom:52px}
.ss-command-sort select{min-height:36px;padding-block:var(--sp-2)}
.ss-cell-date,.ss-col-date{display:none}
}
@container(max-width:440px){.ss-col-size{width:90px}.ss-col-select{width:48px}.ss-browser-table .ss-cell-select{padding-left:var(--sp-1)}.ss-browser-table th,.ss-browser-table td{padding-inline:var(--sp-2)}.ss-browser-table .ss-table-name{gap:var(--sp-3)}.ss-browser-table .ss-table-icon{width:var(--sp-7);height:var(--sp-7)}}
}

@layer screens {
@container(max-width:720px){.ss-command-selection .ss-command-button{width:44px;flex:0 0 44px}.ss-command-selection .ss-command-button>span{display:none}.ss-command-selection .ss-command-actions{gap:var(--sp-4);overflow:visible}}
@container(max-width:360px){.ss-selected-count svg{display:none}.ss-selected-count{padding-inline:var(--sp-3)}.ss-command-sort .ss-sort-wahl{max-width:130px}.ss-command-sort select{width:100%}.ss-cell-size button{font-size:var(--fs-mini)}}
}

@layer screens {
@media(min-width:981px){
.ss-mitte{position:sticky;top:var(--ss-head-height,80px);height:calc(100dvh - var(--ss-head-height,80px));display:flex;flex-direction:column;min-height:0}
.ss-mitte>:not(.ss-browser-frame){flex:none}
.ss-browser-frame{flex:0 1 auto}
.ss-browser-table{flex:0 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain}
.ss-browser-table th{position:sticky;top:0;z-index:1;background:var(--klar-card)}
}
}

/* v84: compact command row and the existing KLAR corner geometry. */
@layer screens {
.ss-commandbar{min-height:54px;padding:var(--sp-1) var(--sp-4);gap:var(--sp-3);position:relative}
.ss-command-title{min-width:0}
.ss-command-title:has(.ss-crumbs)>h1{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.ss-command-title .ss-crumbs{font-size:var(--fs-sub);gap:var(--sp-2);min-height:44px;line-height:1.25}
.ss-command-title .ss-crumbs button{min-height:44px}
.ss-command-title .ss-crumbs b{color:var(--klar-ink);font-weight:var(--klar-fw-label)}
.ss-command-title h1{font-size:var(--fs-row);font-weight:var(--klar-fw-label)}
.ss-command-sort select{min-height:36px;height:36px;padding-block:var(--sp-2)}
.ss-browser-table{position:relative}
.ss-browser-table th{height:44px;padding-block:0}
.ss-browser-table td{padding-block:0}
.ss-links-nav .ss-zeile{position:relative;padding-block:0;min-height:40px}
.ss-links-nav .ss-zeile>span:not(.klapp){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ss-links-nav .ss-zeile.an{background:var(--klar-active);color:var(--klar-accent);font-weight:var(--klar-fw-label)}

.ss-links-nav .ss-zeile.ss-trail{color:var(--klar-ink)}
.ss-links-nav .ss-baum{margin-left:var(--sp-4);padding-left:var(--sp-2);border-left:var(--klar-line-width) solid transparent}
.ss-links-nav>.ss-baum{margin-left:var(--sp-3);padding-left:0;border-left:0}
.ss-links-nav .ss-baum:empty{display:none}
/* Same short top-left / bottom-right border accents as ez-menu-group. */
.ss-commandbar::before,.ss-commandbar::after,.ss-browser-frame::before,.ss-browser-frame::after{content:"";position:absolute;width:calc(var(--r-card) + var(--sp-3));height:calc(var(--r-card) + var(--sp-3));border:0 solid var(--menu-corner-color,var(--klar-accent));pointer-events:none;z-index:3}
.ss-commandbar::before,.ss-browser-frame::before{top:calc(-1 * var(--klar-line-width));left:calc(-1 * var(--klar-line-width));border-top-width:var(--klar-line-width);border-left-width:var(--klar-line-width);border-top-left-radius:var(--r-card)}
.ss-commandbar::after,.ss-browser-frame::after{bottom:calc(-1 * var(--klar-line-width));right:calc(-1 * var(--klar-line-width));border-bottom-width:var(--klar-line-width);border-right-width:var(--klar-line-width);border-bottom-right-radius:var(--r-card)}
@container(max-width:720px){
.ss-commandbar{padding:var(--sp-2) var(--sp-4) 48px;gap:var(--sp-1)}
.ss-command-normal{grid-template-rows:32px 44px}
.ss-command-title{height:32px}
.ss-command-title .ss-crumbs{min-height:32px}
.ss-command-title .ss-crumbs button{min-height:32px}
}
@media(pointer:coarse){.ss-links-nav .ss-zeile{min-height:44px}}
}

@layer screens {
.ss-tree-row{display:flex;align-items:center;min-width:0;border-radius:var(--r-field)}
.ss-tree-row>.ss-zeile{flex:1;min-width:0;width:auto}
.ss-tree-row:has(>.ss-zeile.an){background:var(--klar-active)}
.ss-links-nav .ss-tree-row>.ss-zeile.an{background:transparent}
.ss-tree-toggle{display:flex;align-items:center;justify-content:center;flex:none;width:32px;min-height:40px;color:var(--klar-sub);border-radius:var(--r-field)}
.ss-tree-toggle svg{width:var(--sp-5);height:var(--sp-5)}
.ss-tree-toggle[aria-expanded=true] svg{transform:rotate(90deg)}
.ss-tree-toggle:hover{color:var(--klar-accent);background:var(--klar-surface-subtle)}
.ss-tree-toggle:focus-visible{outline:2px solid var(--klar-accent);outline-offset:-2px}
@media(pointer:coarse){.ss-tree-toggle{width:44px;min-height:44px}}
}

@layer screens {
.ss-tree-toggle-slot{width:32px;flex:none}
.ss-links-nav .ss-tree-row{margin-block:var(--sp-1)}
.ss-links-nav>.ss-zeile{margin-block:var(--sp-1)}
.ss-links-nav .ss-tree-row:hover,.ss-links-nav>.ss-zeile:hover{background:var(--klar-surface-subtle)}
.ss-links-nav .ss-tree-row:has(>.ss-zeile.an){background:var(--klar-active)}
.ss-tree-row>.ss-zeile{padding-left:var(--sp-1)}
.ss-command-button,.ss-commandbar .ss-selected-count{height:36px;min-height:36px;padding-block:var(--sp-2)}
@media(pointer:coarse){.ss-tree-toggle-slot{width:44px}}
}

/* v94: one text size for every breadcrumb level; toolbar-matched hover. */
@layer vertraege {
.ss-crumbs,.ss-command-title .ss-crumbs,.ss-command-title>h1{font-size:var(--fs-sub);font-weight:400;line-height:1.25}
.ss-crumbs>button,.ss-crumbs>b{font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;display:inline-flex;align-items:center;min-width:0;height:36px;min-height:36px;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-field)}
.ss-command-title .ss-crumbs>button{height:36px;min-height:36px}
.ss-command-title .ss-crumbs>b{font-size:inherit;font-weight:inherit}
.ss-crumbs>button{transition:background-color var(--motion-state) var(--ease-standard)}
.ss-crumbs>button:hover,.ss-crumbs>button:focus-visible{background:var(--klar-active)}
@container(max-width:720px){.ss-command-normal{grid-template-rows:36px 44px}.ss-command-title:has(.ss-crumbs){height:36px}}
@media(prefers-reduced-motion:reduce){.ss-crumbs>button{transition:none}}
}

/* Dashboard: frame stays still; all files scroll inside its accent corners. */
@layer zustaende {
body[data-layout="klar"] .ss-start .ss-dashboard-group{padding:0}
.ss-start .ss-dashboard-files{border-radius:inherit;max-block-size:min(50dvh,calc(var(--sp-8)*10));overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:var(--klar-line) transparent}
.ss-start .ss-dashboard-files:focus-visible{outline:2px solid var(--klar-accent);outline-offset:-2px}
}