:root{--bg:#f5f7fb;--surface:#fff;--surface-2:#eef2f7;--text:#172033;--muted:#667085;--border:#d8dee9;--primary:#155eef;--primary-hover:#004eeb;--danger:#b42318;--shadow:0 12px 30px rgba(16,24,40,.08);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:light}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--text);line-height:1.55}a{color:var(--primary);text-decoration:none}a:hover{text-decoration:underline}button,input,textarea,select{font:inherit}input,textarea,select{width:100%;padding:.75rem .85rem;border:1px solid var(--border);border-radius:.6rem;background:var(--surface);color:var(--text)}textarea{resize:vertical}label{display:grid;gap:.35rem;font-weight:650}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:2rem;padding:.8rem max(1.2rem,calc((100vw - 1180px)/2));background:rgba(255,255,255,.94);border-bottom:1px solid var(--border);backdrop-filter:blur(12px)}.brand{font-size:1.25rem;font-weight:850;color:var(--text)}.topbar nav{display:flex;gap:.25rem;flex:1}.topbar nav a{padding:.55rem .75rem;border-radius:.5rem;color:var(--muted);font-weight:650}.topbar nav a.active,.topbar nav a:hover{background:var(--surface-2);color:var(--text);text-decoration:none}.logout-form{margin:0}.container{max-width:1180px;margin:0 auto;padding:2.2rem 1.2rem 4rem}.container.narrow{max-width:820px}.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:1.5rem;margin-bottom:1.6rem}.page-header h1{margin:.15rem 0 .3rem;font-size:clamp(2rem,4vw,3rem);line-height:1.1}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.74rem;font-weight:800;color:var(--primary)}.lead{font-size:1.08rem;color:var(--muted);max-width:70ch}.actions{display:flex;gap:.6rem;flex-wrap:wrap;align-items:center}.button{display:inline-flex;align-items:center;justify-content:center;border:1px solid transparent;border-radius:.6rem;padding:.68rem 1rem;font-weight:750;cursor:pointer;text-decoration:none}.button:hover{text-decoration:none}.button.primary{background:var(--primary);color:white}.button.primary:hover{background:var(--primary-hover)}.button.secondary{background:var(--surface);border-color:var(--border);color:var(--text)}.button.ghost{background:transparent;color:var(--muted)}.button.danger{background:#fff0ee;color:var(--danger);border-color:#f7c5bf}.button.full{width:100%}.panel{background:var(--surface);border:1px solid var(--border);border-radius:.9rem;padding:1.25rem;box-shadow:var(--shadow)}.panel.compact{padding:1rem}.stack{display:grid;gap:1rem}.stack-lg{display:grid;gap:1.25rem;margin-top:1.5rem}.split{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start}.filters{display:flex;align-items:end;gap:.8rem;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:.8rem;margin-bottom:1.5rem}.filters .grow{flex:1}.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1rem}.manual-card{display:flex;gap:1rem;background:var(--surface);border:1px solid var(--border);border-radius:.9rem;padding:1.1rem;box-shadow:var(--shadow)}.manual-icon{width:3rem;height:3rem;display:grid;place-items:center;border-radius:.7rem;background:#e8f0ff;color:var(--primary);font-weight:850;font-size:.8rem;flex:0 0 auto}.manual-body h2{margin:.45rem 0 .4rem;font-size:1.15rem}.manual-body p{margin:0;color:var(--muted)}.meta-row{display:flex;justify-content:space-between;gap:.7rem;align-items:center;color:var(--muted);font-size:.82rem}.badge{display:inline-flex;padding:.2rem .55rem;border-radius:999px;background:var(--surface-2);font-size:.78rem;font-weight:750;color:var(--text)}.empty{text-align:center;padding:4rem 1rem;background:var(--surface);border:1px dashed var(--border);border-radius:1rem}.auth-shell{min-height:100vh;display:grid;place-items:center;padding:1.5rem;background:radial-gradient(circle at top,#dbe8ff,var(--bg) 45%)}.auth-card{width:min(440px,100%);padding:2rem;background:var(--surface);border:1px solid var(--border);border-radius:1rem;box-shadow:var(--shadow)}.auth-card h1{font-size:2rem;margin:.3rem 0}.separator{display:flex;align-items:center;gap:.8rem;color:var(--muted);margin:1.2rem 0}.separator::before,.separator::after{content:"";height:1px;background:var(--border);flex:1}.alert{padding:.8rem 1rem;border-radius:.65rem;margin:1rem 0}.alert.error{background:#fff0ee;color:var(--danger);border:1px solid #f7c5bf}.status{min-height:1.5rem;color:var(--muted)}.hint,.muted{color:var(--muted)}.editor-label{font-weight:650}.toolbar{display:flex;gap:.4rem;flex-wrap:wrap;padding:.55rem;background:var(--surface-2);border:1px solid var(--border);border-bottom:0;border-radius:.6rem .6rem 0 0}.toolbar button{background:var(--surface);border:1px solid var(--border);border-radius:.4rem;padding:.35rem .55rem;cursor:pointer}.rich-editor{min-height:420px;padding:1rem;background:var(--surface);border:1px solid var(--border);border-radius:0 0 .6rem .6rem;outline:none}.rich-editor:focus{border-color:var(--primary)}.monospace,.text-preview,code,pre{font-family:"SFMono-Regular",Consolas,"Liberation Mono",monospace}.document-content{background:var(--surface);border:1px solid var(--border);border-radius:.9rem;padding:clamp(1.2rem,4vw,3rem);box-shadow:var(--shadow);max-width:900px;margin:0 auto}.document-content.standalone{margin:2rem auto}.document-content h1,.document-content h2,.document-content h3{line-height:1.25}.document-content table{width:100%;border-collapse:collapse}.document-content th,.document-content td{border:1px solid var(--border);padding:.55rem}.document-content pre{overflow:auto;background:#101828;color:#f2f4f7;padding:1rem;border-radius:.55rem}.text-preview{white-space:pre-wrap;background:var(--surface);border:1px solid var(--border);border-radius:.9rem;padding:1.5rem;min-height:400px}.document-frame{width:100%;height:75vh;border:1px solid var(--border);border-radius:.9rem;background:white;margin-bottom:1.2rem}.meta-panel{display:flex;gap:1.2rem;flex-wrap:wrap;background:var(--surface);border:1px solid var(--border);padding:.8rem 1rem;border-radius:.7rem;margin-bottom:1.2rem}.inline-form{display:flex;gap:.8rem;align-items:center;flex-wrap:wrap}.inline-form input{width:auto;flex:1}.danger-zone{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border)}.callout{padding:1rem;border-left:4px solid var(--primary);background:#edf4ff;border-radius:.4rem}.callout-warning{border-color:#f79009;background:#fffaeb}.table-wrap{overflow:auto;background:var(--surface);border:1px solid var(--border);border-radius:.8rem}.table-wrap table{width:100%;border-collapse:collapse}.table-wrap th,.table-wrap td{text-align:left;padding:.75rem;border-bottom:1px solid var(--border);vertical-align:top}.footer{display:flex;justify-content:space-between;gap:1rem;padding:1.2rem max(1.2rem,calc((100vw - 1180px)/2));color:var(--muted);border-top:1px solid var(--border);font-size:.85rem}
@media(max-width:760px){.topbar{position:static;flex-wrap:wrap;gap:.5rem}.topbar nav{order:3;width:100%;overflow:auto}.page-header,.filters{flex-direction:column}.filters{align-items:stretch}.actions{width:100%}.actions .button{flex:1}.footer{flex-direction:column}.document-frame{height:65vh}}
@media(prefers-color-scheme:dark){:root{--bg:#101828;--surface:#182230;--surface-2:#253347;--text:#f2f4f7;--muted:#a4b0c1;--border:#344054;--primary:#84adff;--primary-hover:#a4cafe;--shadow:0 12px 30px rgba(0,0,0,.28)}.button.primary{color:#101828}.button.danger{background:#3a1d1a}.auth-shell{background:radial-gradient(circle at top,#1d3d74,var(--bg) 45%)}.manual-icon{background:#1c3d70}.alert.error{background:#3a1d1a}.document-content pre{background:#0b1220}.callout{background:#162b4d}.callout-warning{background:#3a2c13}}

/* Manuals 1.2: preview cards, robust long titles and category hierarchy */
.alert.success{background:#ecfdf3;color:#027a48;border:1px solid #abefc6}
.card-grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,310px),1fr));align-items:stretch}
.manual-card{display:grid;grid-template-rows:auto 1fr;gap:0;padding:0;min-width:0;overflow:hidden}
.manual-preview{position:relative;display:block;aspect-ratio:16/10;overflow:hidden;background:linear-gradient(145deg,#eef4ff,#e4eaf4);border-bottom:1px solid var(--border);color:var(--text)}
.manual-preview:hover{text-decoration:none}
.manual-preview img{display:block;width:100%;height:100%;object-fit:cover;object-position:top center;background:white;transition:transform .18s ease}
.manual-preview:hover img{transform:scale(1.015)}
.manual-format{position:absolute;top:.7rem;left:.7rem;padding:.28rem .52rem;border-radius:.45rem;background:rgba(255,255,255,.92);box-shadow:0 2px 8px rgba(16,24,40,.12);color:#155eef;font-size:.72rem;font-weight:850;letter-spacing:.04em}
.manual-text-preview{height:100%;padding:1.25rem 1.2rem 1rem;background:linear-gradient(155deg,var(--surface),var(--surface-2));overflow:hidden}
.manual-text-preview::after{content:"";position:absolute;inset:auto 0 0;height:28%;background:linear-gradient(transparent,var(--surface-2));pointer-events:none}
.manual-text-preview strong{display:block;margin:.45rem 0;font-size:1rem;line-height:1.3;overflow-wrap:anywhere}
.manual-text-preview p{margin:0;color:var(--muted);font-size:.84rem;line-height:1.45;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden}
.preview-kicker{text-transform:uppercase;letter-spacing:.1em;font-size:.68rem;font-weight:850;color:var(--primary)}
.manual-body{min-width:0;padding:1rem 1.1rem 1.15rem;overflow:hidden}
.manual-body h2{min-width:0;margin:.55rem 0 .35rem;line-height:1.25}
.manual-body h2 a{display:-webkit-box;max-width:100%;overflow:hidden;overflow-wrap:anywhere;word-break:break-word;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.manual-description{display:-webkit-box;overflow:hidden;overflow-wrap:anywhere;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.meta-row{min-width:0;flex-wrap:wrap;align-items:flex-start}
.meta-row .badge{max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.category-panel{margin-left:calc(min(var(--category-depth),3) * 1.25rem);border-left:4px solid color-mix(in srgb,var(--primary) 40%,var(--border))}
.category-heading{display:flex;justify-content:space-between;gap:1rem;align-items:flex-start;margin-bottom:1rem}
.category-heading h2{margin:.2rem 0 0;overflow-wrap:anywhere}
.category-path{margin:.25rem 0 0;overflow-wrap:anywhere}
.category-counts{display:flex;justify-content:flex-end;gap:.4rem;flex-wrap:wrap}
@media(max-width:760px){.card-grid{grid-template-columns:1fr}.manual-preview{aspect-ratio:16/9}.category-panel{margin-left:0}.category-heading{flex-direction:column}.category-counts{justify-content:flex-start}.meta-row .badge{max-width:100%}}
@media(prefers-color-scheme:dark){.alert.success{background:#143724;color:#75e0a7;border-color:#087443}.manual-format{background:rgba(24,34,48,.94);color:var(--primary)}}


/* Manuals 1.2.1: bounded document thumbnail hotfix */

/*
 * Die Vorschauzeile erhält eine feste Höhe. Das Dokumentbild wird absolut
 * innerhalb des Rahmens positioniert und kann den Grid-Track nicht mehr
 * anhand seiner intrinsischen Abmessungen vergrößern.
 */
.manual-card {
  display: grid;
  grid-template-rows: 230px minmax(0, 1fr);
  min-width: 0;
  overflow: hidden;
}

.manual-preview {
  position: relative;
  display: block;
  width: 100%;
  height: 230px;
  min-width: 0;
  min-height: 0;
  max-height: 230px;
  aspect-ratio: auto;
  overflow: hidden;
  background: linear-gradient(145deg, #eef4ff, #e4eaf4);
  border-bottom: 1px solid var(--border);
  contain: layout paint;
}

.manual-preview img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  padding: .65rem;
  object-fit: contain;
  object-position: top center;
  background: white;
}

.manual-preview:hover img {
  transform: none;
}

.manual-format {
  z-index: 2;
}

.manual-text-preview {
  position: absolute;
  inset: 0;
  height: auto;
}

.manual-body {
  min-width: 0;
  min-height: 125px;
  overflow: hidden;
}

@media (max-width: 760px) {
  .manual-card {
    grid-template-rows: 205px minmax(0, 1fr);
  }

  .manual-preview {
    height: 205px;
    max-height: 205px;
    aspect-ratio: auto;
  }
}



/* Manuals 1.2.2: metadata above document preview */

/*
 * Die HTML-Reihenfolge bleibt unverändert. Die beiden direkten Grid-Elemente
 * werden visuell so angeordnet, dass Titel und Metadaten über der Vorschau
 * erscheinen.
 */
.manual-card {
  grid-template-rows: auto 230px;
}

.manual-body {
  grid-row: 1;
  min-height: auto;
  border-bottom: 1px solid var(--border);
}

.manual-preview {
  grid-row: 2;
  height: 230px;
  max-height: 230px;
  border-top: 0;
  border-bottom: 0;
}

@media (max-width: 760px) {
  .manual-card {
    grid-template-rows: auto 205px;
  }

  .manual-preview {
    height: 205px;
    max-height: 205px;
  }
}



/* Manuals 1.2.3: centered title above preview, metadata below */

/*
 * .manual-body wird selbst nicht mehr als sichtbare Grid-Zeile behandelt.
 * Seine Bestandteile werden dadurch direkt im Karten-Grid angeordnet:
 *
 * 1. Titel
 * 2. Beschreibung
 * 3. Dokumentvorschau
 * 4. Kategorie und Datum
 */
.manual-card {
  grid-template-rows: auto auto 230px auto;
}

.manual-body {
  display: contents;
}

/* Titel oberhalb der Vorschau */
.manual-body h2 {
  grid-row: 1;
  margin: 0;
  padding: 1rem 1.1rem .45rem;
  text-align: center;
  line-height: 1.3;
}

.manual-body h2 a {
  margin-inline: auto;
  text-align: center;
  -webkit-line-clamp: 3;
}

/* Beschreibung ebenfalls zentriert */
.manual-description {
  grid-row: 2;
  margin: 0;
  padding: 0 1.1rem 1rem;
  text-align: center;
  color: var(--muted);
  -webkit-line-clamp: 3;
}

/* Vorschau unter Titel und Beschreibung */
.manual-preview {
  grid-row: 3;
  height: 230px;
  max-height: 230px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Kategorie und Datum bleiben unter der Vorschau */
.meta-row {
  grid-row: 4;
  margin: 0;
  padding: .8rem 1.1rem 1rem;
  justify-content: space-between;
  align-items: center;
  flex-wrap: nowrap;
  background: var(--surface);
}

.meta-row .badge {
  max-width: 65%;
}

@media (max-width: 760px) {
  .manual-card {
    grid-template-rows: auto auto 205px auto;
  }

  .manual-preview {
    height: 205px;
    max-height: 205px;
  }

  .manual-body h2 {
    padding-inline: .9rem;
  }

  .manual-description {
    padding-inline: .9rem;
  }

  .meta-row {
    padding-inline: .9rem;
    gap: .5rem;
    font-size: .78rem;
  }
}



/* Manuals 1.2.4: file format in lower metadata row */

/*
 * Untere Metazeile:
 * Kategorie links, Dateiformat exakt mittig, Datum rechts.
 *
 * minmax(0, 1fr) verhindert, dass lange Kategorien oder Datumswerte
 * die mittlere Spalte verdrängen beziehungsweise überlappen.
 */
.meta-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 100%;
  min-width: 0;
  gap: .65rem;
}

/* Lange Kategorien bleiben innerhalb ihrer Grid-Spalte. */
.meta-row .manual-category {
  display: block;
  justify-self: start;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dateiformat nicht mehr als Overlay positionieren. */
.meta-row .manual-format-meta {
  position: static;
  inset: auto;
  justify-self: center;
  min-width: 3.1rem;
  padding: .24rem .55rem;
  text-align: center;
  white-space: nowrap;
  border: 1px solid color-mix(in srgb, var(--primary) 25%, var(--border));
  box-shadow: none;
  background: color-mix(in srgb, var(--primary) 8%, var(--surface));
}

/* Datum bleibt rechtsbündig und wird nicht umgebrochen. */
.meta-row .manual-date {
  justify-self: end;
  min-width: 0;
  text-align: right;
  white-space: nowrap;
}

/*
 * Bei sehr schmalen Karten bleibt Kategorie + Dateiformat in Zeile 1.
 * Das Datum wird darunter zentriert. Dadurch kann nichts überlappen.
 */
@media (max-width: 560px) {
  .meta-row {
    grid-template-columns: minmax(0, 1fr) auto;
    row-gap: .45rem;
  }

  .meta-row .manual-category {
    grid-column: 1;
    grid-row: 1;
  }

  .meta-row .manual-format-meta {
    grid-column: 2;
    grid-row: 1;
  }

  .meta-row .manual-date {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: center;
    text-align: center;
  }
}