/* Zero Office — was nur diesen Dienst betrifft.
   Das Gerüst (Navigation links, Fenster, Listen) steht in zero-app.css, die
   Grundlage in zero-ui.css. Beide werden vorher geladen; Quelle für beide ist
   /var/www/shared/css/. */

/* --- Ablage ----------------------------------------------------------------- */

.dokumentzeichen{display:grid;place-items:center;width:36px;height:36px;flex:none;
                 border-radius:10px;font-size:17px;
                 color:var(--accent);background:#15241f;border:1px solid #26473c}
.dokumentzeichen.tabelle{color:#8fc7ff;background:#132033;border-color:#25405f}
.leistenfuss{margin-top:auto;padding-top:12px}
.leistenfuss .rechtsleiste{margin:0;text-align:left;font-size:10.5px;line-height:1.8}

/* --- Bearbeiter --------------------------------------------------------------- */

.bearbeiter{display:grid;grid-template-rows:auto auto 1fr;gap:12px;min-height:0}
.bearbeiterkopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.dokumenttitel{flex:1;min-width:160px;font-size:17px;font-weight:700;padding:9px 12px}
.stand{color:var(--muted);font-size:11.5px;white-space:nowrap}

.werkzeugleiste{display:flex;align-items:center;gap:4px;flex-wrap:wrap;padding:7px 9px;
                border:1px solid var(--line);border-radius:11px;background:#0e1620;
                position:sticky;top:0;z-index:10}
.werkzeug{min-width:34px;height:32px;padding:0 8px;border-radius:8px;font-size:13px;
          font-weight:700;color:var(--muted);background:transparent;border:1px solid transparent}
.werkzeug:hover{background:#1a2331;color:#dce5ef}
.werkzeugleiste .trenner{width:1px;height:20px;background:#222d3f;margin:0 4px}

/* --- Schreibfeld --------------------------------------------------------------- */

.blattflaeche{overflow:auto;border:1px solid var(--line);border-radius:12px;background:var(--panel)}
.seitenflaeche{display:flex;justify-content:center;background:#0a1017}
.schreibfeld{min-height:60dvh;width:100%;padding:clamp(20px,4vw,52px);outline:none;
             background:var(--panel);
             font-size:15.5px;line-height:1.75;color:#dfe6f0;max-width:210mm;margin:0 auto;
             box-shadow:0 0 0 1px var(--line)}
.schreibfeld:focus{outline:none}
.schreibfeld h1{font-size:1.9em;margin:.7em 0 .4em}
.schreibfeld h2{font-size:1.45em;margin:.8em 0 .35em}
.schreibfeld h3{font-size:1.2em;margin:.8em 0 .3em}
.schreibfeld p{margin:0 0 .85em}
.schreibfeld ul,.schreibfeld ol{margin:0 0 .85em;padding-left:1.6em}
.schreibfeld li{margin:.2em 0}
.schreibfeld blockquote{margin:0 0 .85em;padding:.4em 0 .4em 1em;
                        border-left:3px solid #2c5a4a;color:#b0bac8}
.schreibfeld pre{margin:0 0 .85em;padding:12px 14px;border-radius:9px;background:#0b1219;
                 font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
                 overflow-x:auto}
.schreibfeld a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
.schreibfeld img{max-width:100%;height:auto;border-radius:8px;margin:.4em 0}
.schreibfeld th{background:#111a25;font-weight:800;text-align:left}
.zeile-flach{display:flex;align-items:center;gap:8px;margin:2px 0 4px;
             color:var(--muted);font-size:12.5px}
.zeile-flach input[type=checkbox]{width:auto;margin-right:4px;vertical-align:-1px}
.schreibfeld hr{border:0;border-top:1px solid #222d3f;margin:1.4em 0}
.schreibfeld table{border-collapse:collapse;margin:0 0 .85em;width:100%}
.schreibfeld td,.schreibfeld th{border:1px solid #222d3f;padding:6px 9px}

/* --- Rechenblatt ---------------------------------------------------------------- */

.zellmarke{min-width:56px;padding:6px 9px;border-radius:7px;font-size:12.5px;font-weight:800;
           font-variant-numeric:tabular-nums;color:var(--accent);background:#15241f;
           border:1px solid #26473c;text-align:center}
.formelzeile{flex:1;min-width:140px;padding:7px 10px;font-size:13px;
             font-family:ui-monospace,SFMono-Regular,Menlo,monospace}

.gitterflaeche{max-height:68dvh;overflow:auto;position:relative}
.gitterflaeche:focus{outline:none}
.gitterflaeche:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}

/* Das Gitter ist EIN Raster, keine Reihe von Zeilen: `display:contents` löst
   die Zeilencontainer auf, damit Kopfzeile und Zellen dieselben Spalten teilen
   und beim Rollen zusammenbleiben.
   Spaltenbreiten und Zeilenhöhen setzt die Oberfläche unmittelbar am Raster,
   denn sie lassen sich ziehen und gehören zum Blatt. Die Angaben hier sind
   nur der Rückfall, falls das Skript noch nicht gelaufen ist. */
.gitter{display:grid;grid-template-columns:44px repeat(40, 96px);grid-auto-rows:28px;
        font-size:12.5px;width:max-content;user-select:none}
.gitterzeile{display:contents}
.spaltenkopf,.zeilenkopf,.ecke{display:grid;place-items:center;background:#0e1620;
                               color:var(--muted);font-weight:700;font-size:11px;
                               border-right:1px solid #1a2331;border-bottom:1px solid #1a2331;
                               position:sticky;z-index:2}
.spaltenkopf{top:0;cursor:pointer}
.zeilenkopf{left:0;z-index:3;cursor:pointer}
.ecke{top:0;left:0;z-index:4;cursor:pointer}
.spaltenkopf.betroffen,.zeilenkopf.betroffen{background:#17293a;color:#cfe0f0}
.spaltenkopf:hover,.zeilenkopf:hover,.ecke:hover{background:#152232}

/* Die Anfasser zum Ziehen der Breite und Höhe. Sie liegen auf der Trennlinie
   und sind bewusst breiter als sie aussehen — sonst trifft die Maus nicht. */
/* Der Griff bleibt INNERHALB seines Kopfes. Ragte er über die Kante hinaus,
   läge er unter dem nächsten Spaltenkopf — beide sind gleich hoch gestapelt,
   und der spätere gewinnt. Die Maus träfe ihn dann nie. */
.griff{position:absolute;right:0;top:0;width:6px;height:100%;cursor:col-resize;z-index:6}
.griff:hover{background:var(--accent);opacity:.55}
.griff.waagerecht{right:0;bottom:0;top:auto;left:0;width:100%;height:6px;cursor:row-resize}

.gitterhuelle{position:relative;width:max-content}

.zellfeld{display:flex;align-items:center;min-width:0;overflow:hidden;position:relative;
          padding:0 7px;font-size:12.5px;white-space:nowrap;text-overflow:ellipsis;
          border-right:1px solid #182031;border-bottom:1px solid #182031;
          background:var(--panel);color:#dce5ef;cursor:cell}
.zellfeld.zahl{justify-content:flex-end;font-variant-numeric:tabular-nums}
.zellfeld.fehler{color:#ff9aa5}
.zellfeld.gewaehlt{background:#101d19;z-index:5}
.zellfeld.fixiert{background:#0f1720}
.zellfeld.fixiert.gewaehlt{background:#101d19}

/* Umbruch und senkrechte Ausrichtung. Ohne `align-items` säße mehrzeiliger
   Text mittig und liefe oben und unten aus der Zelle. */
.zellfeld.umbruch{white-space:pre-wrap;overflow-wrap:anywhere;text-overflow:clip;
                  align-items:flex-start;padding-top:4px;line-height:1.3}
.zellfeld.senk-oben{align-items:flex-start;padding-top:3px}
.zellfeld.senk-unten{align-items:flex-end;padding-bottom:3px}
.zellfeld.verbunden{justify-content:center}
.zellfeld.verbunden.zahl{justify-content:flex-end}
.zellfeld.verbunden.links{justify-content:flex-start}
.zellfeld.verbunden.rechts{justify-content:flex-end}

/* Der Rahmen um die Auswahl wird aus vier Kanten zusammengesetzt — so braucht
   es keine zweite, überlagerte Ebene, die beim Rollen nachgeführt werden muss. */
.zellfeld.randOben{box-shadow:inset 0 1px 0 0 var(--accent)}
.zellfeld.randUnten{box-shadow:inset 0 -1px 0 0 var(--accent)}
.zellfeld.randLinks{box-shadow:inset 1px 0 0 0 var(--accent)}
.zellfeld.randRechts{box-shadow:inset -1px 0 0 0 var(--accent)}
.zellfeld.randOben.randUnten{box-shadow:inset 0 1px 0 0 var(--accent),inset 0 -1px 0 0 var(--accent)}
.zellfeld.randOben.randLinks{box-shadow:inset 0 1px 0 0 var(--accent),inset 1px 0 0 0 var(--accent)}
.zellfeld.randOben.randRechts{box-shadow:inset 0 1px 0 0 var(--accent),inset -1px 0 0 0 var(--accent)}
.zellfeld.randUnten.randLinks{box-shadow:inset 0 -1px 0 0 var(--accent),inset 1px 0 0 0 var(--accent)}
.zellfeld.randUnten.randRechts{box-shadow:inset 0 -1px 0 0 var(--accent),inset -1px 0 0 0 var(--accent)}
.zellfeld.randOben.randUnten.randLinks{box-shadow:inset 0 1px 0 0 var(--accent),
  inset 0 -1px 0 0 var(--accent),inset 1px 0 0 0 var(--accent)}
.zellfeld.randOben.randUnten.randRechts{box-shadow:inset 0 1px 0 0 var(--accent),
  inset 0 -1px 0 0 var(--accent),inset -1px 0 0 0 var(--accent)}
.zellfeld.randOben.randLinks.randRechts{box-shadow:inset 0 1px 0 0 var(--accent),
  inset 1px 0 0 0 var(--accent),inset -1px 0 0 0 var(--accent)}
.zellfeld.randUnten.randLinks.randRechts{box-shadow:inset 0 -1px 0 0 var(--accent),
  inset 1px 0 0 0 var(--accent),inset -1px 0 0 0 var(--accent)}
.zellfeld.randOben.randUnten.randLinks.randRechts{box-shadow:inset 0 0 0 1px var(--accent)}
.zellfeld.vorschau{background:#16242f;outline:1px dashed #3d5f78;outline-offset:-1px}

/* Der Ausfüllgriff sitzt in der Ecke rechts unten der Auswahl. */
.fuellgriff{position:absolute;right:-3px;bottom:-3px;width:7px;height:7px;
            background:var(--accent);border:1px solid #06110e;border-radius:1px;
            cursor:crosshair;z-index:7}

.zelleditor{position:absolute;inset:0;width:100%;height:100%;padding:0 6px;user-select:text;
            font-size:12.5px;border:0;border-radius:0;background:#0b1219;color:#eaf1f8;
            outline:2px solid var(--accent);outline-offset:-2px;z-index:8}

/* --- Zeichenebene ------------------------------------------------------------------
   Liegt über dem Gitter und lässt die Maus durch. Nur die Formen selbst fangen
   sie ab — und beim Zeichnen die ganze Ebene. */

.formenebene{position:absolute;left:0;top:0;pointer-events:none;z-index:9}
.formenebene.zeichnend{pointer-events:auto;cursor:crosshair}
.formenebene .form{pointer-events:auto;cursor:move}
.formenebene .formgriff{pointer-events:auto;cursor:nwse-resize}
.formenebene .formentwurf{pointer-events:none}

/* --- Menü der rechten Maustaste --------------------------------------------------- */

.zellmenue{position:absolute;z-index:30;min-width:200px;padding:5px;
           background:#101923;border:1px solid #26344a;border-radius:10px;
           box-shadow:0 14px 34px rgba(0,0,0,.5);display:flex;flex-direction:column}
.zellmenue[hidden]{display:none}
.menuepunkt{padding:7px 10px;font-size:12.5px;text-align:left;color:#dce5ef;
            background:none;border:0;border-radius:7px;width:100%}
.menuepunkt:hover{background:#1a2634}
.menuetrenner{height:1px;margin:4px 6px;background:#26344a}

/* --- Zellformate ---------------------------------------------------------------- */

.abwurf{outline:2px dashed var(--accent);outline-offset:8px;border-radius:12px}

.zellfeld.fett{font-weight:800}
.zellfeld.kursiv{font-style:italic}
.zellfeld.unterstrichen{text-decoration:underline;text-underline-offset:2px}
.zellfeld.links{justify-content:flex-start;text-align:left}
.zellfeld.mitte{justify-content:center;text-align:center}
.zellfeld.rechts{justify-content:flex-end;text-align:right}
.zellfeld.farbe-gruen{color:#8ff0cd}
.zellfeld.farbe-blau{color:#8fc7ff}
.zellfeld.farbe-gelb{color:#ffd8a8}
.zellfeld.farbe-rot{color:#ff9aa5}
.zellfeld.farbe-lila{color:#c9b0ff}
.zellfeld.farbe-grau{color:#8b97a8}
.zellfeld.farbe-weiss{color:#ffffff}
.zellfeld.grund-gruen{background:#14342a}
.zellfeld.grund-blau{background:#13273a}
.zellfeld.grund-gelb{background:#37301a}
.zellfeld.grund-rot{background:#3a1f24}
.zellfeld.grund-lila{background:#2a2140}
.zellfeld.grund-grau{background:#242c36}
.zellfeld.grund-dunkel{background:#080c12}
.zellfeld.markiert{background:#152232}
.werkzeugwahl{width:auto;min-width:96px;height:32px;padding:0 8px;font-size:12px;
              border-radius:8px}

/* --- Blattregister ---------------------------------------------------------------- */

.blattbereich{display:grid;grid-template-rows:1fr auto auto;gap:10px;min-height:0;
              position:relative}
.register{display:flex;gap:4px;flex-wrap:wrap;align-items:center;
          padding-top:2px;border-top:1px solid var(--line)}
.registerknopf{padding:7px 13px;border-radius:8px 8px 0 0;font-size:12.5px;font-weight:700;
               color:var(--muted);background:#0e1620;border:1px solid var(--line);
               border-bottom:0;max-width:190px;overflow:hidden;text-overflow:ellipsis;
               white-space:nowrap}
.registerknopf:hover{color:#dce5ef;background:#131c28}
.registerknopf[aria-pressed=true]{color:#06110e;background:var(--accent);border-color:var(--accent)}
.registerknopf.neu,.registerknopf.weg{padding:7px 11px;border-radius:8px;border-bottom:1px solid var(--line)}
.registerknopf.weg{color:#ff9aa5}

/* --- Diagramme -------------------------------------------------------------------- */

.diagramme{display:grid;gap:12px}
.diagramm{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:12px;
          background:var(--panel)}
.diagramm figcaption{display:flex;align-items:center;justify-content:space-between;gap:10px;
                     margin-bottom:8px;color:var(--muted);font-size:11.5px;font-weight:700}
.diagramm svg{width:100%;height:auto;max-height:260px;display:block}
.diagramm .legende{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.legendenstueck{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;color:var(--muted)}
.legendenstueck i{display:inline-block;width:11px;height:11px;border-radius:3px}

/* --- Funktionsverzeichnis --------------------------------------------------------- */

.funktionsgitter{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:6px;
                 margin-top:10px}
.funktion{padding:5px 9px;border-radius:7px;font-size:12px;background:#0e1620;
          border:1px solid var(--line);color:#8ff0cd}
.merkmal{display:inline-block;padding:1px 7px;border-radius:999px;font-size:10.5px;
         font-weight:700;background:#15241f;border:1px solid #26473c;color:#8ff0cd}

/* --- Beim Drucken -----------------------------------------------------------------
   Nur das Blatt kommt aufs Papier — die Leiste und die Werkzeuge nicht. */

@media print{
  .seitenleiste,.kopf,.werkzeugleiste,.bearbeiterkopf,.meldung{display:none !important}
  .shell{display:block}
  .inhalt{padding:0;width:auto}
  .blattflaeche{border:0;overflow:visible;max-height:none;background:#fff}
  /* Beim Drucken tragen die eingestellten Ränder die Seite - deshalb hier
     keine zusätzlichen Seitenränder, sonst käme beides zusammen. */
  @page{margin:0}
  .schreibfeld{color:#000;background:#fff;box-shadow:none;max-width:none}
  .seitenflaeche{background:#fff}
  .zellfeld{color:#000;background:#fff;border-color:#ccc}
  body{background:#fff}
}

/* --- Auf dem Telefon ---------------------------------------------------------------- */

@media(max-width:900px){
  .bearbeiterkopf{gap:6px}
  .dokumenttitel{order:-1;flex-basis:100%;font-size:16px}
  .stand{display:none}
  /* Auf dem Telefon wären 40 mm Rand die halbe Anzeige. Hier zählt Lesbarkeit
     mehr als Papiertreue - deshalb überstimmt das die eingestellten Ränder. */
  .schreibfeld{min-height:52dvh;padding:16px !important;max-width:none !important}
  .werkzeug{min-width:32px;height:34px}
  .gitterflaeche{max-height:52dvh}
  .registerknopf{max-width:120px;font-size:11.5px;padding:6px 10px}
  .werkzeugwahl{min-width:76px}
  /* Schmalere Spalten, damit mehr als drei ins Bild passen. */
}