/* "Mit Google anmelden" (google-auth.js). The button follows Google's sign-in branding
   guidelines: official multi-colour "G" on its own, approved wording, Google's neutral
   colours — dark variant on the dark theme, light variant on the light one. System font
   (the app loads no web fonts, see datenschutz.html), weight 500 like Roboto Medium. */
.gbtn-slot { display:flex; flex-direction:column; gap:.9rem; }
.gbtn { display:flex; align-items:center; justify-content:center; gap:10px; width:100%;
  min-height:48px; padding:0 12px; border-radius:var(--radius);
  background:#131314; border:1px solid #8E918F; color:#E3E3E3;
  font:500 15px/20px Roboto, system-ui, -apple-system, "Segoe UI", Arial, sans-serif; letter-spacing:.25px;
  cursor:pointer; transition:background var(--t-fast); }
.gbtn:hover { background:#1f1f21; }
.gbtn:active { background:#28282a; }
.gbtn:disabled { opacity:.6; cursor:default; }
.gbtn:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.gbtn-icon { display:grid; place-items:center; width:20px; height:20px; flex:0 0 20px; }
.gbtn-logo { width:20px; height:20px; display:block; }
.gbtn-text { white-space:nowrap; }
:root[data-theme="light"] .gbtn { background:#FFFFFF; border-color:#747775; color:#1F1F1F; }
:root[data-theme="light"] .gbtn:hover { background:#f7f8f8; }

/* "oder" between Google and the username form */
.gbtn-or { display:flex; align-items:center; gap:.75rem; color:var(--text-3, var(--muted, #8a8f98));
  font-size:.85rem; margin:.1rem 0 .2rem; }
.gbtn-or::before, .gbtn-or::after { content:""; flex:1; height:1px; background:var(--hairline-strong, rgba(255,255,255,.14)); }

.set-google .gbtn { margin-top:.2rem; }