/* Uni-App Gruppe G: ruhiges Arbeitswerkzeug, Systemschriften (nichts von fremden Servern), hell und dunkel, Handy bis Desktop */
:root {
  --papier: #f4f5f2; --blatt: #ffffff; --tinte: #1d2328; --leise: #5d6870; --linie: #d9ddda; --chip: #eceeeb;
  --hz: #c4291e; --rlt: #1f5fd1; --san: #00808f; --akzent: #d4560f; --fokus: #1f5fd1; --gut: #2e7d32; --schlecht: #b3261e;
  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --kopf: 56px; --seite: 236px; --unten: 64px; --r: 8px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root { --papier: #15191c; --blatt: #1d2226; --tinte: #e8ecea; --leise: #9aa5ab; --linie: #2f373c; --chip: #252c31;
    --hz: #ff7a6b; --rlt: #7ab0ff; --san: #4fd0dc; --akzent: #ff9a5c; --fokus: #7ab0ff; color-scheme: dark; }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--papier); color: var(--tinte); font: 15px/1.5 var(--schrift); -webkit-text-size-adjust: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 1px solid var(--linie); background: var(--chip); border-radius: 6px; padding: 8px 14px; min-height: 40px; }
button:hover { border-color: var(--leise); }
button.haupt { background: var(--tinte); color: var(--papier); border-color: var(--tinte); font-weight: 600; }
button.akzent { background: var(--akzent); border-color: var(--akzent); color: #fff; font-weight: 600; }
button.icon { min-width: 40px; padding: 6px; background: transparent; border-color: transparent; font-size: 18px; }
button:disabled { opacity: .5; cursor: default; }
:focus-visible { outline: 2px solid var(--fokus); outline-offset: 2px; }
.leise { color: var(--leise); font-weight: 400; }
.nur-mobil { display: none; }
[hidden] { display: none !important; }

/* ---------- Anmeldung */
body.login { display: grid; place-items: center; padding: 24px 16px; }
.anmeldung { width: min(400px, 100%); }
#login { background: var(--blatt); border: 1px solid var(--linie); border-radius: 12px; padding: 28px 24px; display: grid; gap: 8px; }
#login h1 { font-size: 24px; margin: 6px 0 0; line-height: 1.2; }
#login p { margin: 0 0 10px; }
#login label { font-weight: 600; font-size: 14px; margin-top: 6px; }
#login input { border: 1px solid var(--linie); border-radius: 6px; padding: 11px 12px; background: var(--papier); font-size: 16px; }
#login button { margin-top: 12px; }
.fehler { color: var(--schlecht); min-height: 1.2em; margin: 0; }
.marke { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.punkt { width: 12px; height: 12px; border-radius: 3px; background: linear-gradient(135deg, var(--hz) 0 33%, var(--rlt) 33% 66%, var(--san) 66%); display: inline-block; }
.fuss { font-size: 13px; color: var(--leise); text-align: center; margin-top: 14px; }
.fuss a { color: var(--leise); }

/* ---------- App-Gerüst */
body.app { display: grid; grid-template-columns: var(--seite) minmax(0, 1fr); grid-template-rows: var(--kopf) minmax(0, 1fr); height: 100dvh; }
.leiste { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 16px; padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right));
  background: var(--blatt); border-bottom: 1px solid var(--linie); }
.leiste .marke { font-size: 17px; }
.suche { flex: 1; max-width: 460px; margin-left: auto; }
.suche input { width: 100%; border: 1px solid var(--linie); background: var(--papier); border-radius: 20px; padding: 8px 14px; font-size: 15px; }
nav.seite { background: var(--blatt); border-right: 1px solid var(--linie); padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; overflow: auto; }
nav.seite a { display: flex; gap: 10px; align-items: center; padding: 10px 12px; border-radius: 6px; text-decoration: none; font-weight: 500; }
nav.seite a i { font-style: normal; width: 18px; text-align: center; color: var(--leise); }
nav.seite a i.hz { color: var(--hz); } nav.seite a i.rlt { color: var(--rlt); } nav.seite a i.san { color: var(--san); }
nav.seite a.aktiv { background: var(--chip); font-weight: 700; }
nav.seite .abmelden { margin-top: auto; background: transparent; }
nav.seite .fuss { margin-top: 8px; display: block; }
nav.seite .fuss a { display: inline; padding: 0; }
.inhalt { overflow: auto; padding: 20px 24px 40px; padding-right: max(24px, env(safe-area-inset-right)); }
.inhalt:focus { outline: none; }
h2.titel { font-size: 22px; margin: 0 0 4px; }
.unter { color: var(--leise); margin: 0 0 18px; }

/* ---------- Übersicht */
.kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-bottom: 26px; }
.kachel { background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--r); padding: 16px; text-decoration: none; display: grid; gap: 6px; border-top: 4px solid var(--leise); }
.kachel.hz { border-top-color: var(--hz); } .kachel.rlt { border-top-color: var(--rlt); } .kachel.san { border-top-color: var(--san); } .kachel.plan { border-top-color: var(--akzent); }
.kachel b { font-size: 17px; } .kachel span { color: var(--leise); font-size: 14px; }
h3.abschnitt { font-size: 15px; text-transform: uppercase; letter-spacing: .06em; color: var(--leise); margin: 6px 0 10px; }

/* ---------- Dateiliste */
.pfadzeile { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; font-size: 14px; }
.pfadzeile a { text-decoration: none; color: var(--leise); } .pfadzeile a:last-child { color: var(--tinte); font-weight: 600; }
.werkzeuge { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.liste { background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--r); overflow: hidden; }
.zeile { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--linie); min-height: 56px; }
.zeile:first-child { border-top: 0; }
.zeile .typ { width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; font: 700 10px var(--mono); color: #fff; background: #6b7378; }
.typ.pdf { background: #c4291e; } .typ.docx, .typ.doc { background: #2b579a; } .typ.xlsx, .typ.xls { background: #217346; } .typ.pptx { background: #c43e1c; }
.typ.ordner { background: transparent; color: var(--leise); font-size: 22px; }
.typ.bild { background: #7a4fbf; } .typ.dwg, .typ.dxf, .typ.ifc { background: #8a6d00; }
.zeile .name { font-weight: 600; overflow-wrap: anywhere; text-decoration: none; display: block; }
.zeile .info { color: var(--leise); font-size: 13px; }
.zeile .knoepfe { display: flex; gap: 4px; }
.zeile .knoepfe button { min-height: 36px; padding: 6px 10px; font-size: 14px; }
.zeile.klickbar { cursor: pointer; } .zeile.klickbar:hover { background: var(--chip); }
.leer { padding: 28px 16px; text-align: center; color: var(--leise); }
.ablage { border: 2px dashed var(--linie); border-radius: var(--r); padding: 14px; text-align: center; color: var(--leise); margin-top: 14px; }
.ablage.drueber { border-color: var(--akzent); color: var(--akzent); background: color-mix(in srgb, var(--akzent) 8%, transparent); }
.fortschritt { height: 4px; background: var(--chip); border-radius: 2px; overflow: hidden; margin-top: 8px; }
.fortschritt i { display: block; height: 100%; width: 0; background: var(--akzent); transition: width .2s; }

/* ---------- Menü-Knopf je Datei */
.menue { position: fixed; z-index: 40; background: var(--blatt); border: 1px solid var(--linie); border-radius: 8px; box-shadow: 0 8px 28px #0003; padding: 6px; display: grid; min-width: 220px; }
.menue button { text-align: left; background: transparent; border: 0; border-radius: 6px; }
.menue button:hover { background: var(--chip); }
.menue button.rot { color: var(--schlecht); }

/* ---------- Vorschau */
.vorschau { position: fixed; inset: 0; z-index: 30; background: var(--papier); display: grid; grid-template-rows: auto minmax(0, 1fr); }
.vkopf { display: flex; gap: 10px; align-items: center; padding: 8px 12px; padding-top: max(8px, env(safe-area-inset-top)); background: var(--blatt); border-bottom: 1px solid var(--linie); }
.vkopf b { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vaktion { display: flex; gap: 6px; }
.vinhalt { overflow: auto; padding: 16px; -webkit-overflow-scrolling: touch; }
.vinhalt canvas.seite { display: block; margin: 0 auto 14px; max-width: 100%; height: auto !important; box-shadow: 0 2px 10px #0002; background: #fff; }
.vinhalt .word { background: #fff; color: #1d2328; max-width: 820px; margin: 0 auto; padding: 40px clamp(16px, 5vw, 56px); box-shadow: 0 2px 10px #0002; border-radius: 4px; }
.vinhalt .word img { max-width: 100%; height: auto; }
.vinhalt .word table { border-collapse: collapse; margin: 10px 0; font-size: 14px; } .vinhalt .word td, .vinhalt .word th { border: 1px solid #ccd; padding: 4px 8px; }
.vinhalt img.bild { max-width: 100%; display: block; margin: 0 auto; }
.blaetter { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }
.tabelle { overflow: auto; background: #fff; color: #1d2328; border-radius: 4px; }
.tabelle table { border-collapse: collapse; font-size: 13px; } .tabelle td, .tabelle th { border: 1px solid #dde; padding: 3px 7px; white-space: nowrap; }
.vinhalt pre { white-space: pre-wrap; background: var(--blatt); padding: 16px; border-radius: 6px; }

.meldung { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--tinte); color: var(--papier); padding: 10px 16px; border-radius: 8px; z-index: 50; opacity: 0; pointer-events: none; transition: opacity .2s; max-width: calc(100% - 32px); }
.meldung.an { opacity: 1; }

/* ---------- Pläne */
.plan { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 10px; height: calc(100dvh - var(--kopf) - 40px); }
.plan .zeilen { display: grid; gap: 6px; }
.plan .reihe { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.plan .reihe > span { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--leise); width: 70px; font-weight: 600; }
.plan .reihe button { min-height: 36px; padding: 5px 11px; font-size: 14px; }
.plan .reihe button[aria-pressed="true"] { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.plan .reihe button.edit[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: #fff; }
.plan .reihe button.gw i { width: 14px; height: 4px; border-radius: 2px; display: inline-block; margin-right: 6px; vertical-align: middle; }
.plankoerper { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 12px; min-height: 0; }
.buehne { position: relative; overflow: hidden; background: #fff; border: 1px solid var(--linie); border-radius: var(--r); touch-action: none; cursor: grab; min-height: 0; }
.buehne .ebene { position: absolute; left: 0; top: 0; transform-origin: 0 0; background: #fff; }
.buehne .ebene > img, .buehne .ebene > canvas, .buehne .ebene > svg { position: absolute; left: 0; top: 0; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
.buehne .drei { position: absolute; inset: 0; } .buehne .drei canvas { display: block; width: 100%; height: 100%; }
.blattleg { position: absolute; top: 40px; background: #fff; border-left: 3px solid #1d2328; padding-left: 36px; color: #1d2328; }
.blattleg h4 { font: 700 46px/1.1 var(--schrift); margin: 0 0 18px; }
.blattleg h5 { font: 600 30px/1.2 var(--schrift); text-transform: uppercase; letter-spacing: .05em; margin: 26px 0 8px; }
.blattleg img { display: block; }
.buehne .zoom { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; gap: 4px; z-index: 4; }
.buehne .zoom button { width: 42px; background: #fff; color: #1d2328; border-color: #c9cecb; font-size: 18px; }
.buehne .marke3 { position: absolute; left: 10px; bottom: 10px; font: 12px var(--mono); color: #1d2328; background: #ffffffd9; padding: 3px 7px; border-radius: 3px; z-index: 3; }
.buehne .hinweis { position: absolute; left: 10px; top: 10px; max-width: min(520px, 70%); font-size: 13px; color: #1d2328; background: #fff7d6; border: 1px solid #e6d58f; padding: 6px 9px; border-radius: 4px; z-index: 5; }
.buehne .schnitt { position: absolute; left: 10px; top: 10px; z-index: 5; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; background: #ffffffe6; border: 1px solid #c9cecb; border-radius: 6px; padding: 6px 8px; color: #1d2328; }
.buehne .schnitt button { min-height: 32px; padding: 3px 9px; background: #f1f3f1; color: #1d2328; border-color: #c9cecb; }
.buehne .schnitt button[aria-pressed="true"] { background: #1d2328; color: #fff; }
.buehne .schnitt input { width: min(220px, 40vw); accent-color: #d4560f; }
.buehne .laden { position: absolute; inset: 0; display: grid; place-items: center; color: #5d6870; pointer-events: none; }
.plaside { overflow: auto; display: grid; align-content: start; gap: 10px; }
.karte { background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--r); padding: 12px; }
.karte h4 { margin: 0 0 8px; font-size: 14px; text-transform: uppercase; letter-spacing: .06em; }
.karte .blatt { display: grid; grid-template-columns: 46px 1fr; gap: 8px; text-align: left; width: 100%; margin-bottom: 4px; font-size: 13px; }
.karte .blatt b { font-family: var(--mono); font-weight: 500; }
.karte textarea { width: 100%; border: 1px solid var(--linie); border-radius: 6px; padding: 8px; background: var(--papier); }
.karte .eintrag { display: grid; grid-template-columns: 1fr auto; gap: 6px; align-items: center; font-size: 13px; margin-top: 6px; }

/* ---------- Tablet */
@media (max-width: 1100px) { .plankoerper { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; } .plaside { max-height: 34vh; } }
/* ---------- Handy */
@media (max-width: 760px) {
  body.app { grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--kopf) minmax(0, 1fr) calc(var(--unten) + env(safe-area-inset-bottom)); }
  .nur-mobil { display: revert; }
  nav.unten { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--blatt); border-top: 1px solid var(--linie); padding-bottom: env(safe-area-inset-bottom); }
  nav.unten a { display: grid; place-items: center; text-decoration: none; font-size: 12px; color: var(--leise); padding-top: 6px; }
  nav.unten a i { font-style: normal; font-size: 20px; line-height: 1; }
  nav.unten a.aktiv { color: var(--tinte); font-weight: 700; }
  nav.seite { position: fixed; z-index: 35; top: var(--kopf); left: 0; bottom: 0; width: min(300px, 86vw); transform: translateX(-102%); transition: transform .2s; box-shadow: 8px 0 30px #0003; }
  nav.seite.offen { transform: none; }
  .leiste .marke span:last-child { display: none; }
  .inhalt { padding: 14px 16px 24px; }
  .zeile { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .zeile .knoepfe .breit { display: none; }
  .plan { height: calc(100dvh - var(--kopf) - var(--unten) - env(safe-area-inset-bottom) - 28px); }
  .plan .reihe > span { width: 100%; }
  .blattleg h4 { font-size: 40px; }
  .plan { height: auto; } .plankoerper { grid-template-rows: auto auto; } .buehne { height: 62vh; } .plaside { max-height: none; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.sperre { display: block; color: var(--akzent); font-size: 13px; font-weight: 600; }
.zeile.ziel, .pfadzeile a.ziel { outline: 2px dashed var(--akzent); outline-offset: -2px; background: color-mix(in srgb, var(--akzent) 10%, transparent); }
.zeile[draggable="true"] { cursor: grab; }
.anleitung { max-width: 640px; margin: 0 auto; background: var(--blatt); border: 1px solid var(--linie); border-radius: var(--r); padding: 20px; }
.anleitung h3 { margin-top: 0; } .anleitung li { margin-bottom: 8px; }
@media (max-width: 760px) { .werkzeuge button { flex: 1 1 auto; } }

/* ---------- Aufgabe der Woche (oben rechts, immer erreichbar) */
.aufknopf { background: var(--akzent); color: #fff; border-color: var(--akzent); font-weight: 600; border-radius: 20px; padding: 6px 14px; min-height: 36px; white-space: nowrap; }
.aufgabe { position: fixed; z-index: 25; top: calc(var(--kopf) + 10px); right: max(12px, env(safe-area-inset-right)); width: min(380px, calc(100vw - 24px));
  max-height: calc(100dvh - var(--kopf) - 30px); overflow: auto; background: var(--blatt); border: 1px solid var(--linie); border-top: 4px solid var(--akzent);
  border-radius: 10px; box-shadow: 0 10px 34px #0003; padding: 12px 14px; }
.aufgabe .akopf { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.aufgabe .akopf b { flex: 1; font-size: 15px; }
.aufgabe .akopf button, .aufgabe select { min-height: 34px; padding: 4px 10px; font-size: 14px; }
.aufgabe select { border: 1px solid var(--linie); border-radius: 6px; background: var(--papier); }
.aufgabe .reiter { display: flex; gap: 4px; margin-bottom: 8px; }
.aufgabe .reiter button[aria-pressed="true"] { background: var(--tinte); color: var(--papier); border-color: var(--tinte); }
.aufgabe .blattausschnitt { background: #fffef8; color: #1d2328; border: 1px solid #e3dfcf; border-radius: 4px; padding: 12px 14px; font: 14px/1.45 Georgia, "Times New Roman", serif; box-shadow: inset 0 0 0 1px #fff; }
.aufgabe .blattausschnitt h4 { font: 700 15px/1.3 Georgia, serif; margin: 0 0 6px; border-bottom: 1px solid #d9d4bf; padding-bottom: 4px; }
.aufgabe .blattausschnitt ul { margin: 0; padding-left: 18px; } .aufgabe .blattausschnitt li { margin-bottom: 6px; }
.aufgabe .blattausschnitt .pkt { font-weight: 700; color: #8a2a12; white-space: nowrap; }
.aufgabe .quelle { font-size: 12px; color: var(--leise); margin-top: 8px; }
.aufgabe img { width: 100%; height: auto; display: block; border: 1px solid var(--linie); border-radius: 4px; margin-bottom: 8px; background: #fff; }
@media (min-width: 1100px) { body.app.auf-an .inhalt { padding-right: 410px; } }
@media (max-width: 760px) { .aufknopf #aufkurz { display: none; } .aufgabe { left: 12px; right: 12px; width: auto; top: calc(var(--kopf) + 6px); max-height: calc(100dvh - var(--kopf) - var(--unten) - 20px); } }

/* Word-Seiten wie in Word, Excel mit Formatierung */
.docxhuelle { overflow-x: auto; }
.docxhuelle .docx-wrapper { background: transparent !important; padding: 0 0 20px !important; }
.docxhuelle .docx-wrapper > section.docx { box-shadow: 0 2px 12px #0003 !important; margin: 0 auto 18px !important; }
.tabelle.xl { background: #fff; color: #000; border: 1px solid var(--linie); max-height: calc(100dvh - 160px); }
.tabelle.xl table { border-collapse: collapse; table-layout: fixed; font: 14px/1.25 Calibri, Carlito, "Segoe UI", Arial, sans-serif; }
.tabelle.xl td { border: 1px solid #e1e1e1; padding: 2px 4px; overflow: hidden; white-space: nowrap; }
.tabelle.xl thead th { position: sticky; top: 0; background: #f0f0f0; color: #555; font-weight: 400; border: 1px solid #d4d4d4; z-index: 2; font-size: 12px; }
.tabelle.xl tbody th { position: sticky; left: 0; background: #f0f0f0; color: #555; font-weight: 400; border: 1px solid #d4d4d4; font-size: 12px; z-index: 1; }
.blaetter button[aria-pressed="true"] { background: #217346; color: #fff; border-color: #217346; }