/* GCO Albatros Login, Frontend Stylesheet fuer den Mitgliederbereich Mein GCO.
   Jede Klasse traegt den Praefix gco-, es gibt keinen Selektor auf ein nacktes
   HTML Element, damit das Theme der Seite unberuehrt bleibt. Farben kommen
   ausschliesslich aus den Variablen im :root Block. Es wird keine Schriftart
   erzwungen und keine externe Datei geladen. */

/* 1. Variablen, Schnittstelle fuer das Theme */
:root {
  --gco-color-primary: #8b1e2d;
  --gco-color-primary-hover: #741925;
  --gco-color-primary-active: #5f141e;
  --gco-color-on-primary: #ffffff;
  --gco-color-surface: #faf7f2;
  --gco-color-surface-raised: #ffffff;
  --gco-color-accent-soft: #e8f3e4;
  --gco-color-accent: #2f6b3a;
  --gco-color-text: #1f2328;
  --gco-color-text-muted: #55606b;
  --gco-color-border: #e3dcd2;
  --gco-color-focus: #1a4d8f;
  --gco-color-error-surface: #fdecee;
  --gco-color-error-text: #8a1220;
  --gco-color-error-border: #f0c2c8;
  --gco-color-info-surface: #eef4fb;
  --gco-color-info-text: #1d3d63;
  --gco-color-info-border: #c8dcf2;
  --gco-color-warning-surface: #fdf4e3;
  --gco-color-warning-text: #6b4a08;
  --gco-color-warning-border: #f0dcae;

  /* Sperrseite: eigene Farbwelt in tiefem Golfgruen statt der hellen
     Oberflaeche. Die gedaempfte Textfarbe ergaenzt die zwei Pflichtvariablen,
     damit auch der Fliesstext aus dem Variablenblock kommt und nicht als
     Zufallswert im Selektor steht. */
  --gco-color-locked-bg: #1e3d2a;
  --gco-color-locked-bg-deep: #17301f;
  --gco-color-locked-text: #f2f7f3;
  --gco-color-locked-text-muted: #c9d9cd;

  --gco-radius-sm: 8px;
  --gco-radius-md: 14px;
  --gco-radius-lg: 24px;
  --gco-radius-pill: 999px;

  --gco-space-2xs: 0.25rem;
  --gco-space-xs: 0.5rem;
  --gco-space-sm: 0.75rem;
  --gco-space-md: 1rem;
  --gco-space-lg: 1.5rem;
  --gco-space-xl: 2.5rem;

  --gco-shadow-card: 0 18px 40px rgba(31, 35, 40, 0.10);
  --gco-shadow-dialog: 0 24px 60px rgba(31, 35, 40, 0.28);

  --gco-transition: 160ms ease;
  --gco-max-width: 62rem;
  --gco-card-media-image: none;
}

/* 2. Kastenmodell, bewusst nur auf eigenen Elementen */
.gco-login, .gco-card, .gco-card__media, .gco-card__body, .gco-card__icon,
.gco-card__title, .gco-card__intro, .gco-card__actions, .gco-card__footnote,
.gco-notice, .gco-form, .gco-form__fields, .gco-form__actions, .gco-field,
.gco-field__label, .gco-field__input, .gco-button, .gco-linkbutton,
.gco-dialog, .gco-dialog__panel, .gco-dialog__close, .gco-dialog__cancel,
.gco-dialog__title, .gco-dialog__intro, .gco-dialog--notice, .gco-dialog__icon,
.gco-dialog__icon--success, .gco-dialog__icon-glyph, .gco-dashboard,
.gco-dashboard__header, .gco-dashboard__footer, .gco-tiles, .gco-tile,
.gco-tile__title, .gco-tile__text, .gco-data, .gco-data__row, .gco-data__label,
.gco-data__value, .gco-badge, .gco-login__enhanced, .gco-login__fallback,
.gco-locked, .gco-locked__badge, .gco-locked__badge-glyph, .gco-locked__title,
.gco-locked__text, .gco-locked__action {
  /* !important, weil fremde Polsterung sonst das Kastenmodell sprengt und
     genau das im Anmeldefenster zu beobachten war. */
  box-sizing: border-box !important;
}

/* Beide Wege der Anmeldekarte. Sichtbar ist immer genau einer:
   ohne Skript das Formular, mit Skript der Knopf zum Anmeldefenster. */
.gco-login__enhanced, .gco-login__fallback {
  display: block;
}
.gco-login__enhanced[hidden], .gco-login__fallback[hidden] {
  display: none;
}

/* 3. Anmeldekarte und Kartenvarianten */
.gco-card {
  display: block;
  width: 100%;
  max-width: var(--gco-max-width);
  margin-right: auto;
  margin-left: auto;
  overflow: hidden;
  border: 1px solid var(--gco-color-border);
  border-radius: var(--gco-radius-lg);
  background-color: var(--gco-color-surface-raised);
  box-shadow: var(--gco-shadow-card);
  color: var(--gco-color-text);
}
.gco-login {
  display: block;
  width: 100%;
}
/* Bildtragende Flaeche. Ohne Themebild bleibt ein ruhiger Verlauf aus den
   Markenfarben, das Plugin liefert selbst kein Bild aus. */
.gco-card__media {
  min-height: 7rem;
  background-color: var(--gco-color-accent);
  background-image:
    var(--gco-card-media-image),
    radial-gradient(120% 90% at 18% 12%, var(--gco-color-surface-raised) 0%, transparent 58%),
    linear-gradient(155deg, var(--gco-color-accent) 0%, var(--gco-color-primary) 100%);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.gco-card__body {
  padding: var(--gco-space-lg);
}

/* 4. Rundes Symbolfeld ueber der Ueberschrift */
.gco-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: var(--gco-space-md);
  border-radius: var(--gco-radius-pill);
  background-color: var(--gco-color-accent-soft);
  color: var(--gco-color-accent);
}
/* Die Symbole sind als Konturzeichnung gebaut, nicht als Flaeche */
.gco-card__icon-glyph {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
}

/* 5. Ueberschriften, Einleitungen und Fusszeile der Karte */
.gco-card__title {
  margin: 0 0 var(--gco-space-xs);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gco-color-text);
}
.gco-card__intro {
  margin: 0 0 var(--gco-space-lg);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gco-color-text-muted);
}
.gco-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gco-space-sm);
  margin: 0;
}
.gco-card__footnote {
  margin: var(--gco-space-lg) 0 0;
  padding-top: var(--gco-space-md);
  border-top: 1px solid var(--gco-color-border);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--gco-color-text-muted);
}
.gco-card__footnote-link {
  color: var(--gco-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  border-radius: var(--gco-radius-sm);
  transition: color var(--gco-transition);
}
.gco-card__footnote-link:hover {
  color: var(--gco-color-primary-hover);
}

/* 6. Formular, Felder und Beschriftungen */
.gco-form { margin: 0; }
.gco-form__fields {
  display: flex;
  flex-direction: column;
  gap: var(--gco-space-md);
  margin-bottom: var(--gco-space-lg);
}
.gco-field {
  display: flex;
  flex-direction: column;
  gap: var(--gco-space-2xs);
  margin: 0;
}
.gco-field__label {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--gco-color-text);
}
.gco-field__input {
  width: 100%;
  padding: var(--gco-space-sm) var(--gco-space-md);
  border: 1px solid var(--gco-color-border);
  border-radius: var(--gco-radius-md);
  background-color: var(--gco-color-surface-raised);
  color: var(--gco-color-text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  transition: border-color var(--gco-transition), box-shadow var(--gco-transition);
}
.gco-field__input::placeholder {
  color: var(--gco-color-text-muted);
  opacity: 1;
}
.gco-field__input:hover { border-color: var(--gco-color-text-muted); }
.gco-field__input[disabled] {
  background-color: var(--gco-color-surface);
  color: var(--gco-color-text-muted);
  cursor: not-allowed;
}
.gco-form__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--gco-space-sm);
}

/* 7. Knoepfe: primaer, sekundaer, gross, blockbreit, Ladezustand.
   Befund vom Auftraggeber: Absende und Abbrechen Knopf sahen im Screenshot
   identisch aus, beide weiss mit rotem Rahmen. Ursache ist die Spezifitaet
   des Themes, nicht unser Stylesheet. Deshalb wird hier die Klasse im
   Selektor verdoppelt (erhoeht die Spezifitaet ohne !important) und
   zusaetzlich !important nur auf den Eigenschaften gesetzt, die im
   Screenshot nachweislich falsch aussahen: Rahmen, Rundung, Hintergrund,
   Schriftfarbe, Schriftart und Polsterung. Der Knopf in der Sperrseite ist
   ein Anker (a), deshalb steht text-decoration mit in dieser Liste, sonst
   zieht ein Theme dort seine Standard Unterstreichung durch. Layout
   Eigenschaften wie display, gap oder cursor bleiben ohne !important, dort
   darf das Theme mitreden, ohne dass ein Schaden entsteht. */
.gco-button.gco-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--gco-space-xs);
  padding: var(--gco-space-sm) var(--gco-space-lg) !important;
  border: 1px solid transparent !important;
  border-radius: var(--gco-radius-pill) !important;
  background-color: var(--gco-color-surface-raised) !important;
  background-image: none !important;
  color: var(--gco-color-text) !important;
  font-family: inherit !important;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
  text-decoration: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
  transition: background-color var(--gco-transition), border-color var(--gco-transition), color var(--gco-transition);
}
.gco-button__label { display: inline-block; }
.gco-button__icon {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  fill: none;
  stroke: currentColor;
}
.gco-button--primary.gco-button--primary {
  border-color: var(--gco-color-primary) !important;
  background-color: var(--gco-color-primary) !important;
  color: var(--gco-color-on-primary) !important;
}
.gco-button--primary.gco-button--primary:hover {
  border-color: var(--gco-color-primary-hover) !important;
  background-color: var(--gco-color-primary-hover) !important;
  color: var(--gco-color-on-primary) !important;
}
.gco-button--primary.gco-button--primary:active {
  border-color: var(--gco-color-primary-active) !important;
  background-color: var(--gco-color-primary-active) !important;
}
.gco-button--secondary.gco-button--secondary {
  border-color: var(--gco-color-border) !important;
  background-color: var(--gco-color-surface-raised) !important;
  color: var(--gco-color-text) !important;
}
.gco-button--secondary.gco-button--secondary:hover {
  border-color: var(--gco-color-text-muted) !important;
  background-color: var(--gco-color-surface) !important;
  color: var(--gco-color-text) !important;
}
.gco-button--large.gco-button--large {
  padding: var(--gco-space-md) var(--gco-space-xl) !important;
  font-size: 1.0625rem;
}
.gco-button--block.gco-button--block {
  display: flex;
  width: 100% !important;
}
/* Ladezustand: sichtbar deaktiviert, aber weiterhin kontrastreich */
.gco-button--loading {
  cursor: progress;
}
/* Dauerhaft abgeschaltet, etwa solange die Anbindung ruht. Die Selektoren
   sind hier bereits von Natur aus spezifischer als Variante und Grundform,
   damit ein deaktivierter Primaerknopf zuverlaessig grau bleibt. */
.gco-button.gco-button[disabled]:not(.gco-button--loading),
.gco-button.gco-button[aria-disabled="true"]:not(.gco-button--loading) {
  border-color: var(--gco-color-border) !important;
  background-color: var(--gco-color-surface) !important;
  color: var(--gco-color-text-muted) !important;
  box-shadow: none;
  cursor: not-allowed;
}
.gco-button--loading.gco-button--primary.gco-button--primary {
  border-color: var(--gco-color-primary-active) !important;
  background-color: var(--gco-color-primary-active) !important;
  color: var(--gco-color-on-primary) !important;
}
.gco-button--loading.gco-button--secondary.gco-button--secondary {
  border-color: var(--gco-color-border) !important;
  background-color: var(--gco-color-surface) !important;
  color: var(--gco-color-text-muted) !important;
}
/* Der Spinner erscheint ausschliesslich im Ladezustand */
.gco-button__spinner {
  display: none;
  width: 1em;
  height: 1em;
  flex: none;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: var(--gco-radius-pill);
  animation: gco-spin 720ms linear infinite;
}
.gco-button--loading .gco-button__spinner { display: inline-block; }
@keyframes gco-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Textlinkknopf, zurueckhaltende Zweitaktion */
.gco-linkbutton {
  display: inline-block;
  padding: var(--gco-space-xs) var(--gco-space-sm);
  border: 0;
  border-radius: var(--gco-radius-sm);
  background-color: transparent;
  color: var(--gco-color-text-muted);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: underline;
  text-underline-offset: 0.15em;
  cursor: pointer;
  transition: color var(--gco-transition);
}
.gco-linkbutton:hover { color: var(--gco-color-text); }

/* 8. Fokus, sichtbar auf jedem bedienbaren Element.
   Erst der Rueckfall fuer Browser ohne :focus-visible. */
.gco-button:focus, .gco-linkbutton:focus, .gco-field__input:focus,
.gco-dialog__close:focus, .gco-logout-link:focus,
.gco-card__footnote-link:focus, .gco-login-trigger:focus {
  outline: 3px solid var(--gco-color-focus);
  outline-offset: 2px;
}
/* Kennt der Browser :focus-visible, bleibt der Ring der Tastatur vorbehalten */
.gco-button:focus:not(:focus-visible),
.gco-linkbutton:focus:not(:focus-visible),
.gco-dialog__close:focus:not(:focus-visible),
.gco-logout-link:focus:not(:focus-visible),
.gco-card__footnote-link:focus:not(:focus-visible),
.gco-login-trigger:focus:not(:focus-visible) {
  outline: none;
}
.gco-button:focus-visible, .gco-linkbutton:focus-visible,
.gco-field__input:focus-visible, .gco-dialog__close:focus-visible,
.gco-logout-link:focus-visible, .gco-card__footnote-link:focus-visible,
.gco-login-trigger:focus-visible {
  outline: 3px solid var(--gco-color-focus);
  outline-offset: 2px;
}
/* Eingabefelder markieren zusaetzlich den Rand, auch bei Mausfokus */
.gco-field__input:focus {
  border-color: var(--gco-color-focus);
}

/* 9. Meldungsbereiche: Fehler, Hinweis, Sperrmeldung */
.gco-notice {
  display: block;
  margin-bottom: var(--gco-space-md);
  padding: var(--gco-space-sm) var(--gco-space-md);
  border: 1px solid var(--gco-color-border);
  border-radius: var(--gco-radius-md);
  background-color: var(--gco-color-surface);
  color: var(--gco-color-text);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.gco-notice[hidden] { display: none; }
.gco-notice__title {
  display: block;
  margin-bottom: var(--gco-space-2xs);
  font-weight: 700;
}
.gco-notice__text { display: block; }
.gco-notice--error {
  border-color: var(--gco-color-error-border);
  background-color: var(--gco-color-error-surface);
  color: var(--gco-color-error-text);
}
.gco-notice--info {
  border-color: var(--gco-color-info-border);
  background-color: var(--gco-color-info-surface);
  color: var(--gco-color-info-text);
}
.gco-notice--lockout {
  border-color: var(--gco-color-warning-border);
  background-color: var(--gco-color-warning-surface);
  color: var(--gco-color-warning-text);
}

/* 10. Anmeldefenster, Schliessknopf und Ueberlagerung.
   Pflichtregel: ohne open Attribut bleibt das Fenster aus dem Fluss. */
.gco-dialog:not([open]) { display: none; }
.gco-dialog {
  width: calc(100% - 2 * var(--gco-space-md));
  max-width: 28rem;
  max-height: calc(100% - 2 * var(--gco-space-md));
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: var(--gco-radius-lg);
  background-color: transparent;
  color: var(--gco-color-text);
  overflow: visible;
  z-index: 100000;
}
.gco-dialog::backdrop {
  background-color: var(--gco-color-text);
  opacity: 0.55;
}
/* Rueckfallweg fuer Browser ohne dialog Unterstuetzung, dort greift
   ::backdrop nicht, deshalb eine eigene Ueberlagerung. */
.gco-dialog--open {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  height: 100%;
  max-height: none;
  margin: 0;
  padding: var(--gco-space-md);
  overflow-y: auto;
  z-index: 100000;
}
.gco-dialog--open::before {
  content: "";
  position: fixed;
  inset: 0;
  background-color: var(--gco-color-text);
  opacity: 0.55;
}
.gco-dialog--open .gco-dialog__panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 28rem;
  max-height: 100%;
  overflow-y: auto;
}
.gco-dialog__panel {
  position: relative;
  padding: var(--gco-space-xl) var(--gco-space-lg) var(--gco-space-lg);
  border: 1px solid var(--gco-color-border);
  border-radius: var(--gco-radius-lg);
  background-color: var(--gco-color-surface-raised);
  box-shadow: var(--gco-shadow-dialog);
  max-height: calc(100vh - 2 * var(--gco-space-md));
  overflow-y: auto;
}
/* Verdoppelte Klasse plus gezieltes !important: das X sass im Screenshot in
   einem Kasten mit rotem Rahmen, obwohl border: 0 und background-color:
   transparent hier laengst stehen. Das Theme gewinnt sonst gegen die
   einfache Klasse. */
.gco-dialog__close.gco-dialog__close {
  position: absolute;
  top: var(--gco-space-sm);
  right: var(--gco-space-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem !important;
  height: 2.25rem;
  padding: 0 !important;
  border: 0 !important;
  border-radius: var(--gco-radius-pill) !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--gco-color-text) !important;
  font-family: inherit !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  cursor: pointer;
  transition: color var(--gco-transition);
}
/* Kein Hintergrundkasten mehr, nur ein Farbwechsel beim Zeigen */
.gco-dialog__close.gco-dialog__close:hover {
  color: var(--gco-color-primary) !important;
}
.gco-dialog__close-glyph.gco-dialog__close-glyph {
  width: 1.25rem;
  height: 1.25rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}
.gco-dialog__title {
  margin: 0 0 var(--gco-space-xs);
  padding-right: var(--gco-space-xl);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gco-color-text);
}
.gco-dialog__intro {
  margin: 0 0 var(--gco-space-lg);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gco-color-text-muted);
}
.gco-form--dialog .gco-form__fields { margin-bottom: var(--gco-space-md); }
/* Abbrechen ist reiner Text unter dem Absendeknopf, das X oben reicht als
   Schliessweg. Ohne appearance: none und font-family: inherit zeigt der
   Browser sonst seine eigene Systemschrift und einen Rahmen. */
.gco-dialog__cancel.gco-dialog__cancel {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--gco-space-xs) 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  font-family: inherit !important;
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  color: var(--gco-color-text-muted) !important;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--gco-transition);
}
.gco-dialog__cancel.gco-dialog__cancel:hover,
.gco-dialog__cancel.gco-dialog__cancel:focus {
  color: var(--gco-color-text) !important;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Abmeldefenster: Bestaetigungssymbol und mittige Ausrichtung statt
   linksbuendigem Titel neben dem X. */
.gco-dialog--notice .gco-dialog__panel {
  padding: var(--gco-space-xl) var(--gco-space-lg);
  text-align: center;
}
.gco-dialog--notice .gco-dialog__title {
  padding-right: 0;
}
.gco-dialog--notice .gco-dialog__intro {
  margin-left: auto;
  margin-right: auto;
  max-width: 22rem;
}
.gco-dialog__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  margin: 0 auto var(--gco-space-md);
  border-radius: var(--gco-radius-pill);
}
.gco-dialog__icon--success {
  background-color: var(--gco-color-accent-soft);
  color: var(--gco-color-accent);
}
.gco-dialog__icon-glyph {
  width: 1.75rem;
  height: 1.75rem;
  fill: none;
  stroke: currentColor;
}
/* Dezentes Aufblenden beim Oeffnen, laeuft nur einmal auf dem Panel */
.gco-dialog--notice[open] .gco-dialog__panel,
.gco-dialog--notice.gco-dialog--open .gco-dialog__panel {
  animation: gco-dialog-fade-in 160ms ease;
}
@keyframes gco-dialog-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* 11. Mitgliederuebersicht: Kopfbereich, Kacheln, Datenliste, Abzeichen */
.gco-dashboard {
  width: 100%;
  max-width: var(--gco-max-width);
  margin-right: auto;
  margin-left: auto;
  color: var(--gco-color-text);
}
.gco-dashboard__header { margin-bottom: var(--gco-space-lg); }
.gco-dashboard__eyebrow {
  margin: 0 0 var(--gco-space-2xs);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gco-color-accent);
}
.gco-dashboard__greeting {
  margin: 0 0 var(--gco-space-xs);
  font-size: 1.625rem;
  font-weight: 700;
  line-height: 1.2;
  color: var(--gco-color-text);
}
.gco-dashboard__intro {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--gco-color-text-muted);
}
.gco-tiles {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--gco-space-md);
}
.gco-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gco-space-sm);
  padding: var(--gco-space-lg);
  border: 1px solid var(--gco-color-border);
  border-radius: var(--gco-radius-lg);
  background-color: var(--gco-color-surface-raised);
  box-shadow: var(--gco-shadow-card);
}
.gco-tile--data { background-color: var(--gco-color-surface-raised); }
.gco-tile--action { background-color: var(--gco-color-surface); }
.gco-tile__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--gco-color-text);
}
.gco-tile__text {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gco-color-text-muted);
}
.gco-data {
  width: 100%;
  margin: 0;
}
.gco-data__row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--gco-space-xs);
  padding: var(--gco-space-xs) 0;
  border-bottom: 1px solid var(--gco-color-border);
}
.gco-data__row:last-child {
  padding-bottom: 0;
  border-bottom: 0;
}
.gco-data__label {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--gco-color-text-muted);
}
.gco-data__value {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: right;
  color: var(--gco-color-text);
}
.gco-badge {
  display: inline-block;
  padding: var(--gco-space-2xs) var(--gco-space-sm);
  border: 1px solid transparent;
  border-radius: var(--gco-radius-pill);
  background-color: var(--gco-color-surface);
  color: var(--gco-color-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.4;
}
.gco-badge--member {
  border-color: var(--gco-color-accent-soft);
  background-color: var(--gco-color-accent-soft);
  color: var(--gco-color-accent);
}
.gco-dashboard__footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gco-space-sm);
  margin-top: var(--gco-space-lg);
  padding-top: var(--gco-space-md);
  border-top: 1px solid var(--gco-color-border);
}

/* 12. Kleinteile: Mitgliedsname, Mitgliedsnummer, Abmeldelink */
.gco-member-name {
  font-weight: 600;
  color: var(--gco-color-text);
}
.gco-member-number {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  color: var(--gco-color-text);
}
/* Der Abmeldelink steht mal allein, mal als Knopf im Dashboard */
.gco-logout-link {
  color: var(--gco-color-primary);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  border-radius: var(--gco-radius-sm);
  transition: color var(--gco-transition);
}
.gco-logout-link:hover {
  color: var(--gco-color-primary-hover);
}
.gco-button.gco-logout-link {
  text-decoration: none;
  color: var(--gco-color-text);
}
.gco-button.gco-logout-link:hover {
  color: var(--gco-color-text);
}

/* 13. Sperrseite: Karte mit Schloss Badge, Titel, Text und Knopf. Ersetzt die
   fruehere Version aus schwarzer Schrift auf weiss mit blossem Textlink.
   Aufbau des Markups, das ein anderer Agent liefert:
   div.gco-locked > div.gco-locked__badge > svg.gco-locked__badge-glyph,
   h2.gco-locked__title, p.gco-locked__text,
   div.gco-locked__action > a.gco-button.gco-button--primary.gco-button--large.
   Auch hier gilt die Verdopplung plus gezieltes !important aus Abschnitt 7,
   denn Ueberschrift und Absatz sind genau die Elemente, die ein Theme ueber
   .entry-content h2 oder .entry-content p am haeufigsten selbst faerbt. */
.gco-locked.gco-locked {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--gco-max-width);
  margin-right: auto;
  margin-left: auto;
  padding: var(--gco-space-lg) var(--gco-space-md) !important;
  border-radius: 1.5rem !important;
  background-color: var(--gco-color-locked-bg) !important;
  background-image: linear-gradient(180deg, var(--gco-color-locked-bg) 0%, var(--gco-color-locked-bg-deep) 100%) !important;
  color: var(--gco-color-locked-text) !important;
  text-align: center;
  box-shadow: var(--gco-shadow-card);
}
.gco-locked__badge.gco-locked__badge {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 5rem;
  height: 5rem;
  margin: 0 auto var(--gco-space-lg) !important;
  border-radius: var(--gco-radius-pill) !important;
  background-color: var(--gco-color-surface-raised) !important;
  background-image: none !important;
  color: var(--gco-color-accent) !important;
  box-shadow: 0 16px 32px rgba(10, 22, 14, 0.35);
}
.gco-locked__badge-glyph.gco-locked__badge-glyph {
  width: 2rem;
  height: 2rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.gco-locked__title.gco-locked__title {
  margin: 0 0 var(--gco-space-sm);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--gco-color-locked-text) !important;
  font-family: inherit !important;
}
.gco-locked__text.gco-locked__text {
  max-width: 32rem;
  margin: 0 auto;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--gco-color-locked-text-muted) !important;
  font-family: inherit !important;
}
.gco-locked__action.gco-locked__action {
  display: flex;
  justify-content: center;
  margin-top: var(--gco-space-lg);
}
/* Reiner Flaechenkontrast Rot gegen Gruen liegt bei nur 1,3 zu 1, das reicht
   nicht als Abgrenzung. Ein heller Ring aus dem Sperrseiten Text holt die
   Abgrenzung auf ueber 11 zu 1, ohne die Markenfarbe des Knopfes zu aendern
   und ohne den Kontrast von weisser Schrift auf rotem Grund zu gefaehrden. */
.gco-locked .gco-button--primary.gco-button--primary {
  box-shadow: 0 0 0 2px var(--gco-color-locked-text), 0 14px 28px rgba(8, 18, 12, 0.35) !important;
}
/* Der allgemeine Fokusring ist dunkelblau und auf dem tiefen Gruen praktisch
   unsichtbar (rund 1,4 zu 1). Auf der Sperrseite deshalb heller gestellt,
   Breite und Abstand bleiben unangetastet. */
.gco-locked .gco-button:focus,
.gco-locked .gco-button:focus-visible {
  outline-color: var(--gco-color-locked-text);
}
/* Auf schmalen Geraeten bricht die Beschriftung "Sicher mit Albatros anmelden"
   in der grossen Schriftgroesse dreizeilig um. Das Schloss steht dann weit
   abgesetzt links neben einem hohen Textblock. Kleinere Schrift und weniger
   seitliche Polsterung halten die Beschriftung in einer Zeile, der Knopf nimmt
   dafuer die volle Breite der Karte ein. */
@media (max-width: 29.9375rem) {
  .gco-locked .gco-button.gco-button--large {
    width: 100% !important;
    padding: var(--gco-space-sm) var(--gco-space-md) !important;
    font-size: 0.875rem !important;
  }
}

/* 14. Hilfsklassen. Nur fuer Screenreader, bleibt im Zugaenglichkeitsbaum. */
.gco-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  white-space: nowrap;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}
/* Wird vom Skript auf das Wurzelelement gesetzt, solange das Fenster offen ist.
   Einzige Stelle mit !important, weil sie ein fremdes Element betrifft. */
.gco-scroll-lock { overflow: hidden !important; }

/* 15. Breitere Bildschirme. Kacheln zweispaltig ab 36rem. */
@media (min-width: 36rem) {
  .gco-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--gco-space-lg);
  }
}
/* Anmeldekarte zweispaltig ab 48rem, Medienflaeche links.
   Darunter bleibt sie ein flaches Band ueber dem Inhalt. */
@media (min-width: 48rem) {
  .gco-card--split {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: stretch;
  }
  .gco-card--split .gco-card__media {
    min-height: 100%;
  }
  .gco-card__body {
    padding: var(--gco-space-xl);
  }
  .gco-card__title {
    font-size: 1.75rem;
  }
  .gco-dialog__panel {
    padding: var(--gco-space-xl);
  }
  .gco-dashboard__greeting {
    font-size: 1.875rem;
  }
  /* Sperrseite: auf breiteren Bildschirmen darf die Polsterung ihr volles
     Mass erreichen, auf schmalen bleibt sie beim kleineren Grundwert. */
  .gco-locked.gco-locked {
    padding: var(--gco-space-xl) var(--gco-space-xl) !important;
  }
  .gco-locked__title.gco-locked__title {
    font-size: 1.75rem;
  }
}

/* 16. Weniger Bewegung, alle Uebergaenge und Animationen aus */
@media (prefers-reduced-motion: reduce) {
  .gco-card, .gco-card__footnote-link, .gco-field__input, .gco-button.gco-button,
  .gco-linkbutton, .gco-dialog, .gco-dialog__panel, .gco-dialog__close.gco-dialog__close,
  .gco-dialog__cancel.gco-dialog__cancel, .gco-logout-link, .gco-login-trigger, .gco-tile,
  .gco-badge {
    /* Die Selektoren fuer Knopf, Schliessen und Abbrechen sind hier verdoppelt,
       weil ihre Grundregeln in Abschnitt 7 und 10 aus Spezifitaetsgruenden
       ebenfalls verdoppelt sind. Ohne diese Anpassung wuerde die hoehere
       Spezifitaet der Grundregel gewinnen und die Bewegungsreduktion faellt
       fuer genau diese drei Elemente aus, das waere ein Rueckschritt. */
    transition: none;
  }
  /* Der Spinner bleibt sichtbar, steht aber still */
  .gco-button__spinner {
    animation: none;
    border-top-color: currentColor;
    opacity: 0.85;
  }
  /* Das Aufblenden des Abmeldefensters faellt komplett weg */
  .gco-dialog--notice[open] .gco-dialog__panel,
  .gco-dialog--notice.gco-dialog--open .gco-dialog__panel {
    animation: none;
  }
}