/* =====================================================================
   GINY · BUTTON-STANDARD  ("Konzept A · kompakt eckig")
   QUELLE DER WAHRHEIT für alle Buttons in Giny. Beschlossen 26.07.2026.

   GLOBAL ANPASSEN = EINE ZAHL ÄNDERN:
     --gb-h  ...... Höhe aller Buttons (Standard 28px)
   Alles andere (Innenabstand, Schriftgröße, Radius) hängt daran bzw. steht
   direkt darunter. Keine Button-Maße mehr in Modul-Dateien definieren!

   Regeln:
   - Beschriftung in NORMALER Stärke (nicht fett), Satzform, Verb zuerst.
   - Pro Ansicht genau EINE gefüllte Hauptaktion (.gb--primary), Rest neutral/ghost.
   - Löschen immer .gb--danger (bei Icon zusätzlich .gb--icon + aria-label).
   Doku: docs/BUTTONS.md
   ===================================================================== */

:root{
  --gb-h:28px;              /* <<< der eine Regler */
  --gb-h-sm:24px;
  --gb-h-lg:34px;
  --gb-px:13px;             /* Innenabstand links/rechts */
  --gb-fs:12px;             /* Schriftgröße */
  --gb-r:8px;               /* Radius (999px waere eine Pille) */
  --gb-fw:400;              /* Normalstaerke, ausdruecklich nicht fett */
  --gb-gap:6px;             /* Abstand Icon <-> Text */

  /* Farben. Kontrast gegen Weiss geprueft (WCAG AA, >=4.5:1 bei Normalstaerke) */
  --gb-primary:#2E7D46;     /* 5.07:1 — ersetzt #34a853 (nur 3.06:1) */
  --gb-primary-h:#276B3C;
  --gb-danger:#B3222F;      /* 6.59:1 */
  --gb-danger-h:#941B26;
  --gb-face:#FFFFFF;
  --gb-face-h:#F4F6F9;
  --gb-edge:#C9CFD8;
  --gb-txt:#22262E;
  --gb-txt-2:#3C4351;
}

/* ---------- Basis ----------
   Gilt fuer .gb und fuer die Alt-Klassen, damit bestehende Seiten ohne
   Markup-Aenderung denselben Standard bekommen. */
.gb,
.ang-btn,
.ang-btn-del,
.ang-rt-btn,
.newbtn,
.paidbtn{
  box-sizing:border-box;
  height:var(--gb-h);
  padding:0 var(--gb-px);
  margin:0;
  font-family:inherit;
  font-size:var(--gb-fs);
  font-weight:var(--gb-fw);
  line-height:1;
  letter-spacing:0;
  border:1px solid transparent;
  border-radius:var(--gb-r);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--gb-gap);
  white-space:nowrap;
  text-decoration:none;
  cursor:pointer;
  transition:background .12s,border-color .12s,color .12s;
}

/* ---------- Grunderscheinung: neutral ----------
   Muss VOR den Varianten stehen. Ein Element traegt oft beide Klassen
   (class="ang-btn ang-btn-primary") — bei gleicher Spezifitaet gewinnt die
   spaetere Regel, deshalb ist die Reihenfolge hier bedeutungstragend. */
.gb--default,
.ang-btn,
.ang-rt-btn,
.newbtn{
  background:var(--gb-face);
  color:var(--gb-txt);
  border-color:var(--gb-edge);
}
.gb--default:hover,
.ang-btn:hover,
.ang-rt-btn:hover,
.newbtn:hover{
  background:var(--gb-face-h);
  color:var(--gb-txt);
  text-decoration:none;
}

/* ---------- Varianten ---------- */
.gb--primary,
.ang-btn-primary{
  background:var(--gb-primary);
  color:#fff;
  border-color:var(--gb-primary);
}
.gb--primary:hover,
.ang-btn-primary:hover,
a.ang-btn-primary:hover{
  background:var(--gb-primary-h);
  border-color:var(--gb-primary-h);
  color:#fff;
  text-decoration:none;
}

.paidbtn{ background:var(--gb-primary); color:#fff; border-color:var(--gb-primary); }
.paidbtn:hover{ background:var(--gb-primary-h); border-color:var(--gb-primary-h); }

.gb--ghost{
  background:transparent;
  color:var(--gb-txt-2);
  border-color:transparent;
}
.gb--ghost:hover{ background:rgba(34,38,46,.07); }

.gb--danger,
.ang-btn-del{
  background:var(--gb-danger);
  color:#fff;
  border-color:var(--gb-danger);
}
.gb--danger:hover,
.ang-btn-del:hover{
  background:var(--gb-danger-h);
  border-color:var(--gb-danger-h);
}
.ang-btn-del svg{ display:block; }

/* Zurueckhaltende Loesch-Variante (getoent statt gefuellt) */
.gb--danger-soft{ background:#FBE9E9; color:#9E2020; border-color:#F0CFCF; }
.gb--danger-soft:hover{ background:#F7DCDC; }

/* LOESCHEN-STANDARD (Jan, 03.08.2026). Quadratischer Icon-Button:
   weisser Grund, NEUTRALER Rand, gefuelltes rotes Symbol.

   Warum der Rand neutral ist: In einer Tabelle mit zwanzig Zeilen stuenden
   sonst zwanzig rote Rahmen. Die Absicht traegt allein das Symbol — das
   reicht, weil ein gefuellter Papierkorb auch klein eindeutig ist, und die
   Zeile bleibt ruhig. Gleicher Rahmen wie "Bearbeiten" (.gb--default), damit
   die Aktionsspalte als Einheit liest.

   Immer zusammen mit .gb--icon und einem aria-label verwenden; das Symbol
   kommt aus giny_ic_solid('trash'). */
.gb--danger-ghost{ background:#fff; color:#B3222F; border-color:var(--gb-edge); }
.gb--danger-ghost:hover{ background:#FDF3F2; border-color:rgba(179,34,47,.5); }

/* Warn-/Stopp-Variante (Alt-Klasse .ang-btn-stop) */
.gb--warn,
.ang-btn-stop{
  background:var(--gb-face);
  color:#7A4708;
  border-color:#E0BE86;
}
.gb--warn:hover,
.ang-btn-stop:hover{ background:#FDF3E3; color:#7A4708; }

/* ---------- Groessen ----------
   Ueberschreiben nur die Variable -> alle abhaengigen Werte folgen. */
.gb--sm,
.ang-btn-sm,
.ang-rt-btn{ --gb-h:var(--gb-h-sm); --gb-px:10px; --gb-fs:11px; }
.gb--lg{ --gb-h:var(--gb-h-lg); --gb-px:18px; --gb-fs:13px; }

/* Quadratischer Icon-Button */
.gb--icon,
.ang-btn-del{ width:var(--gb-h); padding:0; }
.gb--icon.gb--sm{ width:var(--gb-h-sm); }

/* Volle Breite */
.gb--block{ width:100%; }

/* ---------- Zustaende ---------- */
.gb[disabled],.gb.is-disabled,
.ang-btn[disabled],.ang-btn-del[disabled],
button[disabled]{ opacity:.45; cursor:not-allowed; }
.gb:focus-visible,
.ang-btn:focus-visible,
.ang-btn-del:focus-visible{ outline:2px solid var(--gb-primary); outline-offset:2px; }

/* ---------- Aktions-Zeile in Tabellen ----------
   Buttons duerfen die globale Regel button{margin-top} (giny.css) nicht erben. */
.ang-actions,
.gb-actions{
  /* Die Zeile gibt die Groesse vor -> ALLE Buttons darin sind gleich hoch,
     auch der quadratische Icon-Button. Tabellenzeilen nutzen die kompakte Stufe. */
  --gb-h:var(--gb-h-sm);
  --gb-px:10px;
  --gb-fs:11px;
  display:inline-flex;
  align-items:center;
  gap:var(--gb-gap);
  justify-content:flex-end;
}
.ang-actions > a,.ang-actions > span,.ang-actions > form,
.gb-actions > a,.gb-actions > span,.gb-actions > form{
  display:inline-flex;
  align-items:center;
  margin:0 !important;
}
.ang-actions button,.gb-actions button{ margin:0 !important; }

/* ---------- Kompaktere Bildschirme ---------- */
@media(max-width:700px){
  :root{ --gb-h:26px; --gb-px:11px; }
}

/* ---------- Icons in Buttons (27.07.2026) ----------
   Nur bei folgenreichen Aktionen (senden, planen, loeschen) — nie dekorativ.
   Groesse haengt an der Schriftgroesse; Abstand kommt aus --gb-gap (Flex-Gap
   der Basisregel), deshalb hier KEIN margin. Doku: docs/ICONS.md */
.gb .gy-ic,
.ang-btn .gy-ic,
.ang-btn-del .gy-ic,
.newbtn .gy-ic,
.paidbtn .gy-ic{width:14px;height:14px;flex:0 0 auto;opacity:.85;}
.gb--primary .gy-ic,
.gb--danger .gy-ic,
.gb--danger-soft .gy-ic,
.ang-btn-primary .gy-ic,
.ang-btn-del .gy-ic,
.paidbtn .gy-ic{opacity:1;}
.gb--sm .gy-ic{width:11px;height:11px;}
.gb--lg .gy-ic{width:15px;height:15px;}

/* Der Papierkorb im Loeschen-Standard bleibt bei 16 px — auch in der
   kompakten Stufe. Diese Regel MUSS nach den allgemeinen .gy-ic-Groessen
   stehen: gleiche Spezifitaet, die spaetere Regel gewinnt. */
.gb--danger-ghost .gy-ic,
.gb--sm.gb--danger-ghost .gy-ic,
.gb-actions .gb--danger-ghost .gy-ic,
.ang-actions .gb--danger-ghost .gy-ic{ width:16px; height:16px; opacity:1; }