/* =====================================================================
   GEMEINSAME SCHALE – Hofgut Klein Schneen
   =====================================================================
   Wird von beiden Apps eingebunden und von Caddy unter /gemeinsam/
   ausgeliefert. Hier stehen die Dinge, die BEIDE Programme betreffen:
   die zwei Hausfarben und der Knopf zum Wechseln zwischen ihnen.

   Warum hier und nicht je einmal in jeder App: sonst driften die beiden
   Seiten mit der Zeit auseinander. Wird das Blau nachjustiert, ändert es
   sich so in beiden Programmen im selben Moment.

   Nur Systemschriften – die Ackerschlagkartei ist eine Offline-PWA ohne
   CDN, eine Webfont würde dort im Feld nicht laden.
   ===================================================================== */
:root{
  /* Ackerschlaggrün – aus stil.css der Ackerschlagkartei */
  --hg-gruen:        #2f6b3a;
  --hg-gruen-dunkel: #234d2a;

  /* Buchhaltungsblau – aus app.css der Buchhaltung. Das ist zugleich
     die Farbe der Logo-Linien, also die eigentliche Hausfarbe.
     Bewusst NICHT das hellere --blau (#1a6fa8) der Ackerschlagkartei:
     das ist dort die Farbe für Hinweise und läse sich falsch. */
  --hg-blau:         #134c5e;
  --hg-blau-dunkel:  #0c3340;

  --hg-schnell: 120ms;
  --hg-mittel:  260ms;
  --hg-kurve:   cubic-bezier(.4,0,.2,1);
}

/* ===== Der Wechsel-Knopf ==============================================
   Zwei Ausprägungen, damit er sich in die jeweilige Umgebung einfügt,
   aber in beiden Programmen als dasselbe Element erkennbar bleibt. */

.hg-wechsel{
  --hg-ton:        var(--hg-blau);
  --hg-ton-dunkel: var(--hg-blau-dunkel);

  display:flex;
  align-items:center;
  gap:10px;
  box-sizing:border-box;
  background:var(--hg-ton);
  color:#fff;
  border:0;
  border-radius:8px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-weight:650;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--hg-schnell) var(--hg-kurve),
             transform var(--hg-schnell) var(--hg-kurve);
}
.hg-wechsel:hover{ background:var(--hg-ton-dunkel); color:#fff; }
.hg-wechsel:active{ transform:scale(.98); }
.hg-wechsel:focus-visible{ outline:2.5px solid var(--hg-ton); outline-offset:2px; }

/* Grüne Ausprägung – der Weg zurück zur Ackerschlagkartei */
.hg-wechsel--gruen{
  --hg-ton:        var(--hg-gruen);
  --hg-ton-dunkel: var(--hg-gruen-dunkel);
}

/* ===== Steuerwache ====================================================
   Der Weg in die Steuerwache – die Überwachung der ermäßigten
   Steuersätze im Shopify-Shop.

   Bewusst NICHT gefüllt wie die beiden anderen: das ist ein Nebenraum,
   kein drittes Hauptprogramm. Ein dritter satter Farbklecks in der
   Kopfleiste würde die beiden Programme optisch entwerten.

   Und: sichtbar nur für die Betriebsleitung. In die Steuerwache kommt
   ohnehin nur hinein, wer in der Ackerschlagkartei den Zugang "admin"
   hat – für alle anderen wäre der Knopf eine Sackgasse. Die Buchhaltung
   schreibt die Rolle bereits als data-role an den body, deshalb genügt
   hier CSS und im Original-Repo bleibt es bei der einen Platzhalter-
   Zeile. Steht die Rolle (noch) nicht fest, bleibt der Knopf verborgen –
   die vorsichtigere Richtung. */
.hg-wechsel--steuerwache{
  display:none;
  background:transparent;
  color:var(--hg-blau);
  border:1.5px solid rgba(19,76,94,.35);
  font-weight:600;
}
body[data-role="admin"] .hg-wechsel--steuerwache{ display:flex; }
.hg-wechsel--steuerwache:hover{
  background:rgba(19,76,94,.08);
  color:var(--hg-blau);
  border-color:var(--hg-blau);
}
.hg-wechsel--steuerwache:focus-visible{ outline-color:var(--hg-blau); }

/* Der Pfeil rutscht bei Berührung ein Stück in Laufrichtung */
.hg-wechsel__pfeil{
  margin-left:auto;
  flex-shrink:0;
  transition:transform var(--hg-mittel) var(--hg-kurve);
}
.hg-wechsel:hover .hg-wechsel__pfeil{ transform:translateX(3px); }

.hg-wechsel__mal{
  flex-shrink:0;
  width:20px;
  height:20px;
  display:block;
}

/* --- Im Klappmenü der Ackerschlagkartei (volle Breite) --- */
.hg-wechsel--menue{
  width:100%;
  padding:13px 16px;
  font-size:1rem;
  border-radius:0;
}


/* --- In der Kopfleiste der Buchhaltung (kompakt) --- */
.hg-wechsel--leiste{
  padding:7px 12px;
  font-size:.875rem;
  line-height:1.2;
}
.hg-wechsel--leiste .hg-wechsel__mal{ width:17px; height:17px; }

@media (prefers-reduced-motion:reduce){
  .hg-wechsel,
  .hg-wechsel__pfeil{ transition-duration:1ms; }
}