/* ==========================================================================
   components.css — Buttons, Cards, Chips, Badges, Modals, Lock-Overlay
   Aqualizer Design System v2
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons (.btn)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: var(--radius-xl);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    filter var(--transition-fast),
    box-shadow var(--transition-fast),
    background-color var(--transition-fast),
    border-color var(--transition-fast);
  box-shadow: var(--shadow-sm);
}

.btn:hover {
  text-decoration: none;
  filter: brightness(1.1);
}

.btn:active {
  filter: brightness(0.95);
  transform: translateY(1px);
}

.btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Primary */
.btn--primary {
  background-color: var(--color-accent);
  border-color: var(--color-accent);
  color: #0a1628;
  box-shadow: 0 4px 16px var(--color-accent-glow);
}

.btn--primary:hover {
  background-color: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  filter: brightness(1);
  box-shadow: 0 6px 24px var(--color-accent-glow);
}

/* Secondary */
.btn--secondary {
  background-color: transparent;
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.btn--secondary:hover {
  background-color: var(--color-accent-bg);
  filter: brightness(1);
}

/* Danger */
.btn--danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}

.btn--danger:hover {
  filter: brightness(1.1);
}

/* Ghost */
.btn--ghost {
  background-color: transparent;
  border-color: var(--color-border);
  color: var(--color-text-muted);
}

.btn--ghost:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
  filter: brightness(1);
}

/* Größen */
.btn--sm {
  padding: 8px 16px;
  font-size: var(--font-size-sm);
  border-radius: var(--radius-lg);
}

.btn--lg {
  padding: 18px 40px;
  font-size: var(--font-size-lg);
}

/* Voll-Breite */
.btn--full {
  width: 100%;
}

/* Disabled */
.btn[disabled],
.btn--disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading-Spinner im Button */
.btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Cards (.card)
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition:
    border-color var(--transition-normal),
    box-shadow var(--transition-normal);
}

.card--hoverable:hover {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 1px var(--color-accent-bg), var(--shadow-accent);
}

.card--elevated {
  background-color: var(--color-bg-elevated);
}

.card--accent {
  border-color: var(--color-accent);
  box-shadow: var(--shadow-accent);
}

.card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-md);
  gap: var(--spacing-sm);
}

.card__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
  line-height: var(--line-height-tight);
}

.card__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  margin-top: var(--spacing-xs);
}

.card__body {
  color: var(--color-text-muted);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
}

.card__footer {
  margin-top: var(--spacing-lg);
  padding-top: var(--spacing-md);
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
}

/* --------------------------------------------------------------------------
   Badges (.badge)
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  white-space: nowrap;
}

.badge--success {
  background-color: var(--color-success-bg);
  color: var(--color-success);
  box-shadow: 0 0 7px rgba(34, 197, 94, .28);
}

.badge--warning {
  background-color: var(--color-warning-bg);
  color: var(--color-warning);
  box-shadow: 0 0 7px rgba(245, 158, 11, .28);
}

.badge--danger {
  background-color: var(--color-danger-bg);
  color: var(--color-danger);
  box-shadow: 0 0 7px rgba(239, 68, 68, .28);
}

.badge--info {
  background-color: var(--color-accent-bg);
  color: var(--color-accent);
  box-shadow: 0 0 7px rgba(45, 212, 191, .28);
}

.badge--neutral {
  background-color: rgba(148, 163, 184, 0.12);
  color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   Chips (.chip)
   -------------------------------------------------------------------------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 5px 12px;
  border: 1px solid var(--color-border);
  border-radius: 100px;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
  background-color: var(--color-bg-elevated);
  white-space: nowrap;
  transition: border-color var(--transition-fast), color var(--transition-fast);
  cursor: default;
}

.chip--success {
  border-color: var(--color-success);
  color: var(--color-success);
  background-color: var(--color-success-bg);
  box-shadow: 0 0 7px rgba(34, 197, 94, .28);
}

.chip--warning {
  border-color: var(--color-warning);
  color: var(--color-warning);
  background-color: var(--color-warning-bg);
  box-shadow: 0 0 7px rgba(245, 158, 11, .28);
}

.chip--danger {
  border-color: var(--color-danger);
  color: var(--color-danger);
  background-color: var(--color-danger-bg);
  box-shadow: 0 0 7px rgba(239, 68, 68, .28);
}

.chip--info {
  border-color: var(--color-accent);
  color: var(--color-accent);
  background-color: var(--color-accent-bg);
  box-shadow: 0 0 7px rgba(45, 212, 191, .28);
}

.chip--interactive {
  cursor: pointer;
}

.chip--interactive:hover {
  border-color: var(--color-accent);
  color: var(--color-accent);
}

.chip__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: currentColor;
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Lock-Overlay (.lock-overlay)
   -------------------------------------------------------------------------- */
.lock-overlay {
  position: relative;
  overflow: hidden;
  border-radius: inherit;
}

.lock-overlay__content {
  filter: blur(4px);
  pointer-events: none;
  user-select: none;
}

.lock-overlay__gate {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  background: linear-gradient(
    to bottom,
    rgba(10, 22, 40, 0.6),
    rgba(10, 22, 40, 0.92)
  );
  padding: var(--spacing-lg);
  text-align: center;
  z-index: 1;
}

.lock-overlay__icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-bg-elevated);
  border: 2px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: var(--color-text-muted);
}

.lock-overlay__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text);
}

.lock-overlay__text {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  max-width: 240px;
  line-height: var(--line-height-loose);
}

/* --------------------------------------------------------------------------
   Modal (.modal)
   -------------------------------------------------------------------------- */
.modal-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(10, 22, 40, 0.8);
  backdrop-filter: blur(4px);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-md);
  animation: backdrop-in var(--transition-normal);
}

@keyframes backdrop-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.modal {
  background-color: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 520px;
  max-height: 90vh;
  overflow-y: auto;
  animation: modal-in var(--transition-normal);
}

@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border);
}

.modal__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
}

.modal__close {
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: var(--spacing-xs);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast);
  line-height: 1;
  font-size: 1.25rem;
}

.modal__close:hover {
  color: var(--color-text);
}

.modal__body {
  padding: var(--spacing-lg);
}

.modal__footer {
  padding: var(--spacing-md) var(--spacing-lg);
  border-top: 1px solid var(--color-border);
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
}

/* --------------------------------------------------------------------------
   Alert / Notification (.alert)
   -------------------------------------------------------------------------- */
.alert {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
  padding: var(--spacing-md);
  border-radius: var(--radius-md);
  border: 1px solid;
  font-size: var(--font-size-sm);
  line-height: var(--line-height-loose);
}

.alert--success {
  background-color: var(--color-success-bg);
  border-color: rgba(34, 197, 94, 0.3);
  color: var(--color-success);
}

.alert--warning {
  background-color: var(--color-warning-bg);
  border-color: rgba(245, 158, 11, 0.3);
  color: var(--color-warning);
}

.alert--danger {
  background-color: var(--color-danger-bg);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--color-danger);
}

.alert--info {
  background-color: var(--color-accent-bg);
  border-color: rgba(45, 212, 191, 0.3);
  color: var(--color-accent);
}

/* --------------------------------------------------------------------------
   Avatar (.avatar)
   -------------------------------------------------------------------------- */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--color-bg-elevated);
  border: 2px solid var(--color-border);
  color: var(--color-text-muted);
  font-weight: var(--font-weight-semibold);
  overflow: hidden;
  flex-shrink: 0;
}

.avatar--sm  { width: 32px; height: 32px; font-size: var(--font-size-xs); }
.avatar--md  { width: 40px; height: 40px; font-size: var(--font-size-sm); }
.avatar--lg  { width: 56px; height: 56px; font-size: var(--font-size-base); }
.avatar--xl  { width: 80px; height: 80px; font-size: var(--font-size-xl); }

/* --------------------------------------------------------------------------
   Divider (.divider)
   -------------------------------------------------------------------------- */
.divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--spacing-lg) 0;
}

.divider--accent {
  border-top-color: var(--color-accent);
  opacity: 0.4;
}

/* ==========================================================================
   UX/UI-Review Runde 1 — verbindliche Bausteine für Buttons/Card/FAQ/Badge/
   Tile-Raster über App-Layout, Login/Register UND die 9 "include"-basierten
   Rechner-Landingpages hinweg (siehe docs/... Auftrag "UX/UI-Review Runde 1").

   Befund: ".btn-teal"/"lp-btn-teal", FAQ-Akkordeon, Badges/Pills und
   Kachel-Raster existierten bislang je Seite eigenständig (siehe
   App/Views/auth/login.php, App/Views/landing/co2rechner.php und Geschwister)
   mit leicht abweichenden Radien/Paddings – "sieht aus wie 4 verschiedene
   Entwickler" (Kundenrückmeldung). Diese Sektion ist ab jetzt die einzige
   Quelle für diese fünf Bausteine.

   Bewusst mit var(--x, var(--y, #fallback))-Ketten geschrieben: base.css
   definiert --color-* / --radius-*, die 9 Rechner-Seiten + Login/Register
   definieren stattdessen ihr eigenes, schlankeres --acc/--bg-card/--border/
   --text/--muted-Set (siehe _calc_head.php) OHNE base.css zu laden (bewusst
   getrennt, s. dortiger Kommentar – ein base.css-Reset auf den historisch
   gewachsenen Standalone-Views hätte ein zu hohes Regressions-Risiko ohne
   Möglichkeit zur visuellen Full-Regression in dieser Runde). Diese Datei
   funktioniert dadurch unabhängig davon, ob base.css auf der Seite geladen
   ist – Farbwerte sind an beiden Stellen ohnehin identisch (#2dd4bf teal).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons (.btn-primary / .btn-outline)
   Ersetzt: .lp-btn-teal, .btn-teal (9 Rechner + login.php), .lp-btn-ghost,
   .btn-ghost (Rechner-Nav), $ctaSolidCls/cta-solid, cta-outline.
   Kontrast-Fix (Kundenrückmeldung): dunkler Text auf Akzentfläche wie im
   CO2-Rechner (~9,7:1), nicht weißer Text (~1,9:1, nicht WCAG-konform).
   Der ":not(.btn)"-Guard sorgt dafür, dass diese Regel nirgends mit dem
   bereits etablierten "<button class="btn btn-primary">"-System aus diesem
   File / base.css kollidiert (dort weiterhin exakt gleiche Farben, nur die
   Struktur kommt von ".btn"/".btn--primary").
   -------------------------------------------------------------------------- */
.btn-primary:not(.btn),
.btn-outline:not(.btn) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2, .5rem);
  padding: var(--space-3, .75rem) var(--space-5, 1.5rem);
  border-radius: var(--radius-md, 12px);
  font-family: inherit;
  font-weight: 700;
  font-size: var(--font-size-base, 1rem);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  border: 1.5px solid transparent;
  white-space: nowrap;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
  /* background/color hier statt in einer separaten .btn-primary,.btn-outline-
     Regel gesetzt: nur ":not(.btn)" (Spezifitaet Klasse+Pseudo-Klasse) schlaegt
     zuverlaessig hoehere Alt-Selektoren wie ".lp-body a { color:inherit }"
     (Klasse+Typ) auf <a>-Elementen. Eine einfache ".btn-primary"-Regel ohne
     Guard verliert gegen ".lp-body a" und der Text erbt die Elternfarbe. */
  background: var(--color-accent, var(--acc, #2dd4bf));
  color: var(--color-bg, #0a1628);
}

.btn-primary:not(.btn):active,
.btn-outline:not(.btn):active { transform: scale(.98); }

.btn-primary:hover {
  background: var(--color-accent-hover, var(--acc-dim, #22b8a8));
}

/* Aus demselben Spezifitaets-Grund wie oben: ":not(.btn)" statt nur
   ".btn-outline", sonst verliert border-color gegen das "border: ...
   transparent"-Shorthand der :not(.btn)-Basisregel oben (die :not(.btn)
   dort hat hoehere Spezifitaet als ein einfaches ".btn-outline"). */
.btn-outline:not(.btn) {
  background: transparent;
  color: var(--color-accent, var(--acc, #2dd4bf));
  border-width: 1.5px;
  border-style: solid;
  border-color: var(--color-accent, var(--acc, #2dd4bf));
}
.btn-outline:hover {
  background: var(--color-accent-bg, var(--acc-dim, rgba(45, 212, 191, .1)));
}

.btn-primary.btn-lg:not(.btn),
.btn-outline.btn-lg:not(.btn) { padding: var(--space-4, 1rem) var(--space-6, 2rem); font-size: var(--font-size-lg, 1.1rem); }
.btn-primary.btn-sm:not(.btn),
.btn-outline.btn-sm:not(.btn) { padding: var(--space-2, .5rem) var(--space-4, 1rem); font-size: var(--font-size-sm, .875rem); border-radius: var(--radius-sm, 8px); }

/* --------------------------------------------------------------------------
   Card (.card) – bereits app-weit vorhanden (s. oben), hier nur die
   Kompatibilitäts-Notiz: .c-card (Rechner) / .lp-mini-card / .feature-card
   münden konzeptionell alle in diese eine Definition (Radius ~18-20px,
   1px Rahmen, Padding var(--spacing-lg)/1.1-1.25rem – Mittelwert der drei
   bisherigen Varianten). Für Kachel-Raster siehe .tile-card weiter unten.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   FAQ-Akkordeon (.faq-accordion / .faq-item)
   Referenz sind die Rechner-Landingpages (aktueller als login.php's alte
   .lp-faq-item-Karten+Plus-Variante): Trennlinien statt Karte, natives
   <details>/<summary> statt Klick-Handler, Chevron-SVG statt Text-Icon.
   Markup: <details class="faq-item"><summary><span>Frage</span><svg
   class="faq-arr">...</svg></summary><p>Antwort</p></details>
   (siehe App/Views/landing/co2rechner.php für den exakten SVG-Pfad).
   -------------------------------------------------------------------------- */
.faq-accordion { max-width: var(--content-max, 700px); margin: 0 auto; }

.faq-item {
  border-bottom: 1px solid var(--color-border, var(--border, rgba(255, 255, 255, .08)));
  padding: var(--space-3, .8rem) 0;
}
.faq-item:last-child { border-bottom: none; }

.faq-item > summary {
  font-weight: 700;
  font-size: var(--font-size-base, .95rem);
  color: var(--color-text, var(--text, #f1f5f9));
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-2, .5rem);
  user-select: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }

.faq-item .faq-arr {
  flex-shrink: 0;
  transition: transform .2s;
  color: var(--color-text-muted, var(--muted, #94a3b8));
}
.faq-item[open] .faq-arr { transform: rotate(180deg); }

.faq-item > p {
  font-size: var(--font-size-sm, .85rem);
  color: var(--color-text-muted, var(--muted, #94a3b8));
  line-height: var(--line-height-loose, 1.65);
  margin: var(--space-2, .45rem) 0 0;
}

/* --------------------------------------------------------------------------
   Badges / Pills (.badge, .badge--pill)
   Ergänzt das bereits vorhandene .badge (oben) um eine Pill-Variante für
   Status-Hinweise wie "Kostenlos · Kein Login nötig" (.c-badge) und die
   Hero-Trust-Chips (.lp-chip) – gleicher Radius/Border/Padding für beide.
   -------------------------------------------------------------------------- */
.badge--pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2, .4rem);
  padding: var(--space-1, .3rem) var(--space-4, .85rem);
  border-radius: 999px;
  font-size: var(--font-size-xs, .78rem);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: none;
  background: var(--color-accent-bg, var(--acc-dim, rgba(45, 212, 191, .1)));
  border: 1px solid var(--color-accent, var(--acc-border, rgba(45, 212, 191, .3)));
  color: var(--color-accent, var(--acc, #2dd4bf));
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Kachel-Raster (.tile-grid / .tile-card)
   Ersetzt .calc-mini-grid/.lp-mini-card (9 Rechner) und die kompakten
   .lp-feature-Kacheln/.feature-card (Landingpage/algenassistent.php) für
   Cross-Link- und Feature-Übersichten. Große 2-spaltige Feature-Sektionen
   mit Screenshot (.calc-feature/.lp-feature) bleiben strukturell eigen,
   nutzen aber dieselben Radius-/Border-/Padding-Werte wie .tile-card.
   -------------------------------------------------------------------------- */
.tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-3, .85rem);
}

.tile-card {
  background: var(--color-bg-card, var(--bg-card, #111f3a));
  border: 1px solid var(--color-border, var(--border, rgba(255, 255, 255, .08)));
  border-radius: var(--radius-md, 14px);
  padding: var(--space-5, 1.1rem);
}
.tile-card h3,
.tile-card__title {
  font-size: var(--font-size-base, .9rem);
  font-weight: 700;
  margin: 0 0 var(--space-2, .35rem);
  color: var(--color-text, var(--text, #f1f5f9));
}
.tile-card p,
.tile-card__text {
  font-size: var(--font-size-sm, .82rem);
  color: var(--color-text-muted, var(--muted, #94a3b8));
  margin: 0;
  line-height: var(--line-height-loose, 1.55);
}

/* --------------------------------------------------------------------------
   Tooltip (.tooltip)
   -------------------------------------------------------------------------- */
.tooltip-wrapper {
  position: relative;
  display: inline-flex;
}

.tooltip {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  font-size: var(--font-size-xs);
  color: var(--color-text);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
  z-index: 50;
  box-shadow: var(--shadow-md);
}

.tooltip-wrapper:hover .tooltip {
  opacity: 1;
}