/* ═══════════════════════════════════════════════════════════════
   Enoxo Flow — v11 „Relief"
   Räumliche Ebene über dem bestehenden Design.

   Grundsätze, die diese Datei einhält:
   · Kein WebGL, kein three.js. Tiefe entsteht durch CSS-Perspektive,
     gestaffelte Schatten und Bewegung. Kostet ~9 KB statt ~600 KB.
   · Die Druckstrecke wird nicht angefasst. Jede Transformation ist
     in @media print zurückgesetzt — ein gekipptes Blatt im PDF wäre
     ein Totalschaden.
   · prefers-reduced-motion schaltet alles ab. Bewegung ist Zierde,
     nie Träger einer Information.
   · Farbwelt bleibt Sand/Petrol/Kupfer. Was sich ändert, ist der
     Raum, nicht die Marke.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Gestaffelte Schatten statt eines einzelnen weichen Flecks.
     Drei Ebenen lesen sich als Höhe, eine liest sich als Unschärfe. */
  --hoehe-1:
    0 1px 1px rgba(22,33,31,.045),
    0 2px 4px rgba(22,33,31,.045),
    0 6px 12px rgba(22,33,31,.035);
  --hoehe-2:
    0 1px 2px rgba(22,33,31,.05),
    0 4px 10px rgba(22,33,31,.055),
    0 14px 30px rgba(22,33,31,.06);
  --hoehe-3:
    0 2px 4px rgba(22,33,31,.06),
    0 10px 24px rgba(22,33,31,.08),
    0 30px 60px rgba(22,33,31,.09);
  --kante-hell: inset 0 1px 0 rgba(255,255,255,.75);
  --kante-dunkel: inset 0 -1px 0 rgba(22,33,31,.05);
  --schwung: cubic-bezier(.22,.61,.36,1);
  --schwung-weich: cubic-bezier(.34,1.36,.64,1);
}

/* ─────────────────────────────────────────────────────────────
   Bühne: Perspektive für alles darunter
   ───────────────────────────────────────────────────────────── */
/* Perspektive entfernt. Ohne translateZ hat sie keinen Nutzen mehr, und sie
   erzeugt einen 3D-Kontext, in dem Treffererkennung und position:fixed
   zusaetzlich Sonderwege gehen. */
.inhalt{ }

/* ─────────────────────────────────────────────────────────────
   Karten heben sich in den Raum
   ───────────────────────────────────────────────────────────── */
/* ⚠ WICHTIG — hier lag der Fehler, der ALLE Knoepfe lahmgelegt hat.
   Frueher: .karte{transform-style:preserve-3d} + .karte:hover{translateZ(14px)}
   unter .inhalt{perspective:1400px}. translateZ vergroessert das Element
   perspektivisch um 1 % — bei einer 900 px breiten Karte wandert die Kante
   4,5 px zur Seite. Steht der Zeiger dort, rutscht die Karte unter ihm weg,
   Hover geht verloren, die Karte springt zurueck, Hover kommt wieder:
   eine Schwingung mit Bildwiederholrate. Der Zeiger flackert sichtbar, und
   zwischen mousedown und mouseup aendert sich die Geometrie — der Browser
   wertet das NICHT als Klick. Kein JS-Fehler, deshalb in F12 unsichtbar.

   Regel daraus: an einem Container, der Bedienelemente enthaelt, wird bei
   :hover NIE die Geometrie veraendert. Tiefe nur ueber Schatten — der
   bewegt nichts und wird nicht getroffen. */
.karte{
  background:linear-gradient(180deg,var(--papier) 0%,var(--karte) 100%);
  border:1px solid var(--linie);
  box-shadow:var(--hoehe-1),var(--kante-hell),var(--kante-dunkel);
  transition:box-shadow .34s var(--schwung), border-color .34s var(--schwung);
}
.karte:hover{
  box-shadow:var(--hoehe-2),var(--kante-hell),var(--kante-dunkel);
}
.karte > header{
  position:relative;
  border-bottom:1px solid var(--linie2,rgba(221,212,193,.6));
}

/* Auftritt: gestaffelt, aus der Tiefe. Nur einmal, nicht bei jedem
   Neuzeichnen — deshalb hängt es an .ansicht.aktiv. */
.ansicht.aktiv > *{
  animation:auftritt .46s var(--schwung) backwards;
}
.ansicht.aktiv > *:nth-child(1){animation-delay:.02s}
.ansicht.aktiv > *:nth-child(2){animation-delay:.07s}
.ansicht.aktiv > *:nth-child(3){animation-delay:.12s}
.ansicht.aktiv > *:nth-child(4){animation-delay:.17s}
.ansicht.aktiv > *:nth-child(5){animation-delay:.21s}
.ansicht.aktiv > *:nth-child(n+6){animation-delay:.24s}

/* Nur noch Einblenden, keine Bewegung. Waehrend einer Bewegung liegen die
   Bedienelemente nicht dort, wo sie gleich sein werden — ein Klick in diesen
   0,7 Sekunden geht ins Leere. */
@keyframes auftritt{
  from{opacity:0}
  to  {opacity:1}
}

/* ─────────────────────────────────────────────────────────────
   Das Blatt: leicht angestellt, richtet sich beim Arbeiten auf
   ───────────────────────────────────────────────────────────── */
.blattspalte{ }
/* Das Blatt bleibt ruhig. Es enthaelt zwar keine Knoepfe, aber es steht neben
   der Werkzeugleiste (Design, Text kopieren, Zoom) — eine kippende Flaeche
   daneben zieht den Blick und verschiebt beim Aufrichten die Nachbarschaft. */
.blatt{
  box-shadow:var(--hoehe-3);
  transition:box-shadow .5s var(--schwung);
}
.blattspalte:hover .blatt{
  box-shadow:
    0 3px 6px rgba(22,33,31,.07),
    0 18px 40px rgba(22,33,31,.10),
    0 44px 88px rgba(22,33,31,.11);
}

/* ─────────────────────────────────────────────────────────────
   Navigation: Kategorien mit Tiefe
   ───────────────────────────────────────────────────────────── */
.sidenav{
  background:linear-gradient(180deg,var(--sand) 0%,var(--sand-tief) 100%);
  box-shadow:inset -1px 0 0 var(--linie), 2px 0 18px rgba(22,33,31,.05);
}
.navgruppe{ margin-bottom:18px }
.navgruppe h3{
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.13em;
  color:var(--text-zart);
  padding:0 14px 7px;
  display:flex;
  align-items:center;
  gap:8px;
}
/* Feiner Strich rechts neben der Überschrift trennt die Kategorien,
   ohne eine weitere Linie über die volle Breite zu ziehen. */
.navgruppe h3::after{
  content:"";
  flex:1;
  height:1px;
  background:linear-gradient(90deg,var(--linie),transparent);
}

.navknopf{
  position:relative;
  width:100%;
  text-align:left;
  background:transparent;
  border:0;
  padding:9px 14px;
  border-radius:7px;
  cursor:pointer;
  color:var(--text-schwach);
  transition:color .2s var(--schwung), background .2s var(--schwung);
}
.navknopf:hover{
  color:var(--text);
  background:rgba(255,253,248,.7);
}
/* Der aktive Punkt wirkt eingelassen statt aufgesetzt */
.navknopf[aria-current="true"]{
  color:var(--petrol);
  font-weight:600;
  background:var(--papier);
  box-shadow:var(--hoehe-1),var(--kante-hell);
}
.navknopf[aria-current="true"]::before{
  content:"";
  position:absolute;
  left:0; top:50%;
  width:3px; height:0;
  border-radius:0 3px 3px 0;
  background:var(--kupfer);
  transform:translateY(-50%);
  animation:markeAuf .3s var(--schwung) forwards;
}
@keyframes markeAuf{ to{ height:58% } }

.zaehler{
  float:right;
  min-width:20px;
  text-align:center;
  font-size:11px;
  padding:1px 6px;
  border-radius:20px;
  background:var(--sand-tief);
  color:var(--text-schwach);
  box-shadow:inset 0 1px 2px rgba(22,33,31,.08);
  transition:background .2s,color .2s;
}
.navknopf[aria-current="true"] .zaehler{
  background:var(--petrol);
  color:var(--sand);
  box-shadow:none;
}

/* ─────────────────────────────────────────────────────────────
   Kopfleiste
   ───────────────────────────────────────────────────────────── */
.topbar{
  background:linear-gradient(180deg,var(--papier),var(--karte));
  box-shadow:0 1px 0 var(--linie), 0 4px 16px rgba(22,33,31,.045);
  position:relative;
  z-index:5;
}

/* ─────────────────────────────────────────────────────────────
   Knöpfe: gedrückt fühlt sich gedrückt an
   ───────────────────────────────────────────────────────────── */
.knopf{
  box-shadow:var(--hoehe-1),var(--kante-hell);
  transition:transform .16s var(--schwung), box-shadow .16s var(--schwung),
             background .16s var(--schwung);
}
/* :not(:disabled) ist hier entscheidend. CSS-Hover und -Active greifen auch bei
   deaktivierten Knoepfen — der Knopf hob sich an und federte beim Klick, ohne
   irgendetwas zu tun. Genau daher der Eindruck "Knopf ohne Funktion". */
/* Kein translateY beim Hover: ein Knopf, der 1 px nach oben springt, verliert
   den Zeiger an seiner Unterkante und faengt an zu flackern.
   :active darf sich bewegen — da ist die Maustaste bereits gedrueckt und der
   Klick dem Element schon zugeordnet. */
.knopf:not(:disabled):hover{ box-shadow:var(--hoehe-2),var(--kante-hell); filter:brightness(1.03) }
.knopf:not(:disabled):active{ box-shadow:inset 0 2px 5px rgba(22,33,31,.16); filter:brightness(.97) }
.knopf:disabled{
  box-shadow:none;
  filter:grayscale(.5);
}
/* Bedienbar, aber noch unvollstaendig: sichtbar anders als "fertig". */
.knopf.unfertig{
  background:linear-gradient(180deg,#b9c3bd,#9fada6);
  border-color:#8d9c95;
  color:#fdfbf7;
}
.knopf.unfertig:hover{ background:linear-gradient(180deg,#aab5af,#8fa098) }
.knopf.wichtig{
  background:linear-gradient(180deg,var(--petrol-mittel),var(--petrol));
  border-color:var(--petrol-tief);
}
.knopf.wichtig:hover{ background:linear-gradient(180deg,#226155,var(--petrol-mittel)) }

/* ─────────────────────────────────────────────────────────────
   Übersicht: Kacheln als Relief, Säulen wachsen auf
   ───────────────────────────────────────────────────────────── */
.ue-kachel{
  background:linear-gradient(180deg,var(--papier),var(--karte));
  box-shadow:var(--hoehe-1),var(--kante-hell);
  transition:box-shadow .3s var(--schwung);
}
.ue-kachel:hover{
  box-shadow:var(--hoehe-2),var(--kante-hell);
}

.ue-saeule i{
  background:linear-gradient(180deg,var(--petrol-mittel),var(--petrol));
  box-shadow:0 1px 3px rgba(22,33,31,.18);
  transform-origin:50% 100%;
  animation:saeuleAuf .55s var(--schwung) backwards;
}
.ue-saeule:nth-child(1) i{animation-delay:.04s}
.ue-saeule:nth-child(2) i{animation-delay:.09s}
.ue-saeule:nth-child(3) i{animation-delay:.14s}
.ue-saeule:nth-child(4) i{animation-delay:.19s}
.ue-saeule:nth-child(5) i{animation-delay:.24s}
.ue-saeule:nth-child(6) i{animation-delay:.29s}
@keyframes saeuleAuf{ from{ transform:scaleY(0) } to{ transform:scaleY(1) } }

.ue-alter i{ animation:balkenAuf .6s var(--schwung) backwards; transform-origin:0 50% }
@keyframes balkenAuf{ from{ transform:scaleX(0) } to{ transform:scaleX(1) } }

/* Fahnen bekommen einen leichten Rand statt nur Fläche */
.fahne{ box-shadow:inset 0 0 0 1px rgba(22,33,31,.06) }

/* ─────────────────────────────────────────────────────────────
   Ablagefläche für E-Rechnungen
   ───────────────────────────────────────────────────────────── */
.ein-ablage{
  transition:border-color .2s, background .2s, box-shadow .26s;
}
.ein-ablage:hover{ box-shadow:var(--hoehe-1) }
/* .drueber gilt nur beim Ziehen einer Datei — dort gibt es keinen Klick,
   der verloren gehen koennte. */
.ein-ablage.drueber{ box-shadow:var(--hoehe-2) }

/* ─────────────────────────────────────────────────────────────
   Hilfe-Tafel gleitet herein
   ───────────────────────────────────────────────────────────── */
#hilfeTafel:not([hidden]){ animation:tafelRein .32s var(--schwung) }
@keyframes tafelRein{
  from{ opacity:0; transform:translateX(30px) }
  to  { opacity:1; transform:none }
}

/* ─────────────────────────────────────────────────────────────
   Druck: jede Räumlichkeit zurücknehmen.
   Ein gekipptes Blatt im PDF wäre unbrauchbar.
   ───────────────────────────────────────────────────────────── */
@media print{
  .inhalt,.blattspalte{ perspective:none!important }
  .blatt,.karte,.ue-kachel,.navknopf{
    transform:none!important;
    box-shadow:none!important;
    animation:none!important;
  }
  .blattspalte:hover .blatt{ transform:none!important }
}

/* ─────────────────────────────────────────────────────────────
   Wer Bewegung abgeschaltet hat, bekommt keine.
   Die Tiefe über Schatten bleibt — die stört niemanden.
   ───────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;
    animation-iteration-count:1!important;
    transition-duration:.001ms!important;
  }
  .blatt,.karte,.ue-kachel,.navknopf,.ein-ablage{ transform:none!important }
  .blattspalte:hover .blatt{ transform:none!important }
}

/* ─────────────────────────────────────────────────────────────
   Schmale Geräte: Perspektive raus.
   Auf einem 6-Zoll-Schirm wirkt gekippt nur schief, und die
   GPU-Last trifft genau die Geräte, die sie am wenigsten haben.
   ───────────────────────────────────────────────────────────── */
@media (max-width:820px){
  .inhalt,.blattspalte{ perspective:none }
  .blatt{ transform:none }
  .karte:hover,.ue-kachel:hover,.navknopf:hover{ transform:none }
}


/* ─────────────────────────────────────────────────────────────
   Fußreserve: Der Blattfuß liegt absolut am unteren Rand. Ohne
   reservierten Platz läuft der Fließtext hinein — im Grußblock
   lag der Name des Inhabers auf der Firmenzeile der Fußzeile.
   flow-fussreserve.js misst die tatsächliche Fußhöhe und setzt
   --fussreserve; die Werte hier sind der Notnagel, falls das
   Skript nicht läuft.
   ───────────────────────────────────────────────────────────── */
.blatt{ padding-bottom:var(--fussreserve,30mm) }

/* Bewusst KEIN deckender Hintergrund auf .blattfuss: Der würde
   überlappenden Text verstecken statt ihn zu zeigen. Auf einer
   gedruckten Rechnung fiele fehlender Text niemandem auf —
   sichtbar falsch ist besser als unsichtbar falsch. */
.grussblock,.unterschriften{ margin-bottom:4mm }

@media print{
  /* Die Druckregel in app.html setzt padding als Kurzform und
     überschreibt damit die Zeile oben. Hier wieder herstellen. */
  .blatt{ padding-bottom:var(--fussreserve,26mm)!important }
}


/* ─────────────────────────────────────────────────────────────
   Hinweis mit Handlungsmöglichkeit statt Sackgasse
   ───────────────────────────────────────────────────────────── */
.bs-hin{
  background:none;border:0;padding:0;margin-left:2px;
  color:var(--kupfer);font:inherit;font-weight:600;
  text-decoration:underline;cursor:pointer;
}
.bs-hin:hover{color:var(--kupfer-hell)}

/* ─────────────────────────────────────────────────────────────
   Hilfe-Tafel verdeckte auf breiten Schirmen das Blatt. Solange
   sie offen ist, rückt der Inhalt nach — statt darunter zu
   verschwinden.
   ───────────────────────────────────────────────────────────── */
body.hilfe-offen .inhalt{
  padding-right:min(420px,100vw);
  transition:padding-right .3s var(--schwung);
}
@media (max-width:900px){
  body.hilfe-offen .inhalt{ padding-right:0 }
}