





.dok-list,.pipe-doc-list{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}

.dok-item{display:flex;align-items:center;gap:var(--sp-2);min-width:0;color:var(--gh-text)}
.dok-item[draggable=true]{cursor:grab}



.dok-main{
flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--sp-3);
margin:0;padding:var(--kachel-pad);min-height:var(--kachel-min-h);
border:1px solid transparent;border-radius:var(--r-lg);background:transparent;
color:var(--gh-text);font:inherit;text-align:left;
}


button.dok-main{border-color:var(--kachel-border);background:var(--gh-card);box-shadow:var(--karten-schatten);cursor:pointer}
button.dok-main:active{background:var(--kachel-hover)}



:is(.dok-folder, .pipe-doc-block) .dok-item{gap:0;padding-inline-end:var(--sp-1);border-radius:var(--r-lg);background:var(--dokument-kachel)}
:is(.dok-folder, .pipe-doc-block) button.dok-main{background:transparent;box-shadow:none;border-color:transparent}
:is(.dok-folder, .pipe-doc-block) .dok-item > :is(button.dok-main, .dok-quick, .pipe-doc-menu-btn):active{background:var(--dokument-kachel-hover)}
.dok-main:focus-visible{outline:2px solid var(--gh-accent);outline-offset:-2px}



.dok-item:is(:where(:root:not([data-wp-objekt-zieht],[data-wp-markierung-ruht])) :is([data-wp-markiert~="anker"],[data-wp-markiert~="offen"],[data-wp-markiert~="gewaehlt"],[data-wp-markiert~="ziel"]),[data-wp-ausgewaehlt]){
border-radius:var(--r-md);background:var(--markierung-flaeche);box-shadow:inset var(--markierung-balken) 0 0 var(--gh-accent)}
.dok-item:is(:where(:root:not([data-wp-objekt-zieht],[data-wp-markierung-ruht])) :is([data-wp-markiert~="anker"],[data-wp-markiert~="offen"],[data-wp-markiert~="gewaehlt"],[data-wp-markiert~="ziel"]),[data-wp-ausgewaehlt]) > button.dok-main{
border-color:transparent;background:transparent;box-shadow:none}

.dok-icon{display:flex;flex-shrink:0;}
.dok-icon svg{width:var(--ico-lg);height:var(--ico-lg)}
.dok-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:var(--sp-1)}

.dok-name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);min-width:0;font-size:var(--t-text);font-weight:600;color:var(--gh-text);hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.dok-meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);font-size:var(--t-neben);color:var(--gh-muted);overflow-wrap:anywhere}
.dok-meta .is-warn{color:var(--farbe-offen-text-weich)}
.dok-nr{white-space:nowrap}

.dok-status,.dok-badge{flex-shrink:0;font-weight:600}



.dok-quick,.pipe-doc-menu-btn{
flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;
min-width:var(--feld-h);min-height:var(--feld-h);padding:0 var(--sp-2);
border:0;border-radius:var(--r-md);background:transparent;
color:var(--gh-accent);font:inherit;font-size:var(--fs-md);line-height:1;cursor:pointer;
}
:is(.dok-quick, .pipe-doc-menu-btn) svg{width:var(--ico);height:var(--ico)}

.dok-quick-wort{display:none}
.dok-quick:active,.pipe-doc-menu-btn:active{background:var(--kachel-hover)}
.dok-quick:focus-visible,.pipe-doc-menu-btn:focus-visible{outline:2px solid var(--gh-accent);outline-offset:-2px}


.dok-item > button.dok-quick:disabled{background:transparent;color:var(--gh-disabled-fg);cursor:not-allowed}
.dok-item > .wp-auswahl-feld{flex-shrink:0}


.dok-bild{flex:0 0 auto;display:grid;place-items:center;width:calc(var(--feld-h) * 1.2);aspect-ratio:4/3;overflow:hidden;
border-radius:var(--r-sm);background:var(--surface-3);color:var(--symbol-info)}
.dok-bild > img{display:block;width:100%;height:100%;object-fit:cover}
.dok-bild > .wp-i{width:var(--ico);height:var(--ico)}
.dok-balken{display:block;flex:none;width:100%;max-width:16rem;height:var(--sp-1);margin-top:var(--sp-1);border-radius:var(--r-pill);overflow:hidden;
background:var(--surface-3)}
.dok-balken > span{display:block;height:100%;background:var(--gh-accent)}









:is(.dok-folder, .pipe-doc-block, .dok-sammel){--dok-rinne:calc(var(--sp-2) + var(--sp-3));--dok-symbol:var(--ico-lg)}
:is(.dok-folder, .pipe-doc-block) .dok-item{container:dok-kachel / inline-size;padding:0 0 0 calc(var(--dok-rinne) - 1px);border-radius:var(--r-md)}
:is(.dok-folder, .pipe-doc-block) .dok-item > .wp-zieh-griff{width:var(--dok-rinne)}
:is(.dok-folder, .pipe-doc-block) .dok-item > .dok-main{align-items:flex-start;gap:var(--sp-3);min-height:0;padding:calc(var(--sp-2) - 1px) var(--sp-2) calc(var(--sp-2) - 1px) 0}
:is(.dok-folder, .pipe-doc-block) .dok-icon{width:var(--dok-symbol);justify-content:center}
:is(.dok-folder, .pipe-doc-block) .dok-info{gap:2px}
:is(.dok-folder, .pipe-doc-block) .dok-name{flex-wrap:nowrap;font-size:var(--fs-md);font-weight:500;line-height:var(--dok-symbol)}
:is(.dok-folder, .pipe-doc-block) .dok-name > span:first-child{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.dok-folder, .pipe-doc-block) .dok-name > .wp-chip{flex:none}
:is(.dok-folder, .pipe-doc-block) .dok-meta{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.dok-folder, .pipe-doc-block) .dok-meta > span + span::before{content:"\00B7";content:"\00B7" / "";margin-inline:var(--sp-1)}
:is(.dok-folder, .pipe-doc-block) .dok-item > .dok-quick{align-self:center;gap:var(--sp-1);height:var(--feld-h);min-width:var(--feld-h);min-height:var(--feld-h);margin:0 var(--sp-2) 0 0;padding:0 var(--sp-3);
background:var(--bedien-bg);font-size:var(--t-neben);font-weight:600;white-space:nowrap}
:is(.dok-folder, .pipe-doc-block) .dok-quick-wort{display:inline}
:is(.dok-folder, .pipe-doc-block) .dok-item > .pipe-doc-menu-btn{align-self:center;width:var(--feld-h);height:var(--feld-h);min-width:var(--feld-h);min-height:var(--feld-h);padding:0;color:var(--symbol-bedien)}
@container dok-kachel (max-width:559px){
:is(.dok-folder, .pipe-doc-block) .dok-info{flex-direction:row;flex-wrap:wrap;align-items:center;column-gap:var(--sp-2)}
:is(.dok-folder, .pipe-doc-block) .dok-name{display:contents}
:is(.dok-folder, .pipe-doc-block) .dok-name > span:first-child{flex:1 0 100%;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;
white-space:normal;line-height:1.25}

:is(.dok-folder, .pipe-doc-block) .dok-name > .wp-chip{min-height:0;height:auto;padding-block:0}
:is(.dok-folder, .pipe-doc-block) :is(.dok-meta, .dok-name > .wp-chip){line-height:calc(var(--t-neben) * 1.25)}
:is(.dok-folder, .pipe-doc-block) .dok-meta{flex:1 1 0}
:is(.dok-folder, .pipe-doc-block) .dok-item > .dok-quick{width:var(--feld-h);padding:0}
:is(.dok-folder, .pipe-doc-block) .dok-quick-wort{display:none}
}








.dok-wrap{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.dok-wrap:has(> .wp-akte-kopf){gap:0;padding:var(--gruppe-pad);border-radius:var(--r-lg);background:var(--gruppe-bg);box-shadow:var(--karten-schatten)}



.wp-akte-kopf{container:ablage-kopf / inline-size;display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);min-height:var(--feld-h)}
.dok-wrap > .wp-akte-kopf{margin:0 calc(-1 * var(--sp-3));padding:0 var(--sp-3) var(--sp-2);border-bottom:var(--rand-haar) solid var(--gh-border-subtle)}
.wp-akte-kopf > *{flex:0 0 auto}
.wp-akte-kopf-titel{display:flex;align-items:center;gap:var(--sp-2);flex:1 1 auto;min-width:0;margin:0;
font-size:var(--t-text);font-weight:600;color:var(--gh-text);white-space:nowrap}
.wp-akte-kopf-titel > span:not(.wp-akte-kopf-symbol){min-width:0;overflow:hidden;text-overflow:ellipsis}
.wp-akte-kopf-symbol{display:flex;flex-shrink:0}
.wp-akte-kopf-symbol svg{width:var(--ico);height:var(--ico)}
.wp-akte-kopf-titel > .wp-akte-kopf-zahl{flex-shrink:0;font-weight:400;color:var(--gh-muted)}
.wp-akte-kopf-gruppe{display:flex;gap:var(--sp-2)}
.wp-akte-kopf > .wp-akte-menue,.dok-kopfleiste > .wp-akte-menue{width:var(--feld-h);height:var(--feld-h);border-radius:var(--r-md);color:var(--symbol-bedien)}


:is(.wp-akte-kopf, .dok-kopfleiste) > :is(.wp-akte-menue, .wp-icon-btn){--symbolknopf:var(--feld-h)}
:is(.wp-akte-kopf-gruppe, .dok-kopfleiste) > .wp-akte-knopf{height:var(--feld-h);min-height:var(--feld-h)}

.wp-akte-knopf{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-1);min-height:var(--feld-h);
padding:0 var(--sp-3);border:0;border-radius:var(--r-md);background:var(--bedien-bg);color:var(--gh-accent);
font:inherit;font-size:var(--t-neben);font-weight:600;white-space:nowrap;cursor:pointer}
.wp-akte-knopf svg{width:var(--ico);height:var(--ico);flex-shrink:0}
.wp-akte-knopf > span{min-width:0;overflow:hidden;text-overflow:ellipsis}
@container ablage-kopf (max-width:599px){
.wp-akte-kopf-gruppe{order:1;flex:1 0 100%;display:grid;grid-template-columns:1fr 1fr}
.wp-akte-kopf-gruppe > .wp-akte-knopf{min-width:0;padding-inline:var(--sp-2)}
}
.dok-wrap > .wp-ablage-liste{padding:0 var(--sp-3)}
.dok-wrap:has(> .wp-akte-kopf) > .wp-ablage-liste:not(:empty){padding:var(--sp-2) 0 0}
.dok-folder{--dok-kopf-h:var(--tap);--dok-innen:var(--sp-3);
margin:0;padding:0;border:0;border-radius:var(--r-xl);background:var(--gruppe-bg);overflow:hidden}


.dok-folder--abschnitt{border-radius:0;background:transparent;overflow:visible}
.dok-wrap > .dok-folder--abschnitt{--dok-kopf-h:calc(var(--feld-h) + var(--sp-2));--dok-innen:0px}
.dok-wrap > .dok-folder--abschnitt + .dok-folder--abschnitt{border-top:var(--rand-haar) solid var(--gh-border-subtle)}
.dok-wrap > .dok-folder--abschnitt > .dok-folder-head{padding-block:var(--sp-1)}
.dok-wrap > .dok-folder--abschnitt > .dok-folder-body{padding-bottom:var(--sp-2)}



.dok-folder-head{
display:flex;align-items:center;flex-wrap:nowrap;gap:0;
min-height:var(--dok-kopf-h);padding:var(--sp-2) var(--dok-innen, var(--sp-3));
list-style:none;cursor:pointer;user-select:none;color:var(--gh-text);
}




.dok-folder > .dok-folder-head{position:relative;padding-inline-end:calc(var(--dok-innen) + var(--dok-kopf-n, 0) * (var(--feld-h) + var(--sp-2)))}
.dok-folder-head::-webkit-details-marker{display:none}

:is(summary.dok-folder-head, .dok-sammel > summary)::before{
content:"";flex:0 0 auto;width:var(--sp-2);height:var(--sp-2);box-sizing:border-box;
margin:0 calc(var(--dok-rinne) - var(--sp-1) - var(--sp-2)) 0 var(--sp-1);
border-right:2px solid var(--gh-muted);border-bottom:2px solid var(--gh-muted);
transform:rotate(-45deg);transition:transform var(--dauer-kurz);
}
:is(.dok-folder[open] > .dok-folder-head, .dok-sammel[open] > summary)::before{transform:rotate(45deg)}


.dok-sammel{border-top:var(--rand-haar) solid var(--gh-border-subtle)}
.dok-sammel > summary{display:flex;align-items:center;min-height:var(--dok-kopf-h, var(--tap));padding:var(--sp-2) var(--dok-innen, var(--sp-3));
list-style:none;cursor:pointer;user-select:none;color:var(--gh-accent)}
.dok-sammel > summary::-webkit-details-marker{display:none}
.dok-sammel > summary:focus-visible{outline:2px solid var(--gh-accent);outline-offset:-2px}
.dok-folder-symbol{display:flex;flex-shrink:0;justify-content:center;width:var(--dok-symbol, var(--ico-lg));margin-right:var(--sp-3)}
.dok-folder-symbol svg{width:var(--ico);height:var(--ico)}
.dok-folder-title{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--t-text);font-weight:600}
.dok-folder-count{flex-shrink:0;margin-left:var(--sp-2);font-size:var(--t-text);font-weight:400;font-variant-numeric:tabular-nums;color:var(--gh-muted)}
.dok-folder-count.ist-null{display:none}



.dok-folder-head > :where(:not(.dok-folder-symbol, .dok-folder-title, .dok-folder-count)){margin-left:var(--sp-2)}
.dok-folder-count + *{margin-left:auto}



.dok-kopfleiste{container:ablage-kopf / inline-size;position:relative;display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-2);
height:var(--dok-kopf-h);margin-top:calc(-1 * var(--dok-kopf-h));padding-inline-end:var(--dok-innen, var(--sp-3));pointer-events:none}
.dok-kopfleiste > *{flex:0 0 auto;pointer-events:auto}
.dok-kopfleiste > .wp-icon-btn{width:var(--feld-h);height:var(--feld-h)}
.dok-folder-body{display:flex;flex-direction:column;gap:var(--sp-2);padding:0 var(--dok-innen) var(--sp-3)}
.dok-entwurf-gruppe{display:flex;flex-direction:column;gap:var(--sp-2)}


.dok-gruppen-titel{padding-left:calc(var(--dok-rinne) + var(--dok-symbol) + var(--sp-3));
font-size:var(--t-neben);font-weight:600;color:var(--gh-muted)}
.dok-empty{padding:var(--sp-1) 0 var(--sp-1) calc(var(--dok-rinne) + var(--dok-symbol) + var(--sp-3));font-size:var(--t-neben);color:var(--gh-muted)}

.dok-folder-body > .wp-statuszeile{padding-left:calc(var(--dok-rinne) + (var(--dok-symbol) - var(--ico)) / 2);
gap:calc(var(--sp-3) + (var(--dok-symbol) - var(--ico)) / 2)}




.wp-ablage{
display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2) var(--sp-3);
min-height:var(--tap);padding:var(--sp-3);
position:relative;border:var(--rand-haar) solid var(--feld-rand);border-radius:var(--r-lg);
background:var(--gh-card);color:var(--gh-text);font-size:var(--t-text);cursor:pointer;
}
.wp-ablage:focus-visible{outline:2px solid var(--gh-accent);outline-offset:2px}

.wp-ablage::after{content:"";position:absolute;inset:calc(-1 * var(--rand-haar));border-radius:inherit;pointer-events:none;z-index:6;opacity:0;
box-shadow:inset 0 0 0 var(--ablage-kante) var(--gh-accent);background:var(--ablage-aktiv)}
.wp-ablage.ist-ablage-aktiv::after{opacity:1}
@media (forced-colors:active){.wp-ablage.ist-ablage-aktiv::after{outline:var(--ablage-kante) solid Highlight;outline-offset:calc(-1 * var(--ablage-kante))}}
.wp-ablage-symbol{display:flex;}
.wp-ablage-symbol svg{width:var(--ico-lg);height:var(--ico-lg)}


.wp-ablage:is(.wp-ablage--knopf,.wp-ablage--ordner){flex:0 0 auto;flex-wrap:nowrap;gap:var(--sp-1);min-height:var(--feld-h);
padding:0 var(--sp-3);border:0;border-radius:var(--r-md);background:var(--bedien-bg);color:var(--gh-accent);
font-size:var(--t-neben);font-weight:600;white-space:nowrap}
.wp-ablage:is(.wp-ablage--knopf,.wp-ablage--ordner) .wp-ablage-symbol svg{width:var(--ico);height:var(--ico)}
.wp-ablage--knopf .wp-ablage-text{flex:0 0 auto}
.wp-ablage.wp-ablage--ordner{width:var(--feld-h);padding:0;justify-content:center;background:transparent;color:var(--symbol-bedien)}

@container ablage-kopf (max-width:479px){
:is(.wp-ablage--knopf,.wp-akte-hochladen){width:var(--feld-h);padding:0}

:is(.wp-akte-kopf, .dok-kopfleiste) > .wp-akte-hochladen{min-width:var(--feld-h)}
:is(.wp-ablage--knopf .wp-ablage-text,.wp-akte-hochladen > span){display:none}
}
.wp-ablage-text{display:flex;flex-direction:column;gap:var(--sp-1);flex:1 1 12em;min-width:0}
.wp-ablage-text small{font-size:var(--t-neben);color:var(--gh-muted)}
.wp-ablage-liste{display:flex;flex-direction:column;gap:var(--sp-1);flex:1 1 100%;min-width:0;cursor:default}
.wp-ablage-liste:empty{display:none}
.wp-ablage-datei{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-1) var(--sp-2);font-size:var(--t-neben)}
.wp-ablage-name{flex:1 1 10em;min-width:0;overflow-wrap:anywhere;color:var(--gh-text)}
.wp-ablage-grund{flex:1 1 100%;color:var(--farbe-gefahr-text)}

@media (hover:hover){
.dok-item:not([data-wp-markiert]):not([data-wp-ausgewaehlt]) > button.dok-main:hover{background:var(--kachel-hover)}
.dok-quick:hover,.pipe-doc-menu-btn:hover{background:var(--kachel-hover)}
:is(.dok-folder, .pipe-doc-block) .dok-item > :is(.dok-quick, .pipe-doc-menu-btn):hover,
:is(.dok-folder, .pipe-doc-block) .dok-item:not([data-wp-markiert]):not([data-wp-ausgewaehlt]) > button.dok-main:hover{background:var(--dokument-kachel-hover)}
summary.dok-folder-head:hover,.wp-ablage:hover,.wp-akte-knopf:hover{background:var(--kachel-hover)}
}
