/* BergSolutions Cockpit — Stil (v1). Tokens laut SPEC, kein Nextcloud-Look. */

:root{
  --tief:#0F4C5C;
  --mittel:#4E8098;
  --hell:#9BC4BC;
  --stein:#9BB0AC;
  --grund:#EDF2F2;
  --licht:#FBFDFD;
  --haar:rgba(15,76,92,.12);
  --tinte:#16333B;
  --neben:#5C7A80;
  --warn:#9C3B2A;
  --radius:10px;
  --schrift:-apple-system,BlinkMacSystemFont,"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--grund);color:var(--tinte);font-family:var(--schrift);font-size:16px;line-height:1.45;min-height:100vh}
[hidden]{display:none !important}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--mittel);outline-offset:2px;border-radius:4px}

/* Kopfzeile */
.kopf{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:.65rem 1.25rem;background:var(--licht);border-bottom:1px solid var(--haar)}
.marke{display:flex;align-items:center;gap:.55rem}
.marke-berge{width:34px;height:17px;display:block}
.marke-text{font-size:.95rem}
.marke-text strong{font-weight:650}
.kopf-rechts{display:flex;align-items:center;gap:.8rem}
.kopf-benutzer{font-family:var(--mono);font-size:.8rem;color:var(--neben)}

/* Statuszeile (eingebettet, dezent) */
.status{max-width:1100px;margin:0 auto;padding:.4rem 1.25rem 0;min-height:1.6rem;font-size:.85rem;color:var(--neben)}

/* Knoepfe */
.knopf-haupt{background:var(--tief);color:#fff;border:1px solid var(--tief);border-radius:8px;padding:.5rem 1.05rem;cursor:pointer}
.knopf-haupt:hover{background:#0C3E4B}
.knopf-neben{background:var(--licht);color:var(--tief);border:1px solid var(--haar);border-radius:8px;padding:.5rem 1.05rem;cursor:pointer}
.knopf-neben:hover{border-color:rgba(15,76,92,.3)}

/* Ansicht 1: Anmeldung */
.anmeldung{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - 9rem);padding:2rem 1.25rem;text-align:center}
.logo{width:min(300px,72vw);height:auto;display:block}
.anmeldung h1{font-size:1.35rem;font-weight:650;margin:1.3rem 0 .3rem}
.anmeldung .knopf-haupt{margin-top:1.1rem;padding:.65rem 1.5rem}
.hinweis{font-size:.85rem;color:var(--neben);margin:.9rem 0 0}

/* Logo-Aufbau: Grundlinie zieht sich (scaleX), Gipfel wachsen gestaffelt (scaleY) */
.logo-linie{transform:scaleX(0);transform-box:view-box;transform-origin:120px 120px;animation:logo-linie .7s cubic-bezier(.16,1,.3,1) forwards}
.logo-gipfel{transform:scaleY(0);transform-box:view-box;transform-origin:120px 118px;animation:logo-gipfel 1s cubic-bezier(.16,1,.3,1) forwards}
.logo-gipfel-1{animation-delay:.45s}
.logo-gipfel-2{animation-delay:.6s}
.logo-gipfel-3{animation-delay:.75s}
@keyframes logo-linie{to{transform:scaleX(1)}}
@keyframes logo-gipfel{to{transform:scaleY(1)}}

/* Inhalt */
.inhalt{max-width:1100px;margin:0 auto;padding:1rem 1.25rem 3rem}

/* Werkzeuge + Brotkrumen */
.werkzeuge{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;margin:.4rem 0 1.1rem}
.brotkrumen{display:flex;align-items:center;flex-wrap:wrap;gap:.1rem;font-size:.95rem}
.krume{background:none;border:none;padding:.15rem .3rem;color:var(--mittel);cursor:pointer;border-radius:4px}
.krume:hover{color:var(--tief)}
.krume-aktuell{color:var(--tief);font-weight:650;cursor:default}
.krume-trenner{color:var(--stein);padding:0 .1rem}
.werkzeuge-knoepfe{display:flex;gap:.6rem}

/* Ablage (Drop-Flaeche) */
.ablage{border-radius:var(--radius)}
.ablage-aktiv{outline:2px dashed var(--mittel);outline-offset:6px;background:rgba(155,196,188,.14)}

/* Ansicht 2: Basislager — Ordnerkarten */
.karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:.9rem;margin-bottom:1.1rem}
.karte{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:.7rem;background:var(--licht);border:1px solid var(--haar);border-radius:var(--radius);padding:1rem 1rem .9rem;cursor:pointer;text-align:left;min-height:104px}
.karte:hover{border-color:rgba(15,76,92,.32)}
.karte-berge{width:52px;height:26px}
.karte-name{font-weight:600;word-break:break-word}
.karte .schloss{position:absolute;top:.75rem;right:.75rem}
.schloss{width:15px;height:15px;flex:none}

/* Ansicht 3: Ordnerliste */
.tafel{background:var(--licht);border:1px solid var(--haar);border-radius:var(--radius);overflow-x:auto}
table{width:100%;border-collapse:collapse}
th{font-size:.72rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--neben);text-align:left;padding:.6rem .95rem;border-bottom:1px solid var(--haar)}
td{padding:.55rem .95rem;border-top:1px solid var(--haar);vertical-align:middle}
tbody tr:first-child td{border-top:none}
tbody tr:hover{background:rgba(155,196,188,.12)}
th.spalte-groesse{text-align:right}
.zelle-groesse{text-align:right;font-family:var(--mono);font-size:.8rem;color:var(--neben);white-space:nowrap}
.zelle-geaendert{font-family:var(--mono);font-size:.8rem;color:var(--neben);white-space:nowrap}
.eintrag{display:inline-flex;align-items:center;gap:.55rem;background:none;border:none;padding:.1rem .15rem;cursor:pointer;text-align:left;border-radius:4px}
.zeile-ordner .eintrag-name{font-weight:600}
.zeilen-symbol{width:20px;height:16px;flex:none}
.eintrag-name{word-break:break-word}
.zelle-name .schloss{vertical-align:-2px;margin-left:.4rem}

/* Leerer Ordner */
.leer{background:var(--licht);border:1px dashed rgba(15,76,92,.25);border-radius:var(--radius);padding:2.6rem 1rem;text-align:center;color:var(--neben)}

/* Ansicht 4: Entsperr-Modal */
dialog{border:1px solid var(--haar);border-radius:12px;background:var(--licht);color:var(--tinte);padding:1.3rem 1.4rem;width:min(380px,calc(100vw - 2rem));box-shadow:0 18px 50px rgba(15,76,92,.18)}
dialog::backdrop{background:rgba(15,76,92,.35)}
dialog h2{margin:0 0 .3rem;font-size:1.05rem}
.modal-projekt{margin:.1rem 0 .6rem;font-weight:600}
.modal-hinweis{margin:0 0 .9rem;font-size:.85rem;color:var(--neben)}
dialog label{display:block;font-size:.85rem;margin-bottom:.3rem}
dialog input[type="password"]{width:100%;padding:.55rem .7rem;border:1px solid rgba(15,76,92,.25);border-radius:8px;background:#fff;font:inherit;color:var(--tinte)}
.modal-fehler{min-height:1.2rem;margin:.5rem 0 .2rem;font-size:.85rem;color:var(--warn)}
.modal-knoepfe{display:flex;justify-content:flex-end;gap:.6rem;margin-top:.5rem}

/* Responsiv: Karten 3 → 2 → 1 Spalten, Tabelle schrumpft */
@media (max-width:760px){
  .karten{grid-template-columns:repeat(2,1fr)}
  .spalte-geaendert,.zelle-geaendert{display:none}
}
@media (max-width:460px){
  .karten{grid-template-columns:1fr}
  .werkzeuge{flex-direction:column;align-items:stretch}
  .werkzeuge-knoepfe button{flex:1}
  .kopf{padding:.6rem .9rem}
  .status{padding:.4rem .9rem 0}
  .inhalt{padding:1rem .9rem 3rem}
}

/* Bewegung reduzieren: Endzustand sofort zeigen */
@media (prefers-reduced-motion:reduce){
  .logo-linie,.logo-gipfel{animation:none;transform:none}
  *{transition:none !important}
}